fix(colourPicker): saving presets list at incorrect times

2026-06-06 11:44:40 +00:00 · 2024-10-01 19:50:28 +10:00
parent 1360736dd7
commit 49d4f39584
5 changed files with 124 additions and 41 deletions
@@ -1,4 +1,70 @@
 <script lang="ts">
+  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 { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+  import { lineNumbers, highlightActiveLineGutter, 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'
+
+  function createEditorState(initialContents: string, options = {}) {
+      let extensions = [
+          /* lineNumbers(),
+          highlightActiveLineGutter(),
+          highlightSpecialChars(),
+          history(),
+          foldGutter(),
+          drawSelection(),
+          indentUnit.of("    "),
+          EditorState.allowMultipleSelections.of(true),
+          indentOnInput(),
+          bracketMatching(),
+          closeBrackets(),
+          autocompletion(),
+          rectangularSelection(),
+          crosshairCursor(),
+          highlightActiveLine(),
+          highlightSelectionMatches(),
+          keymap.of([
+              indentWithTab,
+              ...closeBracketsKeymap,
+              ...defaultKeymap,
+              ...historyKeymap,
+              ...foldKeymap,
+              ...completionKeymap,
+          ]), */
+          css(),
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      ];
+
+      /* if (options.oneDark)
+          extensions.push(oneDark); */
+
+      return EditorState.create({
+          doc: initialContents,
+          extensions
+      });
+  }
+
+  function createEditorView(state: any, 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)
+    }
+  });
 </script>

-<div>Code Editor Here</div>
+<div id="cm-target"></div>