neiki-editor 2.4.0 → 2.6.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-MIT-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.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-2.6.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
 </p>
 
 <p align="center">
@@ -41,14 +41,14 @@
 Just one file — CSS is embedded automatically:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.4.0/dist/neiki-editor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.min.js"></script>
 ```
 
 Or if you prefer loading CSS separately:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.4.0/dist/neiki-editor.css">
-<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.4.0/dist/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.css">
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.js"></script>
 ```
 
 ### Package Manager
@@ -137,7 +137,7 @@ const editor = new NeikiEditor('#editor', {
 | `spellcheck` | `boolean` | `true` | Enable browser spellcheck |
 | `readonly` | `boolean` | `false` | Make editor read-only |
 | `theme` | `string` | `'light'` | `'light'` or `'dark'` |
-| `language` | `string` | `'en'` | UI language: `'en'` (English) or `'cs'` (Czech) |
+| `language` | `string` | `'en'` | UI language — `en`, `cs`, `zh`, `es`, `de`, `fr`, `pt`, `ja` |
 | `translations` | `object\|null` | `null` | Custom translation keys (merged with built-in) |
 | `toolbar` | `array` | *(see above)* | Toolbar button configuration |
 | `onChange` | `function\|null` | `null` | Callback on content change |
@@ -173,8 +173,8 @@ Use the `toolbar` array to customize which buttons appear and in what order. Use
 | `heading` | Select | Paragraph, H1, H2, H3, H4, H5, H6. Defaults to Paragraph. |
 | `fontSize` | Widget | Font size widget with **[−]** / **[+]** buttons, text input, and dropdown presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96 |
 | `fontFamily` | Select | Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS) |
-| `foreColor` | Color Picker | Text color picker with reset option |
-| `backColor` | Color Picker | Background color picker with reset option |
+| `foreColor` | Color Picker | Text color — palette, native color input, hex code input |
+| `backColor` | Color Picker | Background color — palette, native color input, hex code input |
 
 ### Alignment & Lists
 
@@ -263,6 +263,12 @@ Neiki Editor supports multiple UI languages. Built-in:
 
 - **English** (`en`) — default
 - **Czech** (`cs`)
+- **Chinese** (`zh`)
+- **Spanish** (`es`)
+- **German** (`de`)
+- **French** (`fr`)
+- **Portuguese** (`pt`)
+- **Japanese** (`ja`)
 
 ### Set language on init:
 

package/dist/neiki-editor.css

@@ -1,7 +1,7 @@
 /**
  * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
  * CSS Stylesheet
- * Version: 2.4.0
+ * Version: 2.6.0
  */
 
 /* ============================================
@@ -585,21 +585,96 @@
   top: 100%;
   left: 0;
   z-index: 1000;
-  width: 220px;
   background: var(--neiki-bg-primary);
   border: 1px solid var(--neiki-border-color);
   border-radius: 8px;
   box-shadow: var(--neiki-shadow-lg);
   padding: 8px;
   margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.neiki-color-grid {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   gap: 2px;
 }
 
+.neiki-color-custom {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--neiki-border-color);
+}
+
+.neiki-color-custom-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--neiki-border-color);
+  border-radius: 4px;
+  padding: 2px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.neiki-color-custom-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.neiki-color-custom-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.neiki-color-custom-input::-moz-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.neiki-color-hex-input {
+  flex: 1;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--neiki-border-color);
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+  background: var(--neiki-bg-secondary);
+  color: var(--neiki-text-primary);
+  outline: none;
+}
+
+.neiki-color-hex-input:focus {
+  border-color: var(--neiki-accent-color);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
+}
+
+.neiki-color-apply-btn {
+  height: 28px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--neiki-accent-color);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.neiki-color-apply-btn:hover {
+  background: var(--neiki-accent-hover);
+}
+
 .neiki-color-swatch {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border-radius: 3px;
   cursor: pointer;
   border: 1px solid var(--neiki-border-color);
@@ -980,6 +1055,15 @@
   border-top: 1px solid var(--neiki-border-color);
 }
 
+.neiki-modal-footer .neiki-btn {
+  width: auto;
+  height: 38px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+}
+
 /* Form Elements */
 .neiki-form-group {
   margin-bottom: 16px;
@@ -1623,6 +1707,11 @@
     padding: 0 4px;
     font-size: 11px;
   }
+
+  .neiki-color-picker {
+    left: auto;
+    right: 0;
+  }
 }
 
 @media (max-width: 480px) {