neiki-editor 2.10.1 → 3.0.0

package/README.md

@@ -11,7 +11,7 @@
   <img src="https://img.shields.io/badge/css-%23663399.svg?style=for-the-badge&logo=css&logoColor=white" alt="CSS">
   <br>
   <img src="https://img.shields.io/badge/License-AGPL--3.0-2563EB?style=for-the-badge&logo=open-source-initiative&logoColor=white&labelColor=000F15&logoWidth=20" alt="License">
-  <img src="https://img.shields.io/badge/Version-2.10.1-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
+  <img src="https://img.shields.io/badge/Version-3.0.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
 </p>
 
 <p align="center">
@@ -62,7 +62,7 @@ Add this single line — CSS is included automatically, always the **latest vers
 #### Pin a specific version
 
 ```html
-<script src="https://cdn.neikiri.dev/neiki-editor/2.10.1/neiki-editor.min.js"></script>
+<script src="https://cdn.neikiri.dev/neiki-editor/3.0.0/neiki-editor.min.js"></script>
 ```
 
 #### Load CSS and JS separately
@@ -73,8 +73,8 @@ Add this single line — CSS is included automatically, always the **latest vers
 <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>
 
 <!-- Or pinned -->
-<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/2.10.1/neiki-editor.css">
-<script src="https://cdn.neikiri.dev/neiki-editor/2.10.1/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/3.0.0/neiki-editor.css">
+<script src="https://cdn.neikiri.dev/neiki-editor/3.0.0/neiki-editor.js"></script>
 ```
 
 #### Alternative CDN — jsDelivr
@@ -84,15 +84,15 @@ Add this single line — CSS is included automatically, always the **latest vers
 <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>
 
 <!-- Pinned -->
-<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.10.1/dist/neiki-editor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.0.0/dist/neiki-editor.min.js"></script>
 
 <!-- Separate files (latest) -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.css">
 <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.js"></script>
 
 <!-- Separate files (pinned) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.10.1/dist/neiki-editor.css">
-<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.10.1/dist/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.0.0/dist/neiki-editor.css">
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.0.0/dist/neiki-editor.js"></script>
 ```
 
 #### Package Manager
@@ -143,7 +143,7 @@ const editor = new NeikiEditor('#editor', {
     autofocus: false,
     spellcheck: true,
     readonly: false,
-    theme: 'light',       // 'light' or 'dark'
+    theme: 'light',       // 'light', 'dark', 'blue', or 'dark-blue'
     language: 'en',       // 'en', 'cs', or custom via addTranslation()
     translations: null,   // custom translation keys (merged with built-in)
     autosaveKey: null,    // optional custom localStorage scope for autosave
@@ -181,7 +181,7 @@ const editor = new NeikiEditor('#editor', {
 | `autofocus` | `boolean` | `false` | Focus editor on initialization |
 | `spellcheck` | `boolean` | `true` | Enable browser spellcheck |
 | `readonly` | `boolean` | `false` | Make editor read-only |
-| `theme` | `string` | `'light'` | `'light'` or `'dark'` |
+| `theme` | `string` | `'light'` | `'light'`, `'dark'`, `'blue'`, or `'dark-blue'` |
 | `language` | `string` | `'en'` | UI language — `en`, `cs`, `zh`, `es`, `de`, `fr`, `pt`, `ja` |
 | `translations` | `object\|null` | `null` | Custom translation keys (merged with built-in) |
 | `autosaveKey` | `string\|null` | `null` | Custom `localStorage` scope for autosave content and enabled state |
@@ -193,6 +193,7 @@ const editor = new NeikiEditor('#editor', {
 | `onReady` | `function\|null` | `null` | Callback when editor is ready |
 | `showHelp` | `boolean` | `true` | Show Help button in More menu (⋯) |
 | `imageUploadHandler` | `function\|null` | `null` | Async callback `(file) => Promise<url>` for uploading images to a server/CDN instead of base64 |
+| `videoUploadHandler` | `function\|null` | `null` | Async callback `(file) => Promise<url>` for uploading videos to a server/CDN instead of base64 |
 | `customClass` | `string\|null` | `null` | Custom CSS class appended to the editor content area (`neiki-content`) |
 
 ---
@@ -247,11 +248,12 @@ The `insertDropdown` toolbar item renders a single **Insert** button that opens
 |------|-------------|
 | **Link** | Insert/edit hyperlink (**Ctrl+K**) |
 | **Image** | Insert image (URL or file upload → base64) |
+| **Video** | Insert video (URL or file upload → base64, or via `videoUploadHandler`) |
 | **Table** | Insert table with custom rows/columns |
 | **Emoji** | Emoji picker (100+ emojis) |
 | **Symbol** | Special characters (©, ®, €, π, Ω, arrows, etc.) |
 
-You can still use `link`, `image`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if preferred.
+You can still use `link`, `image`, `video`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if preferred.
 
 ### More Menu
 
@@ -265,7 +267,7 @@ The `moreMenu` toolbar item renders a **⋯** button (pushed to the right) that
 | **Print** | Print editor content |
 | **Autosave** | Toggle autosave to localStorage |
 | **Clear all** | Clear all editor content |
-| **Toggle Theme** | Switch between light/dark theme |
+| **Change theme** | Choose light, dark, blue, or dark-blue from a select |
 | **Fullscreen** | Toggle fullscreen mode |
 | **Help** | Show help modal with author, version, and links (configurable via `showHelp`) |
 
@@ -276,7 +278,7 @@ The `moreMenu` toolbar item renders a **⋯** button (pushed to the right) that
 | `undo` | Undo (**Ctrl+Z**) |
 | `redo` | Redo (**Ctrl+Y** / **Ctrl+Shift+Z**) |
 | `findReplace` | Find & Replace with regex support |
-| `viewCode` | Toggle HTML source editor |
+| `viewCode` | Toggle formatted HTML source editor with syntax highlighting |
 | `blockquote` | Block quote (toggles on/off) |
 | `horizontalRule` | Horizontal line |
 
@@ -284,7 +286,7 @@ The `moreMenu` toolbar item renders a **⋯** button (pushed to the right) that
 
 ## 🎨 Themes
 
-Neiki's Editor ships with **Light** and **Dark** themes.
+Neiki's Editor ships with **Light**, **Dark**, **Blue**, and **Dark Blue** themes.
 
 ### Set theme on init:
 
@@ -294,14 +296,16 @@ const editor = new NeikiEditor('#editor', {
 });
 ```
 
-### Toggle theme at runtime:
+### Change theme at runtime:
 
-Use the **Toggle Theme** item in the More menu (⋯), or toggle programmatically:
+Use the **Change theme** select in the More menu (⋯), or change themes programmatically:
 
 ```javascript
 editor.toggleTheme();
 // or set a specific theme:
 editor.setTheme('dark');
+editor.setTheme('blue');
+editor.setTheme('dark-blue');
 ```
 
 The selected theme persists across page reloads via `localStorage`.
@@ -410,8 +414,8 @@ editor.enable();              // Enable editing
 editor.disable();             // Disable editing (read-only)
 editor.destroy();             // Remove editor, restore original element
 editor.toggleFullscreen();    // Toggle fullscreen mode
-editor.toggleTheme();         // Toggle light/dark theme
-editor.setTheme('dark');      // Set a specific theme
+editor.toggleTheme();         // Cycle through built-in themes
+editor.setTheme('dark');      // Set a specific theme ('light', 'dark', 'blue', 'dark-blue')
 editor.triggerSave();         // Trigger onSave callback
 editor.previewContent();      // Open preview modal
 editor.downloadContent();     // Download content as HTML file
@@ -514,6 +518,8 @@ The Image dialog includes a file upload input. Selected images are converted to
 
 Drag image files directly into the editor content area. Images are automatically converted to base64 and inserted at the drop position.
 
+Selected text can also be dragged to a new position inside the editor. Text, image, and video drags show the same insertion indicator so the drop position is visible before release.
+
 ### Resize Images
 
 Click any image in the editor to select it — **resize handles** appear on all four corners. Drag any handle to resize while maintaining aspect ratio. A live **size label** (width × height) is displayed below the image during resizing.
@@ -530,6 +536,26 @@ The floating text-formatting toolbar is automatically hidden when an image is se
 
 ---
 
+## 🎬 Video Support
+
+Use **Insert → Video** to add a video by URL, by selecting a local video file, or by dragging a video file into the editor. Without `videoUploadHandler`, selected videos are embedded as base64 data URIs. With `videoUploadHandler`, the editor uploads the file through your callback and inserts the returned URL.
+
+```javascript
+const editor = new NeikiEditor('#editor', {
+    videoUploadHandler: async (file) => {
+        const formData = new FormData();
+        formData.append('video', file);
+        const response = await fetch('/upload-video', { method: 'POST', body: formData });
+        const data = await response.json();
+        return data.url;
+    }
+});
+```
+
+Inserted videos render as `<video controls>`, are preserved by the built-in sanitizer, and can be resized or repositioned like images.
+
+---
+
 ## 🔍 Find & Replace
 
 Open with the toolbar button or implement via the modal API.

package/dist/neiki-editor.css

@@ -1,7 +1,7 @@
 /**
  * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
  * CSS Stylesheet
- * Version: 2.10.1
+ * Version: 3.0.0
  */
 
 /* ============================================
@@ -38,7 +38,8 @@
 }
 
 /* Dark Theme */
-.neiki-editor.neiki-dark {
+.neiki-editor.neiki-dark,
+.neiki-modal-overlay.neiki-dark {
   --neiki-bg-primary: #1e1e1e;
   --neiki-bg-secondary: #252526;
   --neiki-bg-tertiary: #2d2d30;
@@ -67,6 +68,68 @@
   --neiki-table-border: #3e3e42;
 }
 
+/* Blue Theme */
+.neiki-editor.neiki-theme-blue,
+.neiki-modal-overlay.neiki-theme-blue {
+  --neiki-bg-primary: #f8fbff;
+  --neiki-bg-secondary: #eef6ff;
+  --neiki-bg-tertiary: #dbeafe;
+  --neiki-bg-hover: #bfdbfe;
+  --neiki-bg-active: #93c5fd;
+  --neiki-border-color: #bfdbfe;
+  --neiki-border-color-dark: #60a5fa;
+  --neiki-text-primary: #0f172a;
+  --neiki-text-secondary: #1e3a8a;
+  --neiki-text-muted: #64748b;
+  --neiki-accent-color: #2563eb;
+  --neiki-accent-hover: #1d4ed8;
+  --neiki-danger-color: #dc3545;
+  --neiki-success-color: #16803d;
+  --neiki-shadow-sm: 0 1px 2px rgba(37, 99, 235, 0.08);
+  --neiki-shadow-md: 0 4px 10px rgba(37, 99, 235, 0.12);
+  --neiki-shadow-lg: 0 14px 28px rgba(37, 99, 235, 0.16);
+  --neiki-editor-bg: #ffffff;
+  --neiki-toolbar-bg: #eaf4ff;
+  --neiki-statusbar-bg: #eef6ff;
+  --neiki-modal-overlay: rgba(15, 23, 42, 0.45);
+  --neiki-scrollbar-thumb: #93c5fd;
+  --neiki-scrollbar-track: #eff6ff;
+  --neiki-selection-bg: #bfdbfe;
+  --neiki-highlight-color: #fef08a;
+  --neiki-table-border: #bfdbfe;
+}
+
+/* Dark Blue Theme */
+.neiki-editor.neiki-theme-dark-blue,
+.neiki-modal-overlay.neiki-theme-dark-blue {
+  --neiki-bg-primary: #07111f;
+  --neiki-bg-secondary: #0b1d33;
+  --neiki-bg-tertiary: #102a46;
+  --neiki-bg-hover: #173b61;
+  --neiki-bg-active: #1d4f82;
+  --neiki-border-color: #1f3f63;
+  --neiki-border-color-dark: #2f6da5;
+  --neiki-text-primary: #e6f1ff;
+  --neiki-text-secondary: #b9d7f8;
+  --neiki-text-muted: #7ea6cc;
+  --neiki-accent-color: #38bdf8;
+  --neiki-accent-hover: #0ea5e9;
+  --neiki-danger-color: #fb7185;
+  --neiki-success-color: #34d399;
+  --neiki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
+  --neiki-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.34);
+  --neiki-shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.46);
+  --neiki-editor-bg: #081827;
+  --neiki-toolbar-bg: #0b1d33;
+  --neiki-statusbar-bg: #0b1d33;
+  --neiki-modal-overlay: rgba(0, 0, 0, 0.72);
+  --neiki-scrollbar-thumb: #1d4f82;
+  --neiki-scrollbar-track: #07111f;
+  --neiki-selection-bg: #164e63;
+  --neiki-highlight-color: #854d0e;
+  --neiki-table-border: #1f3f63;
+}
+
 /* ============================================
    Base Editor Container
    ============================================ */
@@ -229,6 +292,34 @@
   box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
 }
 
+.neiki-theme-select-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+}
+
+.neiki-theme-select-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neiki-text-secondary);
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.neiki-theme-select-icon svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.neiki-theme-select {
+  min-width: 116px;
+  max-width: 150px;
+}
+
 /* Color Picker Button */
 .neiki-color-btn {
   position: relative;
@@ -307,7 +398,7 @@
 }
 
 .neiki-content.neiki-drag-over::after {
-  content: 'Drop images here';
+  content: 'Drop media here';
   position: absolute;
   top: 50%;
   left: 50%;
@@ -319,6 +410,44 @@
   z-index: 10;
 }
 
+.neiki-drop-indicator {
+  position: absolute;
+  width: 3px;
+  min-height: 22px;
+  background: var(--neiki-accent-color);
+  border-radius: 999px;
+  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateX(-1px);
+  transition: opacity 0.08s ease;
+  z-index: 80;
+}
+
+.neiki-drop-indicator::before,
+.neiki-drop-indicator::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  width: 9px;
+  height: 9px;
+  background: var(--neiki-accent-color);
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.neiki-drop-indicator::before {
+  top: -4px;
+}
+
+.neiki-drop-indicator::after {
+  bottom: -4px;
+}
+
+.neiki-drop-indicator.show {
+  opacity: 1;
+}
+
 /* Focus state for editor container - disabled */
 /* .neiki-editor.neiki-focused removed */
 
@@ -445,6 +574,15 @@
   outline-offset: 2px;
 }
 
+.neiki-content video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 0 1em 0;
+  border-radius: 6px;
+  background: #000;
+}
+
 /* Search Highlight */
 .neiki-highlight {
   background: var(--neiki-highlight-color);
@@ -1492,23 +1630,89 @@
   color: var(--neiki-text-primary);
 }
 
-.neiki-code-view-textarea {
+.neiki-code-view-editor {
+  position: relative;
   flex: 1;
   width: 100%;
+  min-height: 0;
+  background: var(--neiki-bg-primary);
+}
+
+.neiki-code-view-highlight,
+.neiki-code-view-textarea {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   padding: 16px;
   border: none;
-  background: var(--neiki-bg-primary);
-  color: var(--neiki-text-primary);
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   font-size: 13px;
   line-height: 1.5;
+  tab-size: 2;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+}
+
+.neiki-code-view-highlight {
+  margin: 0;
+  color: var(--neiki-text-primary);
+  pointer-events: none;
+  user-select: none;
+}
+
+.neiki-code-view-textarea {
+  background: transparent;
+  color: transparent;
+  caret-color: var(--neiki-text-primary);
   resize: none;
+  z-index: 1;
 }
 
 .neiki-code-view-textarea:focus {
   outline: none;
 }
 
+.neiki-code-view-textarea::selection {
+  background: var(--neiki-selection-bg);
+  color: transparent;
+}
+
+.neiki-html-punct {
+  color: var(--neiki-text-muted);
+}
+
+.neiki-html-tag {
+  color: #0f74d8;
+  font-weight: 600;
+}
+
+.neiki-html-attr {
+  color: #9a5b00;
+}
+
+.neiki-html-string {
+  color: #16803d;
+}
+
+.neiki-html-comment {
+  color: var(--neiki-text-muted);
+  font-style: italic;
+}
+
+.neiki-dark .neiki-html-tag {
+  color: #7dd3fc;
+}
+
+.neiki-dark .neiki-html-attr {
+  color: #fbbf24;
+}
+
+.neiki-dark .neiki-html-string {
+  color: #86efac;
+}
+
 .neiki-code-view-apply {
   width: auto !important;
   padding: 0 12px !important;
@@ -1722,7 +1926,7 @@
 }
 
 /* ============================================
-   Image Resize Handles
+   Media Resize Handles
    ============================================ */
 .neiki-img-resizable {
   display: inline-block;
@@ -1731,11 +1935,16 @@
   outline-offset: 2px;
   border-radius: 4px;
   line-height: 0;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-.neiki-img-resizable img {
+.neiki-img-resizable img,
+.neiki-img-resizable video {
   display: block;
   max-width: 100%;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .neiki-img-resize-handle {
@@ -1785,7 +1994,7 @@
 }
 
 /* ============================================
-   Image Toolbar (replace, delete, drag)
+   Media Toolbar (replace, delete, drag)
    ============================================ */
 .neiki-img-toolbar {
   position: absolute;
@@ -1801,6 +2010,8 @@
   box-shadow: var(--neiki-shadow-md);
   z-index: 20;
   white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .neiki-img-toolbar-btn {
@@ -1891,7 +2102,7 @@
   user-select: none;
 }
 
-.neiki-content:hover .neiki-block-grip {
+.neiki-content-wrapper:hover .neiki-block-grip {
   opacity: 0.5;
 }
 
@@ -2321,8 +2532,6 @@
   top: 100%;
   right: 0;
   z-index: 1000;
-  min-width: 140px;
-  max-width: 170px;
   background: var(--neiki-bg-primary);
   border: 1px solid var(--neiki-border-color);
   border-radius: 6px;
@@ -2365,6 +2574,28 @@
   background: rgba(220, 53, 69, 0.1);
 }
 
+.neiki-theme-menu-item {
+  cursor: default;
+}
+
+.neiki-theme-menu-select {
+  min-width: 105px;
+  height: 28px;
+  padding: 0 24px 0 8px;
+  border: 1px solid var(--neiki-border-color);
+  border-radius: 4px;
+  background: var(--neiki-bg-primary);
+  color: var(--neiki-text-primary);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.neiki-theme-menu-select:focus {
+  outline: none;
+  border-color: var(--neiki-accent-color);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
+}
+
 /* Autosave badge in More menu */
 .neiki-autosave-badge {
   font-size: 12px;