neiki-editor 3.3.0 → 3.5.0

package/README.md

@@ -1,18 +1,17 @@
 <p align="center">
-  <img src="assets/logo.png" alt="Neiki's Editor" width="400">
+  <img src="assets/logo.svg" alt="Neiki's Editor" width="400">
 </p>
 
 <h1 align="center">Neiki's Editor</h1>
 
 <p align="center">
   <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
-  <img src="https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white" alt="PHP">
   <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5">
   <img src="https://img.shields.io/badge/css-%23663399.svg?style=for-the-badge&logo=css&logoColor=white" alt="CSS">
   <img src="https://img.shields.io/badge/web%20components-29ABE2.svg?style=for-the-badge&logo=webcomponentsdotorg&logoColor=white" alt="Web Components">
   <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-3.3.0-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.5.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
 </p>
 
 <p align="center">
@@ -32,8 +31,19 @@
 </p>
 
 ---
+
 <p align="center">
-  <img src="assets/preview.png" alt="Neiki's Editor" width="900">
+  <img src="assets/neiki-editor-light.png" alt="Neiki's Editor" width="900">
+</p>
+
+<p align="center">
+  <img src="assets/neiki-editor-blue.png" alt="Blue Theme" width="260">
+  <img src="assets/neiki-editor-dark.png" alt="Dark Theme" width="260">
+  <img src="assets/neiki-editor-dark-blue.png" alt="Dark Blue Theme" width="260">
+  <img src="assets/neiki-editor-midnight.png" alt="Midnight Theme" width="260">
+  <img src="assets/neiki-editor-void.png" alt="Void Theme" width="260">
+  <img src="assets/neiki-editor-autumn.png" alt="Autumn Theme" width="260">
+  <img src="assets/neiki-editor-dracula.png" alt="Dracula Theme" width="260">
 </p>
 
 ---
@@ -110,7 +120,7 @@ If you want a content editor that you can read, host, and reason about as a sing
 - Plugin API for custom toolbar buttons and init hooks
 - PHP integration helper with asset loading, rendering, and HTML sanitization
 - Eight built-in UI languages: `en`, `cs`, `zh`, `es`, `de`, `fr`, `pt`, `ja`
-- Seven built-in themes: Light, Dark, Blue, Dark Blue, Midnight, Void, Autumn
+- Eight built-in themes: Light, Dark, Blue, Dark Blue, Midnight, Void, Autumn, Dracula
 - Lifecycle callbacks: `onReady`, `onChange`, `onSave`, `onFocus`, `onBlur`
 
 ---
@@ -130,7 +140,7 @@ The recommended install is the single bundled script from the CDN. CSS is includ
 **Pin a specific version**
 
 ```html
-<script src="https://cdn.neikiri.dev/neiki-editor/3.3.0/neiki-editor.min.js"></script>
+<script src="https://cdn.neikiri.dev/neiki-editor/3.5.0/neiki-editor.min.js"></script>
 ```
 
 **Load CSS and JS separately**
@@ -141,8 +151,8 @@ The recommended install is the single bundled script from the CDN. CSS is includ
 <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>
 
 <!-- Or pinned -->
-<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/3.3.0/neiki-editor.css">
-<script src="https://cdn.neikiri.dev/neiki-editor/3.3.0/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/3.5.0/neiki-editor.css">
+<script src="https://cdn.neikiri.dev/neiki-editor/3.5.0/neiki-editor.js"></script>
 ```
 
 **Alternative CDN — jsDelivr**
@@ -150,7 +160,7 @@ The recommended install is the single bundled script from the CDN. CSS is includ
 ```html
 <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@3.3.0/dist/neiki-editor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.5.0/dist/neiki-editor.min.js"></script>
 ```
 
 **Package manager**
@@ -230,7 +240,7 @@ const editor = new NeikiEditor('#editor', {
   placeholder: 'Start typing...',
   minHeight: 300,
   maxHeight: 600,
-  theme: 'light',     // 'light' | 'dark' | 'blue' | 'dark-blue' | 'midnight' | 'void' | 'autumn'
+  theme: 'light',     // 'light' | 'dark' | 'blue' | 'dark-blue' | 'midnight' | 'void' | 'autumn' | 'dracula'
   language: 'en',     // 'en' | 'cs' | 'zh' | 'es' | 'de' | 'fr' | 'pt' | 'ja'
   onChange: function (content, editor) {
     console.log('Content changed:', content);
@@ -248,12 +258,12 @@ const editor = new NeikiEditor('#editor', {
 | `autofocus` | `boolean` | `false` | Focus the editor on initialization |
 | `spellcheck` | `boolean` | `true` | Enable browser spellcheck |
 | `readonly` | `boolean` | `false` | Make the editor read-only |
-| `theme` | `string` | `'light'` | `'light'`, `'dark'`, `'blue'`, `'dark-blue'`, `'midnight'`, `'void'`, or `'autumn'` |
+| `theme` | `string` | `'light'` | `'light'`, `'dark'`, `'blue'`, `'dark-blue'`, `'midnight'`, `'void'`, `'autumn'`, or `'dracula'` |
 | `language` | `string` | `'en'` | UI language (see list above) |
 | `translations` | `object \| null` | `null` | Custom translation keys, merged with built-ins |
 | `contextMenu` | `boolean` | `true` | Enable the custom right-click context menu. Set to `false` to fall back to the browser's native menu |
 | `autosaveKey` | `string \| null` | `null` | Custom `localStorage` scope for autosave |
-| `customClass` | `string \| null` | `null` | Extra CSS class appended to the content area (`neiki-content`) |
+| `customClass` | `string \| null` | `null` | Custom content style class that replaces the default `neiki-content-default-style` class |
 | `toolbar` | `array` | *(full set)* | Toolbar button configuration |
 | `showHelp` | `boolean` | `true` | Show the Help item in the More menu (⋯) |
 | `imageUploadHandler` | `function \| null` | `null` | Async `(file) => Promise<url>` for server/CDN image uploads instead of base64 |
@@ -286,25 +296,27 @@ Available identifiers include text formatting (`bold`, `italic`, `underline`, `s
 
 ### Themes
 
-Seven themes ship by default: `light`, `dark`, `blue`, `dark-blue`, `midnight`, `void` (a dark purple cyberpunk theme with neon-purple glow accents), and `autumn` (a warm retro theme with a brown background and orange accents). Set one at init or change it at runtime:
+Eight themes ship by default: `light`, `dark`, `blue`, `dark-blue`, `midnight`, `void` (a dark purple cyberpunk theme with neon-purple glow accents), `autumn` (a warm retro theme with a brown background and orange accents), and `dracula` (the official [Dracula theme](https://draculatheme.com) — a dark purple-blue palette with pink, purple, green, and yellow accents). Set one at init or change it at runtime:
 
 ```javascript
 const editor = new NeikiEditor('#editor', { theme: 'dark' });
 
-editor.setTheme('void');     // set a specific theme
-editor.toggleTheme();        // cycle: light → dark → blue → dark-blue → midnight → void → autumn → light
+editor.setTheme('dracula');  // set a specific theme
+editor.toggleTheme();        // cycle: light → dark → blue → dark-blue → midnight → void → autumn → dracula → light
 ```
 
 > The selected theme is persisted to `localStorage` as a **global** setting. It applies to all editor instances on the page and persists across reloads. If a user has already chosen a theme, that saved preference takes priority over the `theme` config value — call `setTheme()` after init if you need to override it.
 
 ### Custom content styling
 
-Use `customClass` to add your own class to the content area without overriding the defaults:
+By default, the editable area uses the internal `neiki-content` class plus the default typography class `neiki-content-default-style`. Use `customClass` to replace only the default typography class while keeping the internal editor class:
 
 ```javascript
 new NeikiEditor('#editor', { customClass: 'article-content' });
 ```
 
+That renders the content area with `class="neiki-content article-content"` instead of `class="neiki-content neiki-content-default-style"`.
+
 ```css
 .article-content {
   font-family: Georgia, serif;
@@ -341,6 +353,18 @@ Autosave is toggled from the More menu (⋯). When enabled, content is written t
 new NeikiEditor('#editor', { autosaveKey: 'article-42' });
 ```
 
+You can clear saved autosave data for the current editor, remove a specific scoped storage key, or remove all scoped keys matching a prefix:
+
+```javascript
+editor.clearAutosaveStorage();                 // current editor's autosave flags/content
+editor.removeStorage('autosave_content');      // current editor storage key
+editor.removeStorageByPrefix('autosave_');     // current editor storage keys by prefix
+
+NeikiEditor.removeStorageKey('neiki_autosave_article-42_autosave_content');
+NeikiEditor.removeStorageByPrefix('neiki_autosave_');
+NeikiEditor.clearAutosaveStorage();            // shortcut for the default autosave prefix
+```
+
 > Autosave is intended for drafts and recovery. For production persistence, use the `onSave` or `onChange` callbacks to save to your backend.
 
 ---
@@ -376,6 +400,11 @@ editor.triggerSave();                // trigger onSave
 editor.previewContent();             // open preview modal
 editor.downloadContent();            // download as .html
 
+// Storage cleanup
+editor.clearAutosaveStorage();
+editor.removeStorage('autosave_content');
+editor.removeStorageByPrefix('autosave_');
+
 // Theme
 editor.setTheme('dark');
 editor.toggleTheme();
@@ -388,6 +417,9 @@ editor.execCommand('foreColor', '#ff0000');
 NeikiEditor.registerPlugin({ /* ... */ });
 NeikiEditor.getPlugins();            // array of registered plugins
 NeikiEditor.addTranslation('de', { /* ... */ });
+NeikiEditor.removeStorageKey('neiki_autosave_article-42_autosave_content');
+NeikiEditor.removeStorageByPrefix('neiki_autosave_');
+NeikiEditor.clearAutosaveStorage();
 ```
 
 > In SPA frameworks, always call `editor.destroy()` when the component unmounts to clean up listeners and avoid memory leaks.
@@ -608,45 +640,6 @@ Neiki's Editor uses `contentEditable` and standard DOM APIs and targets current
 
 ---
 
-## File structure
-
-```
-neiki-editor/
-├── .github/
-│   └── workflows/
-│       ├── ci.yml                # Continuous integration workflow
-│       ├── codeql.yml            # CodeQL security analysis
-│       └── publish.yml           # NPM/CDN publish workflow
-├── assets/
-│   ├── logo.png                  # Project logo
-│   └── preview.png               # Editor preview screenshot
-├── demo/
-│   ├── index.html                # Interactive demo page
-│   └── logo.png                  # Demo page logo
-├── dist/
-│   ├── neiki-editor.css          # Editor styles (unminified)
-│   ├── neiki-editor.js           # Editor core (unminified)
-│   ├── neiki-editor.min.css      # Minified styles
-│   └── neiki-editor.min.js       # Minified editor + embedded CSS (recommended)
-├── php/
-│   └── neiki-editor.php          # PHP integration helper
-├── src/
-│   ├── neiki-editor.css          # Source CSS styles
-│   └── neiki-editor.js           # Source JavaScript
-├── .gitattributes
-├── .gitignore
-├── CHANGELOG.md
-├── CODE_OF_CONDUCT.md
-├── CONTRIBUTING.md
-├── LICENSE
-├── README.md
-├── SECURITY.md
-├── package-lock.json
-└── package.json
-```
-
----
-
 ## Contributing
 
 Contributions are welcome. Please review [CONTRIBUTING.md](CONTRIBUTING.md) and the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) before opening an issue or pull request. Security-related reports should follow [SECURITY.md](SECURITY.md).

package/dist/neiki-editor.css

@@ -1,7 +1,7 @@
 /**
  * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
  * CSS Stylesheet
- * Version: 3.3.0
+ * Version: 3.5.0
  */
 
 /* ============================================
@@ -268,6 +268,61 @@
   color: var(--neiki-text-secondary);
 }
 
+/* Dracula Theme — https://draculatheme.com */
+.neiki-editor.neiki-theme-dracula,
+.neiki-modal-overlay.neiki-theme-dracula,
+.neiki-context-menu.neiki-theme-dracula {
+  --neiki-bg-primary: #282a36;
+  --neiki-bg-secondary: #21222c;
+  --neiki-bg-tertiary: #343746;
+  --neiki-bg-hover: #44475a;
+  --neiki-bg-active: #6272a4;
+  --neiki-border-color: #44475a;
+  --neiki-border-color-dark: #6272a4;
+  --neiki-text-primary: #f8f8f2;
+  --neiki-text-secondary: #bd93f9;
+  --neiki-text-muted: #6272a4;
+  --neiki-accent-color: #bd93f9;
+  --neiki-accent-hover: #ff79c6;
+  --neiki-danger-color: #ff5555;
+  --neiki-success-color: #50fa7b;
+  --neiki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --neiki-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --neiki-shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.45);
+  --neiki-editor-bg: #282a36;
+  --neiki-toolbar-bg: #21222c;
+  --neiki-statusbar-bg: #21222c;
+  --neiki-modal-overlay: rgba(0, 0, 0, 0.75);
+  --neiki-scrollbar-thumb: #6272a4;
+  --neiki-scrollbar-track: #343746;
+  --neiki-selection-bg: #44475a;
+  --neiki-highlight-color: #6b6423;
+  --neiki-table-border: #44475a;
+}
+
+/* Dracula — toolbar selects and fontsize input text color */
+.neiki-editor.neiki-theme-dracula .neiki-select,
+.neiki-editor.neiki-theme-dracula .neiki-fontsize-input {
+  color: var(--neiki-text-secondary);
+}
+
+/* Dracula — code view syntax highlighting */
+.neiki-editor.neiki-theme-dracula .neiki-html-tag {
+  color: #ff79c6;
+}
+
+.neiki-editor.neiki-theme-dracula .neiki-html-attr {
+  color: #50fa7b;
+}
+
+.neiki-editor.neiki-theme-dracula .neiki-html-string {
+  color: #f1fa8c;
+}
+
+.neiki-editor.neiki-theme-dracula .neiki-html-comment {
+  color: #6272a4;
+}
+
 /* ============================================
    Base Editor Container
    ============================================ */
@@ -613,58 +668,58 @@
   background: var(--neiki-border-color-dark);
 }
 
-/* Content Typography */
-.neiki-content p {
+/* Default Content Typography */
+.neiki-content-default-style p {
   margin: 0 0 1em 0;
 }
 
-.neiki-content h1 {
+.neiki-content-default-style h1 {
   font-size: 2em;
   font-weight: 700;
   margin: 0 0 0.5em 0;
 }
 
-.neiki-content h2 {
+.neiki-content-default-style h2 {
   font-size: 1.5em;
   font-weight: 600;
   margin: 0 0 0.5em 0;
 }
 
-.neiki-content h3 {
+.neiki-content-default-style h3 {
   font-size: 1.25em;
   font-weight: 600;
   margin: 0 0 0.5em 0;
 }
 
-.neiki-content h4 {
+.neiki-content-default-style h4 {
   font-size: 1.1em;
   font-weight: 600;
   margin: 0 0 0.5em 0;
 }
 
-.neiki-content h5 {
+.neiki-content-default-style h5 {
   font-size: 1em;
   font-weight: 600;
   margin: 0 0 0.5em 0;
 }
 
-.neiki-content h6 {
+.neiki-content-default-style h6 {
   font-size: 0.9em;
   font-weight: 600;
   margin: 0 0 0.5em 0;
 }
 
-.neiki-content ul,
-.neiki-content ol {
+.neiki-content-default-style ul,
+.neiki-content-default-style ol {
   margin: 0 0 1em 0;
   padding-left: 2em;
 }
 
-.neiki-content li {
+.neiki-content-default-style li {
   margin-bottom: 0.25em;
 }
 
-.neiki-content blockquote {
+.neiki-content-default-style blockquote {
   margin: 0 0 1em 0;
   padding: 10px 20px;
   border-left: 4px solid var(--neiki-accent-color);
@@ -672,7 +727,7 @@
   font-style: italic;
 }
 
-.neiki-content pre {
+.neiki-content-default-style pre {
   margin: 0 0 1em 0;
   padding: 16px;
   background: var(--neiki-bg-tertiary);
@@ -682,7 +737,7 @@
   font-size: 13px;
 }
 
-.neiki-content code {
+.neiki-content-default-style code {
   padding: 2px 6px;
   background: var(--neiki-bg-tertiary);
   border-radius: 3px;
@@ -690,16 +745,16 @@
   font-size: 0.9em;
 }
 
-.neiki-content a {
+.neiki-content-default-style a {
   color: var(--neiki-accent-color);
   text-decoration: underline;
 }
 
-.neiki-content a:hover {
+.neiki-content-default-style a:hover {
   color: var(--neiki-accent-hover);
 }
 
-.neiki-content img {
+.neiki-content-default-style img {
   display: inline-block;
   max-width: 100%;
   height: auto;
@@ -707,12 +762,12 @@
   cursor: pointer;
 }
 
-.neiki-content img.neiki-selected {
+.neiki-content-default-style img.neiki-selected {
   outline: 2px solid var(--neiki-accent-color);
   outline-offset: 2px;
 }
 
-.neiki-content video {
+.neiki-content-default-style video {
   display: block;
   max-width: 100%;
   height: auto;
@@ -735,7 +790,7 @@
 /* ============================================
    Tables
    ============================================ */
-.neiki-content table,
+.neiki-content-default-style table,
 .neiki-table {
   width: 100%;
   border-collapse: collapse;
@@ -743,8 +798,8 @@
   table-layout: fixed;
 }
 
-.neiki-content table td,
-.neiki-content table th {
+.neiki-content-default-style table td,
+.neiki-content-default-style table th {
   border: 1px solid var(--neiki-table-border);
   padding: 8px 12px;
   min-width: 50px;
@@ -752,18 +807,18 @@
   position: relative;
 }
 
-.neiki-content table th {
+.neiki-content-default-style table th {
   background: var(--neiki-bg-secondary);
   font-weight: 600;
 }
 
-.neiki-content table td:hover,
-.neiki-content table th:hover {
+.neiki-content-default-style table td:hover,
+.neiki-content-default-style table th:hover {
   background: var(--neiki-bg-hover);
 }
 
-.neiki-content table td.neiki-cell-selected,
-.neiki-content table th.neiki-cell-selected {
+.neiki-content-default-style table td.neiki-cell-selected,
+.neiki-content-default-style table th.neiki-cell-selected {
   background: var(--neiki-selection-bg);
 }