autumnnote 1.5.0 → 1.6.1

package/src/js/module/Toolbar.js

@@ -146,7 +146,7 @@ export class Toolbar {
     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;
   }
@@ -244,8 +244,8 @@ export class Toolbar {
 
     const setHighlight = (rows, cols) => {
       cells.forEach((cell) => {
-        const r = +cell.getAttribute('data-row');
-        const c = +cell.getAttribute('data-col');
+        const r = +cell.dataset.row;
+        const c = +cell.dataset.col;
         cell.classList.toggle('active', r <= rows && c <= cols);
       });
       label.textContent = (rows && cols) ? `${rows} × ${cols}` : (this.context.locale.toolbar.insertTableLabel || 'Insert Table');
@@ -264,8 +264,8 @@ export class Toolbar {
 
       let left = rect.left;
       let top  = rect.bottom + 4;
-      if (left + pw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - pw - 8);
-      if (top  + ph > window.innerHeight - 8) top  = rect.top - ph - 4;
+      if (left + pw > globalThis.innerWidth - 8) left = Math.max(8, globalThis.innerWidth - pw - 8);
+      if (top  + ph > globalThis.innerHeight - 8) top  = rect.top - ph - 4;
 
       popup.style.left = `${left}px`;
       popup.style.top  = `${top}px`;
@@ -286,18 +286,18 @@ export class Toolbar {
     });
 
     const d2 = on(grid, 'mouseover', (e) => {
-      const cell = e.target.closest('.an-table-cell');
+      const cell = /** @type {HTMLElement|null} */ (/** @type {Element} */ (e.target)?.closest('.an-table-cell'));
       if (!cell) return;
-      setHighlight(+cell.getAttribute('data-row'), +cell.getAttribute('data-col'));
+      setHighlight(+cell.dataset.row, +cell.dataset.col);
     });
 
     const d3 = on(grid, 'mouseleave', () => setHighlight(0, 0));
 
     const d4 = on(grid, 'click', (e) => {
-      const cell = e.target.closest('.an-table-cell');
+      const cell = /** @type {HTMLElement|null} */ (/** @type {Element} */ (e.target)?.closest('.an-table-cell'));
       if (!cell) return;
-      const rows = +cell.getAttribute('data-row');
-      const cols = +cell.getAttribute('data-col');
+      const rows = +cell.dataset.row;
+      const cols = +cell.dataset.col;
       closePopup();
       this.context.invoke('editor.focus');
       def.action(this.context, rows, cols);
@@ -308,12 +308,12 @@ export class Toolbar {
     // Append popup to body so position:fixed is truly viewport-relative,
     // unaffected by any ancestor transform / filter (same pattern as color picker).
     this._disposers.push(d1, d2, d3, d4, d5, () => {
-      if (popup.parentNode) popup.parentNode.removeChild(popup);
+      if (popup.parentNode) popup.remove();
     });
 
     wrap.appendChild(btn);
     document.body.appendChild(popup);
-    return wrap;
+    return /** @type {HTMLDivElement} */ (wrap);
   }
 
   /**
@@ -384,7 +384,7 @@ export class Toolbar {
     });
 
     const customRow = createElement('div', { class: 'an-color-custom' });
-    const colorInput = createElement('input', { type: 'color', value: currentColor, title: this.context.locale.toolbar.customColor || 'Custom color' });
+    const colorInput = /** @type {HTMLInputElement} */ (createElement('input', { type: 'color', value: currentColor, title: this.context.locale.toolbar.customColor || 'Custom color' }));
     const customLabel = createElement('span', {}, [this.context.locale.toolbar.customColor || 'Custom color']);
     customRow.appendChild(colorInput);
     customRow.appendChild(customLabel);
@@ -398,14 +398,14 @@ export class Toolbar {
     let savedRange = null;
 
     const saveSelection = () => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
     };
 
     const restoreSelection = () => {
       if (!savedRange) return;
       try {
-        const sel = window.getSelection();
+        const sel = globalThis.getSelection();
         if (!sel) return;
         sel.removeAllRanges();
         sel.addRange(savedRange);
@@ -424,7 +424,7 @@ export class Toolbar {
       const rect = arrowBtn.getBoundingClientRect();
       const popupMinW = 184;
       let left = rect.left;
-      if (left + popupMinW > window.innerWidth) left = rect.right - popupMinW;
+      if (left + popupMinW > globalThis.innerWidth) left = rect.right - popupMinW;
       popup.style.top  = `${rect.bottom + 4}px`;
       popup.style.left = `${Math.max(4, left)}px`;
       popup.style.display = 'block';
@@ -472,17 +472,17 @@ export class Toolbar {
     });
 
     const d3b = on(swatches, 'click', (e) => {
-      const sw = e.target.closest('.an-color-swatch');
-      if (sw) applyColor(sw.dataset.color);
+      const sw = /** @type {Element} */ (e.target)?.closest('.an-color-swatch');
+      if (sw) applyColor(/** @type {HTMLElement} */ (sw).dataset.color);
     });
 
     const d4 = on(colorInput, 'change', (e) => {
-      applyColor(e.target.value);
+      applyColor(/** @type {HTMLInputElement} */ (e.target).value);
     });
 
     const d5 = on(document, 'click', (e) => {
       // popup is in document.body, not inside wrap — check both
-      if (isOpen && !wrap.contains(e.target) && !popup.contains(e.target)) closePopup();
+      if (isOpen && !wrap.contains(/** @type {Node} */ (e.target)) && !popup.contains(/** @type {Node} */ (e.target))) closePopup();
     });
 
     const d6 = on(popup, 'click', (e) => e.stopPropagation());
@@ -491,13 +491,13 @@ export class Toolbar {
     // popup doesn't drift away from the button it belongs to.
     const onScrollResize = () => { if (isOpen) closePopup(); };
     document.addEventListener('scroll', onScrollResize, { passive: true, capture: true });
-    window.addEventListener('resize',   onScrollResize, { passive: true });
+    globalThis.addEventListener('resize',   onScrollResize, { passive: true });
 
     this._disposers.push(d1, d2, d2b, d3, d3b, d4, d5, d6,
       () => document.removeEventListener('scroll', onScrollResize, { capture: true }),
-      () => window.removeEventListener('resize',   onScrollResize),
+      () => globalThis.removeEventListener('resize',   onScrollResize),
       // Remove popup from body on editor destroy
-      () => { if (popup.parentNode) popup.parentNode.removeChild(popup); },
+      () => { if (popup.parentNode) popup.remove(); },
     );
 
     // Register this popup's closer so other color pickers can close it
@@ -513,7 +513,7 @@ export class Toolbar {
     wrap.appendChild(applyBtn);
     wrap.appendChild(arrowBtn);
     document.body.appendChild(popup);
-    return wrap;
+    return /** @type {HTMLDivElement} */ (wrap);
   }
 
   /**
@@ -562,7 +562,7 @@ export class Toolbar {
     /** @type {Range|null} */
     let _savedRange = null;
     const dMousedown = on(select, 'mousedown', () => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       _savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
     });
 
@@ -574,7 +574,7 @@ export class Toolbar {
       // Restore selection saved on mousedown so the action targets the correct text.
       if (_savedRange) {
         try {
-          const sel = window.getSelection();
+          const sel = globalThis.getSelection();
           if (sel) { sel.removeAllRanges(); sel.addRange(_savedRange); }
         } catch (_) { /* range may be stale if DOM changed */ }
       }
@@ -583,7 +583,7 @@ export class Toolbar {
     });
 
     this._disposers.push(dMousedown, disposer);
-    return select;
+    return /** @type {HTMLSelectElement} */ (select);
   }
 
   /**
@@ -638,7 +638,7 @@ export class Toolbar {
     });
 
     this._disposers.push(disposer);
-    return btn;
+    return /** @type {HTMLButtonElement} */ (btn);
   }
 
   // ---------------------------------------------------------------------------
@@ -659,7 +659,7 @@ export class Toolbar {
     // count as "the host page loaded FA" for toolbar icon rendering purposes.
     const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
       .filter((l) => l.id !== 'an-fontawesome-css')
-      .map((l) => l.href || '').join(' ');
+      .map((l) => /** @type {HTMLLinkElement} */ (l).href || '').join(' ');
     _faPageLevelReady = /fontawesome|font-awesome|use\.fontawesome|all\.css/.test(links);
     return _faPageLevelReady;
   }
@@ -684,18 +684,18 @@ export class Toolbar {
 
     // Sync button active states
     this.el.querySelectorAll('button[data-btn]').forEach((btn) => {
-      const def = btnMap.get(btn.getAttribute('data-btn'));
+      const def = btnMap.get(/** @type {HTMLElement} */ (btn).dataset.btn);
       if (def && typeof def.isActive === 'function') {
         btn.classList.toggle('active', !!def.isActive(this.context));
       }
       if (def && typeof def.isDisabled === 'function') {
-        btn.disabled = !!def.isDisabled(this.context);
+        /** @type {HTMLButtonElement} */ (btn).disabled = !!def.isDisabled(this.context);
       }
     });
 
     // Sync select dropdowns (e.g. font family) with current cursor position
     this.el.querySelectorAll('select[data-btn]').forEach((select) => {
-      const def = btnMap.get(select.getAttribute('data-btn'));
+      const def = btnMap.get(/** @type {HTMLElement} */ (select).dataset.btn);
       if (!def || typeof def.getValue !== 'function') return;
       // queryCommandValue returns the font name, possibly quoted — strip quotes
       let raw = (def.getValue(this.context) || '').replace(/["']/g, '').trim();
@@ -706,10 +706,11 @@ export class Toolbar {
           || '';
       }
       // Try to match against available options (case-insensitive)
-      const matched = Array.from(select.options).find(
+      const sel = /** @type {HTMLSelectElement} */ (select);
+      const matched = Array.from(sel.options).find(
         (opt) => opt.value && opt.value.toLowerCase() === raw.toLowerCase()
       );
-      select.value = matched ? matched.value : '';
+      sel.value = matched ? matched.value : '';
     });
   }
 

package/src/js/module/VideoDialog.js

@@ -7,7 +7,7 @@
  *   • Direct video URLs   → <video> element (.mp4 / .webm / .ogg)
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 export class VideoDialog {
@@ -35,7 +35,7 @@ export class VideoDialog {
     this._disposers.forEach((d) => d());
     this._disposers = [];
     if (this._dialog && this._dialog.parentNode) {
-      this._dialog.parentNode.removeChild(this._dialog);
+      this._dialog.remove();
     }
     this._dialog = null;
   }
@@ -68,8 +68,13 @@ export class VideoDialog {
     });
     const box = createElement('div', { class: 'an-dialog-box' });
 
+    const header = createElement('div', { class: 'an-dialog-header' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.title;
+    header.appendChild(iconEl);
+    header.appendChild(title);
 
     // URL input
     const urlLabel = createElement('label', { class: 'an-label' });
@@ -108,8 +113,9 @@ export class VideoDialog {
     btnRow.appendChild(insertBtn);
     btnRow.appendChild(cancelBtn);
 
-    box.append(title, urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
+    box.append(header, urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
     overlay.appendChild(box);
+    makeDraggable(header, box);
 
     // Live URL hint
     const d0 = on(urlInput, 'input', () => {
@@ -132,7 +138,7 @@ export class VideoDialog {
 
   _onInsert() {
     const rawUrl = this._urlInput.value.trim();
-    const width  = Math.max(80, parseInt(this._widthInput.value, 10) || 560);
+    const width  = Math.max(80, Number.parseInt(this._widthInput.value, 10) || 560);
 
     if (!rawUrl) {
       this._urlInput.focus();
@@ -184,19 +190,19 @@ export class VideoDialog {
     } catch { return null; }
 
     // YouTube watch: https://www.youtube.com/watch?v=ID
-    const ytWatch = url.match(/(?:youtube\.com\/watch\?(?:.*&)?v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
+    const ytWatch = /(?:youtube\.com\/watch\?(?:.*&)?v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/.exec(url);
     if (ytWatch) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytWatch[1]}` };
 
     // YouTube short: https://youtu.be/ID
-    const ytShort = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
+    const ytShort = /youtu\.be\/([a-zA-Z0-9_-]{11})/.exec(url);
     if (ytShort) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytShort[1]}` };
 
     // YouTube Shorts: https://www.youtube.com/shorts/ID
-    const ytShorts = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
+    const ytShorts = /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/.exec(url);
     if (ytShorts) return { type: 'YouTube Shorts', embedUrl: `https://www.youtube.com/embed/${ytShorts[1]}` };
 
     // Vimeo: https://vimeo.com/ID
-    const vimeo = url.match(/vimeo\.com\/(\d+)/);
+    const vimeo = /vimeo\.com\/(\d+)/.exec(url);
     if (vimeo) return { type: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${vimeo[1]}` };
 
     // Direct video file
@@ -232,7 +238,7 @@ export class VideoDialog {
     }
 
     if (info && info.type === 'Direct video') {
-      const src = info.embedUrl.replace(/"/g, '%22');
+      const src = info.embedUrl.replaceAll('"', '%22');
       return (
         `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
         `<video src="${src}" width="${width}" height="${height}" controls ` +
@@ -252,7 +258,7 @@ export class VideoDialog {
     })();
     if (!safeSrc) return null;
 
-    const escapedSrc = safeSrc.replace(/"/g, '%22');
+    const escapedSrc = safeSrc.replaceAll('"', '%22');
     return (
       `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
       `<video src="${escapedSrc}" width="${width}" height="${height}" controls ` +

package/src/js/module/VideoResizer.js

@@ -46,8 +46,8 @@ export class VideoResizer {
         if (wrapper) this._select(wrapper);
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
-      on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', onWindowResize),
+      on(globalThis, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      on(globalThis, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
       // D1: Prevent native browser drag of video wrappers. Without this, a user
       // can hold-and-drag to produce a "copy" that lands outside .an-editable,
@@ -75,9 +75,7 @@ export class VideoResizer {
       this._positionRaf = null;
     }
     this._deselect();
-    if (this._overlay && this._overlay.parentNode) {
-      this._overlay.parentNode.removeChild(this._overlay);
-    }
+    this._overlay?.remove();
     this._overlay = null;
   }
 
@@ -111,10 +109,10 @@ export class VideoResizer {
   _findWrapper(el) {
     if (!el || !(el instanceof Element)) return null;
     // Direct hit on wrapper
-    if (el.classList && el.classList.contains('an-video-wrapper')) return el;
+    if (el.classList?.contains('an-video-wrapper')) return /** @type {HTMLElement} */ (el);
     // Child element (iframe, video, or nested)
     const w = el.closest('.an-video-wrapper');
-    if (w) return w;
+    if (w) return /** @type {HTMLElement} */ (w);
     return null;
   }
 
@@ -152,7 +150,7 @@ export class VideoResizer {
   _onDocClick(e) {
     if (!this._activeWrapper) return;
     if (this._activeWrapper.contains(e.target)) return;
-    if (this._overlay && this._overlay.contains(e.target)) return;
+    if (this._overlay?.contains(e.target)) return;
     if (e.target.closest('.an-contextmenu')) return;
     this._deselect();
   }
@@ -200,7 +198,7 @@ export class VideoResizer {
     const wrapper = this._activeWrapper;
     if (!wrapper) return;
 
-    const embed = wrapper.querySelector('iframe, video');
+    const embed = /** @type {HTMLElement|null} */ (wrapper.querySelector('iframe, video'));
     const startX = e.clientX;
     const startY = e.clientY;
     const startW = wrapper.offsetWidth  || 560;

package/src/js/module/VideoTooltip.js

@@ -39,26 +39,31 @@ export class VideoTooltip {
       on(editable, 'mouseover', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         // The shield div sits on top of iframes — we detect hover via it or the wrapper
-        const wrapper = e.target.closest('.an-video-wrapper');
+        const target = /** @type {Element} */ (e.target);
+        const wrapper = target?.closest('.an-video-wrapper');
         if (wrapper && editable.contains(wrapper)) {
           this._scheduleShow(wrapper);
         }
       }, { passive: true }),
       on(editable, 'mouseout', (e) => {
-        const to = e.relatedTarget;
-        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
+        const to = /** @type {MouseEvent} */ (e).relatedTarget;
+        if (!to || (!editable.contains(/** @type {Node} */ (to)) && !this._el.contains(/** @type {Node} */ (to)))) {
           this._scheduleHide();
         }
       }, { passive: true }),
       on(document, 'click', (e) => {
+        const target = /** @type {Node} */ (e.target);
         if (
           this._activeWrapper &&
-          !this._activeWrapper.contains(e.target) &&
-          !this._el.contains(e.target)
+          !this._activeWrapper.contains(target) &&
+          !this._el.contains(target)
         ) {
           this._hide();
         }
       }),
+      // Hide when the page scrolls or resizes — the tooltip position becomes stale
+      on(globalThis, 'scroll', () => this._hide(), { passive: true }),
+      on(globalThis, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -69,7 +74,7 @@ export class VideoTooltip {
     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;
   }
 
@@ -174,7 +179,7 @@ export class VideoTooltip {
     this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
   }
 
-  _show(wrapper) {
+  _show(_wrapper) {
     this._el.style.display = 'flex';
     // Defer: offsetWidth on a newly-visible element forces synchronous layout
     requestAnimationFrame(() => {
@@ -205,8 +210,8 @@ export class VideoTooltip {
     let top  = rect.bottom + margin;
     let left = rect.left + (rect.width - tipW) / 2;
 
-    if (top + tipH > window.innerHeight - margin) top = rect.top - tipH - margin;
-    if (left + tipW > window.innerWidth  - margin) left = window.innerWidth - tipW - margin;
+    if (top + tipH > globalThis.innerHeight - margin) top = rect.top - tipH - margin;
+    if (left + tipW > globalThis.innerWidth  - margin) left = globalThis.innerWidth - tipW - margin;
     if (left < margin) left = margin;
 
     this._el.style.top  = `${top}px`;
@@ -263,7 +268,7 @@ export class VideoTooltip {
     if (!wrapper) return;
     this._hide();
     this.context.invoke('videoResizer.deselect');
-    if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+    wrapper.remove();
     this.context.invoke('editor.afterCommand');
   }
 

package/src/js/renderer.js

@@ -40,13 +40,13 @@ export function renderLayout(targetEl, options) {
   }
   if (!initialContent) {
     initialContent = targetEl.tagName === 'TEXTAREA'
-      ? (targetEl.value || '').trim()
+      ? ((/** @type {HTMLTextAreaElement} */ (targetEl)).value || '').trim()
       : (targetEl.innerHTML || '').trim();
   }
   editable.innerHTML = sanitiseHTML(initialContent, { allowIframes: true });
 
   // Apply default font family so the editable renders in the configured font
-  const defaultFont = options.defaultFontFamily || (options.fontFamilies && options.fontFamilies[0]);
+  const defaultFont = options.defaultFontFamily || options.fontFamilies?.[0];
   if (defaultFont) {
     editable.style.fontFamily = defaultFont;
   }
@@ -70,9 +70,11 @@ export function renderLayout(targetEl, options) {
 
   container.appendChild(editable);
 
-  // Apply dark theme
+  // Apply dark theme — also add to body so floating elements (dialogs, tooltips,
+  // popovers) appended to document.body inherit the dark CSS rules.
   if (options.theme === 'dark') {
     container.classList.add('an-theme-dark');
+    document.body.classList.add('an-theme-dark');
   }
 
   // Read-only mode

package/src/js/settings.js

@@ -7,48 +7,65 @@ import { defaultToolbar } from './module/Buttons.js';
 
 /**
  * @typedef {object} AsnOptions
- * @property {string}   [placeholder]       - Placeholder text when editor is empty
- * @property {number}   [height]            - Editor height in px (min)
- * @property {number}   [minHeight]         - Minimum height in px
- * @property {number}   [maxHeight]         - Maximum height in px (0 = unlimited)
- * @property {boolean}  [focus]             - Auto-focus on init
- * @property {boolean}  [resizable]         - Show resize handle
- * @property {Array}    [toolbar]           - Toolbar button group config
- * @property {boolean}  [pasteAsPlainText]  - Force plain-text paste
- * @property {boolean}  [pasteCleanHTML]    - Sanitise HTML on paste
+ * @property {string}   [placeholder]          - Placeholder text when editor is empty
+ * @property {number}   [height]               - Editor height in px (min)
+ * @property {number}   [minHeight]            - Minimum height in px
+ * @property {number}   [maxHeight]            - Maximum height in px (0 = unlimited)
+ * @property {boolean}  [focus]                - Auto-focus on init
+ * @property {boolean}  [resizable]            - Show resize handle
+ * @property {Array}    [toolbar]              - Toolbar button group config
+ * @property {boolean}  [useBootstrap]         - Use Bootstrap button classes on toolbar buttons
+ * @property {string}   [toolbarButtonClass]   - CSS classes for Bootstrap toolbar buttons
+ * @property {boolean}  [useFontAwesome]       - Use Font Awesome icons (default: true)
+ * @property {string}   [fontAwesomeClass]     - Font Awesome prefix class, e.g. 'fas' or 'fa-solid'
+ * @property {boolean}  [pasteAsPlainText]     - Force plain-text paste
+ * @property {boolean}  [pasteCleanHTML]       - Sanitise HTML on paste
  * @property {boolean}  [pasteStripAttributes] - Strip class/style/data-* from pasted HTML (default: false)
- * @property {boolean}  [allowImageUpload]  - Allow file upload in image dialog
- * @property {number}   [maxImageSize]      - Max upload size in MB
- * @property {number}   [tabSize]           - Spaces per tab in non-list context
- * @property {Function} [onChange]          - Callback on content change
- * @property {Function} [onFocus]           - Callback on focus
- * @property {Function} [onBlur]            - Callback on blur
- * @property {Function} [onImageUpload]     - Custom upload handler: (files) => void
- * @property {boolean}  [stickyToolbar]     - Stick the toolbar to the viewport top when scrolling
- * @property {number}   [stickyToolbarOffset] - Top offset in px for sticky toolbar (e.g. fixed nav height)
- * @property {string}   [theme]             - 'light' (default) | 'dark'
- * @property {boolean}  [codeHighlight]     - Auto-load Prism.js for syntax highlighting of code blocks
- * @property {string}   [codeHighlightCDN]  - CDN base URL for Prism assets (defaults to cdnjs)
- * @property {boolean}  [markdownPaste]     - Convert pasted Markdown text to HTML (default: true)
- * @property {boolean}  [readOnly]          - Start editor in read-only / non-editable mode
- * @property {boolean}  [spellcheck]        - Enable browser spellcheck in the editable area (default: true)
- * @property {string}   [direction]         - Text direction: 'ltr' (default) | 'rtl'
- * @property {string}   [toolbarOverflow]   - Toolbar overflow strategy: 'wrap' (default) | 'scroll'
- * @property {boolean}  [autoSave]          - Auto-save content to localStorage on change
- * @property {string}   [autoSaveKey]       - localStorage key used for auto-save (default: 'autumnnote-autosave')
- * @property {number}   [maxChars]          - Maximum character count (0 = unlimited). Shows warning in statusbar.
- * @property {number}   [maxWords]          - Maximum word count (0 = unlimited). Shows warning in statusbar.
- * @property {boolean}  [tableHeaderRow]    - Insert a header row (<thead><th>) when creating tables
- * @property {Function} [onPaste]           - Callback fired on every paste: ({ text, html }) => void
- * @property {Function} [onSelectionChange]   - Callback fired on cursor/selection change: (context) => void
- * @property {string[]}  [colorSwatches]       - Custom brand colour swatches prepended to the colour-picker palette
+ * @property {boolean}  [allowImageUpload]     - Allow file upload in image dialog
+ * @property {number}   [maxImageSize]         - Max upload size in MB
+ * @property {number}   [tabSize]              - Spaces per tab in non-list context
+ * @property {number}   [historyLimit]         - Maximum undo/redo history steps
+ * @property {string}   [defaultFontFamily]    - Default font family applied to the editable area on init
+ * @property {string}   [defaultFontSize]      - Default font size applied to the editable area on init (e.g. '14px')
+ * @property {string[]} [fontFamilies]         - Font families shown in the font-family toolbar dropdown
+ * @property {Function} [onChange]             - Callback on content change
+ * @property {Function} [onFocus]              - Callback on focus
+ * @property {Function} [onBlur]               - Callback on blur
+ * @property {Function} [onInit]               - Callback after the editor has initialised
+ * @property {Function} [onImageUpload]        - Custom upload handler: (files) => void
+ * @property {Function} [onImageError]         - Callback when an image upload error occurs
+ * @property {boolean}  [stickyToolbar]        - Stick the toolbar to the viewport top when scrolling
+ * @property {number}   [stickyToolbarOffset]  - Top offset in px for sticky toolbar (e.g. fixed nav height)
+ * @property {string}   [theme]                - 'light' (default) | 'dark'
+ * @property {boolean}  [codeHighlight]        - Auto-load Prism.js for syntax highlighting of code blocks
+ * @property {string}   [codeHighlightCDN]     - CDN base URL for Prism assets (defaults to cdnjs)
+ * @property {boolean}  [markdownPaste]        - Convert pasted Markdown text to HTML (default: true)
+ * @property {boolean}  [readOnly]             - Start editor in read-only / non-editable mode
+ * @property {boolean}  [spellcheck]           - Enable browser spellcheck in the editable area (default: true)
+ * @property {string}   [direction]            - Text direction: 'ltr' (default) | 'rtl'
+ * @property {string}   [toolbarOverflow]      - Toolbar overflow strategy: 'wrap' (default) | 'scroll'
+ * @property {boolean}  [autoSave]             - Auto-save content to localStorage on change
+ * @property {string}   [autoSaveKey]          - localStorage key used for auto-save (default: 'autumnnote-autosave')
+ * @property {number}   [maxChars]             - Maximum character count (0 = unlimited). Shows warning in statusbar.
+ * @property {number}   [maxWords]             - Maximum word count (0 = unlimited). Shows warning in statusbar.
+ * @property {boolean}  [tableHeaderRow]       - Insert a header row (<thead><th>) when creating tables
+ * @property {Function} [onPaste]              - Callback fired on every paste: ({ text, html }) => void
+ * @property {Function} [onSelectionChange]    - Callback fired on cursor/selection change: (context) => void
+ * @property {string[]} [colorSwatches]        - Custom brand colour swatches prepended to the colour-picker palette
  * @property {Function} [onDestroy]            - Callback fired when the editor is destroyed: (context) => void
  * @property {Function} [onCharLimitReached]   - Callback fired when the character limit is hit: (context) => void
  * @property {Function} [onWordLimitReached]   - Callback fired when the word limit is hit: (context) => void
- * @property {string}   [focusColor]            - Custom focus ring colour, e.g. '#f97316'. Overrides the default blue.
+ * @property {string}   [focusColor]           - Custom focus ring colour, e.g. '#f97316'. Overrides the default blue.
+ * @property {boolean}  [autoSaveRestore]      - Show a restore banner when a previously auto-saved draft exists
+ * @property {number}   [autoSaveRestoreTimeout] - Maximum age in days for a draft to be offered for restore (0 = no expiry)
+ * @property {Function} [onAutoSaveRestore]    - Callback fired after the user chooses to restore a draft
+ * @property {boolean}  [markdownShortcuts]    - Convert markdown syntax typed inline to HTML
+ * @property {boolean}  [bubbleToolbar]        - Show a mini floating toolbar above text selections
+ * @property {string[]} [bubbleToolbarItems]   - Button names for the bubble toolbar
+ * @property {object|null} [mention]            - @mention configuration (onSearch, minChars, ...)
+ * @property {string}   [lang]                 - Display language or partial locale object override
  */
 
-/** @type {AsnOptions} */
 export const defaultOptions = {
   placeholder: '',
   height: 200,