X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/7bbf591a7fdb46bb0da30669354b8768ac950506..HEAD:/resources/js/markdown/index.mts

diff --git a/resources/js/markdown/index.mts b/resources/js/markdown/index.mts
index 46345ccfd..0a6e974b7 100644
--- a/resources/js/markdown/index.mts
+++ b/resources/js/markdown/index.mts
@@ -4,12 +4,16 @@ import {Actions} from './actions';
 import {Settings} from './settings';
 import {listenToCommonEvents} from './common-events';
 import {init as initCodemirror} from './codemirror';
-import {EditorView} from "@codemirror/view";
+import {MarkdownEditorInput} from "./inputs/interface";
+import {CodemirrorInput} from "./inputs/codemirror";
+import {TextareaInput} from "./inputs/textarea";
+import {provideShortcutMap} from "./shortcuts";
+import {getMarkdownDomEventHandlers} from "./dom-handlers";
 
 export interface MarkdownEditorConfig {
     pageId: string;
     container: Element;
-    displayEl: Element;
+    displayEl: HTMLIFrameElement;
     inputEl: HTMLTextAreaElement;
     drawioUrl: string;
     settingInputs: HTMLInputElement[];
@@ -21,28 +25,43 @@ export interface MarkdownEditor {
     display: Display;
     markdown: Markdown;
     actions: Actions;
-    cm: EditorView;
+    input: MarkdownEditorInput;
     settings: Settings;
 }
 
 /**
  * Initiate a new Markdown editor instance.
- * @param {MarkdownEditorConfig} config
- * @returns {Promise<MarkdownEditor>}
  */
-export async function init(config) {
-    /**
-     * @type {MarkdownEditor}
-     */
+export async function init(config: MarkdownEditorConfig): Promise<MarkdownEditor> {
     const editor: MarkdownEditor = {
         config,
         markdown: new Markdown(),
         settings: new Settings(config.settingInputs),
-    };
+    } as MarkdownEditor;
 
     editor.actions = new Actions(editor);
     editor.display = new Display(editor);
-    editor.cm = await initCodemirror(editor);
+
+    const eventHandlers = getMarkdownDomEventHandlers(editor);
+    const shortcuts = provideShortcutMap(editor);
+    const onInputChange = () => editor.actions.updateAndRender();
+
+    const initCodemirrorInput: () => Promise<MarkdownEditorInput> = async () => {
+        const codeMirror = await initCodemirror(config.inputEl, shortcuts, eventHandlers, onInputChange);
+        return new CodemirrorInput(codeMirror);
+    };
+    const initTextAreaInput: () => Promise<MarkdownEditorInput> = async () => {
+        return new TextareaInput(config.inputEl, shortcuts, eventHandlers, onInputChange);
+    };
+
+    const isPlainEditor = Boolean(editor.settings.get('plainEditor'));
+    editor.input = await (isPlainEditor ? initTextAreaInput() : initCodemirrorInput());
+    editor.settings.onChange('plainEditor', async (value) => {
+        const isPlain = Boolean(value);
+        const newInput = await (isPlain ? initTextAreaInput() : initCodemirrorInput());
+        editor.input.teardown();
+        editor.input = newInput;
+    });
 
     listenToCommonEvents(editor);