autumnnote 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A modern, lightweight WYSIWYG editor — built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",
@@ -19,7 +19,11 @@
     "prepublishOnly": "npm run build",
     "test": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit",
+    "build:cdn": "vite build --config vite.cdn.config.js",
+    "analyze": "cross-env ANALYZE=1 vite build",
+    "bench": "vitest bench"
   },
   "keywords": [
     "wysiwyg",
@@ -40,12 +44,15 @@
   "author": "Minh Pham",
   "license": "MIT",
   "devDependencies": {
-    "@vitest/browser": "^1.0.0",
-    "eslint": "^8.57.0",
+    "@vitest/browser": "^4.1.2",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.2.0",
     "jsdom": "^29.0.1",
-    "sass": "^1.77.0",
-    "vite": "^5.2.0",
-    "vitest": "^1.6.0"
+    "rollup-plugin-visualizer": "^7.0.1",
+    "sass": "^1.99.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
   },
   "browserslist": [
     "last 2 versions",

package/src/js/Context.js

@@ -201,15 +201,11 @@ export class Context {
     const [moduleName, methodName] = path.split('.');
     const module = this._modules.get(moduleName);
     if (!module) {
-      if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
-        console.warn(`[AutumnNote] invoke: module "${moduleName}" not found (path: "${path}")`);
-      }
+      console.warn(`[AutumnNote] invoke: module "${moduleName}" not found (path: "${path}")`);
       return undefined;
     }
     if (typeof module[methodName] !== 'function') {
-      if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
-        console.warn(`[AutumnNote] invoke: method "${methodName}" not found on module "${moduleName}" (path: "${path}")`);
-      }
+      console.warn(`[AutumnNote] invoke: method "${methodName}" not found on module "${moduleName}" (path: "${path}")`);
       return undefined;
     }
     return module[methodName](...args);

package/src/js/editing/Typing.js

@@ -8,6 +8,15 @@ import { closestPara, isLi } from '../core/dom.js';
 import { execCommand } from './Style.js';
 import { currentRange } from '../core/range.js';
 
+// ---------------------------------------------------------------------------
+// Module-level predicates — defined once, not re-created on every keypress.
+// Previously these were arrow functions inside handleKeydown() which fires
+// at ~120+ events/sec during normal typing.
+// ---------------------------------------------------------------------------
+const _FA_PATTERN = /\bfa-/;
+const isFAIcon = (n) => !!(n && n.nodeName === 'I' && _FA_PATTERN.test(n.className || ''));
+const isZwsAnchor = (n) => !!(n && n.nodeType === Node.TEXT_NODE && (n.textContent === '\u200B' || n.textContent === ''));
+
 /**
  * Handles special keydown behaviour inside the editor.
  * @param {KeyboardEvent} event
@@ -16,8 +25,6 @@ import { currentRange } from '../core/range.js';
  * @returns {boolean} true if the event was consumed
  */
 export function handleKeydown(event, editable, options = {}) {
-  const isFAIcon = (n) => !!(n && n.nodeName === 'I' && /\bfa-/.test(n.className || ''));
-  const isZwsAnchor = (n) => !!(n && n.nodeType === Node.TEXT_NODE && (n.textContent === '\u200B' || n.textContent === ''));
   const moveCaret = (setFn) => {
     const sel = window.getSelection();
     if (!sel) return false;
@@ -51,8 +58,26 @@ export function handleKeydown(event, editable, options = {}) {
         if (r.startOffset === 1 && textNode.textContent === '\u200B' &&
             isFAIcon(textNode.previousSibling)) {
           event.preventDefault();
-          textNode.previousSibling.remove();
+          const parent   = textNode.parentNode;
+          const icon     = textNode.previousSibling;
+          const prevNode = icon.previousSibling; // node before the icon (e.g. ZWS of prior icon)
+          icon.remove();
           textNode.remove();
+          // Explicitly restore the cursor to the node preceding the deleted icon.
+          // Without this, the browser collapses the selection to the parent element
+          // (not a text node), causing the next Backspace to miss Cases A/B and
+          // requiring an extra keypress when two icons are adjacent.
+          const nr = document.createRange();
+          if (prevNode && prevNode.nodeType === Node.TEXT_NODE) {
+            nr.setStart(prevNode, prevNode.textContent.length);
+          } else if (prevNode) {
+            nr.setStartAfter(prevNode);
+          } else if (parent) {
+            nr.setStart(parent, 0);
+          }
+          nr.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(nr);
           return true;
         }
       }

package/src/js/module/Clipboard.js

@@ -124,23 +124,22 @@ export class Clipboard {
    */
   _cleanSocialHtml(html) {
     const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
-    // Unwrap purely presentational wrapper spans/divs with no semantic meaning
-    const UNWRAP_TAGS = new Set(['span', 'div']);
-    let changed = true;
-    // Iteratively unwrap until stable (handles deeply nested span soup)
-    while (changed) {
-      changed = false;
-      doc.querySelectorAll('span, div').forEach((el) => {
-        if (!UNWRAP_TAGS.has(el.tagName.toLowerCase())) return;
-        // Keep if it has a meaningful role (link, heading, list item are handled by parent)
-        if (el.querySelector('a, strong, em, b, i, ul, ol, li, table, img, blockquote, pre, code, h1, h2, h3, h4, h5, h6')) return;
-        // Unwrap — replace el with its children
-        const parent = el.parentNode;
-        if (!parent) return;
-        while (el.firstChild) parent.insertBefore(el.firstChild, el);
-        parent.removeChild(el);
-        changed = true;
-      });
+    // Unwrap purely presentational wrapper spans/divs with no semantic meaning.
+    // Single-pass reverse traversal: querySelectorAll returns elements in document
+    // order, so iterating backwards processes innermost elements first — once a
+    // child is unwrapped its parent may become unwrappable in the same pass.
+    // This replaces the previous O(n²) while-loop that re-queried the whole tree
+    // on every iteration.
+    const candidates = Array.from(doc.querySelectorAll('span, div'));
+    for (let i = candidates.length - 1; i >= 0; i--) {
+      const el = candidates[i];
+      if (!el.parentNode) continue; // already detached by an earlier iteration
+      // Keep if it contains any semantic child element
+      if (el.querySelector('a, strong, em, b, i, ul, ol, li, table, img, blockquote, pre, code, h1, h2, h3, h4, h5, h6')) continue;
+      // Unwrap — replace el with its children
+      const parent = el.parentNode;
+      while (el.firstChild) parent.insertBefore(el.firstChild, el);
+      parent.removeChild(el);
     }
     // Strip class and all data-* attributes from every remaining element
     doc.querySelectorAll('*').forEach((el) => {
@@ -321,9 +320,7 @@ export class Clipboard {
       }).catch((err) => {
         const message = `Image "${file.name}" could not be processed.`;
         this.context.triggerEvent('imageError', { file, message, error: err });
-        if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
-          console.warn('[AutumnNote]', message, err);
-        }
+        console.warn('[AutumnNote]', message, err);
       });
     });
   }

package/src/js/module/CodeTooltip.js

@@ -6,6 +6,9 @@ import { createElement, on } from '../core/dom.js';
 const SHOW_DELAY = 100;
 const HIDE_DELAY = 180;
 
+// Cached regex for extracting language class — defined once at module level.
+const _LANG_CLASS_RE = /language-(\S+)/;
+
 const ICONS = {
   copy:       `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,
   wrapOn:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><path d="M3 12h15a3 3 0 0 1 0 6H3"/><polyline points="6 15 3 18 6 21"/></svg>`,
@@ -185,7 +188,9 @@ export class CodeTooltip {
   _scheduleHide() {
     clearTimeout(this._showTimer);
     this._showTimer = null;
-    if (this._hideTimer) return;
+    // Always reset the hide timer so rapid mouseout→mouseover sequences
+    // don't leave a stale timer that hides the tooltip prematurely.
+    clearTimeout(this._hideTimer);
     this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
   }
 
@@ -242,7 +247,7 @@ export class CodeTooltip {
     if (!this._activePre || !this._langSelect) return;
     const codeEl = this._activePre.querySelector('code');
     const fromAttr = this._activePre.getAttribute('data-language') || '';
-    const fromClass = codeEl ? (codeEl.className.match(/language-(\S+)/) || [])[1] || '' : '';
+    const fromClass = codeEl ? (_LANG_CLASS_RE.exec(codeEl.className) || [])[1] || '' : '';
     this._langSelect.value = fromAttr || fromClass || '';
   }
 
@@ -355,8 +360,7 @@ export class CodeTooltip {
    */
   _ensurePrism() {
     if (!this.context.options.codeHighlight || window.Prism) return;
-    const cdn = this.context.options.codeHighlightCDN
-      || 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
+    const cdn = this.context.options.codeHighlightCDN;
     const themeHref = `${cdn}/themes/prism-tomorrow.min.css`;
     const scriptSrc = `${cdn}/prism.min.js`;
 
@@ -389,8 +393,7 @@ export class CodeTooltip {
    * @param {Function} cb  – called once the grammar is ready
    */
   _loadPrismComponent(lang, cb) {
-    const cdn = this.context.options.codeHighlightCDN
-      || 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
+    const cdn = this.context.options.codeHighlightCDN;
     const src = `${cdn}/components/prism-${lang}.min.js`;
     // Avoid loading the same component twice
     if (document.querySelector(`script[src="${src}"]`)) {

package/src/js/module/FindReplace.js

@@ -34,6 +34,11 @@ export class FindReplace {
     /** @type {'find'|'replace'} */
     this._mode = 'find';
 
+    /** Cached compiled regex — reused when query and case-sensitivity are unchanged */
+    this._queryRegex = null;
+    this._lastQuery = null;
+    this._lastCaseSensitive = null;
+
     this._disposers = [];
     this._removeTrap = null;
     this._focusTimer = null;
@@ -267,7 +272,10 @@ export class FindReplace {
 
     this._currentIndex = 0;
 
-    // Wrap in reverse order so earlier offsets in the same text node stay valid
+    // Wrap matches in reverse order so earlier text offsets stay valid when
+    // later sections of the same text node are split by surroundContents().
+    // Use push() instead of unshift() to avoid O(n²) shifting on every insert;
+    // reverse() at the end restores forward document order in O(n).
     for (let i = rawMatches.length - 1; i >= 0; i--) {
       const { node, start, end } = rawMatches[i];
       try {
@@ -277,13 +285,14 @@ export class FindReplace {
         const mark = document.createElement('mark');
         mark.className = 'an-highlight';
         range.surroundContents(mark);
-        this._matches.unshift({ mark });
+        this._matches.push({ mark });
       } catch (_) {
         // surroundContents fails when the range crosses element boundaries.
         // This can happen with <br> inside matched text — skip safely.
-        this._matches.unshift({ mark: null });
+        this._matches.push({ mark: null });
       }
     }
+    this._matches.reverse(); // O(n) — restore forward document order
 
     // Drop entries where wrapping failed so the counter and navigation are accurate
     this._matches = this._matches.filter((m) => m.mark);
@@ -304,10 +313,15 @@ export class FindReplace {
    */
   _findRawMatches(query, root) {
     const results = [];
-    const flags = this._caseSensitive ? 'g' : 'gi';
-    // Escape regex special characters in the literal query string
-    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const re = new RegExp(escaped, flags);
+    // Reuse compiled regex when query and case-sensitivity haven't changed
+    if (this._lastQuery !== query || this._lastCaseSensitive !== this._caseSensitive) {
+      const flags = this._caseSensitive ? 'g' : 'gi';
+      const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      this._queryRegex = new RegExp(escaped, flags);
+      this._lastQuery = query;
+      this._lastCaseSensitive = this._caseSensitive;
+    }
+    const re = this._queryRegex;
 
     const walker = document.createTreeWalker(root, 0x4 /* NodeFilter.SHOW_TEXT */);
     let node;

package/src/js/module/ImageResizer.js

@@ -55,7 +55,7 @@ export class ImageResizer {
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', onWindowResize),
+      on(window, 'resize', onWindowResize, { passive: true }),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 

package/src/js/module/ImageTooltip.js

@@ -173,7 +173,9 @@ export class ImageTooltip {
   _scheduleHide() {
     clearTimeout(this._showTimer);
     this._showTimer = null;
-    if (this._hideTimer) return;
+    // Always reset the hide timer so rapid mouseout→mouseover sequences
+    // don't leave a stale timer that hides the tooltip prematurely.
+    clearTimeout(this._hideTimer);
     this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
   }
 

package/src/js/module/TableTooltip.js

@@ -74,6 +74,7 @@ const ICONS = {
   mergeCells:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="8" height="10" rx="1"/><rect x="14" y="7" width="8" height="10" rx="1"/><path d="M10 12h4"/><path d="M12 10l2 2-2 2"/></svg>`,
   colWidth:    `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="4" x2="7" y2="20"/><line x1="17" y1="4" x2="17" y2="20"/><line x1="7" y1="12" x2="17" y2="12"/><path d="M10 9l-3 3 3 3"/><path d="M14 9l3 3-3 3"/></svg>`,
   rowHeight:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="17" x2="20" y2="17"/><line x1="12" y1="7" x2="12" y2="17"/><path d="M9 10l3-3 3 3"/><path d="M9 14l3 3 3-3"/></svg>`,
+  tableBorder: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6" stroke-width="1"/><line x1="3" y1="13" x2="21" y2="13" stroke-width="2"/><line x1="3" y1="20" x2="21" y2="20" stroke-width="3"/></svg>`,
   deleteTable: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/><line x1="16" y1="16" x2="22" y2="22" stroke="#ef4444"/><line x1="22" y1="16" x2="16" y2="22" stroke="#ef4444"/></svg>`,
 };
 
@@ -320,8 +321,9 @@ export class TableTooltip {
     el.appendChild(this._sep());
 
     // Resize
-    el.appendChild(this._makeBtn(ICONS.colWidth,  'Column Width', () => this._openSizePopover('col')));
-    el.appendChild(this._makeBtn(ICONS.rowHeight, 'Row Height',   () => this._openSizePopover('row')));
+    el.appendChild(this._makeBtn(ICONS.colWidth,   'Column Width',      () => this._openSizePopover('col')));
+    el.appendChild(this._makeBtn(ICONS.rowHeight,  'Row Height',        () => this._openSizePopover('row')));
+    el.appendChild(this._makeBtn(ICONS.tableBorder,'Table Border Width',() => this._openSizePopover('border')));
 
     el.appendChild(this._sep());
 
@@ -641,30 +643,59 @@ export class TableTooltip {
   _openSizePopover(type) {
     const cell = this._getCell();
     if (!cell || !this._sizePopover) return;
-    const isCol = type === 'col';
-    this._sizeTitleEl.textContent = isCol ? 'Column Width (px)' : 'Row Height (px)';
-    this._sizeInputEl.value = isCol
-      ? (cell.offsetWidth || 120)
-      : (cell.closest('tr') ? (cell.closest('tr').offsetHeight || 40) : 40);
-
-    this._sizeApply = (val) => {
-      if (isCol) {
-        const table        = cell.closest('table');
-        const visualColIdx = getVisualColIndex(cell);
-        const rows  = Array.from(table.querySelectorAll('tr'));
-        // Batch reads, then writes
-        const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
-        cells.forEach(c => {
-          if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
-        });
-      } else {
-        const row = cell.closest('tr');
-        if (row) {
-          for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
+
+    if (type === 'border') {
+      const table = cell.closest('table');
+      if (!table) return;
+      // Read current inline border-width, fall back to computed value, then default 1px
+      const firstCell = table.querySelector('td, th');
+      const currentPx = firstCell
+        ? (parseInt(firstCell.style.borderWidth, 10) ||
+           parseInt(window.getComputedStyle(firstCell).borderWidth, 10) || 1)
+        : 1;
+      this._sizeTitleEl.textContent = 'Table Border Width (px)';
+      this._sizeInputEl.min   = '0';
+      this._sizeInputEl.max   = '10';
+      this._sizeInputEl.value = currentPx;
+      this._sizeApply = (val) => {
+        // Apply border-width to every cell; with border-collapse:collapse this
+        // controls all grid lines including the outer table border.
+        // Setting only borderWidth preserves the existing border-color from CSS.
+        const cells = Array.from(table.querySelectorAll('td, th'));
+        if (val === 0) {
+          cells.forEach(c => { c.style.borderWidth = '0'; c.style.borderStyle = 'none'; });
+        } else {
+          cells.forEach(c => { c.style.borderWidth = `${val}px`; c.style.borderStyle = 'solid'; });
         }
-      }
-      this.context.invoke('editor.afterCommand');
-    };
+        this.context.invoke('editor.afterCommand');
+      };
+    } else {
+      const isCol = type === 'col';
+      this._sizeTitleEl.textContent = isCol ? 'Column Width (px)' : 'Row Height (px)';
+      this._sizeInputEl.min   = '1';
+      this._sizeInputEl.max   = '2000';
+      this._sizeInputEl.value = isCol
+        ? (cell.offsetWidth || 120)
+        : (cell.closest('tr') ? (cell.closest('tr').offsetHeight || 40) : 40);
+      this._sizeApply = (val) => {
+        if (isCol) {
+          const table        = cell.closest('table');
+          const visualColIdx = getVisualColIndex(cell);
+          const rows  = Array.from(table.querySelectorAll('tr'));
+          // Batch reads, then writes
+          const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
+          cells.forEach(c => {
+            if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
+          });
+        } else {
+          const row = cell.closest('tr');
+          if (row) {
+            for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
+          }
+        }
+        this.context.invoke('editor.afterCommand');
+      };
+    }
 
     this._sizePopover.style.display = 'block';
     requestAnimationFrame(() => {