autumnnote 1.4.2 → 1.6.0

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 {
@@ -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', () => {

package/src/js/module/VideoResizer.js

@@ -111,10 +111,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 && 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;
   }
 
@@ -200,7 +200,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 && target.closest ? target.closest('.an-video-wrapper') : null;
         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(window, 'scroll', () => this._hide(), { passive: true }),
+      on(window, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -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(() => {

package/src/js/renderer.js

@@ -40,7 +40,7 @@ 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 });
@@ -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,

package/src/styles/autumnnote.scss

@@ -652,6 +652,31 @@
   letter-spacing: 0.02em;
 }
 
+// Color-strip variant for the cell shade button (mirrors .an-bubble-btn--color)
+.an-link-tooltip-btn--shade {
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 0 3px;
+  height: auto;
+
+  .an-bubble-btn-svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    svg { display: block; }
+  }
+
+  .an-link-tooltip-color-strip {
+    display: block;
+    width: 13px;
+    height: 3px;
+    border-radius: 1px;
+    pointer-events: none;
+    background: transparent;
+  }
+}
+
 // Active state for toggle buttons in tooltips (e.g. Select Cells)
 .an-link-tooltip-btn--active {
   background: rgba(#3b82f6, 0.12) !important;
@@ -726,6 +751,58 @@
   }
 }
 
+// =============================================================================
+// Cell shade popover
+
+.an-cell-shade-popover {
+  position: fixed;
+  z-index: 1200;
+  background: $an-bg;
+  border: 1px solid $an-border;
+  border-radius: 8px;
+  padding: 10px 10px 6px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 166px;
+
+  .an-size-popover-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: $an-muted;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+  }
+
+  .an-shade-no-color {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    font-size: 12px;
+    color: $an-muted;
+    background: transparent;
+    border: 1px solid $an-border;
+    border-radius: $an-radius-sm;
+    cursor: pointer;
+    font-family: inherit;
+
+    &:hover {
+      background: $an-bg-btn-hover;
+      color: $an-text;
+    }
+  }
+
+  .an-shade-color-input {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid $an-border;
+    border-radius: $an-radius-sm;
+    cursor: pointer;
+    background: transparent;
+  }
+}
+
 // =============================================================================
 // Codeview textarea
 // =============================================================================
@@ -819,8 +896,29 @@
   gap: 10px;
 }
 
+.an-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.an-dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: rgba($an-primary, 0.1);
+  color: $an-primary;
+
+  svg { display: block; stroke: currentColor; }
+}
+
 .an-dialog-title {
-  margin: 0 0 4px;
+  margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: $an-text;
@@ -871,6 +969,114 @@
   }
 }
 
+// =============================================================================
+// Find & Replace — floating panel
+// =============================================================================
+
+.an-fr-dialog {
+  // Override centered-modal defaults: floating panel, no backdrop
+  background: transparent;
+  pointer-events: none;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 56px 16px 0 0;
+
+  .an-fr-box {
+    pointer-events: auto;
+    width: 360px;
+    padding: 14px 16px 16px;
+    gap: 8px;
+  }
+}
+
+.an-fr-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+
+  .an-dialog-title { margin: 0; font-size: 14px; }
+}
+
+// Compact search bar: input + toggle buttons + counter in one row
+.an-fr-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .an-fr-input {
+    flex: 1;
+    min-width: 0;
+    padding: 6px 8px;
+    font-size: 13px;
+  }
+}
+
+// Replace row
+.an-fr-replace-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .an-fr-input {
+    flex: 1;
+    min-width: 0;
+    padding: 6px 8px;
+    font-size: 13px;
+  }
+
+  .an-fr-replace-btn {
+    flex-shrink: 0;
+    padding: 5px 10px;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+}
+
+// Icon buttons (Aa, ↑, ↓)
+.an-fr-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  border: 1px solid transparent;
+  border-radius: $an-radius-sm;
+  background: transparent;
+  color: $an-muted;
+  cursor: pointer;
+
+  svg { display: block; stroke: currentColor; }
+
+  &:hover {
+    background: $an-bg-btn-hover;
+    color: $an-text;
+    border-color: $an-border;
+  }
+
+  &.an-fr-icon-btn--active {
+    background: rgba($an-primary, 0.1);
+    color: $an-primary;
+    border-color: rgba($an-primary, 0.3);
+  }
+}
+
+.an-fr-counter {
+  font-size: 11px;
+  color: $an-muted;
+  white-space: nowrap;
+  min-width: 36px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+// =============================================================================
+
 .an-input {
   width: 100%;
   padding: 7px 10px;
@@ -1242,6 +1448,28 @@ $an-video-accent: #8b5cf6; // violet-500
   }
 }
 
+// Icon + title grouped together (used in emoji/icon/find dialogs)
+.an-dialog-title-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// Small icon variant for dialogs with title-row layout
+.an-dialog-icon--sm {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba($an-primary, 0.1);
+  color: $an-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg { display: block; stroke: currentColor; }
+}
+
 .an-icon-close {
   display: flex;
   align-items: center;
@@ -1759,6 +1987,20 @@ $an-video-accent: #8b5cf6; // violet-500
 
   .an-dialog-title { color: #cdd6f4; }
 
+  .an-dialog-icon,
+  .an-dialog-icon--sm {
+    background: rgba(#818cf8, 0.15);
+    color: #818cf8;
+  }
+
+  .an-fr-icon-btn {
+    color: #a6adc8;
+    &:hover { background: #313244; color: #cdd6f4; border-color: #45475a; }
+    &.an-fr-icon-btn--active { background: rgba(#818cf8, 0.15); color: #818cf8; border-color: rgba(#818cf8, 0.3); }
+  }
+
+  .an-fr-counter { color: #6c7086; }
+
   .an-label { color: #cdd6f4; }
 
   .an-input {
@@ -1794,12 +2036,23 @@ $an-video-accent: #8b5cf6; // violet-500
 
   .an-color-popup,
   .an-table-picker-popup,
-  .an-size-popover {
+  .an-size-popover,
+  .an-cell-shade-popover {
     background: #24273a;
     border-color: #3f3f5f;
     color: #cdd6f4;
   }
 
+  .an-cell-shade-popover .an-shade-no-color {
+    border-color: #3f3f5f;
+    color: #a6adc8;
+
+    &:hover {
+      background: #313244;
+      color: #cdd6f4;
+    }
+  }
+
   .an-link-tooltip-btn--active {
     background: rgba(#6366f1, 0.2) !important;
     color: #818cf8 !important;
@@ -1821,6 +2074,17 @@ $an-video-accent: #8b5cf6; // violet-500
     }
   }
 
+  // Color popup children
+  .an-color-custom {
+    border-top-color: #3f3f5f;
+    color: #cdd6f4;
+  }
+
+  .an-color-arrow:hover { border-left-color: #45475a; }
+
+  .an-table-label { color: #6c7086; }
+  .an-context-table-grid-panel { border-top-color: #3f3f5f; }
+
   .an-context-item { color: #cdd6f4; }
   .an-context-sep { background: #3f3f5f; }
 
@@ -1857,9 +2121,18 @@ $an-video-accent: #8b5cf6; // violet-500
   }
 
   .an-icon-cell {
-    color: #cdd6f4;
+    color: #a6adc8;
+
+    i { color: #cdd6f4; }
+
+    &:hover { background: #2a2a3e; border-color: #45475a; }
 
-    &:hover { background: #2a2a3e; }
+    &.active {
+      background: rgba(#818cf8, 0.15);
+      border-color: #818cf8;
+      color: #818cf8;
+      i { color: #818cf8; }
+    }
   }
 
   .an-icon-close {
@@ -1870,6 +2143,61 @@ $an-video-accent: #8b5cf6; // violet-500
       color: #cdd6f4;
     }
   }
+
+  // Emoji dialog
+  .an-emoji-box { background: #1e1e2e; border-color: #45475a; }
+
+  .an-emoji-cell {
+    color: inherit;
+    &:hover { background: #313244; }
+  }
+
+  .an-emoji-grid {
+    scrollbar-color: #45475a transparent;
+  }
+
+  // Icon dialog
+  .an-icon-box { background: #1e1e2e; border-color: #45475a; }
+
+  .an-icon-grid { background: #181825; border-color: #45475a; }
+
+  .an-icon-options {
+    background: #181825;
+    border-color: #45475a;
+  }
+
+  .an-icon-preview {
+    background: #181825;
+    border-color: #45475a;
+    color: #cdd6f4;
+
+    .an-icon-preview-empty { color: #6c7086; }
+  }
+
+  .an-icon-option-select {
+    background: #313244;
+    border-color: #45475a;
+    color: #cdd6f4;
+  }
+
+  .an-icon-empty { color: #6c7086; }
+
+  // Bubble toolbar color picker
+  .an-bubble-color-picker {
+    background: #24273a;
+    border-color: #3f3f5f;
+
+    .an-context-color-custom {
+      border-color: #3f3f5f;
+      color: #a6adc8;
+    }
+  }
+
+  // Table tooltip (extends link-tooltip dark rules)
+  .an-table-tooltip { background: #24273a; border-color: #3f3f5f; }
+
+  // Find & Replace floating panel box
+  .an-fr-box { background: #1e1e2e; border-color: #45475a; }
 }