autumnnote 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.4",
+  "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

@@ -32,6 +32,7 @@ import { IconDialog } from './module/IconDialog.js';
 import { ContextMenu } from './module/ContextMenu.js';
 import { ShortcutsDialog } from './module/ShortcutsDialog.js';
 import { FindReplace } from './module/FindReplace.js';
+import { ImageCropOverlay } from './module/ImageCropOverlay.js';
 
 /** Module registry shared across all Context instances (populated via AutumnNote.registerModule). */
 export const _customModules = new Map();
@@ -107,8 +108,8 @@ export class Context {
   _registerModules() {
     const register = (name, ModuleClass) => {
       const instance = new ModuleClass(this);
-      instance.initialize();
       this._modules.set(name, instance);
+      instance.initialize();
     };
 
     register('editor', Editor);
@@ -133,6 +134,7 @@ export class Context {
     register('iconDialog', IconDialog);
     register('shortcutsDialog', ShortcutsDialog);
     register('findReplace', FindReplace);
+    register('imageCropOverlay', ImageCropOverlay);
 
     // Custom modules registered via AutumnNote.registerModule()
     for (const [name, ModuleClass] of _customModules) {
@@ -155,6 +157,9 @@ export class Context {
   }
 
   _bindEditorEvents(editable) {
+    // Keep the original textarea/input value in sync immediately on every input.
+    // This guarantees form.submit() sees fresh data even before debounced change.
+    const d0 = on(editable, 'input', () => this._syncToTarget());
     const d1 = on(editable, 'focus', () => {
       this.layoutInfo.container.classList.add('an-focused');
       if (typeof this.options.onFocus === 'function') {
@@ -170,7 +175,7 @@ export class Context {
     });
     // Sync textarea/input value on every change so form.submit() always gets fresh content
     const d3 = this.on('change', () => this._syncToTarget());
-    this._disposers.push(d1, d2, d3);
+    this._disposers.push(d0, d1, d2, d3);
 
     // Auto-save to localStorage on every change
     if (this.options.autoSave && this.options.autoSaveKey) {
@@ -196,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/Style.js

@@ -313,8 +313,8 @@ export function isInlineCode() {
 
 /**
  * Toggles a task-list at the cursor.
- * If inside a checklist <li>, converts it back to a <p>.
- * Otherwise inserts a new <ul class="an-checklist"> with one item.
+ * If inside a checklist <li>, converts it (and any other selected items) back to <p> elements.
+ * Otherwise inserts a new <ul class="an-checklist"> with one item per selected line.
  */
 export function toggleChecklist() {
   const sel = window.getSelection();
@@ -322,59 +322,56 @@ export function toggleChecklist() {
   const range = sel.getRangeAt(0);
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
-  const li = container && container.closest ? container.closest('.an-checklist li') : null;
-  if (li) {
-    // Exit checklist — convert item to a <p>
-    const ul = li.closest('.an-checklist');
-    const text = Array.from(li.childNodes)
-      .filter((n) => !(n.nodeType === 1 && n.tagName === 'INPUT'))
-      .map((n) => n.textContent).join('').replace(/\u00a0/g, ' ').trim();
-    const p = document.createElement('p');
-    p.textContent = text || '\u00a0';
-    ul.parentNode.insertBefore(p, ul.nextSibling);
-    ul.removeChild(li);
-    if (ul.children.length === 0) ul.remove();
-    const nr = document.createRange();
-    // Point into the text node (or first child) rather than the element node
-    // so the cursor is at a well-defined text position, not element-offset 0.
-    const startNode = p.firstChild || p;
-    nr.setStart(startNode, 0);
-    nr.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(nr);
-  } else {
-    // Use a temporary marker attribute so the new <li> can be found reliably
-    // even when execCommand('insertHTML') places the cursor outside the list.
-    // Chrome often moves the caret to a generated <p> after the <ul> rather
-    // than staying inside the <li>, making a selection-based lookup fail.
-    const MARKER = 'data-an-new-cli';
-    execCommand('insertHTML',
-      `<ul class="an-checklist"><li ${MARKER}><input type="checkbox" contenteditable="false"></li></ul>`);
-    const newLi = document.querySelector(`[${MARKER}]`);
-    if (newLi) {
-      newLi.removeAttribute(MARKER);
-      const cbEl = newLi.querySelector('input[type="checkbox"]');
-      if (cbEl) {
-        // Use \u200B (zero-width space) instead of an empty string.
-        // Chrome does not reliably honour a Selection pointing into an empty
-        // text node and may silently normalise it to an element-level offset,
-        // rendering the caret before the absolutely-positioned checkbox.
-        // \u200B is invisible/zero-width and is stripped by getHTML().
-        let textNode = cbEl.nextSibling;
-        if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
-          textNode = document.createTextNode('\u200B');
-          newLi.appendChild(textNode);
-        } else if (!textNode.textContent) {
-          textNode.textContent = '\u200B';
-        }
+
+  const ul = container.closest && container.closest('.an-checklist');
+  if (ul) {
+    // If selection covers multiple <li>, convert them all
+    const selectedLis = Array.from(ul.querySelectorAll('li')).filter((li) =>
+      sel.containsNode(li, true),
+    );
+    if (selectedLis.length > 0) {
+      let firstP = null;
+      selectedLis.forEach((li) => {
+        const text = Array.from(li.childNodes)
+          .filter((n) => !(n.nodeType === 1 && n.tagName === 'INPUT'))
+          .map((n) => n.textContent)
+          .join('')
+          .replace(/\u00a0/g, ' ')
+          .trim();
+        const p = document.createElement('p');
+        p.textContent = text || '\u00a0';
+        ul.parentNode.insertBefore(p, ul);
+        if (!firstP) firstP = p;
+        ul.removeChild(li);
+      });
+      if (ul.children.length === 0) ul.remove();
+      // Move caret to first converted paragraph
+      if (firstP) {
         const nr = document.createRange();
-        nr.setStart(textNode, 0);
+        nr.setStart(firstP.firstChild || firstP, 0);
         nr.collapse(true);
         sel.removeAllRanges();
         sel.addRange(nr);
       }
+      return;
     }
   }
+
+  // Otherwise: insert new checklist from selected text
+  const text = sel.toString();
+  const lines = text.split(/\r?\n/).filter((l) => l.trim().length > 0);
+  if (lines.length === 0) return;
+  const items = lines
+    .map(
+      (l) =>
+        `<li><input type="checkbox" contenteditable="false">${l || '\u200B'}</li>`,
+    )
+    .join('');
+  document.execCommand(
+    'insertHTML',
+    false,
+    `<ul class="an-checklist">${items}</ul>`,
+  );
 }
 
 /**

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

@@ -99,7 +99,7 @@ const AutumnNote = {
   registerModule(name, ModuleClass) { _customModules.set(name, ModuleClass); },
 
   /** Library version */
-  version: '1.0.1',
+  version: '1.0.4',
 };
 
 // ---------------------------------------------------------------------------

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;