autumnnote 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Fast. Lightweight. Reliable. Efficient. A modern WYSIWYG editor built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",

package/src/js/Context.js

@@ -59,7 +59,7 @@ export class Context {
     this.locale = resolveLocale(this.options.lang);
 
     /** @type {{ container: HTMLElement, editable: HTMLElement, toolbar?: HTMLElement, statusbar?: HTMLElement }} */
-    this.layoutInfo = {};
+    this.layoutInfo = /** @type {any} */ ({});
 
     /** @type {Map<string, Function[]>} */
     this._listeners = new Map();
@@ -167,7 +167,7 @@ export class Context {
   /**
    * Registers and initialises a custom module on this instance.
    * @param {string} name
-   * @param {Function} ModuleClass
+   * @param {new (ctx: this) => any} ModuleClass
    * @returns {this}
    */
   registerModule(name, ModuleClass) {
@@ -555,11 +555,16 @@ export class Context {
     this._disposers = [];
 
     const container = this.layoutInfo.container;
+    const wasDark = container && container.classList.contains('an-theme-dark');
     if (container && container.parentNode) {
       // Restore original element
       this.targetEl.style.display = '';
       container.parentNode.removeChild(container);
     }
+    // If this was a dark editor and no other dark containers remain, clean up body
+    if (wasDark && !document.querySelector('.an-container.an-theme-dark')) {
+      document.body.classList.remove('an-theme-dark');
+    }
 
     if (typeof this.options.onDestroy === 'function') {
       this.options.onDestroy(this);
@@ -578,7 +583,7 @@ export class Context {
    */
   _syncToTarget() {
     if (this.targetEl.tagName === 'TEXTAREA' || this.targetEl.tagName === 'INPUT') {
-      this.targetEl.value = this.getHTML();
+      /** @type {HTMLInputElement} */ (this.targetEl).value = this.getHTML();
     }
   }
 }

package/src/js/core/detectLang.js

@@ -0,0 +1,98 @@
+/**
+ * detectLang.js — Heuristic programming-language detection for code snippets.
+ *
+ * Returns a Prism.js language identifier or null when no language can be
+ * determined with reasonable confidence.
+ *
+ * Detection order (conflicts in parentheses):
+ *   TypeScript → Rust → PHP → Java → Kotlin → Swift → Go
+ *   → JavaScript → HTML → CSS → JSON → SQL → Python → Ruby
+ *   → Bash → C++ → C# → C → XML
+ *
+ * @param {string} code
+ * @returns {string|null}
+ */
+export function detectLang(code) {
+  if (!code || !code.trim()) return null;
+  const s = code.trim();
+
+  // ── TypeScript ─────────────────────────────────────────────────────────────
+  // Must be first — TS is a JS superset; its markers are specific.
+  if (/(:\s*(string|number|boolean|void|never|any|unknown)\b|interface\s+\w+\s*\{|type\s+\w+\s*[=<(]|<\w+>\s*[;,)]|readonly\s+\w|enum\s+\w+\s*\{|\?\s*:\s*\w|as\s+\w+\s*[;,)\]])/.test(s)) return 'typescript';
+
+  // ── Rust ────────────────────────────────────────────────────────────────────
+  // Before JavaScript — both have `let`. `!` macros and `pub fn` are unique.
+  if (/\bprintln!\s*\(|\bprint!\s*\(|\bfn\s+\w+\s*(<[^>]*>)?\s*\(|\blet\s+mut\s|\bpub\s+fn\s|\buse\s+std::|\bimpl\s+\w+|\bOption<|\bResult<\w+/.test(s)) return 'rust';
+
+  // ── PHP ─────────────────────────────────────────────────────────────────────
+  // Before Bash — both have `echo`. `<?php` and `$var` are unique to PHP.
+  if (/(<\?php\b|<\?=|\becho\s+.*\$\w|\$this->|\$\w+\s*=\s*\w|\bforeach\s*\(\s*\$|Illuminate\\)/.test(s)) return 'php';
+
+  // ── Java ────────────────────────────────────────────────────────────────────
+  // Before Kotlin — `System.out.println()` would otherwise match Kotlin's
+  // `println\s*\(` pattern.
+  if (/\bpublic\s+(class|static|void|int|String)\s+\w|System\.out\.(print|println)\s*\(|@(Override|Autowired|Component|Service|Controller)\b|import\s+java\.(util|io|lang|net)\.|throws\s+\w+Exception/.test(s)) return 'java';
+
+  // ── Kotlin ──────────────────────────────────────────────────────────────────
+  // Kotlin uses `val` (immutable) unlike Swift/JS which use `let`.
+  // `fun`, `data class`, `companion object`, `println()` are Kotlin-specific.
+  if (/\bfun\s+\w+\s*\(|\bdata\s+class\s+\w+|\bcompanion\s+object\b|\bval\s+\w+\s*:\s*\w|\bprintln\s*\(/.test(s)) return 'kotlin';
+
+  // ── Swift ───────────────────────────────────────────────────────────────────
+  // Swift uses `let` for constants (Kotlin uses `val`). `guard let`, `protocol`,
+  // `extension`, `func ... -> ReturnType`, and `let x: UppercaseType` are signals.
+  if (/\bguard\s+(let|var)\b|\bprotocol\s+\w+\s*\{|\bextension\s+\w+|\bfunc\s+\w+[^(]*\([^)]*\)\s*->\s*\w|\blet\s+\w+\s*:\s*[A-Z]\w*|\bSwiftUI\b/.test(s)) return 'swift';
+
+  // ── Go ──────────────────────────────────────────────────────────────────────
+  // `package`, `:=` short assignment, `fmt.Print*`, `chan`, `goroutine`.
+  if (/\bpackage\s+\w+\b|\bfmt\.(Print|Println|Sprintf|Errorf|Fprintf)\s*\(|:=\s*\w|\bgoroutine\b|\bchan\s+\w|\bgo\s+func\b/.test(s)) return 'go';
+
+  // ── JavaScript ──────────────────────────────────────────────────────────────
+  // Before HTML to handle JSX (`<div/>` would otherwise trigger HTML).
+  // `var\s+\w+\s*=` (not just `var\s+\w`) to avoid matching Swift `var x: Int`.
+  if (/\b(const\s+\w|let\s+\w+\s*=|var\s+\w+\s*=|function\s+\w|\=>\s*[{(]|import\s+.*\bfrom\b\s*['"]|require\s*\(|console\.(log|error|warn|info)|document\.\w|window\.\w|async\s+function|\bPromise\b|React\.|useState\s*\(|\.then\s*\()/.test(s)) return 'javascript';
+
+  // ── HTML ────────────────────────────────────────────────────────────────────
+  if (/^<!DOCTYPE html/i.test(s) || /<(html|head|body|div|section|article|nav|p|a|img|ul|ol|li|table|form|input|button|script|style)\b[^>]*>/i.test(s)) return 'html';
+
+  // ── SCSS ─────────────────────────────────────────────────────────────────────
+  // Before CSS — SCSS is a superset. Unique markers: `//` line comments,
+  // `&` nesting, `$variable`, `@mixin/@include/@extend`, `#{interpolation}`.
+  if (/(^|\n)\s*(\/\/\s+\S|&[:.[\w]|\$\w+\s*:|@(mixin|include|extend|each|if|for|use|forward)\b|#\{)/.test(s) && /[\w#.*&[\]:(),>+~ -]+\s*\{/.test(s)) return 'scss';
+
+  // ── CSS ──────────────────────────────────────────────────────────────────────
+  if (/(^|\n)\s*[\w#.*:[\]&, +-]+\s*\{[^}]*[\w-]+\s*:[^{}:;]+[;}\n]/m.test(s) && !/<\w|function\s|def\s|:\s*(string|number)/.test(s)) return 'css';
+
+  // ── JSON ────────────────────────────────────────────────────────────────────
+  if (/^\s*[{[]/.test(s) && /"\w[\w\s-]*"\s*:/.test(s) && !/\bfunction\b|\bdef\b/.test(s)) return 'json';
+
+  // ── SQL ─────────────────────────────────────────────────────────────────────
+  if (/(^|\n)\s*(SELECT\s|INSERT\s+INTO|UPDATE\s+\w|DELETE\s+FROM|CREATE\s+(TABLE|DATABASE|INDEX|VIEW)|DROP\s+(TABLE|DATABASE)|ALTER\s+TABLE|WITH\s+\w+\s+AS\s*\()/im.test(s)) return 'sql';
+
+  // ── Python ──────────────────────────────────────────────────────────────────
+  // `def` requires trailing `:` (Python rule); `class` checked at line start.
+  if (/\bdef\s+\w+\s*\([^)]*\)\s*:|(^|\n)\s*class\s+\w+.*:\s*$|(^|\n)\s*import\s+\w|(^|\n)\s*from\s+\w+\s+import\s+|\bprint\s*\(|if\s+__name__\s*==\s*['"]__main__['"]/m.test(s)) return 'python';
+
+  // ── Ruby ────────────────────────────────────────────────────────────────────
+  // `.each do |x|`, `attr_*`, `puts` with value, multi-line `def...end`.
+  if (/\bputs\s+\S|\battr_(accessor|reader|writer)\s|\.each\s+do\s*\|\w+\s*\||\bdo\s*\|\w+\s*\|.*\bend\b|\bdef\s+\w+[^:]*\n[\s\S]*?\bend\b/.test(s)) return 'ruby';
+
+  // ── Bash / Shell ─────────────────────────────────────────────────────────────
+  if (/^#!.*\/(ba|z|da|fi|k)?sh\b/m.test(s) || /\b(echo\s+["']|grep\s+|awk\s+|sed\s+['"\\/-]|chmod\s+|sudo\s+|apt(-get)?\s+install|brew\s+install|npm\s+(install|run|start|build)|pip\s+(install|3\s)|docker\s+(run|build|compose)|kubectl\s+|git\s+(clone|add|commit|push|pull|checkout))\b/.test(s)) return 'bash';
+
+  // ── C++ ─────────────────────────────────────────────────────────────────────
+  // Before C and C# — `cout<<`, `using namespace std`, `std::`, `template<>`.
+  if (/\bcout\s*<<|\bcin\s*>>|using\s+namespace\s+std\b|std::\w|\btemplate\s*<\w|\b#include\s*<(iostream|vector|map|set|algorithm|string|memory)>/.test(s)) return 'cpp';
+
+  // ── C# ──────────────────────────────────────────────────────────────────────
+  // After C++ to avoid matching C++'s `using namespace std`.
+  if (/\busing\s+System\b|Console\.(Write|WriteLine)\s*\(|\bget;\s*set;|\basync\s+Task[<\s]|IEnumerable<|\bLINQ\b|\.Select\s*\(|\.Where\s*\(/.test(s)) return 'csharp';
+
+  // ── C ───────────────────────────────────────────────────────────────────────
+  if (/\b#include\s*<(stdio|stdlib|string|math|time|ctype)\.h>|\bprintf\s*\(|\bscanf\s*\(|int\s+main\s*\(\s*(void|int\s+argc)|\bmalloc\s*\(|\bfree\s*\(/.test(s) && !/namespace|cout|cin|std::/.test(s)) return 'c';
+
+  // ── XML ─────────────────────────────────────────────────────────────────────
+  if (/^<\?xml\s/i.test(s) || /xmlns:|<\/[\w:]+>/.test(s)) return 'xml';
+
+  return null;
+}

package/src/js/core/dom.js

@@ -29,7 +29,7 @@ export const isInline = (node) =>
   isElement(node) &&
   /^(a|abbr|acronym|b|bdo|big|br|button|cite|code|dfn|em|i|img|input|kbd|label|map|object|output|q|s|samp|select|small|span|strong|sub|sup|textarea|time|tt|u|var)$/i.test(node.nodeName);
 /** @param {Node} node */
-export const isEditable = (node) => isElement(node) && node.isContentEditable;
+export const isEditable = (node) => isElement(node) && /** @type {HTMLElement} */ (node).isContentEditable;
 /** @param {Node} node */
 export const isAnchor = (node) => isElement(node) && node.nodeName.toUpperCase() === 'A';
 /** @param {Node} node */
@@ -100,7 +100,7 @@ export function prevElement(node) {
   while (sibling && !isElement(sibling)) {
     sibling = sibling.previousSibling;
   }
-  return sibling;
+  return /** @type {Element|null} */ (sibling);
 }
 
 /**
@@ -113,7 +113,7 @@ export function nextElement(node) {
   while (sibling && !isElement(sibling)) {
     sibling = sibling.nextSibling;
   }
-  return sibling;
+  return /** @type {Element|null} */ (sibling);
 }
 
 // ---------------------------------------------------------------------------
@@ -214,7 +214,7 @@ export function isEmpty(node) {
   if (isText(node)) return !node.nodeValue;
   if (isVoid(node)) return false;
   if (node.childNodes.length === 1 && node.firstChild?.nodeName === 'BR') return true;
-  return !node.textContent.trim() && !node.querySelector('img, video, hr, table');
+  return !node.textContent.trim() && !/** @type {Element} */ (node).querySelector('img, video, hr, table');
 }
 
 /**
@@ -303,12 +303,12 @@ export function trapFocus(container, onEscape) {
     if (e.shiftKey) {
       if (document.activeElement === first) {
         e.preventDefault();
-        last.focus();
+        /** @type {HTMLElement} */ (last).focus();
       }
     } else {
       if (document.activeElement === last) {
         e.preventDefault();
-        first.focus();
+        /** @type {HTMLElement} */ (first).focus();
       }
     }
   };
@@ -316,3 +316,59 @@ export function trapFocus(container, onEscape) {
   document.addEventListener('keydown', handler);
   return () => document.removeEventListener('keydown', handler);
 }
+
+/**
+ * Makes a dialog box draggable by its handle element.
+ * On first drag the box is pinned to its current viewport coordinates via
+ * `position:fixed`, freeing it from the parent flex container's centering.
+ * The position is clamped to the visible viewport.
+ *
+ * @param {HTMLElement} handle  Element the user grabs (title bar / header)
+ * @param {HTMLElement} box     Element that actually moves
+ * @returns {Function}          Cleanup function (removes the mousedown listener)
+ */
+export function makeDraggable(handle, box) {
+  handle.style.cursor = 'grab';
+
+  const onMousedown = (e) => {
+    if (e.button !== 0) return;
+    // Don't start drag when clicking on interactive children of the handle
+    if (/** @type {Element} */ (e.target).closest('button, input, select, textarea, a')) return;
+
+    e.preventDefault();
+
+    // First drag: snapshot position and pin to viewport with position:fixed
+    if (!box.dataset.anDragPinned) {
+      const r = box.getBoundingClientRect();
+      box.style.position = 'fixed';
+      box.style.margin = '0';
+      box.style.left = `${r.left}px`;
+      box.style.top = `${r.top}px`;
+      box.dataset.anDragPinned = '1';
+    }
+
+    const startX = e.clientX - parseFloat(box.style.left);
+    const startY = e.clientY - parseFloat(box.style.top);
+
+    handle.style.cursor = 'grabbing';
+
+    const onMove = (ev) => {
+      const bw = box.offsetWidth;
+      const bh = box.offsetHeight;
+      box.style.left = `${Math.max(0, Math.min(ev.clientX - startX, window.innerWidth  - bw))}px`;
+      box.style.top  = `${Math.max(0, Math.min(ev.clientY - startY, window.innerHeight - bh))}px`;
+    };
+
+    const onUp = () => {
+      handle.style.cursor = 'grab';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup',   onUp);
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup',   onUp);
+  };
+
+  handle.addEventListener('mousedown', onMousedown);
+  return () => handle.removeEventListener('mousedown', onMousedown);
+}

package/src/js/core/markdown.js

@@ -37,8 +37,9 @@ function _domToMd(node, depth = 0) {
   }
   if (node.nodeType !== 1) return '';
 
-  const tag = node.nodeName.toLowerCase();
-  const inner = () => Array.from(node.childNodes).map(n => _domToMd(n, depth)).join('');
+  const el = /** @type {Element} */ (node);
+  const tag = el.nodeName.toLowerCase();
+  const inner = () => Array.from(el.childNodes).map(n => _domToMd(n, depth)).join('');
 
   switch (tag) {
     case 'p':
@@ -57,18 +58,18 @@ function _domToMd(node, depth = 0) {
     case 'del':
     case 's':
     case 'strike':   return `~~${inner()}~~`;
-    case 'sup':      return `^${inner()}`;
-    case 'sub':      return `~${inner()}`;
+    case 'sup':      return `^${inner()}^`;
+    case 'sub':      return `~${inner()}~`;
     case 'code': {
       // Inside <pre> we emit raw text; outside we wrap in backticks
-      if (node.closest('pre')) return inner();
+      if (el.closest('pre')) return inner();
       return `\`${inner()}\``;
     }
     case 'pre': {
-      const codeEl = node.querySelector('code');
+      const codeEl = el.querySelector('code');
       const langMatch = ((codeEl && codeEl.className) || '').match(/language-(\S+)/);
       const lang = langMatch ? langMatch[1] : '';
-      const content = (codeEl || node).textContent || '';
+      const content = (codeEl || el).textContent || '';
       return `\n\n\`\`\`${lang}\n${content}\n\`\`\`\n\n`;
     }
     case 'blockquote': {
@@ -76,23 +77,23 @@ function _domToMd(node, depth = 0) {
       return `\n\n${lines.map((l) => `> ${l}`).join('\n')}\n\n`;
     }
     case 'a': {
-      const href = node.getAttribute('href') || '';
+      const href = el.getAttribute('href') || '';
       return `[${inner()}](${href})`;
     }
     case 'img': {
-      const src = node.getAttribute('src') || '';
-      const alt = node.getAttribute('alt') || '';
+      const src = el.getAttribute('src') || '';
+      const alt = el.getAttribute('alt') || '';
       return `![${alt}](${src})`;
     }
     case 'ul': {
-      const items = Array.from(node.querySelectorAll(':scope > li'));
+      const items = Array.from(el.querySelectorAll(':scope > li'));
       if (!items.length) return inner();
       const indent = '  '.repeat(depth);
       const lines = items.map((li) => `${indent}- ${_domToMd(li, depth + 1).trim()}`).join('\n');
       return depth === 0 ? `\n\n${lines}\n\n` : `\n${lines}`;
     }
     case 'ol': {
-      const items = Array.from(node.querySelectorAll(':scope > li'));
+      const items = Array.from(el.querySelectorAll(':scope > li'));
       if (!items.length) return inner();
       const indent = '  '.repeat(depth);
       const lines = items.map((li, i) => `${indent}${i + 1}. ${_domToMd(li, depth + 1).trim()}`).join('\n');
@@ -101,7 +102,7 @@ function _domToMd(node, depth = 0) {
     case 'li':  return inner();
     case 'hr':  return '\n\n---\n\n';
     case 'table': {
-      const rows = Array.from(node.querySelectorAll('tr'));
+      const rows = Array.from(el.querySelectorAll('tr'));
       if (!rows.length) return inner();
       const cellTexts = rows.map((tr) =>
         Array.from(tr.querySelectorAll('th, td')).map((c) => c.textContent.trim().replace(/\|/g, '\\|')),

package/src/js/core/range.js

@@ -57,7 +57,7 @@ export class WrappedRange {
   commonAncestor() {
     const native = this.toNativeRange();
     const ancestor = native.commonAncestorContainer;
-    return isElement(ancestor) ? ancestor : ancestor.parentElement;
+    return /** @type {Element|null} */ (isElement(ancestor) ? ancestor : ancestor.parentElement);
   }
 
   /**
@@ -66,7 +66,7 @@ export class WrappedRange {
    * @returns {Element|null}
    */
   blockNode(editable) {
-    return closest(this.sc, (n) => isElement(n) && n !== editable, editable);
+    return /** @type {Element|null} */ (closest(this.sc, (n) => isElement(n) && n !== editable, editable));
   }
 
   /**

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();
@@ -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;
     }
@@ -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}__`;

package/src/js/editing/Style.js

@@ -45,7 +45,7 @@ export function underline() {
   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 = container && /** @type {Element} */ (container).closest('u');
   const nativeState = document.queryCommandState('underline');
   if (uEl && !nativeState) {
     // Browser doesn't recognise the underline state (e.g. inside <code>).
@@ -71,7 +71,7 @@ export function strikethrough() {
   // 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 = sc && (/** @type {Element} */ (sc).closest('s') || /** @type {Element} */ (sc).closest('strike'));
   const nativeState = document.queryCommandState('strikeThrough');
   if (sEl && !nativeState) {
     // Browser doesn’t recognise the strikethrough state (e.g. inside <code>
@@ -116,7 +116,7 @@ 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();
@@ -226,9 +226,9 @@ export function outdent() {
   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 = container && /** @type {Element} */ (container).closest('.an-checklist li');
     if (checkLi) {
-      _checklistItemToP(checkLi);
+      _checklistItemToP(/** @type {HTMLElement} */ (checkLi));
       return;
     }
   }
@@ -257,7 +257,7 @@ 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
@@ -373,7 +373,7 @@ 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);
@@ -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) {
+export function toggleInlineCode(_editable) {
   const sel = window.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 = container && /** @type {Element} */ (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.
@@ -480,7 +480,7 @@ export function isInlineCode() {
   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 = sc && /** @type {Element} */ (sc).closest('code');
   return !!(code && !code.closest('pre'));
 }
 
@@ -509,18 +509,18 @@ export function toggleChecklist() {
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
 
-  const ul = container.closest && container.closest('.an-checklist');
+  const ul = container && /** @type {Element} */ (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, '');
@@ -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.
@@ -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');
@@ -677,5 +677,5 @@ export function isInChecklist() {
   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 !!(container && /** @type {Element} */ (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,7 +51,6 @@ 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;
@@ -65,8 +63,8 @@ export function insertTable(cols, rows, opts = {}) {
 
   // 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 && anchor.nodeType === 3) anchor = anchor.parentElement;
   while (anchor && !BLOCK.has(anchor.tagName?.toUpperCase()) && anchor.parentElement) {
     anchor = anchor.parentElement;
   }

package/src/js/editing/Typing.js

@@ -44,11 +44,11 @@ export function handleKeydown(event, editable, options = {}) {
     if (sel && 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();
@@ -241,7 +241,7 @@ 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
@@ -259,7 +259,7 @@ export function handleKeydown(event, editable, options = {}) {
 
     // 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 && el.closest('.an-video-wrapper');
     if (videoWrapper) {
       event.preventDefault();
       const p = document.createElement('p');
@@ -275,7 +275,7 @@ export function handleKeydown(event, editable, options = {}) {
     }
 
     // Checklist — Enter creates new item; empty item exits the list
-    const checkLi = el && el.closest && el.closest('.an-checklist li');
+    const checkLi = el && el.closest('.an-checklist li');
     if (checkLi) {
       event.preventDefault();
       const ul = checkLi.closest('.an-checklist');

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)',