autumnnote 1.5.0 → 1.6.1

package/src/js/module/ImageDialog.js

@@ -3,7 +3,7 @@
  * Inspired by Summernote's ImageDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 export class ImageDialog {
@@ -33,7 +33,7 @@ export class ImageDialog {
     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;
   }
@@ -66,32 +66,37 @@ export class ImageDialog {
     });
     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);
 
     // URL tab
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = L.imageUrl;
-    const urlInput = createElement('input', {
+    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'url',
       class: 'an-input',
       placeholder: L.urlPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._urlInput = urlInput;
 
     // Alt text
     const altLabel = createElement('label', { class: 'an-label' });
     altLabel.textContent = L.altText;
-    const altInput = createElement('input', {
+    const altInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'text',
       class: 'an-input',
       placeholder: L.altPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._altInput = altInput;
 
-    box.append(title, urlLabel, urlInput, altLabel, altInput);
+    box.append(header, urlLabel, urlInput, altLabel, altInput);
 
     // Alignment
     const alignLabel = createElement('label', { class: 'an-label' });
@@ -105,7 +110,7 @@ export class ImageDialog {
     ];
     alignOptions.forEach(({ value, label }) => {
       const radioId = `an-align-${value || 'none'}`;
-      const radio = createElement('input', { type: 'radio', name: 'an-img-align', id: radioId, value });
+      const radio = /** @type {HTMLInputElement} */ (createElement('input', { type: 'radio', name: 'an-img-align', id: radioId, value }));
       if (value === '') radio.checked = true;
       const lbl = createElement('label', { for: radioId, class: 'an-align-label' });
       lbl.textContent = label;
@@ -116,11 +121,11 @@ export class ImageDialog {
     if (this.options.allowImageUpload !== false) {
       const fileLabel = createElement('label', { class: 'an-label' });
       fileLabel.textContent = L.uploadLabel;
-      const fileInput = createElement('input', {
+      const fileInput = /** @type {HTMLInputElement} */ (createElement('input', {
         type: 'file',
         class: 'an-input',
         accept: 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/avif',
-      });
+      }));
       this._fileInput = fileInput;
       // Hint line shown below the file input for format errors
       const fileHint = createElement('p', { class: 'an-dialog-hint' });
@@ -141,12 +146,13 @@ export class ImageDialog {
 
     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 (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    const d5 = on(altInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    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);
 
     return overlay;
@@ -197,7 +203,7 @@ export class ImageDialog {
     const src = this._urlInput.value.trim();
     const alt = this._altInput.value.trim();
     const alignRadio = this._alignRow && this._alignRow.querySelector('input[name="an-img-align"]:checked');
-    const align = alignRadio ? alignRadio.value : '';
+    const align = alignRadio ? /** @type {HTMLInputElement} */ (alignRadio).value : '';
 
     if (!src) {
       this._urlInput.focus();

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 = () => {
@@ -51,12 +51,12 @@ export class ImageResizer {
       // Also select on right-click so the highlight shows before the context menu
       on(editable, 'contextmenu', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const img = e.target.closest('img');
+        const img = /** @type {Element} */ (e.target)?.closest('img');
         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';
@@ -39,24 +39,28 @@ export class ImageTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const img = e.target.closest('img');
+        const img = /** @type {Element} */ (e.target)?.closest('img');
         // Skip when the image is inside a link — LinkTooltip takes priority there
         if (img && editable.contains(img) && !img.closest('a[href]')) {
           this._scheduleShow(img);
         }
       }, { passive: true }),
       on(editable, 'mouseout', (e) => {
-        const to = e.relatedTarget;
+        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
       }, { passive: true }),
       // Hide when image is deselected by clicking elsewhere
       on(document, 'click', (e) => {
-        if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) {
+        const et = /** @type {Node} */ (e.target);
+        if (this._activeImg && !this._activeImg.contains(et) && !this._el.contains(et)) {
           this._hide();
         }
       }),
+      // Hide when the page scrolls or resizes — the tooltip position becomes stale
+      on(globalThis, 'scroll', () => this._hide(), { passive: true }),
+      on(globalThis, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -66,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;
   }
 
@@ -181,7 +185,7 @@ export class ImageTooltip {
     this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
   }
 
-  _show(img) {
+  _show(_img) {
     this._el.style.display = 'flex';
     // Defer positioning: offsetWidth on a newly-visible element forces layout
     requestAnimationFrame(() => {
@@ -211,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`;
@@ -275,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();
@@ -294,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');
   }
@@ -323,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;
@@ -363,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,7 +3,7 @@
  * Inspired by Summernote's LinkDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 export class LinkDialog {
@@ -33,7 +33,7 @@ export class LinkDialog {
     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;
   }
@@ -63,42 +63,47 @@ export class 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);
 
     // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = L.url;
-    const urlInput = createElement('input', {
+    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'url',
       class: 'an-input',
       placeholder: L.urlPlaceholder,
       id: 'an-link-url',
       name: 'url',
       autocomplete: 'off',
-    });
+    }));
     this._urlInput = urlInput;
 
     // Text field
     const textLabel = createElement('label', { class: 'an-label' });
     textLabel.textContent = L.displayText;
-    const textInput = createElement('input', {
+    const textInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'text',
       class: 'an-input',
       placeholder: L.textPlaceholder,
       id: 'an-link-text',
       name: 'linkText',
       autocomplete: 'off',
-    });
+    }));
     this._textInput = textInput;
 
     // Open in new tab
     const tabLabel = createElement('label', { class: 'an-label an-label-inline' });
-    const tabCheckbox = createElement('input', {
+    const tabCheckbox = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'checkbox',
       id: 'an-link-newtab',
       name: 'openInNewTab',
-    });
+    }));
     this._tabCheckbox = tabCheckbox;
     tabLabel.appendChild(tabCheckbox);
     tabLabel.appendChild(document.createTextNode(' ' + L.openInNewTab));
@@ -112,15 +117,16 @@ export class LinkDialog {
     btnRow.appendChild(insertBtn);
     btnRow.appendChild(cancelBtn);
 
-    box.append(title, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
+    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 d4 = on(urlInput,  'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    const d5 = on(textInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    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);
 
     return overlay;
@@ -132,7 +138,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;
@@ -142,9 +148,9 @@ export class LinkDialog {
       }
     }
     if (anchor) {
-      this._urlInput.value = anchor.getAttribute('href') || '';
+      this._urlInput.value = /** @type {Element} */ (anchor).getAttribute('href') || '';
       this._textInput.value = anchor.textContent || '';
-      this._tabCheckbox.checked = anchor.getAttribute('target') === '_blank';
+      this._tabCheckbox.checked = /** @type {Element} */ (anchor).getAttribute('target') === '_blank';
     } else {
       this._urlInput.value = '';
       this._textInput.value = sel ? sel.toString() : '';

package/src/js/module/LinkTooltip.js

@@ -33,18 +33,21 @@ export class LinkTooltip {
     this._disposers.push(
       // Detect when pointer enters a link
       on(editable, 'mouseover', (e) => {
-        const anchor = e.target.closest('a[href]');
+        const anchor = /** @type {Element} */ (e.target)?.closest('a[href]');
         if (anchor && editable.contains(anchor)) {
           this._scheduleShow(anchor);
         }
       }),
       // Detect when pointer leaves the editable area entirely
       on(editable, 'mouseout', (e) => {
-        const to = e.relatedTarget;
+        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
       }),
+      // Hide when the page scrolls or resizes — the tooltip position becomes stale
+      on(globalThis, 'scroll', () => this._hide(), { passive: true }),
+      on(globalThis, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -54,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;
   }
 
@@ -160,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;
 
@@ -187,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
@@ -204,7 +207,7 @@ export class LinkTooltip {
         document.body.appendChild(ta);
         ta.select();
         document.execCommand('copy');
-        document.body.removeChild(ta);
+        ta.remove();
       });
     }
     // Brief visual feedback  
@@ -220,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();
@@ -235,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 = [];
@@ -96,11 +94,11 @@ export class Mention {
     // Event delegation: single listeners on the container instead of per-item
     el.addEventListener('mousedown', (e) => e.preventDefault());
     el.addEventListener('click', (e) => {
-      const item = e.target.closest('.an-mention-item');
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-mention-item'));
       if (item) this._select(+item.dataset.index);
     });
     el.addEventListener('mousemove', (e) => {
-      const item = e.target.closest('.an-mention-item');
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-mention-item'));
       if (item) this._highlightItem(+item.dataset.index);
     });
 
@@ -119,7 +117,7 @@ export class Mention {
       const li = document.createElement('div');
       li.className = 'an-mention-item';
       li.setAttribute('role', 'option');
-      li.dataset.index = i;
+      li.dataset.index = String(i);
       if (item.avatar) {
         const img = document.createElement('img');
         img.src = item.avatar;
@@ -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);
     }
   }