autumnnote 1.0.9 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "A modern, lightweight WYSIWYG editor — built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",
@@ -23,7 +23,8 @@
     "typecheck": "tsc --noEmit",
     "build:cdn": "vite build --config vite.cdn.config.js",
     "analyze": "cross-env ANALYZE=1 vite build",
-    "bench": "vitest bench"
+    "bench": "vitest bench",
+    "test:coverage": "vitest run --coverage"
   },
   "keywords": [
     "wysiwyg",

package/src/js/Context.js

@@ -34,6 +34,10 @@ import { ContextMenu } from './module/ContextMenu.js';
 import { ShortcutsDialog } from './module/ShortcutsDialog.js';
 import { FindReplace } from './module/FindReplace.js';
 import { ImageCropOverlay } from './module/ImageCropOverlay.js';
+import { AutoSaveRestore } from './module/AutoSaveRestore.js';
+import { MarkdownShortcuts } from './module/MarkdownShortcuts.js';
+import { BubbleToolbar } from './module/BubbleToolbar.js';
+import { Mention } from './module/Mention.js';
 
 /** Module registry shared across all Context instances (populated via AutumnNote.registerModule). */
 export const _customModules = new Map();
@@ -139,6 +143,10 @@ export class Context {
     register('shortcutsDialog', ShortcutsDialog);
     register('findReplace', FindReplace);
     register('imageCropOverlay', ImageCropOverlay);
+    register('autoSaveRestore', AutoSaveRestore);
+    register('markdownShortcuts', MarkdownShortcuts);
+    register('bubbleToolbar', BubbleToolbar);
+    register('mention', Mention);
 
     // Custom modules registered via AutumnNote.registerModule()
     for (const [name, ModuleClass] of _customModules) {
@@ -181,10 +189,14 @@ export class Context {
     const d3 = this.on('change', () => this._syncToTarget());
     this._disposers.push(d0, d1, d2, d3);
 
-    // Auto-save to localStorage on every change
+    // Auto-save to localStorage on every change (also writes :asrmeta for restore banner)
     if (this.options.autoSave && this.options.autoSaveKey) {
       const d4 = this.on('change', () => {
-        try { localStorage.setItem(this.options.autoSaveKey, this.getHTML()); } catch (_) {}
+        try {
+          const key = this.options.autoSaveKey;
+          localStorage.setItem(key, this.getHTML());
+          localStorage.setItem(key + ':asrmeta', JSON.stringify({ savedAt: Date.now() }));
+        } catch (_) {}
       });
       this._disposers.push(d4);
     }

package/src/js/core/func.js

@@ -110,11 +110,11 @@ export function mergeDeep(target, source) {
   if (isPlainObject(target) && isPlainObject(source)) {
     for (const key of Object.keys(source)) {
       if (isPlainObject(source[key])) {
-        if (!(key in target)) {
-          output[key] = mergeDeep({}, source[key]);
-        } else {
-          output[key] = mergeDeep(target[key], source[key]);
-        }
+        // When target[key] is null / undefined / a non-object (e.g. the `mention: null`
+        // default), merge into an empty object instead of passing null to the next
+        // recursive call — which would silently drop all source properties.
+        const base = isPlainObject(target[key]) ? target[key] : {};
+        output[key] = mergeDeep(base, source[key]);
       } else if (Array.isArray(source[key])) {
         output[key] = [...source[key]];
       } else {

package/src/js/module/AutoSaveRestore.js

@@ -0,0 +1,126 @@
+/**
+ * AutoSaveRestore.js — Detects a previously auto-saved draft and offers the
+ * user a banner to restore or discard it.
+ *
+ * Activated when both `autoSave` and `autoSaveRestore` options are true.
+ * On initialize it checks localStorage for a draft that is within the
+ * `autoSaveRestoreTimeout` day window.  If one is found a dismissible banner
+ * is prepended to the editor container.
+ */
+
+export class AutoSaveRestore {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+
+    /** @type {HTMLElement|null} */
+    this._banner = null;
+  }
+
+  initialize() {
+    if (!this.options.autoSave || !this.options.autoSaveRestore) return this;
+
+    const key = this.options.autoSaveKey;
+    const metaKey = key + ':asrmeta';
+
+    let saved;
+    let meta;
+    try {
+      saved = localStorage.getItem(key);
+      meta = JSON.parse(localStorage.getItem(metaKey) || '{}');
+    } catch (_) {
+      return this;
+    }
+
+    if (!saved) return this;
+
+    const timeout = this.options.autoSaveRestoreTimeout;
+    if (timeout > 0) {
+      const ageMs = Date.now() - (meta.savedAt || 0);
+      if (ageMs > timeout * 86400000) {
+        try { localStorage.removeItem(key); localStorage.removeItem(metaKey); } catch (_) {}
+        return this;
+      }
+    }
+
+    this._showBanner(saved, meta);
+    return this;
+  }
+
+  destroy() {
+    this._removeBanner();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  _showBanner(draftHtml, meta) {
+    const locale = this.context.locale;
+    const t = locale.autoSaveRestore || {};
+    const label = t.found || 'Draft found. Restore?';
+    const restoreLabel = t.restore || 'Restore';
+    const discardLabel = t.discard || 'Discard';
+
+    const banner = document.createElement('div');
+    banner.className = 'an-asr-banner';
+    banner.setAttribute('role', 'alert');
+
+    const msg = document.createElement('span');
+    msg.className = 'an-asr-msg';
+    if (meta.savedAt) {
+      const d = new Date(meta.savedAt);
+      const formatted = d.toLocaleString();
+      msg.textContent = (t.foundAt || 'Draft from {date}. Restore?').replace('{date}', formatted);
+    } else {
+      msg.textContent = label;
+    }
+
+    const restoreBtn = document.createElement('button');
+    restoreBtn.type = 'button';
+    restoreBtn.className = 'an-btn an-asr-btn-restore';
+    restoreBtn.textContent = restoreLabel;
+    restoreBtn.addEventListener('click', () => this._restore(draftHtml));
+
+    const discardBtn = document.createElement('button');
+    discardBtn.type = 'button';
+    discardBtn.className = 'an-btn an-asr-btn-discard';
+    discardBtn.textContent = discardLabel;
+    discardBtn.addEventListener('click', () => this._discard());
+
+    banner.appendChild(msg);
+    banner.appendChild(restoreBtn);
+    banner.appendChild(discardBtn);
+
+    this._banner = banner;
+    const container = this.context.layoutInfo.container;
+    container.insertBefore(banner, container.firstChild);
+  }
+
+  _restore(draftHtml) {
+    this.context.setHTML(draftHtml);
+    this.context.clearHistory();
+    this._removeBanner();
+
+    if (typeof this.options.onAutoSaveRestore === 'function') {
+      this.options.onAutoSaveRestore(draftHtml, this.context);
+    }
+  }
+
+  _discard() {
+    const key = this.options.autoSaveKey;
+    try {
+      localStorage.removeItem(key);
+      localStorage.removeItem(key + ':asrmeta');
+    } catch (_) {}
+    this._removeBanner();
+  }
+
+  _removeBanner() {
+    if (this._banner && this._banner.parentNode) {
+      this._banner.parentNode.removeChild(this._banner);
+    }
+    this._banner = null;
+  }
+}

package/src/js/module/BubbleToolbar.js

@@ -0,0 +1,243 @@
+/**
+ * BubbleToolbar.js — A mini floating toolbar that appears above the current
+ * text selection, allowing quick access to common formatting actions without
+ * reaching for the main toolbar.
+ *
+ * Activated when `bubbleToolbar: true`.  The set of visible buttons is
+ * controlled by `bubbleToolbarItems` (array of button name strings).
+ *
+ * Built-in names: 'bold', 'italic', 'underline', 'strikethrough',
+ *   'link', 'foreColor', 'removeFormat', 'inlineCode'.
+ * Any name not found in the built-in map is silently ignored.
+ */
+
+import { on } from '../core/dom.js';
+
+// Minimal SVG icon set — only what the bubble toolbar needs.
+const _S = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+const _svg = (p) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" ${_S} style="display:block">${p}</svg>`;
+
+const _ICONS = {
+  bold:          _svg('<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/>'),
+  italic:        _svg('<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>'),
+  underline:     _svg('<path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/>'),
+  strikethrough: _svg('<path d="M17.3 12H6.7"/><path d="M10 6.5C10 5.1 11.1 4 12.5 4c1.4 0 2.5 1.1 2.5 2.5 0 .8-.4 1.5-1 2"/><path d="M14 17.5C14 19 12.9 20 11.5 20 10.1 20 9 18.9 9 17.5c0-.8.4-1.5 1-2"/>'),
+  link:          _svg('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'),
+  foreColor:     _svg('<path d="M4 20L12 4L20 20"/><line x1="7.5" y1="14" x2="16.5" y2="14"/>'),
+  removeFormat:  _svg('<path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/>'),
+  inlineCode:    _svg('<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2a2 2 0 0 1-2 2v5a2 2 0 0 1-2 2h-1"/>'),
+};
+
+const _ACTIONS = {
+  bold:          (ctx) => ctx.invoke('editor.bold'),
+  italic:        (ctx) => ctx.invoke('editor.italic'),
+  underline:     (ctx) => ctx.invoke('editor.underline'),
+  strikethrough: (ctx) => ctx.invoke('editor.strikethrough'),
+  link:          (ctx) => ctx.invoke('linkDialog.show'),
+  foreColor:     (ctx) => {
+    const color = window.prompt('Text color (hex or name):', '#000000');
+    if (color) ctx.invoke('editor.foreColor', color);
+  },
+  removeFormat:  (ctx) => ctx.invoke('editor.removeFormat'),
+  inlineCode:    (ctx) => ctx.invoke('editor.inlineCode'),
+};
+
+const _ACTIVE = {
+  bold:          () => document.queryCommandState('bold'),
+  italic:        () => document.queryCommandState('italic'),
+  underline:     () => document.queryCommandState('underline'),
+  strikethrough: () => document.queryCommandState('strikeThrough'),
+};
+
+export class BubbleToolbar {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+
+    /** @type {HTMLElement|null} */
+    this._el = null;
+    this._visible = false;
+    this._rafId = null;
+    this._contextMenuOpen = false;
+    this._disposers = [];
+
+    this._onSelectionChange = this._onSelectionChange.bind(this);
+    this._onMousedown = this._onMousedown.bind(this);
+    this._onKeydown = this._onKeydown.bind(this);
+    this._onContextMenu = this._onContextMenu.bind(this);
+  }
+
+  initialize() {
+    if (!this.options.bubbleToolbar) return this;
+    this._build();
+    const d1 = on(document, 'selectionchange', this._onSelectionChange);
+    const d2 = on(document, 'mousedown', this._onMousedown);
+    const d3 = on(document, 'keydown', this._onKeydown);
+    const d4 = on(document, 'contextmenu', this._onContextMenu);
+    const d5 = this.context.on('contextMenu:show', () => {
+      this._contextMenuOpen = true;
+      this._hide();
+    });
+    const d6 = this.context.on('contextMenu:hide', () => {
+      this._contextMenuOpen = false;
+    });
+    this._disposers.push(d1, d2, d3, d4, d5, d6);
+    return this;
+  }
+
+  destroy() {
+    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    this._el = null;
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    cancelAnimationFrame(this._rafId);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Build
+  // ---------------------------------------------------------------------------
+
+  _build() {
+    const el = document.createElement('div');
+    el.className = 'an-bubble-toolbar';
+    el.setAttribute('role', 'toolbar');
+    el.setAttribute('aria-label', 'Formatting');
+
+    const items = this.options.bubbleToolbarItems || ['bold', 'italic', 'underline', 'link', 'foreColor', 'removeFormat'];
+    for (const name of items) {
+      if (!_ICONS[name] || !_ACTIONS[name]) continue;
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'an-bubble-btn';
+      btn.dataset.name = name;
+      btn.setAttribute('aria-label', name);
+      btn.innerHTML = _ICONS[name];
+      btn.addEventListener('mousedown', (e) => {
+        // Prevent mousedown from collapsing selection before click fires
+        e.preventDefault();
+      });
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.context.invoke('editor.focus');
+        _ACTIONS[name](this.context);
+        this.context.invoke('editor.afterCommand');
+        this._syncActive();
+      });
+      el.appendChild(btn);
+    }
+
+    document.body.appendChild(el);
+    this._el = el;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / hide
+  // ---------------------------------------------------------------------------
+
+  _show(rect) {
+    if (!this._el) return;
+    const el = this._el;
+
+    // Measure while invisible — position:fixed so no scroll offset needed
+    el.style.visibility = 'hidden';
+    el.style.display = 'flex';
+
+    const bw = el.offsetWidth;
+    const bh = el.offsetHeight;
+    const gap = 8;
+
+    // Center horizontally above the selection; flip below if no room above
+    let left = rect.left + rect.width / 2 - bw / 2;
+    let top = rect.top - bh - gap;
+
+    left = Math.max(8, Math.min(left, window.innerWidth - bw - 8));
+
+    if (top < 8) {
+      top = rect.bottom + gap;
+    }
+
+    el.style.top = `${top}px`;
+    el.style.left = `${left}px`;
+    el.style.visibility = '';
+
+    this._syncActive();
+    this._visible = true;
+  }
+
+  _hide() {
+    if (!this._el) return;
+    this._el.style.display = 'none';
+    this._visible = false;
+  }
+
+  _syncActive() {
+    if (!this._el) return;
+    this._el.querySelectorAll('.an-bubble-btn').forEach((btn) => {
+      const name = btn.dataset.name;
+      const activeFn = _ACTIVE[name];
+      btn.classList.toggle('an-active', !!(activeFn && activeFn()));
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Events
+  // ---------------------------------------------------------------------------
+
+  _onSelectionChange() {
+    cancelAnimationFrame(this._rafId);
+    this._rafId = requestAnimationFrame(() => {
+      if (this._contextMenuOpen) return;
+
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed || !sel.rangeCount) {
+        this._hide();
+        return;
+      }
+
+      const editable = this.context.layoutInfo.editable;
+      if (!editable.contains(sel.anchorNode)) {
+        this._hide();
+        return;
+      }
+
+      // Don't show inside code view or read-only
+      if (this.context.options.readOnly) {
+        this._hide();
+        return;
+      }
+
+      const range = sel.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (!rect || rect.width === 0) {
+        this._hide();
+        return;
+      }
+
+      this._show(rect);
+    });
+  }
+
+  _onMousedown(e) {
+    // Hide when clicking outside both the editable and the bubble toolbar
+    if (!this._visible) return;
+    if (this._el && this._el.contains(e.target)) return;
+    const editable = this.context.layoutInfo.editable;
+    if (editable.contains(e.target)) return;
+    this._hide();
+  }
+
+  _onKeydown(e) {
+    if (e.key === 'Escape' && this._visible) {
+      this._hide();
+    }
+  }
+
+  _onContextMenu() {
+    // Hide immediately on right-click — contextMenu:show event will also set the flag,
+    // but firing here prevents a one-frame flicker before the event propagates.
+    this._hide();
+  }
+}

package/src/js/module/ContextMenu.js

@@ -377,12 +377,30 @@ export class ContextMenu {
     if (!editable.contains(event.target)) return;
     if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
     event.preventDefault();
-    this._lastX = event.clientX;
-    this._lastY = event.clientY;
+
     const winSel = window.getSelection();
     this._savedRange = (winSel && winSel.rangeCount > 0) ? winSel.getRangeAt(0).cloneRange() : null;
     this._renderItems(this._items);
-    this.showAt(event.clientX, event.clientY);
+
+    // Open below the selected text so the selection stays visible.
+    // Only apply when there is a real (non-collapsed) selection — a collapsed range
+    // (cursor only) also has height > 0, which would misplace the menu relative
+    // to the actual click point.
+    let openX = event.clientX;
+    let openY = event.clientY;
+    if (this._savedRange && !this._savedRange.collapsed) {
+      try {
+        const selRect = this._savedRange.getBoundingClientRect();
+        if (selRect.width > 0 && selRect.height > 0) {
+          // Keep X at click position (feels natural); Y just below the selection.
+          openY = selRect.bottom + 4;
+        }
+      } catch (_) {}
+    }
+
+    this._lastX = openX;
+    this._lastY = openY;
+    this.showAt(openX, openY);
   }
 
   _maybeHide(event) {
@@ -395,39 +413,22 @@ export class ContextMenu {
     this.el.style.display = 'block';
     this._reposition(x, y);
     this.el.setAttribute('aria-hidden', 'false');
+    this.context.triggerEvent('contextMenu:show');
   }
 
   _reposition(x, y) {
     if (!this.el) return;
     const rx = x !== undefined ? x : this._lastX;
     const ry = y !== undefined ? y : this._lastY;
-    const rect = this.el.getBoundingClientRect();
+    const w = this.el.offsetWidth;
+    const h = this.el.offsetHeight;
     let left = rx;
     let top = ry;
-    if (left + rect.width > window.innerWidth) left = window.innerWidth - rect.width - 8;
+    // Clamp to viewport so the menu never overflows the screen edge
+    if (left + w > window.innerWidth - 8) left = window.innerWidth - w - 8;
     if (left < 8) left = 8;
-    if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 8;
+    if (top + h > window.innerHeight - 8) top = window.innerHeight - h - 8;
     if (top < 8) top = 8;
-
-    // Avoid covering the saved selection range
-    if (this._savedRange) {
-      try {
-        const sel = this._savedRange.getBoundingClientRect();
-        if (sel.width > 0 || sel.height > 0) {
-          const overlaps = top < sel.bottom && (top + rect.height) > sel.top &&
-                           left < sel.right  && (left + rect.width)  > sel.left;
-          if (overlaps) {
-            const belowTop = sel.bottom + 6;
-            if (belowTop + rect.height <= window.innerHeight - 8) {
-              top = belowTop;
-            } else {
-              top = Math.max(8, sel.top - rect.height - 6);
-            }
-          }
-        }
-      } catch (_) { /* stale range — ignore */ }
-    }
-
     this.el.style.left = `${left}px`;
     this.el.style.top = `${top}px`;
   }
@@ -436,6 +437,7 @@ export class ContextMenu {
     if (!this.el) return;
     this.el.style.display = 'none';
     this.el.setAttribute('aria-hidden', 'true');
+    this.context.triggerEvent('contextMenu:hide');
   }
 
   // ---------------------------------------------------------------------------