autumnnote 1.6.2 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "WYSIWYG rich-text editor built with vanilla JavaScript — zero dependencies, no jQuery. Dark mode, @mention, markdown shortcuts, bubble toolbar. React and Vue 3 wrappers included.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",

package/src/js/index.js

@@ -141,7 +141,7 @@ const AutumnNote = {
   registerButton(btnDef) { registerButton(btnDef); return this; },
 
   /** Library version */
-  version: '1.6.2',
+  version: '1.6.3',
 };
 
 // ---------------------------------------------------------------------------

package/src/js/module/EmojiDialog.js

@@ -3,8 +3,8 @@
  * Click an emoji to insert it directly at the caret — no extra "Insert" step.
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
+import { createElement, on, makeDraggable } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
 // ---------------------------------------------------------------------------
 // Emoji catalogue
@@ -500,37 +500,18 @@ const EMOJI_LIST = [
 // Dialog class
 // ---------------------------------------------------------------------------
 
-export class EmojiDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-    this._activeCat = 'all';
-  }
+export class EmojiDialog extends BaseDialog {
+  _activeCat = 'all';
 
   // ---------------------------------------------------------------------------
   // Lifecycle
   // ---------------------------------------------------------------------------
 
   initialize() {
-    // Dialog grid is built lazily on first show() to avoid rendering ~500 DOM nodes at load time.
+    // Grid is built lazily in show() to avoid ~500 DOM nodes at load time.
     return this;
   }
 
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.remove();
-    }
-    this._dialog = null;
-  }
-
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
@@ -540,9 +521,7 @@ export class EmojiDialog {
       this._dialog = this._buildDialog();
       document.body.appendChild(this._dialog);
     }
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._activeCat = 'all';
     this._searchInput.value = '';
     this._updateCatTabs();
@@ -612,6 +591,7 @@ export class EmojiDialog {
       grid.appendChild(cell);
     });
     this._grid = grid;
+    this._firstInput = searchInput;
 
     // Cancel only — clicking an emoji inserts immediately
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
@@ -724,21 +704,4 @@ export class EmojiDialog {
     this.context.invoke('editor.afterCommand');
   }
 
-  // ---------------------------------------------------------------------------
-  // Open / Close
-  // ---------------------------------------------------------------------------
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._searchInput?.focus(), 50);
-    }
-  }
-
-  _close() {
-    if (this._dialog) this._dialog.style.display = 'none';
-    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
-    this._savedRange = null;
-  }
 }

package/src/js/module/FindReplace.js

@@ -8,14 +8,13 @@
  */
 
 import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
-export class FindReplace {
+export class FindReplace extends BaseDialog {
   /** @param {import('../Context.js').Context} context */
   constructor(context) {
-    this.context = context;
+    super(context);
 
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
     /** @type {HTMLInputElement|null} */
     this._findInput = null;
     /** @type {HTMLInputElement|null} */
@@ -39,8 +38,6 @@ export class FindReplace {
     this._lastQuery = null;
     this._lastCaseSensitive = null;
 
-    this._disposers = [];
-    this._removeTrap = null;
     this._focusTimer = null;
   }
 
@@ -48,22 +45,11 @@ export class FindReplace {
   // Lifecycle
   // ---------------------------------------------------------------------------
 
-  initialize() {
-    this._dialog = this._buildDialog();
-    document.body.appendChild(this._dialog);
-    return this;
-  }
-
   destroy() {
     clearTimeout(this._focusTimer);
     this._focusTimer = null;
     this._clearHighlights();
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.remove();
-    }
-    this._dialog = null;
+    super.destroy();
   }
 
   // ---------------------------------------------------------------------------

package/src/js/module/IconDialog.js

@@ -2,8 +2,8 @@
  * IconDialog.js - Browse and insert FontAwesome Free icons
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
+import { createElement, on, makeDraggable } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
 // ---------------------------------------------------------------------------
 // Icon catalogue — FA 6 Free Solid slug names, grouped by category
@@ -247,19 +247,9 @@ const ICON_LIST = [
   ['puzzle-piece',          'objects'],
 ];
 
-export class IconDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-    this._selectedIcon = null;
-    this._activeCat = 'all';
-  }
+export class IconDialog extends BaseDialog {
+  _selectedIcon = null;
+  _activeCat = 'all';
 
   // ---------------------------------------------------------------------------
   // Lifecycle
@@ -267,7 +257,7 @@ export class IconDialog {
 
   initialize() {
     this._ensureFontAwesome();
-    // Dialog grid is built lazily on first show() to avoid rendering ~250 icon cells at load time.
+    // Grid is built lazily in show() to avoid ~250 icon cells at load time.
     return this;
   }
 
@@ -294,13 +284,6 @@ export class IconDialog {
     document.head.appendChild(link);
   }
 
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    this._dialog?.remove();
-    this._dialog = null;
-  }
-
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
@@ -310,9 +293,7 @@ export class IconDialog {
       this._dialog = this._buildDialog();
       document.body.appendChild(this._dialog);
     }
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._selectedIcon = null;
     this._activeCat = 'all';
     this._searchInput.value = '';
@@ -360,6 +341,7 @@ export class IconDialog {
       autocomplete: 'off',
     }));
     this._searchInput = searchInput;
+    this._firstInput = searchInput;
 
     // Category tabs
     const catBar = createElement('div', { class: 'an-icon-cats' });
@@ -629,22 +611,8 @@ export class IconDialog {
     this.context.invoke('editor.afterCommand');
   }
 
-  // ---------------------------------------------------------------------------
-  // Open / Close
-  // ---------------------------------------------------------------------------
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._searchInput?.focus(), 50);
-    }
-  }
-
   _close() {
-    if (this._dialog) this._dialog.style.display = 'none';
-    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
-    this._savedRange = null;
     this._selectedIcon = null;
+    super._close();
   }
 }

package/src/js/module/ShortcutsDialog.js

@@ -3,7 +3,8 @@
  * Opened via the toolbar '?' button or Shift+? inside the editor.
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
 const SHORTCUTS = [
   {
@@ -51,64 +52,37 @@ const SHORTCUTS = [
   },
 ];
 
-export class ShortcutsDialog {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    this._dialog = null;
-    this._closeBtn = null;
-    this._disposers = [];
-  }
-
-  initialize() {
-    this._dialog = this._buildDialog();
-    document.body.appendChild(this._dialog);
-    return this;
-  }
+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>`;
 
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    this._dialog?.remove();
-    this._dialog = null;
-  }
+export class ShortcutsDialog extends BaseDialog {
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
 
   show() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._closeBtn?.focus(), 50);
-    }
+    this._open();
   }
 
-  _close() {
-    if (this._dialog) this._dialog.style.display = 'none';
-    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
-  }
+  // ---------------------------------------------------------------------------
+  // Build dialog
+  // ---------------------------------------------------------------------------
 
   _buildDialog() {
-    const overlay = createElement('div', {
-      class: 'an-dialog-overlay',
-      role: 'dialog',
-      'aria-modal': 'true',
-      'aria-label': this.context.locale.shortcutsDialog.ariaLabel,
-    });
+    const L = this.context.locale.shortcutsDialog;
+    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
+    box.classList.add('an-shortcuts-box');
 
-    const box = createElement('div', { class: 'an-dialog-box an-shortcuts-box' });
-
-    // Title row with close button
-    const titleRow = createElement('div', { class: 'an-icon-title-row' });
-    const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = this.context.locale.shortcutsDialog.title;
+    // Close button pinned to the right of the header row
     const closeBtn = createElement('button', {
       type: 'button',
       class: 'an-icon-close',
-      'aria-label': this.context.locale.shortcutsDialog.close,
+      'aria-label': L.close,
+      style: 'margin-left:auto',
     });
     closeBtn.textContent = '×';
     this._closeBtn = closeBtn;
-    titleRow.append(title, closeBtn);
-    box.appendChild(titleRow);
+    this._firstInput = closeBtn;
+    box.querySelector('.an-dialog-header').appendChild(closeBtn);
 
     const shortcuts = this.context.locale.shortcutsDialog.shortcuts || SHORTCUTS;
     shortcuts.forEach(({ category, items }) => {
@@ -129,11 +103,8 @@ export class ShortcutsDialog {
       box.appendChild(table);
     });
 
-    overlay.appendChild(box);
-
     const d1 = on(closeBtn, 'click', () => this._close());
-    const d2 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
-    this._disposers.push(d1, d2);
+    this._disposers.push(d1);
 
     return overlay;
   }