Recent changes to Advanced Features

Advanced Features modified by neikiri

neikiri — Tue, 09 Jun 2026 08:04:24 -0000

--- v10
+++ v11
@@ -353,13 +353,13 @@

 | | |
 |---|---|
-| [⚙️ Configuration](Configuration) | All config options including `imageUploadHandler`, `autosaveKey` |
-| [🎨 Themes & Styling](Themes-and-Styling) | CSS customization and theme details |
-| [📋 API Reference](API-Reference) | `setTheme`, `toggleTheme`, `insertHTML` and all methods |
-| [🔒 Security](Security) | Sanitization details |
+| [⚙️ Configuration](/p/neiki-editor/wiki/Configuration) | All config options including `imageUploadHandler`, `autosaveKey` |
+| [🎨 Themes & Styling](/p/neiki-editor/wiki/Themes%20and%20Styling) | CSS customization and theme details |
+| [📋 API Reference](/p/neiki-editor/wiki/API%20Reference) | `setTheme`, `toggleTheme`, `insertHTML` and all methods |
+| [🔒 Security](/p/neiki-editor/wiki/Security) | Sanitization details |

 ---

 

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

Advanced Features modified by neikiri

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

--- v9
+++ v10
@@ -1,23 +1,24 @@
 # 🧩 Advanced Features

-Deep dive into Neiki's Editor's advanced capabilities — tables, images, themes, find & replace, autosave, and more.
+> Deep dives into tables, images, video, floating toolbar, block reordering, autosave, Find & Replace, and more.

 ---

 ## 📊 Tables

-Insert tables via the **Table** toolbar button. A dialog lets you set:
-
+### Inserting a Table
+
+Click the **Insert → Table** button. A dialog lets you configure:

 - **Rows** — number of rows
 - **Columns** — number of columns
-- **Header row** — optional first row styled as ``
+- **Header row** — optional first row as `` elements

 ### Table Context Menu

-Right-click on any table cell to access a context menu with these options:
+Right-click any table cell to access:

 | Action | Description |
-|--------|-------------|
+|---|---|
 | **Insert Row Above** | Add a row above the current cell |
 | **Insert Row Below** | Add a row below the current cell |
 | **Insert Column Left** | Add a column to the left |
@@ -25,31 +26,29 @@
 | **Delete Row** | Remove the current row |
 | **Delete Column** | Remove the current column |
 | **Delete Table** | Remove the entire table |
-| **Merge Cells** | Merge selected cells horizontally (uses `colspan`) |
+| **Merge Cells** | Merge selected cells horizontally (`colspan`) |
 | **Split Cell** | Split a previously merged cell back to individual cells |

 > [!TIP]
-> To select multiple cells for merging, click the first cell, then hold `Shift` and click the last cell in the same row. Then right-click to access "Merge Cells".
+> To select multiple cells for merging: click the first cell, hold `Shift`, click the last cell in the same row, then right-click → Merge Cells.

 ### Column Resize

-Hover near the border between two columns — a **vertical drag handle** appears. Drag it horizontally to resize adjacent columns:
+Hover near the border between two columns — a vertical drag handle appears. Drag it to resize:


 1. The table switches to `table-layout: fixed` during resize
-2. All cells in the affected columns are resized proportionally
-3. Minimum column width is 40px to prevent collapse
-
-> [!TIP]
-> Column resize works on both `` and `` cells. The handle appears when the cursor is within 6px of a column border.
+2. Adjacent columns are resized proportionally
+3. Minimum column width is 40px
+4. Works on both `` and `` cells
+5. The handle appears when the cursor is within 6px of a column border

 ### Table Styling

-Tables are rendered with default styling provided by `neiki-editor.css`:
-
+Tables are rendered with default styles from `neiki-editor.css`:

 - Bordered cells with subtle grid lines
 - Header row with distinct background color
-- Responsive width (100% of editor)
-- Compatible with all built-in themes
+- Responsive 100% width
+- Compatible with all 4 built-in themes

 ---

@@ -58,24 +57,13 @@
 Neiki's Editor supports five ways to insert images:

 ### 1. URL Input
-
-Click the **Image** toolbar button, paste a URL, and the image is inserted as a standard `` tag.
-

-    :::html
-    
+Click **Insert → Image**, paste a URL. Inserted as a standard `` tag.

 ### 2. File Upload (Single or Multiple)
-
-The image dialog includes a file picker that supports **multiple file selection**. Select one or more images and they will all be inserted into the editor.
-
-**Without `imageUploadHandler`:**
-- Images are read via `FileReader` API and converted to **base64** data URIs
-- Each selected image is embedded directly in the HTML content
-
-**With `imageUploadHandler`:**
-- Each file is passed to your async handler which uploads it to a server/CDN
-- The returned URL is inserted as a standard `` tag
-- This keeps HTML content lightweight and enables browser caching
+The image dialog supports **multiple file selection**. All selected images are inserted sequentially.
+
+- **Without `imageUploadHandler`:** images are read via `FileReader` and embedded as base64 data URIs
+- **With `imageUploadHandler`:** each file is passed to your async handler, the returned URL is inserted as ``

     :::javascript
     new NeikiEditor('#editor', {
@@ -89,63 +77,49 @@
     });

 > [!TIP]
-> Using `imageUploadHandler` is strongly recommended for production. It avoids bloated base64 content and allows browsers to cache large images efficiently.
+> Using `imageUploadHandler` is strongly recommended for production — it prevents bloated base64 content and enables browser caching.

 > [!CAUTION]
-> Without `imageUploadHandler`, base64-encoded images increase the HTML content size significantly. For production use with large images, consider setting up the upload handler or using your own server-side processing.
+> Without `imageUploadHandler`, base64-encoded images significantly increase the HTML content size. For large images or production use, configure the upload handler.

 ### 3. Drag & Drop

-Drag one or more image files directly into the editor content area. The editor automatically:
-
-1. Detects the drop event
-2. Uploads via `imageUploadHandler` (if configured) or reads as base64
-3. Inserts each image at the drop position
+Drag image files directly into the editor content area. The editor detects the drop, uploads or reads as base64, and inserts each image at the drop position.
+
+### 4. Clipboard Paste
+
+Copy an image to your clipboard (screenshot, right-click → Copy Image) and paste with `Ctrl+V`. Works with or without `imageUploadHandler`.
+
+### 5. Resize Images
+
+Click any image to select it. **Resize handles** appear on all four corners (NW, NE, SW, SE):
+- Drag any handle to resize
+- Aspect ratio is **always maintained**
+- A live **size label** (e.g. `640 × 480`) appears below the image while resizing
+- Minimum size: 30px wide
+- Click outside to deselect
+
+### Image Toolbar
+
+When an image is selected, a contextual toolbar appears:
+
+| Button | Description |
+|---|---|
+| ⠿ Drag handle | Click and drag to reposition the image |
+| Replace | Open file picker to swap the current image |
+| Delete | Remove the selected image |

 > [!NOTE]
-> Multiple files dropped at once will each be inserted sequentially.
-
-Selected text can also be dragged to a new position inside the editor. Text, image, and video drags share the same insertion indicator so the drop position is visible before release.
-
-### 4. Clipboard Paste
-
-Copy an image to your clipboard (e.g. screenshot, right-click → Copy Image) and paste it directly into the editor with **Ctrl+V**.
-
-- If `imageUploadHandler` is configured, the image is uploaded and inserted as a URL
-- Otherwise, the image is embedded as base64
-
-### 5. Resize Images
-
-Click any image in the editor to select it. **Resize handles** appear on all four corners (NW, NE, SW, SE). Drag any handle to resize:
-
-- Aspect ratio is **always maintained** during resize
-- A live **size label** (e.g. `640 × 480`) appears below the image
-- Minimum size is 30px wide to prevent accidental collapse
-- Click outside the image to deselect and hide handles
-
-> [!NOTE]
-> The resize wrapper is automatically cleaned up when calling `getContent()`, `getHTML()`, or `getJSON()` — only the `` element with its inline `width` and `height` styles is included in the output.
-
-### 6. Image Toolbar
-
-When an image is selected, a contextual toolbar appears above it with image-specific actions:
-
-| Button | Description |
-|--------|-------------|
-| **Drag handle** (⠿) | Click and drag to reposition the image to a different location in the editor |
-| **Replace** | Open a file picker to swap the current image (supports `imageUploadHandler` or base64) |
-| **Delete** | Remove the selected image from the editor |
-
-The floating text-formatting toolbar is automatically hidden when an image is selected, so only relevant image actions are shown.
-
-> [!TIP]
-> To move an image, click it to select, then use the grip handle in the image toolbar to drag it to a new position. The image will be placed as a new block at the drop location.
+> The floating text-formatting toolbar is automatically hidden when an image is selected — only image-specific actions are shown.

 ---

 ## 🎬 Videos

-Use **Insert → Video** to add videos by URL, from a local file, or by dragging a video file into the editor. Without `videoUploadHandler`, selected video files are converted to base64 and embedded in the HTML. With `videoUploadHandler`, the file is uploaded through your callback and the returned URL is inserted.
+Insert videos via **Insert → Video**:
+- **URL input** — paste any video URL
+- **File upload** — converted to base64 or uploaded via `videoUploadHandler`
+- **Drag & drop** — drag a video file into the editor

     :::javascript
     new NeikiEditor('#editor', {
@@ -158,68 +132,49 @@
         }
     });

-Inserted videos render as ``, are preserved by the sanitizer, and can be resized or repositioned like images.
+Inserted videos render as `` elements. They can be resized and repositioned just like images.

 ---

 ## 🎨 Themes

-### Light Theme (Default)
-
-Clean white background with dark text. Standard for most use cases.
-
-### Dark Theme
-
-Dark background with light text. Easy on the eyes for extended editing sessions.
-
-### Blue Theme
-
-A bright blue interface with a white editing canvas.
-
-### Dark Blue Theme
-
-A deep blue interface for low-light editing with blue accents.
+Four built-in themes:
+
+| Theme | Key | Description |
+|---|---|---|
+| Light | `'light'` | Clean white background, dark text. Default. |
+| Dark | `'dark'` | Dark background, light text. Easy on the eyes. |
+| Blue | `'blue'` | Bright blue interface, white canvas. |
+| Dark Blue | `'dark-blue'` | Deep blue interface, blue accents. |

 ### Setting the Theme

-**On initialization:**
-

-    :::javascript
-    new NeikiEditor('#editor', {
-        theme: 'dark'
-    });
-
-**Toggle at runtime:**
-
-    :::javascript
-    editor.toggleTheme();
-
-**Via the More menu (⋯):**
-
-The default toolbar includes `'moreMenu'` which contains a **Change theme** select for Light, Dark, Blue, and Dark Blue.
-
-**Set a specific theme:**
-
-    :::javascript
-    editor.setTheme('dark');
-    editor.setTheme('light');
-    editor.setTheme('blue');
+**At initialization:**
+
+    :::javascript
+    new NeikiEditor('#editor', { theme: 'dark' });
+
+**Programmatically:**
+
+    :::javascript
     editor.setTheme('dark-blue');
+    editor.toggleTheme();   // cycle: light → dark → blue → dark-blue → light
+
+**Via the More menu (⋯):** The Change theme select lets users pick any theme.

 ### Theme Persistence

 > [!IMPORTANT]
 > The selected theme is persisted to `localStorage` as a **global** setting. This means:
-> - The theme choice applies to all editor instances on the page
-> - The theme persists across page reloads
-> - If a user selects dark mode, it remains dark even if you set `theme: 'light'` in config — **user preference takes priority**
+> - It applies to all editor instances on the page
+> - It persists across page reloads
+> - If the user selected dark mode, it remains dark even if you set `theme: 'light'` in config — **user preference always takes priority**

 ### Styling with Themes

-The dark theme applies the CSS class `neiki-dark` to the editor container. You can use this to style custom elements:
+The dark theme applies the CSS class `neiki-dark` to the editor container. Target it for custom dark-mode styles:

     :::css

-    /* Custom styling for dark mode */
     .neiki-dark .my-custom-element {
         background: #1e1e1e;
         color: #e0e0e0;
@@ -229,12 +184,10 @@

 ## 🌍 Localization (i18n)

-Neiki's Editor supports multiple UI languages for all user-facing text.
-
 ### Supported Languages

 | Code | Language |
-|------|----------|
+|---|---|
 | `en` | English (default) |
 | `cs` | Czech |
 | `zh` | Chinese |
@@ -248,88 +201,85 @@

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

-        language: 'cs'  // Czech UI
+        language: 'cs'
     });

 ### What Gets Translated


 - All toolbar button tooltips
 - Modal dialog labels (Link, Image, Table, Find & Replace)
-- Status bar texts (word count, character count)
-- Autosave messages ("Autosaving...", "Saved locally")
+- Status bar texts (word count, character count, block type)
+- Autosave status messages
 - System messages and confirmations

+### Custom Translations
+
+Override any translation key via the `translations` option:
+

+    :::javascript
+    new NeikiEditor('#editor', {
+        language: 'en',
+        translations: {
+            'toolbar.bold': 'Make Bold',
+            'placeholder': 'Start writing here...'
+        }
+    });
+
 > [!NOTE]
-> The `language` option must be set at initialization. Changing language at runtime requires re-initializing the editor.
+> The `language` option must be set at initialization. Changing it at runtime requires re-initializing the editor.

 ---

 ## 🔍 Find & Replace

-Open Find & Replace via the `findReplace` toolbar button. The bar appears at the top of the editor content area.
-
-### Features
+Open via the `findReplace` toolbar button. The bar appears at the top of the editor content area.

 | Feature | Description |
-|---------|-------------|
-| **Search field** | Type text to find in the editor content |
+|---|---|
+| **Search field** | Type text to find |
 | **Replace field** | Type replacement text |
-| **Case Sensitive** | Toggle button — when active, `Hello` ≠ `hello` |
-| **Regex Mode** | Toggle button — enables regular expression patterns |
+| **Case Sensitive** | Toggle — when active, `Hello` ≠ `hello` |
+| **Regex Mode** | Toggle — enables JS `RegExp` patterns |
 | **Find Next** | Jump to and highlight the next match |
 | **Replace** | Replace the current highlighted match |
-| **Replace All** | Replace every occurrence at once |
+| **Replace All** | Replace all occurrences at once |

 ### Regex Examples

-When Regex Mode is enabled, you can use powerful patterns:
-
 | Pattern | Matches |
-|---------|---------|
+|---|---|
 | `\b\w+\b` | Every word |
 | `\d{4}` | 4-digit numbers |
 | `https?://\S+` | URLs |
 | `.*?` | Italic-wrapped text |

-> [!TIP]
-> Regex mode uses JavaScript's `RegExp` under the hood. All standard regex syntax is supported, including character classes, quantifiers, and groups.
-
 ---

 ## 💾 Autosave

-Autosave is accessible from the **More menu** (⋯) in the default toolbar.
+Autosave is accessible via the **More menu** (⋯).

 ### How It Works

-1. User clicks **Autosave** in the More menu (⋯)
-2. A badge shows the autosave status (✓ when active, ✕ when inactive)
-3. Content is saved to `localStorage` on content changes
+1. User enables Autosave from the More menu
+2. A badge shows the autosave status (✓ active, ✕ inactive)
+3. Content is saved to `localStorage` on every change

 4. The status bar shows "Autosaving..." / "Saved locally"
-5. On next page load, if autosave was enabled, content is **restored automatically**
-
-Autosave storage is scoped by page URL and editor identity by default. If your app edits different records on the same URL, pass `autosaveKey` to isolate drafts explicitly:
+5. On next page load with autosave still enabled, content is **restored automatically**
+
+Autosave storage is scoped to page URL + editor identity by default. For isolation across records on the same URL, use `autosaveKey`:

     :::javascript
     new NeikiEditor('#editor', {
         autosaveKey: 'article-42'
     });

-### When Autosave is Disabled
-
-- No automatic saves occur
-- On page reload, the **original content** from the `<textarea>` is shown (not old localStorage data)
-- This is the default behavior
-
 > [!CAUTION]
-> Autosave is designed for **development and testing** purposes. For production applications, use the `onChange` callback to save content to your backend:
+> Autosave is designed for **development and draft recovery**. For production, use `onSave` or `onChange` callbacks to save to your backend:
 > ```javascript
 > new NeikiEditor('#editor', {
 >     onChange: debounce(function(content) {
->         fetch('/api/save', {
->             method: 'POST',
->             body: JSON.stringify({ content })
->         });
+>         fetch('/api/save', { method: 'POST', body: JSON.stringify({ content }) });
 >     }, 2000)
 > });
 > ```
@@ -338,61 +288,57 @@

 ## ✏️ Floating Toolbar

-A context-sensitive toolbar that appears when text is selected.
-
-### Included Actions
+A context-sensitive toolbar that appears automatically when text is selected.

 | Position | Buttons | Description |
-|----------|---------|-------------|
-| **Left** | ▲ ▼ | Move current block up / down |
-| **Right** | **B** *I* <u>U</u> <s>S</s> 🔗 | Bold, Italic, Underline, Strikethrough, Insert Link |
-
-The move block buttons and formatting buttons are separated by a visual divider.
-
-### Behavior
-
-- Appears automatically above the text selection
-- Follows the selection position
-- Disappears when selection is cleared or the user clicks away
-- Works alongside the main toolbar (both can be used)
-- **Move Up / Down** reorders the top-level content block containing the selection
-- When an image is selected, the floating toolbar is replaced by an **image-specific toolbar** with relevant actions
+|---|---|---|
+| Left | ▲ ▼ | Move current block up / down |
+| Right | **B** *I* <u>U</u> <s>S</s> 🔗 | Bold, Italic, Underline, Strikethrough, Link |
+
+- Appears above the selection, follows cursor
+- Disappears when selection is cleared
+- **Move Up / Down** reorders the entire top-level block containing the selection
+- When an image is selected, the floating toolbar is replaced by the **image-specific toolbar**

 > [!NOTE]
-> The floating toolbar is always enabled and cannot be disabled or customized through configuration.
+> The floating toolbar is always enabled and cannot be disabled or customized through config.

 ---

 ## 🔀 Block Drag & Drop Reordering

-Hover over any content block to reveal a **grip handle** (⠿) on the left side. Drag to reorder blocks.
-
-### How It Works
-
-1. Move the cursor near any top-level block (paragraph, heading, table, image, list, blockquote, etc.)
-2. A **grip icon** (⠿) appears on the left margin
-3. Click and drag the grip to move the block
-4. A **ghost preview** follows the cursor, and a **dashed placeholder** shows the drop position
-5. Release to drop the block at the new position
-
-### Features
-
-- Works with all top-level content blocks
-- Ghost preview shows the block being dragged
-- Drop placeholder with dashed border indicates target position
-- Undo/Redo support — block moves are recorded in history
-- `onChange` callback fires after each move
+Hover over any content block to reveal a **grip handle** (⠿) on the left margin:
+
+1. Move cursor near any top-level block (paragraph, heading, table, image, list, blockquote)
+2. A grip icon (⠿) appears on the left
+3. Click and drag to a new position
+4. A **ghost preview** follows the cursor
+5. A **dashed placeholder** shows the target drop position
+6. Release to drop
+
+Undo/Redo records block moves. `onChange` fires after each move.

 > [!TIP]
-> You can also use the **Move Up / Move Down** buttons in the floating toolbar for keyboard-friendly block reordering without dragging.
+> You can also use the ▲ ▼ buttons in the floating toolbar for keyboard-friendly block reordering.
+
+---
+
+## 📐 Status Bar
+
+The status bar sits at the bottom of the editor:
+
+| Position | Content |
+|---|---|
+| Left | Word count and character count |
+| Right | Autosave status (when enabled) and current block type (p, h1, h2, h3, etc.) |
+
+Updates automatically as you type or move the cursor.

 ---

 ## 🖨️ Print

-Click the **Print** toolbar button to print the editor content.
-
-The print function:
+Click **More → Print** to print the editor content:


 1. Opens a new browser window
 2. Copies the editor's HTML content with basic print styling
@@ -403,72 +349,14 @@

 ---

-## 📐 Status Bar
-
-The status bar sits at the bottom of the editor and displays real-time information:
-
-| Position | Content |
-|----------|--------|
-| **Left** | Word count and character count |
-| **Right** | Autosave status (when enabled) and current block type (p, h1, h2, h3, etc.) |
-
-The status bar updates automatically as you type or move the cursor.
-
----
-
-## 📋 API Methods Reference
-
-### Content Methods
-

-    :::javascript
-    editor.getContent();                    // Get HTML string
-    editor.setContent('<p>Hello</p>');      // Set HTML content
-    editor.getText();                       // Get plain text content
-    editor.isEmpty();                       // Check if editor is empty
-    
-    editor.getHTML();                       // Alias for getContent()
-    editor.setHTML(html);                   // Alias for setContent()
-    
-    editor.getJSON();                       // Get structured JSON
-    editor.setJSON(json);                   // Set from JSON
-
-### Editor Control
-
-    :::javascript
-    editor.focus();                         // Focus the editor
-    editor.blur();                          // Blur the editor
-    editor.enable();                        // Enable editing
-    editor.disable();                       // Disable editing (read-only)
-    editor.destroy();                       // Remove editor, restore textarea
-    editor.toggleFullscreen();              // Toggle fullscreen
-    editor.toggleTheme();                   // Cycle through built-in themes
-    editor.setTheme('dark');                // Set specific theme
-    editor.triggerSave();                   // Trigger onSave callback
-    editor.previewContent();                // Open preview modal
-    editor.downloadContent();               // Download content as HTML file
-    editor.clearAll();                      // Clear all content
-
-### Command Execution
-
-    :::javascript
-    editor.execCommand('bold');             // Execute any command
-    editor.insertHTML('<mark>hi</mark>');   // Insert HTML at cursor
-    editor.wrapSelection('mark', { class: 'hl' });  // Wrap selection
-    editor.unwrapSelection('mark');         // Unwrap selection
-
-### Selection
-
-    :::javascript
-    editor.getSelection();                  // Get Selection object
-
----
-
 ## 🔗 Related Pages

-- **[⚙️ Configuration](Configuration)** — All config options
-- **[🔧 Toolbar Reference](Toolbar-Reference)** — All toolbar buttons
-- **[🔌 Plugin API](Plugin-API)** — Extend with plugins
-- **[🔗 Integration Guide](Integration-Guide)** — PHP, Vue, React, AJAX
+| | |
+|---|---|
+| [⚙️ Configuration](Configuration) | All config options including `imageUploadHandler`, `autosaveKey` |
+| [🎨 Themes & Styling](Themes-and-Styling) | CSS customization and theme details |
+| [📋 API Reference](API-Reference) | `setTheme`, `toggleTheme`, `insertHTML` and all methods |
+| [🔒 Security](Security) | Sanitization details |

 ---

</pre>
</textarea>

Advanced Features modified by neikiri

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

--- v8
+++ v9
@@ -49,7 +49,7 @@

 - Bordered cells with subtle grid lines
 - Header row with distinct background color
 - Responsive width (100% of editor)
-- Both Light and Dark theme compatible
+- Compatible with all built-in themes

 ---

@@ -105,6 +105,8 @@
 > [!NOTE]
 > Multiple files dropped at once will each be inserted sequentially.

+Selected text can also be dragged to a new position inside the editor. Text, image, and video drags share the same insertion indicator so the drop position is visible before release.
+
 ### 4. Clipboard Paste

 Copy an image to your clipboard (e.g. screenshot, right-click → Copy Image) and paste it directly into the editor with **Ctrl+V**.
@@ -141,6 +143,25 @@

 ---

+## 🎬 Videos
+
+Use **Insert → Video** to add videos by URL, from a local file, or by dragging a video file into the editor. Without `videoUploadHandler`, selected video files are converted to base64 and embedded in the HTML. With `videoUploadHandler`, the file is uploaded through your callback and the returned URL is inserted.
+

+    :::javascript
+    new NeikiEditor('#editor', {
+        videoUploadHandler: async (file) => {
+            const formData = new FormData();
+            formData.append('video', file);
+            const response = await fetch('/api/upload-video', { method: 'POST', body: formData });
+            const data = await response.json();
+            return data.url;
+        }
+    });
+
+Inserted videos render as ``, are preserved by the sanitizer, and can be resized or repositioned like images.
+
+---
+
 ## 🎨 Themes

 ### Light Theme (Default)
@@ -150,6 +171,14 @@
 ### Dark Theme

 Dark background with light text. Easy on the eyes for extended editing sessions.
+
+### Blue Theme
+
+A bright blue interface with a white editing canvas.
+
+### Dark Blue Theme
+
+A deep blue interface for low-light editing with blue accents.

 ### Setting the Theme

@@ -167,13 +196,15 @@

 **Via the More menu (⋯):**

-The default toolbar includes `'moreMenu'` which contains a **Toggle Theme** item. The icon shows a ☀️ sun in light mode and a 🌙 moon in dark mode.
+The default toolbar includes `'moreMenu'` which contains a **Change theme** select for Light, Dark, Blue, and Dark Blue.

 **Set a specific theme:**

     :::javascript
     editor.setTheme('dark');
     editor.setTheme('light');

+    editor.setTheme('blue');
+    editor.setTheme('dark-blue');

 ### Theme Persistence

@@ -410,7 +441,7 @@
     editor.disable();                       // Disable editing (read-only)
     editor.destroy();                       // Remove editor, restore textarea
     editor.toggleFullscreen();              // Toggle fullscreen

-    editor.toggleTheme();                   // Toggle light/dark
+    editor.toggleTheme();                   // Cycle through built-in themes
     editor.setTheme('dark');                // Set specific theme
     editor.triggerSave();                   // Trigger onSave callback
     editor.previewContent();                // Open preview modal

Advanced Features modified by neikiri

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

--- v7
+++ v8
@@ -276,6 +276,13 @@

 3. Content is saved to `localStorage` on content changes
 4. The status bar shows "Autosaving..." / "Saved locally"
 5. On next page load, if autosave was enabled, content is **restored automatically**
+
+Autosave storage is scoped by page URL and editor identity by default. If your app edits different records on the same URL, pass `autosaveKey` to isolate drafts explicitly:
+
+    :::javascript
+    new NeikiEditor('#editor', {
+        autosaveKey: 'article-42'
+    });

 ### When Autosave is Disabled

Advanced Features modified by neikiri

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

--- v6
+++ v7
@@ -123,6 +123,21 @@

 > [!NOTE]
 > The resize wrapper is automatically cleaned up when calling `getContent()`, `getHTML()`, or `getJSON()` — only the `` element with its inline `width` and `height` styles is included in the output.
+
+### 6. Image Toolbar
+
+When an image is selected, a contextual toolbar appears above it with image-specific actions:
+
+| Button | Description |
+|--------|-------------|
+| **Drag handle** (⠿) | Click and drag to reposition the image to a different location in the editor |
+| **Replace** | Open a file picker to swap the current image (supports `imageUploadHandler` or base64) |
+| **Delete** | Remove the selected image from the editor |
+
+The floating text-formatting toolbar is automatically hidden when an image is selected, so only relevant image actions are shown.
+
+> [!TIP]
+> To move an image, click it to select, then use the grip handle in the image toolbar to drag it to a new position. The image will be placed as a new block at the drop location.

 ---

@@ -303,6 +318,7 @@

 - Disappears when selection is cleared or the user clicks away
 - Works alongside the main toolbar (both can be used)
 - **Move Up / Down** reorders the top-level content block containing the selection
+- When an image is selected, the floating toolbar is replaced by an **image-specific toolbar** with relevant actions

 > [!NOTE]
 > The floating toolbar is always enabled and cannot be disabled or customized through configuration.

Advanced Features modified by neikiri

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

--- v5
+++ v6
@@ -1,6 +1,6 @@
 # 🧩 Advanced Features

-Deep dive into Neiki Editor's advanced capabilities — tables, images, themes, find & replace, autosave, and more.
+Deep dive into Neiki's Editor's advanced capabilities — tables, images, themes, find & replace, autosave, and more.

 ---

@@ -55,7 +55,7 @@

 ## 🖼️ Images

-Neiki Editor supports three ways to insert images:
+Neiki's Editor supports five ways to insert images:

 ### 1. URL Input

@@ -64,35 +64,55 @@
     :::html
     

-### 2. File Upload
-
-The image dialog includes a file picker. Selected images are:
-
-1. Read via `FileReader` API
-2. Converted to **base64** data URI
-3. Embedded directly in the HTML content
-

-    :::html
-    
+### 2. File Upload (Single or Multiple)
+
+The image dialog includes a file picker that supports **multiple file selection**. Select one or more images and they will all be inserted into the editor.
+
+**Without `imageUploadHandler`:**
+- Images are read via `FileReader` API and converted to **base64** data URIs
+- Each selected image is embedded directly in the HTML content
+
+**With `imageUploadHandler`:**
+- Each file is passed to your async handler which uploads it to a server/CDN
+- The returned URL is inserted as a standard `` tag
+- This keeps HTML content lightweight and enables browser caching
+
+    :::javascript
+    new NeikiEditor('#editor', {
+        imageUploadHandler: async (file) => {
+            const formData = new FormData();
+            formData.append('image', file);
+            const res = await fetch('/api/upload', { method: 'POST', body: formData });
+            const data = await res.json();
+            return data.url;
+        }
+    });
+
+> [!TIP]
+> Using `imageUploadHandler` is strongly recommended for production. It avoids bloated base64 content and allows browsers to cache large images efficiently.

 > [!CAUTION]
-> Base64-encoded images increase the HTML content size significantly. For production use with large images, consider:
-> - Uploading images to your server/CDN via the `onChange` callback
-> - Replacing base64 images with server URLs before saving
-> - Setting file size limits in your backend
+> Without `imageUploadHandler`, base64-encoded images increase the HTML content size significantly. For production use with large images, consider setting up the upload handler or using your own server-side processing.

 ### 3. Drag & Drop

-Drag an image file directly into the editor content area. The editor automatically:
+Drag one or more image files directly into the editor content area. The editor automatically:


 1. Detects the drop event
-2. Reads the file as base64
-3. Inserts it at the exact drop position
+2. Uploads via `imageUploadHandler` (if configured) or reads as base64
+3. Inserts each image at the drop position

 > [!NOTE]
-> Drag & drop works with single image files. Multiple files dropped at once will each be inserted sequentially.
-
-### 4. Resize Images
+> Multiple files dropped at once will each be inserted sequentially.
+
+### 4. Clipboard Paste
+
+Copy an image to your clipboard (e.g. screenshot, right-click → Copy Image) and paste it directly into the editor with **Ctrl+V**.
+
+- If `imageUploadHandler` is configured, the image is uploaded and inserted as a URL
+- Otherwise, the image is embedded as base64
+
+### 5. Resize Images

 Click any image in the editor to select it. **Resize handles** appear on all four corners (NW, NE, SW, SE). Drag any handle to resize:

@@ -163,7 +183,7 @@

 ## 🌍 Localization (i18n)

-Neiki Editor supports multiple UI languages for all user-facing text.
+Neiki's Editor supports multiple UI languages for all user-facing text.

 ### Supported Languages

Advanced Features modified by neikiri

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

--- v4
+++ v5
@@ -31,6 +31,17 @@
 > [!TIP]
 > To select multiple cells for merging, click the first cell, then hold `Shift` and click the last cell in the same row. Then right-click to access "Merge Cells".

+### Column Resize
+
+Hover near the border between two columns — a **vertical drag handle** appears. Drag it horizontally to resize adjacent columns:
+
+1. The table switches to `table-layout: fixed` during resize
+2. All cells in the affected columns are resized proportionally
+3. Minimum column width is 40px to prevent collapse
+
+> [!TIP]
+> Column resize works on both `` and `` cells. The handle appears when the cursor is within 6px of a column border.
+
 ### Table Styling

 Tables are rendered with default styling provided by `neiki-editor.css`:
@@ -80,6 +91,18 @@

 > [!NOTE]
 > Drag & drop works with single image files. Multiple files dropped at once will each be inserted sequentially.
+
+### 4. Resize Images
+
+Click any image in the editor to select it. **Resize handles** appear on all four corners (NW, NE, SW, SE). Drag any handle to resize:
+
+- Aspect ratio is **always maintained** during resize
+- A live **size label** (e.g. `640 × 480`) appears below the image
+- Minimum size is 30px wide to prevent accidental collapse
+- Click outside the image to deselect and hide handles
+
+> [!NOTE]
+> The resize wrapper is automatically cleaned up when calling `getContent()`, `getHTML()`, or `getJSON()` — only the `` element with its inline `width` and `height` styles is included in the output.

 ---

@@ -246,11 +269,12 @@

 ### Included Actions

-- **Bold**
-- **Italic**
-- **Underline**
-- **Strikethrough**
-- **Insert Link**
+| Position | Buttons | Description |
+|----------|---------|-------------|
+| **Left** | ▲ ▼ | Move current block up / down |
+| **Right** | **B** *I* U S 🔗 | Bold, Italic, Underline, Strikethrough, Insert Link |
+
+The move block buttons and formatting buttons are separated by a visual divider.

 ### Behavior

@@ -258,9 +282,35 @@

 - Follows the selection position
 - Disappears when selection is cleared or the user clicks away
 - Works alongside the main toolbar (both can be used)
+- **Move Up / Down** reorders the top-level content block containing the selection

 > [!NOTE]
 > The floating toolbar is always enabled and cannot be disabled or customized through configuration.
+
+---
+
+## 🔀 Block Drag & Drop Reordering
+
+Hover over any content block to reveal a **grip handle** (⠿) on the left side. Drag to reorder blocks.
+
+### How It Works
+
+1. Move the cursor near any top-level block (paragraph, heading, table, image, list, blockquote, etc.)
+2. A **grip icon** (⠿) appears on the left margin
+3. Click and drag the grip to move the block
+4. A **ghost preview** follows the cursor, and a **dashed placeholder** shows the drop position
+5. Release to drop the block at the new position
+
+### Features
+
+- Works with all top-level content blocks
+- Ghost preview shows the block being dragged
+- Drop placeholder with dashed border indicates target position
+- Undo/Redo support — block moves are recorded in history
+- `onChange` callback fires after each move
+
+> [!TIP]
+> You can also use the **Move Up / Move Down** buttons in the floating toolbar for keyboard-friendly block reordering without dragging.

 ---

Advanced Features modified by neikiri

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

--- v3
+++ v4
@@ -148,6 +148,12 @@
 |------|----------|
 | `en` | English (default) |
 | `cs` | Czech |
+| `zh` | Chinese |
+| `es` | Spanish |
+| `de` | German |
+| `fr` | French |
+| `pt` | Portuguese |
+| `ja` | Japanese |

 ### Setting the Language

Advanced Features modified by neikiri

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

--- v2
+++ v3
@@ -135,6 +135,37 @@
         background: #1e1e1e;
         color: #e0e0e0;
     }
+
+---
+
+## 🌍 Localization (i18n)
+
+Neiki Editor supports multiple UI languages for all user-facing text.
+
+### Supported Languages
+
+| Code | Language |
+|------|----------|
+| `en` | English (default) |
+| `cs` | Czech |
+
+### Setting the Language
+

+    :::javascript
+    new NeikiEditor('#editor', {
+        language: 'cs'  // Czech UI
+    });
+
+### What Gets Translated
+
+- All toolbar button tooltips
+- Modal dialog labels (Link, Image, Table, Find & Replace)
+- Status bar texts (word count, character count)
+- Autosave messages ("Autosaving...", "Saved locally")
+- System messages and confirmations
+
+> [!NOTE]
+> The `language` option must be set at initialization. Changing language at runtime requires re-initializing the editor.

 ---

Advanced Features modified by neikiri

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

--- v1
+++ v2
@@ -107,9 +107,15 @@
     :::javascript
     editor.toggleTheme();

-**Via toolbar button:**
-
-Add `'themeToggle'` to your toolbar config (included by default). The button shows a ☀️ sun icon in light mode and a 🌙 moon icon in dark mode.
+**Via the More menu (⋯):**
+
+The default toolbar includes `'moreMenu'` which contains a **Toggle Theme** item. The icon shows a ☀️ sun in light mode and a 🌙 moon in dark mode.
+
+**Set a specific theme:**
+

+    :::javascript
+    editor.setTheme('dark');
+    editor.setTheme('light');

 ### Theme Persistence

@@ -166,26 +172,15 @@

 ## 💾 Autosave

-Autosave is an **opt-in** feature not included in the default toolbar.
-
-### Enabling Autosave
-
-Add `'autosave'` to your toolbar:
-

-    :::javascript
-    new NeikiEditor('#editor', {
-        toolbar: [
-            'bold', 'italic', 'underline', '|',
-            'autosave'
-        ]
-    });
+Autosave is accessible from the **More menu** (⋯) in the default toolbar.

 ### How It Works

-1. User clicks the **Autosave** toggle button in the toolbar
-2. Button becomes "active" (highlighted)
-3. Content is saved to `localStorage` every **5 seconds**
-4. On next page load, if autosave is still enabled, content is **restored automatically**
+1. User clicks **Autosave** in the More menu (⋯)
+2. A badge shows the autosave status (✓ when active, ✕ when inactive)
+3. Content is saved to `localStorage` on content changes
+4. The status bar shows "Autosaving..." / "Saved locally"
+5. On next page load, if autosave was enabled, content is **restored automatically**

 ### When Autosave is Disabled

@@ -252,9 +247,9 @@
 The status bar sits at the bottom of the editor and displays real-time information:

 | Position | Content |
-|----------|---------|
+|----------|--------|
 | **Left** | Word count and character count |
-| **Right** | Current block type (p, h1, h2, h3, etc.) |
+| **Right** | Autosave status (when enabled) and current block type (p, h1, h2, h3, etc.) |

 The status bar updates automatically as you type or move the cursor.

@@ -267,6 +262,8 @@
     :::javascript
     editor.getContent();                    // Get HTML string
     editor.setContent('Hello');      // Set HTML content

+    editor.getText();                       // Get plain text content
+    editor.isEmpty();                       // Check if editor is empty

     editor.getHTML();                       // Alias for getContent()
     editor.setHTML(html);                   // Alias for setContent()
@@ -279,9 +276,16 @@
     :::javascript
     editor.focus();                         // Focus the editor
     editor.blur();                          // Blur the editor

+    editor.enable();                        // Enable editing
+    editor.disable();                       // Disable editing (read-only)
     editor.destroy();                       // Remove editor, restore textarea
     editor.toggleFullscreen();              // Toggle fullscreen
     editor.toggleTheme();                   // Toggle light/dark
+    editor.setTheme('dark');                // Set specific theme
+    editor.triggerSave();                   // Trigger onSave callback
+    editor.previewContent();                // Open preview modal
+    editor.downloadContent();               // Download content as HTML file
+    editor.clearAll();                      // Clear all content

 ### Command Execution