autumnnote 1.0.8 → 1.1.0

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

@@ -76,16 +76,17 @@ export class CodeTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
+    const L = this.context.locale.tooltips.code;
     const el = createElement('div', {
       class: 'an-link-tooltip an-code-tooltip',
       role: 'toolbar',
-      'aria-label': 'Code block actions',
+      'aria-label': L.ariaLabel,
     });
     el.style.display = 'none';
 
     // Label
     this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = 'Code';
+    this._label.textContent = L.label;
     el.appendChild(this._label);
 
     el.appendChild(this._sep());
@@ -93,8 +94,8 @@ export class CodeTooltip {
     // Language selector
     this._langSelect = createElement('select', {
       class: 'an-code-lang-select',
-      title: 'Syntax Language',
-      'aria-label': 'Syntax language',
+      title: L.syntaxLanguage,
+      'aria-label': L.syntaxAriaLabel,
     });
     const LANGUAGES = [
       ['', 'Plain text'], ['javascript', 'JavaScript'], ['typescript', 'TypeScript'],
@@ -115,25 +116,25 @@ export class CodeTooltip {
     el.appendChild(this._sep());
 
     // Copy code
-    this._copyBtn = this._makeBtn(ICONS.copy, 'Copy Code', () => this._copyCode());
+    this._copyBtn = this._makeBtn(ICONS.copy, L.copyCode, () => this._copyCode());
 
     el.appendChild(this._copyBtn);
 
     el.appendChild(this._sep());
 
     // Toggle word-wrap
-    this._wrapBtn = this._makeBtn(ICONS.wrapOn, 'Toggle Word Wrap', () => this._toggleWrap());
+    this._wrapBtn = this._makeBtn(ICONS.wrapOn, L.toggleWordWrap, () => this._toggleWrap());
     el.appendChild(this._wrapBtn);
 
     el.appendChild(this._sep());
 
     // Convert to normal paragraph
-    el.appendChild(this._makeBtn(ICONS.toParagraph, 'Convert to Paragraph', () => this._toParagraph()));
+    el.appendChild(this._makeBtn(ICONS.toParagraph, L.convertToParagraph, () => this._toParagraph()));
 
     el.appendChild(this._sep());
 
     // Delete block
-    el.appendChild(this._makeBtn(ICONS.deleteCode, 'Delete Code Block', () => this._delete(), true));
+    el.appendChild(this._makeBtn(ICONS.deleteCode, L.deleteCodeBlock, () => this._delete(), true));
 
     // Keep tooltip alive while hovering it
     this._disposers.push(
@@ -241,7 +242,9 @@ export class CodeTooltip {
     const wrapped = (this._activePre.style.whiteSpace || '').includes('pre-wrap')
       || window.getComputedStyle(this._activePre).whiteSpace === 'pre-wrap';
     this._wrapBtn.classList.toggle('active', wrapped);
-    this._wrapBtn.title = wrapped ? 'Disable Word Wrap' : 'Enable Word Wrap';
+    this._wrapBtn.title = wrapped
+      ? this.context.locale.tooltips.code.disableWordWrap
+      : this.context.locale.tooltips.code.enableWordWrap;
   }
 
   _syncLangSelect() {

package/src/js/module/ContextMenu.js

@@ -48,8 +48,9 @@ const COLOR_PRESETS = [
 
 function makeColorSubItems(colorType) {
   const label = colorType === 'foreColor' ? 'Text Color' : 'Highlight Color';
+  const localeKey = colorType === 'foreColor' ? 'textColor' : 'highlightColor';
   return () => [
-    { back: true, label, navigate: () => defaultItems },
+    { back: true, label, localeKey, navigate: () => defaultItems },
     { colorPalette: true, colorType },
   ];
 }
@@ -171,7 +172,8 @@ export class ContextMenu {
         const iconSpan = createElement('span', { class: 'an-context-icon', 'aria-hidden': 'true' });
         iconSpan.innerHTML = ICONS.back;
         backBtn.appendChild(iconSpan);
-        backBtn.appendChild(createElement('span', { class: 'an-context-label' }, [it.label || 'Back']));
+        const backLabel = (it.localeKey && this.context.locale.contextMenu[it.localeKey]) || it.label || this.context.locale.contextMenu.back || 'Back';
+        backBtn.appendChild(createElement('span', { class: 'an-context-label' }, [backLabel]));
         const off = on(backBtn, 'click', (e) => {
           e.stopPropagation();
           const curLeft = parseFloat(this.el.style.left);
@@ -204,7 +206,7 @@ export class ContextMenu {
             btn.appendChild(iconSpan);
           }
         }
-        btn.appendChild(createElement('span', { class: 'an-context-label' }, [it.label || it.name]));
+        btn.appendChild(createElement('span', { class: 'an-context-label' }, [(this.context.locale.contextMenu[it.name] || it.label || it.name)]));
         const chevron = createElement('span', { class: 'an-context-chevron', 'aria-hidden': 'true' });
         chevron.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
         btn.appendChild(chevron);
@@ -238,9 +240,9 @@ export class ContextMenu {
         if (it.colorType === 'hiliteColor') {
           const noColor = createElement('div', {
             class: 'an-context-color-swatch an-context-color-none',
-            title: 'No highlight',
+            title: this.context.locale.contextMenu.noHighlight || 'No highlight',
             role: 'button',
-            'aria-label': 'No highlight',
+            'aria-label': this.context.locale.contextMenu.noHighlight || 'No highlight',
           });
           noColor.innerHTML = ICONS.noColor;
           const offNo = on(noColor, 'click', (e) => { e.stopPropagation(); this._applyColor('hiliteColor', 'transparent'); });
@@ -254,10 +256,10 @@ export class ContextMenu {
         const colorInput = createElement('input', {
           type: 'color',
           value: it.colorType === 'foreColor' ? '#000000' : '#ffff00',
-          title: 'Custom color',
-          'aria-label': 'Custom color',
+          title: this.context.locale.contextMenu.customColor || 'Custom color',
+          'aria-label': this.context.locale.contextMenu.customColor || 'Custom color',
         });
-        const customLabel = createElement('span', {}, ['Custom…']);
+        const customLabel = createElement('span', {}, [this.context.locale.contextMenu.customColorLabel || 'Custom…']);
         const offCustom = on(colorInput, 'change', () => this._applyColor(it.colorType, colorInput.value));
         this._menuDisposers.push(offCustom);
         customRow.appendChild(colorInput);
@@ -277,7 +279,7 @@ export class ContextMenu {
           iconSpan.innerHTML = it.icon;
           headerBtn.appendChild(iconSpan);
         }
-        headerBtn.appendChild(createElement('span', { class: 'an-context-label' }, [it.label || 'Insert Table']));
+        headerBtn.appendChild(createElement('span', { class: 'an-context-label' }, [this.context.locale.contextMenu.table || it.label || 'Insert Table']));
         const chevron = createElement('span', { class: 'an-context-chevron', 'aria-hidden': 'true' });
         chevron.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
         headerBtn.appendChild(chevron);
@@ -305,7 +307,7 @@ export class ContextMenu {
           cells.forEach((cell) => {
             cell.classList.toggle('active', +cell.dataset.row <= rows && +cell.dataset.col <= cols);
           });
-          labelEl.textContent = (rows && cols) ? `${cols} × ${rows}` : 'Insert Table';
+          labelEl.textContent = (rows && cols) ? `${cols} × ${rows}` : (this.context.locale.contextMenu.table || 'Insert Table');
         };
 
         panel.appendChild(gridEl);
@@ -358,7 +360,7 @@ export class ContextMenu {
         iconSpan.innerHTML = it.icon;
         btn.appendChild(iconSpan);
       }
-      btn.appendChild(createElement('span', { class: 'an-context-label' }, [it.label || it.name]));
+      btn.appendChild(createElement('span', { class: 'an-context-label' }, [(this.context.locale.contextMenu[it.name] || it.label || it.name)]));
       const off = on(btn, 'click', (e) => {
         e.stopPropagation();
         this.hide();
@@ -375,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) {
@@ -393,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`;
   }
@@ -434,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');
   }
 
   // ---------------------------------------------------------------------------

package/src/js/module/EmojiDialog.js

@@ -555,19 +555,20 @@ export class EmojiDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
+    const L = this.context.locale.emojiDialog;
     const overlay = createElement('div', {
       class: 'an-dialog-overlay',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Insert emoji',
+      'aria-label': L.ariaLabel,
     });
     const box = createElement('div', { class: 'an-dialog-box an-emoji-box' });
 
     // Title row
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert Emoji';
-    const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': 'Close' });
+    title.textContent = L.title;
+    const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': L.close });
     closeBtn.innerHTML = '×';
     titleRow.append(title, closeBtn);
 
@@ -575,7 +576,7 @@ export class EmojiDialog {
     const searchInput = createElement('input', {
       type: 'search',
       class: 'an-input an-icon-search',
-      placeholder: 'Search emojis…',
+      placeholder: L.searchPlaceholder,
       autocomplete: 'off',
     });
     this._searchInput = searchInput;
@@ -583,11 +584,11 @@ export class EmojiDialog {
     // Category tabs
     const catBar = createElement('div', { class: 'an-icon-cats' });
     const allTab = createElement('button', { type: 'button', class: 'an-icon-cat active', 'data-cat': 'all' });
-    allTab.textContent = 'All';
+    allTab.textContent = L.all;
     catBar.appendChild(allTab);
     EMOJI_CATS.forEach(({ id, label }) => {
       const tab = createElement('button', { type: 'button', class: 'an-icon-cat', 'data-cat': id });
-      tab.textContent = label;
+      tab.textContent = (L.categories && L.categories[id]) || label;
       catBar.appendChild(tab);
     });
     this._catBar = catBar;
@@ -611,7 +612,7 @@ export class EmojiDialog {
     // Cancel only — clicking an emoji inserts immediately
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
     const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = L.cancelBtn;
     btnRow.appendChild(cancelBtn);
 
     box.append(titleRow, searchInput, catBar, grid, btnRow);

package/src/js/module/FindReplace.js

@@ -122,7 +122,7 @@ export class FindReplace {
     const isReplace = this._mode === 'replace';
     if (replaceRow) replaceRow.style.display = isReplace ? '' : 'none';
     if (replaceActions) replaceActions.style.display = isReplace ? '' : 'none';
-    if (title) title.textContent = isReplace ? 'Find & Replace' : 'Find';
+    if (title) title.textContent = isReplace ? this.context.locale.findReplace.findReplaceTitle : this.context.locale.findReplace.findTitle;
   }
 
   // ---------------------------------------------------------------------------
@@ -130,24 +130,25 @@ export class FindReplace {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
+    const L = this.context.locale.findReplace;
     const overlay = createElement('div', {
       class: 'an-dialog-overlay an-fr-dialog',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Find and Replace',
+      'aria-label': L.findReplaceTitle,
     });
     const box = createElement('div', { class: 'an-dialog-box' });
 
     // ---- Title row ----
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Find';
+    title.textContent = L.findTitle;
     const closeBtn = createElement('button', {
       type: 'button',
       class: 'an-icon-close',
       'aria-label': 'Close',
     });
-    closeBtn.textContent = '×';
+    closeBtn.textContent = L.close;
     this._closeBtn = closeBtn;
     titleRow.append(title, closeBtn);
     box.appendChild(titleRow);
@@ -157,8 +158,8 @@ export class FindReplace {
     const findInput = createElement('input', {
       type: 'text',
       class: 'an-input',
-      placeholder: 'Find…',
-      'aria-label': 'Search text',
+      placeholder: L.findPlaceholder,
+      'aria-label': L.searchAriaLabel,
     });
     this._findInput = findInput;
     findRow.appendChild(findInput);
@@ -172,7 +173,7 @@ export class FindReplace {
       'aria-label': 'Case sensitive',
     });
     this._caseCheckbox = caseCheckbox;
-    caseLabel.append(caseCheckbox, document.createTextNode('\u00a0Case sensitive'));
+    caseLabel.append(caseCheckbox, document.createTextNode(L.caseSensitive));
     const counter = createElement('span', { class: 'an-fr-counter' });
     this._counterEl = counter;
     optRow.append(caseLabel, counter);
@@ -181,9 +182,9 @@ export class FindReplace {
     // ---- Find actions ----
     const findActions = createElement('div', { class: 'an-dialog-actions an-fr-find-actions' });
     const prevBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    prevBtn.textContent = '\u2190 Prev';
+    prevBtn.textContent = L.prevBtn;
     const nextBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    nextBtn.textContent = 'Next \u2192';
+    nextBtn.textContent = L.nextBtn;
     findActions.append(prevBtn, nextBtn);
     box.appendChild(findActions);
 
@@ -193,8 +194,8 @@ export class FindReplace {
     const replaceInput = createElement('input', {
       type: 'text',
       class: 'an-input',
-      placeholder: 'Replace with\u2026',
-      'aria-label': 'Replace with',
+      placeholder: L.replacePlaceholder,
+      'aria-label': L.replaceAriaLabel,
     });
     this._replaceInput = replaceInput;
     replaceRow.appendChild(replaceInput);
@@ -204,9 +205,9 @@ export class FindReplace {
     const replaceActions = createElement('div', { class: 'an-dialog-actions an-fr-replace-actions' });
     replaceActions.style.display = 'none';
     const replaceBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    replaceBtn.textContent = 'Replace';
+    replaceBtn.textContent = L.replaceBtn;
     const replaceAllBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    replaceAllBtn.textContent = 'Replace All';
+    replaceAllBtn.textContent = L.replaceAllBtn;
     replaceActions.append(replaceBtn, replaceAllBtn);
     box.appendChild(replaceActions);