autumnnote 1.4.2 → 1.6.0

package/README.md

@@ -26,16 +26,17 @@ A modern WYSIWYG rich-text editor built with vanilla JavaScript (ES2022+) — no
 
 1. [Features](#features)
 2. [Installation](#installation)
-3. [Quick Start](#quick-start)
-4. [Plugin API](#plugin-api)
-5. [API](#api)
-6. [Options](#options)
-7. [Toolbar Customisation](#toolbar-customisation)
-8. [Keyboard Shortcuts](#keyboard-shortcuts)
-9. [Mentions](#mentions)
-10. [Project Structure](#project-structure)
-11. [Comparison](#comparison)
-12. [License](#license)
+3. [Framework Wrappers](#framework-wrappers)
+4. [Quick Start](#quick-start)
+5. [Plugin API](#plugin-api)
+6. [API](#api)
+7. [Options](#options)
+8. [Toolbar Customisation](#toolbar-customisation)
+9. [Keyboard Shortcuts](#keyboard-shortcuts)
+10. [Mentions](#mentions)
+11. [Project Structure](#project-structure)
+12. [Comparison](#comparison)
+13. [License](#license)
 
 ---
 
@@ -66,7 +67,8 @@ A modern WYSIWYG rich-text editor built with vanilla JavaScript (ES2022+) — no
 - **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; TreeWalker text matching; `<mark>` highlighting; case-sensitive toggle; 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; 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
 Floating toolbars appear automatically when the user clicks on an editable element:
@@ -76,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, Delete table |
-| **Code block** | Copy code, 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, **Cell background colour**, Delete table |
+| **Code block** | Copy code, Language selector (20 languages + SCSS), 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.
@@ -91,7 +93,8 @@ 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 / light theme** — `theme: 'dark'` or `theme: 'light'` (default); 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
 - **Statusbar** — live word and character count; drag handle to resize editor height; limit warnings when `maxChars` or `maxWords` is reached
@@ -166,6 +169,66 @@ import 'autumnnote/dist/autumnnote.css';
 
 ---
 
+## Framework Wrappers
+
+Official React and Vue 3 wrappers are available as separate packages in this monorepo (managed with pnpm workspaces).
+
+### React
+
+```bash
+npm install autumnnote autumnnote-react
+import 'autumnnote/dist/autumnnote.css';
+```
+
+```jsx
+import { useRef } from 'react';
+import AutumnNoteEditor from 'autumnnote-react';
+
+function MyEditor() {
+  const editorRef = useRef(null);
+
+  return (
+    <AutumnNoteEditor
+      ref={editorRef}
+      options={{ placeholder: 'Start typing…', height: 300, bubbleToolbar: true }}
+    />
+  );
+}
+
+// Access the editor instance:
+editorRef.current.getHTML();
+editorRef.current.invoke('editor.setHTML', '<p>Hello!</p>');
+```
+
+The `ref` is forwarded to the underlying `Context` instance via `useImperativeHandle`. Pass a `key` prop to force remount when options change.
+
+### Vue 3
+
+```bash
+npm install autumnnote autumnnote-vue
+import 'autumnnote/dist/autumnnote.css';
+```
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import AutumnNoteEditor from 'autumnnote-vue';
+
+const editorRef = ref(null);
+</script>
+
+<template>
+  <AutumnNoteEditor
+    ref="editorRef"
+    :options="{ placeholder: 'Start typing…', height: 300 }"
+  />
+</template>
+```
+
+Access the editor instance via `editorRef.value.editor.value` (the `editor` reactive ref exposed by `defineExpose`).
+
+---
+
 ## Quick Start
 
 ### ES Module
@@ -641,16 +704,34 @@ src/
     └── autumnnote.scss       Main stylesheet
 ```
 
+### Monorepo structure
+
+This project uses **pnpm workspaces** to manage the core library alongside official framework wrappers:
+
+```
+autumn-note-ce/
+├── pnpm-workspace.yaml       # workspace root
+├── src/                      # core library source
+├── packages/
+│   ├── react/                # autumnnote-react
+│   │   └── src/index.jsx
+│   └── vue/                  # autumnnote-vue
+│       └── src/AutumnNote.vue
+└── test/                     # Vitest test suite
+```
+
 ### Development commands
 
 ```bash
-npm install          # install dependencies
-npm run dev          # start Vite dev server with HMR
-npm run build        # build ES + UMD + CSS to dist/
-npm test             # run Vitest test suite once
-npm run test:watch   # run tests in watch mode
-npm run lint         # ESLint
-npm run typecheck    # TypeScript type check (tsconfig.json)
+pnpm install                           # install all workspace packages
+npm run dev                            # start Vite dev server with HMR
+npm run build                          # build core ES + UMD + CSS to dist/
+pnpm --filter autumnnote-react build   # build React wrapper
+pnpm --filter autumnnote-vue build     # build Vue wrapper
+npm test                               # run Vitest test suite once
+npm run test:watch                     # run tests in watch mode
+npm run lint                           # ESLint
+npm run typecheck                      # TypeScript type check (tsconfig.json)
 ```
 
 Build output in `dist/`:

package/dist/autumnnote.css

@@ -560,6 +560,30 @@
   letter-spacing: 0.02em;
 }
 
+.an-link-tooltip-btn--shade {
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 0 3px;
+  height: auto;
+}
+.an-link-tooltip-btn--shade .an-bubble-btn-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.an-link-tooltip-btn--shade .an-bubble-btn-svg svg {
+  display: block;
+}
+.an-link-tooltip-btn--shade .an-link-tooltip-color-strip {
+  display: block;
+  width: 13px;
+  height: 3px;
+  border-radius: 1px;
+  pointer-events: none;
+  background: transparent;
+}
+
 .an-link-tooltip-btn--active {
   background: rgba(59, 130, 246, 0.12) !important;
   color: #3b82f6 !important;
@@ -626,6 +650,51 @@
   gap: 6px;
 }
 
+.an-cell-shade-popover {
+  position: fixed;
+  z-index: 1200;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 10px 10px 6px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 166px;
+}
+.an-cell-shade-popover .an-size-popover-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.an-cell-shade-popover .an-shade-no-color {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 12px;
+  color: #6b7280;
+  background: transparent;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.an-cell-shade-popover .an-shade-no-color:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+.an-cell-shade-popover .an-shade-color-input {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
 .an-codeview {
   flex: 1;
   width: 100%;
@@ -698,8 +767,31 @@
   gap: 10px;
 }
 
+.an-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.an-dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+.an-dialog-icon svg {
+  display: block;
+  stroke: currentColor;
+}
+
 .an-dialog-title {
-  margin: 0 0 4px;
+  margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: #111827;
@@ -750,6 +842,102 @@
   cursor: pointer;
 }
 
+.an-fr-dialog {
+  background: transparent;
+  pointer-events: none;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 56px 16px 0 0;
+}
+.an-fr-dialog .an-fr-box {
+  pointer-events: auto;
+  width: 360px;
+  padding: 14px 16px 16px;
+  gap: 8px;
+}
+
+.an-fr-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+.an-fr-header .an-dialog-title {
+  margin: 0;
+  font-size: 14px;
+}
+
+.an-fr-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.an-fr-search-bar .an-fr-input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 8px;
+  font-size: 13px;
+}
+
+.an-fr-replace-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.an-fr-replace-row .an-fr-input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 8px;
+  font-size: 13px;
+}
+.an-fr-replace-row .an-fr-replace-btn {
+  flex-shrink: 0;
+  padding: 5px 10px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.an-fr-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+}
+.an-fr-icon-btn svg {
+  display: block;
+  stroke: currentColor;
+}
+.an-fr-icon-btn:hover {
+  background: #f3f4f6;
+  color: #111827;
+  border-color: #d1d5db;
+}
+.an-fr-icon-btn.an-fr-icon-btn--active {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.an-fr-counter {
+  font-size: 11px;
+  color: #6b7280;
+  white-space: nowrap;
+  min-width: 36px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
 .an-input {
   width: 100%;
   padding: 7px 10px;
@@ -1127,6 +1315,28 @@
   margin: 0;
 }
 
+.an-dialog-title-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.an-dialog-icon--sm {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.an-dialog-icon--sm svg {
+  display: block;
+  stroke: currentColor;
+}
+
 .an-icon-close {
   display: flex;
   align-items: center;
@@ -1608,6 +1818,27 @@
 .an-theme-dark .an-dialog-title {
   color: #cdd6f4;
 }
+.an-theme-dark .an-dialog-icon,
+.an-theme-dark .an-dialog-icon--sm {
+  background: rgba(129, 140, 248, 0.15);
+  color: #818cf8;
+}
+.an-theme-dark .an-fr-icon-btn {
+  color: #a6adc8;
+}
+.an-theme-dark .an-fr-icon-btn:hover {
+  background: #313244;
+  color: #cdd6f4;
+  border-color: #45475a;
+}
+.an-theme-dark .an-fr-icon-btn.an-fr-icon-btn--active {
+  background: rgba(129, 140, 248, 0.15);
+  color: #818cf8;
+  border-color: rgba(129, 140, 248, 0.3);
+}
+.an-theme-dark .an-fr-counter {
+  color: #6c7086;
+}
 .an-theme-dark .an-label {
   color: #cdd6f4;
 }
@@ -1642,11 +1873,20 @@
 }
 .an-theme-dark .an-color-popup,
 .an-theme-dark .an-table-picker-popup,
-.an-theme-dark .an-size-popover {
+.an-theme-dark .an-size-popover,
+.an-theme-dark .an-cell-shade-popover {
   background: #24273a;
   border-color: #3f3f5f;
   color: #cdd6f4;
 }
+.an-theme-dark .an-cell-shade-popover .an-shade-no-color {
+  border-color: #3f3f5f;
+  color: #a6adc8;
+}
+.an-theme-dark .an-cell-shade-popover .an-shade-no-color:hover {
+  background: #313244;
+  color: #cdd6f4;
+}
 .an-theme-dark .an-link-tooltip-btn--active {
   background: rgba(99, 102, 241, 0.2) !important;
   color: #818cf8 !important;
@@ -1666,6 +1906,19 @@
   background: rgba(99, 102, 241, 0.3);
   border-color: #6366f1;
 }
+.an-theme-dark .an-color-custom {
+  border-top-color: #3f3f5f;
+  color: #cdd6f4;
+}
+.an-theme-dark .an-color-arrow:hover {
+  border-left-color: #45475a;
+}
+.an-theme-dark .an-table-label {
+  color: #6c7086;
+}
+.an-theme-dark .an-context-table-grid-panel {
+  border-top-color: #3f3f5f;
+}
 .an-theme-dark .an-context-item {
   color: #cdd6f4;
 }
@@ -1703,10 +1956,22 @@
   color: #cdd6f4;
 }
 .an-theme-dark .an-icon-cell {
+  color: #a6adc8;
+}
+.an-theme-dark .an-icon-cell i {
   color: #cdd6f4;
 }
 .an-theme-dark .an-icon-cell:hover {
   background: #2a2a3e;
+  border-color: #45475a;
+}
+.an-theme-dark .an-icon-cell.active {
+  background: rgba(129, 140, 248, 0.15);
+  border-color: #818cf8;
+  color: #818cf8;
+}
+.an-theme-dark .an-icon-cell.active i {
+  color: #818cf8;
 }
 .an-theme-dark .an-icon-close {
   color: #a6adc8;
@@ -1715,6 +1980,63 @@
   background: #2a2a3e;
   color: #cdd6f4;
 }
+.an-theme-dark .an-emoji-box {
+  background: #1e1e2e;
+  border-color: #45475a;
+}
+.an-theme-dark .an-emoji-cell {
+  color: inherit;
+}
+.an-theme-dark .an-emoji-cell:hover {
+  background: #313244;
+}
+.an-theme-dark .an-emoji-grid {
+  scrollbar-color: #45475a transparent;
+}
+.an-theme-dark .an-icon-box {
+  background: #1e1e2e;
+  border-color: #45475a;
+}
+.an-theme-dark .an-icon-grid {
+  background: #181825;
+  border-color: #45475a;
+}
+.an-theme-dark .an-icon-options {
+  background: #181825;
+  border-color: #45475a;
+}
+.an-theme-dark .an-icon-preview {
+  background: #181825;
+  border-color: #45475a;
+  color: #cdd6f4;
+}
+.an-theme-dark .an-icon-preview .an-icon-preview-empty {
+  color: #6c7086;
+}
+.an-theme-dark .an-icon-option-select {
+  background: #313244;
+  border-color: #45475a;
+  color: #cdd6f4;
+}
+.an-theme-dark .an-icon-empty {
+  color: #6c7086;
+}
+.an-theme-dark .an-bubble-color-picker {
+  background: #24273a;
+  border-color: #3f3f5f;
+}
+.an-theme-dark .an-bubble-color-picker .an-context-color-custom {
+  border-color: #3f3f5f;
+  color: #a6adc8;
+}
+.an-theme-dark .an-table-tooltip {
+  background: #24273a;
+  border-color: #3f3f5f;
+}
+.an-theme-dark .an-fr-box {
+  background: #1e1e2e;
+  border-color: #45475a;
+}
 
 .an-toolbar-overflow-scroll .an-toolbar {
   flex-wrap: nowrap;