autumnnote 1.0.7 → 1.0.9

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

package/src/js/module/IconDialog.js

@@ -332,11 +332,12 @@ export class IconDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
+    const L = this.context.locale.iconDialog;
     const overlay = createElement('div', {
       class: 'an-dialog-overlay',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Insert FA icon',
+      'aria-label': L.ariaLabel,
     });
 
     const box = createElement('div', { class: 'an-dialog-box an-icon-box' });
@@ -344,8 +345,8 @@ export class IconDialog {
     // Title row
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert FA Icon';
-    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);
 
@@ -353,7 +354,7 @@ export class IconDialog {
     const searchInput = createElement('input', {
       type: 'search',
       class: 'an-input an-icon-search',
-      placeholder: 'Search icons…',
+      placeholder: L.searchPlaceholder,
       autocomplete: 'off',
     });
     this._searchInput = searchInput;
@@ -361,11 +362,11 @@ export class IconDialog {
     // 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);
     ICON_CATEGORIES.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;
@@ -386,7 +387,7 @@ export class IconDialog {
     const optRow = createElement('div', { class: 'an-icon-options' });
 
     const styleLabel = createElement('label', { class: 'an-label' });
-    styleLabel.textContent = 'Style';
+    styleLabel.textContent = L.style;
     const styleSelect = createElement('select', { class: 'an-input an-icon-option-select' });
     [['fa-solid', 'Solid'], ['fa-regular', 'Regular'], ['fa-light', 'Light (Pro)']].forEach(([v, t]) => {
       const opt = createElement('option', { value: v });
@@ -397,7 +398,7 @@ export class IconDialog {
     this._styleSelect = styleSelect;
 
     const sizeLabel = createElement('label', { class: 'an-label' });
-    sizeLabel.textContent = 'Size';
+    sizeLabel.textContent = L.size;
     const sizeSelect = createElement('select', { class: 'an-input an-icon-option-select' });
     [['', 'Inherit'], ['0.75em', '0.75em'], ['1em', '1em'], ['1.25em', '1.25em'], ['1.5em', '1.5em'], ['2em', '2em'], ['3em', '3em']].forEach(([v, t]) => {
       const opt = createElement('option', { value: v });
@@ -408,30 +409,30 @@ export class IconDialog {
     this._sizeSelect = sizeSelect;
 
     const colorLabel = createElement('label', { class: 'an-label' });
-    colorLabel.textContent = 'Color';
+    colorLabel.textContent = L.color;
     const colorInput = createElement('input', { type: 'color', class: 'an-icon-color', value: '#000000' });
     this._colorInput = colorInput;
 
     const useColorLabel = createElement('label', { class: 'an-label an-label-inline an-icon-use-color' });
     const useColorCb = createElement('input', { type: 'checkbox', checked: '' });
     this._useColorCb = useColorCb;
-    useColorLabel.append(useColorCb, document.createTextNode(' Use color'));
+    useColorLabel.append(useColorCb, document.createTextNode(L.useColor));
 
     optRow.append(styleLabel, styleSelect, sizeLabel, sizeSelect, colorLabel, colorInput, useColorLabel);
 
     // Preview
     const preview = createElement('div', { class: 'an-icon-preview' });
     const previewHint = createElement('span', { class: 'an-icon-preview-hint' });
-    previewHint.textContent = 'Select an icon';
+    previewHint.textContent = L.selectHint;
     preview.appendChild(previewHint);
     this._preview = preview;
 
     // Actions
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
     const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary', disabled: '' });
-    insertBtn.textContent = 'Insert FA Icon';
+    insertBtn.textContent = L.insertBtn;
     const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = L.cancelBtn;
     btnRow.append(insertBtn, cancelBtn);
     this._insertBtn = insertBtn;
 
@@ -575,7 +576,18 @@ export class IconDialog {
 
     // 3. Insert the <i> node directly — never via execCommand/insertHTML
     //    (execCommand leaves the caret inside the inserted element)
+    //
+    // E-1: When the range covers the entire content of a <td>/<th>,
+    // deleteContents() can drift the range endpoint outside the cell in some
+    // browsers.  Save the cell reference first and re-anchor after deletion.
+    const _sc = range.startContainer;
+    const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)
+      ?.closest?.('td, th');
     range.deleteContents();
+    if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
+      range.setStart(_tdAnchor, 0);
+      range.collapse(true);
+    }
     range.insertNode(iconEl);
 
     // 4. Place cursor after the icon.

package/src/js/module/ImageDialog.js

@@ -57,35 +57,36 @@ 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': 'Insert image',
+      'aria-label': L.ariaLabel,
     });
     const box = createElement('div', { class: 'an-dialog-box' });
 
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert Image';
+    title.textContent = L.title;
 
     // URL tab
     const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = 'Image URL';
+    urlLabel.textContent = L.imageUrl;
     const urlInput = createElement('input', {
       type: 'url',
       class: 'an-input',
-      placeholder: 'https://example.com/image.png',
+      placeholder: L.urlPlaceholder,
       autocomplete: 'off',
     });
     this._urlInput = urlInput;
 
     // Alt text
     const altLabel = createElement('label', { class: 'an-label' });
-    altLabel.textContent = 'Alt Text';
+    altLabel.textContent = L.altText;
     const altInput = createElement('input', {
       type: 'text',
       class: 'an-input',
-      placeholder: 'Describe the image',
+      placeholder: L.altPlaceholder,
       autocomplete: 'off',
     });
     this._altInput = altInput;
@@ -94,13 +95,13 @@ export class ImageDialog {
 
     // Alignment
     const alignLabel = createElement('label', { class: 'an-label' });
-    alignLabel.textContent = 'Alignment';
+    alignLabel.textContent = L.alignment;
     const alignRow = createElement('div', { class: 'an-align-row' });
     const alignOptions = [
-      { value: '',       label: 'None'   },
-      { value: 'left',   label: 'Left'   },
-      { value: 'center', label: 'Center' },
-      { value: 'right',  label: 'Right'  },
+      { value: '',       label: L.alignNone   },
+      { value: 'left',   label: L.alignLeft   },
+      { value: 'center', label: L.alignCenter },
+      { value: 'right',  label: L.alignRight  },
     ];
     alignOptions.forEach(({ value, label }) => {
       const radioId = `an-align-${value || 'none'}`;
@@ -114,11 +115,11 @@ export class ImageDialog {
     box.append(alignLabel, alignRow);
     if (this.options.allowImageUpload !== false) {
       const fileLabel = createElement('label', { class: 'an-label' });
-      fileLabel.textContent = 'Or upload a file';
+      fileLabel.textContent = L.uploadLabel;
       const fileInput = createElement('input', {
         type: 'file',
         class: 'an-input',
-        accept: 'image/*',
+        accept: 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/avif',
       });
       this._fileInput = fileInput;
       // Hint line shown below the file input for format errors
@@ -132,9 +133,9 @@ export class ImageDialog {
     // 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);
 
@@ -159,10 +160,14 @@ export class ImageDialog {
     const file = this._fileInput && this._fileInput.files && this._fileInput.files[0];
     if (!file || !file.type.startsWith('image/')) return;
 
-    // C2: Reject image formats browsers cannot display (TIFF, BMP, etc.).
-    const UNSUPPORTED = ['image/tiff', 'image/x-tiff', 'image/bmp', 'image/x-bmp', 'image/x-ms-bmp'];
-    if (UNSUPPORTED.includes(file.type)) {
-      const message = `Format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
+    // C2: Only allow web-displayable formats. TIFF, BMP, RAW and similar
+    // formats are not rendered by browsers — reject them with a clear message.
+    const SUPPORTED = new Set([
+      'image/jpeg', 'image/png', 'image/gif',
+      'image/webp', 'image/svg+xml', 'image/avif',
+    ]);
+    if (!SUPPORTED.has(file.type)) {
+      const message = this.context.locale.errors.imageFormat(file.type);
       if (this._fileHint) this._fileHint.textContent = message;
       this.context.triggerEvent('imageError', { file, message });
       this._fileInput.value = '';
@@ -173,7 +178,7 @@ export class ImageDialog {
     // Validate file size (max 5 MB by default)
     const maxSize = (this.options.maxImageSize || 5) * 1024 * 1024;
     if (file.size > maxSize) {
-      const message = `Image file is too large. Maximum allowed size is ${this.options.maxImageSize || 5} MB.`;
+      const message = this.context.locale.errors.imageSize(this.options.maxImageSize || 5);
       if (this._fileHint) this._fileHint.textContent = message;
       console.warn('[AutumnNote] ImageDialog:', message);
       this.context.triggerEvent('imageError', { file, message });

package/src/js/module/ImageTooltip.js

@@ -75,24 +75,25 @@ export class ImageTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
+    const L = this.context.locale.tooltips.image;
     const el = createElement('div', {
       class: 'an-link-tooltip an-image-tooltip',
       role: 'toolbar',
-      'aria-label': 'Image actions',
+      'aria-label': L.ariaLabel,
     });
     el.style.display = 'none';
 
     // Label showing "Image"
     this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = 'Image';
+    this._label.textContent = L.label;
     el.appendChild(this._label);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._floatLeftBtn    = this._makeBtn(ICONS.floatLeft,    'Float Left',     () => this._setFloat('left'));
-    this._floatNoneBtn    = this._makeBtn(ICONS.floatNone,    'No Float',       () => this._setFloat(''));
-    this._alignCenterBtn  = this._makeBtn(ICONS.alignCenter,  'Align Center',   () => this._setCenter());
-    this._floatRightBtn   = this._makeBtn(ICONS.floatRight,   'Float Right',    () => this._setFloat('right'));
+    this._floatLeftBtn    = this._makeBtn(ICONS.floatLeft,    L.floatLeft,    () => this._setFloat('left'));
+    this._floatNoneBtn    = this._makeBtn(ICONS.floatNone,    L.noFloat,      () => this._setFloat(''));
+    this._alignCenterBtn  = this._makeBtn(ICONS.alignCenter,  L.alignCenter,  () => this._setCenter());
+    this._floatRightBtn   = this._makeBtn(ICONS.floatRight,   L.floatRight,   () => this._setFloat('right'));
 
     el.appendChild(this._floatLeftBtn);
     el.appendChild(this._floatNoneBtn);
@@ -101,28 +102,28 @@ export class ImageTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._originalBtn = this._makeBtn(ICONS.originalSize, 'Original Size', () => this._resetSize());
+    this._originalBtn = this._makeBtn(ICONS.originalSize, L.originalSize, () => this._resetSize());
 
     el.appendChild(this._originalBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    el.appendChild(this._makeBtn(ICONS.rotateLeft,  'Rotate Left',  () => this._rotate(-90)));
-    el.appendChild(this._makeBtn(ICONS.rotateRight, 'Rotate Right', () => this._rotate(90)));
+    el.appendChild(this._makeBtn(ICONS.rotateLeft,  L.rotateLeft,  () => this._rotate(-90)));
+    el.appendChild(this._makeBtn(ICONS.rotateRight, L.rotateRight, () => this._rotate(90)));
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._cropBtn = this._makeBtn(ICONS.crop, 'Crop Image', () => this._crop());
+    this._cropBtn = this._makeBtn(ICONS.crop, L.cropImage, () => this._crop());
     el.appendChild(this._cropBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._captionBtn = this._makeBtn(ICONS.caption, 'Add / Edit Caption', () => this._toggleCaption());
+    this._captionBtn = this._makeBtn(ICONS.caption, L.addCaption, () => this._toggleCaption());
     el.appendChild(this._captionBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._deleteBtn = this._makeBtn(ICONS.deleteImg, 'Delete Image', () => this._delete(), true);
+    this._deleteBtn = this._makeBtn(ICONS.deleteImg, L.deleteImage, () => this._delete(), true);
 
     el.appendChild(this._deleteBtn);
 

package/src/js/module/LinkDialog.js

@@ -59,19 +59,20 @@ export class LinkDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
-    const overlay = createElement('div', { class: 'an-dialog-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Insert link' });
+    const L = this.context.locale.linkDialog;
+    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 title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert Link';
+    title.textContent = L.title;
 
     // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = 'URL';
+    urlLabel.textContent = L.url;
     const urlInput = createElement('input', {
       type: 'url',
       class: 'an-input',
-      placeholder: 'https://',
+      placeholder: L.urlPlaceholder,
       id: 'an-link-url',
       name: 'url',
       autocomplete: 'off',
@@ -80,11 +81,11 @@ export class LinkDialog {
 
     // Text field
     const textLabel = createElement('label', { class: 'an-label' });
-    textLabel.textContent = 'Display Text';
+    textLabel.textContent = L.displayText;
     const textInput = createElement('input', {
       type: 'text',
       class: 'an-input',
-      placeholder: 'Link text',
+      placeholder: L.textPlaceholder,
       id: 'an-link-text',
       name: 'linkText',
       autocomplete: 'off',
@@ -100,14 +101,14 @@ export class LinkDialog {
     });
     this._tabCheckbox = tabCheckbox;
     tabLabel.appendChild(tabCheckbox);
-    tabLabel.appendChild(document.createTextNode(' Open in new tab'));
+    tabLabel.appendChild(document.createTextNode(' ' + L.openInNewTab));
 
     // 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);
 

package/src/js/module/LinkTooltip.js

@@ -63,7 +63,8 @@ export class LinkTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
-    const el = createElement('div', { class: 'an-link-tooltip', role: 'toolbar', 'aria-label': 'Link actions' });
+    const L = this.context.locale.tooltips.link;
+    const el = createElement('div', { class: 'an-link-tooltip', role: 'toolbar', 'aria-label': L.ariaLabel });
     el.style.display = 'none';
 
     // URL preview text (truncated)
@@ -74,10 +75,10 @@ export class LinkTooltip {
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
     // Action buttons
-    this._openBtn   = this._makeBtn(ICONS.open,   'Open link',   () => this._openLink());
-    this._copyBtn   = this._makeBtn(ICONS.copy,   'Copy URL',    () => this._copyLink());
-    this._editBtn   = this._makeBtn(ICONS.edit,   'Edit link',   () => this._editLink());
-    this._unlinkBtn = this._makeBtn(ICONS.unlink, 'Remove link', () => this._unlink());
+    this._openBtn   = this._makeBtn(ICONS.open,   L.openLink,   () => this._openLink());
+    this._copyBtn   = this._makeBtn(ICONS.copy,   L.copyUrl,    () => this._copyLink());
+    this._editBtn   = this._makeBtn(ICONS.edit,   L.editLink,   () => this._editLink());
+    this._unlinkBtn = this._makeBtn(ICONS.unlink, L.removeLink, () => this._unlink());
 
     el.appendChild(this._openBtn);
     el.appendChild(this._copyBtn);

package/src/js/module/Placeholder.js

@@ -39,7 +39,12 @@ export class Placeholder {
   _update() {
     const editable = this.context.layoutInfo.editable;
     const isFocused = document.activeElement === editable;
-    const isEmpty = !editable.textContent.trim() &&
+    // Strip ZWS (\u200B) cursor anchors used by checklist/icon insertion in
+    // addition to regular whitespace before deciding if the editor is empty.
+    // Without this, a freshly-created checklist item or icon leaves a ZWS in
+    // the DOM that causes the placeholder to overlap real content (A-1).
+    const hasText = editable.textContent.replace(/\u200B/g, '').trim().length > 0;
+    const isEmpty = !hasText &&
       !editable.querySelector('img, table, hr, .an-video-wrapper');
     editable.classList.toggle('an-placeholder', isEmpty && !isFocused);
   }

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