autumnnote 1.5.0 → 1.6.1

package/src/js/module/ContextMenu.js

@@ -1,4 +1,4 @@
-// ContextMenu.js - Right-click context menu for editor actions
+// ContextMenu.js - Right-click context menu for editor actions
 import { createElement, on } from '../core/dom.js';
 import { sanitiseHTML } from '../core/sanitise.js';
 
@@ -60,7 +60,7 @@ const defaultItems = [
   { name: 'copy',      label: 'Copy',         icon: ICONS.copy,      action: () => document.execCommand('copy') },
   { name: 'paste',     label: 'Paste',        icon: ICONS.paste,     action: (ctx) => {
     if (!navigator.clipboard) return;
-    const editable = ctx.layoutInfo && ctx.layoutInfo.editable;
+    const editable = ctx.layoutInfo?.editable;
     if (!editable) return;
     // Prefer read() to get rich HTML; fall back to readText() for plain text
     const doInsert = (html, text) => {
@@ -131,24 +131,24 @@ export class ContextMenu {
 
     this._renderItems(this._items);
 
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (editable) {
       this._disposers.push(on(editable, 'contextmenu', (e) => this._onContextMenu(e)));
     }
 
     this._disposers.push(on(document, 'click', (e) => this._maybeHide(e)));
-    this._disposers.push(on(document, 'keydown', (e) => { if (e.key === 'Escape') this.hide(); }));
-    this._disposers.push(on(window, 'scroll', () => this.hide(), { passive: true }));
+    this._disposers.push(on(document, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Escape') this.hide(); }));
+    this._disposers.push(on(globalThis, 'scroll', () => this.hide(), { passive: true }));
 
     return this;
   }
 
   destroy() {
-    this._menuDisposers.forEach((d) => { try { d(); } catch (e) {} });
+    this._menuDisposers.forEach((d) => { try { d(); } catch (_e) {} });
     this._menuDisposers = [];
-    this._disposers.forEach((d) => { try { d(); } catch (e) {} });
+    this._disposers.forEach((d) => { try { d(); } catch (_e) {} });
     this._disposers = [];
-    if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
+    if (this.el) this.el.remove();
     this.el = null;
   }
 
@@ -176,8 +176,8 @@ export class ContextMenu {
         backBtn.appendChild(createElement('span', { class: 'an-context-label' }, [backLabel]));
         const off = on(backBtn, 'click', (e) => {
           e.stopPropagation();
-          const curLeft = parseFloat(this.el.style.left);
-          const curTop = parseFloat(this.el.style.top);
+          const curLeft = Number.parseFloat(this.el.style.left);
+          const curTop = Number.parseFloat(this.el.style.top);
           this._renderItems(it.navigate());
           this._reposition(curLeft, curTop);
         });
@@ -212,8 +212,8 @@ export class ContextMenu {
         btn.appendChild(chevron);
         const off = on(btn, 'click', (e) => {
           e.stopPropagation();
-          const curLeft = parseFloat(this.el.style.left);
-          const curTop = parseFloat(this.el.style.top);
+          const curLeft = Number.parseFloat(this.el.style.left);
+          const curTop = Number.parseFloat(this.el.style.top);
           this._renderItems(it.navigate());
           this._reposition(curLeft, curTop);
         });
@@ -253,12 +253,12 @@ export class ContextMenu {
 
         // Custom color row
         const customRow = createElement('div', { class: 'an-context-color-custom' });
-        const colorInput = createElement('input', {
+        const colorInput = /** @type {HTMLInputElement} */ (createElement('input', {
           type: 'color',
           value: it.colorType === 'foreColor' ? '#000000' : '#ffff00',
           title: this.context.locale.contextMenu.customColor || 'Custom color',
           'aria-label': this.context.locale.contextMenu.customColor || 'Custom color',
-        });
+        }));
         const customLabel = createElement('span', {}, [this.context.locale.contextMenu.customColorLabel || 'Custom…']);
         const offCustom = on(colorInput, 'change', () => this._applyColor(it.colorType, colorInput.value));
         this._menuDisposers.push(offCustom);
@@ -324,20 +324,20 @@ export class ContextMenu {
         this._menuDisposers.push(offHeader);
 
         const offMove = on(gridEl, 'mousemove', (e) => {
-          const cell = e.target.closest('[data-row]');
+          const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-row]'));
           if (!cell) return;
           setHighlight(+cell.dataset.row, +cell.dataset.col);
         });
         const offLeave = on(gridEl, 'mouseleave', () => setHighlight(0, 0));
         const offClick = on(gridEl, 'click', (e) => {
-          const cell = e.target.closest('[data-row]');
+          const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-row]'));
           if (!cell) return;
           const rows = +cell.dataset.row;
           const cols = +cell.dataset.col;
-          const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+          const editable = this.context.layoutInfo?.editable;
           if (editable && this._savedRange) {
             editable.focus();
-            const sel = window.getSelection();
+            const sel = globalThis.getSelection();
             sel.removeAllRanges();
             sel.addRange(this._savedRange.cloneRange());
           }
@@ -354,7 +354,7 @@ export class ContextMenu {
 
       // Regular item
       const btn = createElement('button', { type: 'button', class: 'an-context-item', 'data-name': it.name || '' });
-      if (typeof it.disabled === 'function' ? it.disabled(this.context) : !!it.disabled) btn.disabled = true;
+      if (typeof it.disabled === 'function' ? it.disabled(this.context) : !!it.disabled) /** @type {HTMLButtonElement} */ (btn).disabled = true;
       if (it.icon) {
         const iconSpan = createElement('span', { class: 'an-context-icon', 'aria-hidden': 'true' });
         iconSpan.innerHTML = it.icon;
@@ -372,13 +372,13 @@ export class ContextMenu {
   }
 
   _onContextMenu(event) {
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable) return;
     if (!editable.contains(event.target)) return;
     if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
     event.preventDefault();
 
-    const winSel = window.getSelection();
+    const winSel = globalThis.getSelection();
     this._savedRange = (winSel && winSel.rangeCount > 0) ? winSel.getRangeAt(0).cloneRange() : null;
     this._renderItems(this._items);
 
@@ -386,7 +386,7 @@ export class ContextMenu {
     // Only apply when there is a real (non-collapsed) selection — a collapsed range
     // (cursor only) also has height > 0, which would misplace the menu relative
     // to the actual click point.
-    let openX = event.clientX;
+    const openX = event.clientX;
     let openY = event.clientY;
     if (this._savedRange && !this._savedRange.collapsed) {
       try {
@@ -425,9 +425,9 @@ export class ContextMenu {
     let left = rx;
     let top = ry;
     // Clamp to viewport so the menu never overflows the screen edge
-    if (left + w > window.innerWidth - 8) left = window.innerWidth - w - 8;
+    if (left + w > globalThis.innerWidth - 8) left = globalThis.innerWidth - w - 8;
     if (left < 8) left = 8;
-    if (top + h > window.innerHeight - 8) top = window.innerHeight - h - 8;
+    if (top + h > globalThis.innerHeight - 8) top = globalThis.innerHeight - h - 8;
     if (top < 8) top = 8;
     this.el.style.left = `${left}px`;
     this.el.style.top = `${top}px`;
@@ -454,7 +454,7 @@ export class ContextMenu {
     let node = range.startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node) return type === 'foreColor' ? '#000000' : 'transparent';
-    const cs = window.getComputedStyle(node);
+    const cs = globalThis.getComputedStyle(/** @type {Element} */ (node));
     if (type === 'foreColor') {
       return cs.color || '#000000';
     }
@@ -464,10 +464,10 @@ export class ContextMenu {
 
   /** Restore selection, apply a color command, then hide the menu. */
   _applyColor(type, color) {
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable || !this._savedRange) return;
     editable.focus();
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     sel.removeAllRanges();
     sel.addRange(this._savedRange.cloneRange());
     document.execCommand(type, false, color);
@@ -482,20 +482,20 @@ export class ContextMenu {
   copyFormat() {
     const range = this._savedRange;
     if (!range) return;
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     let node = range.startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node || !editable || !editable.contains(node)) return;
 
     // Walk up to collect explicitly-set inline properties from the nearest styled ancestor
-    const cs = window.getComputedStyle(node);
+    const cs = globalThis.getComputedStyle(/** @type {Element} */ (node));
 
     // Detect if an explicit font-family / font-size is set on an element (not just inherited)
     const explicitFontFamily = this._findExplicitStyle(node, editable, 'fontFamily');
     const explicitFontSize   = this._findExplicitStyle(node, editable, 'fontSize');
 
     this._copiedFormat = {
-      bold:            parseInt(cs.fontWeight, 10) >= 700,
+      bold:            Number.parseInt(cs.fontWeight, 10) >= 700,
       italic:          cs.fontStyle === 'italic' || cs.fontStyle === 'oblique',
       underline:       (cs.textDecorationLine || '').includes('underline'),
       strikethrough:   (cs.textDecorationLine || '').includes('line-through'),
@@ -533,13 +533,13 @@ export class ContextMenu {
   pasteFormat() {
     if (!this._copiedFormat || !this._savedRange) return;
     const fmt = this._copiedFormat;
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable) return;
 
     // CRITICAL: focus the editable FIRST, then restore selection.
     // Calling focus() after addRange() can wipe the selection in Chrome/Firefox.
     editable.focus();
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     sel.removeAllRanges();
     sel.addRange(this._savedRange.cloneRange());
 
@@ -575,14 +575,14 @@ export class ContextMenu {
       document.execCommand('fontSize', false, '7');
       // Mark only the NEWLY created font[size="7"] elements.
       editable.querySelectorAll('font[size="7"]').forEach((el) => {
-        if (!preExisting.has(el)) el.setAttribute('data-an-tmp', marker);
+        if (!preExisting.has(el)) /** @type {HTMLElement} */ (el).dataset.anTmp = marker;
       });
       editable.querySelectorAll(`[data-an-tmp="${marker}"]`).forEach((el) => {
         const span = document.createElement('span');
         span.style.fontSize = fmt.fontSize;
         el.parentNode.insertBefore(span, el);
         while (el.firstChild) span.appendChild(el.firstChild);
-        el.parentNode.removeChild(el);
+        el.remove();
       });
     }
 
@@ -592,11 +592,11 @@ export class ContextMenu {
   /** Strip all inline formatting from the saved selection. */
   removeFormat() {
     if (!this._savedRange) return;
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable) return;
 
     editable.focus();
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     sel.removeAllRanges();
     sel.addRange(this._savedRange.cloneRange());
 
@@ -609,7 +609,7 @@ export class ContextMenu {
     let el;
     while ((el = iter.nextNode())) {
       if (!editable.contains(el) || el === editable) continue;
-      try { if (range.intersectsNode(el)) el.removeAttribute('style'); } catch { /* ignore */ }
+      try { if (range.intersectsNode(el)) /** @type {Element} */ (el).removeAttribute('style'); } catch { /* ignore */ }
     }
 
     this.context.invoke('editor.afterCommand');

package/src/js/module/Editor.js

@@ -12,6 +12,7 @@ import { handleKeydown } from '../editing/Typing.js';
 import { on } from '../core/dom.js';
 import { sanitiseHTML, sanitiseUrl } from '../core/sanitise.js';
 import { markdownToHTML, htmlToMarkdown } from '../core/markdown.js';
+import { detectLang } from '../core/detectLang.js';
 
 export class Editor {
   /**
@@ -60,7 +61,7 @@ export class Editor {
     // Refresh toolbar on selection change, scoped to this editor
     const onSelChange = () => {
       if (!this.context._alive) return;
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (sel && sel.rangeCount > 0 && editable.contains(sel.anchorNode)) {
         this.context.invoke('toolbar.refresh');
         if (typeof this.options.onSelectionChange === 'function') {
@@ -84,7 +85,7 @@ export class Editor {
     //          lands WHERE the user actually clicked (middle, end of text…).
     // keyup  : arrow-key navigation may land at <li>[0]; move to start-of-text.
     const fixChecklistCursor = (event) => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) return;
       const r = sel.getRangeAt(0);
       if (!r.collapsed) return;
@@ -93,7 +94,8 @@ export class Editor {
       // Only act when cursor is at the <li> element node itself (not inside
       // a text node — the browser already placed it correctly in that case).
       if (sc.nodeType !== Node.ELEMENT_NODE) return;
-      const li = sc.matches && sc.matches('.an-checklist li') ? sc : null;
+      const scEl = /** @type {Element} */ (sc);
+      const li = scEl.matches('.an-checklist li') ? scEl : null;
       if (!li) return;
       const cb = li.querySelector('input[type="checkbox"]');
       if (!cb) return;
@@ -160,9 +162,9 @@ export class Editor {
       // the mouse and moving outside the wrapper before releasing.
       on(editable, 'dragstart', (e) => {
         if (isReadOnly()) { e.preventDefault(); return; }
-        const target = e.target;
+        const target = /** @type {Element} */ (e.target);
         if (target && (target.nodeName === 'IFRAME' ||
-            (target.closest && target.closest('.an-video-wrapper')))) {
+            target.closest('.an-video-wrapper'))) {
           e.preventDefault();
         }
       }),
@@ -178,13 +180,14 @@ export class Editor {
     /** @type {string|null} 'superscript' | 'subscript' | null */
     let _compositionSupSub = null;
     const onCompositionStart = () => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) { _compositionSupSub = null; return; }
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
-      if (node && node.closest) {
-        if (node.closest('sup')) _compositionSupSub = 'superscript';
-        else if (node.closest('sub')) _compositionSupSub = 'subscript';
+      if (node) {
+        const el = /** @type {Element} */ (node);
+        if (el.closest('sup')) _compositionSupSub = 'superscript';
+        else if (el.closest('sub')) _compositionSupSub = 'subscript';
         else _compositionSupSub = null;
       }
     };
@@ -192,12 +195,12 @@ export class Editor {
       const tag = _compositionSupSub;
       _compositionSupSub = null;
       if (!tag) return;
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) return;
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
-      const inContext = node && node.closest &&
-        (tag === 'superscript' ? node.closest('sup') : node.closest('sub'));
+      const el = /** @type {Element} */ (node);
+      const inContext = tag === 'superscript' ? el?.closest('sup') : el?.closest('sub');
       if (!inContext) {
         // The composed character escaped the sup/sub — re-apply the format.
         document.execCommand(tag);
@@ -284,7 +287,7 @@ export class Editor {
     if (!type.startsWith('insert')) return;
 
     const text = this.context.layoutInfo.editable.innerText || '';
-    const chars = text.replace(/\n/g, '').length;
+    const chars = text.replaceAll('\n', '').length;
 
     if (maxChars && chars >= maxChars) {
       event.preventDefault();
@@ -314,6 +317,9 @@ export class Editor {
     // C4: Remove figure.an-figure elements whose <img> has been deleted so
     // orphaned figcaptions do not accumulate in the DOM.
     this._cleanOrphanedFigures();
+    // Ensure the editable always ends with a paragraph so the user can click
+    // and type after block elements that trap the cursor (pre, table, etc.).
+    this._ensureTrailingParagraph();
     // Immediate: keep toolbar and statusbar in sync on every mutation.
     this.context.invoke('toolbar.refresh');
     this.context.invoke('statusbar.update');
@@ -346,11 +352,30 @@ export class Editor {
     const editable = this.context.layoutInfo.editable;
     editable.querySelectorAll('figure.an-figure').forEach((fig) => {
       if (!fig.querySelector('img')) {
-        fig.parentNode.removeChild(fig);
+        fig.remove();
       }
     });
   }
 
+  /**
+   * Ensures the editable always ends with a plain paragraph so the cursor can
+   * be placed after block elements that do not naturally allow it
+   * (pre, blockquote, table, figure, ul, ol, hr).
+   * Without this, clicking below the last such element does nothing.
+   */
+  _ensureTrailingParagraph() {
+    const editable = this.context.layoutInfo.editable;
+    if (!editable) return;
+    const last = editable.lastElementChild;
+    if (!last) return;
+    const TRAPPING = new Set(['PRE', 'BLOCKQUOTE', 'TABLE', 'FIGURE', 'UL', 'OL', 'HR']);
+    if (TRAPPING.has(last.nodeName)) {
+      const p = document.createElement('p');
+      p.innerHTML = '<br>';
+      editable.appendChild(p);
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // Focus management
   // ---------------------------------------------------------------------------
@@ -370,7 +395,7 @@ export class Editor {
    */
   getHTML() {
     // Strip zero-width spaces inserted after icons to allow caret placement.
-    const raw = this.context.layoutInfo.editable.innerHTML.replace(/\u200B/g, '');
+    const raw = this.context.layoutInfo.editable.innerHTML.replaceAll('\u200B', '');
     // Replace any blob: URLs (lightweight DOM references to pasted/dropped images)
     // with their original data URLs so the returned HTML is fully self-contained.
     return this.context.invoke('clipboard.resolveImages', raw) ?? raw;
@@ -425,7 +450,7 @@ export class Editor {
   isEmpty() {
     const text = (this.context.layoutInfo.editable.innerText || '')
       .trim()
-      .replace(/\u00a0/g, '');
+      .replaceAll('\u00a0', '');
     const hasMedia = !!this.context.layoutInfo.editable.querySelector('img, video, iframe, table');
     return !text && !hasMedia;
   }
@@ -523,9 +548,35 @@ export class Editor {
   print()           { this.context.print(); }
 
   /**
-   * @param {string} tagName - e.g. 'h1', 'p', 'blockquote'
+   * @param {string} tagName - e.g. 'h1', 'p', 'blockquote', 'pre'
    */
-  formatBlock(tagName) { Style.formatBlock(tagName); this.afterCommand(); }
+  formatBlock(tagName) {
+    Style.formatBlock(tagName);
+
+    // Auto-detect the programming language when the user formats a code block.
+    // Only runs when converting TO <pre> and the block has no language yet.
+    if (tagName === 'pre') {
+      const sel = globalThis.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const container = sel.getRangeAt(0).commonAncestorContainer;
+        const pre = /** @type {Element|null} */ (
+          container.nodeType === 1
+            ? /** @type {Element} */ (container).closest('pre')
+            : (/** @type {Element|null} */ (container.parentElement))?.closest('pre')
+        );
+        if (pre && !/** @type {HTMLElement} */ (pre).dataset.language) {
+          const code = pre.textContent || '';
+          const lang = detectLang(code);
+          if (lang) {
+            this.context.invoke('codeTooltip.applyLanguage', pre, lang);
+            return; // applyLanguage already calls afterCommand internally
+          }
+        }
+      }
+    }
+
+    this.afterCommand();
+  }
 
   /**
    * @param {string} color
@@ -566,7 +617,7 @@ export class Editor {
    * @param {boolean} [openInNewTab=false]
    */
   insertLink(url, text, openInNewTab = false) {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || sel.rangeCount === 0) return;
     const safeUrl = sanitiseUrl(url);
     if (!safeUrl) return;
@@ -580,8 +631,8 @@ export class Editor {
       if (openInNewTab) {
         const link = this._getClosestAnchor();
         if (link) {
-          link.setAttribute('target', '_blank');
-          link.setAttribute('rel', 'noopener noreferrer');
+          /** @type {Element} */ (link).setAttribute('target', '_blank');
+          /** @type {Element} */ (link).setAttribute('rel', 'noopener noreferrer');
         }
       }
     }
@@ -641,7 +692,7 @@ export class Editor {
   // ---------------------------------------------------------------------------
 
   _getClosestAnchor() {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || sel.rangeCount === 0) return null;
     let node = sel.getRangeAt(0).startContainer;
     while (node) {
@@ -658,10 +709,10 @@ export class Editor {
    */
   _escapeAttr(str) {
     return String(str ?? '')
-      .replace(/&/g, '&amp;')
-      .replace(/"/g, '&quot;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+      .replaceAll('&', '&amp;')
+      .replaceAll('"', '&quot;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;');
   }
 
   // --- delegated to shared sanitise.js ---

package/src/js/module/EmojiDialog.js

@@ -3,7 +3,7 @@
  * Click an emoji to insert it directly at the caret — no extra "Insert" step.
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 // ---------------------------------------------------------------------------
@@ -526,7 +526,7 @@ export class EmojiDialog {
     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;
   }
@@ -566,19 +566,23 @@ export class EmojiDialog {
 
     // Title row
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
+    const titleGroup = createElement('div', { class: 'an-dialog-title-group' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon an-dialog-icon--sm' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 13s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.title;
+    titleGroup.append(iconEl, title);
     const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': L.close });
     closeBtn.innerHTML = '&times;';
-    titleRow.append(title, closeBtn);
+    titleRow.append(titleGroup, closeBtn);
 
     // Search
-    const searchInput = createElement('input', {
+    const searchInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'search',
       class: 'an-input an-icon-search',
       placeholder: L.searchPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._searchInput = searchInput;
 
     // Category tabs
@@ -588,7 +592,7 @@ export class EmojiDialog {
     catBar.appendChild(allTab);
     EMOJI_CATS.forEach(({ id, label }) => {
       const tab = createElement('button', { type: 'button', class: 'an-icon-cat', 'data-cat': id });
-      tab.textContent = (L.categories && L.categories[id]) || label;
+      tab.textContent = L.categories?.[id] || label;
       catBar.appendChild(tab);
     });
     this._catBar = catBar;
@@ -617,6 +621,7 @@ export class EmojiDialog {
 
     box.append(titleRow, searchInput, catBar, grid, btnRow);
     overlay.appendChild(box);
+    makeDraggable(titleRow, box);
 
     // Events
     const d1 = on(closeBtn,    'click',  () => this._close());
@@ -624,7 +629,7 @@ export class EmojiDialog {
     const d3 = on(overlay,     'click',  (e) => { if (e.target === overlay) this._close(); });
     const d4 = on(searchInput, 'input',  () => this._filterEmojis(searchInput.value, this._activeCat));
     const d5 = on(catBar,      'click',  (e) => {
-      const tab = e.target.closest('[data-cat]');
+      const tab = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-cat]'));
       if (tab) {
         this._activeCat = tab.dataset.cat;
         this._updateCatTabs();
@@ -632,7 +637,7 @@ export class EmojiDialog {
       }
     });
     const d6 = on(grid, 'click', (e) => {
-      const cell = e.target.closest('.an-emoji-cell');
+      const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-emoji-cell'));
       if (cell) this._onEmojiClick(cell.dataset.char);
     });
     this._disposers.push(d1, d2, d3, d4, d5, d6);
@@ -645,7 +650,7 @@ export class EmojiDialog {
 
   _updateCatTabs() {
     this._catBar.querySelectorAll('.an-icon-cat').forEach((tab) => {
-      tab.classList.toggle('active', tab.dataset.cat === this._activeCat);
+      tab.classList.toggle('active', /** @type {HTMLElement} */ (tab).dataset.cat === this._activeCat);
     });
   }
 
@@ -653,10 +658,11 @@ export class EmojiDialog {
     const q = (query || '').trim().toLowerCase();
     let count = 0;
     this._grid.querySelectorAll('.an-emoji-cell').forEach((cell) => {
-      const matchCat   = !cat || cat === 'all' || cell.dataset.cat === cat;
-      const matchQuery = !q || cell.dataset.keywords.includes(q) || cell.dataset.char === q;
+      const hCell = /** @type {HTMLElement} */ (cell);
+      const matchCat   = !cat || cat === 'all' || hCell.dataset.cat === cat;
+      const matchQuery = !q || hCell.dataset.keywords.includes(q) || hCell.dataset.char === q;
       const visible = matchCat && matchQuery;
-      cell.style.display = visible ? '' : 'none';
+      hCell.style.display = visible ? '' : 'none';
       if (visible) count++;
     });
     let empty = this._grid.querySelector('.an-icon-empty');
@@ -665,7 +671,7 @@ export class EmojiDialog {
       empty.textContent = 'No emojis found';
       this._grid.appendChild(empty);
     }
-    empty.style.display = count > 0 ? 'none' : '';
+    /** @type {HTMLElement} */ (empty).style.display = count > 0 ? 'none' : '';
   }
 
   // ---------------------------------------------------------------------------
@@ -679,7 +685,7 @@ export class EmojiDialog {
     // 1. Restore selection while dialog is still mounted (same pattern as ImageDialog)
     if (savedRange) savedRange.select();
 
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
     if (!range) {
       range = document.createRange();
@@ -694,10 +700,10 @@ export class EmojiDialog {
     // deleteContents() can drift the range endpoint outside the cell in some
     // browsers.  Save the cell reference first and re-anchor after deletion.
     const _sc = range.startContainer;
-    const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)
-      ?.closest?.('td, th');
+    const _tdAnchor = /** @type {Element|null} */ (_sc.nodeType === 1 ? _sc : _sc.parentElement)
+      ?.closest('td, th');
     range.deleteContents();
-    if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
+    if (_tdAnchor?.isConnected && !_tdAnchor.contains(range.startContainer)) {
       range.setStart(_tdAnchor, 0);
       range.collapse(true);
     }
@@ -726,7 +732,7 @@ export class EmojiDialog {
     if (this._dialog) {
       this._dialog.style.display = 'flex';
       this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._searchInput && this._searchInput.focus(), 50);
+      setTimeout(() => this._searchInput?.focus(), 50);
     }
   }