autumnnote 1.0.8 → 1.1.0

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,27 @@ 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',
+
+  // Auto-save restore: show a banner when a draft exists in localStorage.
+  // Requires autoSave: true. Set autoSaveRestoreTimeout to the max age in days
+  // (0 = no expiry). onAutoSaveRestore(html, context) fires after restore.
+  autoSaveRestore: false,
+  autoSaveRestoreTimeout: 7,
+  onAutoSaveRestore: null,
+
+  // Markdown input shortcuts: convert markdown syntax typed inline to HTML.
+  // e.g. "## " at line start → <h2>, "**bold**" → <strong>
+  markdownShortcuts: true,
+
+  // Bubble toolbar: show a mini floating toolbar above text selections.
+  bubbleToolbar: false,
+  bubbleToolbarItems: ['bold', 'italic', 'underline', 'link', 'foreColor', 'removeFormat'],
+
+  // @mention support. mention.onSearch(query, callback) must be provided to activate.
+  // mention.minChars defaults to 0 — dropdown opens immediately on trigger character.
+  mention: null,
 };

package/src/styles/autumnnote.scss

@@ -1999,3 +1999,194 @@ $an-video-accent: #8b5cf6; // violet-500
     display: none !important;
   }
 }
+
+// =============================================================================
+// Auto-save restore banner (#2)
+// =============================================================================
+
+.an-asr-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #eff6ff;
+  border-bottom: 1px solid #bfdbfe;
+  font-size: 13px;
+  color: #1e40af;
+  flex-wrap: wrap;
+
+  .an-theme-dark & {
+    background: #1e3a5f;
+    border-bottom-color: #1e4d8c;
+    color: #93c5fd;
+  }
+}
+
+.an-asr-msg {
+  flex: 1;
+  min-width: 0;
+}
+
+.an-asr-btn-restore {
+  padding: 3px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  background: $an-primary;
+  color: #fff;
+  border: none;
+  border-radius: $an-radius-sm;
+  cursor: pointer;
+  line-height: 1.5;
+
+  &:hover {
+    background: $an-primary-hover;
+  }
+}
+
+.an-asr-btn-discard {
+  padding: 3px 10px;
+  font-size: 12px;
+  background: transparent;
+  color: $an-muted;
+  border: 1px solid $an-border;
+  border-radius: $an-radius-sm;
+  cursor: pointer;
+  line-height: 1.5;
+
+  &:hover {
+    background: $an-bg-btn-hover;
+  }
+}
+
+// =============================================================================
+// Bubble toolbar (#4)
+// =============================================================================
+
+.an-bubble-toolbar {
+  display: none;
+  position: fixed;
+  z-index: 10040;
+  background: $an-bg;
+  border: 1px solid $an-border;
+  border-radius: 8px;
+  padding: 4px 6px;
+  gap: 2px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
+  align-items: center;
+  animation: an-bubble-in 0.1s ease;
+  pointer-events: auto;
+  user-select: none;
+
+  .an-theme-dark & {
+    background: #24273a;
+    border-color: #3f3f5f;
+  }
+}
+
+@keyframes an-bubble-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.an-bubble-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  color: $an-text;
+  cursor: pointer;
+  transition: background $an-transition, color $an-transition;
+
+  svg {
+    pointer-events: none;
+    stroke: currentColor;
+  }
+
+  &:hover {
+    background: $an-bg-btn-hover;
+    color: $an-text;
+  }
+
+  &.an-active {
+    background: $an-bg-btn-active;
+    color: $an-primary;
+  }
+
+  .an-theme-dark & {
+    color: #cdd6f4;
+
+    &:hover {
+      background: #313244;
+    }
+
+    &.an-active {
+      background: #1e3a5f;
+      color: #93c5fd;
+    }
+  }
+}
+
+// =============================================================================
+// @mention dropdown + chip (#5)
+// =============================================================================
+
+.an-mention-dropdown {
+  display: none;
+  position: fixed;
+  z-index: 9998;
+  background: $an-bg;
+  border: 1px solid $an-border;
+  border-radius: $an-radius;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  min-width: 180px;
+  max-width: 280px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.an-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: $an-text;
+  transition: background $an-transition;
+
+  &:hover,
+  &.an-mention-active {
+    background: $an-bg-btn-hover;
+  }
+}
+
+.an-mention-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+// Mention chip — inserted inline in the editor content
+.an-mention {
+  display: inline;
+  background: #eff6ff;
+  color: $an-primary;
+  border-radius: 3px;
+  padding: 0 3px;
+  font-weight: 500;
+  cursor: default;
+  user-select: all;
+
+  .an-theme-dark & {
+    background: #1e3a5f;
+    color: #93c5fd;
+  }
+}

package/types/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * AutumnNote – TypeScript declarations
- * @version 1.0.4
+ * @version 1.0.9
  */
 
 // ---------------------------------------------------------------------------
@@ -104,6 +104,68 @@ 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>;
+
+  // ---- Auto-save restore (#2) -----------------------------------------------
+
+  /** Show a restore banner when a previously auto-saved draft exists. Requires autoSave: true. */
+  autoSaveRestore?: boolean;
+  /** Maximum age in days for a draft to be offered for restore (0 = no expiry). Default: 7. */
+  autoSaveRestoreTimeout?: number;
+  /** Callback fired after the user chooses to restore a draft. */
+  onAutoSaveRestore?: (html: string, context: Context) => void;
+
+  // ---- Markdown input shortcuts (#3) ----------------------------------------
+
+  /** Convert Markdown-style syntax typed inline (e.g. "## ", "**bold**") to rich HTML. Default: true. */
+  markdownShortcuts?: boolean;
+
+  // ---- Bubble toolbar (#4) --------------------------------------------------
+
+  /** Show a mini floating toolbar above the text selection. Default: false. */
+  bubbleToolbar?: boolean;
+  /** Button names shown in the bubble toolbar. */
+  bubbleToolbarItems?: Array<'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'foreColor' | 'removeFormat' | 'inlineCode'>;
+
+  // ---- @mention (#5) --------------------------------------------------------
+
+  /** @mention autocomplete configuration. Activated when mention.onSearch is provided. */
+  mention?: MentionOptions | null;
+}
+
+// ---------------------------------------------------------------------------
+// Mention types (#5)
+// ---------------------------------------------------------------------------
+
+export interface MentionItem {
+  id: string | number;
+  label: string;
+  avatar?: string;
+  [key: string]: unknown;
+}
+
+export interface MentionOptions {
+  /** Trigger character. Default: '@'. */
+  trigger?: string;
+  /** Minimum characters to type before searching. Default: 0 (show on trigger character). */
+  minChars?: number;
+  /** Maximum results shown in the dropdown. Default: 8. */
+  maxResults?: number;
+  /** Debounce delay in ms before calling onSearch. Default: 200. */
+  debounce?: number;
+  /** Required. Called with (query, callback) to fetch matching items. */
+  onSearch: (query: string, callback: (items: MentionItem[]) => void) => void;
+  /** Optional. Return custom HTML string for the inserted chip, or null to use the default. */
+  onInsert?: (item: MentionItem) => string | null;
+  /** CSS class added to the inserted mention chip. Default: 'an-mention'. */
+  mentionClass?: string;
+  /** Allow spaces in the query string. Default: false. */
+  allowSpaces?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -179,6 +241,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';