update: hover;

update: disable auto-save.

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/editor/extensions/index.ts

@@ -7,3 +7,4 @@ export {
 
 export { createDuplicateKeyLinter } from './duplicates';
 export { createNestedKeyPlugin, createSystemFieldStylePlugin } from './highlighting';
+export { createLineHoverPlugin } from './hover';

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/editor/helpers/constants.ts

@@ -5,9 +5,11 @@ export const SYSTEM_KEYS = new Set(['$id:', '$createdAt:', '$updatedAt:']);
 // timing constants
 export const LINTER_DELAY = 250;
 export const DEBOUNCE_DELAY = 200;
-export const AUTOSAVE_DELAY = 2000;
 export const SUGGESTIONS_HIDE_DELAY = 3000;
 
+export const AUTOSAVE_DELAY = 2000;
+export const ENABLE_AUTOSAVE = false;
+
 // regex patterns
 /* export const UNQUOTED_KEY_REGEX = /([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g; */
 export const INDENT_REGEX = /^[\t ]*/;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/editor/view.svelte

@@ -58,7 +58,8 @@
         createReadOnlyRangesFilter,
         createNestedKeyPlugin,
         createDuplicateKeyLinter,
-        createSystemFieldStylePlugin
+        createSystemFieldStylePlugin,
+        createLineHoverPlugin
     } from './extensions';
     import {
         ALLOWED_DOLLAR_PROPS,
@@ -71,7 +72,8 @@
         WHITESPACE_REGEX,
         WHITESPACE_ONLY_REGEX,
         SKELETON_LINES,
-        getIndent
+        getIndent,
+        ENABLE_AUTOSAVE
     } from './helpers/constants';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { ID } from '@appwrite.io/console';
@@ -938,6 +940,7 @@
             createNestedKeyPlugin(),
             createDuplicateKeyLinter({ delay: LINTER_DELAY }),
             createSystemFieldStylePlugin(() => isNew && !hasUserContent),
+            createLineHoverPlugin(),
             highlightSelectionMatches(),
             // Clear selection after fold/unfold to prevent split highlighting
             EditorView.updateListener.of((update) => {
@@ -1000,7 +1003,11 @@
             customTheme,
             wrapCompartment.of(wrapLines ? EditorView.lineWrapping : []),
             EditorView.updateListener.of((update) => {
-                if (update.docChanged || update.transactions.some((tr) => tr.effects.length > 0)) {
+                const hasNonHoverEffects = update.transactions.some((tr) => {
+                    if (!tr.effects.length) return false;
+                    return tr.annotation(Transaction.userEvent) !== 'appwrite:hover';
+                });
+                if (update.docChanged || hasNonHoverEffects) {
                     const summary = getLintWarningSummary(update.state);
                     warningMessage = summary.message;
                 }
@@ -1089,20 +1096,25 @@
                         }
 
                         // Set new auto-save timer
-                        autoSaveTimer = setTimeout(() => {
-                            const parseCache = editorView?.state.field(json5ParseCache, false);
-                            if (parseCache?.err || errorMessage) {
-                                autoSaveTimer = null;
-                                return;
-                            }
-                            if (editorView && getLintWarningSummary(editorView.state).hasWarning) {
-                                autoSaveTimer = null;
-                                return;
-                            }
+                        if (ENABLE_AUTOSAVE) {
+                            autoSaveTimer = setTimeout(() => {
+                                const parseCache = editorView?.state.field(json5ParseCache, false);
+                                if (parseCache?.err || errorMessage) {
+                                    autoSaveTimer = null;
+                                    return;
+                                }
+                                if (
+                                    editorView &&
+                                    getLintWarningSummary(editorView.state).hasWarning
+                                ) {
+                                    autoSaveTimer = null;
+                                    return;
+                                }
 
-                            handleSave();
-                            autoSaveTimer = null;
-                        }, AUTOSAVE_DELAY);
+                                handleSave();
+                                autoSaveTimer = null;
+                            }, AUTOSAVE_DELAY);
+                        }
                     }
                 }, DEBOUNCE_DELAY);
             }),
@@ -1275,6 +1287,10 @@
                         </Tooltip>
                     {/if}
 
+                    <Button secondary size="xs" disabled={!hasDataChanged} on:click={handleSave}>
+                        Save
+                    </Button>
+
                     <Tooltip placement="top">
                         <Button
                             icon
@@ -1485,6 +1501,14 @@
             background-color: var(--overlay-neutral-pressed) !important;
         }
 
+        :global(.cm-hovered-line) {
+            background-color: var(--overlay-neutral-hover);
+        }
+
+        :global(.cm-gutterElement.cm-hovered-lineGutter) {
+            background-color: var(--overlay-neutral-hover);
+        }
+
         // Subtle indicator for read-only system-field lines
         :global(.cm-readOnlyLine) {
             cursor: not-allowed;
@@ -1500,6 +1524,8 @@
 
         // Syntax highlighting
         // Property names (keys) must use neutral color with priority
+        :global(.cm-string),
+        :global(.cm-number),
         :global(.cm-propertyName) {
             font-weight: 400;
             font-style: normal;