Recent changes to Toolbar Reference

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 08:19:14 -0000

--- v11
+++ v12
@@ -257,12 +257,12 @@

 | | |
 |---|---|
-| [⚙️ Configuration](Configuration) | All config options |
-| [🔌 Plugin API](Plugin-API) | Add custom toolbar buttons via plugins |
-| [🧩 Advanced Features](Advanced-Features) | Detailed feature documentation |
+| [⚙️ Configuration](/p/neiki-editor/wiki/Configuration) | All config options |
+| [🔌 Plugin API](/p/neiki-editor/wiki/Plugin%20API) | Add custom toolbar buttons via plugins |
+| [🧩 Advanced Features](/p/neiki-editor/wiki/Advanced%20Features) | Detailed feature documentation |

 ---

 

-  _{← Back to Home}
+  _{← Back to Home}

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:54 -0000

--- v10
+++ v11
@@ -1,278 +1,265 @@
 # 🔧 Toolbar Reference

-Complete reference for all toolbar buttons available in Neiki's Editor. Use the `toolbar` array in your config to pick and arrange buttons.
-
----
-
-## 🧭 How Toolbar Config Works
+> Complete reference for every toolbar button. Use button identifiers in the `toolbar` config array to build your layout.
+
+---
+
+## 🧭 How the Toolbar Config Works

     :::javascript
     new NeikiEditor('#editor', {
         toolbar: [

-            'bold', 'italic', '|',    // '|' = visual separator (also defines wrapping groups)
+            'bold', 'italic', '|',       // '|' = visual separator + wrapping group boundary
             'insertDropdown', '|',
             'moreMenu'
         ]
     });

+- Use `'|'` between groups for visual clarity
+- Groups of buttons between separators wrap together as units on narrow screens
+- Plugin buttons are referenced by their registered `name`
+- Omit any button to exclude it from the toolbar
+
+---
+
+## ✍️ Text Formatting
+
+Basic inline formatting commands.
+
+| Identifier | Description | Shortcut |
+|---|---|---|
+| `bold` | Toggle bold (``) | `Ctrl+B` |
+| `italic` | Toggle italic (``) | `Ctrl+I` |
+| `underline` | Toggle underline (``) | `Ctrl+U` |
+| `strikethrough` | Toggle strikethrough (``) | — |
+| `subscript` | Toggle subscript (`_{`) | — |
+| `superscript` | Toggle superscript (`^{`) | — |
+| `code` | Toggle inline `` or `` block | — |
+| `removeFormat` | Strip all formatting from selection | — |
+
+> [!NOTE]
+> When no text is selected, formatting commands auto-expand to the **word at the cursor**. You can bold a word by clicking inside it — no manual selection required.
+
+---
+
+## 🎨 Text Style
+
+Dropdowns and pickers for typography and color.
+
+| Identifier | Type | Description |
+|---|---|---|
+| `heading` | Select | Paragraph, H1–H6. Always defaults to "Paragraph" — never shows blank. |
+| `fontSize` | Widget | Custom size widget: **[−]** / **[+]** buttons, text input, and preset dropdown (8–96px) |
+| `fontFamily` | Select | Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS) |
+| `foreColor` | Color picker | Text color — preset palette, native color input, hex input |
+| `backColor` | Color picker | Background highlight — same picker controls as `foreColor` |
+
+### Font Size Widget
+
+The `fontSize` item renders a custom interactive widget rather than a plain dropdown:
+
+- **[−]** — decrease by 1px
+- **Text input** — shows current size; type a custom value and press Enter
+- **[+]** — increase by 1px
+- **Dropdown** — click the input to choose from presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96
+
+> [!NOTE]
+> The font size widget preserves your text selection when clicking +/− or choosing a preset.
+
+### Color Picker Details
+
+Both `foreColor` and `backColor` open a picker with:
+- A grid of **preset web colors**
+- A **Reset swatch** to remove the applied color
+- A **native color input** (browser color dialog)
+- A **hex input** — type any `#rrggbb` and press Enter or click Apply
+
+The native color input and hex input stay in sync.
+
 > [!TIP]
-> You can include any combination of buttons in any order. Use `'|'` between groups for visual clarity. Groups of buttons between separators wrap as whole units on smaller screens.
-
----
-
-## ✍️ Text Formatting
-
-Basic text formatting commands.
-
-| Button | Icon | Description | Shortcut |
-|--------|------|-------------|----------|
-| `bold` | **B** | Toggle bold | `Ctrl+B` |
-| `italic` | *I* | Toggle italic | `Ctrl+I` |
-| `underline` | U | Toggle underline | `Ctrl+U` |
-| `strikethrough` | S | Toggle strikethrough | — |
-| `subscript` | X₂ | Toggle subscript | — |
-| `superscript` | X² | Toggle superscript | — |
-| `code` | `` | Toggle code formatting — inline `` or `` block | — |
-| `removeFormat` | T̸ | Remove all formatting from selection | — |
-
-> [!NOTE]
-> When no text is selected, formatting commands (including Remove Formatting) automatically expand to the **word at the cursor position**. This means you can place your cursor inside a word and apply bold, italic, etc. without manually selecting the word first.
-
----
-
-## 🎨 Text Style
-
-Dropdowns, widgets and pickers for styling text.
-
-| Button | Type | Description |
-|--------|------|-------------|
-| `heading` | Select | Paragraph, H1, H2, H3, H4, H5, H6. Always defaults to Paragraph — never shows empty. |
-| `fontSize` | Widget | Font size widget with **[−]** / **[+]** buttons, text input, and dropdown of presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96 |
-| `fontFamily` | Select | Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS) |
-| `foreColor` | Color Picker | Text color — palette, native color input, hex code input |
-| `backColor` | Color Picker | Background color — palette, native color input, hex code input |
-
-### Font Size Widget
-
-The `fontSize` toolbar item renders a custom widget instead of a simple dropdown:
-
-- **[−]** button — decrease size by 1px
-- **Text input** — shows current size, type a custom value and press Enter
-- **[+]** button — increase size by 1px
-- **Dropdown** — click the input to show preset sizes
-
-> [!NOTE]
-> The font size widget preserves your text selection when clicking the +/− buttons or selecting a preset size from the dropdown.
-
-### Color Picker Details
-
-The color picker provides:
-- **A grid of preset colors** covering standard web colors
-- **A "Reset" swatch** to remove the applied color and return to default
-- **Native color input** — opens the browser's built-in color picker for precise selection
-- **Hex code input** — type any `#rrggbb` value and press Enter or click Apply
-
-The native color input and hex input are synced — changing one updates the other.
-
-> [!TIP]
-> Click outside the color picker or select a color to close it. On mobile, the picker automatically adjusts its alignment to stay within the viewport.
+> On mobile, the color picker automatically adjusts its alignment to stay within the viewport.

 ---

 ## 📐 Alignment & Lists

-Control text alignment, lists, and indentation.
-
-| Button | Description |
-|--------|-------------|
-| `alignLeft` | Align text to the left |
-| `alignCenter` | Center-align text |
-| `alignRight` | Align text to the right |
-| `alignJustify` | Justify text (stretch to fill line width) |
+| Identifier | Description |
+|---|---|
+| `alignLeft` | Align left |
+| `alignCenter` | Center-align |
+| `alignRight` | Align right |
+| `alignJustify` | Justify (stretch to fill line width) |
 | `bulletList` | Toggle unordered (bulleted) list |
 | `numberedList` | Toggle ordered (numbered) list |
 | `indent` | Increase indentation level |
 | `outdent` | Decrease indentation level |

 > [!NOTE]
-> `Tab` and `Shift+Tab` keyboard shortcuts also work for indent/outdent when the cursor is inside the editor.
-
----
-
-## ➕ Insert Dropdown
-
-The `insertDropdown` toolbar item renders a single **Insert** button (➕) that opens a dropdown containing:
+> `Tab` and `Shift+Tab` also work for indent/outdent when the cursor is inside the editor.
+
+---
+
+## 🔗 Insert Dropdown
+
+| Identifier | Description |
+|---|---|
+| `insertDropdown` | Opens a dropdown containing all insert actions (see below) |
+
+The `insertDropdown` groups all insert-related actions into a single **Insert** button:
+
+| Action | Description |
+|---|---|
+| **Link** | Insert or edit a hyperlink. Wraps selection or inserts at cursor. |
+| **Image** | Insert image by URL, file upload, or drag & drop |
+| **Video** | Insert video by URL or file upload |
+| **Table** | Create a table (set rows, columns, optional header row) |
+| **Emoji** | Open emoji picker grid |
+| **Special Characters** | Open special characters picker grid |
+
+### Individual Insert Buttons
+
+These can also be added as standalone buttons:
+
+| Identifier | Description |
+|---|---|
+| `blockquote` | Toggle blockquote on the current block |
+| `horizontalRule` | Insert a horizontal rule (``) |
+
+### Image Dialog
+
+The image insert dialog supports:
+- **URL input** — paste any image URL
+- **File picker** — select one or multiple files
+- **Drag & drop** — drag files into the dialog's upload area
+
+Without `imageUploadHandler`, files are embedded as base64. With the handler, files are uploaded and inserted as URLs.
+
+### Video Dialog
+
+- **URL input** — paste any video URL
+- **File upload** — embeds as base64 or uploads via `videoUploadHandler`
+
+Inserted videos render as `` and can be resized/repositioned like images.
+
+---
+
+## 🛠️ Tools
+
+| Identifier | Description | Shortcut |
+|---|---|---|
+| `undo` | Undo last action | `Ctrl+Z` |
+| `redo` | Redo last undone action | `Ctrl+Y` / `Ctrl+Shift+Z` |
+| `findReplace` | Open Find & Replace bar with regex support | — |
+| `viewCode` | Toggle formatted HTML source view with syntax highlighting | — |
+
+### Find & Replace Features
+
+| Feature | Description |
+|---|---|
+| **Search field** | Type text to find |
+| **Replace field** | Type replacement text |
+| **Case Sensitive** | Toggle — when active, `Hello` ≠ `hello` |
+| **Regex Mode** | Toggle — enables JS `RegExp` patterns |
+| **Find Next** | Jump to next match (highlighted) |
+| **Replace** | Replace current highlighted match |
+| **Replace All** | Replace every occurrence at once |
+
+**Useful regex patterns:**
+
+| Pattern | Matches |
+|---|---|
+| `\b\w+\b` | Every word |
+| `\d{4}` | 4-digit numbers |
+| `https?://\S+` | URLs |
+| `.*?` | Italic-wrapped text |
+
+---
+
+## ⋯ More Menu
+
+The `moreMenu` button renders a **⋯** at the right edge of the toolbar. It contains:

 | Item | Description |
-|------|-------------|
-| **Link** | Insert or edit a hyperlink (opens a modal dialog) |
-| **Image** | Insert image via URL or file upload (opens a modal dialog) |
-| **Video** | Insert video via URL or file upload (opens a modal dialog) |
-| **Table** | Insert a table with custom rows, columns, and optional header |
-| **Emoji** | Open emoji picker (100+ emojis) |
-| **Symbol** | Open special characters picker (©, ®, €, π, Ω, arrows, etc.) |
+|---|---|
+| **Save** | Triggers the `onSave` callback (also: `Ctrl+S`) |
+| **Preview** | Opens a preview modal with rendered content |
+| **Download** | Downloads editor content as an `.html` file |
+| **Print** | Opens the browser's print dialog |
+| **Autosave** | Toggle autosave to `localStorage` |
+| **Clear all** | Clear all content (styled red — destructive) |
+| **Change theme** | Select Light, Dark, Blue, or Dark Blue |
+| **Fullscreen** | Toggle fullscreen editing mode |
+| **Help** | Show help modal (author, version, GitHub link) |

 > [!TIP]
-> You can still use `link`, `image`, `video`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if you prefer individual icons instead of the consolidated dropdown.
-
-### Link Dialog
-
-When inserting a link, the modal provides:
-- **URL** field
-- **Display text** (pre-filled with selected text if any)
-- **Open in new tab** checkbox
-
-### Image Dialog
-
-The image modal offers two ways to add images:
-- **URL input** — paste any image URL
-- **File upload** — converts to base64 and embeds in content (or uploads via `imageUploadHandler` if configured)
-
-After insertion, click any image to select it. An **image toolbar** appears above the image with:
-- **Drag handle** (⠿) — drag to reposition the image within the editor
-- **Replace** — swap the image via a file picker
-- **Delete** — remove the image
-
-> [!IMPORTANT]
-> Uploaded images are embedded as **base64 data URIs** directly in the HTML content unless `imageUploadHandler` is configured. For large images, consider hosting them on a server and using the URL option or the upload handler instead.
-
-### Video Dialog
-
-The video modal offers two ways to add videos:
-- **URL input** — paste any video URL
-- **File upload** — converts to base64 and embeds in content (or uploads via `videoUploadHandler` if configured)
-
-Inserted videos are added as `` elements. They can also be resized and repositioned like images.
-
-### Emoji & Special Characters
-
-Both pickers open a grid popup positioned below the toolbar button. Click any character to insert it at the cursor position.
-
-### Other Insert Buttons
-
-These buttons are available as standalone toolbar items:
-
-| Button | Description |
-|--------|-------------|
-| `blockquote` | Toggle block quote on the current block |
-| `horizontalRule` | Insert a horizontal line (``) |
-
----
-
-## 🛠️ Tools
-
-Standalone utility buttons for the toolbar.
-
-| Button | Description | Shortcut |
-|--------|-------------|----------|
-| `undo` | Undo the last action | `Ctrl+Z` |
-| `redo` | Redo the last undone action | `Ctrl+Y` / `Ctrl+Shift+Z` |
-| `findReplace` | Open Find & Replace bar with regex support | — |
-| `viewCode` | Toggle formatted HTML source code view with syntax highlighting | — |
-
-### Find & Replace Features
-
-| Feature | Description |
-|---------|-------------|
-| **Case Sensitive** | Toggle case-sensitive search |
-| **Regex Mode** | Enable regular expression patterns |
-| **Find Next** | Navigate through matches with visual highlighting |
-| **Replace** | Replace the current match |
-| **Replace All** | Replace all matches at once |
-
----
-
-## ⋯ More Menu
-
-The `moreMenu` toolbar item renders a **⋯** button pushed to the right edge of the toolbar. It opens a dropdown containing:
-
-| Item | Description |
-|------|-------------|
-| **Save** | Trigger the `onSave` callback (also available via **Ctrl+S**) |
-| **Preview** | Open a preview modal showing the rendered content |
-| **Download** | Download the editor content as an HTML file |
-| **Print** | Open the browser print dialog for editor content |
-| **Autosave** | Toggle autosave to `localStorage` (shows status badge) |
-| **Clear all** | Clear all editor content (styled in red as a destructive action) |
-| **Change theme** | Choose Light, Dark, Blue, or Dark Blue from a select |
-| **Fullscreen** | Toggle fullscreen editing mode |
-| **Help** | Show help modal with author, version, GitHub and documentation links |
-
-### Theme Toggle
-
-The Change theme select in the More menu lets users choose Light, Dark, Blue, or Dark Blue. The selected theme **persists across page reloads** via `localStorage`.
-
-> [!TIP]
-> You can also toggle the theme programmatically: `editor.toggleTheme();` or set a specific theme: `editor.setTheme('dark-blue');`
-
-### Autosave
-
-> [!CAUTION]
-> Autosave is designed for **development and testing**. For production, use the `onSave` or `onChange` callback to save content to your backend.
-
-When enabled, autosave stores content to `localStorage`. Content is restored on page reload **only** if autosave was active. The status bar shows the autosave state.
-
-Autosave storage is scoped by page URL and editor identity by default. Use the `autosaveKey` option when your app needs a custom draft scope.
+> You can hide the Help item with `showHelp: false` in config.

 ---

 ## 📝 Floating Toolbar

-In addition to the main toolbar, a **floating toolbar** appears when you select text in the editor. It provides quick access to:
+The floating toolbar appears **automatically** when text is selected — it is always enabled and cannot be configured.

 | Position | Buttons | Description |
-|----------|---------|-------------|
-| **Left** | ▲ ▼ | Move current block up / down |
-| **Right** | **B** *I* U S 🔗 | Bold, Italic, Underline, Strikethrough, Insert Link |
-
-The move buttons and formatting buttons are separated by a visual divider. The floating toolbar follows the selection and disappears when the selection is cleared.
-
-> [!NOTE]
-> The floating toolbar is always enabled and cannot be customized through config. It provides the most commonly used formatting options for quick access, plus block reordering.
-
----
-
-## 🏗️ Minimal Toolbar Example
-
-For a clean, minimal editor:
-

-    :::javascript
-    new NeikiEditor('#editor', {
-        toolbar: [
-            'bold', 'italic', 'underline', '|',
-            'heading', '|',
-            'insertDropdown', '|',
-            'undo', 'redo', '|',
-            'moreMenu'
-        ]
-    });
-
-## 🔥 Full-Featured Toolbar Example (Default)
-
-The default toolbar configuration includes all available features:
-
-    :::javascript
-    new NeikiEditor('#editor', {
-        toolbar: [
-            'viewCode', 'undo', 'redo', 'findReplace', '|',
-            'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'code', 'removeFormat', '|',
-            'heading', 'fontFamily', 'fontSize', '|',
-            'foreColor', 'backColor', '|',
-            'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
-            'indent', 'outdent', '|',
-            'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
-            'insertDropdown', '|',
-            'moreMenu'
-        ]
-    });
+|---|---|---|
+| Left | ▲ ▼ | Move current block up / down |
+| Right | **B** *I* U S 🔗 | Bold, Italic, Underline, Strikethrough, Insert Link |
+
+When an image is selected, the floating toolbar is replaced by the **image-specific toolbar** (Drag, Replace, Delete).
+
+---
+
+## 🏗️ Toolbar Examples
+
+### Minimal — Writing-focused
+
+    :::javascript
+    toolbar: [
+        'bold', 'italic', 'underline', '|',
+        'heading', '|',
+        'bulletList', 'numberedList', '|',
+        'insertDropdown', '|',
+        'moreMenu'
+    ]
+
+### Standard — Balanced
+
+    :::javascript
+    toolbar: [
+        'undo', 'redo', '|',
+        'bold', 'italic', 'underline', 'strikethrough', 'removeFormat', '|',
+        'heading', 'fontSize', '|',
+        'foreColor', 'backColor', '|',
+        'alignLeft', 'alignCenter', 'alignRight', '|',
+        'bulletList', 'numberedList', '|',
+        'insertDropdown', '|',
+        'moreMenu'
+    ]
+
+### Full-Featured (Default)
+
+    :::javascript
+    toolbar: [
+        'viewCode', 'undo', 'redo', 'findReplace', '|',
+        'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'code', 'removeFormat', '|',
+        'heading', 'fontFamily', 'fontSize', '|',
+        'foreColor', 'backColor', '|',
+        'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
+        'indent', 'outdent', '|',
+        'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
+        'insertDropdown', '|',
+        'moreMenu'
+    ]

 ---

 ## 🔗 Related Pages

-- **[⚙️ Configuration](Configuration)** — All config options
-- **[🔌 Plugin API](Plugin-API)** — Add custom toolbar buttons via plugins
-- **[🧩 Advanced Features](Advanced-Features)** — Detailed feature documentation
+| | |
+|---|---|
+| [⚙️ Configuration](Configuration) | All config options |
+| [🔌 Plugin API](Plugin-API) | Add custom toolbar buttons via plugins |
+| [🧩 Advanced Features](Advanced-Features) | Detailed feature documentation |

 ---}}

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:52 -0000

--- v9
+++ v10
@@ -107,12 +107,13 @@
 |------|-------------|
 | **Link** | Insert or edit a hyperlink (opens a modal dialog) |
 | **Image** | Insert image via URL or file upload (opens a modal dialog) |
+| **Video** | Insert video via URL or file upload (opens a modal dialog) |
 | **Table** | Insert a table with custom rows, columns, and optional header |
 | **Emoji** | Open emoji picker (100+ emojis) |
 | **Symbol** | Open special characters picker (©, ®, €, π, Ω, arrows, etc.) |

 > [!TIP]
-> You can still use `link`, `image`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if you prefer individual icons instead of the consolidated dropdown.
+> You can still use `link`, `image`, `video`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if you prefer individual icons instead of the consolidated dropdown.

 ### Link Dialog

@@ -134,6 +135,14 @@

 > [!IMPORTANT]
 > Uploaded images are embedded as **base64 data URIs** directly in the HTML content unless `imageUploadHandler` is configured. For large images, consider hosting them on a server and using the URL option or the upload handler instead.
+
+### Video Dialog
+
+The video modal offers two ways to add videos:
+- **URL input** — paste any video URL
+- **File upload** — converts to base64 and embeds in content (or uploads via `videoUploadHandler` if configured)
+
+Inserted videos are added as `` elements. They can also be resized and repositioned like images.

 ### Emoji & Special Characters

@@ -159,7 +168,7 @@
 | `undo` | Undo the last action | `Ctrl+Z` |
 | `redo` | Redo the last undone action | `Ctrl+Y` / `Ctrl+Shift+Z` |
 | `findReplace` | Open Find & Replace bar with regex support | — |
-| `viewCode` | Toggle HTML source code view | — |
+| `viewCode` | Toggle formatted HTML source code view with syntax highlighting | — |

 ### Find & Replace Features

@@ -185,16 +194,16 @@
 | **Print** | Open the browser print dialog for editor content |
 | **Autosave** | Toggle autosave to `localStorage` (shows status badge) |
 | **Clear all** | Clear all editor content (styled in red as a destructive action) |
-| **Toggle Theme** | Switch between Light ☀️ and Dark 🌙 theme |
+| **Change theme** | Choose Light, Dark, Blue, or Dark Blue from a select |
 | **Fullscreen** | Toggle fullscreen editing mode |
 | **Help** | Show help modal with author, version, GitHub and documentation links |

 ### Theme Toggle

-The theme toggle in the More menu switches between Light and Dark themes. The selected theme **persists across page reloads** via `localStorage`.
-
-> [!TIP]
-> You can also toggle the theme programmatically: `editor.toggleTheme();` or set a specific theme: `editor.setTheme('dark');`
+The Change theme select in the More menu lets users choose Light, Dark, Blue, or Dark Blue. The selected theme **persists across page reloads** via `localStorage`.
+
+> [!TIP]
+> You can also toggle the theme programmatically: `editor.toggleTheme();` or set a specific theme: `editor.setTheme('dark-blue');`

 ### Autosave

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:51 -0000

--- v8
+++ v9
@@ -32,6 +32,7 @@
 | `strikethrough` | S | Toggle strikethrough | — |
 | `subscript` | X₂ | Toggle subscript | — |
 | `superscript` | X² | Toggle superscript | — |
+| `code` | `` | Toggle code formatting — inline `` or `` block | — |
 | `removeFormat` | T̸ | Remove all formatting from selection | — |

 > [!NOTE]
@@ -245,7 +246,7 @@
     new NeikiEditor('#editor', {
         toolbar: [
             'viewCode', 'undo', 'redo', 'findReplace', '|',

-            'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeFormat', '|',
+            'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'code', 'removeFormat', '|',
             'heading', 'fontFamily', 'fontSize', '|',
             'foreColor', 'backColor', '|',
             'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:51 -0000

--- v7
+++ v8
@@ -201,6 +201,8 @@
 > Autosave is designed for **development and testing**. For production, use the `onSave` or `onChange` callback to save content to your backend.

 When enabled, autosave stores content to `localStorage`. Content is restored on page reload **only** if autosave was active. The status bar shows the autosave state.
+
+Autosave storage is scoped by page URL and editor identity by default. Use the `autosaveKey` option when your app needs a custom draft scope.

 ---

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:51 -0000

--- v6
+++ v7
@@ -124,10 +124,15 @@

 The image modal offers two ways to add images:

 - **URL input** — paste any image URL
-- **File upload** — converts to base64 and embeds in content
+- **File upload** — converts to base64 and embeds in content (or uploads via `imageUploadHandler` if configured)
+
+After insertion, click any image to select it. An **image toolbar** appears above the image with:
+- **Drag handle** (⠿) — drag to reposition the image within the editor
+- **Replace** — swap the image via a file picker
+- **Delete** — remove the image

 > [!IMPORTANT]
-> Uploaded images are embedded as **base64 data URIs** directly in the HTML content. For large images, consider hosting them on a server and using the URL option instead.
+> Uploaded images are embedded as **base64 data URIs** directly in the HTML content unless `imageUploadHandler` is configured. For large images, consider hosting them on a server and using the URL option or the upload handler instead.

 ### Emoji & Special Characters

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:50 -0000

--- v5
+++ v6
@@ -1,6 +1,6 @@
 # 🔧 Toolbar Reference

-Complete reference for all toolbar buttons available in Neiki Editor. Use the `toolbar` array in your config to pick and arrange buttons.
+Complete reference for all toolbar buttons available in Neiki's Editor. Use the `toolbar` array in your config to pick and arrange buttons.

 ---

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:49 -0000

--- v4
+++ v5
@@ -203,16 +203,15 @@

 In addition to the main toolbar, a **floating toolbar** appears when you select text in the editor. It provides quick access to:

-- **Bold**
-- **Italic**
-- **Underline**
-- **Strikethrough**
-- **Insert Link**
-
-The floating toolbar follows the selection and disappears when the selection is cleared.
-
-> [!NOTE]
-> The floating toolbar is always enabled and cannot be customized through config. It provides the most commonly used formatting options for quick access.
+| Position | Buttons | Description |
+|----------|---------|-------------|
+| **Left** | ▲ ▼ | Move current block up / down |
+| **Right** | **B** *I* U S 🔗 | Bold, Italic, Underline, Strikethrough, Insert Link |
+
+The move buttons and formatting buttons are separated by a visual divider. The floating toolbar follows the selection and disappears when the selection is cleared.
+
+> [!NOTE]
+> The floating toolbar is always enabled and cannot be customized through config. It provides the most commonly used formatting options for quick access, plus block reordering.

 ---

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:49 -0000

--- v3
+++ v4
@@ -181,6 +181,7 @@
 | **Clear all** | Clear all editor content (styled in red as a destructive action) |
 | **Toggle Theme** | Switch between Light ☀️ and Dark 🌙 theme |
 | **Fullscreen** | Toggle fullscreen editing mode |
+| **Help** | Show help modal with author, version, GitHub and documentation links |

 ### Theme Toggle

Toolbar Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:49 -0000

--- v2
+++ v3
@@ -48,8 +48,8 @@
 | `heading` | Select | Paragraph, H1, H2, H3, H4, H5, H6. Always defaults to Paragraph — never shows empty. |
 | `fontSize` | Widget | Font size widget with **[−]** / **[+]** buttons, text input, and dropdown of presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96 |
 | `fontFamily` | Select | Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS) |
-| `foreColor` | Color Picker | Text color — includes palette + reset button |
-| `backColor` | Color Picker | Background highlight color — includes palette + reset button |
+| `foreColor` | Color Picker | Text color — palette, native color input, hex code input |
+| `backColor` | Color Picker | Background color — palette, native color input, hex code input |

 ### Font Size Widget

@@ -67,10 +67,14 @@

 The color picker provides:

 - **A grid of preset colors** covering standard web colors
-- **A "Reset" option** to remove the applied color and return to default
-
-> [!TIP]
-> Click outside the color picker or select a color to close it. The picker is positioned relative to the toolbar button.
+- **A "Reset" swatch** to remove the applied color and return to default
+- **Native color input** — opens the browser's built-in color picker for precise selection
+- **Hex code input** — type any `#rrggbb` value and press Enter or click Apply
+
+The native color input and hex input are synced — changing one updates the other.
+
+> [!TIP]
+> Click outside the color picker or select a color to close it. On mobile, the picker automatically adjusts its alignment to stay within the viewport.

 ---