@dodlhuat/basix 1.1.1 → 1.2.1

package/js/editor.js

@@ -1,20 +1,31 @@
 class Editor {
-    constructor() {
+    constructor(options = {}) {
         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');
+        if (!editable) {
+            throw new Error('Editor: #editable element not found');
         }
         this.editable = editable;
-        this.code = code;
-        this.preview = preview;
-        this.sidePanel = sidePanel;
-        this.wordCount = wordCount;
+        this.wordCount = document.getElementById('wordCount');
+        if (options.simple) {
+            this.code = null;
+            this.preview = null;
+            this.sidePanel = document.getElementById('sidePanel');
+            this.sidePanel?.classList.add('hidden');
+        }
+        else {
+            const code = document.getElementById('code');
+            const preview = document.getElementById('preview');
+            const sidePanel = document.getElementById('sidePanel');
+            if (!code || !preview || !sidePanel) {
+                throw new Error('Editor: #code, #preview and #sidePanel are required unless simple: true');
+            }
+            this.code = code;
+            this.preview = preview;
+            this.sidePanel = sidePanel;
+            this.sidePanel.classList.add('hidden');
+        }
         this.bindToolbar();
         this.bindActions();
         this.bindKeyboard();
@@ -22,8 +33,6 @@ class Editor {
         this.bindTabs();
         this.syncViews();
         this.saveState();
-        // Start with side panel hidden
-        this.sidePanel.classList.add('hidden');
     }
     bindToolbar() {
         document.querySelectorAll('[data-cmd]').forEach(btn => {
@@ -69,26 +78,29 @@ class Editor {
         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.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();
-        });
+        if (this.code) {
+            const code = this.code;
+            const codeActions = document.querySelectorAll('.code-actions button');
+            codeActions[0]?.addEventListener('click', () => {
+                this.editable.innerHTML = this.sanitizeHTML(code.value);
+                this.onContentChange();
+            });
+            codeActions[1]?.addEventListener('click', () => {
+                code.value = this.sanitizeHTML(code.value);
+                this.editable.innerHTML = code.value;
+                this.onContentChange();
+            });
+            codeActions[2]?.addEventListener('click', () => {
+                code.value = code.value
+                    .replace(/\n/g, '')
+                    .replace(/>\s+</g, '><')
+                    .trim();
+            });
+        }
         const saveBtn = document.getElementById('saveBtn');
         saveBtn?.addEventListener('click', () => this.downloadHTML());
         document.getElementById('clearBtn')?.addEventListener('click', () => {
@@ -163,8 +175,10 @@ class Editor {
         this.syncViews();
     }
     syncViews() {
-        this.code.value = this.editable.innerHTML.trim();
-        this.preview.innerHTML = this.editable.innerHTML;
+        if (this.code)
+            this.code.value = this.editable.innerHTML.trim();
+        if (this.preview)
+            this.preview.innerHTML = this.editable.innerHTML;
         this.updateWordCount();
     }
     updateWordCount() {
@@ -224,6 +238,15 @@ class Editor {
             case 'insertOrderedList':
                 this.insertList('ol');
                 break;
+            case 'justifyLeft':
+            case 'justifyCenter':
+            case 'justifyRight':
+                this.setAlignment(command);
+                break;
+            case 'foreColor':
+                if (value)
+                    this.setForeColor(value);
+                break;
         }
     }
     insertText(text) {
@@ -344,6 +367,41 @@ class Editor {
         }
         this.onContentChange();
     }
+    setAlignment(cmd) {
+        const align = {
+            justifyLeft: 'left', justifyCenter: 'center', justifyRight: 'right',
+        };
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const container = sel.getRangeAt(0).commonAncestorContainer;
+        let block = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        while (block && block !== this.editable && block.parentElement !== this.editable) {
+            block = block.parentElement;
+        }
+        if (block && block !== this.editable) {
+            block.style.textAlign = align[cmd];
+            this.onContentChange();
+        }
+    }
+    setForeColor(color) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (range.collapsed)
+            return;
+        const span = document.createElement('span');
+        span.style.color = color;
+        span.appendChild(range.extractContents());
+        range.insertNode(span);
+        range.selectNodeContents(span);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this.onContentChange();
+    }
     sanitizeHTML(html) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
@@ -359,12 +417,12 @@ class Editor {
     }
     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>
+        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');