autumnnote 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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,16 @@
   "author": "Minh Pham",
   "license": "MIT",
   "devDependencies": {
-    "@vitest/browser": "^1.0.0",
-    "eslint": "^8.57.0",
-    "jsdom": "^29.0.1",
-    "sass": "^1.77.0",
-    "vite": "^5.2.0",
-    "vitest": "^1.6.0"
+    "@vitest/browser": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.2.0",
+    "jsdom": "^25.0.1",
+    "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);
@@ -448,9 +444,15 @@ export class Context {
     if (disabled) {
       editable.setAttribute('contenteditable', 'false');
       this.layoutInfo.container.classList.add('an-disabled');
+      editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
+        cb.setAttribute('disabled', '');
+      });
     } else {
       editable.setAttribute('contenteditable', 'true');
       this.layoutInfo.container.classList.remove('an-disabled');
+      editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
+        cb.removeAttribute('disabled');
+      });
     }
   }
 

package/src/js/core/sanitise.js

@@ -6,7 +6,7 @@
  */
 
 /** Tags that are unconditionally removed from editor content. */
-const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form', 'input', 'button'];
+const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form', 'button'];
 
 /** Attributes whose values must be sanitised as URLs. */
 const URL_ATTRS = ['href', 'src', 'action', 'formaction'];
@@ -26,7 +26,8 @@ const TRUSTED_IFRAME_HOSTS = new Set([
  * Uses DOMParser so the sanitisation follows normal browser parsing rules —
  * no regex shortcuts that can be bypassed by encoding tricks.
  *
- * - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, input, button)
+ * - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, button)
+ * - Allows input[type="checkbox"] only inside ul.an-checklist li; removes all other <input>
  * - Removes all on* event-handler attributes
  * - Rejects javascript: and vbscript: URLs in URL attributes
  * - Rejects data: URIs everywhere except img[src] (base64 uploads)
@@ -81,6 +82,23 @@ export function sanitiseHTML(html, { allowIframes = false } = {}) {
     });
   });
 
+  // Allow only input[type="checkbox"] inside ul.an-checklist li; strip everything else.
+  // This preserves checklist state while blocking arbitrary <input> injection.
+  doc.querySelectorAll('input').forEach((el) => {
+    const inChecklist = el.closest('ul.an-checklist') !== null &&
+                        el.closest('li') !== null;
+    if (!inChecklist || el.getAttribute('type') !== 'checkbox') {
+      el.remove();
+    } else {
+      // Harden: keep only safe attributes on checklist checkboxes
+      Array.from(el.attributes).forEach((attr) => {
+        if (!['type', 'checked', 'contenteditable'].includes(attr.name)) {
+          el.removeAttribute(attr.name);
+        }
+      });
+    }
+  });
+
   return doc.body.innerHTML;
 }
 

package/src/js/editing/Style.js

@@ -98,15 +98,54 @@ export const fontName = (name) => execCommand('fontName', name);
  * @param {HTMLElement} [editable] - scoping element to avoid touching nodes outside this editor
  */
 export function fontSize(size, editable = document) {
+  const sel = window.getSelection();
+  const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
+
   execCommand('fontSize', '7'); // placeholder
   // Replace font elements with spans, scoped to the active editable
-  editable.querySelectorAll('font[size="7"]').forEach((el) => {
+  const scope = editable instanceof HTMLElement ? editable : document;
+  const newSpans = [];
+  scope.querySelectorAll('font[size="7"]').forEach((el) => {
     const span = document.createElement('span');
     span.style.fontSize = size;
     el.parentNode.insertBefore(span, el);
     while (el.firstChild) span.appendChild(el.firstChild);
     el.parentNode.removeChild(el);
+    newSpans.push(span);
   });
+
+  // Restore the selection inside the new span(s) so:
+  // 1. The toolbar getValue() correctly reflects the new font size.
+  // 2. For a collapsed (caret) selection, subsequent typing inherits the
+  //    chosen size rather than the browser's stale execCommand state (which
+  //    would produce size 7 = 48 px instead of the requested value).
+  if (sel && newSpans.length > 0) {
+    const first = newSpans[0];
+    const last  = newSpans[newSpans.length - 1];
+    try {
+      if (wasCollapsed) {
+        // Ensure the span has a text anchor so the cursor can live inside it.
+        if (!first.firstChild) {
+          first.appendChild(document.createTextNode('\u200B'));
+        }
+        const nr = document.createRange();
+        const anchor = first.firstChild;
+        nr.setStart(anchor, anchor.textContent.length);
+        nr.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(nr);
+      } else {
+        // Re-select all replaced content so toolbar refresh reads the new size.
+        const nr = document.createRange();
+        const startNode = first.firstChild || first;
+        const endNode   = last.lastChild  || last;
+        nr.setStart(startNode, 0);
+        nr.setEnd(endNode, endNode.nodeType === Node.TEXT_NODE ? endNode.textContent.length : endNode.childNodes.length);
+        sel.removeAllRanges();
+        sel.addRange(nr);
+      }
+    } catch (_) { /* ignore range errors on unusual DOM structures */ }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -263,11 +302,36 @@ export function toggleInlineCode(editable) {
   if (container.nodeType === 3) container = container.parentElement;
   const codeEl = container && container.closest ? container.closest('code') : null;
   if (codeEl && !codeEl.closest('pre')) {
-    // Unwrap
+    // Unwrap — save range endpoints relative to surrounding text so we can
+    // restore the selection after normalize() merges adjacent text nodes.
     const parent = codeEl.parentNode;
+    // Note the sibling before the code element so we can re-anchor later.
+    const prevSibling = codeEl.previousSibling;
+    const movedChildren = Array.from(codeEl.childNodes);
     while (codeEl.firstChild) parent.insertBefore(codeEl.firstChild, codeEl);
     parent.removeChild(codeEl);
-    if (editable) editable.normalize();
+    // Normalize only the immediate parent to merge adjacent text nodes without
+    // invalidating distant selection anchors (full editable.normalize() can
+    // cause selection offsets to shift, making subsequent format toggles miss).
+    if (parent && parent.normalize) parent.normalize();
+    // Restore selection to the text that was inside the unwrapped <code>.
+    if (movedChildren.length > 0) {
+      try {
+        // After normalize, find the merged text node that contains the content.
+        const firstMoved = movedChildren[0];
+        const lastMoved  = movedChildren[movedChildren.length - 1];
+        const nr = document.createRange();
+        // Use the (possibly merged) live node if still in the DOM.
+        const anchorNode = (firstMoved.parentNode === parent) ? firstMoved : (prevSibling ? prevSibling.nextSibling : parent.firstChild);
+        if (anchorNode) {
+          nr.setStart(anchorNode, 0);
+          const endAnchor = (lastMoved.parentNode === parent) ? lastMoved : anchorNode;
+          nr.setEnd(endAnchor, endAnchor.nodeType === Node.TEXT_NODE ? endAnchor.textContent.length : endAnchor.childNodes.length);
+          sel.removeAllRanges();
+          sel.addRange(nr);
+        }
+      } catch (_) { /* ignore */ }
+    }
   } else {
     if (range.collapsed) return;
     try {
@@ -296,14 +360,17 @@ export function toggleInlineCode(editable) {
 /**
  * Returns true when the cursor / selection is inside an inline <code>
  * (not nested in a <pre>).
+ * Uses startContainer for reliable cross-browser detection regardless of
+ * whether the selection is collapsed or a range (commonAncestorContainer
+ * can behave inconsistently for range selections on some browsers).
  * @returns {boolean}
  */
 export function isInlineCode() {
   const sel = window.getSelection();
   if (!sel || !sel.rangeCount) return false;
-  let container = sel.getRangeAt(0).commonAncestorContainer;
-  if (container.nodeType === 3) container = container.parentElement;
-  const code = container && container.closest ? container.closest('code') : null;
+  let sc = sel.getRangeAt(0).startContainer;
+  if (sc.nodeType === 3) sc = sc.parentElement;
+  const code = sc && sc.closest ? sc.closest('code') : null;
   return !!(code && !code.closest('pre'));
 }
 
@@ -357,7 +424,53 @@ export function toggleChecklist() {
     }
   }
 
-  // Otherwise: insert new checklist from selected text
+  // Otherwise: insert new checklist from selected text (or current block when collapsed).
+  const isCollapsed = range.collapsed;
+  if (isCollapsed) {
+    // Find the nearest block-level ancestor (p, div, li, h1-h6, blockquote, etc.)
+    // and convert it into a single checklist item.
+    const BLOCK_TAGS = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI']);
+    let block = container;
+    while (block && block.parentNode && !BLOCK_TAGS.has(block.tagName)) {
+      block = block.parentNode;
+    }
+    // Fallback: if no block element found (e.g. cursor directly in editable root), use the
+    // insertion approach with a zero-width-space item so the cursor ends up inside.
+    const itemText = (block && BLOCK_TAGS.has(block.tagName))
+      ? Array.from(block.childNodes)
+          .map((n) => n.textContent)
+          .join('')
+          .replace(/\u00a0/g, ' ')
+      : '';
+
+    const ul = document.createElement('ul');
+    ul.className = 'an-checklist';
+    const li = document.createElement('li');
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.contentEditable = 'false';
+    li.appendChild(checkbox);
+    li.appendChild(document.createTextNode(itemText || '\u200B'));
+    ul.appendChild(li);
+
+    if (block && BLOCK_TAGS.has(block.tagName)) {
+      block.parentNode.replaceChild(ul, block);
+    } else {
+      document.execCommand('insertHTML', false, ul.outerHTML);
+      return;
+    }
+
+    // Move caret to the text node inside the new <li>
+    const textNode = li.lastChild;
+    const nr = document.createRange();
+    const offset = textNode.nodeType === Node.TEXT_NODE ? textNode.textContent.length : 0;
+    nr.setStart(textNode, offset);
+    nr.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(nr);
+    return;
+  }
+
   const text = sel.toString();
   const lines = text.split(/\r?\n/).filter((l) => l.trim().length > 0);
   if (lines.length === 0) return;

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/Buttons.js

@@ -59,13 +59,14 @@ export const boldBtn = btn('bold', 'bold', 'Bold (Ctrl+B)', () => Style.bold(),
 export const italicBtn = btn('italic', 'italic', 'Italic (Ctrl+I)', () => Style.italic(), () => document.queryCommandState('italic'));
 export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)', () => Style.underline(), () => {
   // queryCommandState('underline') is unreliable inside <code> elements;
-  // also check for a <u> ancestor in the DOM.
+  // also check for a <u> ancestor in the DOM using startContainer for
+  // consistent behaviour across both collapsed and range selections.
   if (document.queryCommandState('underline')) return true;
   const sel = window.getSelection();
   if (!sel || !sel.rangeCount) return false;
-  let container = sel.getRangeAt(0).commonAncestorContainer;
-  if (container.nodeType === 3) container = container.parentElement;
-  return !!(container && container.closest && container.closest('u'));
+  let sc = sel.getRangeAt(0).startContainer;
+  if (sc.nodeType === 3) sc = sc.parentElement;
+  return !!(sc && sc.closest && sc.closest('u'));
 });
 export const strikeBtn = btn('strikethrough', 'strikethrough', 'Strikethrough', () => Style.strikethrough(), () => document.queryCommandState('strikeThrough'));
 export const superscriptBtn = btn('superscript', 'superscript', 'Superscript', () => Style.superscript(), () => document.queryCommandState('superscript'));

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) => {
@@ -300,9 +299,17 @@ export class Clipboard {
       return;
     }
 
+    // C2: Reject image formats that browsers cannot decode/display.
+    const UNSUPPORTED = ['image/tiff', 'image/x-tiff', 'image/bmp', 'image/x-bmp', 'image/x-ms-bmp'];
     const maxBytes = (this.options.maxImageSize || 5) * 1024 * 1024;
     files.forEach((file) => {
       if (!file || !file.type.startsWith('image/')) return;
+      if (UNSUPPORTED.includes(file.type)) {
+        const message = `Image format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
+        this.context.triggerEvent('imageError', { file, message });
+        console.warn('[AutumnNote]', message);
+        return;
+      }
       if (file.size > maxBytes) {
         const message = `Image "${file.name}" exceeds the ${this.options.maxImageSize || 5} MB size limit.`;
         this.context.triggerEvent('imageError', { file, message });
@@ -321,9 +328,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>`,
@@ -36,6 +39,7 @@ export class CodeTooltip {
 
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         const pre = e.target.closest('pre');
         if (pre && editable.contains(pre)) {
           this._scheduleShow(pre);
@@ -185,7 +189,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 +248,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 +361,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 +394,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}"]`)) {