Got markdown editor barely functional

Updated content sync and preview scoll sync to work.
Many features commented out until they can be updated.

resources/js/code/index.mjs

@@ -2,7 +2,7 @@ import {EditorView} from "@codemirror/view"
 import Clipboard from "clipboard/dist/clipboard.min";
 
 // Modes
-import {viewer} from "./setups.js";
+import {viewer, editor} from "./setups.js";
 import {createView, updateViewLanguage} from "./views.js";
 
 /**
@@ -180,25 +180,31 @@ export function updateLayout(cmInstance) {
 /**
  * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem
+ * @param {function} onChange
+ * @param {object} domEventHandlers
  * @returns {*}
  */
-export function markdownEditor(elem) {
+export function markdownEditor(elem, onChange, domEventHandlers) {
     const content = elem.textContent;
-    const config = {
-        value: content,
-        mode: "markdown",
-        lineNumbers: true,
-        lineWrapping: true,
-        theme: getTheme(),
-        scrollPastEnd: true,
-    };
 
-    window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
+    // TODO - Change to pass something else that's useful, probably extension array?
+    // window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
 
-    return CodeMirror(function (elt) {
-        elem.parentNode.insertBefore(elt, elem);
-        elem.style.display = 'none';
-    }, config);
+    const ev = createView({
+        parent: elem.parentNode,
+        doc: content,
+        extensions: [
+            ...editor('markdown'),
+            EditorView.updateListener.of((v) => {
+                onChange(v);
+            }),
+            EditorView.domEventHandlers(domEventHandlers),
+        ],
+    });
+
+    elem.style.display = 'none';
+
+    return ev;
 }
 
 /**
@@ -206,6 +212,7 @@ export function markdownEditor(elem) {
  * @returns {string}
  */
 export function getMetaKey() {
-    let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
+    // TODO - Redo, Is needed? No CodeMirror instance to use.
+    const mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
     return mac ? "Cmd" : "Ctrl";
 }

resources/js/code/setups.js

@@ -1,12 +1,12 @@
 
-import {keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
+import {EditorView, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
     rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
-import {defaultHighlightStyle, syntaxHighlighting, bracketMatching,
-     foldKeymap} from "@codemirror/language"
+import {syntaxHighlighting, bracketMatching} from "@codemirror/language"
 import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
 import {EditorState} from "@codemirror/state"
 
 import {defaultLight} from "./themes";
+import {getLanguageExtension} from "./languages";
 
 export function viewer() {
     return [
@@ -23,8 +23,27 @@ export function viewer() {
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,
-            ...foldKeymap,
         ]),
         EditorState.readOnly.of(true),
     ];
+}
+
+export function editor(language) {
+    return [
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        drawSelection(),
+        dropCursor(),
+        syntaxHighlighting(defaultLight, {fallback: true}),
+        bracketMatching(),
+        rectangularSelection(),
+        highlightActiveLine(),
+        keymap.of([
+            ...defaultKeymap,
+            ...historyKeymap,
+        ]),
+        getLanguageExtension(language, ''),
+    ];
 }