autumnnote 1.0.8 → 1.1.0

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/module/ShortcutsDialog.js

@@ -93,7 +93,7 @@ export class ShortcutsDialog {
       class: 'an-dialog-overlay',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Keyboard Shortcuts',
+      'aria-label': this.context.locale.shortcutsDialog.ariaLabel,
     });
 
     const box = createElement('div', { class: 'an-dialog-box an-shortcuts-box' });
@@ -101,18 +101,19 @@ export class ShortcutsDialog {
     // Title row with close button
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Keyboard Shortcuts';
+    title.textContent = this.context.locale.shortcutsDialog.title;
     const closeBtn = createElement('button', {
       type: 'button',
       class: 'an-icon-close',
-      'aria-label': 'Close',
+      'aria-label': this.context.locale.shortcutsDialog.close,
     });
     closeBtn.textContent = '×';
     this._closeBtn = closeBtn;
     titleRow.append(title, closeBtn);
     box.appendChild(titleRow);
 
-    SHORTCUTS.forEach(({ category, items }) => {
+    const shortcuts = this.context.locale.shortcutsDialog.shortcuts || SHORTCUTS;
+    shortcuts.forEach(({ category, items }) => {
       const catEl = createElement('div', { class: 'an-shortcuts-cat' });
       catEl.textContent = category;
       box.appendChild(catEl);

package/src/js/module/Statusbar.js

@@ -82,7 +82,7 @@ export class Statusbar {
     if (this.options.resizable !== false) {
       const handle = createElement('div', {
         class: 'an-resize-handle',
-        title: 'Resize editor',
+        title: this.context.locale.statusbar.resizeHandle,
         'aria-hidden': 'true',
       });
       this._bindResize(handle);
@@ -220,12 +220,13 @@ export class Statusbar {
     const maxWords = this.options.maxWords || 0;
     const maxChars = this.options.maxChars || 0;
 
+    const LS = this.context.locale.statusbar;
     this._wordCountEl.textContent = maxWords
-      ? `Words: ${words}/${maxWords}`
-      : `Words: ${words}`;
+      ? LS.wordsLimit(words, maxWords)
+      : LS.words(words);
     this._charCountEl.textContent = maxChars
-      ? `Chars: ${chars}/${maxChars}`
-      : `Chars: ${chars}`;
+      ? LS.charsLimit(chars, maxChars)
+      : LS.chars(chars);
 
     // Apply warning / exceeded styles
     _applyLimitClass(this._wordCountEl, words, maxWords);

package/src/js/module/TableTooltip.js

@@ -376,55 +376,56 @@ export class TableTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
+    const L = this.context.locale.tooltips.table;
     const el = createElement('div', {
       class: 'an-link-tooltip an-table-tooltip',
       role: 'toolbar',
-      'aria-label': 'Table actions',
+      'aria-label': L.ariaLabel,
     });
     el.style.display = 'none';
 
     // Label
     this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = 'Table';
+    this._label.textContent = L.label;
     el.appendChild(this._label);
 
     el.appendChild(this._sep());
 
     // Select-cells toggle
-    this._selectBtn = this._makeBtn(ICONS.selectCells, 'Select Cells', () => this._toggleSelectMode());
+    this._selectBtn = this._makeBtn(ICONS.selectCells, L.selectCells, () => this._toggleSelectMode());
     el.appendChild(this._selectBtn);
 
     el.appendChild(this._sep());
 
     // Row operations
-    el.appendChild(this._makeBtn(ICONS.rowAbove, 'Add Row Above', () => this._addRow('above')));
-    el.appendChild(this._makeBtn(ICONS.rowBelow, 'Add Row Below', () => this._addRow('below')));
-    el.appendChild(this._makeBtn(ICONS.deleteRow, 'Delete Row',   () => this._deleteRow()));
+    el.appendChild(this._makeBtn(ICONS.rowAbove, L.addRowAbove, () => this._addRow('above')));
+    el.appendChild(this._makeBtn(ICONS.rowBelow, L.addRowBelow, () => this._addRow('below')));
+    el.appendChild(this._makeBtn(ICONS.deleteRow, L.deleteRow,  () => this._deleteRow()));
 
     el.appendChild(this._sep());
 
     // Column operations
-    el.appendChild(this._makeBtn(ICONS.colLeft,   'Add Column Left',  () => this._addColumn('left')));
-    el.appendChild(this._makeBtn(ICONS.colRight,  'Add Column Right', () => this._addColumn('right')));
-    el.appendChild(this._makeBtn(ICONS.deleteCol, 'Delete Column',    () => this._deleteColumn()));
+    el.appendChild(this._makeBtn(ICONS.colLeft,   L.addColumnLeft,   () => this._addColumn('left')));
+    el.appendChild(this._makeBtn(ICONS.colRight,  L.addColumnRight,  () => this._addColumn('right')));
+    el.appendChild(this._makeBtn(ICONS.deleteCol, L.deleteColumn,    () => this._deleteColumn()));
 
     el.appendChild(this._sep());
 
     // Merge cells
-    el.appendChild(this._makeBtn(ICONS.mergeCells,   'Merge Cells',   () => this._mergeCells()));
-    el.appendChild(this._makeBtn(ICONS.unmergeCells, 'Unmerge Cells', () => this._unmergeCells()));
+    el.appendChild(this._makeBtn(ICONS.mergeCells,   L.mergeCells,   () => this._mergeCells()));
+    el.appendChild(this._makeBtn(ICONS.unmergeCells, L.unmergeCells, () => this._unmergeCells()));
 
     el.appendChild(this._sep());
 
     // Resize
-    el.appendChild(this._makeBtn(ICONS.colWidth,   'Column Width',      () => this._openSizePopover('col')));
-    el.appendChild(this._makeBtn(ICONS.rowHeight,  'Row Height',        () => this._openSizePopover('row')));
-    el.appendChild(this._makeBtn(ICONS.tableBorder,'Table Border Width',() => this._openSizePopover('border')));
+    el.appendChild(this._makeBtn(ICONS.colWidth,   L.columnWidth,      () => this._openSizePopover('col')));
+    el.appendChild(this._makeBtn(ICONS.rowHeight,  L.rowHeight,        () => this._openSizePopover('row')));
+    el.appendChild(this._makeBtn(ICONS.tableBorder,L.tableBorderWidth, () => this._openSizePopover('border')));
 
     el.appendChild(this._sep());
 
     // Delete table (danger)
-    el.appendChild(this._makeBtn(ICONS.deleteTable, 'Delete Table', () => this._deleteTable(), true));
+    el.appendChild(this._makeBtn(ICONS.deleteTable, L.deleteTable, () => this._deleteTable(), true));
 
     // Keep tooltip alive while hovering.
     // Don't schedule hide on mouseleave when the size popover is open —
@@ -909,9 +910,9 @@ export class TableTooltip {
 
     const actionsEl  = createElement('div', { class: 'an-size-popover-actions' });
     const cancelBtn  = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = this.context.locale.tooltips.table.cancelBtn;
     const applyBtn   = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    applyBtn.textContent = 'Apply';
+    applyBtn.textContent = this.context.locale.tooltips.table.applyBtn;
     actionsEl.appendChild(cancelBtn);
     actionsEl.appendChild(applyBtn);
 
@@ -960,7 +961,7 @@ export class TableTooltip {
         ? (parseInt(firstCell.style.borderWidth, 10) ||
            parseInt(window.getComputedStyle(firstCell).borderWidth, 10) || 1)
         : 1;
-      this._sizeTitleEl.textContent = 'Table Border Width (px)';
+      this._sizeTitleEl.textContent = this.context.locale.tooltips.table.tableBorderWidthPx;
       this._sizeInputEl.min   = '0';
       this._sizeInputEl.max   = '10';
       this._sizeInputEl.value = currentPx;
@@ -979,7 +980,9 @@ export class TableTooltip {
         const t = c.closest('table');
         return t && t === cell.closest('table');
       });
-      this._sizeTitleEl.textContent = isCol ? 'Column Width (px)' : 'Row Height (px)';
+      this._sizeTitleEl.textContent = isCol
+        ? this.context.locale.tooltips.table.columnWidthPx
+        : this.context.locale.tooltips.table.rowHeightPx;
       this._sizeInputEl.min   = '1';
       this._sizeInputEl.max   = '2000';
       this._sizeInputEl.value = isCol

package/src/js/module/Toolbar.js

@@ -182,9 +182,9 @@ export class Toolbar {
     const btn = createElement('button', {
       type: 'button',
       class: baseClass,
-      title: def.tooltip || '',
+      title: this.context.locale.toolbar[def.name] || def.tooltip || '',
       'data-btn': def.name,
-      'aria-label': def.tooltip || def.name,
+      'aria-label': this.context.locale.toolbar[def.name] || def.tooltip || def.name,
       'aria-haspopup': 'true',
       'aria-expanded': 'false',
     });
@@ -206,7 +206,7 @@ export class Toolbar {
     });
     const grid = createElement('div', { class: 'an-table-grid' });
     const label = createElement('div', { class: 'an-table-label' });
-    label.textContent = 'Insert Table';
+    label.textContent = this.context.locale.toolbar.insertTableLabel || 'Insert Table';
 
     const cells = [];
     for (let r = 1; r <= ROWS; r++) {
@@ -232,7 +232,7 @@ export class Toolbar {
         const c = +cell.getAttribute('data-col');
         cell.classList.toggle('active', r <= rows && c <= cols);
       });
-      label.textContent = (rows && cols) ? `${rows} × ${cols}` : 'Insert Table';
+      label.textContent = (rows && cols) ? `${rows} × ${cols}` : (this.context.locale.toolbar.insertTableLabel || 'Insert Table');
     };
 
     const openPopup = () => {
@@ -307,9 +307,9 @@ export class Toolbar {
     const applyBtn = createElement('button', {
       type: 'button',
       class: `${baseClass} an-color-btn`,
-      title: def.tooltip || '',
+      title: this.context.locale.toolbar[def.name] || def.tooltip || '',
       'data-btn': def.name,
-      'aria-label': def.tooltip || def.name,
+      'aria-label': this.context.locale.toolbar[def.name] || def.tooltip || def.name,
     });
 
     const S = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
@@ -326,7 +326,9 @@ export class Toolbar {
     const arrowBtn = createElement('button', {
       type: 'button',
       class: `${baseClass} an-color-arrow`,
-      title: `Choose ${def.name === 'foreColor' ? 'text' : 'highlight'} color`,
+      title: def.name === 'foreColor'
+        ? (this.context.locale.toolbar.chooseTextColor || 'Choose text color')
+        : (this.context.locale.toolbar.chooseHighlightColor || 'Choose highlight color'),
       'aria-haspopup': 'true',
       'aria-expanded': 'false',
     });
@@ -346,8 +348,8 @@ export class Toolbar {
     });
 
     const customRow = createElement('div', { class: 'an-color-custom' });
-    const colorInput = createElement('input', { type: 'color', value: currentColor, title: 'Custom color' });
-    const customLabel = createElement('span', {}, ['Custom color']);
+    const colorInput = createElement('input', { type: 'color', value: currentColor, title: this.context.locale.toolbar.customColor || 'Custom color' });
+    const customLabel = createElement('span', {}, [this.context.locale.toolbar.customColor || 'Custom color']);
     customRow.appendChild(colorInput);
     customRow.appendChild(customLabel);
 
@@ -491,19 +493,23 @@ export class Toolbar {
     const cls = def.selectClass ? `an-select ${def.selectClass}` : 'an-select';
     const select = createElement('select', {
       class: cls,
-      title: def.tooltip || '',
+      title: this.context.locale.toolbar[def.name] || def.tooltip || '',
       'data-btn': def.name,
-      'aria-label': def.tooltip || def.name,
+      'aria-label': this.context.locale.toolbar[def.name] || def.tooltip || def.name,
     });
 
     // Blank "placeholder" option (non-selectable header)
-    const placeholderText = def.placeholder || 'Font';
+    const placeholderText = this.context.locale.toolbar[def.name + 'Placeholder'] || def.placeholder || 'Font';
     const placeholder = createElement('option', { value: '', disabled: '', hidden: '' }, [placeholderText]);
     select.appendChild(placeholder);
 
     items.forEach((item) => {
       const value    = (typeof item === 'object') ? item.value    : item;
-      const label    = (typeof item === 'object') ? item.label    : item;
+      const label    = (typeof item === 'object')
+        ? (def.name === 'paragraphStyle'
+            ? ((this.context.locale.toolbar.paragraphItems || {})[item.value] || item.label)
+            : item.label)
+        : item;
       const isHeader = (typeof item === 'object') && !!item.disabled;
       const attrs    = { value };
       if (isHeader) attrs.disabled = '';
@@ -558,9 +564,9 @@ export class Toolbar {
     const btn = createElement('button', {
       type: 'button',
       class: classAttr,
-      title: btnDef.tooltip || '',
+      title: this.context.locale.toolbar[btnDef.name] || btnDef.tooltip || '',
       'data-btn': btnDef.name,
-      'aria-label': btnDef.tooltip || btnDef.name,
+      'aria-label': this.context.locale.toolbar[btnDef.name] || btnDef.tooltip || btnDef.name,
     });
 
     // Render icon: prefer FontAwesome if enabled; otherwise fall back to SVG or text.

package/src/js/module/VideoDialog.js

@@ -59,24 +59,25 @@ export class VideoDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
+    const L = this.context.locale.videoDialog;
     const overlay = createElement('div', {
       class: 'an-dialog-overlay',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Insert video',
+      'aria-label': L.ariaLabel,
     });
     const box = createElement('div', { class: 'an-dialog-box' });
 
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert Video';
+    title.textContent = L.title;
 
     // URL input
     const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = 'Video URL';
+    urlLabel.textContent = L.videoUrl;
     const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'url',
       class: 'an-input',
-      placeholder: 'YouTube, Vimeo, or direct .mp4 URL',
+      placeholder: L.urlPlaceholder,
       autocomplete: 'off',
     }));
     this._urlInput = urlInput;
@@ -87,7 +88,7 @@ export class VideoDialog {
 
     // Width
     const widthLabel = createElement('label', { class: 'an-label' });
-    widthLabel.textContent = 'Width (px)';
+    widthLabel.textContent = L.widthLabel;
     const widthInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'number',
       class: 'an-input',
@@ -101,9 +102,9 @@ export class VideoDialog {
     // Buttons
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
     const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    insertBtn.textContent = 'Insert';
+    insertBtn.textContent = L.insertBtn;
     const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = L.cancelBtn;
     btnRow.appendChild(insertBtn);
     btnRow.appendChild(cancelBtn);
 
@@ -113,7 +114,7 @@ export class VideoDialog {
     // Live URL hint
     const d0 = on(urlInput, 'input', () => {
       const info = this._parseVideoUrl(urlInput.value.trim());
-      hintEl.textContent = info ? `Detected: ${info.type}` : (urlInput.value ? 'Unknown format — will try direct video embed' : '');
+      hintEl.textContent = info ? this.context.locale.videoDialog.detected(info.type) : (urlInput.value ? this.context.locale.videoDialog.unknownFormat : '');
     });
 
     const d1 = on(insertBtn, 'click', () => this._onInsert());
@@ -140,7 +141,7 @@ export class VideoDialog {
 
     const html = this._buildEmbedHtml(rawUrl, width);
     if (!html) {
-      this._hintEl.textContent = 'Invalid URL — please enter a valid video link.';
+      this._hintEl.textContent = this.context.locale.videoDialog.invalidUrl;
       this._urlInput.focus();
       return;
     }