Editor update

4 files changed, 33 insertions, 16 deletions

diff --git a/package-lock.json b/package-lock.json
index 87daca8..30985ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -329,9 +329,9 @@
       }
     },
     "node_modules/@emprespresso/codemirror-lang-tabloid": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@emprespresso/codemirror-lang-tabloid/-/codemirror-lang-tabloid-0.2.0.tgz",
-      "integrity": "sha512-9J1yGLXjkVdjhhFnhXMEdFYySk+7SmlrFX/ZMpRikR77EoOc3QAN1MiYafo5mrD6wKRkt0770A3MZsrJSU/ZhQ==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@emprespresso/codemirror-lang-tabloid/-/codemirror-lang-tabloid-0.2.1.tgz",
+      "integrity": "sha512-oXcEgA/DKMX3pqTpmT1ZiAgbXmaAIzAdhRNVHBZttfcoPmU/2qHHn7S0VYjta7pVG0v3NahdpCaz2nWLpI1W2Q==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.20.0",
@@ -1140,9 +1140,9 @@
       }
     },
     "node_modules/fs-extra": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
-      "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz",
+      "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1636,6 +1636,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
       "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/ts/editor-standalone.ts b/src/ts/editor-standalone.ts
index 45e6573..905a3cf 100644
--- a/src/ts/editor-standalone.ts
+++ b/src/ts/editor-standalone.ts
@@ -1,3 +1,4 @@
+import type { EditorView } from 'codemirror';
 import { createEditor, setEditorTheme } from './editor';
 
 // Global API
diff --git a/src/ts/editor.ts b/src/ts/editor.ts
index 1c52569..3884317 100644
--- a/src/ts/editor.ts
+++ b/src/ts/editor.ts
@@ -1,15 +1,16 @@
-import { EditorView, minimalSetup } from 'codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { closeBrackets } from '@codemirror/autocomplete';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorState } from '@codemirror/state';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, GutterMarker, ViewPlugin, gutter } from '@codemirror/view';
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
 import { tabloid } from '@emprespresso/codemirror-lang-tabloid';
-import { EditorState, Compartment } from '@codemirror/state';
-import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { vim } from '@replit/codemirror-vim';
-import { ViewPlugin, Decoration, DecorationSet, gutter, GutterMarker } from '@codemirror/view';
-import { RangeSetBuilder } from '@codemirror/state';
-import { closeBrackets } from '@codemirror/autocomplete';
+import { EditorView, minimalSetup } from 'codemirror';
 
 const themeConfig = new Compartment();
 
@@ -28,7 +29,7 @@ function highlightWhitespace() {
                 this.decorations = this.buildDecorations(view);
             }
 
-            update(update: any) {
+            update(update: ViewUpdate) {
                 if (update.docChanged || update.viewportChanged || update.selectionSet) {
                     this.decorations = this.buildDecorations(update.view);
                 }
@@ -41,7 +42,7 @@ function highlightWhitespace() {
                 // Only show whitespace in selected ranges
                 if (!selection.empty) {
                     const text = view.state.doc.sliceString(selection.from, selection.to);
-                    let pos = selection.from;
+                    const pos = selection.from;
 
                     for (let i = 0; i < text.length; i++) {
                         const char = text[i];
@@ -84,7 +85,7 @@ const relativeLineNumberGutter = ViewPlugin.fromClass(
     class {
         constructor(private view: EditorView) {}
 
-        update(update: any) {
+        update(update: ViewUpdate) {
             // Force update on selection change
             if (update.selectionSet || update.docChanged || update.viewportChanged) {
                 this.view.requestMeasure();
@@ -160,10 +161,17 @@ const lightTheme = EditorView.theme({
         border: 'none',
         borderRight: '1px solid var(--border)',
     },
+    '.cm-lineNumbers': {
+        minWidth: '3ch',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+        width: '100%',
+    },
     '.cm-activeLineGutter': {
         backgroundColor: 'var(--primary-light)',
         color: 'var(--text)',
     },
+
     '.cm-activeLine': {
         backgroundColor: 'rgba(229, 106, 166, 0.08)',
     },
@@ -206,6 +214,12 @@ const darkTheme = EditorView.theme(
             border: 'none',
             borderRight: '1px solid var(--border)',
         },
+        '.cm-lineNumbers': {
+            minWidth: '3ch',
+        },
+        '.cm-lineNumbers .cm-gutterElement': {
+            width: '100%',
+        },
         '.cm-activeLineGutter': {
             backgroundColor: 'rgba(229, 106, 166, 0.2)',
             color: 'var(--text)',
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 3c8c458..73e03e4 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,5 +1,6 @@
 declare module 'prismjs';
 declare module 'prismjs/components/*';
+declare module '@emprespresso/codemirror-lang-tabloid';
 
 interface Window {
     ASSET_BASE?: string;