autumnnote 1.5.0 → 1.6.1

package/README.md

@@ -1,4 +1,4 @@
-# Autumn Note
+# AutumnNote — WYSIWYG Rich Text Editor
 
 <p align="center"><img src="public/image/banner.png" width="120" alt="AutumnNote Banner"/></p>
 
@@ -12,7 +12,7 @@
 [![jQuery](https://img.shields.io/badge/jQuery-free-lightgrey)](#)
 [![TypeScript](https://img.shields.io/badge/TypeScript-definitions-3178C6?logo=typescript&logoColor=white)](types/index.d.ts)
 
-A modern WYSIWYG rich-text editor built with vanilla JavaScript (ES2022+) — no jQuery, no heavy dependencies.
+A **zero-dependency WYSIWYG rich-text editor** built with vanilla JavaScript (ES2022+) — no jQuery, no runtime dependencies. Lightweight alternative to Summernote, Quill, TinyMCE, Froala, CKEditor, ProseMirror, Trix, and Slate — with official React and Vue 3 wrappers.
 
 > **Fast. Lightweight. Reliable. Efficient.**
 
@@ -67,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:
@@ -77,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.
@@ -92,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
@@ -744,9 +746,9 @@ Build output in `dist/`:
 
 ## Comparison
 
-The table below compares AutumnNote against editors commonly used in this category — such as Summernote, Quill, TinyMCE, and Froala. Specific library names are kept generic to avoid direct bias; the comparison is based on publicly documented feature sets.
+The table below compares AutumnNote against popular WYSIWYG editors: **Summernote**, **Quill**, and **TinyMCE**. Comparison is based on publicly documented feature sets.
 
-| Feature | Editor A | Editor B | Editor C | **AutumnNote** |
+| Feature | Summernote | Quill | TinyMCE | **AutumnNote** |
 |---|---|---|---|---|
 | jQuery dependency | Required | Required | Optional | **None** |
 | Runtime dependencies | Several | Several | 1–2 | **Zero** |

package/dist/autumnnote.css

@@ -38,11 +38,9 @@
 }
 .an-container.an-disabled .an-editable img {
   -webkit-user-drag: none;
-  user-drag: none;
 }
 .an-container.an-disabled .an-editable .an-video-wrapper {
   -webkit-user-drag: none;
-  user-drag: none;
 }
 .an-container.an-disabled .an-editable .an-video-wrapper .an-video-shield {
   pointer-events: none;
@@ -560,6 +558,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 +648,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 +765,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 +840,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 +1313,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 +1816,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 +1871,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 +1904,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 +1954,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 +1978,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;