feat(CodeEditor): migrate to svelte code editor

package.json

@@ -54,6 +54,7 @@
     "@bedframe/cli": "^0.0.85",
     "@codemirror/lang-css": "^6.3.0",
     "@codemirror/lang-less": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@million/lint": "latest",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
     "@tailwindcss/forms": "^0.5.9",

src/svelte-interface/components/CodeEditor.svelte

@@ -2,26 +2,27 @@
   import { EditorState } from '@codemirror/state';
   import { highlightSelectionMatches } from '@codemirror/search';
   import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands';
-  import { foldGutter, indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+  import { indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
   import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
-  import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView } from '@codemirror/view'; // dropCursor
+  import { highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView } from '@codemirror/view'; // dropCursor
 
   // Theme
   import { oneDark } from "@codemirror/theme-one-dark";
 
   // Language
   import { css } from "@codemirror/lang-css";
-  import { onMount } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
 
-  function createEditorState(initialContents: string, options = {}) {
+  let editor = $state<HTMLDivElement | null>(null)
+  let view: EditorView | null = null;
+  let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
+
+  function createEditorState(initialContents: string, options = {oneDark: false}) {
       let extensions = [
-          /* lineNumbers(),
-          highlightActiveLineGutter(),
           highlightSpecialChars(),
           history(),
-          foldGutter(),
           drawSelection(),
-          indentUnit.of("    "),
+          indentUnit.of("  "),
           EditorState.allowMultipleSelections.of(true),
           indentOnInput(),
           bracketMatching(),
@@ -38,13 +39,18 @@
               ...historyKeymap,
               ...foldKeymap,
               ...completionKeymap,
-          ]), */
+          ]),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              onChange(update.state.doc.toString())
+            }
+          }),
           css(),
           syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
       ];
 
-      /* if (options.oneDark)
-          extensions.push(oneDark); */
+      if (options.oneDark)
+          extensions.push(oneDark);
 
       return EditorState.create({
           doc: initialContents,
@@ -52,19 +58,22 @@
       });
   }
 
-  function createEditorView(state: any, parent: HTMLElement) {
+  function createEditorView(state: EditorState, parent: HTMLElement) {
       return new EditorView({ state, parent });
   }
 
   onMount(() => {
-    const editor = document.querySelector('#cm-target');
     if (editor) {
-      const state = createEditorState('body {\n  color: red;\n}');
-      const view = createEditorView(state, editor as HTMLElement);
-
-      console.log(view)
+      const state = createEditorState(value);
+      view = createEditorView(state, editor as HTMLElement);
     }
   });
+
+  onDestroy(() => {
+    if (view) {
+      view.destroy();
+    }
+  })
 </script>
 
-<div id="cm-target"></div>
+<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>

src/svelte-interface/index.css

@@ -40,3 +40,8 @@ input {
     opacity: 1;
   }
 }
+
+.cm-editor {
+  width: 100%;
+  min-height: 100px;
+}

src/svelte-interface/pages/themeCreator.svelte

@@ -32,7 +32,6 @@
   })
 
   onMount(async () => {
-    console.log(themeID)
 
     if (themeID) {
       const tempTheme = await getTheme(themeID)
@@ -66,19 +65,17 @@
       <h2 class="text-sm font-bold">{item.title}</h2>
       <p class="text-xs">{item.description}</p>
     </div>
-    <div>
-      {#if item.type === 'switch'}
-        <Switch {...(item.props as SwitchProps)} />
-      {:else if item.type === 'button'}
-        <Button {...(item.props as ButtonProps)} />
-      {:else if item.type === 'slider'}
-        <Slider {...(item.props as SliderProps)} />
-      {:else if item.type === 'colourPicker'}
-        <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
-      {:else if item.type === 'codeEditor'}
-        <CodeEditor /> <!-- {/*...(item.props as CodeEditorProps)*/} -->
-      {/if}
-    </div>
+    {#if item.type === 'switch'}
+      <Switch {...(item.props as SwitchProps)} />
+    {:else if item.type === 'button'}
+      <Button {...(item.props as ButtonProps)} />
+    {:else if item.type === 'slider'}
+      <Slider {...(item.props as SliderProps)} />
+    {:else if item.type === 'colourPicker'}
+      <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
+    {:else if item.type === 'codeEditor'}
+      <CodeEditor {...(item.props as CodeEditorProps)} />
+    {/if}
   </div>
 {/snippet}
 
@@ -148,9 +145,10 @@
         type: 'codeEditor',
         title: 'Custom CSS',
         description: 'Add custom CSS to your theme',
+        direction: 'vertical',
         props: {
           value: theme.CustomCSS,
-          onChange: (value) => theme.CustomCSS = value
+          onChange: (value) => { theme.CustomCSS = value; console.log(theme.CustomCSS) }
         }
       }
     ] as SettingItem[] as setting}