autumnnote 1.0.0 → 1.0.3

package/src/js/module/Toolbar.js

@@ -5,6 +5,12 @@
 
 import { createElement, on } from '../core/dom.js';
 
+// Module-level cache for FontAwesome detection.
+// Evaluated once per page load so all Toolbar instances on the same page agree
+// on whether the HOST PAGE included FA — regardless of whether IconDialog later
+// auto-injects its own FA <link> for the icon-picker glyph rendering.
+let _faPageLevelReady = null;
+
 export class Toolbar {
   /**
    * @param {import('../Context.js').Context} context
@@ -16,6 +22,8 @@ export class Toolbar {
     this.el = null;
     /** @type {Array<() => void>} disposers */
     this._disposers = [];
+    /** @type {Array<() => void>} closers for all open color picker popups */
+    this._colorPickerClosers = [];
   }
 
   // ---------------------------------------------------------------------------
@@ -253,9 +261,36 @@ export class Toolbar {
 
     // ---- State ----
     let isOpen = false;
+    /** @type {Range|null} saved selection range before popup opens */
+    let savedRange = null;
+
+    const saveSelection = () => {
+      const sel = window.getSelection();
+      savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
+    };
+
+    const restoreSelection = () => {
+      if (!savedRange) return;
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(savedRange);
+      }
+    };
 
     const openPopup = () => {
+      // Close any other open color picker before opening this one
+      this._colorPickerClosers.forEach((fn) => { if (fn !== closePopup) fn(); });
+      saveSelection();
       isOpen = true;
+      // Use fixed positioning so the popup escapes any overflow-clipping ancestor
+      // (notably toolbar scroll mode, where overflow-x:auto coerces overflow-y)
+      const rect = arrowBtn.getBoundingClientRect();
+      const popupMinW = 184;
+      let left = rect.left;
+      if (left + popupMinW > window.innerWidth) left = rect.right - popupMinW;
+      popup.style.top  = `${rect.bottom + 4}px`;
+      popup.style.left = `${Math.max(4, left)}px`;
       popup.style.display = 'block';
       arrowBtn.setAttribute('aria-expanded', 'true');
     };
@@ -263,6 +298,8 @@ export class Toolbar {
     const closePopup = () => {
       isOpen = false;
       popup.style.display = 'none';
+      popup.style.top  = '';
+      popup.style.left = '';
       arrowBtn.setAttribute('aria-expanded', 'false');
     };
 
@@ -270,7 +307,7 @@ export class Toolbar {
       currentColor = color;
       strip.style.background = color;
       colorInput.value = color;
-      this.context.invoke('editor.focus');
+      restoreSelection();
       def.action(this.context, color);
       this.context.invoke('editor.afterCommand');
       closePopup();
@@ -278,17 +315,27 @@ export class Toolbar {
 
     const d1 = on(applyBtn, 'click', (e) => {
       e.preventDefault();
-      this.context.invoke('editor.focus');
+      restoreSelection();
       def.action(this.context, currentColor);
       this.context.invoke('editor.afterCommand');
     });
 
-    const d2 = on(arrowBtn, 'click', (e) => {
+    const d2 = on(arrowBtn, 'mousedown', (e) => {
+      // Prevent editor blur so selection is preserved when the popup opens
+      e.preventDefault();
+    });
+
+    const d2b = on(arrowBtn, 'click', (e) => {
       e.stopPropagation();
       if (isOpen) closePopup(); else openPopup();
     });
 
-    const d3 = on(swatches, 'click', (e) => {
+    const d3 = on(swatches, 'mousedown', (e) => {
+      // Prevent blur before the click handler fires
+      e.preventDefault();
+    });
+
+    const d3b = on(swatches, 'click', (e) => {
       const sw = e.target.closest('.an-color-swatch');
       if (sw) applyColor(sw.dataset.color);
     });
@@ -298,16 +345,38 @@ export class Toolbar {
     });
 
     const d5 = on(document, 'click', (e) => {
-      if (isOpen && !wrap.contains(e.target)) closePopup();
+      // popup is in document.body, not inside wrap — check both
+      if (isOpen && !wrap.contains(e.target) && !popup.contains(e.target)) closePopup();
     });
 
     const d6 = on(popup, 'click', (e) => e.stopPropagation());
 
-    this._disposers.push(d1, d2, d3, d4, d5, d6);
+    // Close the popup when the viewport scrolls or resizes so the fixed-position
+    // 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 });
+
+    this._disposers.push(d1, d2, d2b, d3, d3b, d4, d5, d6,
+      () => document.removeEventListener('scroll', onScrollResize, { capture: true }),
+      () => window.removeEventListener('resize',   onScrollResize),
+      // Remove popup from body on editor destroy
+      () => { if (popup.parentNode) popup.parentNode.removeChild(popup); },
+    );
+
+    // Register this popup's closer so other color pickers can close it
+    this._colorPickerClosers.push(closePopup);
+    this._disposers.push(() => {
+      const idx = this._colorPickerClosers.indexOf(closePopup);
+      if (idx !== -1) this._colorPickerClosers.splice(idx, 1);
+    });
 
+    // Append popup to document.body so it escapes all overflow-clipping and
+    // contain:layout ancestors (contain:layout makes the container a fixed-pos
+    // containing block per the CSS Contain spec, breaking viewport coordinates).
     wrap.appendChild(applyBtn);
     wrap.appendChild(arrowBtn);
-    wrap.appendChild(popup);
+    document.body.appendChild(popup);
     return wrap;
   }
 
@@ -329,22 +398,27 @@ export class Toolbar {
       'aria-label': def.tooltip || def.name,
     });
 
-    // Blank "placeholder" option
+    // Blank "placeholder" option (non-selectable header)
     const placeholderText = def.placeholder || 'Font';
-    const placeholder = createElement('option', { value: '' }, [placeholderText]);
+    const placeholder = createElement('option', { value: '', disabled: '', hidden: '' }, [placeholderText]);
     select.appendChild(placeholder);
 
     items.forEach((item) => {
-      const value = (typeof item === 'object') ? item.value : item;
-      const label = (typeof item === 'object') ? item.label : item;
-      const opt = createElement('option', { value }, [label]);
-      if (def.name === 'fontFamily') opt.style.fontFamily = value;
+      const value    = (typeof item === 'object') ? item.value    : item;
+      const label    = (typeof item === 'object') ? item.label    : item;
+      const isHeader = (typeof item === 'object') && !!item.disabled;
+      const attrs    = { value };
+      if (isHeader) attrs.disabled = '';
+      const opt = createElement('option', attrs, [label]);
+      // Only apply fontFamily face preview on real (non-header) entries
+      if (def.name === 'fontFamily' && !isHeader) opt.style.fontFamily = value;
       select.appendChild(opt);
     });
 
     const disposer = on(select, 'change', (e) => {
       const value = e.target.value;
-      if (!value) return;
+      const selectedOpt = e.target.options[e.target.selectedIndex];
+      if (!value || selectedOpt.disabled) return;
       this.context.invoke('editor.focus');
       def.action(this.context, value);
       this.context.invoke('editor.afterCommand');
@@ -502,9 +576,21 @@ export class Toolbar {
 
   _detectFontAwesome() {
     if (!this.options.useFontAwesome) return false;
-    if (document.querySelector('.fa, .fas, .far, .fal, .fab, .fa-solid')) return true;
-    const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((l) => l.href || '').join(' ');
-    return /fontawesome|font-awesome|use\.fontawesome|all\.css/.test(links);
+    // Return cached result when available. This ensures that a later-initialised
+    // toolbar sees the same detection state as the first one — even if IconDialog
+    // has since injected its own FA <link> into <head> for the icon-picker UI.
+    if (_faPageLevelReady !== null) return _faPageLevelReady;
+    if (document.querySelector('.fa, .fas, .far, .fal, .fab, .fa-solid')) {
+      _faPageLevelReady = true;
+      return true;
+    }
+    // Exclude the editor-self-injected link (id='an-fontawesome-css') so it doesn't
+    // 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(' ');
+    _faPageLevelReady = /fontawesome|font-awesome|use\.fontawesome|all\.css/.test(links);
+    return _faPageLevelReady;
   }
 
   // ---------------------------------------------------------------------------

package/src/js/module/VideoDialog.js

@@ -219,7 +219,7 @@ export class VideoDialog {
     if (info && (info.type === 'YouTube' || info.type === 'YouTube Shorts' || info.type === 'Vimeo')) {
       const iframeTitle = `${info.type} video player`;
       return (
-        `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+        `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
         `<iframe src="${info.embedUrl}" width="${width}" height="${height}" ` +
         `title="${iframeTitle}" ` +
         `frameborder="0" allowfullscreen ` +
@@ -233,7 +233,7 @@ export class VideoDialog {
     if (info && info.type === 'Direct video') {
       const src = info.embedUrl.replace(/"/g, '%22');
       return (
-        `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+        `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
         `<video src="${src}" width="${width}" height="${height}" controls ` +
         `style="display:block;max-width:100%"></video>` +
         `<div class="an-video-shield"></div>` +
@@ -253,7 +253,7 @@ export class VideoDialog {
 
     const escapedSrc = safeSrc.replace(/"/g, '%22');
     return (
-      `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+      `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
       `<video src="${escapedSrc}" width="${width}" height="${height}" controls ` +
       `style="display:block;max-width:100%"></video>` +
       `<div class="an-video-shield"></div>` +

package/src/js/module/VideoResizer.js

@@ -21,11 +21,14 @@ export class VideoResizer {
     this._activeWrapper = null;
     this._overlay = null;
     this._disposers = [];
+    this._positionRaf = null;
   }
 
   initialize() {
     this._overlay = this._buildOverlay();
-    document.body.appendChild(this._overlay);
+    const container = this.context.layoutInfo.editable.closest('.an-container') || document.body;
+    container.appendChild(this._overlay);
+    this._container = container;
 
     const editable = this.context.layoutInfo.editable;
 
@@ -51,6 +54,10 @@ export class VideoResizer {
       this._dragDisposers.forEach((d) => d());
       this._dragDisposers = null;
     }
+    if (this._positionRaf) {
+      cancelAnimationFrame(this._positionRaf);
+      this._positionRaf = null;
+    }
     this._deselect();
     if (this._overlay && this._overlay.parentNode) {
       this._overlay.parentNode.removeChild(this._overlay);
@@ -152,10 +159,22 @@ export class VideoResizer {
   }
 
   _updateOverlayPosition() {
+    if (this._positionRaf) cancelAnimationFrame(this._positionRaf);
+    this._positionRaf = requestAnimationFrame(() => {
+      this._positionRaf = null;
+      this._updateOverlayPositionNow();
+    });
+  }
+
+  _updateOverlayPositionNow() {
     if (!this._activeWrapper || !this._overlay) return;
+    const offsetParent = this._overlay.offsetParent || this._container;
+    const containerRect = offsetParent.getBoundingClientRect();
     const rect = this._activeWrapper.getBoundingClientRect();
-    this._overlay.style.left   = `${rect.left}px`;
-    this._overlay.style.top    = `${rect.top}px`;
+    const left = rect.left - containerRect.left + offsetParent.scrollLeft;
+    const top = rect.top - containerRect.top + offsetParent.scrollTop;
+    this._overlay.style.left   = `${left}px`;
+    this._overlay.style.top    = `${top}px`;
     this._overlay.style.width  = `${rect.width}px`;
     this._overlay.style.height = `${rect.height}px`;
   }

package/src/js/module/VideoTooltip.js

@@ -10,6 +10,7 @@ const ICONS = {
   alignCenter: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="4" width="10" height="8" rx="1"/><line x1="3" y1="16" x2="21" y2="16"/><line x1="6" y1="20" x2="18" y2="20"/></svg>`,
   originalSize:`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`,
   deleteVideo: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
+  preview:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
 };
 
 const SHOW_DELAY = 100;
@@ -24,6 +25,8 @@ export class VideoTooltip {
     this._showTimer = null;
     this._hideTimer = null;
     this._disposers = [];
+    this._previewMode = false;
+    this._previewClickOff = null;
   }
 
   initialize() {
@@ -61,6 +64,7 @@ export class VideoTooltip {
   }
 
   destroy() {
+    if (this._previewMode) this._exitPreview();
     this._clearTimers();
     this._disposers.forEach((d) => d());
     this._disposers = [];
@@ -105,6 +109,11 @@ export class VideoTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
+    this._previewBtn = this._makeBtn(ICONS.preview, 'Preview Video', () => this._togglePreview());
+    el.appendChild(this._previewBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
     this._deleteBtn = this._makeBtn(ICONS.deleteVideo, 'Delete Video', () => this._delete(), true);
 
     el.appendChild(this._deleteBtn);
@@ -155,6 +164,8 @@ export class VideoTooltip {
   }
 
   _scheduleHide() {
+    // Keep tooltip alive while preview mode is active
+    if (this._previewMode) return;
     clearTimeout(this._showTimer);
     this._showTimer = null;
     if (this._hideTimer) return;
@@ -167,6 +178,7 @@ export class VideoTooltip {
   }
 
   _hide() {
+    if (this._previewMode) this._exitPreview();
     this._el.style.display = 'none';
     this._activeWrapper = null;
     this._clearTimers();
@@ -249,4 +261,65 @@ export class VideoTooltip {
     if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
     this.context.invoke('editor.afterCommand');
   }
+
+  // ---------------------------------------------------------------------------
+  // Preview mode — temporarily disables the shield so the video is interactive
+  // ---------------------------------------------------------------------------
+
+  _togglePreview() {
+    if (this._previewMode) {
+      this._exitPreview();
+    } else {
+      this._enterPreview();
+    }
+  }
+
+  _enterPreview() {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+    this._previewMode = true;
+
+    // Hide the shield so the iframe / video receives pointer events directly
+    const shield = wrapper.querySelector('.an-video-shield');
+    if (shield) shield.style.display = 'none';
+
+    // Hide the resize overlay — it would block interaction with the embed
+    this.context.invoke('videoResizer.deselect');
+
+    // Visual feedback: button turns primary-coloured
+    this._previewBtn.classList.add('an-link-tooltip-btn--copied');
+    this._previewBtn.title = 'Exit Preview';
+
+    // Exit preview on mousedown outside the wrapper.
+    // Using 'mousedown' (not 'click') so clicks inside an iframe
+    // — which never bubble to the outer document — don't accidentally
+    // leave preview mode stuck. For <video> elements, mousedown on the
+    // video is inside the wrapper so contains() returns true → no exit.
+    this._previewClickOff = (e) => {
+      if (!wrapper.contains(e.target) && !this._el.contains(e.target)) {
+        this._exitPreview();
+      }
+    };
+    document.addEventListener('mousedown', this._previewClickOff, true);
+  }
+
+  _exitPreview() {
+    this._previewMode = false;
+
+    const wrapper = this._activeWrapper;
+    if (wrapper) {
+      // Restore the shield
+      const shield = wrapper.querySelector('.an-video-shield');
+      if (shield) shield.style.display = '';
+    }
+
+    // Reset button appearance
+    this._previewBtn.classList.remove('an-link-tooltip-btn--copied');
+    this._previewBtn.title = 'Preview Video';
+
+    if (this._previewClickOff) {
+      document.removeEventListener('mousedown', this._previewClickOff, true);
+      this._previewClickOff = null;
+    }
+  }
 }

package/src/js/renderer.js

@@ -99,6 +99,11 @@ export function renderLayout(targetEl, options) {
     }
   }
 
+  // Custom focus ring colour
+  if (options.focusColor) {
+    container.style.setProperty('--an-focus-color', options.focusColor);
+  }
+
   // Hide the original element; keep it in DOM for form submission
   targetEl.style.display = 'none';
   targetEl.insertAdjacentElement('afterend', container);

package/src/js/settings.js

@@ -45,6 +45,7 @@ import { defaultToolbar } from './module/Buttons.js';
  * @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.
  */
 
 /** @type {AsnOptions} */
@@ -131,4 +132,7 @@ export const defaultOptions = {
   onCharLimitReached: null,
   // Callback fired when the word limit is reached: function(context)
   onWordLimitReached: null,
+  // Custom focus ring colour — overrides the default blue when set.
+  // Accepts any valid CSS colour string, e.g. '#f97316', 'hsl(25,90%,55%)'.
+  focusColor: null,
 };

package/src/styles/autumnnote.scss

@@ -12,13 +12,13 @@
 .an-container {
   display: flex;
   flex-direction: column;
+  position: relative;
   border: 1px solid $an-border;
   border-radius: $an-radius;
   font-family: $an-font-family;
   font-size: $an-font-size;
   box-sizing: border-box;
   background: $an-bg;
-  overflow: hidden;
   // Prevent the container from participating in ancestor layout recalculations.
   // This limits reflow thrashing when editing large documents.
   contain: layout;
@@ -30,14 +30,27 @@
   }
 
   &.an-focused {
-    border-color: $an-primary;
-    box-shadow: 0 0 0 3px rgba($an-primary, 0.15);
+    border-color: var(--an-focus-color, #{$an-primary});
+    // color-mix() blends the focus colour with transparent for the glow ring.
+    // Falls back gracefully to the default blue glow in older browsers.
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-focus-color, #{$an-primary}) 18%, transparent);
   }
 
   &.an-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-    user-select: none;
+    // Hide toolbar only — read-only view has no editing controls.
+    .an-toolbar {
+      display: none;
+    }
+
+    // Allow the user to select and copy text but block actual editing.
+    // Do NOT set pointer-events:none or user-select:none on the container —
+    // that would prevent text selection inside the editable area.
+    .an-editable {
+      cursor: text;
+      user-select: text;
+      // Subtle visual cue that the area is read-only.
+      background: #fafafa;
+    }
   }
 
   &.an-fullscreen {
@@ -234,9 +247,9 @@
 
 // Swatch popup panel
 .an-color-popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
+  position: fixed;
+  // top / left are set dynamically by JS (getBoundingClientRect) so the popup
+  // escapes overflow:hidden / overflow:auto ancestors (toolbar scroll mode, etc.)
   z-index: 1100;
   background: $an-bg;
   border: 1px solid $an-border;
@@ -377,19 +390,25 @@
 .an-editable {
   flex: 1;
   padding: $an-editable-pad;
-  min-height: 200px;
+  min-height: 0;
   outline: none;
   line-height: $an-line-height;
   color: $an-text;
   overflow-y: auto;
   word-break: break-word;
 
-  // Placeholder
-  &.an-placeholder::before {
+  // Placeholder — only shown when not focused.
+  // float:left is the standard contenteditable placeholder technique (used by
+  // Quill.js): the pseudo-element is out of normal flow so it never shifts the
+  // cursor, yet it renders visually at the start of the empty editing area.
+  // Avoid position:absolute here — without position:relative on the parent it
+  // would be positioned relative to .an-container (contain:layout) and overlap
+  // the toolbar.
+  &.an-placeholder:not(:focus)::before {
     content: attr(data-placeholder);
     color: $an-muted;
     pointer-events: none;
-    position: absolute;
+    float: left;
   }
 
   // Content styles
@@ -435,7 +454,7 @@
 
   .an-video-wrapper {
     position: relative;
-    display: inline-block;
+    display: block;
     max-width: 100%;
     margin: 4px 0;
 
@@ -667,6 +686,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-shrink: 0;
   height: $an-statusbar-h;
   padding: 0 8px;
   background: $an-statusbar-bg;
@@ -919,7 +939,7 @@
 // ---------------------------------------------------------------------------
 
 .an-image-resizer {
-  position: fixed;
+  position: absolute;
   z-index: 10000;
   box-sizing: border-box;
   border: 2px solid $an-primary;
@@ -956,7 +976,7 @@
 $an-video-accent: #8b5cf6; // violet-500
 
 .an-video-resizer {
-  position: fixed;
+  position: absolute;
   z-index: 10000;
   box-sizing: border-box;
   border: 2px solid $an-video-accent;
@@ -986,11 +1006,10 @@ $an-video-accent: #8b5cf6; // violet-500
   .an-resize-w  { top: calc(50% - 4px);  left: -4px;             cursor: w-resize;  }
 }
 
-// Selected video wrapper highlight (applied to .an-video-wrapper)
-.an-video-selected {
-  outline: 2px solid $an-video-accent;
-  outline-offset: 1px;
-}
+// .an-video-selected is applied by VideoResizer for JS state tracking.
+// Visual selection is handled entirely by the .an-video-resizer overlay,
+// so no CSS outline is needed here (two visible frames would appear otherwise).
+.an-video-selected {}
 
 // ---------------------------------------------------------------------------
 // Icon dialog
@@ -1082,7 +1101,7 @@ $an-video-accent: #8b5cf6; // violet-500
   display: grid;
   grid-template-columns: repeat(auto-fill, 56px);
   gap: 3px;
-  max-height: 256px;
+  height: 256px;
   overflow-y: auto;
   margin-bottom: 10px;
   padding: 4px;
@@ -1244,7 +1263,7 @@ $an-video-accent: #8b5cf6; // violet-500
   display: grid;
   grid-template-columns: repeat(auto-fill, 42px);
   gap: 2px;
-  max-height: 288px;
+  height: 288px;
   overflow-y: auto;
   margin-bottom: 10px;
   padding: 4px;
@@ -1572,6 +1591,11 @@ $an-video-accent: #8b5cf6; // violet-500
   .an-table-cell {
     background: #24273a;
     border-color: #3f3f5f;
+
+    &.active {
+      background: rgba(99, 102, 241, 0.3);
+      border-color: #6366f1;
+    }
   }
 
   .an-context-item { color: #cdd6f4; }
@@ -1670,25 +1694,31 @@ $an-video-accent: #8b5cf6; // violet-500
 .an-editable {
   ul.an-checklist {
     list-style: none;
-    padding-left: 0.5em;
+    padding-left: 0;
     margin: 0.5em 0;
 
     li {
-      display: flex;
-      align-items: baseline;
-      gap: 6px;
-      padding: 2px 0;
+      // Use padding-left + absolute checkbox so text is a normal inline flow
+      // (not an anonymous flex item). This ensures font-size, line-height and
+      // all inline formats are identical to regular paragraph text.
+      position: relative;
+      padding-left: 22px;
+      padding-top: 1px;
+      padding-bottom: 1px;
+      min-height: 1.4em;
       line-height: inherit;
+      font-size: inherit;
+      font-family: inherit;
 
       input[type='checkbox'] {
-        flex-shrink: 0;
+        position: absolute;
+        left: 0;
+        top: 0.25em;
         width: 14px;
         height: 14px;
         margin: 0;
         cursor: pointer;
         accent-color: $an-primary;
-        position: relative;
-        top: 2px;
       }
 
       // Checked item: dim + strike-through the text node

package/types/index.d.ts

@@ -43,7 +43,7 @@ export interface AsnOptions {
   /** Number of spaces inserted when Tab is pressed (outside a list). */
   tabSize?: number;
   /** Callback on content change. */
-  onChange?: (context: Context) => void;
+  onChange?: (html: string) => void;
   /** Callback on editor focus. */
   onFocus?: (context: Context) => void;
   /** Callback fired on editor blur. */
@@ -59,9 +59,9 @@ export interface AsnOptions {
   /** Callback fired when the word limit is reached. */
   onWordLimitReached?: (context: Context) => void;
   /** Custom image upload handler. */
-  onImageUpload?: (files: FileList) => void;
+  onImageUpload?: (files: File[]) => void;
   /** Callback when an image upload error occurs. */
-  onImageError?: (error: Error) => void;
+  onImageError?: (error: { file?: File; message: string; error?: unknown }) => void;
   /** Stick the toolbar to the viewport top when scrolling. */
   stickyToolbar?: boolean;
   /** Top offset in px for sticky toolbar (e.g. height of a fixed nav bar). */
@@ -101,7 +101,7 @@ export interface AsnOptions {
   /** Insert a header row (<thead>) when creating new tables. */
   tableHeaderRow?: boolean;
   /** Callback fired after every paste event. */
-  onPaste?: (data: { text: string; html: string }) => void;
+  onPaste?: (data: { text: string; html: string | null }) => void;
   /** Additional color swatches shown at the top of the color picker. */
   colorSwatches?: string[];
 }