autumnnote 1.6.0 → 1.6.2

package/src/js/module/Statusbar.js

@@ -109,9 +109,7 @@ export class Statusbar {
       this._dragDisposers.forEach((d) => d());
       this._dragDisposers = null;
     }
-    if (this.el && this.el.parentNode) {
-      this.el.parentNode.removeChild(this.el);
-    }
+    this.el?.remove();
     this.el = null;
   }
 
@@ -217,7 +215,7 @@ export class Statusbar {
     // textContent is faster than innerText (no layout flush, no CSS visibility check)
     const text = editable.textContent || '';
     const words = _countWords(text);
-    const chars = text.replace(/\n/g, '').length;
+    const chars = text.replaceAll('\n', '').length;
     const maxWords = this.options.maxWords || 0;
     const maxChars = this.options.maxChars || 0;
 
@@ -249,6 +247,6 @@ export class Statusbar {
    */
   getCharCount() {
     const editable = this.context.layoutInfo.editable;
-    return ((editable.innerText || '').replace(/\n/g, '')).length;
+    return (editable.innerText || '').replaceAll('\n', '').length;
   }
 }

package/src/js/module/TableTooltip.js

@@ -212,26 +212,26 @@ export class TableTooltip {
         if (!to || (
           !editable.contains(to) &&
           !this._el.contains(to) &&
-          !(this._sizePopover && this._sizePopover.contains(to))
+          !this._sizePopover?.contains(to)
         )) {
           this._scheduleHide();
         }
       }, { passive: true }),
       on(document, 'click', (e) => {
         const et = /** @type {Node} */ (e.target);
-        if (this._selectMode && this._activeTable && this._activeTable.contains(et)) return;
+        if (this._selectMode && this._activeTable?.contains(et)) return;
         if (this._activeTable &&
           !this._activeTable.contains(et) &&
           !this._el.contains(et) &&
-          !(this._sizePopover && this._sizePopover.contains(et))) {
+          !this._sizePopover?.contains(et)) {
           this._hide();
         }
       }),
       // Sync shade strip whenever selection moves to a different cell
       on(document, 'selectionchange', () => this._syncShadeStrip()),
       // 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 }),
     );
 
     this._initResize();
@@ -386,14 +386,14 @@ export class TableTooltip {
     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;
     if (this._sizePopover && this._sizePopover.parentNode) {
-      this._sizePopover.parentNode.removeChild(this._sizePopover);
+      this._sizePopover.remove();
     }
     this._sizePopover = null;
     if (this._shadePopover && this._shadePopover.parentNode) {
-      this._shadePopover.parentNode.removeChild(this._shadePopover);
+      this._shadePopover.remove();
     }
     this._shadePopover = null;
   }
@@ -553,7 +553,7 @@ export class TableTooltip {
   _syncShadeStrip() {
     if (!this._shadeColorStrip || !this._el || this._el.style.display === 'none') return;
     const cell = this._getCell();
-    this._shadeColorStrip.style.background = (cell && cell.style.backgroundColor) || 'transparent';
+    this._shadeColorStrip.style.background = cell?.style.backgroundColor || 'transparent';
   }
 
   _hide() {
@@ -590,7 +590,7 @@ export class TableTooltip {
     let top  = rect.top - tipH - margin;
 
     if (top  < margin)                           top  = rect.bottom + 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;
 
     this._el.style.left = `${left}px`;
@@ -603,17 +603,17 @@ export class TableTooltip {
 
   _getCell() {
     // Prefer the cell under the current text cursor (most intuitive for operations)
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (sel && sel.rangeCount) {
       let container = sel.getRangeAt(0).commonAncestorContainer;
       if (container.nodeType === 3) container = container.parentElement;
-      const cellFromSel = container && /** @type {Element} */ (container).closest('td, th');
-      if (cellFromSel && this._activeTable && this._activeTable.contains(cellFromSel)) {
+      const cellFromSel = /** @type {Element} */ (container)?.closest('td, th');
+      if (cellFromSel && this._activeTable?.contains(cellFromSel)) {
         return cellFromSel;
       }
     }
     return this._activeCell
-      || (this._activeTable && this._activeTable.querySelector('td, th'));
+      || this._activeTable?.querySelector('td, th');
   }
 
   // ---------------------------------------------------------------------------
@@ -735,7 +735,7 @@ export class TableTooltip {
       const bi = allRows.indexOf(best);
       const ri = allRows.indexOf(r);
       return position === 'above' ? (ri < bi ? r : best) : (ri > bi ? r : best);
-    });
+    }, selectedRows[0]);
     const colCount = Array.from(refRow.cells).reduce((sum, c) => sum + (c.colSpan || 1), 0);
     const newRow = document.createElement('tr');
     const refCells = Array.from(refRow.cells);
@@ -786,7 +786,7 @@ export class TableTooltip {
     if (bodyRowsToDelete.length >= totalBodyRows) return;
     this._activeCell = null;
     this._clearSelection();
-    selectedRows.forEach((r) => r.parentElement?.removeChild(r));
+    selectedRows.forEach((r) => r.remove());
     requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
@@ -810,7 +810,7 @@ export class TableTooltip {
     });
     this._activeCell = null;
     this._clearSelection();
-    cellsToDelete.forEach((c) => c.parentElement?.removeChild(c));
+    cellsToDelete.forEach((c) => c.remove());
     requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
@@ -824,7 +824,7 @@ export class TableTooltip {
     // Prefer user panel-selected cells; fall back to text-selection range
     let selected = this._getSelectedCells().filter((c) => table.contains(c));
     if (selected.length < 2) {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || sel.rangeCount === 0) return;
       const range = sel.getRangeAt(0);
       const allCells = Array.from(table.querySelectorAll('td, th'));
@@ -866,7 +866,7 @@ export class TableTooltip {
     first.rowSpan = maxR - minR + 1;
     first.style.verticalAlign = 'middle';
     first.innerHTML = rectCells.map((c) => c.innerHTML).join('');
-    rectCells.slice(1).forEach((c) => c.parentElement?.removeChild(c));
+    rectCells.slice(1).forEach((c) => c.remove());
 
     this._clearSelection();
     this.context.invoke('editor.afterCommand');
@@ -876,7 +876,7 @@ export class TableTooltip {
     const table = this._activeTable;
     if (!table) return;
     this._hide();
-    if (table.parentNode) table.parentNode.removeChild(table);
+    if (table.parentNode) table.remove();
     this.context.invoke('editor.afterCommand');
   }
 
@@ -981,7 +981,7 @@ export class TableTooltip {
     this._sizeApply   = null;
 
     const d1 = on(applyBtn, 'click', () => {
-      const val = parseInt(this._sizeInputEl.value, 10);
+      const val = Number.parseInt(this._sizeInputEl.value, 10);
       if (val > 0 && typeof this._sizeApply === 'function') this._sizeApply(val);
       this._hideSizePopover();
     });
@@ -1016,8 +1016,8 @@ export class TableTooltip {
       if (!table) return;
       const firstCell = table.querySelector('td, th');
       const currentPx = firstCell
-        ? (parseInt(firstCell.style.borderWidth, 10) ||
-           parseInt(window.getComputedStyle(firstCell).borderWidth, 10) || 1)
+        ? (Number.parseInt(firstCell.style.borderWidth, 10) ||
+           Number.parseInt(globalThis.getComputedStyle(firstCell).borderWidth, 10) || 1)
         : 1;
       this._sizeTitleEl.textContent = this.context.locale.tooltips.table.tableBorderWidthPx;
       this._sizeInputEl.min   = '0';
@@ -1079,8 +1079,8 @@ export class TableTooltip {
       const ph = this._sizePopover.offsetHeight || 110;
       let left = tipRect.left;
       let top  = tipRect.bottom + 6;
-      if (left + pw > window.innerWidth  - 8) left = window.innerWidth  - pw - 8;
-      if (top  + ph > window.innerHeight - 8) top  = tipRect.top - ph - 6;
+      if (left + pw > globalThis.innerWidth  - 8) left = globalThis.innerWidth  - pw - 8;
+      if (top  + ph > globalThis.innerHeight - 8) top  = tipRect.top - ph - 6;
       this._sizePopover.style.left = `${left}px`;
       this._sizePopover.style.top  = `${top}px`;
       if (this._sizeInputEl) { this._sizeInputEl.focus(); this._sizeInputEl.select(); }
@@ -1135,11 +1135,9 @@ export class TableTooltip {
     customRow.appendChild(customLabel);
     pop.appendChild(customRow);
 
-    // Prevent mousedown from collapsing editor selection
-    this._disposers.push(on(pop, 'mousedown', (e) => e.preventDefault()));
-
-    // Keep tooltip alive while hovering popover
+    // Prevent mousedown from collapsing editor selection; keep tooltip alive while hovering
     this._disposers.push(
+      on(pop, 'mousedown', (e) => e.preventDefault()),
       on(pop, 'mouseenter', () => this._clearTimers()),
       on(pop, 'mouseleave', () => this._scheduleHide()),
     );
@@ -1150,7 +1148,7 @@ export class TableTooltip {
       if (this._shadePopover &&
           this._shadePopover.style.display !== 'none' &&
           !this._shadePopover.contains(et) &&
-          !(this._el && this._el.contains(et))) {
+          !this._el?.contains(et)) {
         this._hideCellShadePopover();
       }
     }));
@@ -1172,8 +1170,8 @@ export class TableTooltip {
       const tipRect = this._el.getBoundingClientRect();
       let left = tipRect.left;
       let top  = tipRect.bottom + 6;
-      if (left + pw > window.innerWidth  - 8) left = window.innerWidth  - pw - 8;
-      if (top  + ph > window.innerHeight - 8) top  = tipRect.top - ph - 6;
+      if (left + pw > globalThis.innerWidth  - 8) left = globalThis.innerWidth  - pw - 8;
+      if (top  + ph > globalThis.innerHeight - 8) top  = tipRect.top - ph - 6;
       this._shadePopover.style.left = `${Math.max(8, left)}px`;
       this._shadePopover.style.top  = `${Math.max(8, top)}px`;
     });

package/src/js/module/Toolbar.js

@@ -146,7 +146,7 @@ export class Toolbar {
     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;
   }
@@ -244,8 +244,8 @@ export class Toolbar {
 
     const setHighlight = (rows, cols) => {
       cells.forEach((cell) => {
-        const r = +cell.getAttribute('data-row');
-        const c = +cell.getAttribute('data-col');
+        const r = +cell.dataset.row;
+        const c = +cell.dataset.col;
         cell.classList.toggle('active', r <= rows && c <= cols);
       });
       label.textContent = (rows && cols) ? `${rows} × ${cols}` : (this.context.locale.toolbar.insertTableLabel || 'Insert Table');
@@ -264,8 +264,8 @@ export class Toolbar {
 
       let left = rect.left;
       let top  = rect.bottom + 4;
-      if (left + pw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - pw - 8);
-      if (top  + ph > window.innerHeight - 8) top  = rect.top - ph - 4;
+      if (left + pw > globalThis.innerWidth - 8) left = Math.max(8, globalThis.innerWidth - pw - 8);
+      if (top  + ph > globalThis.innerHeight - 8) top  = rect.top - ph - 4;
 
       popup.style.left = `${left}px`;
       popup.style.top  = `${top}px`;
@@ -286,18 +286,18 @@ export class Toolbar {
     });
 
     const d2 = on(grid, 'mouseover', (e) => {
-      const cell = /** @type {Element} */ (e.target)?.closest('.an-table-cell');
+      const cell = /** @type {HTMLElement|null} */ (/** @type {Element} */ (e.target)?.closest('.an-table-cell'));
       if (!cell) return;
-      setHighlight(+cell.getAttribute('data-row'), +cell.getAttribute('data-col'));
+      setHighlight(+cell.dataset.row, +cell.dataset.col);
     });
 
     const d3 = on(grid, 'mouseleave', () => setHighlight(0, 0));
 
     const d4 = on(grid, 'click', (e) => {
-      const cell = /** @type {Element} */ (e.target)?.closest('.an-table-cell');
+      const cell = /** @type {HTMLElement|null} */ (/** @type {Element} */ (e.target)?.closest('.an-table-cell'));
       if (!cell) return;
-      const rows = +cell.getAttribute('data-row');
-      const cols = +cell.getAttribute('data-col');
+      const rows = +cell.dataset.row;
+      const cols = +cell.dataset.col;
       closePopup();
       this.context.invoke('editor.focus');
       def.action(this.context, rows, cols);
@@ -308,7 +308,7 @@ export class Toolbar {
     // Append popup to body so position:fixed is truly viewport-relative,
     // unaffected by any ancestor transform / filter (same pattern as color picker).
     this._disposers.push(d1, d2, d3, d4, d5, () => {
-      if (popup.parentNode) popup.parentNode.removeChild(popup);
+      if (popup.parentNode) popup.remove();
     });
 
     wrap.appendChild(btn);
@@ -398,14 +398,14 @@ export class Toolbar {
     let savedRange = null;
 
     const saveSelection = () => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
     };
 
     const restoreSelection = () => {
       if (!savedRange) return;
       try {
-        const sel = window.getSelection();
+        const sel = globalThis.getSelection();
         if (!sel) return;
         sel.removeAllRanges();
         sel.addRange(savedRange);
@@ -424,7 +424,7 @@ export class Toolbar {
       const rect = arrowBtn.getBoundingClientRect();
       const popupMinW = 184;
       let left = rect.left;
-      if (left + popupMinW > window.innerWidth) left = rect.right - popupMinW;
+      if (left + popupMinW > globalThis.innerWidth) left = rect.right - popupMinW;
       popup.style.top  = `${rect.bottom + 4}px`;
       popup.style.left = `${Math.max(4, left)}px`;
       popup.style.display = 'block';
@@ -491,13 +491,13 @@ export class Toolbar {
     // popup doesn't drift away from the button it belongs to.
     const onScrollResize = () => { if (isOpen) closePopup(); };
     document.addEventListener('scroll', onScrollResize, { passive: true, capture: true });
-    window.addEventListener('resize',   onScrollResize, { passive: true });
+    globalThis.addEventListener('resize',   onScrollResize, { passive: true });
 
     this._disposers.push(d1, d2, d2b, d3, d3b, d4, d5, d6,
       () => document.removeEventListener('scroll', onScrollResize, { capture: true }),
-      () => window.removeEventListener('resize',   onScrollResize),
+      () => globalThis.removeEventListener('resize',   onScrollResize),
       // Remove popup from body on editor destroy
-      () => { if (popup.parentNode) popup.parentNode.removeChild(popup); },
+      () => { if (popup.parentNode) popup.remove(); },
     );
 
     // Register this popup's closer so other color pickers can close it
@@ -562,7 +562,7 @@ export class Toolbar {
     /** @type {Range|null} */
     let _savedRange = null;
     const dMousedown = on(select, 'mousedown', () => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       _savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
     });
 
@@ -574,7 +574,7 @@ export class Toolbar {
       // Restore selection saved on mousedown so the action targets the correct text.
       if (_savedRange) {
         try {
-          const sel = window.getSelection();
+          const sel = globalThis.getSelection();
           if (sel) { sel.removeAllRanges(); sel.addRange(_savedRange); }
         } catch (_) { /* range may be stale if DOM changed */ }
       }
@@ -684,7 +684,7 @@ export class Toolbar {
 
     // Sync button active states
     this.el.querySelectorAll('button[data-btn]').forEach((btn) => {
-      const def = btnMap.get(btn.getAttribute('data-btn'));
+      const def = btnMap.get(/** @type {HTMLElement} */ (btn).dataset.btn);
       if (def && typeof def.isActive === 'function') {
         btn.classList.toggle('active', !!def.isActive(this.context));
       }
@@ -695,7 +695,7 @@ export class Toolbar {
 
     // Sync select dropdowns (e.g. font family) with current cursor position
     this.el.querySelectorAll('select[data-btn]').forEach((select) => {
-      const def = btnMap.get(select.getAttribute('data-btn'));
+      const def = btnMap.get(/** @type {HTMLElement} */ (select).dataset.btn);
       if (!def || typeof def.getValue !== 'function') return;
       // queryCommandValue returns the font name, possibly quoted — strip quotes
       let raw = (def.getValue(this.context) || '').replace(/["']/g, '').trim();

package/src/js/module/VideoDialog.js

@@ -7,47 +7,18 @@
  *   • Direct video URLs   → <video> element (.mp4 / .webm / .ogg)
  */
 
-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 VideoDialog {
-  /** @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"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
 
+export class VideoDialog extends BaseDialog {
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
 
   show() {
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._urlInput.value = '';
     this._widthInput.value = '560';
     this._hintEl.textContent = '';
@@ -60,21 +31,7 @@ export class VideoDialog {
 
   _buildDialog() {
     const L = this.context.locale.videoDialog;
-    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"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></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 input
     const urlLabel = createElement('label', { class: 'an-label' });
@@ -86,6 +43,7 @@ export class VideoDialog {
       autocomplete: 'off',
     }));
     this._urlInput = urlInput;
+    this._firstInput = urlInput;
 
     // Hint (detected source)
     const hintEl = createElement('p', { class: 'an-dialog-hint' });
@@ -104,30 +62,16 @@ export class VideoDialog {
     }));
     this._widthInput = widthInput;
 
-    // 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, hintEl, widthLabel, widthInput, btnRow);
-    overlay.appendChild(box);
-    makeDraggable(header, box);
+    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
+    box.append(urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
 
     // Live URL hint
     const d0 = on(urlInput, 'input', () => {
       const info = this._parseVideoUrl(urlInput.value.trim());
       hintEl.textContent = info ? this.context.locale.videoDialog.detected(info.type) : (urlInput.value ? this.context.locale.videoDialog.unknownFormat : '');
     });
-
-    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(); } });
-    this._disposers.push(d0, d1, d2, d3, d4);
+    this._disposers.push(d0, d4);
 
     return overlay;
   }
@@ -138,7 +82,7 @@ export class VideoDialog {
 
   _onInsert() {
     const rawUrl = this._urlInput.value.trim();
-    const width  = Math.max(80, parseInt(this._widthInput.value, 10) || 560);
+    const width  = Math.max(80, Number.parseInt(this._widthInput.value, 10) || 560);
 
     if (!rawUrl) {
       this._urlInput.focus();
@@ -157,20 +101,6 @@ export class VideoDialog {
     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;
-  }
-
   // ---------------------------------------------------------------------------
   // URL parsing & HTML building
   // ---------------------------------------------------------------------------
@@ -190,19 +120,19 @@ export class VideoDialog {
     } catch { return null; }
 
     // YouTube watch: https://www.youtube.com/watch?v=ID
-    const ytWatch = url.match(/(?:youtube\.com\/watch\?(?:.*&)?v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
+    const ytWatch = /(?:youtube\.com\/watch\?(?:.*&)?v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/.exec(url);
     if (ytWatch) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytWatch[1]}` };
 
     // YouTube short: https://youtu.be/ID
-    const ytShort = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
+    const ytShort = /youtu\.be\/([a-zA-Z0-9_-]{11})/.exec(url);
     if (ytShort) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytShort[1]}` };
 
     // YouTube Shorts: https://www.youtube.com/shorts/ID
-    const ytShorts = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
+    const ytShorts = /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/.exec(url);
     if (ytShorts) return { type: 'YouTube Shorts', embedUrl: `https://www.youtube.com/embed/${ytShorts[1]}` };
 
     // Vimeo: https://vimeo.com/ID
-    const vimeo = url.match(/vimeo\.com\/(\d+)/);
+    const vimeo = /vimeo\.com\/(\d+)/.exec(url);
     if (vimeo) return { type: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${vimeo[1]}` };
 
     // Direct video file
@@ -238,7 +168,7 @@ export class VideoDialog {
     }
 
     if (info && info.type === 'Direct video') {
-      const src = info.embedUrl.replace(/"/g, '%22');
+      const src = info.embedUrl.replaceAll('"', '%22');
       return (
         `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
         `<video src="${src}" width="${width}" height="${height}" controls ` +
@@ -258,7 +188,7 @@ export class VideoDialog {
     })();
     if (!safeSrc) return null;
 
-    const escapedSrc = safeSrc.replace(/"/g, '%22');
+    const escapedSrc = safeSrc.replaceAll('"', '%22');
     return (
       `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
       `<video src="${escapedSrc}" width="${width}" height="${height}" controls ` +

package/src/js/module/VideoResizer.js

@@ -46,8 +46,8 @@ export class VideoResizer {
         if (wrapper) this._select(wrapper);
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
-      on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', onWindowResize),
+      on(globalThis, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      on(globalThis, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
       // D1: Prevent native browser drag of video wrappers. Without this, a user
       // can hold-and-drag to produce a "copy" that lands outside .an-editable,
@@ -75,9 +75,7 @@ export class VideoResizer {
       this._positionRaf = null;
     }
     this._deselect();
-    if (this._overlay && this._overlay.parentNode) {
-      this._overlay.parentNode.removeChild(this._overlay);
-    }
+    this._overlay?.remove();
     this._overlay = null;
   }
 
@@ -111,7 +109,7 @@ export class VideoResizer {
   _findWrapper(el) {
     if (!el || !(el instanceof Element)) return null;
     // Direct hit on wrapper
-    if (el.classList && el.classList.contains('an-video-wrapper')) return /** @type {HTMLElement} */ (el);
+    if (el.classList?.contains('an-video-wrapper')) return /** @type {HTMLElement} */ (el);
     // Child element (iframe, video, or nested)
     const w = el.closest('.an-video-wrapper');
     if (w) return /** @type {HTMLElement} */ (w);
@@ -152,7 +150,7 @@ export class VideoResizer {
   _onDocClick(e) {
     if (!this._activeWrapper) return;
     if (this._activeWrapper.contains(e.target)) return;
-    if (this._overlay && this._overlay.contains(e.target)) return;
+    if (this._overlay?.contains(e.target)) return;
     if (e.target.closest('.an-contextmenu')) return;
     this._deselect();
   }

package/src/js/module/VideoTooltip.js

@@ -40,7 +40,7 @@ export class VideoTooltip {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         // The shield div sits on top of iframes — we detect hover via it or the wrapper
         const target = /** @type {Element} */ (e.target);
-        const wrapper = target && target.closest ? target.closest('.an-video-wrapper') : null;
+        const wrapper = target?.closest('.an-video-wrapper');
         if (wrapper && editable.contains(wrapper)) {
           this._scheduleShow(wrapper);
         }
@@ -62,8 +62,8 @@ export class VideoTooltip {
         }
       }),
       // 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;
@@ -74,7 +74,7 @@ export class VideoTooltip {
     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;
   }
 
@@ -210,8 +210,8 @@ export class VideoTooltip {
     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`;
@@ -268,7 +268,7 @@ export class VideoTooltip {
     if (!wrapper) return;
     this._hide();
     this.context.invoke('videoResizer.deselect');
-    if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+    wrapper.remove();
     this.context.invoke('editor.afterCommand');
   }
 

package/src/js/renderer.js

@@ -46,7 +46,7 @@ export function renderLayout(targetEl, options) {
   editable.innerHTML = sanitiseHTML(initialContent, { allowIframes: true });
 
   // Apply default font family so the editable renders in the configured font
-  const defaultFont = options.defaultFontFamily || (options.fontFamilies && options.fontFamilies[0]);
+  const defaultFont = options.defaultFontFamily || options.fontFamilies?.[0];
   if (defaultFont) {
     editable.style.fontFamily = defaultFont;
   }