@dodlhuat/basix 1.0.0 → 1.1.0

package/js/editor.js

@@ -1,421 +1,404 @@
-class Editor {
-    constructor() {
-        this.undoStack = [];
-        this.redoStack = [];
-
-        const editable = document.getElementById('editable');
-        const code = document.getElementById('code');
-        const preview = document.getElementById('preview');
-        const sidePanel = document.getElementById('sidePanel');
-        const wordCount = document.getElementById('wordCount');
-
-        if (!editable || !code || !preview || !sidePanel) {
-            throw new Error('Editor: Required elements not found');
-        }
-
-        this.editable = editable;
-        this.code = code;
-        this.preview = preview;
-        this.sidePanel = sidePanel;
-        this.wordCount = wordCount;
-
-        this.bindToolbar();
-        this.bindActions();
-        this.bindKeyboard();
-        this.bindEditable();
-        this.bindTabs();
-        this.syncViews();
-        this.saveState();
-
-        // Start with side panel hidden
-        this.sidePanel.classList.add('hidden');
-    }
-
-    bindToolbar() {
-        document.querySelectorAll('[data-cmd]').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const cmd = btn.dataset.cmd;
-                const val = btn.dataset.value ?? null;
-                this.exec(cmd, val);
-                this.editable.focus();
-            });
-        });
-    }
-
-    bindActions() {
-        document.getElementById('linkBtn')?.addEventListener('click', () => {
-            const url = prompt('Enter URL:', 'https://');
-            if (url) this.exec('createLink', url);
-        });
-
-        const imageFile = document.getElementById('imageFile');
-        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click());
-        imageFile?.addEventListener('change', () => {
-            const file = imageFile.files?.[0];
-            if (!file) return;
-            const reader = new FileReader();
-            reader.onload = () => {
-                if (typeof reader.result === 'string') {
-                    this.insertImage(reader.result);
-                }
-            };
-            reader.readAsDataURL(file);
-            imageFile.value = '';
-        });
-
-        document.getElementById('cleanBtn')?.addEventListener('click', () => {
-            const sel = window.getSelection();
-            if (!sel || sel.rangeCount === 0) return;
-            const range = sel.getRangeAt(0);
-            const text = range.toString();
-            range.deleteContents();
-            range.insertNode(document.createTextNode(text));
-            this.onContentChange();
-        });
-
-        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
-        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
-
-        document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
-            this.sidePanel.classList.toggle('hidden');
-            this.syncViews();
-        });
-
-        // Code action buttons — matched by position within .code-actions
-        const codeActions = document.querySelectorAll('.code-actions button');
-        codeActions[0]?.addEventListener('click', () => {
-            this.editable.innerHTML = this.sanitizeHTML(this.code.value);
-            this.onContentChange();
-        });
-        codeActions[1]?.addEventListener('click', () => {
-            this.code.value = this.sanitizeHTML(this.code.value);
-            this.editable.innerHTML = this.code.value;
-            this.onContentChange();
-        });
-        codeActions[2]?.addEventListener('click', () => {
-            this.code.value = this.code.value
-                .replace(/\n/g, '')
-                .replace(/>\s+</g, '><')
-                .trim();
-        });
-
-        const saveBtn = document.getElementById('saveBtn');
-        saveBtn?.addEventListener('click', () => this.downloadHTML());
-
-        document.getElementById('clearBtn')?.addEventListener('click', () => {
-            if (confirm('Clear all content?')) {
-                this.editable.innerHTML = '';
-                this.onContentChange();
-            }
-        });
-    }
-
-    bindKeyboard() {
-        const saveBtn = document.getElementById('saveBtn');
-
-        window.addEventListener('keydown', (e) => {
-            const mod = e.ctrlKey || e.metaKey;
-            if (!mod) return;
-
-            const key = e.key.toLowerCase();
-
-            if (key === 'b') { e.preventDefault(); this.exec('bold'); }
-            else if (key === 'i') { e.preventDefault(); this.exec('italic'); }
-            else if (key === 'u') { e.preventDefault(); this.exec('underline'); }
-            else if (key === 'k') {
-                e.preventDefault();
-                const url = prompt('Enter URL:', 'https://');
-                if (url) this.exec('createLink', url);
-            }
-            else if (key === 's') { e.preventDefault(); saveBtn?.click(); }
-            else if (key === 'z' && !e.shiftKey) { e.preventDefault(); this.undo(); }
-            else if (key === 'y' || (key === 'z' && e.shiftKey)) { e.preventDefault(); this.redo(); }
-        });
-    }
-
-    bindEditable() {
-        this.editable.addEventListener('input', () => this.onContentChange());
-
-        this.editable.addEventListener('paste', (e) => {
-            e.preventDefault();
-            const text = e.clipboardData?.getData('text/plain') ?? '';
-            this.insertText(text);
-        });
-
-        this.editable.addEventListener('keyup', () => this.refreshActiveState());
-        this.editable.addEventListener('mouseup', () => this.refreshActiveState());
-    }
-
-    bindTabs() {
-        document.querySelectorAll('.side-tab[data-tab]').forEach(tab => {
-            tab.addEventListener('click', () => {
-                const targetId = tab.dataset.tab;
-
-                document.querySelectorAll('.side-tab').forEach(t => t.classList.remove('active'));
-                document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('active'));
-
-                tab.classList.add('active');
-                document.getElementById(targetId)?.classList.add('active');
-            });
-        });
-    }
-
-    onContentChange() {
-        this.saveState();
-        this.syncViews();
-    }
-
-    syncViews() {
-        this.code.value = this.editable.innerHTML.trim();
-        this.preview.innerHTML = this.editable.innerHTML;
-        this.updateWordCount();
-    }
-
-    updateWordCount() {
-        if (!this.wordCount) return;
-        const text = this.editable.innerText || '';
-        const words = text.trim().split(/\s+/).filter(w => w.length > 0);
-        const count = words.length;
-        this.wordCount.textContent = `${count} word${count !== 1 ? 's' : ''}`;
-    }
-
-    saveState() {
-        this.undoStack.push(this.editable.innerHTML);
-        if (this.undoStack.length > 100) this.undoStack.shift();
-        this.redoStack = [];
-    }
-
-    undo() {
-        if (this.undoStack.length <= 1) return;
-        this.redoStack.push(this.undoStack.pop());
-        this.editable.innerHTML = this.undoStack[this.undoStack.length - 1];
-        this.syncViews();
-    }
-
-    redo() {
-        if (this.redoStack.length === 0) return;
-        const state = this.redoStack.pop();
-        this.undoStack.push(state);
-        this.editable.innerHTML = state;
-        this.syncViews();
-    }
-
-    exec(command, value = null) {
-        switch (command) {
-            case 'bold': this.toggleInlineStyle('strong'); break;
-            case 'italic': this.toggleInlineStyle('em'); break;
-            case 'underline': this.toggleInlineStyle('u'); break;
-            case 'strikeThrough': this.toggleInlineStyle('s'); break;
-            case 'createLink': if (value) this.createLink(value); break;
-            case 'formatBlock': if (value) this.formatBlock(value); break;
-            case 'insertUnorderedList': this.insertList('ul'); break;
-            case 'insertOrderedList': this.insertList('ol'); break;
-        }
-    }
-
-    insertText(text) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        range.deleteContents();
-        range.insertNode(document.createTextNode(text));
-        range.collapse(false);
-        sel.removeAllRanges();
-        sel.addRange(range);
-
-        this.onContentChange();
-    }
-
-    insertImage(dataUrl) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        const img = document.createElement('img');
-        img.src = dataUrl;
-        img.style.maxWidth = '100%';
-        range.deleteContents();
-        range.insertNode(img);
-
-        range.setStartAfter(img);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-
-        this.onContentChange();
-    }
-
-    toggleInlineStyle(tagName) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        const container = range.commonAncestorContainer;
-        let current = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
-
-        let wrapper = null;
-        while (current && current !== this.editable) {
-            if (current.tagName === tagName.toUpperCase()) {
-                wrapper = current;
-                break;
-            }
-            current = current.parentElement;
-        }
-
-        if (wrapper) {
-            const parent = wrapper.parentNode;
-            while (wrapper.firstChild) {
-                parent?.insertBefore(wrapper.firstChild, wrapper);
-            }
-            parent?.removeChild(wrapper);
-        } else {
-            const contents = range.extractContents();
-            const el = document.createElement(tagName);
-            el.appendChild(contents);
-            range.insertNode(el);
-            range.selectNodeContents(el);
-            sel.removeAllRanges();
-            sel.addRange(range);
-        }
-
-        this.onContentChange();
-    }
-
-    createLink(url) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        const contents = range.extractContents();
-        const link = document.createElement('a');
-        link.href = url;
-        link.appendChild(contents);
-        range.insertNode(link);
-
-        this.onContentChange();
-    }
-
-    formatBlock(tag) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        const container = range.commonAncestorContainer;
-        let blockElement = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
-
-        while (blockElement && blockElement !== this.editable && blockElement.parentElement !== this.editable) {
-            blockElement = blockElement.parentElement;
-        }
-
-        if (blockElement && blockElement !== this.editable) {
-            const newBlock = document.createElement(tag);
-            newBlock.innerHTML = blockElement.innerHTML;
-            blockElement.parentNode?.replaceChild(newBlock, blockElement);
-            this.onContentChange();
-        }
-    }
-
-    insertList(listTag) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        const text = range.toString();
-
-        const list = document.createElement(listTag);
-        const lines = text ? text.split('\n').filter(l => l.trim()) : [''];
-
-        for (const line of lines) {
-            const li = document.createElement('li');
-            li.textContent = line.trim() || '\u200B';
-            list.appendChild(li);
-        }
-
-        range.deleteContents();
-        range.insertNode(list);
-
-        const lastLi = list.lastElementChild;
-        if (lastLi) {
-            range.setStart(lastLi, lastLi.childNodes.length);
-            range.collapse(true);
-            sel.removeAllRanges();
-            sel.addRange(range);
-        }
-
-        this.onContentChange();
-    }
-
-    sanitizeHTML(html) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, 'text/html');
-
-        doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
-
-        doc.querySelectorAll('*').forEach(el => {
-            for (const attr of Array.from(el.attributes)) {
-                if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) {
-                    el.removeAttribute(attr.name);
-                }
-            }
-        });
-
-        return doc.body.innerHTML;
-    }
-
-    downloadHTML() {
-        const content = this.sanitizeHTML(this.editable.innerHTML);
+class Editor {
+    constructor() {
+        this.undoStack = [];
+        this.redoStack = [];
+        const editable = document.getElementById('editable');
+        const code = document.getElementById('code');
+        const preview = document.getElementById('preview');
+        const sidePanel = document.getElementById('sidePanel');
+        const wordCount = document.getElementById('wordCount');
+        if (!editable || !code || !preview || !sidePanel) {
+            throw new Error('Editor: Required elements not found');
+        }
+        this.editable = editable;
+        this.code = code;
+        this.preview = preview;
+        this.sidePanel = sidePanel;
+        this.wordCount = wordCount;
+        this.bindToolbar();
+        this.bindActions();
+        this.bindKeyboard();
+        this.bindEditable();
+        this.bindTabs();
+        this.syncViews();
+        this.saveState();
+        // Start with side panel hidden
+        this.sidePanel.classList.add('hidden');
+    }
+    bindToolbar() {
+        document.querySelectorAll('[data-cmd]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const cmd = btn.dataset.cmd;
+                const val = btn.dataset.value ?? null;
+                this.exec(cmd, val);
+                this.editable.focus();
+            });
+        });
+    }
+    bindActions() {
+        document.getElementById('linkBtn')?.addEventListener('click', () => {
+            const url = prompt('Enter URL:', 'https://');
+            if (url)
+                this.exec('createLink', url);
+        });
+        const imageFile = document.getElementById('imageFile');
+        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click());
+        imageFile?.addEventListener('change', () => {
+            const file = imageFile.files?.[0];
+            if (!file)
+                return;
+            const reader = new FileReader();
+            reader.onload = () => {
+                if (typeof reader.result === 'string') {
+                    this.insertImage(reader.result);
+                }
+            };
+            reader.readAsDataURL(file);
+            imageFile.value = '';
+        });
+        document.getElementById('cleanBtn')?.addEventListener('click', () => {
+            const sel = window.getSelection();
+            if (!sel || sel.rangeCount === 0)
+                return;
+            const range = sel.getRangeAt(0);
+            const text = range.toString();
+            range.deleteContents();
+            range.insertNode(document.createTextNode(text));
+            this.onContentChange();
+        });
+        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
+        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
+        document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
+            this.sidePanel.classList.toggle('hidden');
+            this.syncViews();
+        });
+        // Code action buttons — matched by position within .code-actions
+        const codeActions = document.querySelectorAll('.code-actions button');
+        codeActions[0]?.addEventListener('click', () => {
+            this.editable.innerHTML = this.sanitizeHTML(this.code.value);
+            this.onContentChange();
+        });
+        codeActions[1]?.addEventListener('click', () => {
+            this.code.value = this.sanitizeHTML(this.code.value);
+            this.editable.innerHTML = this.code.value;
+            this.onContentChange();
+        });
+        codeActions[2]?.addEventListener('click', () => {
+            this.code.value = this.code.value
+                .replace(/\n/g, '')
+                .replace(/>\s+</g, '><')
+                .trim();
+        });
+        const saveBtn = document.getElementById('saveBtn');
+        saveBtn?.addEventListener('click', () => this.downloadHTML());
+        document.getElementById('clearBtn')?.addEventListener('click', () => {
+            if (confirm('Clear all content?')) {
+                this.editable.innerHTML = '';
+                this.onContentChange();
+            }
+        });
+    }
+    bindKeyboard() {
+        const saveBtn = document.getElementById('saveBtn');
+        window.addEventListener('keydown', (e) => {
+            const mod = e.ctrlKey || e.metaKey;
+            if (!mod)
+                return;
+            const key = e.key.toLowerCase();
+            if (key === 'b') {
+                e.preventDefault();
+                this.exec('bold');
+            }
+            else if (key === 'i') {
+                e.preventDefault();
+                this.exec('italic');
+            }
+            else if (key === 'u') {
+                e.preventDefault();
+                this.exec('underline');
+            }
+            else if (key === 'k') {
+                e.preventDefault();
+                const url = prompt('Enter URL:', 'https://');
+                if (url)
+                    this.exec('createLink', url);
+            }
+            else if (key === 's') {
+                e.preventDefault();
+                saveBtn?.click();
+            }
+            else if (key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                this.undo();
+            }
+            else if (key === 'y' || (key === 'z' && e.shiftKey)) {
+                e.preventDefault();
+                this.redo();
+            }
+        });
+    }
+    bindEditable() {
+        this.editable.addEventListener('input', () => this.onContentChange());
+        this.editable.addEventListener('paste', (e) => {
+            e.preventDefault();
+            const text = e.clipboardData?.getData('text/plain') ?? '';
+            this.insertText(text);
+        });
+        this.editable.addEventListener('keyup', () => this.refreshActiveState());
+        this.editable.addEventListener('mouseup', () => this.refreshActiveState());
+    }
+    bindTabs() {
+        document.querySelectorAll('.side-tab[data-tab]').forEach(tab => {
+            tab.addEventListener('click', () => {
+                const targetId = tab.dataset.tab;
+                document.querySelectorAll('.side-tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(targetId)?.classList.add('active');
+            });
+        });
+    }
+    onContentChange() {
+        this.saveState();
+        this.syncViews();
+    }
+    syncViews() {
+        this.code.value = this.editable.innerHTML.trim();
+        this.preview.innerHTML = this.editable.innerHTML;
+        this.updateWordCount();
+    }
+    updateWordCount() {
+        if (!this.wordCount)
+            return;
+        const text = this.editable.innerText || '';
+        const words = text.trim().split(/\s+/).filter(w => w.length > 0);
+        const count = words.length;
+        this.wordCount.textContent = `${count} word${count !== 1 ? 's' : ''}`;
+    }
+    saveState() {
+        this.undoStack.push(this.editable.innerHTML);
+        if (this.undoStack.length > 100)
+            this.undoStack.shift();
+        this.redoStack = [];
+    }
+    undo() {
+        if (this.undoStack.length <= 1)
+            return;
+        this.redoStack.push(this.undoStack.pop());
+        this.editable.innerHTML = this.undoStack[this.undoStack.length - 1];
+        this.syncViews();
+    }
+    redo() {
+        if (this.redoStack.length === 0)
+            return;
+        const state = this.redoStack.pop();
+        this.undoStack.push(state);
+        this.editable.innerHTML = state;
+        this.syncViews();
+    }
+    exec(command, value = null) {
+        switch (command) {
+            case 'bold':
+                this.toggleInlineStyle('strong');
+                break;
+            case 'italic':
+                this.toggleInlineStyle('em');
+                break;
+            case 'underline':
+                this.toggleInlineStyle('u');
+                break;
+            case 'strikeThrough':
+                this.toggleInlineStyle('s');
+                break;
+            case 'createLink':
+                if (value)
+                    this.createLink(value);
+                break;
+            case 'formatBlock':
+                if (value)
+                    this.formatBlock(value);
+                break;
+            case 'insertUnorderedList':
+                this.insertList('ul');
+                break;
+            case 'insertOrderedList':
+                this.insertList('ol');
+                break;
+        }
+    }
+    insertText(text) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(text));
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this.onContentChange();
+    }
+    insertImage(dataUrl) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const img = document.createElement('img');
+        img.src = dataUrl;
+        img.style.maxWidth = '100%';
+        range.deleteContents();
+        range.insertNode(img);
+        range.setStartAfter(img);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this.onContentChange();
+    }
+    toggleInlineStyle(tagName) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        let current = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        let wrapper = null;
+        while (current && current !== this.editable) {
+            if (current.tagName === tagName.toUpperCase()) {
+                wrapper = current;
+                break;
+            }
+            current = current.parentElement;
+        }
+        if (wrapper) {
+            const parent = wrapper.parentNode;
+            while (wrapper.firstChild) {
+                parent?.insertBefore(wrapper.firstChild, wrapper);
+            }
+            parent?.removeChild(wrapper);
+        }
+        else {
+            const contents = range.extractContents();
+            const el = document.createElement(tagName);
+            el.appendChild(contents);
+            range.insertNode(el);
+            range.selectNodeContents(el);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        this.onContentChange();
+    }
+    createLink(url) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const contents = range.extractContents();
+        const link = document.createElement('a');
+        link.href = url;
+        link.appendChild(contents);
+        range.insertNode(link);
+        this.onContentChange();
+    }
+    formatBlock(tag) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        let blockElement = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        while (blockElement && blockElement !== this.editable && blockElement.parentElement !== this.editable) {
+            blockElement = blockElement.parentElement;
+        }
+        if (blockElement && blockElement !== this.editable) {
+            const newBlock = document.createElement(tag);
+            newBlock.innerHTML = blockElement.innerHTML;
+            blockElement.parentNode?.replaceChild(newBlock, blockElement);
+            this.onContentChange();
+        }
+    }
+    insertList(listTag) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const text = range.toString();
+        const list = document.createElement(listTag);
+        const lines = text ? text.split('\n').filter(l => l.trim()) : [''];
+        for (const line of lines) {
+            const li = document.createElement('li');
+            li.textContent = line.trim() || '\u200B';
+            list.appendChild(li);
+        }
+        range.deleteContents();
+        range.insertNode(list);
+        const lastLi = list.lastElementChild;
+        if (lastLi) {
+            range.setStart(lastLi, lastLi.childNodes.length);
+            range.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        this.onContentChange();
+    }
+    sanitizeHTML(html) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
+        doc.querySelectorAll('*').forEach(el => {
+            for (const attr of Array.from(el.attributes)) {
+                if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) {
+                    el.removeAttribute(attr.name);
+                }
+            }
+        });
+        return doc.body.innerHTML;
+    }
+    downloadHTML() {
+        const content = this.sanitizeHTML(this.editable.innerHTML);
         const html = `<!doctype html>
 <html lang="en">
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Export</title></head>
 <body>
 ${content}
 </body>
-</html>`;
-        const blob = new Blob([html], { type: 'text/html' });
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = 'document.html';
-        a.click();
-        URL.revokeObjectURL(a.href);
-    }
-
-    refreshActiveState() {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) return;
-
-        const range = sel.getRangeAt(0);
-        const container = range.commonAncestorContainer;
-        const element = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
-
-        document.querySelectorAll('[data-cmd]').forEach(btn => {
-            const cmd = btn.dataset.cmd;
-            let active = false;
-
-            let current = element;
-            while (current && current !== this.editable) {
-                const tag = current.tagName?.toLowerCase();
-                if (
-                    (cmd === 'bold' && (tag === 'strong' || tag === 'b')) ||
-                    (cmd === 'italic' && (tag === 'em' || tag === 'i')) ||
-                    (cmd === 'underline' && tag === 'u') ||
-                    (cmd === 'strikeThrough' && tag === 's')
-                ) {
-                    active = true;
-                    break;
-                }
-                current = current.parentElement;
-            }
-
-            btn.classList.toggle('active', active);
-        });
-    }
-}
-
-export { Editor };
+</html>`;
+        const blob = new Blob([html], { type: 'text/html' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'document.html';
+        a.click();
+        URL.revokeObjectURL(a.href);
+    }
+    refreshActiveState() {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        document.querySelectorAll('[data-cmd]').forEach(btn => {
+            const cmd = btn.dataset.cmd;
+            let active = false;
+            let current = element;
+            while (current && current !== this.editable) {
+                const tag = current.tagName?.toLowerCase();
+                if ((cmd === 'bold' && (tag === 'strong' || tag === 'b')) ||
+                    (cmd === 'italic' && (tag === 'em' || tag === 'i')) ||
+                    (cmd === 'underline' && tag === 'u') ||
+                    (cmd === 'strikeThrough' && tag === 's')) {
+                    active = true;
+                    break;
+                }
+                current = current.parentElement;
+            }
+            btn.classList.toggle('active', active);
+        });
+    }
+}
+export { Editor };