Cleaned up dark mode styles inc. setting browser color scheme

[bookstack] / resources / js / components / markdown-editor.js

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index 671aa4e65fc6e78351d8c51934b7b224d6227837..373fedf487db79c5d3eb715304efb8f95f2d39d4 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -14,6 +14,7 @@ export class MarkdownEditor extends Component {
 
         this.display = this.$refs.display;
         this.input = this.$refs.input;
+        this.settingContainer = this.$refs.settingContainer;
 
         this.editor = null;
         initEditor({
@@ -25,7 +26,8 @@ export class MarkdownEditor extends Component {
             text: {
                 serverUploadLimit: this.serverUploadLimitText,
                 imageUploadError: this.imageUploadErrorText,
-            }
+            },
+            settings: this.loadSettings(),
         }).then(editor => {
             this.editor = editor;
             this.setupListeners();
@@ -74,12 +76,32 @@ export class MarkdownEditor extends Component {
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 
+        // Setting changes
+        this.settingContainer.addEventListener('change', e => {
+            const actualInput = e.target.parentNode.querySelector('input[type="hidden"]');
+            const name = actualInput.getAttribute('name');
+            const value = actualInput.getAttribute('value');
+            window.$http.patch('/preferences/update-boolean', {name, value});
+            this.editor.settings.set(name, value === 'true');
+        });
+
         // Refresh CodeMirror on container resize
         const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
         const observer = new ResizeObserver(resizeDebounced);
         observer.observe(this.elem);
     }
 
+    loadSettings() {
+        const settings = {};
+        const inputs = this.settingContainer.querySelectorAll('input[type="hidden"]');
+
+        for (const input of inputs) {
+            settings[input.getAttribute('name')] = input.value === 'true';
+        }
+
+        return settings;
+    }
+
     scrollToTextIfNeeded() {
         const queryParams = (new URL(window.location)).searchParams;
         const scrollText = queryParams.get('content-text');