@dodlhuat/basix 1.2.1 → 1.2.3

package/js/tooltip.ts

@@ -7,6 +7,9 @@ interface TooltipOptions {
     offset?: number;
     delay?: number;
     className?: string;
+    /** Set to true when content is trusted HTML (e.g. from data-tooltip-id).
+     *  Defaults to false — content is treated as plain text and escaped. */
+    isHtml?: boolean;
 }
 
 class Tooltip {
@@ -27,7 +30,8 @@ class Tooltip {
             position: options.position ?? 'auto',
             offset: options.offset ?? 8,
             delay: options.delay ?? 0,
-            className: options.className ?? ''
+            className: options.className ?? '',
+            isHtml: options.isHtml ?? false,
         };
 
         this.attachEvents();
@@ -41,7 +45,7 @@ class Tooltip {
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
 
             if (content) {
-                new Tooltip(trigger, content, { position, className });
+                new Tooltip(trigger, content, { position, className, isHtml: false });
             }
         });
 
@@ -56,7 +60,7 @@ class Tooltip {
                 const contentElement = document.getElementById(contentId);
                 if (contentElement) {
                     const content = contentElement.innerHTML;
-                    new Tooltip(trigger, content, { position, className });
+                    new Tooltip(trigger, content, { position, className, isHtml: true });
                 }
             }
         });
@@ -113,7 +117,15 @@ class Tooltip {
         tooltip.className = 'tooltip';
         tooltip.id = `tooltip-${++Tooltip.idCounter}`;
         tooltip.setAttribute('role', 'tooltip');
-        tooltip.innerHTML = `<div class="tooltip-content">${this.content}</div>`;
+
+        const tooltipContent = document.createElement('div');
+        tooltipContent.className = 'tooltip-content';
+        if (this.options.isHtml) {
+            tooltipContent.innerHTML = this.content;
+        } else {
+            tooltipContent.textContent = this.content;
+        }
+        tooltip.appendChild(tooltipContent);
 
         if (this.options.className) {
             tooltip.classList.add(this.options.className);

package/js/tree.js

@@ -168,6 +168,10 @@ class TreeComponent {
             }
         });
     }
+    destroy() {
+        this.container.innerHTML = '';
+        this.selectedNode = null;
+    }
     getSelectedNode() {
         return this.selectedNode;
     }

package/js/tree.ts

@@ -215,6 +215,11 @@ class TreeComponent {
     });
   }
 
+  public destroy(): void {
+    this.container.innerHTML = '';
+    this.selectedNode = null;
+  }
+
   public getSelectedNode(): TreeNode | null {
     return this.selectedNode;
   }

package/js/utils.js

@@ -66,4 +66,32 @@ const utils = {
         return element.offsetParent === null;
     }
 };
-export { utils };
+/**
+ * Escape a plain-text string so it is safe to inject into innerHTML.
+ * Use this whenever inserting user-controlled strings into HTML templates.
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+/**
+ * Sanitize an HTML string by removing dangerous elements and attributes
+ * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
+ * Use this when a component intentionally accepts rich HTML from callers.
+ */
+function 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;
+}
+export { utils, escapeHtml, sanitizeHtml };

package/js/utils.ts

@@ -81,4 +81,39 @@ const utils: Utils = {
     }
 };
 
-export { utils };
+/**
+ * Escape a plain-text string so it is safe to inject into innerHTML.
+ * Use this whenever inserting user-controlled strings into HTML templates.
+ */
+function escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+/**
+ * Sanitize an HTML string by removing dangerous elements and attributes
+ * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
+ * Use this when a component intentionally accepts rich HTML from callers.
+ */
+function sanitizeHtml(html: string): string {
+    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;
+}
+
+export { utils, escapeHtml, sanitizeHtml };

package/js/virtual-dropdown.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class VirtualDropdown {
     constructor(config) {
         const containerElement = typeof config.container === 'string'
@@ -30,7 +31,7 @@ class VirtualDropdown {
     renderBase() {
         this.container.innerHTML = `
       <div class="dropdown-trigger" tabindex="0" role="button" aria-haspopup="listbox" aria-expanded="false">
-        <span class="trigger-text">${this.escapeHtml(this.placeholder)}</span>
+        <span class="trigger-text">${escapeHtml(this.placeholder)}</span>
         <span class="trigger-arrow" aria-hidden="true">▼</span>
       </div>
       <div class="dropdown-menu" role="listbox">
@@ -146,14 +147,14 @@ class VirtualDropdown {
             const isSelected = this.selectedValues.has(opt.value);
             return `
           <div class="dropdown-item ${isSelected ? 'selected' : ''}"
-               data-value="${this.escapeHtml(String(opt.value))}"
+               data-value="${escapeHtml(String(opt.value))}"
                data-idx="${realIdx}"
                role="option"
                aria-selected="${isSelected}"
                tabindex="0"
                style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">
             ${this.multiSelect ? `<input type="checkbox" ${isSelected ? 'checked' : ''} tabindex="-1" aria-hidden="true">` : ''}
-            <span class="item-label">${this.escapeHtml(opt.label)}</span>
+            <span class="item-label">${escapeHtml(opt.label)}</span>
           </div>
         `;
         })
@@ -221,11 +222,6 @@ class VirtualDropdown {
             }
         }
     }
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
     getValue() {
         return Array.from(this.selectedValues);
     }

package/js/virtual-dropdown.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface DropdownOption {
     label: string;
     value: string | number;
@@ -77,7 +79,7 @@ class VirtualDropdown {
     private renderBase(): void {
         this.container.innerHTML = `
       <div class="dropdown-trigger" tabindex="0" role="button" aria-haspopup="listbox" aria-expanded="false">
-        <span class="trigger-text">${this.escapeHtml(this.placeholder)}</span>
+        <span class="trigger-text">${escapeHtml(this.placeholder)}</span>
         <span class="trigger-arrow" aria-hidden="true">▼</span>
       </div>
       <div class="dropdown-menu" role="listbox">
@@ -215,14 +217,14 @@ class VirtualDropdown {
                 const isSelected = this.selectedValues.has(opt.value);
                 return `
           <div class="dropdown-item ${isSelected ? 'selected' : ''}"
-               data-value="${this.escapeHtml(String(opt.value))}"
+               data-value="${escapeHtml(String(opt.value))}"
                data-idx="${realIdx}"
                role="option"
                aria-selected="${isSelected}"
                tabindex="0"
                style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">
             ${this.multiSelect ? `<input type="checkbox" ${isSelected ? 'checked' : ''} tabindex="-1" aria-hidden="true">` : ''}
-            <span class="item-label">${this.escapeHtml(opt.label)}</span>
+            <span class="item-label">${escapeHtml(opt.label)}</span>
           </div>
         `;
             })
@@ -299,12 +301,6 @@ class VirtualDropdown {
         }
     }
 
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
     public getValue(): Array<string | number> {
         return Array.from(this.selectedValues);
     }

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
-  "main": "js/index.js",
   "exports": {
-    ".": "./js/index.js",
     "./css/*": "./css/*",
     "./js/*": "./js/*"
   },