autumnnote 1.6.2 → 1.6.5

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;
   }

package/src/js/module/TableTooltip.js

@@ -58,7 +58,7 @@ function getCellAfterVisualCol(row, visualIdx) {
     if (vIdx > visualIdx) {
       // next cell after the one that starts at / spans visualIdx
       const next = c.nextElementSibling;
-      return (next && next.tagName === 'TD' || next && next.tagName === 'TH') ? /** @type {HTMLTableCellElement} */ (next) : null;
+      return (next?.tagName === 'TD' || next?.tagName === 'TH') ? /** @type {HTMLTableCellElement} */ (next) : null;
     }
   }
   return null;
@@ -388,11 +388,11 @@ export class TableTooltip {
     this._disposers = [];
     if (this._el && this._el.parentNode) this._el.remove();
     this._el = null;
-    if (this._sizePopover && this._sizePopover.parentNode) {
+    if (this._sizePopover?.parentNode) {
       this._sizePopover.remove();
     }
     this._sizePopover = null;
-    if (this._shadePopover && this._shadePopover.parentNode) {
+    if (this._shadePopover?.parentNode) {
       this._shadePopover.remove();
     }
     this._shadePopover = null;
@@ -604,7 +604,7 @@ export class TableTooltip {
   _getCell() {
     // Prefer the cell under the current text cursor (most intuitive for operations)
     const sel = globalThis.getSelection();
-    if (sel && sel.rangeCount) {
+    if (sel?.rangeCount) {
       let container = sel.getRangeAt(0).commonAncestorContainer;
       if (container.nodeType === 3) container = container.parentElement;
       const cellFromSel = /** @type {Element} */ (container)?.closest('td, th');
@@ -659,7 +659,7 @@ export class TableTooltip {
     if (!startCell) return [];
     if (!endCell || startCell === endCell) return [startCell];
     const table = startCell.closest('table');
-    if (!table || !table.contains(endCell)) return [startCell];
+    if (!table?.contains(endCell)) return [startCell];
 
     const { gridMap, cellPos } = buildGridMap(table);
     const sp = cellPos.get(startCell);
@@ -742,8 +742,8 @@ export class TableTooltip {
     for (let i = 0; i < colCount; i++) {
       const td = createElement('td', {}, ['\u00a0']);
       const ref = refCells[i];
-      if (ref && ref.style.width)    td.style.width    = ref.style.width;
-      if (ref && ref.style.minWidth) td.style.minWidth = ref.style.minWidth;
+      if (ref?.style.width)    td.style.width    = ref.style.width;
+      if (ref?.style.minWidth) td.style.minWidth = ref.style.minWidth;
       newRow.appendChild(td);
     }
     if (position === 'above') refRow.parentElement?.insertBefore(newRow, refRow);

package/src/js/module/Toolbar.js

@@ -399,7 +399,7 @@ export class Toolbar {
 
     const saveSelection = () => {
       const sel = globalThis.getSelection();
-      savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
+      savedRange = sel?.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
     };
 
     const restoreSelection = () => {
@@ -543,7 +543,7 @@ export class Toolbar {
       const value    = (typeof item === 'object') ? item.value    : item;
       const label    = (typeof item === 'object')
         ? (def.name === 'paragraphStyle'
-            ? ((this.context.locale.toolbar.paragraphItems || {})[item.value] || item.label)
+            ? (this.context.locale.toolbar.paragraphItems?.[item.value] || item.label)
             : item.label)
         : item;
       const isHeader = (typeof item === 'object') && !!item.disabled;
@@ -563,7 +563,7 @@ export class Toolbar {
     let _savedRange = null;
     const dMousedown = on(select, 'mousedown', () => {
       const sel = globalThis.getSelection();
-      _savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
+      _savedRange = sel?.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
     });
 
     const disposer = on(select, 'change', (e) => {
@@ -617,15 +617,13 @@ export class Toolbar {
       } else {
         btn.textContent = btnDef.icon || btnDef.name;
       }
-    } else {
+    } else if (_SVG_MAP.has(btnDef.icon)) {
       // FontAwesome absent: use SVG fallback when available
-      if (_SVG_MAP.has(btnDef.icon)) {
-        btn.innerHTML = _SVG_MAP.get(btnDef.icon);
-      } else if (_SVG_MAP.has(btnDef.name)) {
-        btn.innerHTML = _SVG_MAP.get(btnDef.name);
-      } else {
-        btn.textContent = btnDef.icon || btnDef.name;
-      }
+      btn.innerHTML = _SVG_MAP.get(btnDef.icon);
+    } else if (_SVG_MAP.has(btnDef.name)) {
+      btn.innerHTML = _SVG_MAP.get(btnDef.name);
+    } else {
+      btn.textContent = btnDef.icon || btnDef.name;
     }
 
     const disposer = on(btn, 'click', (event) => {