autumnnote 1.15.0 → 1.16.0

package/src/js/module/MarkdownShortcuts.js

@@ -167,13 +167,13 @@ export class MarkdownShortcuts {
 
   _convertToChecklist() {
     this._selectLineAndDelete();
-    this.context.invoke('editor.checklist');
+    this.context.invoke('editor.toggleChecklist');
     this.context.triggerEvent('change', this.context.getHTML());
   }
 
   _convertToHr() {
     this._selectLineAndDelete();
-    this.context.invoke('editor.insertHR');
+    this.context.invoke('editor.insertHr');
     this.context.triggerEvent('change', this.context.getHTML());
   }
 

package/src/js/module/SlashMenu.js

@@ -0,0 +1,376 @@
+/**
+ * SlashMenu.js — Notion-style "/" command palette for quick block insertion.
+ *
+ * Typing "/" as the very first character of an otherwise-empty block opens a
+ * filterable list of quick-insert commands (headings, lists, table, image, …).
+ * Arrow keys navigate, Enter/Tab selects, Escape or deleting back past the
+ * "/" closes it. Disabled via `slashMenu: false`.
+ *
+ * Positioning follows the same synchronous-caret-rect technique as Mention.js:
+ * getBoundingClientRect() on a zero-width Range over the trigger character is
+ * reliable while the triggering DOM event is still live, but often returns an
+ * empty rect once deferred into a callback — so the rect is captured eagerly
+ * in `_onInput`, not lazily when the menu is rendered.
+ */
+
+import { on } from '../core/dom.js';
+
+export class SlashMenu {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    this._disposers = [];
+
+    /** @type {HTMLElement|null} */
+    this._menu = null;
+    /** @type {Array<{id: string, label: string, keywords: string, run: () => void}>} */
+    this._filtered = [];
+    this._activeIndex = -1;
+    this._open = false;
+    this._query = '';
+    /** @type {Text|null} */
+    this._textNode = null;
+    this._triggerOffset = 0;
+    /** @type {DOMRect|null} */
+    this._caretRect = null;
+  }
+
+  initialize() {
+    if (this.options.slashMenu === false) return this;
+    const editable = this.context.layoutInfo.editable;
+    const d1 = on(editable, 'input', () => this._onInput());
+    const d2 = on(editable, 'keydown', (e) => this._onKeydown(e));
+    const d3 = on(document, 'click', (e) => this._onDocClick(e));
+    this._disposers.push(d1, d2, d3);
+    return this;
+  }
+
+  destroy() {
+    this._menu?.remove();
+    this._menu = null;
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+  }
+
+  // ---------------------------------------------------------------------------
+  // Command list
+  // ---------------------------------------------------------------------------
+
+  _commands() {
+    const L = this.context.locale.slashMenu;
+    const ctx = this.context;
+    const builtIns = [
+      { id: 'h1', label: L.heading1, keywords: 'h1 heading title', run: () => ctx.invoke('editor.formatBlock', 'h1') },
+      { id: 'h2', label: L.heading2, keywords: 'h2 heading subtitle', run: () => ctx.invoke('editor.formatBlock', 'h2') },
+      { id: 'h3', label: L.heading3, keywords: 'h3 heading', run: () => ctx.invoke('editor.formatBlock', 'h3') },
+      { id: 'ul', label: L.bulletList, keywords: 'ul bullet list unordered', run: () => ctx.invoke('editor.insertUL') },
+      { id: 'ol', label: L.numberedList, keywords: 'ol numbered list ordered', run: () => ctx.invoke('editor.insertOL') },
+      { id: 'checklist', label: L.checklist, keywords: 'checklist todo checkbox task', run: () => ctx.invoke('editor.toggleChecklist') },
+      { id: 'quote', label: L.blockquote, keywords: 'quote blockquote', run: () => ctx.invoke('editor.formatBlock', 'blockquote') },
+      { id: 'code', label: L.codeBlock, keywords: 'code pre block', run: () => ctx.invoke('editor.formatBlock', 'pre') },
+      { id: 'hr', label: L.horizontalRule, keywords: 'hr divider rule line', run: () => ctx.invoke('editor.insertHr') },
+      { id: 'table', label: L.table, keywords: 'table grid', run: () => ctx.invoke('editor.insertTable', 3, 3) },
+      { id: 'image', label: L.image, keywords: 'image picture photo upload', run: () => ctx.invoke('imageDialog.show') },
+    ];
+    const custom = (this.options.slashCommands || []).map((command) => ({
+      id: command.id,
+      label: command.label || command.id,
+      keywords: command.keywords || '',
+      run: () => command.run(ctx),
+    }));
+    return [...builtIns, ...custom];
+  }
+
+  refresh() {
+    if (this._open) this._filterAndRender();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Menu DOM
+  // ---------------------------------------------------------------------------
+
+  _buildMenu() {
+    const el = document.createElement('div');
+    el.className = 'an-slash-menu';
+    el.setAttribute('role', 'listbox');
+    el.style.display = 'none';
+
+    el.addEventListener('mousedown', (e) => e.preventDefault());
+    el.addEventListener('click', (e) => {
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-slash-menu-item'));
+      if (item) this._select(+item.dataset.index);
+    });
+    el.addEventListener('mousemove', (e) => {
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-slash-menu-item'));
+      if (item) this._highlight(+item.dataset.index);
+    });
+
+    document.body.appendChild(el);
+    this._menu = el;
+    return el;
+  }
+
+  _renderItems() {
+    if (!this._menu) this._buildMenu();
+    const menu = this._menu;
+    const L = this.context.locale.slashMenu;
+
+    if (this._filtered.length === 0) {
+      menu.innerHTML = '';
+      const empty = document.createElement('div');
+      empty.className = 'an-slash-menu-empty';
+      empty.textContent = L.noResults;
+      menu.appendChild(empty);
+      this._activeIndex = -1;
+      return;
+    }
+
+    const frag = document.createDocumentFragment();
+    this._filtered.forEach((item, i) => {
+      const row = document.createElement('div');
+      row.className = 'an-slash-menu-item';
+      row.setAttribute('role', 'option');
+      row.id = `an-slash-option-${item.id}`;
+      row.dataset.index = String(i);
+      row.textContent = item.label;
+      frag.appendChild(row);
+    });
+    menu.innerHTML = '';
+    menu.appendChild(frag);
+    this._highlight(0);
+  }
+
+  _highlight(index) {
+    if (!this._menu) return;
+    this._menu.querySelectorAll('.an-slash-menu-item').forEach((el, i) => {
+      const active = i === index;
+      el.classList.toggle('an-slash-menu-active', active);
+      el.setAttribute('aria-selected', String(active));
+      if (active) this._menu.setAttribute('aria-activedescendant', el.id);
+    });
+    this._activeIndex = index;
+  }
+
+  _position() {
+    const menu = this._menu;
+    const rect = this._caretRect;
+    if (!menu || !rect || rect.height === 0) return;
+
+    menu.style.visibility = 'hidden';
+    menu.style.display = 'block';
+    const mh = menu.offsetHeight;
+    const mw = menu.offsetWidth;
+
+    let top = rect.bottom + 4;
+    let left = rect.left;
+    if (rect.bottom + mh + 8 > globalThis.innerHeight) {
+      top = rect.top - mh - 4;
+    }
+    left = Math.max(8, Math.min(left, globalThis.innerWidth - mw - 8));
+
+    menu.style.top = `${top}px`;
+    menu.style.left = `${left}px`;
+    menu.style.visibility = '';
+  }
+
+  _open_() {
+    this._open = true;
+    this._filterAndRender();
+    this._position();
+  }
+
+  _close() {
+    if (this._menu) this._menu.style.display = 'none';
+    this._open = false;
+    this._filtered = [];
+    this._activeIndex = -1;
+    this._menu?.removeAttribute('aria-activedescendant');
+    this._textNode = null;
+    this._caretRect = null;
+    this._query = '';
+  }
+
+  // ---------------------------------------------------------------------------
+  // Trigger detection
+  // ---------------------------------------------------------------------------
+
+  _isBlock(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) return false;
+    const display = globalThis.getComputedStyle(node).display;
+    return display === 'block' || display === 'list-item' || display === 'table-cell';
+  }
+
+  /**
+   * Detects a "/" trigger at the caret, requiring it to be the only content
+   * typed so far in its block (i.e. the block's text is exactly "/" + query,
+   * nothing before or after). This deliberately avoids firing mid-sentence
+   * (e.g. "10/20", "and/or").
+   * @returns {{ query: string, textNode: Text, triggerOffset: number } | null}
+   */
+  _getTriggerContext() {
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return null;
+    const range = sel.getRangeAt(0);
+    if (!range.collapsed) return null;
+
+    const editable = this.context.layoutInfo.editable;
+    if (!editable.contains(range.startContainer)) return null;
+    if (range.startContainer.nodeType !== Node.TEXT_NODE) return null;
+
+    let block = range.startContainer.parentNode;
+    while (block && block !== editable && !this._isBlock(block)) block = block.parentNode;
+    if (!block || block === editable) return null;
+
+    const fullText = block.textContent || '';
+    const beforeRange = document.createRange();
+    beforeRange.setStart(block, 0);
+    beforeRange.setEnd(range.startContainer, range.startOffset);
+    const before = beforeRange.toString();
+
+    const m = /^\/(\S*)$/.exec(before);
+    if (!m) return null;
+    if (fullText.length > before.length) return null; // content after the caret
+
+    return {
+      query: m[1],
+      textNode: /** @type {Text} */ (range.startContainer),
+      triggerOffset: range.startOffset - m[0].length,
+    };
+  }
+
+  /**
+   * Captures the caret rect synchronously — see file header for why this
+   * can't be deferred to a later tick.
+   */
+  _captureCaretRect(textNode, triggerOffset) {
+    try {
+      const r = document.createRange();
+      const end = Math.min(triggerOffset + 1, textNode.textContent.length);
+      r.setStart(textNode, triggerOffset);
+      r.setEnd(textNode, end);
+      const candidate = r.getBoundingClientRect();
+      if (candidate.height > 0) return candidate;
+    } catch (_) { void _; }
+
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return null;
+    const rects = sel.getRangeAt(0).getClientRects();
+    return rects.length > 0 ? rects[rects.length - 1] : null;
+  }
+
+  _filterAndRender() {
+    const q = this._query.toLowerCase();
+    this._filtered = q
+      ? this._commands().filter((c) => c.keywords.includes(q) || c.label.toLowerCase().includes(q))
+      : this._commands();
+    this._renderItems();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Events
+  // ---------------------------------------------------------------------------
+
+  _onInput() {
+    const ctx = this._getTriggerContext();
+    if (!ctx) {
+      if (this._open) this._close();
+      return;
+    }
+
+    this._textNode = ctx.textNode;
+    this._triggerOffset = ctx.triggerOffset;
+    this._query = ctx.query;
+    this._caretRect = this._captureCaretRect(ctx.textNode, ctx.triggerOffset);
+
+    if (!this._open) this._open_();
+    else { this._filterAndRender(); this._position(); }
+  }
+
+  _onKeydown(e) {
+    if (!this._open) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (this._filtered.length === 0) return;
+      this._highlight((this._activeIndex + 1) % this._filtered.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (this._filtered.length === 0) return;
+      this._highlight((this._activeIndex - 1 + this._filtered.length) % this._filtered.length);
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      if (this._activeIndex >= 0) {
+        e.preventDefault();
+        this._select(this._activeIndex);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this._close();
+    }
+  }
+
+  _onDocClick(e) {
+    if (!this._open) return;
+    if (this._menu?.contains(e.target)) return;
+    this._close();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Selection
+  // ---------------------------------------------------------------------------
+
+  _deleteTriggerText() {
+    const node = this._textNode;
+    if (!node?.isConnected) return;
+    const before = node.textContent.slice(0, this._triggerOffset);
+    const after = node.textContent.slice(this._triggerOffset + 1 + this._query.length);
+    node.textContent = before + after;
+
+    const sel = globalThis.getSelection();
+    if (!sel) return;
+    const range = document.createRange();
+    range.setStart(node, this._triggerOffset);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  _makeTriggerRemover() {
+    const node = this._textNode;
+    const triggerOffset = this._triggerOffset;
+    const query = this._query;
+    return () => {
+      if (!node?.isConnected) return;
+      const before = node.textContent.slice(0, triggerOffset);
+      const after = node.textContent.slice(triggerOffset + 1 + query.length);
+      node.textContent = before + after;
+
+      const sel = globalThis.getSelection();
+      if (!sel) return;
+      const range = document.createRange();
+      range.setStart(node, triggerOffset);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    };
+  }
+
+  _select(index) {
+    const item = this._filtered[index];
+    if (!item) return;
+
+    if (item.id === 'image') {
+      const beforeInsert = this._makeTriggerRemover();
+      this._close();
+      this.context.invoke('imageDialog.show', { beforeInsert });
+      return;
+    }
+
+    this._deleteTriggerText();
+    this._close();
+    // Editor.* methods invoked by commands already call afterCommand()
+    // internally (toolbar/statusbar refresh + debounced undo snapshot + the
+    // 'change' event), so no manual triggerEvent here — see Editor.js.
+    item.run();
+  }
+}

package/src/js/module/Statusbar.js

@@ -4,7 +4,6 @@
  */
 
 import { createElement, on } from '../core/dom.js';
-import { debounce } from '../core/func.js';
 
 // Cache the segmenter instance at module level to avoid per-call allocation
 const _segmenter =
@@ -97,7 +96,6 @@ export class Statusbar {
     info.appendChild(this._charCountEl);
     this.el.appendChild(info);
 
-    this._bindContentEvents();
     this.update();
     return this;
   }
@@ -202,13 +200,9 @@ export class Statusbar {
   // Counter update
   // ---------------------------------------------------------------------------
 
-  _bindContentEvents() {
-    const editable = this.context.layoutInfo.editable;
-    const updateDebounced = debounce(() => this.update(), 200);
-    const d = on(editable, 'input', /** @type {EventListener} */ (updateDebounced));
-    this._disposers.push(d);
-  }
-
+  // Editor.afterCommand() already invokes 'statusbar.update' on every native
+  // 'input' event and after every toolbar/formatting command, so a separate
+  // content listener here would just re-run this on the same keystroke.
   update() {
     if (!this._wordCountEl || !this._charCountEl) return;
     const editable = this.context.layoutInfo.editable;

package/src/js/settings.js

@@ -25,6 +25,7 @@ import { defaultToolbar } from './module/Buttons.js';
  * @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 {number}   [historyMaxBytes]      - Maximum combined size (chars) of all stacked undo/redo snapshots
  * @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
@@ -46,6 +47,8 @@ import { defaultToolbar } from './module/Buttons.js';
  * @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}   [autoSaveDelay]        - Debounce delay for auto-save writes in milliseconds
+ * @property {object|null} [autoSaveAdapter]   - Optional async persistence adapter with save/load/remove methods
  * @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
@@ -64,6 +67,7 @@ import { defaultToolbar } from './module/Buttons.js';
  * @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 {boolean}  [slashMenu]            - Show a "/" command palette for quick block insertion (default true)
  * @property {string}   [lang]                 - Display language or partial locale object override
  */
 
@@ -103,6 +107,10 @@ export const defaultOptions = {
   codeHighlightCDN: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0',
   markdownPaste: true,
   historyLimit: 100,
+  // Max combined size (chars) of all stacked undo/redo snapshots. Guards
+  // against documents with many large embedded images holding dozens of
+  // full-size copies in memory despite historyLimit.
+  historyMaxBytes: 10 * 1024 * 1024,
   // Default font family applied to the editor and shown in the dropdown when no explicit font is set
   defaultFontFamily: 'Arial',
   // Default font size applied to the editor and shown in the size dropdown when no explicit size is set
@@ -132,6 +140,8 @@ export const defaultOptions = {
   autoSave: false,
   // localStorage key used when autoSave is enabled
   autoSaveKey: 'autumnnote-autosave',
+  autoSaveDelay: 400,
+  autoSaveAdapter: null,
   // Maximum character count (0 = unlimited)
   maxChars: 0,
   // Maximum word count (0 = unlimited)
@@ -171,6 +181,23 @@ export const defaultOptions = {
   // e.g. "## " at line start → <h2>, "**bold**" → <strong>
   markdownShortcuts: true,
 
+  // "/" command palette for quick block insertion (headings, lists, table, image, ...).
+  // Triggers only when "/" is the first character typed on an otherwise-empty line.
+  slashMenu: true,
+  // Additional slash-menu commands supplied by applications/plugins.
+  slashCommands: [],
+
+  // Optional import/export adapters keyed by format name.
+  documentAdapters: {},
+  // Optional collaboration bridge notified with local HTML changes.
+  collaborationAdapter: null,
+
+  // Optional image processor (for example a Web Worker bridge). Receives a
+  // File and returns a data URL; Clipboard's canvas pipeline remains fallback.
+  imageProcessor: null,
+  // Add stable data-an-block-id attributes to top-level document blocks.
+  blockIds: false,
+
   // Maximum paste size in bytes (default 5 MB). Pastes larger than this are silently dropped.
   maxPasteSize: 5 * 1024 * 1024,
   // Minimum image dimension in px during resize (width and height). Prevents images from being

package/src/styles/autumnnote.scss

@@ -97,6 +97,17 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .an-container *,
+  .an-dialog-overlay *,
+  .an-slash-menu * {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 // =============================================================================
 // Toolbar
 // =============================================================================
@@ -2815,3 +2826,41 @@ $an-video-accent: #8b5cf6; // violet-500
     color: #93c5fd;
   }
 }
+
+// =============================================================================
+// "/" command palette
+// =============================================================================
+
+.an-slash-menu {
+  display: none;
+  position: fixed;
+  z-index: 9998;
+  background: $an-bg;
+  border: 1px solid $an-border;
+  border-radius: $an-radius;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  min-width: 180px;
+  max-width: 260px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.an-slash-menu-item {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: $an-text;
+  transition: background $an-transition;
+
+  &:hover,
+  &.an-slash-menu-active {
+    background: $an-bg-btn-hover;
+  }
+}
+
+.an-slash-menu-empty {
+  padding: 6px 12px;
+  font-size: 13px;
+  color: $an-muted;
+}