Connected md editor settings to logic for functionality

resources/js/markdown/codemirror.js

@@ -24,7 +24,13 @@ export async function init(editor) {
 
     // Handle scroll to sync display view
     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
-    cm.on('scroll', instance => onScrollDebounced(instance));
+    let syncActive = editor.settings.get('scrollSync');
+    editor.settings.onChange('scrollSync', val => syncActive = val);
+    cm.on('scroll', instance => {
+        if (syncActive) {
+            onScrollDebounced(instance);
+        }
+    });
 
     // Handle image paste
     cm.on('paste', (cm, event) => {

resources/js/markdown/display.js

@@ -17,6 +17,14 @@ export class Display {
         } else {
             this.container.addEventListener('load', this.onLoad.bind(this));
         }
+
+        this.updateVisibility(editor.settings.get('showPreview'));
+        editor.settings.onChange('showPreview', show => this.updateVisibility(show));
+    }
+
+    updateVisibility(show) {
+        const wrap = this.container.closest('.markdown-editor-wrap');
+        wrap.style.display = show ? null : 'none';
     }
 
     onLoad() {

resources/js/markdown/editor.js

@@ -1,6 +1,7 @@
 import {Markdown} from "./markdown";
 import {Display} from "./display";
 import {Actions} from "./actions";
+import {Settings} from "./settings";
 import {listen} from "./common-events";
 import {init as initCodemirror} from "./codemirror";
 
@@ -18,6 +19,7 @@ export async function init(config) {
     const editor = {
         config,
         markdown: new Markdown(),
+        settings: new Settings(config.settings),
     };
 
     editor.actions = new Actions(editor);
@@ -38,6 +40,7 @@ export async function init(config) {
  * @property {HTMLTextAreaElement} inputEl
  * @property {String} drawioUrl
  * @property {Object<String, String>} text
+ * @property {Object<String, any>} settings
  */
 
 /**
@@ -47,4 +50,5 @@ export async function init(config) {
  * @property {Markdown} markdown
  * @property {Actions} actions
  * @property {CodeMirror} cm
+ * @property {Settings} settings
  */

resources/js/markdown/settings.js

@@ -0,0 +1,40 @@
+import {kebabToCamel} from "../services/text";
+
+
+export class Settings {
+
+    constructor(initialSettings) {
+        this.settingMap = {};
+        this.changeListeners = {};
+        this.merge(initialSettings);
+    }
+
+    set(key, value) {
+        key = this.normaliseKey(key);
+        this.settingMap[key] = value;
+        for (const listener of (this.changeListeners[key] || [])) {
+            listener(value);
+        }
+    }
+
+    get(key) {
+        return this.settingMap[this.normaliseKey(key)] || null;
+    }
+
+    merge(settings) {
+        for (const [key, value] of Object.entries(settings)) {
+            this.set(key, value);
+        }
+    }
+
+    onChange(key, callback) {
+        key = this.normaliseKey(key);
+        const listeners = this.changeListeners[this.normaliseKey(key)] || [];
+        listeners.push(callback);
+        this.changeListeners[this.normaliseKey(key)] = listeners;
+    }
+
+    normaliseKey(key) {
+        return kebabToCamel(key.replace('md-', ''));
+    }
+}