autumnnote 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.6.1",
+  "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/Context.js

@@ -159,8 +159,10 @@ export class Context {
     register('mention', Mention);
 
     // Custom modules registered via AutumnNote.registerModule()
-    for (const [name, ModuleClass] of _customModules) {
-      register(name, ModuleClass);
+    if (_customModules.size > 0) {
+      for (const [name, ModuleClass] of _customModules) {
+        register(name, ModuleClass);
+      }
     }
   }
 
@@ -220,6 +222,7 @@ export class Context {
   }
 
   _applyGlobalPlugins() {
+    if (_globalPlugins.size === 0) return;
     for (const { plugin, options } of _globalPlugins.values()) {
       this._installPlugin(plugin, options);
     }

package/src/js/index.js

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

package/src/js/module/BaseDialog.js

@@ -0,0 +1,126 @@
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
+import { withSavedRange } from '../core/range.js';
+
+/**
+ * Shared lifecycle and shell-building logic for all modal dialogs.
+ * Subclasses implement _buildDialog() for their specific form fields.
+ */
+export class BaseDialog {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    /** @type {HTMLElement|null} */
+    this._dialog = null;
+    this._disposers = [];
+    this._savedRange = null;
+    /** @type {HTMLElement|null} First focusable input; set by subclass in _buildDialog(). */
+    this._firstInput = null;
+    this._removeTrap = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle (shared)
+  // ---------------------------------------------------------------------------
+
+  initialize() {
+    this._dialog = this._buildDialog();
+    document.body.appendChild(this._dialog);
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dialog?.parentNode) {
+      this._dialog.remove();
+    }
+    this._dialog = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Shared show helpers
+  // ---------------------------------------------------------------------------
+
+  /** Saves the current selection range before opening the dialog. */
+  _saveRange() {
+    withSavedRange((range) => { this._savedRange = range; });
+  }
+
+  _open() {
+    if (this._dialog) {
+      this._dialog.style.display = 'flex';
+      this._removeTrap = trapFocus(this._dialog, () => this._close());
+      setTimeout(() => this._firstInput && this._firstInput.focus(), 50);
+    }
+  }
+
+  _close() {
+    if (this._dialog) this._dialog.style.display = 'none';
+    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
+    this._savedRange = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Shell builders (used by subclass _buildDialog())
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Builds the overlay + box + header shell common to all dialogs.
+   * Also wires up draggable and overlay-click-to-close.
+   * @param {string} ariaLabel
+   * @param {string} iconHtml  Raw SVG string for the dialog icon
+   * @param {string} titleText
+   * @returns {{ overlay: HTMLElement, box: HTMLElement }}
+   */
+  _buildDialogShell(ariaLabel, iconHtml, titleText) {
+    const overlay = createElement('div', {
+      class: 'an-dialog-overlay',
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-label': ariaLabel,
+    });
+    const box = createElement('div', { class: 'an-dialog-box' });
+
+    const header = createElement('div', { class: 'an-dialog-header' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon' });
+    iconEl.innerHTML = iconHtml;
+    const titleEl = createElement('h3', { class: 'an-dialog-title' });
+    titleEl.textContent = titleText;
+    header.appendChild(iconEl);
+    header.appendChild(titleEl);
+
+    box.appendChild(header);
+    overlay.appendChild(box);
+    makeDraggable(header, box);
+
+    const d = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
+    this._disposers.push(d);
+
+    return { overlay, box };
+  }
+
+  /**
+   * Builds an action button row with a primary insert button and a cancel button.
+   * Disposers are registered automatically.
+   * @param {string} insertLabel
+   * @param {string} cancelLabel
+   * @param {() => void} onInsert
+   * @returns {HTMLElement}
+   */
+  _buildButtonRow(insertLabel, cancelLabel, onInsert) {
+    const btnRow = createElement('div', { class: 'an-dialog-actions' });
+    const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
+    insertBtn.textContent = insertLabel;
+    const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
+    cancelBtn.textContent = cancelLabel;
+    btnRow.appendChild(insertBtn);
+    btnRow.appendChild(cancelBtn);
+
+    const d1 = on(insertBtn, 'click', onInsert);
+    const d2 = on(cancelBtn, 'click', () => this._close());
+    this._disposers.push(d1, d2);
+
+    return btnRow;
+  }
+}

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/ImageDialog.js

@@ -3,49 +3,18 @@
  * Inspired by Summernote's ImageDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
-import { withSavedRange } from '../core/range.js';
-
-export class ImageDialog {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    this.options = context.options;
-    /** @type {HTMLElement|null} */
-    this._dialog = null;
-    this._disposers = [];
-    this._savedRange = null;
-  }
+import { createElement, on } from '../core/dom.js';
+import { BaseDialog } from './BaseDialog.js';
 
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  initialize() {
-    this._dialog = this._buildDialog();
-    document.body.appendChild(this._dialog);
-    return this;
-  }
-
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.remove();
-    }
-    this._dialog = null;
-  }
+const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
 
+export class ImageDialog extends BaseDialog {
   // ---------------------------------------------------------------------------
   // Public API
   // ---------------------------------------------------------------------------
 
   show() {
-    withSavedRange((range) => {
-      this._savedRange = range;
-    });
+    this._saveRange();
     this._urlInput.value = '';
     this._altInput.value = '';
     if (this._fileInput) this._fileInput.value = '';
@@ -58,23 +27,9 @@ export class ImageDialog {
 
   _buildDialog() {
     const L = this.context.locale.imageDialog;
-    const overlay = createElement('div', {
-      class: 'an-dialog-overlay',
-      role: 'dialog',
-      'aria-modal': 'true',
-      'aria-label': L.ariaLabel,
-    });
-    const box = createElement('div', { class: 'an-dialog-box' });
-
-    const header = createElement('div', { class: 'an-dialog-header' });
-    const iconEl = createElement('span', { class: 'an-dialog-icon' });
-    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-    const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = L.title;
-    header.appendChild(iconEl);
-    header.appendChild(title);
+    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
 
-    // URL tab
+    // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = L.imageUrl;
     const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
@@ -84,6 +39,7 @@ export class ImageDialog {
       autocomplete: 'off',
     }));
     this._urlInput = urlInput;
+    this._firstInput = urlInput;
 
     // Alt text
     const altLabel = createElement('label', { class: 'an-label' });
@@ -96,7 +52,7 @@ export class ImageDialog {
     }));
     this._altInput = altInput;
 
-    box.append(header, urlLabel, urlInput, altLabel, altInput);
+    box.append(urlLabel, urlInput, altLabel, altInput);
 
     // Alignment
     const alignLabel = createElement('label', { class: 'an-label' });
@@ -118,6 +74,7 @@ export class ImageDialog {
     });
     this._alignRow = alignRow;
     box.append(alignLabel, alignRow);
+
     if (this.options.allowImageUpload !== false) {
       const fileLabel = createElement('label', { class: 'an-label' });
       fileLabel.textContent = L.uploadLabel;
@@ -135,25 +92,12 @@ export class ImageDialog {
       box.append(fileLabel, fileInput, fileHint);
     }
 
-    // Buttons
-    const btnRow = createElement('div', { class: 'an-dialog-actions' });
-    const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    insertBtn.textContent = L.insertBtn;
-    const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = L.cancelBtn;
-    btnRow.appendChild(insertBtn);
-    btnRow.appendChild(cancelBtn);
-
+    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
     box.append(btnRow);
-    overlay.appendChild(box);
-    makeDraggable(header, box);
 
-    const d1 = on(insertBtn, 'click', () => this._onInsert());
-    const d2 = on(cancelBtn, 'click', () => this._close());
-    const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
     const d4 = on(urlInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
     const d5 = on(altInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    this._disposers.push(d1, d2, d3, d4, d5);
+    this._disposers.push(d4, d5);
 
     return overlay;
   }
@@ -217,18 +161,4 @@ export class ImageDialog {
     this.context.invoke('editor.insertImage', src, alt, align);
     this._close();
   }
-
-  _open() {
-    if (this._dialog) {
-      this._dialog.style.display = 'flex';
-      this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._urlInput && this._urlInput.focus(), 50);
-    }
-  }
-
-  _close() {
-    if (this._dialog) this._dialog.style.display = 'none';
-    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
-    this._savedRange = null;
-  }
 }