autumnnote 1.6.0 → 1.6.1

package/src/js/editing/Typing.js

@@ -14,8 +14,8 @@ import { currentRange } from '../core/range.js';
 // at ~120+ events/sec during normal typing.
 // ---------------------------------------------------------------------------
 const _FA_PATTERN = /\bfa-/;
-const isFAIcon = (n) => !!(n && n.nodeName === 'I' && _FA_PATTERN.test(n.className || ''));
-const isZwsAnchor = (n) => !!(n && n.nodeType === Node.TEXT_NODE && (n.textContent === '\u200B' || n.textContent === ''));
+const isFAIcon = (n) => !!(n?.nodeName === 'I' && _FA_PATTERN.test(n.className || ''));
+const isZwsAnchor = (n) => !!(n?.nodeType === Node.TEXT_NODE && (n.textContent === '\u200B' || n.textContent === ''));
 
 /**
  * Handles special keydown behaviour inside the editor.
@@ -26,7 +26,7 @@ const isZwsAnchor = (n) => !!(n && n.nodeType === Node.TEXT_NODE && (n.textConte
  */
 export function handleKeydown(event, editable, options = {}) {
   const moveCaret = (setFn) => {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel) return false;
     const nr = document.createRange();
     setFn(nr);
@@ -40,8 +40,8 @@ export function handleKeydown(event, editable, options = {}) {
   // Backspace key — one-press deletion of a preceding FA icon (<i> element)
   // -------------------------------------------------------------------------
   if (isKey(event, key.BACKSPACE)) {
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0) {
+    const sel = globalThis.getSelection();
+    if (sel?.rangeCount > 0) {
       const r = sel.getRangeAt(0);
       if (r.collapsed && r.startContainer.nodeType === Node.TEXT_NODE) {
         const textNode = /** @type {ChildNode} */ (r.startContainer);
@@ -89,7 +89,7 @@ export function handleKeydown(event, editable, options = {}) {
   // ArrowLeft / ArrowRight — one-press navigation across FA icon nodes
   // -------------------------------------------------------------------------
   if (isKey(event, key.LEFT) || isKey(event, key.RIGHT)) {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || sel.rangeCount === 0) return false;
 
     const r = sel.getRangeAt(0);
@@ -207,7 +207,7 @@ export function handleKeydown(event, editable, options = {}) {
     }
 
     // In a pre/code block, insert spaces using configured tabSize
-    if (para && para.nodeName.toUpperCase() === 'PRE') {
+    if (para?.nodeName.toUpperCase() === 'PRE') {
       if (event.shiftKey) return false;
       event.preventDefault();
       execCommand('insertText', ' '.repeat(options.tabSize || 4));
@@ -248,18 +248,18 @@ export function handleKeydown(event, editable, options = {}) {
     // and leave an orphan <i> in the new paragraph — visually an "auto-created
     // icon". Push the cursor to just after the <i> first, then fall through so
     // the browser fires its default Enter at a safe text boundary.
-    if (el && el.nodeName === 'I' && /\bfa-/.test(el.className || '')) {
+    if (el?.nodeName === 'I' && /\bfa-/.test(el.className || '')) {
       const nr = document.createRange();
       nr.setStartAfter(el);
       nr.collapse(true);
-      const selI = window.getSelection();
+      const selI = globalThis.getSelection();
       if (selI) { selI.removeAllRanges(); selI.addRange(nr); }
       return false; // cursor is now outside <i> — let browser default handle Enter
     }
 
     // Video wrapper — Enter should create a new paragraph after the wrapper,
     // not split the wrapper's container and produce an empty video clone.
-    const videoWrapper = el && el.closest('.an-video-wrapper');
+    const videoWrapper = el?.closest('.an-video-wrapper');
     if (videoWrapper) {
       event.preventDefault();
       const p = document.createElement('p');
@@ -268,18 +268,18 @@ export function handleKeydown(event, editable, options = {}) {
       const nr = document.createRange();
       nr.setStart(p, 0);
       nr.collapse(true);
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       sel.removeAllRanges();
       sel.addRange(nr);
       return true;
     }
 
     // Checklist — Enter creates new item; empty item exits the list
-    const checkLi = el && el.closest('.an-checklist li');
+    const checkLi = el?.closest('.an-checklist li');
     if (checkLi) {
       event.preventDefault();
       const ul = checkLi.closest('.an-checklist');
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       let nativeRange = sel.getRangeAt(0);
 
       // Helper: get trimmed text content of a li, excluding the checkbox INPUT.
@@ -358,14 +358,14 @@ export function handleKeydown(event, editable, options = {}) {
     const para = closestPara(range.sc, editable);
 
     // Enter in a pre/code block: insert a literal newline instead of a new block
-    if (para && para.nodeName.toUpperCase() === 'PRE') {
+    if (para?.nodeName.toUpperCase() === 'PRE') {
       event.preventDefault();
       execCommand('insertText', '\n');
       return true;
     }
 
     // Pressing Enter at the end of a blockquote should exit it
-    if (para && para.nodeName.toUpperCase() === 'BLOCKQUOTE') {
+    if (para?.nodeName.toUpperCase() === 'BLOCKQUOTE') {
       const native = range.toNativeRange();
       native.setEnd(para, para.childNodes.length);
       if (native.toString() === '' && range.isCollapsed()) {

package/src/js/module/AutoSaveRestore.js

@@ -4,7 +4,7 @@
  *
  * Activated when both `autoSave` and `autoSaveRestore` options are true.
  * On initialize it checks localStorage for a draft that is within the
- * `autoSaveRestoreTimeout` day window.  If one is found a dismissible banner
+ * `autoSaveRestoreTimeout` day globalThis.  If one is found a dismissible banner
  * is prepended to the editor container.
  */
 
@@ -118,9 +118,7 @@ export class AutoSaveRestore {
   }
 
   _removeBanner() {
-    if (this._banner && this._banner.parentNode) {
-      this._banner.parentNode.removeChild(this._banner);
-    }
+    this._banner?.remove();
     this._banner = null;
   }
 }

package/src/js/module/BubbleToolbar.js

@@ -44,13 +44,13 @@ 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 = /** @type {Element|null} */ (ancestor.nodeType === 1 ? ancestor : ancestor.parentElement);
@@ -115,16 +115,16 @@ export class BubbleToolbar {
     const d6 = this.context.on('contextMenu:hide', () => {
       this._contextMenuOpen = false;
     });
-    const d7 = on(window, 'scroll', () => this._hide(), { passive: true });
-    const d8 = on(window, 'resize', () => this._hide(), { passive: true });
+    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 = [];
@@ -259,8 +259,8 @@ export class BubbleToolbar {
 
   _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();
     }
 
@@ -272,8 +272,8 @@ export class BubbleToolbar {
     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
@@ -292,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`;
@@ -305,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; }
 
@@ -322,8 +322,8 @@ 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');
+    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();
@@ -350,7 +350,7 @@ 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;
@@ -365,7 +365,7 @@ export class BubbleToolbar {
       const overlapsVertically = top < ttRect.bottom + gap && top + bh > ttRect.top - gap;
       if (overlapsVertically) {
         top = rect.bottom + gap;
-        if (top + bh > window.innerHeight - 8) top = ttRect.bottom + gap;
+        if (top + bh > globalThis.innerHeight - 8) top = ttRect.bottom + gap;
       }
     }
 
@@ -396,19 +396,19 @@ 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(/** @type {Element} */ (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');
+    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;
       /** @type {HTMLElement} */ (hiliteStrip).style.background = (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') ? 'transparent' : bg;
@@ -426,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;
@@ -458,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

@@ -101,7 +101,7 @@ 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;
@@ -179,7 +179,7 @@ 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 = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
         if (el && el.nodeType === 3) el = el.parentElement;
@@ -188,7 +188,7 @@ export const fontSizeBtn = {
         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 ''; }
@@ -280,7 +280,7 @@ 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 = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);

package/src/js/module/Clipboard.js

@@ -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 || /** @type {any} */ (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

@@ -68,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;
   }
 
@@ -226,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.
@@ -241,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
@@ -251,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 || '';
   }
@@ -274,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();
     }
   }
 
@@ -310,8 +310,7 @@ export class CodeTooltip {
   applyLanguage(pre, lang) {
     if (!pre || !lang) return;
     // Temporarily set activePre so _onLangChange can target it
-    const savedPre    = this._activePre;
-    const savedSelect = this._langSelect ? this._langSelect.value : '';
+    const savedPre = this._activePre;
     this._activePre = pre;
     if (this._langSelect) this._langSelect.value = lang;
     this._onLangChange();
@@ -320,14 +319,13 @@ export class CodeTooltip {
     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.
-    void savedSelect;
   }
 
   _onLangChange() {
     const pre = this._activePre;
     if (!pre) return;
     const lang = this._langSelect.value;
-    const _w = /** @type {any} */ (window);
+    const _w = /** @type {any} */ (globalThis);
 
     // Ensure a <code> child exists (Prism targets <pre><code class="language-xxx">)
     let codeEl = pre.querySelector('code');
@@ -342,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.
@@ -357,7 +355,7 @@ export class CodeTooltip {
     };
 
     if (lang) {
-      if (typeof _w.Prism !== 'undefined') {
+      if (_w.Prism !== undefined) {
         // Grammar already loaded — highlight immediately
         if (_w.Prism.languages[lang]) {
           applyPrism();
@@ -387,7 +385,7 @@ export class CodeTooltip {
    * Called once at initialize time. Fire-and-forget; errors are silent.
    */
   _ensurePrism() {
-    const _w = /** @type {any} */ (window);
+    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`;
@@ -422,14 +420,14 @@ export class CodeTooltip {
    * @param {Function} cb  – called once the grammar is ready
    */
   _loadPrismComponent(lang, cb) {
-    const _w = /** @type {any} */ (window);
+    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 (_w.Prism && _w.Prism.languages[lang]) {
+        if (_w.Prism?.languages[lang]) {
           clearInterval(poll);
           cb();
         }
@@ -466,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;
   }
 
@@ -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) &&