autumnnote 1.0.7 → 1.0.9

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

package/src/js/module/VideoTooltip.js

@@ -78,24 +78,25 @@ export class VideoTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
+    const L = this.context.locale.tooltips.video;
     const el = createElement('div', {
       class: 'an-link-tooltip an-video-tooltip',
       role: 'toolbar',
-      'aria-label': 'Video actions',
+      'aria-label': L.ariaLabel,
     });
     el.style.display = 'none';
 
     // Label
     this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = 'Video';
+    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);
@@ -104,18 +105,18 @@ export class VideoTooltip {
 
     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' }));
 
-    this._previewBtn = this._makeBtn(ICONS.preview, 'Preview Video', () => this._togglePreview());
+    this._previewBtn = this._makeBtn(ICONS.preview, L.previewVideo, () => this._togglePreview());
     el.appendChild(this._previewBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._deleteBtn = this._makeBtn(ICONS.deleteVideo, 'Delete Video', () => this._delete(), true);
+    this._deleteBtn = this._makeBtn(ICONS.deleteVideo, L.deleteVideo, () => this._delete(), true);
 
     el.appendChild(this._deleteBtn);
 
@@ -292,7 +293,7 @@ export class VideoTooltip {
 
     // Visual feedback: button turns primary-coloured
     this._previewBtn.classList.add('an-link-tooltip-btn--copied');
-    this._previewBtn.title = 'Exit Preview';
+    this._previewBtn.title = this.context.locale.tooltips.video.exitPreview;
 
     // Exit preview on mousedown outside the wrapper.
     // Using 'mousedown' (not 'click') so clicks inside an iframe
@@ -319,7 +320,7 @@ export class VideoTooltip {
 
     // Reset button appearance
     this._previewBtn.classList.remove('an-link-tooltip-btn--copied');
-    this._previewBtn.title = 'Preview Video';
+    this._previewBtn.title = this.context.locale.tooltips.video.previewVideo;
 
     if (this._previewClickOff) {
       document.removeEventListener('mousedown', this._previewClickOff, true);

package/src/js/settings.js

@@ -135,4 +135,8 @@ export const defaultOptions = {
   // Custom focus ring colour — overrides the default blue when set.
   // Accepts any valid CSS colour string, e.g. '#f97316', 'hsl(25,90%,55%)'.
   focusColor: null,
+  // Display language for the editor UI.
+  // Built-in values: 'en' (default), 'vi', 'ja', 'zh', 'fr'.
+  // Pass a partial or full locale object to override individual strings.
+  lang: 'en',
 };

package/src/styles/autumnnote.scss

@@ -48,20 +48,34 @@
     .an-editable {
       cursor: text;
       user-select: text;
-      // Subtle visual cue that the area is read-only.
-      background: #fafafa;
+      // No background change — keep the same appearance as editable mode
+      // so read-only content looks identical to the live editor.
 
       // Block checklist checkbox interaction in read-only mode.
+      // Keep opacity:1 so disabled checkboxes are still clearly visible.
       ul.an-checklist input[type='checkbox'] {
         pointer-events: none;
         cursor: default;
+        opacity: 1;
       }
 
-      // Prevent images and videos from being dragged out.
-      img,
+      // Prevent images from being dragged out.
+      img {
+        -webkit-user-drag: none;
+        user-drag: none;
+      }
+
+      // Prevent video wrapper itself from being dragged, but keep pointer-events
+      // active so the video shield works and the iframe is visible/interactive.
       .an-video-wrapper {
         -webkit-user-drag: none;
         user-drag: none;
+      }
+
+      // D-3: In read-only mode, disable the video shield so clicks reach the
+      // underlying <iframe> / <video> and users can play videos normally.
+      // The shield is only needed in edit mode to prevent accidental interaction.
+      .an-video-wrapper .an-video-shield {
         pointer-events: none;
       }
     }
@@ -435,7 +449,7 @@
   // Content styles
   p       { margin: 0 0 0.75em; }
   h1, h2, h3, h4, h5, h6 { margin: 0.5em 0; line-height: 1.3; }
-  ul, ol  { margin: 0 0 0.75em 1.5em; padding: 0; }
+  ul, ol  { margin: 0 0 0.75em 0; padding-left: 1.5em; list-style-position: inside; }
   li      { margin-bottom: 0.25em; }
   blockquote {
     margin: 0.5em 0 0.5em 1em;
@@ -638,6 +652,26 @@
   letter-spacing: 0.02em;
 }
 
+// Active state for toggle buttons in tooltips (e.g. Select Cells)
+.an-link-tooltip-btn--active {
+  background: rgba(#3b82f6, 0.12) !important;
+  color: #3b82f6 !important;
+  svg { stroke: #3b82f6; }
+}
+
+// Cells highlighted when select mode is active
+.an-cell-selected {
+  background-color: rgba(#3b82f6, 0.18) !important;
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+
+// Cursor hint for all cells when select mode is on
+.an-table-select-mode td,
+.an-table-select-mode th {
+  cursor: cell;
+}
+
 // Size popover (column width / row height)
 .an-size-popover {
   position: fixed;
@@ -1759,6 +1793,17 @@ $an-video-accent: #8b5cf6; // violet-500
     color: #cdd6f4;
   }
 
+  .an-link-tooltip-btn--active {
+    background: rgba(#6366f1, 0.2) !important;
+    color: #818cf8 !important;
+    svg { stroke: #818cf8; }
+  }
+
+  .an-cell-selected {
+    background-color: rgba(#6366f1, 0.25) !important;
+    outline-color: #6366f1;
+  }
+
   .an-table-cell {
     background: #24273a;
     border-color: #3f3f5f;

package/types/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * AutumnNote – TypeScript declarations
- * @version 1.0.4
+ * @version 1.0.9
  */
 
 // ---------------------------------------------------------------------------
@@ -104,6 +104,12 @@ export interface AsnOptions {
   onPaste?: (data: { text: string; html: string | null }) => void;
   /** Additional color swatches shown at the top of the color picker. */
   colorSwatches?: string[];
+  /**
+   * Display language for the editor UI.
+   * Built-in: 'en' (default) | 'vi' | 'ja' | 'zh' | 'fr'.
+   * Pass a partial locale object to override individual strings.
+   */
+  lang?: string | Partial<AsnLocale>;
 }
 
 // ---------------------------------------------------------------------------
@@ -179,6 +185,57 @@ export type ToolbarItemDef = ButtonDef | DropdownDef | GridButtonDef | ColorPick
 /** Runtime default options object (same export as `src/js/index.js`). */
 export declare const defaultOptions: Required<AsnOptions>;
 
+// ---------------------------------------------------------------------------
+// Locale / i18n
+// ---------------------------------------------------------------------------
+
+/** Full locale object shape used by the editor. All leaf values are strings or template functions. */
+export interface AsnLocale {
+  toolbar: Record<string, string | ((n: string | number) => string) | Record<string, string>>;
+  linkDialog: Record<string, string>;
+  imageDialog: Record<string, string>;
+  videoDialog: Record<string, string | ((type: string) => string)>;
+  emojiDialog: Record<string, string | Record<string, string>>;
+  iconDialog: Record<string, string | Record<string, string>>;
+  findReplace: Record<string, string>;
+  shortcutsDialog: {
+    title: string;
+    ariaLabel: string;
+    close: string;
+    shortcuts: Array<{ category: string; items: Array<{ keys: string; action: string }> }>;
+  };
+  contextMenu: Record<string, string>;
+  statusbar: {
+    resizeHandle: string;
+    words: (n: number) => string;
+    wordsLimit: (n: number, max: number) => string;
+    chars: (n: number) => string;
+    charsLimit: (n: number, max: number) => string;
+  };
+  tooltips: {
+    link: Record<string, string>;
+    image: Record<string, string>;
+    code: Record<string, string>;
+    table: Record<string, string>;
+    video: Record<string, string>;
+  };
+  errors: {
+    imageFormat: (type: string) => string;
+    imageSize: (maxMb: number) => string;
+  };
+}
+
+/** Registry of all built-in locales (keys: 'en', 'vi', 'ja', 'zh', 'fr'). */
+export declare const locales: Record<string, AsnLocale>;
+
+/**
+ * Resolves a lang value to a full AsnLocale.
+ * - string key → looks up locales registry, deep-merges with 'en' fallback.
+ * - object → deep-merges with 'en' as base.
+ * - falsy / 'en' → returns the canonical English locale.
+ */
+export declare function resolveLocale(lang: string | Partial<AsnLocale> | null | undefined): AsnLocale;
+
 // Re-export core utility modules exposed by the package entry-point.
 export * from '../src/js/core/dom.js';
 export * from '../src/js/core/range.js';