@dodlhuat/basix 1.2.2 → 1.2.3

package/js/editor.js

@@ -2,6 +2,7 @@ class Editor {
     constructor(options = {}) {
         this.undoStack = [];
         this.redoStack = [];
+        this.abortController = new AbortController();
         const editable = document.getElementById('editable');
         if (!editable) {
             throw new Error('Editor: #editable element not found');
@@ -35,23 +36,25 @@ class Editor {
         this.saveState();
     }
     bindToolbar() {
+        const sig = { signal: this.abortController.signal };
         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();
-            });
+            }, sig);
         });
     }
     bindActions() {
+        const sig = { signal: this.abortController.signal };
         document.getElementById('linkBtn')?.addEventListener('click', () => {
             const url = prompt('Enter URL:', 'https://');
             if (url)
                 this.exec('createLink', url);
-        });
+        }, sig);
         const imageFile = document.getElementById('imageFile');
-        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click());
+        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click(), sig);
         imageFile?.addEventListener('change', () => {
             const file = imageFile.files?.[0];
             if (!file)
@@ -64,7 +67,7 @@ class Editor {
             };
             reader.readAsDataURL(file);
             imageFile.value = '';
-        });
+        }, sig);
         document.getElementById('cleanBtn')?.addEventListener('click', () => {
             const sel = window.getSelection();
             if (!sel || sel.rangeCount === 0)
@@ -74,13 +77,13 @@ class Editor {
             range.deleteContents();
             range.insertNode(document.createTextNode(text));
             this.onContentChange();
-        });
-        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
-        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
+        }, sig);
+        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo(), sig);
+        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo(), sig);
         document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
             this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
-        });
+        }, sig);
         // Code action buttons — matched by position within .code-actions
         if (this.code) {
             const code = this.code;
@@ -88,27 +91,27 @@ class Editor {
             codeActions[0]?.addEventListener('click', () => {
                 this.editable.innerHTML = this.sanitizeHTML(code.value);
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[1]?.addEventListener('click', () => {
                 code.value = this.sanitizeHTML(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[2]?.addEventListener('click', () => {
                 code.value = code.value
                     .replace(/\n/g, '')
                     .replace(/>\s+</g, '><')
                     .trim();
-            });
+            }, sig);
         }
         const saveBtn = document.getElementById('saveBtn');
-        saveBtn?.addEventListener('click', () => this.downloadHTML());
+        saveBtn?.addEventListener('click', () => this.downloadHTML(), sig);
         document.getElementById('clearBtn')?.addEventListener('click', () => {
             if (confirm('Clear all content?')) {
                 this.editable.innerHTML = '';
                 this.onContentChange();
             }
-        });
+        }, sig);
     }
     bindKeyboard() {
         const saveBtn = document.getElementById('saveBtn');
@@ -147,19 +150,21 @@ class Editor {
                 e.preventDefault();
                 this.redo();
             }
-        });
+        }, { signal: this.abortController.signal });
     }
     bindEditable() {
-        this.editable.addEventListener('input', () => this.onContentChange());
+        const sig = { signal: this.abortController.signal };
+        this.editable.addEventListener('input', () => this.onContentChange(), sig);
         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());
+        }, sig);
+        this.editable.addEventListener('keyup', () => this.refreshActiveState(), sig);
+        this.editable.addEventListener('mouseup', () => this.refreshActiveState(), sig);
     }
     bindTabs() {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll('.side-tab[data-tab]').forEach(tab => {
             tab.addEventListener('click', () => {
                 const targetId = tab.dataset.tab;
@@ -167,7 +172,7 @@ class Editor {
                 document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('active'));
                 tab.classList.add('active');
                 document.getElementById(targetId)?.classList.add('active');
-            });
+            }, sig);
         });
     }
     onContentChange() {
@@ -178,7 +183,7 @@ class Editor {
         if (this.code)
             this.code.value = this.editable.innerHTML.trim();
         if (this.preview)
-            this.preview.innerHTML = this.editable.innerHTML;
+            this.preview.innerHTML = this.sanitizeHTML(this.editable.innerHTML);
         this.updateWordCount();
     }
     updateWordCount() {
@@ -458,5 +463,8 @@ ${content}
             btn.classList.toggle('active', active);
         });
     }
+    destroy() {
+        this.abortController.abort();
+    }
 }
 export { Editor };

package/js/editor.ts

@@ -12,6 +12,7 @@ class Editor {
     private readonly wordCount: HTMLElement | null;
     private undoStack: string[] = [];
     private redoStack: string[] = [];
+    private abortController = new AbortController();
 
     constructor(options: EditorOptions = {}) {
         const editable = document.getElementById('editable');
@@ -53,24 +54,26 @@ class Editor {
     }
 
     private bindToolbar(): void {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll<HTMLElement>('[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();
-            });
+            }, sig);
         });
     }
 
     private bindActions(): void {
+        const sig = { signal: this.abortController.signal };
         document.getElementById('linkBtn')?.addEventListener('click', () => {
             const url = prompt('Enter URL:', 'https://');
             if (url) this.exec('createLink', url);
-        });
+        }, sig);
 
         const imageFile = document.getElementById('imageFile') as HTMLInputElement;
-        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click());
+        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click(), sig);
         imageFile?.addEventListener('change', () => {
             const file = imageFile.files?.[0];
             if (!file) return;
@@ -82,7 +85,7 @@ class Editor {
             };
             reader.readAsDataURL(file);
             imageFile.value = '';
-        });
+        }, sig);
 
         document.getElementById('cleanBtn')?.addEventListener('click', () => {
             const sel = window.getSelection();
@@ -92,15 +95,15 @@ class Editor {
             range.deleteContents();
             range.insertNode(document.createTextNode(text));
             this.onContentChange();
-        });
+        }, sig);
 
-        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
-        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
+        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo(), sig);
+        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo(), sig);
 
         document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
             this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
-        });
+        }, sig);
 
         // Code action buttons — matched by position within .code-actions
         if (this.code) {
@@ -109,29 +112,29 @@ class Editor {
             codeActions[0]?.addEventListener('click', () => {
                 this.editable.innerHTML = this.sanitizeHTML(code.value);
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[1]?.addEventListener('click', () => {
                 code.value = this.sanitizeHTML(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[2]?.addEventListener('click', () => {
                 code.value = code.value
                     .replace(/\n/g, '')
                     .replace(/>\s+</g, '><')
                     .trim();
-            });
+            }, sig);
         }
 
         const saveBtn = document.getElementById('saveBtn');
-        saveBtn?.addEventListener('click', () => this.downloadHTML());
+        saveBtn?.addEventListener('click', () => this.downloadHTML(), sig);
 
         document.getElementById('clearBtn')?.addEventListener('click', () => {
             if (confirm('Clear all content?')) {
                 this.editable.innerHTML = '';
                 this.onContentChange();
             }
-        });
+        }, sig);
     }
 
     private bindKeyboard(): void {
@@ -154,23 +157,25 @@ class Editor {
             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(); }
-        });
+        }, { signal: this.abortController.signal });
     }
 
     private bindEditable(): void {
-        this.editable.addEventListener('input', () => this.onContentChange());
+        const sig = { signal: this.abortController.signal };
+        this.editable.addEventListener('input', () => this.onContentChange(), sig);
 
         this.editable.addEventListener('paste', (e: ClipboardEvent) => {
             e.preventDefault();
             const text = e.clipboardData?.getData('text/plain') ?? '';
             this.insertText(text);
-        });
+        }, sig);
 
-        this.editable.addEventListener('keyup', () => this.refreshActiveState());
-        this.editable.addEventListener('mouseup', () => this.refreshActiveState());
+        this.editable.addEventListener('keyup', () => this.refreshActiveState(), sig);
+        this.editable.addEventListener('mouseup', () => this.refreshActiveState(), sig);
     }
 
     private bindTabs(): void {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll<HTMLElement>('.side-tab[data-tab]').forEach(tab => {
             tab.addEventListener('click', () => {
                 const targetId = tab.dataset.tab!;
@@ -180,7 +185,7 @@ class Editor {
 
                 tab.classList.add('active');
                 document.getElementById(targetId)?.classList.add('active');
-            });
+            }, sig);
         });
     }
 
@@ -191,7 +196,7 @@ class Editor {
 
     private syncViews(): void {
         if (this.code)    this.code.value          = this.editable.innerHTML.trim();
-        if (this.preview) this.preview.innerHTML   = this.editable.innerHTML;
+        if (this.preview) this.preview.innerHTML   = this.sanitizeHTML(this.editable.innerHTML);
         this.updateWordCount();
     }
 
@@ -477,7 +482,10 @@ ${content}
 
             btn.classList.toggle('active', active);
         });
+    }
 
+    public destroy(): void {
+        this.abortController.abort();
     }
 }
 

package/js/file-uploader.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class FileUploader {
     constructor(elementOrSelector, config = {}) {
         this.files = new Map();
@@ -51,10 +52,10 @@ class FileUploader {
         }
         this.container = container;
         this.container.classList.add('file-uploader');
-        const dropZone = container.querySelector('#drop-zone');
-        const fileInput = container.querySelector('#file-input');
-        const fileList = container.querySelector('#file-list');
-        const uploadBtn = container.querySelector('#upload-btn');
+        const dropZone = container.querySelector('.drop-zone');
+        const fileInput = container.querySelector('.file-input');
+        const fileList = container.querySelector('.file-list');
+        const uploadBtn = container.querySelector('.upload-btn');
         if (!dropZone || !fileInput || !fileList || !uploadBtn) {
             throw new Error('Required elements not found in container');
         }
@@ -119,7 +120,7 @@ class FileUploader {
         const key = this.fileKey(file);
         const item = document.createElement('div');
         item.className = 'file-item';
-        const escapedFileName = this.escapeHtml(file.name);
+        const escapedFileName = escapeHtml(file.name);
         item.innerHTML = `
       <div class="file-item-header">
         <div class="file-info">
@@ -255,11 +256,6 @@ class FileUploader {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
     }
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
     destroy() {
         this.abortControllers.forEach(abort => abort());
         this.abortControllers.clear();

package/js/file-uploader.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface FileData {
     file: File;
     element: HTMLDivElement;
@@ -44,10 +46,10 @@ class FileUploader {
         this.container = container;
         this.container.classList.add('file-uploader');
 
-        const dropZone = container.querySelector<HTMLElement>('#drop-zone');
-        const fileInput = container.querySelector<HTMLInputElement>('#file-input');
-        const fileList = container.querySelector<HTMLElement>('#file-list');
-        const uploadBtn = container.querySelector<HTMLButtonElement>('#upload-btn');
+        const dropZone = container.querySelector<HTMLElement>('.drop-zone');
+        const fileInput = container.querySelector<HTMLInputElement>('.file-input');
+        const fileList = container.querySelector<HTMLElement>('.file-list');
+        const uploadBtn = container.querySelector<HTMLButtonElement>('.upload-btn');
 
         if (!dropZone || !fileInput || !fileList || !uploadBtn) {
             throw new Error('Required elements not found in container');
@@ -182,7 +184,7 @@ class FileUploader {
         const item = document.createElement('div');
         item.className = 'file-item';
 
-        const escapedFileName = this.escapeHtml(file.name);
+        const escapedFileName = escapeHtml(file.name);
 
         item.innerHTML = `
       <div class="file-item-header">
@@ -332,12 +334,6 @@ class FileUploader {
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
     }
 
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
     public destroy(): void {
         this.abortControllers.forEach(abort => abort());
         this.abortControllers.clear();

package/js/flyout-menu.js

@@ -3,6 +3,7 @@ class FlyoutMenu {
         this.closeBtn = null;
         this.submenuToggles = null;
         this.menuLinks = null;
+        this.submenuHandlers = new Map();
         this.options = {
             triggerSelector: '.menu-trigger',
             menuSelector: '#flyoutMenu',
@@ -119,7 +120,9 @@ class FlyoutMenu {
         this.flyoutOverlay?.addEventListener('click', this.close);
         // Submenus
         this.submenuToggles?.forEach(toggle => {
-            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = (e) => this.handleSubmenu(e, toggle);
+            this.submenuHandlers.set(toggle, handler);
+            toggle.addEventListener('click', handler);
         });
         // Close on Link Click
         this.menuLinks?.forEach(link => {
@@ -183,8 +186,11 @@ class FlyoutMenu {
         this.closeBtn?.removeEventListener('click', this.close);
         this.flyoutOverlay?.removeEventListener('click', this.close);
         this.submenuToggles?.forEach(toggle => {
-            toggle.removeEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = this.submenuHandlers.get(toggle);
+            if (handler)
+                toggle.removeEventListener('click', handler);
         });
+        this.submenuHandlers.clear();
         this.menuLinks?.forEach(link => {
             link.removeEventListener('click', this.close);
         });

package/js/flyout-menu.ts

@@ -20,6 +20,7 @@ class FlyoutMenu {
     private closeBtn: HTMLElement | null = null;
     private submenuToggles: NodeListOf<HTMLElement> | null = null;
     private menuLinks: NodeListOf<HTMLAnchorElement> | null = null;
+    private submenuHandlers = new Map<HTMLElement, (e: Event) => void>();
 
     constructor(options: FlyoutMenuOptions = {}) {
         this.options = {
@@ -157,7 +158,9 @@ class FlyoutMenu {
 
         // Submenus
         this.submenuToggles?.forEach(toggle => {
-            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = (e: Event) => this.handleSubmenu(e, toggle);
+            this.submenuHandlers.set(toggle, handler);
+            toggle.addEventListener('click', handler);
         });
 
         // Close on Link Click
@@ -234,8 +237,10 @@ class FlyoutMenu {
         this.flyoutOverlay?.removeEventListener('click', this.close);
 
         this.submenuToggles?.forEach(toggle => {
-            toggle.removeEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = this.submenuHandlers.get(toggle);
+            if (handler) toggle.removeEventListener('click', handler);
         });
+        this.submenuHandlers.clear();
 
         this.menuLinks?.forEach(link => {
             link.removeEventListener('click', this.close);

package/js/gallery.js

@@ -1,5 +1,6 @@
+import { escapeHtml } from './utils.js';
 class MasonryGallery {
-    constructor(containerId, options = {}) {
+    constructor(containerId, options) {
         this.columns = [];
         this.isFetching = false;
         this.resizeObserver = null;
@@ -13,9 +14,6 @@ class MasonryGallery {
                 this.loadMoreImages();
             }
         };
-        this.fetchMockImages = () => {
-            throw Error("Method not implemented.");
-        };
         const container = document.getElementById(containerId);
         if (!container) {
             throw new Error(`Container with id "${containerId}" not found`);
@@ -26,7 +24,7 @@ class MasonryGallery {
             minColumnWidth: options.minColumnWidth ?? 250,
             scrollThreshold: options.scrollThreshold ?? 100,
             reload: 2,
-            fetchFunction: options.fetchFunction ?? this.fetchMockImages,
+            fetchFunction: options.fetchFunction,
         };
         this.init();
     }
@@ -150,19 +148,14 @@ class MasonryGallery {
         const div = document.createElement("div");
         div.className = "masonry-item";
         div.innerHTML = `
-      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
+      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
       <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
+        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
+        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
       </div>
     `;
         return div;
     }
-    escapeHtml(text) {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
-    }
     addToShortestColumn(element) {
         if (this.columns.length === 0)
             return;

package/js/gallery.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface ImageData {
   src: string;
   title: string;
@@ -5,11 +7,11 @@ interface ImageData {
 }
 
 interface MasonryGalleryOptions {
+  fetchFunction: () => Promise<ImageData[]>;
   minColumnWidth?: number;
   scrollThreshold?: number;
   loaderSelector?: string;
   reload?: number;
-  fetchFunction?: () => Promise<ImageData[]>;
 }
 
 class MasonryGallery {
@@ -22,7 +24,7 @@ class MasonryGallery {
   private abortController: AbortController | null = null;
   private reloaded = 0;
 
-  constructor(containerId: string, options: MasonryGalleryOptions = {}) {
+  constructor(containerId: string, options: MasonryGalleryOptions) {
     const container = document.getElementById(containerId);
     if (!container) {
       throw new Error(`Container with id "${containerId}" not found`);
@@ -34,7 +36,7 @@ class MasonryGallery {
       minColumnWidth: options.minColumnWidth ?? 250,
       scrollThreshold: options.scrollThreshold ?? 100,
       reload: 2,
-      fetchFunction: options.fetchFunction ?? this.fetchMockImages,
+      fetchFunction: options.fetchFunction,
     };
 
     this.init();
@@ -159,10 +161,6 @@ class MasonryGallery {
     }
   }
 
-  private fetchMockImages = (): Promise<ImageData[]> => {
-    throw Error("Method not implemented.");
-  };
-
   private renderImages(imageDataList: ImageData[]): void {
     // Sort columns by current height so we start filling from the shortest.
     // Then round-robin across them — this avoids the problem where unloaded
@@ -196,22 +194,16 @@ class MasonryGallery {
     div.className = "masonry-item";
 
     div.innerHTML = `
-      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
+      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
       <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
+        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
+        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
       </div>
     `;
 
     return div;
   }
 
-  private escapeHtml(text: string): string {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
   private addToShortestColumn(element: HTMLElement): void {
     if (this.columns.length === 0) return;
 

package/js/group-picker.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class GroupPicker {
     constructor(selector, data, options = {}) {
         // State
@@ -39,9 +40,10 @@ class GroupPicker {
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
       <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
-      <input type="text" placeholder="${this.options.searchPlaceholder}" />
+      <input type="text" />
     `;
         this.searchInput = searchWrap.querySelector('input');
+        this.searchInput.placeholder = this.options.searchPlaceholder;
         // List
         this.listEl = document.createElement('div');
         this.listEl.className = 'group-picker__list';
@@ -95,7 +97,7 @@ class GroupPicker {
         label.className = 'group-picker__group-label';
         label.innerHTML = query && groupMatches
             ? this.highlightText(group.label, query)
-            : group.label;
+            : escapeHtml(group.label);
         if (hasChildren) {
             // Chevron — Basix font icon
             const chevron = document.createElement('span');
@@ -134,7 +136,7 @@ class GroupPicker {
                 const subEl = document.createElement('span');
                 subEl.className = 'chip clickable group-picker__subgroup';
                 subEl.dataset.subId = sub.id;
-                subEl.innerHTML = query ? this.highlightText(sub.label, query) : sub.label;
+                subEl.innerHTML = query ? this.highlightText(sub.label, query) : escapeHtml(sub.label);
                 const isSubSelected = this.selectedSubs.get(group.id)?.has(sub.id) ?? false;
                 if (isSubSelected)
                     subEl.classList.add('is-selected');
@@ -290,11 +292,12 @@ class GroupPicker {
         }));
     }
     highlightText(text, query) {
+        const safeText = escapeHtml(text);
         if (!query)
-            return text;
-        const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const regex = new RegExp(`(${escaped})`, 'gi');
-        return text.replace(regex, '<mark>$1</mark>');
+            return safeText;
+        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escapedQuery})`, 'gi');
+        return safeText.replace(regex, '<mark>$1</mark>');
     }
     // Public API
     getSelection() {