autumnnote 1.6.6 → 1.7.0

package/README.md

@@ -67,7 +67,7 @@ A **zero-dependency WYSIWYG rich-text editor** built with vanilla JavaScript (ES
 - **FA Icon picker** — FontAwesome 6 Free Solid icons across 8 categories; keyword search; configurable style, size, and colour; inserts as `<i>` element; auto-injects FA CDN if not on the page
 
 ### Search
-- **Find and Replace** — `Ctrl+F` to find, `Ctrl+H` for find-and-replace; compact non-blocking floating panel (top-right); TreeWalker text matching; `<mark>` highlighting; case-sensitive `Aa` toggle; icon-button Prev/Next navigation (↑ ↓); single and replace-all modes
+- **Find and Replace** — `Ctrl+F` to find, `Ctrl+H` for find-and-replace; compact non-blocking floating panel (top-right); TreeWalker text matching; `<mark>` highlighting; case-sensitive `Aa` toggle; **regex mode** (`.*` toggle); icon-button Prev/Next navigation (↑ ↓); single and replace-all modes
 - **Auto language detection** — when selected text is formatted as a code block the editor automatically analyses the content and applies Prism.js syntax highlighting; 20 languages detected: JavaScript, TypeScript, Python, HTML, CSS, SCSS, JSON, SQL, Bash, Java, C#, PHP, Ruby, Go, Rust, C++, C, Kotlin, Swift, XML
 
 ### Inline tooltips
@@ -78,8 +78,8 @@ Floating toolbars appear automatically when the user clicks on an editable eleme
 | **Link** | Open in new tab, Edit (reopens dialog), Unlink |
 | **Image** | Edit alt/URL (reopens dialog), Crop, Delete |
 | **Video** | Edit (reopens dialog), Delete |
-| **Table cell** | Row above/below, Delete row, Column left/right, Delete column, Merge cells, Unmerge cells, Cell selection mode, Column width, Row height, Border width, **Cell background colour**, Delete table |
-| **Code block** | Copy code, Language selector (20 languages + SCSS), Delete block |
+| **Table cell** | Row above/below, Delete row, Column left/right, Delete column, Merge cells, Unmerge cells, Cell selection mode, Column width, Row height, Border width/color, **Cell background colour**, **Cell padding**, **Sort ↑↓**, **Export CSV**, **Toggle header row**, Delete table |
+| **Code block** | Copy code, Language selector (20 languages + SCSS), **Line numbers toggle**, Delete block |
 
 ### Context menu
 Right-click inside the editor opens a context menu with: **Undo**, **Redo**, **Cut**, **Copy**, **Paste**, **Bold**, **Italic**, **Underline**, **Copy Format**, **Paste Format**, **Remove Format**, and a **colour palette** for quick text/highlight colour changes.
@@ -93,7 +93,7 @@ Right-click inside the editor opens a context menu with: **Undo**, **Redo**, **C
 ### UI
 - **Toolbar** — fully configurable button groups; overflow strategy: `wrap` (default) or `scroll`; on viewports ≤ 640 px the toolbar automatically switches to a single horizontally-scrollable row regardless of the `toolbarOverflow` setting; FontAwesome icons with built-in SVG fallback
 - **Sticky toolbar** — `stickyToolbar: true` pins the toolbar to the viewport top; configurable offset for fixed nav bars
-- **Dark / light theme** — `theme: 'dark'` or `theme: 'light'` (default); full SCSS variable coverage; dark styles propagate to all floating elements (dialogs, tooltips, colour pickers)
+- **Dark / light / auto theme** — `theme: 'dark'`, `'light'` (default), or `'auto'` (follows OS `prefers-color-scheme`); full SCSS variable coverage; dark styles propagate to all floating elements (dialogs, tooltips, colour pickers)
 - **Draggable dialogs** — all dialogs (Link, Image, Video, Emoji, Icon, Find & Replace) can be repositioned by dragging their title bar; position is clamped to the viewport
 - **Image resizer** — drag handle on selected image to resize proportionally
 - **Video resizer** — drag handle on selected video embed to resize
@@ -116,7 +116,7 @@ Right-click inside the editor opens a context menu with: **Undo**, **Redo**, **C
 - **Plugin API** — first-class plugin system: `AutumnNote.use(plugin)`, `context.getPlugin(name)`, global button registry (`registerButton`), per-instance installation, `AsnPlugin<T>` TypeScript interface
 - **Tree-shakeable** — ES module build; all core utilities individually exported
 - **TypeScript definitions** — bundled `types/index.d.ts` with full JSDoc coverage
-- **@mention autocomplete** — type `@` (or any custom trigger) to open a floating dropdown backed by a user-supplied `onSearch` function; inserts a non-editable mention chip; customisable chip HTML via `onInsert`
+- **@mention autocomplete** — type `@` (or any custom trigger) to open a floating dropdown backed by a user-supplied `onSearch` function (callback or `async`/Promise); inserts a non-editable mention chip; customisable chip HTML via `onInsert`
 
 ### Security
 - All HTML (pasted content, `setHTML()`, or code-view output) passes through a DOM-based sanitiser that strips `<script>`, `<object>`, `<embed>`, and all `on*` event handler attributes
@@ -407,6 +407,12 @@ See the [full Plugin API docs →](https://cmm-cmm.github.io/Autumn-Note/docs.ht
 | `editor.setHTML(html)` | Sets HTML content (sanitised). `<iframe>` elements are preserved. |
 | `editor.getText()` | Returns plain text with no markup. |
 | `editor.clear()` | Clears all content, resets to an empty `<p>`. |
+| `editor.clearHistory()` | Resets the undo/redo stack. |
+| `editor.getUndoCount()` | Returns the number of available undo steps. |
+| `editor.getRedoCount()` | Returns the number of available redo steps. |
+| `editor.getWordCount()` | Returns the current word count. |
+| `editor.getCharCount()` | Returns the current character count. |
+| `editor.getTableOfContents()` | Returns an array of `{ level, text, element }` heading objects. |
 | `editor.setDisabled(bool)` | Disables (`true`) or re-enables (`false`) the editor and toolbar. |
 | `editor.destroy()` | Removes the editor, disposes all modules, and restores the original element. |
 | `editor.on(event, fn)` | Subscribes to an editor event. Returns an unsubscribe function. |

package/dist/autumnnote.css

@@ -67,6 +67,11 @@
   border-bottom: 1px solid #d1d5db;
   user-select: none;
   border-radius: 6px 6px 0 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.an-toolbar::-webkit-scrollbar {
+  display: none;
 }
 
 .an-btn-group {
@@ -404,6 +409,22 @@
   color: inherit;
   padding: 0;
 }
+.an-editable .an-code-line-numbers {
+  position: relative;
+  padding-left: 3.5em !important;
+}
+.an-editable .an-code-line-numbers::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;
+}
 .an-editable a {
   color: #3b82f6;
 }
@@ -1769,6 +1790,10 @@
   background: #313244;
   color: #cdd6f4;
 }
+.an-theme-dark .an-editable .an-code-line-numbers::before {
+  background: rgba(255, 255, 255, 0.05);
+  border-right-color: rgba(255, 255, 255, 0.1);
+}
 .an-theme-dark .an-editable hr {
   border-color: #3f3f5f;
 }
@@ -2125,6 +2150,145 @@
   color: #6c7086;
 }
 
+@media (prefers-color-scheme: dark) {
+  .an-theme-auto {
+    border-color: #3f3f5f;
+    background: #1e1e2e;
+    color: #cdd6f4;
+  }
+  .an-theme-auto.an-focused {
+    border-color: #89b4fa;
+    box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.2);
+  }
+  .an-theme-auto .an-toolbar {
+    background: #181825;
+    border-color: #3f3f5f;
+  }
+  .an-theme-auto .an-btn {
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-btn:hover {
+    background: #2a2a3e;
+    border-color: #3f3f5f;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-btn:hover svg {
+    stroke: #cdd6f4;
+  }
+  .an-theme-auto .an-btn.active {
+    background: #1a3a5c;
+    border-color: #89b4fa;
+    color: #89b4fa;
+  }
+  .an-theme-auto .an-btn.active svg {
+    stroke: #89b4fa;
+  }
+  .an-theme-auto .an-btn.an-btn-primary {
+    background: #3b5bdb;
+    border-color: #3b5bdb;
+    color: #fff;
+  }
+  .an-theme-auto .an-select {
+    background-color: #1e1e2e;
+    border-color: #3f3f5f;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-select:hover, .an-theme-auto .an-select:focus {
+    border-color: #89b4fa;
+  }
+  .an-theme-auto .an-editable {
+    background: #1e1e2e;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-editable a {
+    color: #89b4fa;
+  }
+  .an-theme-auto .an-editable blockquote {
+    border-color: #3f3f5f;
+    color: #a6adc8;
+  }
+  .an-theme-auto .an-editable pre:not([class*=language-]),
+  .an-theme-auto .an-editable code:not([class*=language-]) {
+    background: #313244;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-editable hr {
+    border-color: #3f3f5f;
+  }
+  .an-theme-auto .an-editable table td, .an-theme-auto .an-editable table th, .an-theme-auto .an-editable .an-table td, .an-theme-auto .an-editable .an-table th {
+    border-color: #3f3f5f;
+  }
+  .an-theme-auto .an-editable table th, .an-theme-auto .an-editable .an-table th {
+    background: #313244;
+  }
+  .an-theme-auto .an-editable.an-placeholder::before {
+    color: #6c7086;
+  }
+  .an-theme-auto .an-editable figcaption.an-figcaption {
+    color: #6c7086;
+  }
+  .an-theme-auto .an-statusbar {
+    background: #181825;
+    border-color: #3f3f5f;
+    color: #6c7086;
+  }
+  .an-theme-auto .an-link-tooltip,
+  .an-theme-auto .an-contextmenu {
+    background: #24273a;
+    border-color: #3f3f5f;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-link-tooltip-url {
+    color: #89b4fa;
+  }
+  .an-theme-auto .an-link-tooltip-btn {
+    color: #a6adc8;
+  }
+  .an-theme-auto .an-link-tooltip-btn:hover {
+    background: #2a2a3e;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-dialog-overlay {
+    background: rgba(0, 0, 0, 0.65);
+  }
+  .an-theme-auto .an-dialog-box {
+    background: #24273a;
+    color: #cdd6f4;
+    border: 1px solid #3f3f5f;
+  }
+  .an-theme-auto .an-dialog-title {
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-input {
+    background: #313244;
+    border-color: #3f3f5f;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-input:focus {
+    border-color: #89b4fa;
+    box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.15);
+  }
+  .an-theme-auto .an-color-popup,
+  .an-theme-auto .an-table-picker-popup,
+  .an-theme-auto .an-size-popover,
+  .an-theme-auto .an-cell-shade-popover {
+    background: #24273a;
+    border-color: #3f3f5f;
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-context-color-swatch {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+  .an-theme-auto .an-context-color-swatch:hover {
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .an-theme-auto .an-label {
+    color: #cdd6f4;
+  }
+  .an-theme-auto .an-editable ul.an-checklist li:has(input[type=checkbox]:checked) {
+    color: #6c7086;
+  }
+}
 @media print {
   .an-container {
     border: none;