chore(code): add smart tab behaviour

packages/codemirror/src/extensions/custom_tab.ts

@@ -0,0 +1,43 @@
+import { indentLess, indentMore } from "@codemirror/commands";
+import type { KeyBinding } from "@codemirror/view";
+
+const smartIndentWithTab: KeyBinding[] = [
+    {
+        key: "Tab",
+        run({ state, dispatch}) {
+            const { selection } = state;
+
+            for (const range of selection.ranges) {
+                if (!range.empty) {
+                    // Allow default behaviour.
+                    return false;
+                }
+
+                const line = state.doc.lineAt(range.head);
+                const beforeCursor = state.doc.sliceString(line.from, range.head);
+
+                if (/^\s*$/.test(beforeCursor)) {
+                    // Only whitespace before cursor: indent line
+                    return indentMore({state, dispatch});
+                } else {
+                    // Insert a tab character
+                    const cursor = range.head;
+                    dispatch(state.update({
+                        changes: {
+                            from: cursor,
+                            insert: "\t"
+                        },
+                        selection: { anchor: cursor + 1 },
+                        scrollIntoView: true,
+                        userEvent: "input"
+                    }));
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        shift: indentLess
+    },
+]
+export default smartIndentWithTab;

packages/codemirror/src/index.ts

@@ -5,6 +5,7 @@ import { Compartment, type Extension } from "@codemirror/state";
 import { highlightSelectionMatches } from "@codemirror/search";
 import { vim } from "@replit/codemirror-vim";
 import byMimeType from "./syntax_highlighting.js";
+import smartIndentWithTab from "./extensions/custom_tab.js";
 
 type ContentChangedListener = () => void;
 
@@ -45,7 +46,7 @@ export default class CodeMirror extends EditorView {
             keymap.of([
                 ...defaultKeymap,
                 ...historyKeymap,
-                indentWithTab
+                ...smartIndentWithTab
             ])
         ]
 

packages/codemirror/src/syntax_highlighting.ts

@@ -4,7 +4,7 @@ import type { Extension } from "@codemirror/state";
 
 async function buildJavaScript(mimeType: string) {
     const { javascript, esLint } = await import('@codemirror/lang-javascript');
-    const lint = (await import("./eslint.js")).lint;
+    const lint = (await import("./extensions/eslint.js")).lint;
     const extensions: Extension[] = [ javascript() ];
 
     const result = await lint(mimeType);