neiki-editor 3.4.0 → 3.6.0

package/README.md

@@ -11,7 +11,7 @@
   <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.4.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.6.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
 </p>
 
 <p align="center">
@@ -140,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.4.0/neiki-editor.min.js"></script>
+<script src="https://cdn.neikiri.dev/neiki-editor/3.6.0/neiki-editor.min.js"></script>
 ```
 
 **Load CSS and JS separately**
@@ -151,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.4.0/neiki-editor.css">
-<script src="https://cdn.neikiri.dev/neiki-editor/3.4.0/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/3.6.0/neiki-editor.css">
+<script src="https://cdn.neikiri.dev/neiki-editor/3.6.0/neiki-editor.js"></script>
 ```
 
 **Alternative CDN — jsDelivr**
@@ -160,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.4.0/dist/neiki-editor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.6.0/dist/neiki-editor.min.js"></script>
 ```
 
 **Package manager**
@@ -263,7 +263,7 @@ const editor = new NeikiEditor('#editor', {
 | `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 |
@@ -309,12 +309,14 @@ editor.toggleTheme();        // cycle: light → dark → blue → dark-blue →
 
 ### 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;
@@ -351,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.
 
 ---
@@ -386,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();
@@ -398,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.

package/dist/neiki-editor.css

@@ -1,7 +1,7 @@
 /**
  * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
  * CSS Stylesheet
- * Version: 3.4.0
+ * Version: 3.6.0
  */
 
 /* ============================================
@@ -668,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);
@@ -727,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);
@@ -737,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;
@@ -745,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;
@@ -762,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;
@@ -790,7 +790,7 @@
 /* ============================================
    Tables
    ============================================ */
-.neiki-content table,
+.neiki-content-default-style table,
 .neiki-table {
   width: 100%;
   border-collapse: collapse;
@@ -798,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;
@@ -807,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);
 }
 

package/dist/neiki-editor.js

@@ -1,6 +1,6 @@
 /**
  * NeikiEditor - A Modern WYSIWYG Editor
- * Version: 3.4.0
+ * Version: 3.6.0
  *
  * A lightweight, feature-rich text editor with support for:
  * - Rich text formatting (bold, italic, underline, etc.)
@@ -2160,6 +2160,38 @@
       } catch (e) { }
     }
 
+    removeByPrefix(prefix = '') {
+      return StorageManager.removeByPrefix(this.prefix + prefix);
+    }
+
+    static removeKey(key) {
+      try {
+        localStorage.removeItem(key);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+
+    static removeByPrefix(prefix) {
+      if (typeof prefix !== 'string') return 0;
+
+      try {
+        const keys = [];
+        for (let i = 0; i < localStorage.length; i++) {
+          const key = localStorage.key(i);
+          if (key && key.indexOf(prefix) === 0) {
+            keys.push(key);
+          }
+        }
+
+        keys.forEach(key => localStorage.removeItem(key));
+        return keys.length;
+      } catch (e) {
+        return 0;
+      }
+    }
+
     // Global storage (shared across all editors)
     static setGlobal(key, value) {
       try {
@@ -3082,7 +3114,7 @@
           <img src="https://github.com/neikiri/neiki-editor/raw/main/assets/logo.svg" alt="Neiki's Editor" style="width: 240px; height: auto; margin: 0 auto 16px; display: block;">
           <div style="font-size: 14px; line-height: 2; color: var(--neiki-text-primary);">
             <div><strong>${Utils.escapeHTML(t('help.author'))}:</strong> neikiri (Jindřich Stoklasa)</div>
-            <div><strong>${Utils.escapeHTML(t('help.version'))}:</strong> 3.4.0</div>
+            <div><strong>${Utils.escapeHTML(t('help.version'))}:</strong> 3.6.0</div>
             <div><strong>${Utils.escapeHTML(t('help.github'))}:</strong> <a href="https://github.com/neikiri/neiki-editor" target="_blank" rel="noopener noreferrer" style="color: var(--neiki-accent);">github.com/neikiri/neiki-editor</a></div>
             <div><strong>${Utils.escapeHTML(t('help.documentation'))}:</strong> <a href="https://github.com/neikiri/neiki-editor/wiki" target="_blank" rel="noopener noreferrer" style="color: var(--neiki-accent);">Wiki</a></div>
           </div>
@@ -3868,6 +3900,24 @@
       if (!Utils.isSafeUrl(url)) return;
       const selection = Utils.getSelection();
       const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+      const existingLink = this.editor.getLinkAtSelection();
+
+      if (existingLink) {
+        existingLink.setAttribute('href', url);
+        existingLink.textContent = text || url;
+        if (newTab) {
+          existingLink.setAttribute('target', '_blank');
+          existingLink.setAttribute('rel', 'noopener noreferrer');
+        } else {
+          existingLink.removeAttribute('target');
+          existingLink.removeAttribute('rel');
+        }
+
+        this.editor.history.record();
+        this.editor.syncToOriginal();
+        this.editor.triggerChange();
+        return;
+      }
 
       if (range && !range.collapsed) {
         this.exec('createLink', url);
@@ -4467,7 +4517,7 @@
           const insertItems = [
             {
               key: 'link', icon: Icons.link, labelKey: 'insert.link',
-              action: () => { this.saveCurrentSelection(); this.modal.open('link', { text: Utils.getSelection().toString() }); }
+              action: () => { this.saveCurrentSelection(); this.modal.open('link', this.getLinkModalData()); }
             },
             {
               key: 'image', icon: Icons.image, labelKey: 'insert.image',
@@ -4670,7 +4720,7 @@
 
       const contentClasses = this.config.customClass
         ? `neiki-content ${this.config.customClass}`
-        : 'neiki-content';
+        : 'neiki-content neiki-content-default-style';
 
       this.contentArea = Utils.createElement('div', {
         className: contentClasses,
@@ -4847,8 +4897,7 @@
         let data = {};
 
         if (item === 'link') {
-          const sel = Utils.getSelection();
-          data.text = sel.toString();
+          data = this.getLinkModalData();
         }
 
         this.modal.open(item, data);
@@ -4878,6 +4927,13 @@
     }
 
     handleKeydown(e) {
+      if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') &&
+        this.imageResizer &&
+        this.imageResizer.moveCaretFromSelectedImage(e.key === 'ArrowUp' ? 'before' : 'after')) {
+        e.preventDefault();
+        return;
+      }
+
       if ((e.key === 'Backspace' || e.key === 'Delete') &&
         this.imageResizer &&
         this.imageResizer.deleteSelectedImage()) {
@@ -4903,7 +4959,7 @@
           case 'k':
             e.preventDefault();
             this.saveCurrentSelection();
-            this.modal.open('link', { text: Utils.getSelection().toString() });
+            this.modal.open('link', this.getLinkModalData());
             break;
           case 'z':
             e.preventDefault();
@@ -4965,6 +5021,37 @@
       }
     }
 
+    getLinkAtSelection() {
+      const selection = window.getSelection();
+      if (!selection || !selection.rangeCount) return null;
+
+      const range = selection.getRangeAt(0);
+      if (!Utils.isRangeInside(range, this.contentArea)) return null;
+
+      const getClosestLink = (node) => {
+        const element = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+        const link = element && element.closest ? element.closest('a') : null;
+        return link && this.contentArea.contains(link) ? link : null;
+      };
+
+      const startLink = getClosestLink(range.startContainer);
+      const endLink = getClosestLink(range.endContainer);
+      return startLink && startLink === endLink ? startLink : null;
+    }
+
+    getLinkModalData() {
+      const link = this.getLinkAtSelection();
+      if (link) {
+        return {
+          url: link.getAttribute('href') || '',
+          text: link.textContent || '',
+          newTab: link.getAttribute('target') === '_blank'
+        };
+      }
+
+      return { text: Utils.getSelection().toString() };
+    }
+
     handlePaste(e) {
       // Check for pasted images first
       if (e.clipboardData && e.clipboardData.files.length > 0) {
@@ -5216,6 +5303,30 @@
       this.updateStatusBar();
     }
 
+    removeStorage(key) {
+      this.storage.remove(key);
+    }
+
+    removeStorageByPrefix(prefix = '') {
+      return this.storage.removeByPrefix(prefix);
+    }
+
+    clearAutosaveStorage() {
+      this.isAutosaveEnabled = false;
+      if (this.autosaveInterval) {
+        clearInterval(this.autosaveInterval);
+        this.autosaveInterval = null;
+      }
+
+      this.storage.remove('autosave_enabled');
+      this.storage.remove('autosave_content');
+
+      if (this.statusAutosave) {
+        this.statusAutosave.style.display = 'none';
+      }
+      this.updateToolbar();
+    }
+
     _ensureDefaultBlock() {
       // Ensure the content area always has at least one <p> block
       if (!this.contentArea) return;
@@ -6257,6 +6368,9 @@
       this.currentImg = img;
       const isVideo = img.tagName === 'VIDEO';
 
+      // Keep keyboard events in the editor while the media selection is active.
+      this.editor.contentArea.focus({ preventScroll: true });
+
       // Create wrapper around image
       this.wrapper = document.createElement('span');
       this.wrapper.className = 'neiki-img-resizable';
@@ -6589,6 +6703,30 @@
       if (sel) sel.removeAllRanges();
     }
 
+    moveCaretFromSelectedImage(position) {
+      if (!this.currentImg || !this.wrapper || !this.editor.contentArea.contains(this.wrapper)) {
+        return false;
+      }
+
+      const img = this.currentImg;
+      this.deselect();
+
+      const range = document.createRange();
+      if (position === 'before') {
+        range.setStartBefore(img);
+      } else {
+        range.setStartAfter(img);
+      }
+      range.collapse(true);
+
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+      this.editor.savedSelectionRange = range.cloneRange();
+      this.editor.updateToolbar();
+      return true;
+    }
+
     getSelectedImageClipboardData() {
       if (!this.currentImg || !this.wrapper || !this.editor.contentArea.contains(this.wrapper)) {
         return null;
@@ -7048,7 +7186,9 @@
       if (prev && prev.parentNode === this.editor.contentArea) {
         prev.parentNode.insertBefore(block, prev);
         this.editor.history.record();
+        this.editor.syncToOriginal();
         this.editor.triggerChange();
+        this.editor.updateStatusBar();
       }
     }
 
@@ -7059,7 +7199,9 @@
       if (next && next.parentNode === this.editor.contentArea) {
         next.parentNode.insertBefore(block, next.nextSibling);
         this.editor.history.record();
+        this.editor.syncToOriginal();
         this.editor.triggerChange();
+        this.editor.updateStatusBar();
       }
     }
 
@@ -7225,8 +7367,7 @@
 
     handleButtonClick(item) {
       if (item === 'link') {
-        const sel = Utils.getSelection();
-        this.editor.modal.open('link', { text: sel.toString() });
+        this.editor.modal.open('link', this.editor.getLinkModalData());
       } else if (item === 'moveUp') {
         if (this.editor.blockDragDrop) this.editor.blockDragDrop.moveBlockUp();
       } else if (item === 'moveDown') {
@@ -7676,6 +7817,11 @@
 
   // Static methods
   NeikiEditor.addTranslation = addTranslation;
+  NeikiEditor.removeStorageKey = StorageManager.removeKey;
+  NeikiEditor.removeStorageByPrefix = StorageManager.removeByPrefix;
+  NeikiEditor.clearAutosaveStorage = function (prefix = 'neiki_autosave_') {
+    return StorageManager.removeByPrefix(prefix);
+  };
 
   // Export
   global.NeikiEditor = NeikiEditor;