Package editor into its own script

1 files changed, 58 insertions, 50 deletions

diff --git a/src/ts/editor.ts b/src/ts/editor.ts
index 2d2a3da..ebc6b9b 100644
--- a/src/ts/editor.ts
+++ b/src/ts/editor.ts
@@ -61,7 +61,10 @@ function highlightWhitespace() {
 
 // Relative line numbers that update on cursor movement
 class RelativeLineNumberMarker extends GutterMarker {
-    constructor(private lineNo: number, private currentLine: number) {
+    constructor(
+        private lineNo: number,
+        private currentLine: number
+    ) {
         super();
     }
 
@@ -184,50 +187,53 @@ const lightTheme = EditorView.theme({
     },
 });
 
-const darkTheme = EditorView.theme({
-    '&': {
-        backgroundColor: 'var(--surface)',
-        color: 'var(--text)',
-    },
-    '.cm-content': {
-        caretColor: 'var(--primary)',
-        fontFamily: 'var(--font-mono)',
-        fontSize: '0.875rem',
-        paddingLeft: '0',
-    },
-    '.cm-gutters': {
-        backgroundColor: 'var(--bg)',
-        color: 'var(--muted)',
-        border: 'none',
-        borderRight: '1px solid var(--border)',
-    },
-    '.cm-activeLineGutter': {
-        backgroundColor: 'rgba(229, 106, 166, 0.2)',
-        color: 'var(--text)',
-    },
-    '.cm-activeLine': {
-        backgroundColor: 'rgba(240, 106, 166, 0.08)',
-    },
-    '.cm-selectionBackground': {
-        backgroundColor: 'rgba(240, 106, 166, 0.45) !important',
-    },
-    '&.cm-focused .cm-selectionBackground': {
-        backgroundColor: 'rgba(240, 106, 166, 0.45) !important',
-    },
-    '&.cm-focused .cm-selectionMatch': {
-        backgroundColor: 'rgba(182, 156, 255, 0.35) !important',
-    },
-    '.cm-cursor': {
-        borderLeftColor: 'var(--primary)',
-    },
-    '.cm-whitespace::before': {
-        content: '"·"',
-        position: 'absolute',
-        opacity: '0.25',
-        color: 'var(--muted)',
-        pointerEvents: 'none',
+const darkTheme = EditorView.theme(
+    {
+        '&': {
+            backgroundColor: 'var(--surface)',
+            color: 'var(--text)',
+        },
+        '.cm-content': {
+            caretColor: 'var(--primary)',
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.875rem',
+            paddingLeft: '0',
+        },
+        '.cm-gutters': {
+            backgroundColor: 'var(--bg)',
+            color: 'var(--muted)',
+            border: 'none',
+            borderRight: '1px solid var(--border)',
+        },
+        '.cm-activeLineGutter': {
+            backgroundColor: 'rgba(229, 106, 166, 0.2)',
+            color: 'var(--text)',
+        },
+        '.cm-activeLine': {
+            backgroundColor: 'rgba(240, 106, 166, 0.08)',
+        },
+        '.cm-selectionBackground': {
+            backgroundColor: 'rgba(240, 106, 166, 0.45) !important',
+        },
+        '&.cm-focused .cm-selectionBackground': {
+            backgroundColor: 'rgba(240, 106, 166, 0.45) !important',
+        },
+        '&.cm-focused .cm-selectionMatch': {
+            backgroundColor: 'rgba(182, 156, 255, 0.35) !important',
+        },
+        '.cm-cursor': {
+            borderLeftColor: 'var(--primary)',
+        },
+        '.cm-whitespace::before': {
+            content: '"·"',
+            position: 'absolute',
+            opacity: '0.25',
+            color: 'var(--muted)',
+            pointerEvents: 'none',
+        },
     },
-}, { dark: true });
+    { dark: true }
+);
 
 interface EditorOptions {
     parent: HTMLElement;
@@ -254,9 +260,10 @@ export function createEditor(options: EditorOptions): EditorView {
             highlightWhitespace(),
             vim(),
             languageExtension(),
-            themeConfig.of(theme === 'dark'
-                ? [darkTheme, syntaxHighlighting(darkHighlighting)]
-                : [lightTheme, syntaxHighlighting(lightHighlighting)]
+            themeConfig.of(
+                theme === 'dark'
+                    ? [darkTheme, syntaxHighlighting(darkHighlighting)]
+                    : [lightTheme, syntaxHighlighting(lightHighlighting)]
             ),
         ],
     });
@@ -271,9 +278,10 @@ export function createEditor(options: EditorOptions): EditorView {
 
 export function setEditorTheme(view: EditorView, theme: 'light' | 'dark'): void {
     view.dispatch({
-        effects: themeConfig.reconfigure(theme === 'dark'
-            ? [darkTheme, syntaxHighlighting(darkHighlighting)]
-            : [lightTheme, syntaxHighlighting(lightHighlighting)]
+        effects: themeConfig.reconfigure(
+            theme === 'dark'
+                ? [darkTheme, syntaxHighlighting(darkHighlighting)]
+                : [lightTheme, syntaxHighlighting(lightHighlighting)]
         ),
     });
 }