autumnnote 2.1.0 → 2.2.0

package/src/js/module/Mention.js

@@ -1,365 +0,0 @@
-/**
- * Mention.js — @mention autocomplete support.
- *
- * Activated when `mention.onSearch` option is provided.
- *
- * When the user types the trigger character (default `@`) followed by at least
- * `mention.minChars` characters, `onSearch(query, callback)` is called.
- * The callback receives an array of `{ id, label, avatar? }` items which are
- * rendered in a floating dropdown.  Selecting an item inserts a non-editable
- * mention chip and fires `onInsert` (if provided) to override the default HTML.
- *
- * Options shape (passed as `mention` option object):
- * {
- *   trigger:      '@',
- *   minChars:     1,
- *   maxResults:   8,
- *   debounce:     200,
- *   onSearch:     (query, callback) => void,
- *   onInsert:     (item) => string | null,
- *   onError:      (err: Error) => void,
- *   mentionClass: 'an-mention',
- *   allowSpaces:  false,
- * }
- */
-
-import { on } from '../core/dom.js';
-
-export class Mention {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-
-    /** @type {HTMLElement|null} */
-    this._dropdown = null;
-    /** @type {string} */
-    this._query = '';
-    /** @type {number|null} */
-    this._debounceTimer = null;
-    /** @type {number} current highlighted index */
-    this._activeIndex = -1;
-    /** @type {Array<{id, label, avatar?}>} */
-    this._items = [];
-    /** @type {boolean} */
-    this._open = false;
-    /** Position of trigger character in the text node */
-    this._triggerNode = null;
-    this._triggerOffset = 0;
-    /** @type {DOMRect|null} Caret rect captured synchronously during input event */
-    this._caretRect = null;
-
-    this._disposers = [];
-  }
-
-  initialize() {
-    const cfg = this.context.options.mention;
-    if (!cfg || typeof cfg.onSearch !== 'function') return this;
-    this._cfg = {
-      trigger: cfg.trigger || '@',
-      minChars: cfg.minChars ?? 0,
-      maxResults: cfg.maxResults ?? 8,
-      debounce: cfg.debounce ?? 200,
-      onSearch: cfg.onSearch,
-      onInsert: cfg.onInsert || null,
-      onError: cfg.onError || null,
-      mentionClass: cfg.mentionClass || 'an-mention',
-      allowSpaces: cfg.allowSpaces || false,
-    };
-
-    this._buildDropdown();
-
-    const editable = this.context.layoutInfo.editable;
-    const d1 = on(editable, 'keydown', (e) => this._onKeydown(e));
-    const d2 = on(editable, 'input', () => this._onInput());
-    const d3 = on(document, 'click', (e) => this._onDocClick(e));
-    this._disposers.push(d1, d2, d3);
-    return this;
-  }
-
-  destroy() {
-    clearTimeout(this._debounceTimer);
-    this._dropdown?.remove();
-    this._dropdown = null;
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-  }
-
-  // ---------------------------------------------------------------------------
-  // Dropdown DOM
-  // ---------------------------------------------------------------------------
-
-  _buildDropdown() {
-    const el = document.createElement('div');
-    el.className = 'an-mention-dropdown';
-    el.setAttribute('role', 'listbox');
-
-    // Event delegation: single listeners on the container instead of per-item
-    el.addEventListener('mousedown', (e) => e.preventDefault());
-    el.addEventListener('click', (e) => {
-      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-mention-item'));
-      if (item) this._select(+item.dataset.index);
-    });
-    el.addEventListener('mousemove', (e) => {
-      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-mention-item'));
-      if (item) this._highlightItem(+item.dataset.index);
-    });
-
-    document.body.appendChild(el);
-    this._dropdown = el;
-  }
-
-  _renderItems(items) {
-    const dd = this._dropdown;
-    this._items = items.slice(0, this._cfg.maxResults);
-    this._activeIndex = this._items.length > 0 ? 0 : -1;
-
-    // Build all items in a DocumentFragment — one batch DOM insertion
-    const frag = document.createDocumentFragment();
-    this._items.forEach((item, i) => {
-      const li = document.createElement('div');
-      li.className = 'an-mention-item';
-      li.setAttribute('role', 'option');
-      li.dataset.index = String(i);
-      if (item.avatar) {
-        const img = document.createElement('img');
-        img.src = item.avatar;
-        img.className = 'an-mention-avatar';
-        img.alt = '';
-        li.appendChild(img);
-      }
-      const label = document.createElement('span');
-      label.textContent = item.label;
-      li.appendChild(label);
-      frag.appendChild(li);
-    });
-
-    dd.innerHTML = '';        // one clear
-    dd.appendChild(frag);    // one batch insert
-
-    this._highlightItem(this._activeIndex);
-  }
-
-  _highlightItem(index) {
-    if (!this._dropdown) return;
-    this._dropdown.querySelectorAll('.an-mention-item').forEach((el, i) => {
-      el.classList.toggle('an-mention-active', i === index);
-    });
-    this._activeIndex = index;
-  }
-
-  _positionDropdown() {
-    const dd = this._dropdown;
-    const rect = this._caretRect;
-    if (!rect || rect.height === 0) return;
-
-    // Measure while invisible to avoid layout flash
-    dd.style.visibility = 'hidden';
-    dd.style.display = 'block';
-
-    const ddh = dd.offsetHeight;
-    const ddw = dd.offsetWidth;
-
-    // position:fixed — coords are already viewport-relative, no scroll offset needed
-    let top = rect.bottom + 4;
-    let left = rect.left;
-
-    if (rect.bottom + ddh + 8 > globalThis.innerHeight) {
-      top = rect.top - ddh - 4;
-    }
-    left = Math.max(8, Math.min(left, globalThis.innerWidth - ddw - 8));
-
-    dd.style.top = `${top}px`;
-    dd.style.left = `${left}px`;
-    dd.style.visibility = '';
-  }
-
-  _showDropdown() {
-    this._open = true;
-    this._positionDropdown();
-  }
-
-  _hideDropdown() {
-    if (this._dropdown) this._dropdown.style.display = 'none';
-    this._open = false;
-    this._items = [];
-    this._activeIndex = -1;
-    this._triggerNode = null;
-    this._caretRect = null;
-    this._query = '';
-  }
-
-  /**
-   * Captures the caret rect synchronously during the input event.
-   * Must be called while the DOM event is still live — getClientRects() on a
-   * collapsed range is reliable at this point but often empty inside async callbacks.
-   */
-  _captureCaretRect() {
-    // Prefer a range over the trigger character — it has non-zero width and
-    // getBoundingClientRect() reliably returns a valid rect.
-    if (this._triggerNode?.isConnected) {
-      try {
-        const r = document.createRange();
-        const end = Math.min(this._triggerOffset + 1, this._triggerNode.textContent.length);
-        r.setStart(this._triggerNode, this._triggerOffset);
-        r.setEnd(this._triggerNode, end);
-        const candidate = r.getBoundingClientRect();
-        if (candidate.height > 0) {
-          this._caretRect = candidate;
-          return;
-        }
-      } catch (_) { void _; }
-    }
-
-    // Fallback: use getClientRects() on the current collapsed selection
-    const sel = globalThis.getSelection();
-    if (!sel?.rangeCount) return;
-    const rects = sel.getRangeAt(0).getClientRects();
-    if (rects.length > 0) {
-      this._caretRect = rects[rects.length - 1];
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Query detection
-  // ---------------------------------------------------------------------------
-
-  _getQueryAtCursor() {
-    const sel = globalThis.getSelection();
-    if (!sel?.rangeCount) return null;
-    const range = sel.getRangeAt(0);
-    if (!range.collapsed) return null;
-
-    const node = range.startContainer;
-    if (node.nodeType !== Node.TEXT_NODE) return null;
-
-    const text = node.textContent.slice(0, range.startOffset);
-    const trigger = this._cfg.trigger;
-
-    // Find the last occurrence of trigger in the text before cursor
-    const triggerIdx = text.lastIndexOf(trigger);
-    if (triggerIdx === -1) return null;
-
-    const afterTrigger = text.slice(triggerIdx + trigger.length);
-
-    // No spaces allowed unless configured
-    if (!this._cfg.allowSpaces && /\s/.test(afterTrigger)) return null;
-
-    if (afterTrigger.length < this._cfg.minChars) return null;
-
-    this._triggerNode = node;
-    this._triggerOffset = triggerIdx;
-    return afterTrigger;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Events
-  // ---------------------------------------------------------------------------
-
-  _onInput() {
-    if (!this._cfg) return;
-    const query = this._getQueryAtCursor();
-    if (query === null) {
-      this._hideDropdown();
-      return;
-    }
-
-    // Capture caret rect NOW, synchronously while the input event is live.
-    // Inside a setTimeout/debounce callback the selection may still be valid
-    // but getClientRects() on a collapsed range often returns empty in that context.
-    this._captureCaretRect();
-
-    this._query = query;
-    clearTimeout(this._debounceTimer);
-    this._debounceTimer = setTimeout(() => {
-      const cb = (items) => {
-        if (!Array.isArray(items) || items.length === 0) {
-          this._hideDropdown();
-          return;
-        }
-        this._renderItems(items);
-        this._showDropdown();
-      };
-      let result;
-      try {
-        result = this._cfg.onSearch(this._query, cb);
-      } catch (err) {
-        this._hideDropdown();
-        if (typeof this._cfg.onError === 'function') this._cfg.onError(err);
-        return;
-      }
-      if (result && typeof result.then === 'function') {
-        result.then(cb).catch((err) => {
-          this._hideDropdown();
-          if (typeof this._cfg.onError === 'function') this._cfg.onError(err);
-        });
-      }
-    }, this._cfg.debounce);
-  }
-
-  _onKeydown(e) {
-    if (!this._cfg || !this._open) return;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      const next = (this._activeIndex + 1) % this._items.length;
-      this._highlightItem(next);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      const prev = (this._activeIndex - 1 + this._items.length) % this._items.length;
-      this._highlightItem(prev);
-    } else if (e.key === 'Enter' || e.key === 'Tab') {
-      if (this._activeIndex >= 0) {
-        e.preventDefault();
-        this._select(this._activeIndex);
-      }
-    } else if (e.key === 'Escape') {
-      this._hideDropdown();
-    }
-  }
-
-  _onDocClick(e) {
-    if (!this._open) return;
-    if (this._dropdown?.contains(e.target)) return;
-    this._hideDropdown();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Insert
-  // ---------------------------------------------------------------------------
-
-  _select(index) {
-    const item = this._items[index];
-    if (!item) return;
-
-    // Delete the trigger + query text from the DOM
-    if (this._triggerNode) {
-      const node = this._triggerNode;
-      const before = node.textContent.slice(0, this._triggerOffset);
-      const after = node.textContent.slice(this._triggerOffset + this._cfg.trigger.length + this._query.length);
-      node.textContent = before + after;
-
-      // Move cursor to where the trigger was
-      const sel = globalThis.getSelection();
-      const range = document.createRange();
-      range.setStart(node, this._triggerOffset);
-      range.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-
-    // Build the chip HTML
-    let html;
-    if (typeof this._cfg.onInsert === 'function') {
-      html = this._cfg.onInsert(item);
-    }
-    if (!html) {
-      const cls = this._cfg.mentionClass;
-      html = `<span class="${cls}" data-mention-id="${item.id}" contenteditable="false">@${item.label}</span>`;
-    }
-
-    // Insert a trailing space so the cursor lands outside the chip
-    this.context.invoke('editor.insertHTML', html + '&#8203;');
-    this._hideDropdown();
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-}

package/src/js/module/Placeholder.js

@@ -1,51 +0,0 @@
-/**
- * Placeholder.js - Shows placeholder text when the editor is empty
- * Inspired by Summernote's Placeholder module
- */
-
-import { on } from '../core/dom.js';
-
-export class Placeholder {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    this.options = context.options;
-    this._disposers = [];
-  }
-
-  initialize() {
-    const editable = this.context.layoutInfo.editable;
-    const placeholder = this.options.placeholder || '';
-    if (placeholder) {
-      editable.dataset.placeholder = placeholder;
-    }
-
-    const update = () => this._update();
-    const d1 = on(editable, 'input', update);
-    const d2 = on(editable, 'focus', update);
-    const d3 = on(editable, 'blur', update);
-    this._disposers.push(d1, d2, d3);
-    this._update();
-    return this;
-  }
-
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-  }
-
-  _update() {
-    const editable = this.context.layoutInfo.editable;
-    const isFocused = document.activeElement === editable;
-    // Strip ZWS (\u200B) cursor anchors used by checklist/icon insertion in
-    // addition to regular whitespace before deciding if the editor is empty.
-    // Without this, a freshly-created checklist item or icon leaves a ZWS in
-    // the DOM that causes the placeholder to overlap real content (A-1).
-    const hasText = editable.textContent.replaceAll('\u200B', '').trim().length > 0;
-    const isEmpty = !hasText &&
-      !editable.querySelector('img, table, hr, .an-video-wrapper');
-    editable.classList.toggle('an-placeholder', isEmpty && !isFocused);
-  }
-}

package/src/js/module/ShortcutsDialog.js

@@ -1,111 +0,0 @@
-/**
- * ShortcutsDialog.js - Modal dialog listing all keyboard shortcuts.
- * Opened via the toolbar '?' button or Shift+? inside the editor.
- */
-
-import { createElement, on } from '../core/dom.js';
-import { BaseDialog } from './BaseDialog.js';
-
-const SHORTCUTS = [
-  {
-    category: 'Text Formatting',
-    items: [
-      { keys: 'Ctrl + B',         action: 'Bold' },
-      { keys: 'Ctrl + I',         action: 'Italic' },
-      { keys: 'Ctrl + U',         action: 'Underline' },
-      { keys: 'Ctrl + K',         action: 'Insert / edit link' },
-    ],
-  },
-  {
-    category: 'History',
-    items: [
-      { keys: 'Ctrl + Z',                   action: 'Undo' },
-      { keys: 'Ctrl + Y  /  Ctrl + Shift + Z', action: 'Redo' },
-    ],
-  },
-  {
-    category: 'Selection & Navigation',
-    items: [
-      { keys: 'Ctrl + A',    action: 'Select all content' },
-      { keys: 'Tab',         action: 'Indent list item / insert spaces' },
-      { keys: 'Shift + Tab', action: 'Outdent list item' },
-    ],
-  },
-  {
-    category: 'Clipboard',
-    items: [
-      { keys: 'Ctrl + Shift + V', action: 'Paste as plain text' },
-    ],
-  },
-  {
-    category: 'Find & Replace',
-    items: [
-      { keys: 'Ctrl + F', action: 'Find in document' },
-      { keys: 'Ctrl + H', action: 'Find & Replace' },
-    ],
-  },
-  {
-    category: 'Editor',
-    items: [
-      { keys: 'Ctrl + Shift + /', action: 'Show this keyboard shortcuts dialog' },
-    ],
-  },
-];
-
-const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M6 11h.01M10 11h.01M14 11h.01M18 11h.01M6 15h.01M18 15h.01M10 15h4"/><path d="M7 3l5 4 5-4"/></svg>`;
-
-export class ShortcutsDialog extends BaseDialog {
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  show() {
-    this._open();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build dialog
-  // ---------------------------------------------------------------------------
-
-  _buildDialog() {
-    const L = this.context.locale.shortcutsDialog;
-    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
-    box.classList.add('an-shortcuts-box');
-
-    // Close button pinned to the right of the header row
-    const closeBtn = createElement('button', {
-      type: 'button',
-      class: 'an-icon-close',
-      'aria-label': L.close,
-      style: 'margin-left:auto',
-    });
-    closeBtn.textContent = '×';
-    this._closeBtn = closeBtn;
-    this._firstInput = closeBtn;
-    box.querySelector('.an-dialog-header').appendChild(closeBtn);
-
-    const shortcuts = this.context.locale.shortcutsDialog.shortcuts || SHORTCUTS;
-    shortcuts.forEach(({ category, items }) => {
-      const catEl = createElement('div', { class: 'an-shortcuts-cat' });
-      catEl.textContent = category;
-      box.appendChild(catEl);
-
-      const table = createElement('div', { class: 'an-shortcuts-table' });
-      items.forEach(({ keys, action }) => {
-        const row = createElement('div', { class: 'an-shortcuts-row' });
-        const keyEl = createElement('span', { class: 'an-shortcuts-key' });
-        keyEl.textContent = keys;
-        const actEl = createElement('span', { class: 'an-shortcuts-action' });
-        actEl.textContent = action;
-        row.append(keyEl, actEl);
-        table.appendChild(row);
-      });
-      box.appendChild(table);
-    });
-
-    const d1 = on(closeBtn, 'click', () => this._close());
-    this._disposers.push(d1);
-
-    return overlay;
-  }
-}