MD Editor: Added plaintext/cm switching

Also aligned the construction of the inputs where possible.

resources/js/markdown/codemirror.ts

@@ -1,25 +1,48 @@
-import {provideKeyBindings} from './shortcuts';
-import {EditorView, ViewUpdate} from "@codemirror/view";
-import {MarkdownEditor} from "./index.mjs";
+import {EditorView, KeyBinding, ViewUpdate} from "@codemirror/view";
 import {CodeModule} from "../global";
 import {MarkdownEditorEventMap} from "./dom-handlers";
+import {MarkdownEditorShortcutMap} from "./shortcuts";
+
+/**
+ * Convert editor shortcuts to CodeMirror keybinding format.
+ */
+export function shortcutsToKeyBindings(shortcuts: MarkdownEditorShortcutMap): KeyBinding[] {
+    const keyBindings = [];
+
+    const wrapAction = (action: () => void) => () => {
+        action();
+        return true;
+    };
+
+    for (const [shortcut, action] of Object.entries(shortcuts)) {
+        keyBindings.push({key: shortcut, run: wrapAction(action), preventDefault: true});
+    }
+
+    return keyBindings;
+}
 
 /**
  * Initiate the codemirror instance for the Markdown editor.
  */
-export function init(editor: MarkdownEditor, Code: CodeModule, domEventHandlers: MarkdownEditorEventMap): EditorView {
+export async function init(
+    input: HTMLTextAreaElement,
+    shortcuts: MarkdownEditorShortcutMap,
+    domEventHandlers: MarkdownEditorEventMap,
+    onChange: () => void
+): Promise<EditorView> {
+    const Code = await window.importVersioned('code') as CodeModule;
+
     function onViewUpdate(v: ViewUpdate) {
         if (v.docChanged) {
-            editor.actions.updateAndRender();
+            onChange();
         }
     }
 
-
     const cm = Code.markdownEditor(
-        editor.config.inputEl,
+        input,
         onViewUpdate,
         domEventHandlers,
-        provideKeyBindings(editor),
+        shortcutsToKeyBindings(shortcuts),
     );
 
     // Add editor view to the window for easy access/debugging.