autumnnote 1.0.9 → 1.1.1

package/src/js/module/MarkdownShortcuts.js

@@ -0,0 +1,253 @@
+/**
+ * MarkdownShortcuts.js — Convert Markdown-style syntax typed directly in the
+ * editor into rich HTML elements (input rules / auto-format).
+ *
+ * Activated when `markdownShortcuts: true` (the default).
+ *
+ * Block rules — triggered by Space or Enter at the start of a line:
+ *   #[#[#]]·     → H1 / H2 / H3
+ *   >·           → blockquote
+ *   -·  or *·   → unordered list item
+ *   1.·          → ordered list item
+ *   [ ]·         → checklist item
+ *   ---          → horizontal rule  (on Enter)
+ *   ```          → code block       (on Enter)
+ *
+ * Inline rules — triggered when the closing marker is typed:
+ *   **text**     → <strong>
+ *   *text*       → <em>
+ *   ~~text~~     → <s>
+ *   `code`       → <code>
+ */
+
+import { on } from '../core/dom.js';
+
+export class MarkdownShortcuts {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    this._disposers = [];
+  }
+
+  initialize() {
+    if (!this.options.markdownShortcuts) return this;
+    const editable = this.context.layoutInfo.editable;
+    const d1 = on(editable, 'keydown', /** @param {KeyboardEvent} e */ (e) => this._onKeydown(e));
+    const d2 = on(editable, 'input', () => this._onInput());
+    this._disposers.push(d1, d2);
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+  }
+
+  // ---------------------------------------------------------------------------
+  // Block rules (Space / Enter)
+  // ---------------------------------------------------------------------------
+
+  _onKeydown(e) {
+    if (e.key === ' ') {
+      if (this._applyBlockRule()) e.preventDefault();
+    } else if (e.key === 'Enter') {
+      if (this._applyEnterRule()) e.preventDefault();
+    }
+  }
+
+  /**
+   * Returns the plain text of the line the cursor is on, up to the cursor.
+   * @returns {{ text: string, range: Range, lineNode: Node } | null}
+   */
+  _getLineContext() {
+    const sel = window.getSelection();
+    if (!sel || !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;
+
+    // Walk up to find the block-level ancestor inside the editable
+    let node = range.startContainer;
+    while (node && node !== editable && !this._isBlock(node)) {
+      node = node.parentNode;
+    }
+    if (!node || node === editable) node = range.startContainer;
+
+    // Collect all text content before the cursor within that block
+    const tmpRange = document.createRange();
+    tmpRange.setStart(node, 0);
+    tmpRange.setEnd(range.startContainer, range.startOffset);
+    const text = tmpRange.toString();
+
+    return { text, range, lineNode: node };
+  }
+
+  _isBlock(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) return false;
+    const display = window.getComputedStyle(node).display;
+    return display === 'block' || display === 'list-item' || display === 'table-cell';
+  }
+
+  /** Applies block rule on Space key. Returns true if a rule fired. */
+  _applyBlockRule() {
+    const ctx = this._getLineContext();
+    if (!ctx) return false;
+    const { text } = ctx;
+
+    const blockPatterns = [
+      { re: /^(#{1,3})$/, handler: (m) => this._convertToHeading(m[1].length) },
+      { re: /^>$/, handler: () => this._convertToBlockquote() },
+      { re: /^[-*]$/, handler: () => this._convertToList('ul') },
+      { re: /^1\.$/, handler: () => this._convertToList('ol') },
+      { re: /^\[ \]$/, handler: () => this._convertToChecklist() },
+    ];
+
+    for (const { re, handler } of blockPatterns) {
+      const m = text.match(re);
+      if (m) {
+        handler(m);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /** Applies block rule on Enter key (---, ```). Returns true if a rule fired. */
+  _applyEnterRule() {
+    const ctx = this._getLineContext();
+    if (!ctx) return false;
+    const { text } = ctx;
+
+    if (/^-{3,}$/.test(text)) {
+      this._convertToHr();
+      return true;
+    }
+    if (/^`{3}/.test(text)) {
+      this._convertToCodeBlock();
+      return true;
+    }
+    return false;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Block converters
+  // ---------------------------------------------------------------------------
+
+  _selectLineAndDelete() {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    const range = sel.getRangeAt(0);
+    // Select from the start of the block to the cursor and delete
+    const startRange = document.createRange();
+    startRange.setStart(range.startContainer.parentNode || range.startContainer, 0);
+    startRange.setEnd(range.startContainer, range.startOffset);
+    startRange.deleteContents();
+  }
+
+  _convertToHeading(level) {
+    this._selectLineAndDelete();
+    document.execCommand('formatBlock', false, `h${level}`);
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToBlockquote() {
+    this._selectLineAndDelete();
+    document.execCommand('formatBlock', false, 'blockquote');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToList(type) {
+    this._selectLineAndDelete();
+    document.execCommand(type === 'ul' ? 'insertUnorderedList' : 'insertOrderedList');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToChecklist() {
+    this._selectLineAndDelete();
+    this.context.invoke('editor.checklist');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToHr() {
+    this._selectLineAndDelete();
+    this.context.invoke('editor.insertHR');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToCodeBlock() {
+    this._selectLineAndDelete();
+    document.execCommand('formatBlock', false, 'pre');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  // ---------------------------------------------------------------------------
+  // Inline rules (input event)
+  // ---------------------------------------------------------------------------
+
+  _onInput() {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    const range = sel.getRangeAt(0);
+    if (!range.collapsed) return;
+
+    const editable = this.context.layoutInfo.editable;
+    if (!editable.contains(range.startContainer)) return;
+
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return;
+
+    const text = node.textContent;
+    const offset = range.startOffset;
+
+    const inlineRules = [
+      // **bold**
+      { re: /\*\*(.+?)\*\*$/, tag: 'strong' },
+      // *italic* (not part of **)
+      { re: /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)$/, tag: 'em' },
+      // ~~strike~~
+      { re: /~~(.+?)~~$/, tag: 's' },
+      // `code`
+      { re: /`([^`]+)`$/, tag: 'code' },
+    ];
+
+    const upToCursor = text.slice(0, offset);
+    for (const { re, tag } of inlineRules) {
+      const m = upToCursor.match(re);
+      if (!m) continue;
+
+      const matchStart = upToCursor.length - m[0].length;
+      const matchEnd = offset;
+      const innerText = m[1];
+
+      // Replace matched text with formatted element
+      const before = text.slice(0, matchStart);
+      const after = text.slice(matchEnd);
+
+      const el = document.createElement(tag);
+      el.textContent = innerText;
+
+      // Rebuild the text node and insert the element
+      const beforeNode = document.createTextNode(before);
+      const afterNode = document.createTextNode('​' + after);
+
+      const parent = node.parentNode;
+      parent.insertBefore(beforeNode, node);
+      parent.insertBefore(el, node);
+      parent.insertBefore(afterNode, node);
+      parent.removeChild(node);
+
+      // Place cursor after the element (after the ZWS)
+      const newRange = document.createRange();
+      newRange.setStart(afterNode, 1);
+      newRange.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(newRange);
+
+      this.context.triggerEvent('change', this.context.getHTML());
+      break;
+    }
+  }
+}

package/src/js/module/Mention.js

@@ -0,0 +1,337 @@
+/**
+ * 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,
+ *   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,
+      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);
+    if (this._dropdown && this._dropdown.parentNode) {
+      this._dropdown.parentNode.removeChild(this._dropdown);
+    }
+    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');
+    document.body.appendChild(el);
+    this._dropdown = el;
+  }
+
+  _renderItems(items) {
+    const dd = this._dropdown;
+    dd.innerHTML = '';
+    this._items = items.slice(0, this._cfg.maxResults);
+    this._activeIndex = this._items.length > 0 ? 0 : -1;
+
+    this._items.forEach((item, i) => {
+      const li = document.createElement('div');
+      li.className = 'an-mention-item';
+      li.setAttribute('role', 'option');
+      li.dataset.index = 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);
+      li.addEventListener('mousedown', (e) => e.preventDefault());
+      li.addEventListener('click', () => this._select(i));
+      dd.appendChild(li);
+    });
+
+    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 > window.innerHeight) {
+      top = rect.top - ddh - 4;
+    }
+    left = Math.max(8, Math.min(left, window.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 && 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 (_) {}
+    }
+
+    // Fallback: use getClientRects() on the current collapsed selection
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    const rects = sel.getRangeAt(0).getClientRects();
+    if (rects.length > 0) {
+      this._caretRect = rects[rects.length - 1];
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Query detection
+  // ---------------------------------------------------------------------------
+
+  _getQueryAtCursor() {
+    const sel = window.getSelection();
+    if (!sel || !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(() => {
+      this._cfg.onSearch(this._query, (items) => {
+        if (!Array.isArray(items) || items.length === 0) {
+          this._hideDropdown();
+          return;
+        }
+        this._renderItems(items);
+        this._showDropdown();
+      });
+    }, 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 && 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 = window.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/settings.js

@@ -139,4 +139,23 @@ export const defaultOptions = {
   // Built-in values: 'en' (default), 'vi', 'ja', 'zh', 'fr'.
   // Pass a partial or full locale object to override individual strings.
   lang: 'en',
+
+  // Auto-save restore: show a banner when a draft exists in localStorage.
+  // Requires autoSave: true. Set autoSaveRestoreTimeout to the max age in days
+  // (0 = no expiry). onAutoSaveRestore(html, context) fires after restore.
+  autoSaveRestore: false,
+  autoSaveRestoreTimeout: 7,
+  onAutoSaveRestore: null,
+
+  // Markdown input shortcuts: convert markdown syntax typed inline to HTML.
+  // e.g. "## " at line start → <h2>, "**bold**" → <strong>
+  markdownShortcuts: true,
+
+  // Bubble toolbar: show a mini floating toolbar above text selections.
+  bubbleToolbar: false,
+  bubbleToolbarItems: ['bold', 'italic', 'underline', 'link', 'foreColor', 'removeFormat'],
+
+  // @mention support. mention.onSearch(query, callback) must be provided to activate.
+  // mention.minChars defaults to 0 — dropdown opens immediately on trigger character.
+  mention: null,
 };