MD Editor: Finished conversion to Typescript

2025-08-07 23:03:00 +03:00 · 2025-07-20 15:05:19 +01:00
parent 7bbf591a7f
commit 61adc735c8
9 changed files with 188 additions and 138 deletions
--- a/resources/js/markdown/settings.ts
+++ b/resources/js/markdown/settings.ts
@@ -0,0 +1,82 @@
+type ChangeListener = (value: boolean|number) => void;
+
+export class Settings {
+    protected changeListeners: Record<string, ChangeListener[]> = {};
+
+    protected settingMap: Record<string, boolean|number> = {
+        scrollSync: true,
+        showPreview: true,
+        editorWidth: 50,
+        plainEditor: false,
+    };
+
+    constructor(settingInputs: HTMLInputElement[]) {
+        this.loadFromLocalStorage();
+        this.applyToInputs(settingInputs);
+        this.listenToInputChanges(settingInputs);
+    }
+
+    protected applyToInputs(inputs: HTMLInputElement[]): void {
+        for (const input of inputs) {
+            const name = input.getAttribute('name')?.replace('md-', '');
+            if (name && name in this.settingMap) {
+                const value = this.settingMap[name];
+                if (typeof value === 'boolean') {
+                    input.checked = value;
+                } else {
+                    input.value = value.toString();
+                }
+            }
+        }
+    }
+
+    protected listenToInputChanges(inputs: HTMLInputElement[]): void {
+        for (const input of inputs) {
+            input.addEventListener('change', () => {
+                const name = input.getAttribute('name')?.replace('md-', '');
+                if (name && name in this.settingMap) {
+                    let value = (input.type === 'checkbox') ? input.checked : Number(input.value);
+                    this.set(name, value);
+                }
+            });
+        }
+    }
+
+    protected loadFromLocalStorage(): void {
+        const lsValString = window.localStorage.getItem('md-editor-settings');
+        if (!lsValString) {
+            return;
+        }
+
+        try {
+            const lsVals = JSON.parse(lsValString);
+            for (const [key, value] of Object.entries(lsVals)) {
+                if (value !== null && value !== undefined && key in this.settingMap) {
+                    this.settingMap[key] = value as boolean|number;
+                }
+            }
+        } catch (error) {
+            console.warn('Failed to parse settings from localStorage:', error);
+        }
+    }
+
+    public set(key: string, value: boolean|number): void {
+        this.settingMap[key] = value;
+        window.localStorage.setItem('md-editor-settings', JSON.stringify(this.settingMap));
+
+        const listeners = this.changeListeners[key] || [];
+        for (const listener of listeners) {
+            listener(value);
+        }
+    }
+
+    public get(key: string): number|boolean|null {
+        return this.settingMap[key] ?? null;
+    }
+
+    public onChange(key: string, callback: ChangeListener): void {
+        const listeners = this.changeListeners[key] || [];
+        listeners.push(callback);
+        this.changeListeners[key] = listeners;
+    }
+}