autumnnote 1.6.7 → 1.8.0

package/src/styles/autumnnote.scss

@@ -108,6 +108,12 @@
   user-select: none;
   // Round the top corners to match the container border-radius
   border-radius: $an-radius $an-radius 0 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .an-btn-group {
@@ -477,6 +483,26 @@
       padding: 0;
     }
   }
+
+  // Code block line numbers (toggled via CodeTooltip)
+  .an-code-line-numbers {
+    position: relative;
+    padding-left: 3.5em !important;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3em;
+      background: rgba(0, 0, 0, 0.04);
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      pointer-events: none;
+      z-index: 0;
+    }
+  }
+
   a       { color: $an-primary; }
   hr      { border: none; border-top: 2px solid $an-border; margin: 1em 0; }
   img.an-image {
@@ -1938,6 +1964,11 @@ $an-video-accent: #8b5cf6; // violet-500
       color: #cdd6f4;
     }
 
+    .an-code-line-numbers::before {
+      background: rgba(255, 255, 255, 0.05);
+      border-right-color: rgba(255, 255, 255, 0.1);
+    }
+
     hr { border-color: #3f3f5f; }
 
     table, .an-table {
@@ -2328,6 +2359,156 @@ $an-video-accent: #8b5cf6; // violet-500
   color: $an-dark-muted;
 }
 
+// =============================================================================
+// Auto theme — mirrors dark theme when OS prefers dark and no explicit theme set
+// =============================================================================
+
+@media (prefers-color-scheme: dark) {
+  .an-theme-auto {
+    border-color: #3f3f5f;
+    background: #1e1e2e;
+    color: #cdd6f4;
+
+    &.an-focused {
+      border-color: #89b4fa;
+      box-shadow: 0 0 0 3px rgba(#89b4fa, 0.2);
+    }
+
+    .an-toolbar {
+      background: #181825;
+      border-color: #3f3f5f;
+    }
+
+    .an-btn {
+      color: #cdd6f4;
+
+      &:hover {
+        background: #2a2a3e;
+        border-color: #3f3f5f;
+        color: #cdd6f4;
+
+        svg { stroke: #cdd6f4; }
+      }
+
+      &.active {
+        background: #1a3a5c;
+        border-color: #89b4fa;
+        color: #89b4fa;
+
+        svg { stroke: #89b4fa; }
+      }
+
+      &.an-btn-primary {
+        background: #3b5bdb;
+        border-color: #3b5bdb;
+        color: #fff;
+      }
+    }
+
+    .an-select {
+      background-color: #1e1e2e;
+      border-color: #3f3f5f;
+      color: #cdd6f4;
+
+      &:hover, &:focus { border-color: #89b4fa; }
+    }
+
+    .an-editable {
+      background: #1e1e2e;
+      color: #cdd6f4;
+
+      a { color: #89b4fa; }
+
+      blockquote {
+        border-color: #3f3f5f;
+        color: #a6adc8;
+      }
+
+      pre:not([class*='language-']),
+      code:not([class*='language-']) {
+        background: #313244;
+        color: #cdd6f4;
+      }
+
+      hr { border-color: #3f3f5f; }
+
+      table, .an-table {
+        td, th { border-color: #3f3f5f; }
+        th { background: #313244; }
+      }
+
+      &.an-placeholder::before { color: #6c7086; }
+
+      figcaption.an-figcaption { color: #6c7086; }
+    }
+
+    .an-statusbar {
+      background: #181825;
+      border-color: #3f3f5f;
+      color: #6c7086;
+    }
+
+    .an-link-tooltip,
+    .an-contextmenu {
+      background: #24273a;
+      border-color: #3f3f5f;
+      color: #cdd6f4;
+    }
+
+    .an-link-tooltip-url { color: #89b4fa; }
+
+    .an-link-tooltip-btn {
+      color: #a6adc8;
+
+      &:hover {
+        background: #2a2a3e;
+        color: #cdd6f4;
+      }
+    }
+
+    .an-dialog-overlay { background: rgba(0, 0, 0, 0.65); }
+
+    .an-dialog-box {
+      background: #24273a;
+      color: #cdd6f4;
+      border: 1px solid #3f3f5f;
+    }
+
+    .an-dialog-title { color: #cdd6f4; }
+
+    .an-input {
+      background: #313244;
+      border-color: #3f3f5f;
+      color: #cdd6f4;
+
+      &:focus {
+        border-color: #89b4fa;
+        box-shadow: 0 0 0 3px rgba(#89b4fa, 0.15);
+      }
+    }
+
+    .an-color-popup,
+    .an-table-picker-popup,
+    .an-size-popover,
+    .an-cell-shade-popover {
+      background: #24273a;
+      border-color: #3f3f5f;
+      color: #cdd6f4;
+    }
+
+    .an-context-color-swatch {
+      border-color: rgba(255, 255, 255, 0.15);
+      &:hover { border-color: rgba(255, 255, 255, 0.5); }
+    }
+
+    .an-label { color: #cdd6f4; }
+  }
+
+  .an-theme-auto .an-editable ul.an-checklist li:has(input[type='checkbox']:checked) {
+    color: $an-dark-muted;
+  }
+}
+
 // =============================================================================
 // Print styles
 // =============================================================================

package/types/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * AutumnNote – TypeScript declarations
- * @version 1.0.9
+ * @version 1.8.0
  */
 
 // ---------------------------------------------------------------------------
@@ -67,7 +67,7 @@ export interface AsnOptions {
   /** Top offset in px for sticky toolbar (e.g. height of a fixed nav bar). */
   stickyToolbarOffset?: number;
   /** Colour theme: 'light' (default) | 'dark'. */
-  theme?: 'light' | 'dark';
+  theme?: 'light' | 'dark' | 'auto';
   /** Auto-load Prism.js for syntax highlighting inside code blocks. */
   codeHighlight?: boolean;
   /** CDN base URL for Prism assets. */
@@ -119,6 +119,10 @@ export interface AsnOptions {
   autoSaveRestoreTimeout?: number;
   /** Callback fired after the user chooses to restore a draft. */
   onAutoSaveRestore?: (html: string, context: Context) => void;
+  /** Maximum paste size in MB before paste is silently dropped (0 = unlimited). Default: 5. */
+  maxPasteSize?: number;
+  /** Minimum image dimension in px during resize (width and height). Default: 20. */
+  minImageSize?: number;
 
   // ---- Markdown input shortcuts (#3) ----------------------------------------
 
@@ -158,8 +162,15 @@ export interface MentionOptions {
   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;
+  /**
+   * Called to fetch matching items for the given query.
+   * Supports both callback and Promise styles:
+   * - Callback: `onSearch(query, callback) { callback(items); }`
+   * - Promise:  `async onSearch(query) { return items; }`
+   */
+  onSearch: (query: string, callback: (items: MentionItem[]) => void) => void | Promise<MentionItem[]>;
+  /** Called when onSearch rejects with an error (Promise style only). */
+  onError?: (error: unknown) => 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'. */
@@ -304,6 +315,12 @@ export interface AsnLocale {
     imageFormat: (type: string) => string;
     imageSize: (maxMb: number) => string;
   };
+  autoSaveRestore: {
+    found: string;
+    foundAt: string;
+    restore: string;
+    discard: string;
+  };
 }
 
 /** Registry of all built-in locales (keys: 'en', 'vi', 'ja', 'zh', 'fr'). */
@@ -379,6 +396,12 @@ export declare class Context {
    */
   clearHistory(): void;
 
+  /** Returns the number of available undo steps. */
+  getUndoCount(): number;
+
+  /** Returns the number of available redo steps. */
+  getRedoCount(): number;
+
   /** Returns true when the editor has no meaningful content. */
   isEmpty(): boolean;
 
@@ -400,6 +423,9 @@ export declare class Context {
   /** Returns the current character count (excluding newlines) of the editor content. */
   getCharCount(): number;
 
+  /** Returns an array of heading objects representing the table of contents. */
+  getTableOfContents(): { level: number; text: string; element: HTMLElement }[];
+
   /** Downloads the editor content as an HTML file. */
   downloadHTML(filename?: string): void;
 
@@ -409,6 +435,18 @@ export declare class Context {
   /** Downloads the editor content as a Markdown file. */
   downloadMarkdown(filename?: string): void;
 
+  /** Moves keyboard focus into the editable area. */
+  focus(): void;
+
+  /** Removes keyboard focus from the editable area. */
+  blur(): void;
+
+  /** Returns true when the editor is currently in fullscreen mode. */
+  isFullscreen(): boolean;
+
+  /** Opens a print dialog with the editor content. */
+  print(title?: string): void;
+
   /** Enables or disables (read-only) mode on this instance. */
   setDisabled(disabled: boolean): void;
 
@@ -480,6 +518,56 @@ export declare const foreColorBtn: ColorPickerDef;
 export declare const backColorBtn: ColorPickerDef;
 export declare const defaultToolbar: Array<Array<ToolbarItemDef>>;
 
+/**
+ * All pre-built button definitions grouped in a single namespace object.
+ * Use this to access individual buttons in UMD / CJS environments where
+ * named imports are not available: `AutumnNote.buttons.boldBtn`.
+ */
+export interface ButtonsNamespace {
+  boldBtn: ButtonDef;
+  italicBtn: ButtonDef;
+  underlineBtn: ButtonDef;
+  strikeBtn: ButtonDef;
+  superscriptBtn: ButtonDef;
+  subscriptBtn: ButtonDef;
+  alignLeftBtn: ButtonDef;
+  alignCenterBtn: ButtonDef;
+  alignRightBtn: ButtonDef;
+  alignJustifyBtn: ButtonDef;
+  ulBtn: ButtonDef;
+  olBtn: ButtonDef;
+  indentBtn: ButtonDef;
+  outdentBtn: ButtonDef;
+  undoBtn: ButtonDef;
+  redoBtn: ButtonDef;
+  hrBtn: ButtonDef;
+  linkBtn: ButtonDef;
+  imageBtn: ButtonDef;
+  videoBtn: ButtonDef;
+  emojiBtn: ButtonDef;
+  iconBtn: ButtonDef;
+  tableBtn: GridButtonDef;
+  fontSizeBtn: DropdownDef;
+  removeFormatBtn: ButtonDef;
+  directionBtn: ButtonDef;
+  fontFamilyBtn: DropdownDef;
+  paragraphStyleBtn: DropdownDef;
+  lineHeightBtn: DropdownDef;
+  codeviewBtn: ButtonDef;
+  fullscreenBtn: ButtonDef;
+  shortcutsBtn: ButtonDef;
+  findBtn: ButtonDef;
+  findReplaceBtn: ButtonDef;
+  inlineCodeBtn: ButtonDef;
+  checklistBtn: ButtonDef;
+  printBtn: ButtonDef;
+  foreColorBtn: ColorPickerDef;
+  backColorBtn: ColorPickerDef;
+  defaultToolbar: Array<Array<ToolbarItemDef>>;
+}
+
+export declare const buttons: ButtonsNamespace;
+
 // ---------------------------------------------------------------------------
 // Main AutumnNote API
 // ---------------------------------------------------------------------------
@@ -529,6 +617,13 @@ export interface AutumnNoteStatic {
    */
   registerButton(btnDef: ToolbarItemDef): this;
 
+  /**
+   * All pre-built button definitions in a single namespace.
+   * Use in UMD / CJS builds where named imports are unavailable:
+   * `AutumnNote.buttons.boldBtn`, `AutumnNote.buttons.defaultToolbar`, etc.
+   */
+  readonly buttons: ButtonsNamespace;
+
   /** Library version string. */
   readonly version: string;
 }