autumnnote 1.5.0 → 1.6.1

package/src/js/editing/History.js

@@ -11,7 +11,7 @@ export class History {
   constructor(editable, limit = 100) {
     this.editable = editable;
     this._limit = limit;
-    /** @type {Array<{html: string, range: {sc: string, so: number, ec: string, eo: number}|null}>} */
+    /** @type {Array<{html: string, images?: Record<string,string>, sel: {start: number, end: number}|null}>} */
     this.stack = [];
     this.stackOffset = -1;
     this._savePoint();
@@ -31,7 +31,7 @@ export class History {
    * @returns {{ start: number, end: number }|null}
    */
   _serializeSelection() {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || sel.rangeCount === 0) return null;
     const range = sel.getRangeAt(0);
     if (!this.editable.contains(range.startContainer)) return null;
@@ -54,7 +54,7 @@ export class History {
     let cur;
     while ((cur = walker.nextNode())) {
       if (cur === node) return count + offset;
-      count += cur.length;
+      count += /** @type {Text} */ (cur).length;
     }
     return 0;
   }
@@ -71,7 +71,7 @@ export class History {
     const walker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
     let cur;
     while ((cur = walker.nextNode())) {
-      const len = cur.length;
+      const len = /** @type {Text} */ (cur).length;
       if (!startNode && count + len >= saved.start) {
         startNode = cur;
         startOff = saved.start - count;
@@ -88,7 +88,7 @@ export class History {
       const lastWalker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
       let lastNode = null;
       while ((lastNode = lastWalker.nextNode())) { startNode = lastNode; }
-      startOff = startNode ? startNode.length : 0;
+      startOff = startNode ? /** @type {Text} */ (startNode).length : 0;
       endNode = startNode;
       endOff = startOff;
     }
@@ -97,7 +97,7 @@ export class History {
       const range = document.createRange();
       range.setStart(startNode, startOff);
       range.setEnd(endNode, endOff);
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       sel.removeAllRanges();
       sel.addRange(range);
     } catch (_) {
@@ -106,7 +106,7 @@ export class History {
         const fb = document.createRange();
         fb.setStart(this.editable, 0);
         fb.collapse(true);
-        const s = window.getSelection();
+        const s = globalThis.getSelection();
         if (s) { s.removeAllRanges(); s.addRange(fb); }
       } catch (_2) { /* fully give up */ }
     }
@@ -148,8 +148,8 @@ export class History {
    */
   _tokenizeImages(html) {
     // Fast-path: skip regex entirely when there are no data URIs (common case)
-    if (!html.includes('data:')) return { html, images: {} };
-    const images = {};
+    if (!html.includes('data:')) return { html, images: /** @type {Record<string,string>} */ ({}) };
+    const images = /** @type {Record<string,string>} */ ({});
     let index = 0;
     const tokenized = html.replace(/data:[^;]+;base64,[^"' >]*/g, (match) => {
       const token = `__asn_img_${index}__`;
@@ -181,7 +181,7 @@ export class History {
     const current = this._serialize();
     const { html: tokenized } = this._tokenizeImages(current);
     const prev = this.stack[this.stackOffset];
-    if (prev && prev.html === tokenized) return; // No change
+    if (prev?.html === tokenized) return; // No change
     this._savePoint();
   }
 

package/src/js/editing/Style.js

@@ -40,19 +40,19 @@ export const italic = () => execCommand('italic');
  * execCommand's state detection is unreliable.
  */
 export function underline() {
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || !sel.rangeCount) return;
   let container = sel.getRangeAt(0).commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
   // Check if we're inside a <u> (DOM truth), to guard against unreliable queryCommandState
-  const uEl = container && container.closest && container.closest('u');
+  const uEl = /** @type {Element|null} */ (container)?.closest('u');
   const nativeState = document.queryCommandState('underline');
   if (uEl && !nativeState) {
     // Browser doesn't recognise the underline state (e.g. inside <code>).
     // Manually unwrap the <u> element.
     const parent = uEl.parentNode;
     while (uEl.firstChild) parent.insertBefore(uEl.firstChild, uEl);
-    parent.removeChild(uEl);
+    uEl.remove();
     return;
   }
   execCommand('underline');
@@ -64,21 +64,21 @@ export function underline() {
  * execCommand's state detection is unreliable (mirrors underline() logic).
  */
 export function strikethrough() {
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || !sel.rangeCount) return;
   // Use startContainer for consistent detection across collapsed and range
   // selections — commonAncestorContainer can miss ancestor <s>/<strike> tags
   // when the selection spans across nested inline elements.
   let sc = sel.getRangeAt(0).startContainer;
   if (sc.nodeType === 3) sc = sc.parentElement;
-  const sEl = sc && sc.closest && (sc.closest('s') || sc.closest('strike'));
+  const sEl = /** @type {Element|null} */ (sc)?.closest('s') || /** @type {Element|null} */ (sc)?.closest('strike');
   const nativeState = document.queryCommandState('strikeThrough');
   if (sEl && !nativeState) {
     // Browser doesn’t recognise the strikethrough state (e.g. inside <code>
     // or deeply nested inline formats). Manually unwrap the <s>/<strike>.
     const parent = sEl.parentNode;
     while (sEl.firstChild) parent.insertBefore(sEl.firstChild, sEl);
-    parent.removeChild(sEl);
+    sEl.remove();
     return;
   }
   execCommand('strikeThrough');
@@ -116,10 +116,10 @@ export const fontName = (name) => execCommand('fontName', name);
  * Sets the font size (in pt or with unit) for the selection.
  * Uses a span-based approach to set px sizes precisely.
  * @param {string} size - e.g. '14px'
- * @param {HTMLElement} [editable] - scoping element to avoid touching nodes outside this editor
+ * @param {HTMLElement|Document} [editable] - scoping element to avoid touching nodes outside this editor
  */
 export function fontSize(size, editable = document) {
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
 
   // B-I-3/4: For a collapsed (caret) selection the browser's execCommand
@@ -158,7 +158,7 @@ export function fontSize(size, editable = document) {
     span.style.fontSize = size;
     el.parentNode.insertBefore(span, el);
     while (el.firstChild) span.appendChild(el.firstChild);
-    el.parentNode.removeChild(el);
+    el.remove();
     newSpans.push(span);
   });
 
@@ -167,7 +167,7 @@ export function fontSize(size, editable = document) {
   // value until the next selectionchange event).
   if (!wasCollapsed && sel && newSpans.length > 0) {
     const first = newSpans[0];
-    const last  = newSpans[newSpans.length - 1];
+    const last  = newSpans.at(-1);
     try {
       const nr = document.createRange();
       const startNode = first.firstChild || first;
@@ -222,13 +222,13 @@ export const indent = () => execCommand('indent');
  * (which would destroy the ul > li checklist structure).
  */
 export function outdent() {
-  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 checkLi = container && container.closest && container.closest('.an-checklist li');
+    const checkLi = /** @type {Element|null} */ (container)?.closest('.an-checklist li');
     if (checkLi) {
-      _checklistItemToP(checkLi);
+      _checklistItemToP(/** @type {HTMLElement} */ (checkLi));
       return;
     }
   }
@@ -257,11 +257,11 @@ function _checklistItemToP(checkLi) {
   // Build <p> preserving inline formatting (bold/italic/links) from the item's content
   const p = document.createElement('p');
   for (const child of checkLi.childNodes) {
-    if (child.nodeType === 1 && child.tagName === 'INPUT') continue;
+    if (child.nodeType === 1 && /** @type {Element} */ (child).tagName === 'INPUT') continue;
     p.appendChild(child.cloneNode(true));
   }
   // Strip ZWS anchors left over from checklist markup
-  p.innerHTML = p.innerHTML.replace(/\u200B/g, '');
+  p.innerHTML = p.innerHTML.replaceAll('\u200B', '');
   if (!p.hasChildNodes() || !p.textContent.trim()) {
     p.innerHTML = '';
     p.appendChild(document.createTextNode('\u00a0'));
@@ -279,8 +279,8 @@ function _checklistItemToP(checkLi) {
   checkUl.parentNode.insertBefore(p, checkUl.nextSibling);
 
   // Remove current li from checkUl; delete checkUl if now empty
-  checkUl.removeChild(checkLi);
-  if (checkUl.children.length === 0) checkUl.parentNode.removeChild(checkUl);
+  checkLi.remove();
+  if (checkUl.children.length === 0) checkUl.remove();
 
   // Place caret at start of the new <p>
   try {
@@ -288,7 +288,7 @@ function _checklistItemToP(checkLi) {
     const firstChild = p.firstChild;
     nr.setStart(firstChild && firstChild.nodeType === 3 ? firstChild : p, 0);
     nr.collapse(true);
-    const s = window.getSelection();
+    const s = globalThis.getSelection();
     if (s) { s.removeAllRanges(); s.addRange(nr); }
   } catch {}
 }
@@ -316,7 +316,7 @@ export const insertOrderedList = () => execCommand('insertOrderedList');
  * @param {string} value - Line-height value to apply; typically a unitless multiplier (for example, "1.5").
  */
 export function lineHeight(value) {
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || sel.rangeCount === 0) return;
 
   const range = sel.getRangeAt(0);
@@ -373,10 +373,10 @@ export function currentStyle(editable) {
     ? range.sc
     : range.commonAncestor();
 
-  const el = isElement(container) ? container : container.parentElement;
+  const el = /** @type {Element|null} */ (isElement(container) ? container : container.parentElement);
   if (!el) return {};
 
-  const computed = window.getComputedStyle(el);
+  const computed = globalThis.getComputedStyle(el);
 
   return {
     bold: document.queryCommandState('bold'),
@@ -402,15 +402,15 @@ export function currentStyle(editable) {
 /**
  * Wraps the selection in an inline <code> element, or unwraps it if the
  * cursor is already inside a <code> that is not inside a <pre>.
- * @param {HTMLElement} [editable]
+ * @param {HTMLElement} [_editable]
  */
-export function toggleInlineCode(editable) {
-  const sel = window.getSelection();
+export function toggleInlineCode(_editable) {
+  const sel = globalThis.getSelection();
   if (!sel || !sel.rangeCount) return;
   const range = sel.getRangeAt(0);
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
-  const codeEl = container && container.closest ? container.closest('code') : null;
+  const codeEl = /** @type {Element|null} */ (container)?.closest('code');
   if (codeEl && !codeEl.closest('pre')) {
     // Unwrap — save range endpoints relative to surrounding text so we can
     // restore the selection after normalize() merges adjacent text nodes.
@@ -419,17 +419,17 @@ export function toggleInlineCode(editable) {
     const prevSibling = codeEl.previousSibling;
     const movedChildren = Array.from(codeEl.childNodes);
     while (codeEl.firstChild) parent.insertBefore(codeEl.firstChild, codeEl);
-    parent.removeChild(codeEl);
+    codeEl.remove();
     // Normalize only the immediate parent to merge adjacent text nodes without
     // invalidating distant selection anchors (full editable.normalize() can
     // cause selection offsets to shift, making subsequent format toggles miss).
-    if (parent && parent.normalize) parent.normalize();
+    parent?.normalize();
     // Restore selection to the text that was inside the unwrapped <code>.
     if (movedChildren.length > 0) {
       try {
         // After normalize, find the merged text node that contains the content.
         const firstMoved = movedChildren[0];
-        const lastMoved  = movedChildren[movedChildren.length - 1];
+        const lastMoved  = movedChildren.at(-1);
         const nr = document.createRange();
         // Use the (possibly merged) live node if still in the DOM.
         const anchorNode = (firstMoved.parentNode === parent) ? firstMoved : (prevSibling ? prevSibling.nextSibling : parent.firstChild);
@@ -476,11 +476,11 @@ export function toggleInlineCode(editable) {
  * @returns {boolean}
  */
 export function isInlineCode() {
-  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;
-  const code = sc && sc.closest ? sc.closest('code') : null;
+  const code = /** @type {Element|null} */ (sc)?.closest('code');
   return !!(code && !code.closest('pre'));
 }
 
@@ -503,34 +503,34 @@ export function isInlineCode() {
  * Empty or whitespace-only selections do not create a checklist.
  */
 export function toggleChecklist() {
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || !sel.rangeCount) return;
   const range = sel.getRangeAt(0);
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
 
-  const ul = container.closest && container.closest('.an-checklist');
+  const ul = /** @type {Element|null} */ (container)?.closest('.an-checklist');
   if (ul) {
     // If selection covers multiple <li>, convert them all
     const selectedLis = Array.from(ul.querySelectorAll('li')).filter((li) =>
       sel.containsNode(li, true),
     );
     if (selectedLis.length > 0) {
-      let firstP = null;
+      /** @type {HTMLElement|null} */ let firstP = null;
       selectedLis.forEach((li) => {
         const p = document.createElement('p');
         for (const child of li.childNodes) {
-          if (child.nodeType === 1 && child.tagName === 'INPUT') continue;
+          if (child.nodeType === 1 && /** @type {Element} */ (child).tagName === 'INPUT') continue;
           p.appendChild(child.cloneNode(true));
         }
-        p.innerHTML = p.innerHTML.replace(/\u200b/g, '');
+        p.innerHTML = p.innerHTML.replaceAll('\u200b', '');
         if (!p.hasChildNodes() || !p.textContent.trim()) {
           p.innerHTML = '';
           p.appendChild(document.createTextNode('\u00a0'));
         }
         ul.parentNode.insertBefore(p, ul);
         if (!firstP) firstP = p;
-        ul.removeChild(li);
+        li.remove();
       });
       if (ul.children.length === 0) ul.remove();
       // Move caret to first converted paragraph
@@ -551,9 +551,9 @@ export function toggleChecklist() {
     // Find the nearest block-level ancestor (p, div, li, h1-h6, blockquote, etc.)
     // and convert it into a single checklist item.
     const BLOCK_TAGS = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI']);
-    let block = container;
+    let block = /** @type {Element|null} */ (container);
     while (block && block.parentNode && !BLOCK_TAGS.has(block.tagName)) {
-      block = block.parentNode;
+      block = /** @type {Element|null} */ (block.parentNode);
     }
     // Fallback: if no block element found (e.g. cursor directly in editable root), use the
     // insertion approach with a zero-width-space item so the cursor ends up inside.
@@ -561,7 +561,7 @@ export function toggleChecklist() {
       ? Array.from(block.childNodes)
           .map((n) => n.textContent)
           .join('')
-          .replace(/\u00a0/g, ' ')
+          .replaceAll('\u00a0', ' ')
       : '';
 
     const ul = document.createElement('ul');
@@ -619,7 +619,7 @@ export function toggleChecklist() {
   let node;
   while ((node = iter.nextNode())) {
     if (!range.intersectsNode(node)) continue;
-    let block = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+    let block = /** @type {Element|null} */ (node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
     while (block && !BLOCK_TAGS_MULTI.has(block.tagName)) {
       block = block.parentElement;
     }
@@ -634,7 +634,7 @@ export function toggleChecklist() {
   // Build checklist and replace collected blocks.
   const newUl = document.createElement('ul');
   newUl.className = 'an-checklist';
-  let lastTextNode = null;
+  /** @type {Text|null} */ let lastTextNode = null;
   blocks.forEach((block) => {
     const li = document.createElement('li');
     const cb = document.createElement('input');
@@ -656,7 +656,7 @@ export function toggleChecklist() {
   // Insert the new list before the first block, then remove all source blocks.
   const firstBlock = blocks[0];
   firstBlock.parentNode.insertBefore(newUl, firstBlock);
-  blocks.forEach((block) => block.parentNode && block.parentNode.removeChild(block));
+  blocks.forEach((block) => block.remove());
 
   // Move caret to end of the last checklist item.
   if (lastTextNode) {
@@ -673,9 +673,9 @@ export function toggleChecklist() {
  * @returns {boolean}
  */
 export function isInChecklist() {
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || !sel.rangeCount) return false;
   let container = sel.getRangeAt(0).commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
-  return !!(container && container.closest && container.closest('.an-checklist li'));
+  return !!(/** @type {Element|null} */ (container)?.closest('.an-checklist li'));
 }

package/src/js/editing/Table.js

@@ -13,8 +13,7 @@ import { createElement } from '../core/dom.js';
  * Build an HTML table with the given number of columns and rows, optionally including a header row.
  * @param {number} cols - Number of columns in each row.
  * @param {number} rows - Total number of rows to create (including header when `headerRow` is true).
- * @param {{ headerRow?: boolean }} [opts] - Options object.
- * @param {boolean} [opts.headerRow=false] - When true and `rows > 0`, creates a header row (`<thead>`) plus body rows for the remainder.
+ * @param {{ headerRow?: boolean }} [opts] - Options: `headerRow` creates a `<thead>` when true.
  * @returns {HTMLTableElement} The constructed `<table>` element with a `<tbody>` and optional `<thead>`; each cell contains a `<br>` placeholder.
  */
 export function createTable(cols, rows, opts = {}) {
@@ -44,7 +43,7 @@ export function createTable(cols, rows, opts = {}) {
     }
     tbody.appendChild(tr);
   }
-  return table;
+  return /** @type {HTMLTableElement} */ (table);
 }
 
 /**
@@ -52,21 +51,20 @@ export function createTable(cols, rows, opts = {}) {
  * @param {number} cols - Number of columns for the new table.
  * @param {number} rows - Number of rows for the new table.
  * @param {{ headerRow?: boolean }} [opts] - Options for table creation.
- * @param {boolean} [opts.headerRow=false] - If true, include a header row as the first row.
  */
 export function insertTable(cols, rows, opts = {}) {
   if (cols <= 0 || rows <= 0) return;
   const table = createTable(cols, rows, opts);
 
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (!sel || sel.rangeCount === 0) return;
   const range = sel.getRangeAt(0);
   range.deleteContents();
 
   // Walk up to find the nearest block-level ancestor to insert after
   const BLOCK = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI', 'PRE']);
-  let anchor = range.startContainer;
-  if (anchor.nodeType === 3) anchor = anchor.parentElement;
+  let anchor = /** @type {Element|null} */ (range.startContainer);
+  if (anchor?.nodeType === 3) anchor = anchor.parentElement;
   while (anchor && !BLOCK.has(anchor.tagName?.toUpperCase()) && anchor.parentElement) {
     anchor = anchor.parentElement;
   }

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,15 +40,15 @@ 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 = r.startContainer;
+        const textNode = /** @type {ChildNode} */ (r.startContainer);
         // Case A: cursor at offset 0, preceding sibling is an FA icon
         if (r.startOffset === 0 && isFAIcon(textNode.previousSibling)) {
           event.preventDefault();
-          textNode.previousSibling.remove();
+          /** @type {ChildNode} */ (textNode.previousSibling).remove();
           return true;
         }
 
@@ -59,7 +59,7 @@ export function handleKeydown(event, editable, options = {}) {
             isFAIcon(textNode.previousSibling)) {
           event.preventDefault();
           const parent   = textNode.parentNode;
-          const icon     = textNode.previousSibling;
+          const icon     = /** @type {ChildNode} */ (textNode.previousSibling);
           const prevNode = icon.previousSibling; // node before the icon (e.g. ZWS of prior icon)
           icon.remove();
           textNode.remove();
@@ -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));
@@ -241,25 +241,25 @@ export function handleKeydown(event, editable, options = {}) {
 
     // Hoist sc/el once so all guards below can reuse them.
     const sc = range.sc;
-    const el = sc.nodeType === 3 ? sc.parentElement : sc;
+    const el = /** @type {Element|null} */ (sc.nodeType === 3 ? sc.parentElement : sc);
 
     // Guard: if the cursor is inside a <i> FA icon element (zero text children,
     // rendered entirely by CSS ::before), pressing Enter would split the block
     // 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 && 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 && 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/i18n/en.js

@@ -298,6 +298,8 @@ export const en = {
       rowHeight:          'Row Height',
       tableBorderWidth:   'Table Border Width',
       deleteTable:        'Delete Table',
+      cellBackground:     'Cell Background',
+      noShading:          'No Shading',
       columnWidthPx:      'Column Width (px)',
       rowHeightPx:        'Row Height (px)',
       tableBorderWidthPx: 'Table Border Width (px)',

package/src/js/i18n/vi.js

@@ -293,6 +293,8 @@ export const vi = {
       rowHeight:          'Chiều cao hàng',
       tableBorderWidth:   'Độ rộng viền bảng',
       deleteTable:        'Xóa bảng',
+      cellBackground:     'Màu Nền Ô',
+      noShading:          'Xóa Màu Nền',
       columnWidthPx:      'Chiều rộng cột (px)',
       rowHeightPx:        'Chiều cao hàng (px)',
       tableBorderWidthPx: 'Độ rộng viền bảng (px)',

package/src/js/index.js

@@ -9,6 +9,7 @@
  *   const editor = AutumnNote.create('#my-editor');
  */
 
+// @ts-ignore
 import '../styles/autumnnote.scss';
 import { Context, _customModules, _globalPlugins } from './Context.js';
 import { registerButton } from './module/Buttons.js';
@@ -49,7 +50,7 @@ const AutumnNote = {
     const elements = resolveElements(selector);
     const ctxs = elements.map((el) => {
       if (instances.has(el)) return instances.get(el);
-      const ctx = new Context(el, options);
+      const ctx = new Context(/** @type {HTMLElement} */ (el), options);
       ctx.initialize();
       instances.set(el, ctx);
       return ctx;
@@ -159,7 +160,7 @@ function resolveElements(selector) {
     return [selector];
   }
   if (selector instanceof NodeList || Array.isArray(selector)) {
-    return Array.from(selector);
+    return /** @type {Element[]} */ (Array.from(selector));
   }
   return [];
 }

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;
   }
 }