autumnnote 1.6.2 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "WYSIWYG rich-text editor built with vanilla JavaScript — zero dependencies, no jQuery. Dark mode, @mention, markdown shortcuts, bubble toolbar. React and Vue 3 wrappers included.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",

package/src/js/core/detectLang.js

@@ -13,7 +13,7 @@
  * @returns {string|null}
  */
 export function detectLang(code) {
-  if (!code || !code.trim()) return null;
+  if (!code?.trim()) return null;
   const s = code.trim();
 
   // ── TypeScript ─────────────────────────────────────────────────────────────

package/src/js/core/dom.js

@@ -305,11 +305,9 @@ export function trapFocus(container, onEscape) {
         e.preventDefault();
         /** @type {HTMLElement} */ (last).focus();
       }
-    } else {
-      if (document.activeElement === last) {
-        e.preventDefault();
-        /** @type {HTMLElement} */ (first).focus();
-      }
+    } else if (document.activeElement === last) {
+      e.preventDefault();
+      /** @type {HTMLElement} */ (first).focus();
     }
   };
 

package/src/js/editing/Style.js

@@ -41,7 +41,7 @@ export const italic = () => execCommand('italic');
  */
 export function underline() {
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return;
+  if (!sel?.rangeCount) return;
   let container = sel.getRangeAt(0).commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
   // Check if we're inside a <u> (DOM truth), to guard against unreliable queryCommandState
@@ -65,7 +65,7 @@ export function underline() {
  */
 export function strikethrough() {
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return;
+  if (!sel?.rangeCount) return;
   // Use startContainer for consistent detection across collapsed and range
   // selections — commonAncestorContainer can miss ancestor <s>/<strike> tags
   // when the selection spans across nested inline elements.
@@ -120,7 +120,7 @@ export const fontName = (name) => execCommand('fontName', name);
  */
 export function fontSize(size, editable = document) {
   const sel = globalThis.getSelection();
-  const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
+  const wasCollapsed = !sel?.rangeCount || sel.getRangeAt(0).collapsed;
 
   // B-I-3/4: For a collapsed (caret) selection the browser's execCommand
   // 'fontSize' leaves an internal "pending" state of size-7 (=48px) instead of
@@ -223,7 +223,7 @@ export const indent = () => execCommand('indent');
  */
 export function outdent() {
   const sel = globalThis.getSelection();
-  if (sel && sel.rangeCount) {
+  if (sel?.rangeCount) {
     let container = sel.getRangeAt(0).commonAncestorContainer;
     if (container.nodeType === 3) container = container.parentElement;
     const checkLi = /** @type {Element|null} */ (container)?.closest('.an-checklist li');
@@ -286,7 +286,7 @@ function _checklistItemToP(checkLi) {
   try {
     const nr = document.createRange();
     const firstChild = p.firstChild;
-    nr.setStart(firstChild && firstChild.nodeType === 3 ? firstChild : p, 0);
+    nr.setStart(firstChild?.nodeType === 3 ? firstChild : p, 0);
     nr.collapse(true);
     const s = globalThis.getSelection();
     if (s) { s.removeAllRanges(); s.addRange(nr); }
@@ -406,7 +406,7 @@ export function currentStyle(editable) {
  */
 export function toggleInlineCode(_editable) {
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return;
+  if (!sel?.rangeCount) return;
   const range = sel.getRangeAt(0);
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
@@ -477,7 +477,7 @@ export function toggleInlineCode(_editable) {
  */
 export function isInlineCode() {
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return false;
+  if (!sel?.rangeCount) return false;
   let sc = sel.getRangeAt(0).startContainer;
   if (sc.nodeType === 3) sc = sc.parentElement;
   const code = /** @type {Element|null} */ (sc)?.closest('code');
@@ -504,7 +504,7 @@ export function isInlineCode() {
  */
 export function toggleChecklist() {
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return;
+  if (!sel?.rangeCount) return;
   const range = sel.getRangeAt(0);
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
@@ -552,7 +552,7 @@ export function toggleChecklist() {
     // 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 = /** @type {Element|null} */ (container);
-    while (block && block.parentNode && !BLOCK_TAGS.has(block.tagName)) {
+    while (block?.parentNode && !BLOCK_TAGS.has(block.tagName)) {
       block = /** @type {Element|null} */ (block.parentNode);
     }
     // Fallback: if no block element found (e.g. cursor directly in editable root), use the
@@ -674,7 +674,7 @@ export function toggleChecklist() {
  */
 export function isInChecklist() {
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return false;
+  if (!sel?.rangeCount) return false;
   let container = sel.getRangeAt(0).commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
   return !!(/** @type {Element|null} */ (container)?.closest('.an-checklist li'));

package/src/js/editing/Typing.js

@@ -68,7 +68,7 @@ export function handleKeydown(event, editable, options = {}) {
           // (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) {
+          if (prevNode?.nodeType === Node.TEXT_NODE) {
             nr.setStart(prevNode, prevNode.textContent.length);
           } else if (prevNode) {
             nr.setStartAfter(prevNode);
@@ -168,7 +168,7 @@ export function handleKeydown(event, editable, options = {}) {
         if (isFAIcon(next)) {
           const after = next.nextSibling;
           event.preventDefault();
-          if (after && after.nodeType === Node.TEXT_NODE) {
+          if (after?.nodeType === Node.TEXT_NODE) {
             const offset = ((after.textContent || '').startsWith('\u200B')) ? 1 : 0;
             return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
           }
@@ -178,7 +178,7 @@ export function handleKeydown(event, editable, options = {}) {
           const icon = next.nextSibling;
           const after = icon.nextSibling;
           event.preventDefault();
-          if (after && after.nodeType === Node.TEXT_NODE) {
+          if (after?.nodeType === Node.TEXT_NODE) {
             const offset = ((after.textContent || '').startsWith('\u200B')) ? 1 : 0;
             return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
           }
@@ -341,11 +341,11 @@ export function handleKeydown(event, editable, options = {}) {
       // may normalise it to element-level, placing the caret before the
       // absolutely-positioned checkbox.  \u200B is stripped by getHTML().
       let cursorNode = newLi.childNodes[1]; // first child after checkbox
-      if (!cursorNode || cursorNode.nodeType !== Node.TEXT_NODE) {
+      if (cursorNode?.nodeType !== Node.TEXT_NODE) {
         cursorNode = document.createTextNode('\u200B');
         newLi.appendChild(cursorNode);
       }
-      checkLi.insertAdjacentElement('afterend', newLi);
+      checkLi.after(newLi);
 
       const nr = document.createRange();
       nr.setStart(cursorNode, 0);

package/src/js/index.js

@@ -141,7 +141,7 @@ const AutumnNote = {
   registerButton(btnDef) { registerButton(btnDef); return this; },
 
   /** Library version */
-  version: '1.6.2',
+  version: '1.6.5',
 };
 
 // ---------------------------------------------------------------------------

package/src/js/module/BaseDialog.js

@@ -51,7 +51,7 @@ export class BaseDialog {
     if (this._dialog) {
       this._dialog.style.display = 'flex';
       this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._firstInput && this._firstInput.focus(), 50);
+      setTimeout(() => this._firstInput?.focus(), 50);
     }
   }
 

package/src/js/module/BubbleToolbar.js

@@ -389,7 +389,7 @@ export class BubbleToolbar {
     if (!this._btnCache) return;
     this._btnCache.forEach((btn) => {
       const activeFn = _ACTIVE[/** @type {HTMLElement} */ (btn).dataset.name];
-      btn.classList.toggle('an-active', !!(activeFn && activeFn()));
+      btn.classList.toggle('an-active', !!(activeFn?.()));
     });
   }
 
@@ -397,7 +397,7 @@ export class BubbleToolbar {
   _syncColorStrips() {
     if (!this._el) return;
     const sel = globalThis.getSelection();
-    if (!sel || !sel.rangeCount) return;
+    if (!sel?.rangeCount) return;
     let node = sel.getRangeAt(0).startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node) return;

package/src/js/module/Buttons.js

@@ -102,10 +102,10 @@ export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)',
   // consistent behaviour across both collapsed and range selections.
   if (document.queryCommandState('underline')) return true;
   const sel = globalThis.getSelection();
-  if (!sel || !sel.rangeCount) return false;
+  if (!sel?.rangeCount) return false;
   let sc = sel.getRangeAt(0).startContainer;
   if (sc.nodeType === 3) sc = sc.parentElement;
-  return !!(sc && /** @type {Element} */ (sc).closest('u'));
+  return !!(/** @type {Element} */ (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'));
@@ -180,11 +180,11 @@ export const fontSizeBtn = {
   getValue: (ctx) => {
     try {
       const sel = globalThis.getSelection();
-      if (sel && sel.rangeCount) {
+      if (sel?.rangeCount) {
         let el = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
-        if (el && el.nodeType === 3) el = el.parentElement;
-        while (el && el.nodeType === 1 && !/** @type {HTMLElement} */ (el).style.fontSize) el = el.parentElement;
-        const size = (el && /** @type {HTMLElement} */ (el).style.fontSize) ? /** @type {HTMLElement} */ (el).style.fontSize : '';
+        if (el?.nodeType === 3) el = el.parentElement;
+        while (el?.nodeType === 1 && !/** @type {HTMLElement} */ (el).style.fontSize) el = el.parentElement;
+        const size = /** @type {HTMLElement} */ (el)?.style.fontSize || '';
         if (size) return size;
       }
       // Fallback: read the base font size from the editable element itself
@@ -281,10 +281,10 @@ export const lineHeightBtn = {
   getValue: () => {
     try {
       const sel = globalThis.getSelection();
-      if (!sel || !sel.rangeCount) return '';
+      if (!sel?.rangeCount) return '';
       const BLOCKS = new Set(['P','DIV','H1','H2','H3','H4','H5','H6','LI','BLOCKQUOTE','PRE','TD','TH']);
       let el = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
-      if (el && el.nodeType === 3) el = el.parentElement;
+      if (el?.nodeType === 3) el = el.parentElement;
       while (el && !BLOCKS.has(/** @type {Element} */ (el).tagName)) el = el.parentElement;
       if (!el) return '';
       return /** @type {HTMLElement} */ (el).style.lineHeight || getComputedStyle(/** @type {Element} */ (el)).lineHeight || '';

package/src/js/module/Editor.js

@@ -86,7 +86,7 @@ export class Editor {
     // keyup  : arrow-key navigation may land at <li>[0]; move to start-of-text.
     const fixChecklistCursor = (event) => {
       const sel = globalThis.getSelection();
-      if (!sel || !sel.rangeCount) return;
+      if (!sel?.rangeCount) return;
       const r = sel.getRangeAt(0);
       if (!r.collapsed) return;
       const sc = r.startContainer;
@@ -102,7 +102,7 @@ export class Editor {
 
       // For mouse events: ask the browser where the pointer landed so the
       // cursor respects the actual click position inside the text.
-      if (event && event.type === 'mouseup') {
+      if (event?.type === 'mouseup') {
         let caret = null;
         if (document.caretRangeFromPoint) {
           caret = document.caretRangeFromPoint(event.clientX, event.clientY);
@@ -181,7 +181,7 @@ export class Editor {
     let _compositionSupSub = null;
     const onCompositionStart = () => {
       const sel = globalThis.getSelection();
-      if (!sel || !sel.rangeCount) { _compositionSupSub = null; return; }
+      if (!sel?.rangeCount) { _compositionSupSub = null; return; }
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
       if (node) {
@@ -196,7 +196,7 @@ export class Editor {
       _compositionSupSub = null;
       if (!tag) return;
       const sel = globalThis.getSelection();
-      if (!sel || !sel.rangeCount) return;
+      if (!sel?.rangeCount) return;
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
       const el = /** @type {Element} */ (node);

package/src/js/module/EmojiDialog.js

@@ -3,8 +3,8 @@
  * Click an emoji to insert it directly at the caret — no extra "Insert" step.
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
+import { createElement, on, makeDraggable } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
 // ---------------------------------------------------------------------------
 // Emoji catalogue
@@ -500,37 +500,18 @@ const EMOJI_LIST = [
 // Dialog class
 // ---------------------------------------------------------------------------
 
-export class EmojiDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-    this._activeCat = 'all';
-  }
+export class EmojiDialog extends BaseDialog {
+  _activeCat = 'all';
 
   // ---------------------------------------------------------------------------
   // Lifecycle
   // ---------------------------------------------------------------------------
 
   initialize() {
-    // Dialog grid is built lazily on first show() to avoid rendering ~500 DOM nodes at load time.
+    // Grid is built lazily in show() to avoid ~500 DOM nodes at load time.
     return this;
   }
 
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.remove();
-    }
-    this._dialog = null;
-  }
-
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
@@ -540,9 +521,7 @@ export class EmojiDialog {
       this._dialog = this._buildDialog();
       document.body.appendChild(this._dialog);
     }
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._activeCat = 'all';
     this._searchInput.value = '';
     this._updateCatTabs();
@@ -612,6 +591,7 @@ export class EmojiDialog {
       grid.appendChild(cell);
     });
     this._grid = grid;
+    this._firstInput = searchInput;
 
     // Cancel only — clicking an emoji inserts immediately
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
@@ -724,21 +704,4 @@ export class EmojiDialog {
     this.context.invoke('editor.afterCommand');
   }
 
-  // ---------------------------------------------------------------------------
-  // Open / Close
-  // ---------------------------------------------------------------------------
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._searchInput?.focus(), 50);
-    }
-  }
-
-  _close() {
-    if (this._dialog) this._dialog.style.display = 'none';
-    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
-    this._savedRange = null;
-  }
 }

package/src/js/module/FindReplace.js

@@ -8,14 +8,13 @@
  */
 
 import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
-export class FindReplace {
+export class FindReplace extends BaseDialog {
   /** @param {import('../Context.js').Context} context */
   constructor(context) {
-    this.context = context;
+    super(context);
 
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
     /** @type {HTMLInputElement|null} */
     this._findInput = null;
     /** @type {HTMLInputElement|null} */
@@ -39,8 +38,6 @@ export class FindReplace {
     this._lastQuery = null;
     this._lastCaseSensitive = null;
 
-    this._disposers = [];
-    this._removeTrap = null;
     this._focusTimer = null;
   }
 
@@ -48,22 +45,11 @@ export class FindReplace {
   // Lifecycle
   // ---------------------------------------------------------------------------
 
-  initialize() {
-    this._dialog = this._buildDialog();
-    document.body.appendChild(this._dialog);
-    return this;
-  }
-
   destroy() {
     clearTimeout(this._focusTimer);
     this._focusTimer = null;
     this._clearHighlights();
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.remove();
-    }
-    this._dialog = null;
+    super.destroy();
   }
 
   // ---------------------------------------------------------------------------

package/src/js/module/IconDialog.js

@@ -2,8 +2,8 @@
  * IconDialog.js - Browse and insert FontAwesome Free icons
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
+import { createElement, on, makeDraggable } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
 // ---------------------------------------------------------------------------
 // Icon catalogue — FA 6 Free Solid slug names, grouped by category
@@ -247,19 +247,9 @@ const ICON_LIST = [
   ['puzzle-piece',          'objects'],
 ];
 
-export class IconDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-    this._selectedIcon = null;
-    this._activeCat = 'all';
-  }
+export class IconDialog extends BaseDialog {
+  _selectedIcon = null;
+  _activeCat = 'all';
 
   // ---------------------------------------------------------------------------
   // Lifecycle
@@ -267,7 +257,7 @@ export class IconDialog {
 
   initialize() {
     this._ensureFontAwesome();
-    // Dialog grid is built lazily on first show() to avoid rendering ~250 icon cells at load time.
+    // Grid is built lazily in show() to avoid ~250 icon cells at load time.
     return this;
   }
 
@@ -294,13 +284,6 @@ export class IconDialog {
     document.head.appendChild(link);
   }
 
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    this._dialog?.remove();
-    this._dialog = null;
-  }
-
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
@@ -310,9 +293,7 @@ export class IconDialog {
       this._dialog = this._buildDialog();
       document.body.appendChild(this._dialog);
     }
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._selectedIcon = null;
     this._activeCat = 'all';
     this._searchInput.value = '';
@@ -360,6 +341,7 @@ export class IconDialog {
       autocomplete: 'off',
     }));
     this._searchInput = searchInput;
+    this._firstInput = searchInput;
 
     // Category tabs
     const catBar = createElement('div', { class: 'an-icon-cats' });
@@ -598,7 +580,7 @@ export class IconDialog {
     //    Keep a text anchor (\u200B) after the icon so ArrowLeft/ArrowRight and
     //    caret placement at end-of-line stay stable across browsers.
     let caretTextNode = iconEl.nextSibling;
-    if (!caretTextNode || caretTextNode.nodeType !== Node.TEXT_NODE) {
+    if (caretTextNode?.nodeType !== Node.TEXT_NODE) {
       caretTextNode = document.createTextNode('\u200B');
       iconEl.parentNode.insertBefore(caretTextNode, iconEl.nextSibling);
     } else if (!caretTextNode.textContent) {
@@ -629,22 +611,8 @@ export class IconDialog {
     this.context.invoke('editor.afterCommand');
   }
 
-  // ---------------------------------------------------------------------------
-  // Open / Close
-  // ---------------------------------------------------------------------------
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._searchInput?.focus(), 50);
-    }
-  }
-
   _close() {
-    if (this._dialog) this._dialog.style.display = 'none';
-    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
-    this._savedRange = null;
     this._selectedIcon = null;
+    super._close();
   }
 }

package/src/js/module/ImageCropOverlay.js

@@ -399,7 +399,7 @@ export class ImageCropOverlay {
     const startY = e.clientY;
     const orig   = { ...this._box };
     const r      = this._imgRect;
-    const lockAR = this._arCheck && this._arCheck.checked;
+    const lockAR = this._arCheck?.checked;
     const aspect = orig.w / (orig.h || 1);
 
     const onMove = (me) => {

package/src/js/module/ImageResizer.js

@@ -181,7 +181,7 @@ export class ImageResizer {
 
     // Skip DOM writes when position hasn't changed (common during non-scroll rAF ticks)
     const p = this._lastOverlayPos;
-    if (p && p.l === rect.left && p.t === rect.top && p.w === rect.width && p.h === rect.height) return;
+    if (p?.l === rect.left && p.t === rect.top && p.w === rect.width && p.h === rect.height) return;
     this._lastOverlayPos = { l: rect.left, t: rect.top, w: rect.width, h: rect.height };
 
     const left = rect.left - containerRect.left + offsetParent.scrollLeft;

package/src/js/module/Mention.js

@@ -210,7 +210,7 @@ export class Mention {
 
     // Fallback: use getClientRects() on the current collapsed selection
     const sel = globalThis.getSelection();
-    if (!sel || !sel.rangeCount) return;
+    if (!sel?.rangeCount) return;
     const rects = sel.getRangeAt(0).getClientRects();
     if (rects.length > 0) {
       this._caretRect = rects[rects.length - 1];