autumnnote 1.6.0 → 1.6.2

package/src/js/module/ImageDialog.js

@@ -3,49 +3,18 @@
  * Inspired by Summernote's ImageDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
-
-export class ImageDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    this.options = context.options;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-  }
+import { createElement, on } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  initialize() {
-    this._dialog = this._buildDialog();
-    document.body.appendChild(this._dialog);
-    return this;
-  }
-
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.parentNode.removeChild(this._dialog);
-    }
-    this._dialog = null;
-  }
+const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
 
+export class ImageDialog extends BaseDialog {
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
 
   show() {
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._urlInput.value = '';
     this._altInput.value = '';
     if (this._fileInput) this._fileInput.value = '';
@@ -58,23 +27,9 @@ export class ImageDialog {
 
   _buildDialog() {
     const L = this.context.locale.imageDialog;
-    const overlay = createElement('div', {
-      class: 'an-dialog-overlay',
-      role: 'dialog',
-      'aria-modal': 'true',
-      'aria-label': L.ariaLabel,
-    });
-    const box = createElement('div', { class: 'an-dialog-box' });
-
-    const header = createElement('div', { class: 'an-dialog-header' });
-    const iconEl = createElement('span', { class: 'an-dialog-icon' });
-    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-    const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = L.title;
-    header.appendChild(iconEl);
-    header.appendChild(title);
+    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
 
-    // URL tab
+    // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = L.imageUrl;
     const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
@@ -84,6 +39,7 @@ export class ImageDialog {
       autocomplete: 'off',
     }));
     this._urlInput = urlInput;
+    this._firstInput = urlInput;
 
     // Alt text
     const altLabel = createElement('label', { class: 'an-label' });
@@ -96,7 +52,7 @@ export class ImageDialog {
     }));
     this._altInput = altInput;
 
-    box.append(header, urlLabel, urlInput, altLabel, altInput);
+    box.append(urlLabel, urlInput, altLabel, altInput);
 
     // Alignment
     const alignLabel = createElement('label', { class: 'an-label' });
@@ -118,6 +74,7 @@ export class ImageDialog {
     });
     this._alignRow = alignRow;
     box.append(alignLabel, alignRow);
+
     if (this.options.allowImageUpload !== false) {
       const fileLabel = createElement('label', { class: 'an-label' });
       fileLabel.textContent = L.uploadLabel;
@@ -135,25 +92,12 @@ export class ImageDialog {
       box.append(fileLabel, fileInput, fileHint);
     }
 
-    // Buttons
-    const btnRow = createElement('div', { class: 'an-dialog-actions' });
-    const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    insertBtn.textContent = L.insertBtn;
-    const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = L.cancelBtn;
-    btnRow.appendChild(insertBtn);
-    btnRow.appendChild(cancelBtn);
-
+    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
     box.append(btnRow);
-    overlay.appendChild(box);
-    makeDraggable(header, box);
 
-    const d1 = on(insertBtn, 'click', () => this._onInsert());
-    const d2 = on(cancelBtn, 'click', () => this._close());
-    const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
     const d4 = on(urlInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
     const d5 = on(altInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    this._disposers.push(d1, d2, d3, d4, d5);
+    this._disposers.push(d4, d5);
 
     return overlay;
   }
@@ -217,18 +161,4 @@ export class ImageDialog {
     this.context.invoke('editor.insertImage', src, alt, align);
     this._close();
   }
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._urlInput && this._urlInput.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/ImageResizer.js

@@ -38,7 +38,7 @@ export class ImageResizer {
 
     const editable = this.context.layoutInfo.editable;
 
-    // Debounce window resize — _updateOverlayPosition already has rAF gating but
+    // Debounce globalThis resize — _updateOverlayPosition already has rAF gating but
     // every call cancels + re-schedules it; a debounce reduces that churn.
     let _resizeDebounce = null;
     const onWindowResize = () => {
@@ -55,8 +55,8 @@ export class ImageResizer {
         if (img) this._select(img);
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
-      on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', onWindowResize, { passive: true }),
+      on(globalThis, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      on(globalThis, 'resize', onWindowResize, { passive: true }),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 
@@ -76,7 +76,7 @@ export class ImageResizer {
     }
     this._deselect();
     if (this._overlay && this._overlay.parentNode) {
-      this._overlay.parentNode.removeChild(this._overlay);
+      this._overlay.remove();
     }
     this._overlay = null;
   }

package/src/js/module/ImageTooltip.js

@@ -1,4 +1,4 @@
-// ImageTooltip.js - Hover tooltip for images inside the editor
+// ImageTooltip.js - Hover tooltip for images inside the editor
 // Displays a horizontal action bar below (or above) the selected image,
 // similar in appearance and interaction to LinkTooltip.
 import { createElement, on } from '../core/dom.js';
@@ -59,8 +59,8 @@ export class ImageTooltip {
         }
       }),
       // Hide when the page scrolls or resizes — the tooltip position becomes stale
-      on(window, 'scroll', () => this._hide(), { passive: true }),
-      on(window, 'resize', () => this._hide(), { passive: true }),
+      on(globalThis, 'scroll', () => this._hide(), { passive: true }),
+      on(globalThis, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -70,7 +70,7 @@ export class ImageTooltip {
     this._clearTimers();
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    this._el?.remove();
     this._el = null;
   }
 
@@ -215,8 +215,8 @@ export class ImageTooltip {
     let top  = rect.bottom + margin;
     let left = rect.left + (rect.width - tipW) / 2;
 
-    if (top + tipH > window.innerHeight - margin) top = rect.top - tipH - margin;
-    if (left + tipW > window.innerWidth  - margin) left = window.innerWidth - tipW - margin;
+    if (top + tipH > globalThis.innerHeight - margin) top = rect.top - tipH - margin;
+    if (left + tipW > globalThis.innerWidth  - margin) left = globalThis.innerWidth - tipW - margin;
     if (left < margin) left = margin;
 
     this._el.style.top  = `${top}px`;
@@ -279,8 +279,8 @@ export class ImageTooltip {
     if (!img) return;
     // Parse current rotation angle from inline transform
     const current = img.style.transform || '';
-    const match   = current.match(/rotate\((-?[\d.]+)deg\)/);
-    const prev    = match ? parseFloat(match[1]) : 0;
+    const match   = /rotate\((-?[\d.]+)deg\)/.exec(current);
+    const prev    = match ? Number.parseFloat(match[1]) : 0;
     const next    = (prev + delta + 360) % 360; // normalise to [0, 360)
     // Preserve any other transform functions (e.g. scale), replace only rotate()
     const cleaned = current.replace(/rotate\(-?[\d.]+deg\)/, '').trim();
@@ -298,10 +298,10 @@ export class ImageTooltip {
     this._hide();
     this.context.invoke('imageResizer.deselect');
     const figure = img.closest('figure.an-figure');
-    if (figure && figure.parentNode) {
-      figure.parentNode.removeChild(figure);
-    } else if (img.parentNode) {
-      img.parentNode.removeChild(img);
+    if (figure) {
+      figure.remove();
+    } else {
+      img.remove();
     }
     this.context.invoke('editor.afterCommand');
   }
@@ -327,7 +327,7 @@ export class ImageTooltip {
         this._hide();
         const range = document.createRange();
         range.selectNodeContents(cap);
-        const sel = window.getSelection();
+        const sel = globalThis.getSelection();
         if (sel) { sel.removeAllRanges(); sel.addRange(range); }
       }
       return;
@@ -367,7 +367,7 @@ export class ImageTooltip {
     // Select caption text immediately
     const range = document.createRange();
     range.selectNodeContents(figcaption);
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (sel) { sel.removeAllRanges(); sel.addRange(range); }
 
     this.context.invoke('editor.afterCommand');

package/src/js/module/LinkDialog.js

@@ -3,41 +3,12 @@
  * Inspired by Summernote's LinkDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
+import { createElement, on } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
-export class LinkDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    this.options = context.options;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  initialize() {
-    this._dialog = this._buildDialog();
-    document.body.appendChild(this._dialog);
-    return this;
-  }
-
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.parentNode.removeChild(this._dialog);
-    }
-    this._dialog = null;
-  }
+const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`;
 
+export class LinkDialog extends BaseDialog {
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
@@ -47,9 +18,7 @@ export class LinkDialog {
    * Pre-fills with the currently selected link if present.
    */
   show() {
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._prefill();
     this._open();
   }
@@ -60,16 +29,7 @@ export class LinkDialog {
 
   _buildDialog() {
     const L = this.context.locale.linkDialog;
-    const overlay = createElement('div', { class: 'an-dialog-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': L.ariaLabel });
-    const box = createElement('div', { class: 'an-dialog-box' });
-
-    const header = createElement('div', { class: 'an-dialog-header' });
-    const iconEl = createElement('span', { class: 'an-dialog-icon' });
-    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`;
-    const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = L.title;
-    header.appendChild(iconEl);
-    header.appendChild(title);
+    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
 
     // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
@@ -83,6 +43,7 @@ export class LinkDialog {
       autocomplete: 'off',
     }));
     this._urlInput = urlInput;
+    this._firstInput = urlInput;
 
     // Text field
     const textLabel = createElement('label', { class: 'an-label' });
@@ -108,26 +69,13 @@ export class LinkDialog {
     tabLabel.appendChild(tabCheckbox);
     tabLabel.appendChild(document.createTextNode(' ' + L.openInNewTab));
 
-    // Buttons
-    const btnRow = createElement('div', { class: 'an-dialog-actions' });
-    const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    insertBtn.textContent = L.insertBtn;
-    const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = L.cancelBtn;
-    btnRow.appendChild(insertBtn);
-    btnRow.appendChild(cancelBtn);
-
-    box.append(header, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
-    overlay.appendChild(box);
-    makeDraggable(header, box);
-
-    // Events
-    const d1 = on(insertBtn, 'click', () => this._onInsert());
-    const d2 = on(cancelBtn, 'click', () => this._close());
-    const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
+    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
+
+    box.append(urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
+
     const d4 = on(urlInput,  'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
     const d5 = on(textInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    this._disposers.push(d1, d2, d3, d4, d5);
+    this._disposers.push(d4, d5);
 
     return overlay;
   }
@@ -138,7 +86,7 @@ export class LinkDialog {
 
   _prefill() {
     // Try to find currently selected anchor
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     let anchor = null;
     if (sel && sel.rangeCount > 0) {
       let node = sel.getRangeAt(0).startContainer;
@@ -194,18 +142,4 @@ export class LinkDialog {
     this.context.invoke('editor.insertLink', url, text, newTab);
     this._close();
   }
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._urlInput && this._urlInput.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/LinkTooltip.js

@@ -46,8 +46,8 @@ export class LinkTooltip {
         }
       }),
       // Hide when the page scrolls or resizes — the tooltip position becomes stale
-      on(window, 'scroll', () => this._hide(), { passive: true }),
-      on(window, 'resize', () => this._hide(), { passive: true }),
+      on(globalThis, 'scroll', () => this._hide(), { passive: true }),
+      on(globalThis, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -57,7 +57,7 @@ export class LinkTooltip {
     this._clearTimers();
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    if (this._el && this._el.parentNode) this._el.remove();
     this._el = null;
   }
 
@@ -163,11 +163,11 @@ export class LinkTooltip {
     let top  = rect.bottom + margin;
     let left = rect.left;
 
-    if (top + tipH > window.innerHeight - margin) {
+    if (top + tipH > globalThis.innerHeight - margin) {
       top = rect.top - tipH - margin;
     }
-    if (left + tipW > window.innerWidth - margin) {
-      left = window.innerWidth - tipW - margin;
+    if (left + tipW > globalThis.innerWidth - margin) {
+      left = globalThis.innerWidth - tipW - margin;
     }
     if (left < margin) left = margin;
 
@@ -190,13 +190,13 @@ export class LinkTooltip {
   // ---------------------------------------------------------------------------
 
   _openLink() {
-    const url = this._activeAnchor && this._activeAnchor.getAttribute('href');
-    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+    const url = this._activeAnchor?.getAttribute('href');
+    if (url) globalThis.open(url, '_blank', 'noopener,noreferrer');
     this._hide();
   }
 
   _copyLink() {
-    const url = this._activeAnchor && this._activeAnchor.getAttribute('href');
+    const url = this._activeAnchor?.getAttribute('href');
     if (url) {
       navigator.clipboard.writeText(url).catch(() => {
         // Fallback for environments where clipboard API is unavailable
@@ -207,7 +207,7 @@ export class LinkTooltip {
         document.body.appendChild(ta);
         ta.select();
         document.execCommand('copy');
-        document.body.removeChild(ta);
+        ta.remove();
       });
     }
     // Brief visual feedback  
@@ -223,7 +223,7 @@ export class LinkTooltip {
     this._hide();
 
     // Place cursor inside the anchor, then open the link dialog (which pre-fills from selection)
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     const range = document.createRange();
     range.selectNodeContents(anchor);
     sel.removeAllRanges();
@@ -238,7 +238,7 @@ export class LinkTooltip {
     this._hide();
 
     // Select the anchor text, then remove the link
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     const range = document.createRange();
     range.selectNode(anchor);
     sel.removeAllRanges();

package/src/js/module/MarkdownShortcuts.js

@@ -61,8 +61,8 @@ export class MarkdownShortcuts {
    * @returns {{ text: string, range: Range, lineNode: Node } | null}
    */
   _getLineContext() {
-    const sel = window.getSelection();
-    if (!sel || !sel.rangeCount) return null;
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return null;
     const range = sel.getRangeAt(0);
     if (!range.collapsed) return null;
 
@@ -87,7 +87,7 @@ export class MarkdownShortcuts {
 
   _isBlock(node) {
     if (node.nodeType !== Node.ELEMENT_NODE) return false;
-    const display = window.getComputedStyle(node).display;
+    const display = globalThis.getComputedStyle(node).display;
     return display === 'block' || display === 'list-item' || display === 'table-cell';
   }
 
@@ -106,7 +106,7 @@ export class MarkdownShortcuts {
     ];
 
     for (const { re, handler } of blockPatterns) {
-      const m = text.match(re);
+      const m = re.exec(text);
       if (m) {
         handler(m);
         return true;
@@ -137,8 +137,8 @@ export class MarkdownShortcuts {
   // ---------------------------------------------------------------------------
 
   _selectLineAndDelete() {
-    const sel = window.getSelection();
-    if (!sel || !sel.rangeCount) return;
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return;
     const range = sel.getRangeAt(0);
     // Select from the start of the block to the cursor and delete
     const startRange = document.createRange();
@@ -188,8 +188,8 @@ export class MarkdownShortcuts {
   // ---------------------------------------------------------------------------
 
   _onInput() {
-    const sel = window.getSelection();
-    if (!sel || !sel.rangeCount) return;
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return;
     const range = sel.getRangeAt(0);
     if (!range.collapsed) return;
 
@@ -215,7 +215,7 @@ export class MarkdownShortcuts {
 
     const upToCursor = text.slice(0, offset);
     for (const { re, tag } of inlineRules) {
-      const m = upToCursor.match(re);
+      const m = re.exec(upToCursor);
       if (!m) continue;
 
       const matchStart = upToCursor.length - m[0].length;
@@ -233,11 +233,8 @@ export class MarkdownShortcuts {
       const beforeNode = document.createTextNode(before);
       const afterNode = document.createTextNode('​' + after);
 
-      const parent = node.parentNode;
-      parent.insertBefore(beforeNode, node);
-      parent.insertBefore(el, node);
-      parent.insertBefore(afterNode, node);
-      parent.removeChild(node);
+      /** @type {ChildNode} */ (node).before(beforeNode, el, afterNode);
+      /** @type {ChildNode} */ (node).remove();
 
       // Place cursor after the element (after the ZWS)
       const newRange = document.createRange();

package/src/js/module/Mention.js

@@ -76,9 +76,7 @@ export class Mention {
 
   destroy() {
     clearTimeout(this._debounceTimer);
-    if (this._dropdown && this._dropdown.parentNode) {
-      this._dropdown.parentNode.removeChild(this._dropdown);
-    }
+    this._dropdown?.remove();
     this._dropdown = null;
     this._disposers.forEach((d) => d());
     this._disposers = [];
@@ -163,10 +161,10 @@ export class Mention {
     let top = rect.bottom + 4;
     let left = rect.left;
 
-    if (rect.bottom + ddh + 8 > window.innerHeight) {
+    if (rect.bottom + ddh + 8 > globalThis.innerHeight) {
       top = rect.top - ddh - 4;
     }
-    left = Math.max(8, Math.min(left, window.innerWidth - ddw - 8));
+    left = Math.max(8, Math.min(left, globalThis.innerWidth - ddw - 8));
 
     dd.style.top = `${top}px`;
     dd.style.left = `${left}px`;
@@ -196,7 +194,7 @@ export class Mention {
   _captureCaretRect() {
     // Prefer a range over the trigger character — it has non-zero width and
     // getBoundingClientRect() reliably returns a valid rect.
-    if (this._triggerNode && this._triggerNode.isConnected) {
+    if (this._triggerNode?.isConnected) {
       try {
         const r = document.createRange();
         const end = Math.min(this._triggerOffset + 1, this._triggerNode.textContent.length);
@@ -211,7 +209,7 @@ export class Mention {
     }
 
     // Fallback: use getClientRects() on the current collapsed selection
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || !sel.rangeCount) return;
     const rects = sel.getRangeAt(0).getClientRects();
     if (rects.length > 0) {
@@ -224,7 +222,7 @@ export class Mention {
   // ---------------------------------------------------------------------------
 
   _getQueryAtCursor() {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || !sel.rangeCount) return null;
     const range = sel.getRangeAt(0);
     if (!range.collapsed) return null;
@@ -305,7 +303,7 @@ export class Mention {
 
   _onDocClick(e) {
     if (!this._open) return;
-    if (this._dropdown && this._dropdown.contains(e.target)) return;
+    if (this._dropdown?.contains(e.target)) return;
     this._hideDropdown();
   }
 
@@ -325,7 +323,7 @@ export class Mention {
       node.textContent = before + after;
 
       // Move cursor to where the trigger was
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       const range = document.createRange();
       range.setStart(node, this._triggerOffset);
       range.collapse(true);

package/src/js/module/Placeholder.js

@@ -43,7 +43,7 @@ export class Placeholder {
     // addition to regular whitespace before deciding if the editor is empty.
     // Without this, a freshly-created checklist item or icon leaves a ZWS in
     // the DOM that causes the placeholder to overlap real content (A-1).
-    const hasText = editable.textContent.replace(/\u200B/g, '').trim().length > 0;
+    const hasText = editable.textContent.replaceAll('\u200B', '').trim().length > 0;
     const isEmpty = !hasText &&
       !editable.querySelector('img, table, hr, .an-video-wrapper');
     editable.classList.toggle('an-placeholder', isEmpty && !isFocused);

package/src/js/module/ShortcutsDialog.js

@@ -69,9 +69,7 @@ export class ShortcutsDialog {
   destroy() {
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.parentNode.removeChild(this._dialog);
-    }
+    this._dialog?.remove();
     this._dialog = null;
   }
 
@@ -79,7 +77,7 @@ export class ShortcutsDialog {
     if (this._dialog) {
       this._dialog.style.display = 'flex';
       this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._closeBtn && this._closeBtn.focus(), 50);
+      setTimeout(() => this._closeBtn?.focus(), 50);
     }
   }