autumnnote 1.5.0 → 1.6.1

package/src/js/module/BubbleToolbar.js

@@ -44,16 +44,16 @@ const _ACTIONS = {
   strikethrough: (ctx) => ctx.invoke('editor.strikethrough'),
   link:          (ctx) => ctx.invoke('linkDialog.show'),
   removeFormat:  (ctx) => {
-    const editable = ctx.layoutInfo && ctx.layoutInfo.editable;
+    const editable = ctx.layoutInfo?.editable;
     if (!editable) return;
     editable.focus();
     document.execCommand('removeFormat');
     // Also strip inline style attributes which execCommand('removeFormat') misses
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
+    const sel = globalThis.getSelection();
+    if (sel?.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
       const range = sel.getRangeAt(0);
       const ancestor = range.commonAncestorContainer;
-      const root = ancestor.nodeType === 1 ? ancestor : ancestor.parentElement;
+      const root = /** @type {Element|null} */ (ancestor.nodeType === 1 ? ancestor : ancestor.parentElement);
       if (root) {
         const candidates = [root, ...root.querySelectorAll('[style]')];
         for (const el of candidates) {
@@ -115,14 +115,16 @@ export class BubbleToolbar {
     const d6 = this.context.on('contextMenu:hide', () => {
       this._contextMenuOpen = false;
     });
-    this._disposers.push(d1, d2, d3, d4, d5, d6);
+    const d7 = on(globalThis, 'scroll', () => this._hide(), { passive: true });
+    const d8 = on(globalThis, 'resize', () => this._hide(), { passive: true });
+    this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8);
     return this;
   }
 
   destroy() {
-    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    this._el?.remove();
     this._el = null;
-    if (this._picker && this._picker.parentNode) this._picker.parentNode.removeChild(this._picker);
+    this._picker?.remove();
     this._picker = null;
     this._disposers.forEach((d) => d());
     this._disposers = [];
@@ -249,31 +251,33 @@ export class BubbleToolbar {
     document.body.appendChild(picker);
 
     this._picker = picker;
-    this._picker._paletteEl = palette;
-    this._picker._noColorBtn = noColorBtn;
-    this._picker._colorInput = colorInput;
+    const pickerAny = /** @type {any} */ (picker);
+    pickerAny._paletteEl = palette;
+    pickerAny._noColorBtn = noColorBtn;
+    pickerAny._colorInput = colorInput;
   }
 
   _openColorPicker(type, anchorBtn) {
     // Save current selection before the picker might shift focus
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0) {
+    const sel = globalThis.getSelection();
+    if (sel?.rangeCount > 0) {
       this._savedRange = sel.getRangeAt(0).cloneRange();
     }
 
     this._pickerType = type;
 
     // Toggle "No highlight" swatch based on type
-    const palette = this._picker._paletteEl;
-    const noColorBtn = this._picker._noColorBtn;
+    const pickerAny = /** @type {any} */ (this._picker);
+    const palette = pickerAny._paletteEl;
+    const noColorBtn = pickerAny._noColorBtn;
     if (type === 'hiliteColor') {
       if (!palette.contains(noColorBtn)) palette.appendChild(noColorBtn);
-    } else {
-      if (palette.contains(noColorBtn)) palette.removeChild(noColorBtn);
+    } else if (palette.contains(noColorBtn)) {
+      noColorBtn.remove();
     }
 
     // Seed the custom color input
-    this._picker._colorInput.value = type === 'foreColor' ? '#000000' : '#ffff00';
+    /** @type {any} */ (this._picker)._colorInput.value = type === 'foreColor' ? '#000000' : '#ffff00';
 
     // Position the picker above the bubble toolbar (not blocking the content below it).
     // Fall back to below the toolbar if there's not enough room above.
@@ -288,7 +292,7 @@ export class BubbleToolbar {
     // Align horizontally with the clicked button, clamped to viewport
     const btnRect = anchorBtn.getBoundingClientRect();
     let left = btnRect.left;
-    left = Math.max(8, Math.min(left, window.innerWidth - pw - 8));
+    left = Math.max(8, Math.min(left, globalThis.innerWidth - pw - 8));
 
     this._picker.style.left = `${left}px`;
     this._picker.style.top = `${top}px`;
@@ -301,11 +305,11 @@ export class BubbleToolbar {
 
   /** Restore the saved selection, apply execCommand, update the color strip, then close the picker. */
   _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();
     try { sel.addRange(this._savedRange.cloneRange()); } catch (_) { return; }
 
@@ -318,9 +322,9 @@ export class BubbleToolbar {
 
     // Update the color strip on the corresponding button
     const name = type === 'hiliteColor' ? 'hiliteColor' : 'foreColor';
-    const btn = this._el && this._el.querySelector(`[data-name="${name}"]`);
-    const strip = btn && btn.querySelector('.an-bubble-color-strip');
-    if (strip) strip.style.background = color === 'transparent' ? 'transparent' : color;
+    const btn = this._el?.querySelector(`[data-name="${name}"]`);
+    const strip = btn?.querySelector('.an-bubble-color-strip');
+    if (strip) /** @type {HTMLElement} */ (strip).style.background = color === 'transparent' ? 'transparent' : color;
 
     this._closeColorPicker();
     this._syncActive();
@@ -346,12 +350,25 @@ export class BubbleToolbar {
     let left = rect.left + rect.width / 2 - bw / 2;
     let top = rect.top - bh - gap;
 
-    left = Math.max(8, Math.min(left, window.innerWidth - bw - 8));
+    left = Math.max(8, Math.min(left, globalThis.innerWidth - bw - 8));
 
     if (top < 8) {
       top = rect.bottom + gap;
     }
 
+    // If the Table Tooltip is visible, avoid overlapping it by flipping below the selection.
+    // The Table Tooltip sits above the table, which is the same vertical zone the bubble
+    // toolbar would normally occupy when text is selected inside a table cell.
+    const tableTooltipEl = document.querySelector('.an-table-tooltip');
+    if (tableTooltipEl && /** @type {HTMLElement} */ (tableTooltipEl).style.display !== 'none') {
+      const ttRect = tableTooltipEl.getBoundingClientRect();
+      const overlapsVertically = top < ttRect.bottom + gap && top + bh > ttRect.top - gap;
+      if (overlapsVertically) {
+        top = rect.bottom + gap;
+        if (top + bh > globalThis.innerHeight - 8) top = ttRect.bottom + gap;
+      }
+    }
+
     el.style.top = `${top}px`;
     el.style.left = `${left}px`;
     el.style.visibility = '';
@@ -371,7 +388,7 @@ export class BubbleToolbar {
   _syncActive() {
     if (!this._btnCache) return;
     this._btnCache.forEach((btn) => {
-      const activeFn = _ACTIVE[btn.dataset.name];
+      const activeFn = _ACTIVE[/** @type {HTMLElement} */ (btn).dataset.name];
       btn.classList.toggle('an-active', !!(activeFn && activeFn()));
     });
   }
@@ -379,22 +396,22 @@ export class BubbleToolbar {
   /** Read the current selection's color and update the color-strip indicators. */
   _syncColorStrips() {
     if (!this._el) 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;
     if (!node) return;
-    const cs = window.getComputedStyle(node);
+    const cs = globalThis.getComputedStyle(/** @type {Element} */ (node));
 
     const foreBtn = this._el.querySelector('[data-name="foreColor"]');
-    const foreStrip = foreBtn && foreBtn.querySelector('.an-bubble-color-strip');
-    if (foreStrip) foreStrip.style.background = cs.color || '#000000';
+    const foreStrip = foreBtn?.querySelector('.an-bubble-color-strip');
+    if (foreStrip) /** @type {HTMLElement} */ (foreStrip).style.background = cs.color || '#000000';
 
     const hiliteBtn = this._el.querySelector('[data-name="hiliteColor"]');
-    const hiliteStrip = hiliteBtn && hiliteBtn.querySelector('.an-bubble-color-strip');
+    const hiliteStrip = hiliteBtn?.querySelector('.an-bubble-color-strip');
     if (hiliteStrip) {
       const bg = cs.backgroundColor;
-      hiliteStrip.style.background = (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') ? 'transparent' : bg;
+      /** @type {HTMLElement} */ (hiliteStrip).style.background = (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') ? 'transparent' : bg;
     }
   }
 
@@ -409,7 +426,7 @@ export class BubbleToolbar {
       // Keep toolbar visible while color picker is open
       if (this._picker && this._picker.style.display !== 'none') return;
 
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || sel.isCollapsed || !sel.rangeCount) {
         this._hide();
         return;
@@ -441,8 +458,8 @@ export class BubbleToolbar {
   _onMousedown(e) {
     // Hide when clicking outside both the editable, the bubble toolbar, and the color picker
     if (!this._visible) return;
-    if (this._el && this._el.contains(e.target)) return;
-    if (this._picker && this._picker.contains(e.target)) return;
+    if (this._el?.contains(e.target)) return;
+    if (this._picker?.contains(e.target)) return;
     const editable = this.context.layoutInfo.editable;
     if (editable.contains(e.target)) return;
     this._hide();

package/src/js/module/Buttons.js

@@ -12,12 +12,14 @@ import * as Style from '../editing/Style.js';
 
 /**
  * @typedef {object} DropdownDef
- * @property {string}   name       - unique identifier
- * @property {'select'} type       - discriminator for Toolbar renderer
+ * @property {string}   name          - unique identifier
+ * @property {'select'} type          - discriminator for Toolbar renderer
  * @property {string}   tooltip
- * @property {string[]} [items]    - overridden at render time from options
- * @property {Function} action     - called with (context, value)
- * @property {Function} [getValue] - called with (context) to get current value
+ * @property {Array<string|{value:string,label:string,disabled?:boolean}>} [items] - overridden at render time from options
+ * @property {Function} action        - called with (context, value)
+ * @property {Function} [getValue]    - called with (context) to get current value
+ * @property {string}   [selectClass] - extra CSS class(es) for the <select>
+ * @property {string}   [placeholder] - placeholder text for the empty option
  */
 
 // ---------------------------------------------------------------------------
@@ -99,11 +101,11 @@ export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)',
   // also check for a <u> ancestor in the DOM using startContainer for
   // consistent behaviour across both collapsed and range selections.
   if (document.queryCommandState('underline')) return true;
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || !sel.rangeCount) return false;
   let sc = sel.getRangeAt(0).startContainer;
   if (sc.nodeType === 3) sc = sc.parentElement;
-  return !!(sc && sc.closest && sc.closest('u'));
+  return !!(sc && /** @type {Element} */ (sc).closest('u'));
 });
 export const strikeBtn = btn('strikethrough', 'strikethrough', 'Strikethrough', () => Style.strikethrough(), () => document.queryCommandState('strikeThrough'));
 export const superscriptBtn = btn('superscript', 'superscript', 'Superscript', () => Style.superscript(), () => document.queryCommandState('superscript'));
@@ -177,16 +179,16 @@ export const fontSizeBtn = {
   action: (ctx, value) => Style.fontSize(value, ctx.layoutInfo.editable),
   getValue: (ctx) => {
     try {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (sel && sel.rangeCount) {
-        let el = sel.getRangeAt(0).startContainer;
-        if (el.nodeType === 3) el = el.parentElement;
-        while (el && el.nodeType === 1 && !el.style.fontSize) el = el.parentElement;
-        const size = (el && el.style && el.style.fontSize) ? el.style.fontSize : '';
+        let el = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
+        if (el && el.nodeType === 3) el = el.parentElement;
+        while (el && el.nodeType === 1 && !/** @type {HTMLElement} */ (el).style.fontSize) el = el.parentElement;
+        const size = (el && /** @type {HTMLElement} */ (el).style.fontSize) ? /** @type {HTMLElement} */ (el).style.fontSize : '';
         if (size) return size;
       }
       // Fallback: read the base font size from the editable element itself
-      const editable = ctx && ctx.layoutInfo && ctx.layoutInfo.editable;
+      const editable = ctx?.layoutInfo?.editable;
       if (editable) return editable.style.fontSize || '';
       return '';
     } catch { return ''; }
@@ -278,14 +280,14 @@ export const lineHeightBtn = {
   action: (_ctx, value) => Style.lineHeight(value),
   getValue: () => {
     try {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) return '';
       const BLOCKS = new Set(['P','DIV','H1','H2','H3','H4','H5','H6','LI','BLOCKQUOTE','PRE','TD','TH']);
-      let el = sel.getRangeAt(0).startContainer;
-      if (el.nodeType === 3) el = el.parentElement;
-      while (el && !BLOCKS.has(el.tagName)) el = el.parentElement;
+      let el = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
+      if (el && el.nodeType === 3) el = el.parentElement;
+      while (el && !BLOCKS.has(/** @type {Element} */ (el).tagName)) el = el.parentElement;
       if (!el) return '';
-      return el.style.lineHeight || getComputedStyle(el).lineHeight || '';
+      return /** @type {HTMLElement} */ (el).style.lineHeight || getComputedStyle(/** @type {Element} */ (el)).lineHeight || '';
     } catch { return ''; }
   },
 };

package/src/js/module/Clipboard.js

@@ -65,11 +65,11 @@ export class Clipboard {
    */
   _revokeRemovedBlobs(node) {
     if (!this._blobRegistry || !this._blobRegistry.size) return;
-    const imgs = [];
+    const imgs = /** @type {Element[]} */ ([]);
     if (node.nodeName === 'IMG') {
-      imgs.push(node);
-    } else if (node.querySelectorAll) {
-      imgs.push(...node.querySelectorAll('img'));
+      imgs.push(/** @type {Element} */ (node));
+    } else if (/** @type {Element} */ (node).querySelectorAll) {
+      imgs.push(.../** @type {Element} */ (node).querySelectorAll('img'));
     }
     imgs.forEach((img) => {
       const src = img.getAttribute('src') || '';
@@ -139,7 +139,7 @@ export class Clipboard {
       // Unwrap — replace el with its children
       const parent = el.parentNode;
       while (el.firstChild) parent.insertBefore(el.firstChild, el);
-      parent.removeChild(el);
+      el.remove();
     }
     // Strip class and all data-* attributes from every remaining element
     doc.querySelectorAll('*').forEach((el) => {
@@ -180,7 +180,7 @@ export class Clipboard {
   }
 
   _onPaste(event) {
-    const clipboardData = event.clipboardData || window.clipboardData;
+    const clipboardData = event.clipboardData || /** @type {any} */ (globalThis).clipboardData;
     if (!clipboardData) return;
 
     // Consume and reset the one-shot plain-paste flag
@@ -247,7 +247,6 @@ export class Clipboard {
       if (this.options.pasteStripAttributes) html = this._stripAttributes(html);
       execCommand('insertHTML', html);
       this.context.invoke('editor.afterCommand');
-      return;
     }
 
     // Otherwise let the browser handle paste natively
@@ -300,11 +299,11 @@ export class Clipboard {
     }
 
     // C2: Reject image formats that browsers cannot decode/display.
-    const UNSUPPORTED = ['image/tiff', 'image/x-tiff', 'image/bmp', 'image/x-bmp', 'image/x-ms-bmp'];
+    const UNSUPPORTED = new Set(['image/tiff', 'image/x-tiff', 'image/bmp', 'image/x-bmp', 'image/x-ms-bmp']);
     const maxBytes = (this.options.maxImageSize || 5) * 1024 * 1024;
     files.forEach((file) => {
       if (!file || !file.type.startsWith('image/')) return;
-      if (UNSUPPORTED.includes(file.type)) {
+      if (UNSUPPORTED.has(file.type)) {
         const message = `Image format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
         this.context.triggerEvent('imageError', { file, message });
         console.warn('[AutumnNote]', message);
@@ -351,10 +350,10 @@ export class Clipboard {
    */
   _dataUrlToBlob(dataUrl) {
     const [header, b64] = dataUrl.split(',');
-    const mime = header.match(/:(.*?);/)?.[1] ?? 'image/png';
+    const mime = /:(.*?);/.exec(header)?.[1] ?? 'image/png';
     const binary = atob(b64);
     const arr = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) arr[i] = binary.charCodeAt(i);
+    for (let i = 0; i < binary.length; i++) arr[i] = binary.codePointAt(i);
     return new Blob([arr], { type: mime });
   }
 
@@ -438,7 +437,7 @@ export class Clipboard {
       }
     }
     if (!range) return;
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (sel) {
       sel.removeAllRanges();
       sel.addRange(range);
@@ -456,10 +455,10 @@ export class Clipboard {
    */
   _escapeHTML(str) {
     return str
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#039;');
   }
 }

package/src/js/module/CodeTooltip.js

@@ -40,21 +40,22 @@ export class CodeTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const pre = e.target.closest('pre');
+        const pre = /** @type {Element} */ (e.target)?.closest('pre');
         if (pre && editable.contains(pre)) {
           this._scheduleShow(pre);
         }
       }),
       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();
         }
       }),
       on(document, 'click', (e) => {
+        const et = /** @type {Node} */ (e.target);
         if (this._activePre &&
-          !this._activePre.contains(e.target) &&
-          !this._el.contains(e.target)) {
+          !this._activePre.contains(et) &&
+          !this._el.contains(et)) {
           this._hide();
         }
       }),
@@ -67,7 +68,7 @@ export class CodeTooltip {
     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;
   }
 
@@ -92,15 +93,15 @@ export class CodeTooltip {
     el.appendChild(this._sep());
 
     // Language selector
-    this._langSelect = createElement('select', {
+    this._langSelect = /** @type {HTMLSelectElement} */ (createElement('select', {
       class: 'an-code-lang-select',
       title: L.syntaxLanguage,
       'aria-label': L.syntaxAriaLabel,
-    });
+    }));
     const LANGUAGES = [
       ['', 'Plain text'], ['javascript', 'JavaScript'], ['typescript', 'TypeScript'],
-      ['python', 'Python'], ['html', 'HTML'], ['css', 'CSS'], ['json', 'JSON'],
-      ['xml', 'XML'], ['bash', 'Bash / Shell'], ['sql', 'SQL'],
+      ['python', 'Python'], ['html', 'HTML'], ['css', 'CSS'], ['scss', 'SCSS'],
+      ['json', 'JSON'], ['xml', 'XML'], ['bash', 'Bash / Shell'], ['sql', 'SQL'],
       ['java', 'Java'], ['csharp', 'C#'], ['php', 'PHP'], ['ruby', 'Ruby'],
       ['go', 'Go'], ['rust', 'Rust'], ['cpp', 'C++'], ['c', 'C'],
       ['kotlin', 'Kotlin'], ['swift', 'Swift'],
@@ -225,7 +226,7 @@ export class CodeTooltip {
     let left = rect.left + (rect.width - tipW) / 2;
 
     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;
 
     // Tooltip uses position:fixed, so viewport coordinates are used directly.
@@ -240,7 +241,7 @@ export class CodeTooltip {
   _syncWrapBtn() {
     if (!this._activePre || !this._wrapBtn) return;
     const wrapped = (this._activePre.style.whiteSpace || '').includes('pre-wrap')
-      || window.getComputedStyle(this._activePre).whiteSpace === 'pre-wrap';
+      || globalThis.getComputedStyle(this._activePre).whiteSpace === 'pre-wrap';
     this._wrapBtn.classList.toggle('active', wrapped);
     this._wrapBtn.title = wrapped
       ? this.context.locale.tooltips.code.disableWordWrap
@@ -250,7 +251,7 @@ export class CodeTooltip {
   _syncLangSelect() {
     if (!this._activePre || !this._langSelect) return;
     const codeEl = this._activePre.querySelector('code');
-    const fromAttr = this._activePre.getAttribute('data-language') || '';
+    const fromAttr = this._activePre.dataset.language || '';
     const fromClass = codeEl ? (_LANG_CLASS_RE.exec(codeEl.className) || [])[1] || '' : '';
     this._langSelect.value = fromAttr || fromClass || '';
   }
@@ -273,7 +274,7 @@ export class CodeTooltip {
       document.body.appendChild(ta);
       ta.select();
       try { document.execCommand('copy'); this._flashCopied(); } catch (_) {}
-      document.body.removeChild(ta);
+      ta.remove();
     }
   }
 
@@ -300,10 +301,31 @@ export class CodeTooltip {
     this._positionNear(pre);
   }
 
+  /**
+   * Applies a language to a given <pre> element: sets classes, data-language,
+   * and triggers Prism highlighting. Called by the auto-detect flow.
+   * @param {HTMLElement} pre
+   * @param {string} lang - Prism language identifier, e.g. 'javascript'
+   */
+  applyLanguage(pre, lang) {
+    if (!pre || !lang) return;
+    // Temporarily set activePre so _onLangChange can target it
+    const savedPre = this._activePre;
+    this._activePre = pre;
+    if (this._langSelect) this._langSelect.value = lang;
+    this._onLangChange();
+    // Update the select to reflect the detected language when tooltip is shown
+    if (this._langSelect) this._langSelect.value = lang;
+    this._activePre = savedPre || pre;
+    // Don't restore savedPre if it was null — keep `pre` as activePre so that
+    // the tooltip select is correct the first time the user hovers over it.
+  }
+
   _onLangChange() {
     const pre = this._activePre;
     if (!pre) return;
     const lang = this._langSelect.value;
+    const _w = /** @type {any} */ (globalThis);
 
     // Ensure a <code> child exists (Prism targets <pre><code class="language-xxx">)
     let codeEl = pre.querySelector('code');
@@ -318,9 +340,9 @@ export class CodeTooltip {
     // Mirror language class on <pre> so Prism CSS theme targets it (pre[class*='language-'])
     pre.className = lang ? `language-${lang}` : '';
     if (lang) {
-      pre.setAttribute('data-language', lang);
+      pre.dataset.language = lang;
     } else {
-      pre.removeAttribute('data-language');
+      delete pre.dataset.language;
     }
 
     // Trigger Prism if available.
@@ -328,14 +350,14 @@ export class CodeTooltip {
     // which drops <br> entirely, collapsing all lines into one. Convert first.
     const applyPrism = () => {
       codeEl.querySelectorAll('br').forEach((br) => br.replaceWith('\n'));
-      window.Prism.highlightElement(codeEl);
+      _w.Prism.highlightElement(codeEl);
       this.context.invoke('editor.afterCommand');
     };
 
     if (lang) {
-      if (typeof window.Prism !== 'undefined') {
+      if (_w.Prism !== undefined) {
         // Grammar already loaded — highlight immediately
-        if (window.Prism.languages[lang]) {
+        if (_w.Prism.languages[lang]) {
           applyPrism();
           return;
         }
@@ -345,7 +367,7 @@ export class CodeTooltip {
       } else if (this._prismScript) {
         // Prism core is still loading — highlight once it arrives, then load grammar if needed
         this._prismScript.addEventListener('load', () => {
-          if (window.Prism.languages[lang]) {
+          if (_w.Prism.languages[lang]) {
             applyPrism();
           } else {
             this._loadPrismComponent(lang, applyPrism);
@@ -363,7 +385,8 @@ export class CodeTooltip {
    * Called once at initialize time. Fire-and-forget; errors are silent.
    */
   _ensurePrism() {
-    if (!this.context.options.codeHighlight || window.Prism) return;
+    const _w = /** @type {any} */ (globalThis);
+    if (!this.context.options.codeHighlight || _w.Prism) return;
     const cdn = this.context.options.codeHighlightCDN;
     const themeHref = `${cdn}/themes/prism-tomorrow.min.css`;
     const scriptSrc = `${cdn}/prism.min.js`;
@@ -377,7 +400,7 @@ export class CodeTooltip {
 
     const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
     if (existingScript) {
-      this._prismScript = window.Prism ? null : existingScript;
+      this._prismScript = _w.Prism ? null : existingScript;
       return;
     }
 
@@ -397,13 +420,14 @@ export class CodeTooltip {
    * @param {Function} cb  – called once the grammar is ready
    */
   _loadPrismComponent(lang, cb) {
+    const _w = /** @type {any} */ (globalThis);
     const cdn = this.context.options.codeHighlightCDN;
     const src = `${cdn}/components/prism-${lang}.min.js`;
     // Avoid loading the same component twice
     if (document.querySelector(`script[src="${src}"]`)) {
       // Already in DOM — might still be loading; poll briefly then call cb
       const poll = setInterval(() => {
-        if (window.Prism && window.Prism.languages[lang]) {
+        if (_w.Prism?.languages[lang]) {
           clearInterval(poll);
           cb();
         }
@@ -413,7 +437,7 @@ export class CodeTooltip {
     }
     const s = document.createElement('script');
     s.src = src;
-    s.addEventListener('load', cb, { once: true });
+    s.addEventListener('load', /** @type {EventListener} */ (cb), { once: true });
     document.head.appendChild(s);
   }
 
@@ -440,7 +464,7 @@ export class CodeTooltip {
     const pre = this._activePre;
     if (!pre) return;
     this._hide();
-    if (pre.parentNode) pre.parentNode.removeChild(pre);
+    pre.remove();
     this.context.invoke('editor.afterCommand');
   }
 }

package/src/js/module/Codeview.js

@@ -26,9 +26,7 @@ export class Codeview {
   destroy() {
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._textarea && this._textarea.parentNode) {
-      this._textarea.parentNode.removeChild(this._textarea);
-    }
+    this._textarea?.remove();
     this._textarea = null;
   }
 
@@ -53,13 +51,13 @@ export class Codeview {
     const { editable } = this.context.layoutInfo;
     const html = editable.innerHTML;
 
-    this._textarea = createElement('textarea', {
+    this._textarea = /** @type {HTMLTextAreaElement} */ (createElement('textarea', {
       class: 'an-codeview',
       spellcheck: 'false',
       autocomplete: 'off',
       autocorrect: 'off',
       autocapitalize: 'off',
-    });
+    }));
     this._textarea.value = this._prettyPrint(html);
 
     editable.style.display = 'none';
@@ -74,7 +72,7 @@ export class Codeview {
     const { editable } = this.context.layoutInfo;
     // Sanitise the HTML typed in the textarea before applying (allow iframes for video embeds)
     editable.innerHTML = sanitiseHTML(this._textarea.value, { allowIframes: true });
-    this._textarea.parentNode.removeChild(this._textarea);
+    this._textarea.remove();
     this._textarea = null;
     editable.style.display = '';
     this._active = false;
@@ -108,7 +106,7 @@ export class Codeview {
       .map((line) => {
         const stripped = line.trim();
         if (!stripped) return '';
-        if (/^<\//.test(stripped)) indent = Math.max(0, indent - 1);
+        if (stripped.startsWith('</')) indent = Math.max(0, indent - 1);
         const out = '  '.repeat(indent) + stripped;
         if (
           /^<[^/!][^>]*[^/]>/.test(stripped) &&