neiki-editor 2.7.1 → 2.8.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.7.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-2.8.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
 </p>
 
 <p align="center">
@@ -49,7 +49,7 @@ Add this single line — CSS is included automatically, always the **latest vers
 #### Pin a specific version
 
 ```html
-<script src="https://cdn.neiki.eu/neiki-editor/2.7.1/neiki-editor.min.js"></script>
+<script src="https://cdn.neiki.eu/neiki-editor/2.8.0/neiki-editor.min.js"></script>
 ```
 
 #### Load CSS and JS separately
@@ -60,8 +60,8 @@ Add this single line — CSS is included automatically, always the **latest vers
 <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.js"></script>
 
 <!-- Or pinned -->
-<link rel="stylesheet" href="https://cdn.neiki.eu/neiki-editor/2.7.1/neiki-editor.css">
-<script src="https://cdn.neiki.eu/neiki-editor/2.7.1/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.neiki.eu/neiki-editor/2.8.0/neiki-editor.css">
+<script src="https://cdn.neiki.eu/neiki-editor/2.8.0/neiki-editor.js"></script>
 ```
 
 #### Alternative CDN — jsDelivr
@@ -71,15 +71,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.7.1/dist/neiki-editor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.8.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.7.1/dist/neiki-editor.css">
-<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.7.1/dist/neiki-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.8.0/dist/neiki-editor.css">
+<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.8.0/dist/neiki-editor.js"></script>
 ```
 
 #### Package Manager
@@ -466,6 +466,10 @@ Right-click on any table cell to access:
 - **Merge Cells** — merge selected cells horizontally
 - **Split Cell** — split a previously merged cell
 
+### Column Resize
+
+Hover near any column border to reveal a **drag handle**. Drag to resize adjacent column widths. The table uses fixed layout during resize for precise control.
+
 ---
 
 ## 🖼️ Image Support
@@ -482,6 +486,10 @@ 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.
 
+### 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.
+
 ---
 
 ## 🔍 Find & Replace
@@ -501,13 +509,20 @@ Features:
 
 When you select text in the editor, a floating toolbar appears above the selection with quick access to:
 
-- Bold, Italic, Underline, Strikethrough
-- Insert Link
+- **Move Block Up / Down** — reorder the current content block (left side)
+- **Bold, Italic, Underline, Strikethrough** — quick formatting
+- **Insert Link**
 
 The toolbar follows the selection and disappears when the selection is cleared.
 
 ---
 
+## 🔀 Block Drag & Drop
+
+Hover over any content block (paragraph, heading, table, image, list, etc.) to reveal a **grip handle** (⠿) on the left side. Drag to reorder blocks within the editor. A ghost preview and drop placeholder guide the drop position.
+
+---
+
 ## 🖨️ Print
 
 Click the **Print** button to open the browser print dialog with the editor content formatted for printing.

package/dist/neiki-editor.css

@@ -1,7 +1,7 @@
 /**
  * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
  * CSS Stylesheet
- * Version: 2.7.1
+ * Version: 2.8.0
  */
 
 /* ============================================
@@ -1533,6 +1533,18 @@
   height: 14px;
 }
 
+.neiki-floating-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--neiki-border-color);
+  margin: 0 2px;
+}
+
+.neiki-floating-move-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
 /* ============================================
    Tooltips
    ============================================ */
@@ -1598,28 +1610,146 @@
 /* ============================================
    Image Resize Handles
    ============================================ */
-.neiki-image-wrapper {
+.neiki-img-resizable {
   display: inline-block;
   position: relative;
+  outline: 2px solid var(--neiki-accent-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+  line-height: 0;
 }
 
-.neiki-image-wrapper.selected {
-  outline: 2px solid var(--neiki-accent-color);
+.neiki-img-resizable img {
+  display: block;
+  max-width: 100%;
 }
 
-.neiki-resize-handle {
+.neiki-img-resize-handle {
   position: absolute;
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   background: var(--neiki-accent-color);
   border: 2px solid #fff;
   border-radius: 2px;
+  z-index: 10;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.neiki-img-resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
+.neiki-img-resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
+.neiki-img-resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
+.neiki-img-resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
+
+.neiki-img-size-label {
+  position: absolute;
+  bottom: -32px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--neiki-text-primary);
+  color: var(--neiki-bg-primary);
+  font-size: 13px;
+  line-height: 1.4;
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+  opacity: 0.9;
+}
+
+/* Touch-friendly resize handles */
+@media (pointer: coarse) {
+  .neiki-img-resize-handle {
+    width: 20px;
+    height: 20px;
+  }
+  .neiki-img-resize-handle.nw { top: -10px; left: -10px; }
+  .neiki-img-resize-handle.ne { top: -10px; right: -10px; }
+  .neiki-img-resize-handle.sw { bottom: -10px; left: -10px; }
+  .neiki-img-resize-handle.se { bottom: -10px; right: -10px; }
+}
+
+/* ============================================
+   Table Column Resize Handle
+   ============================================ */
+.neiki-table-col-resize-handle {
+  position: absolute;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background 0.1s;
+}
+
+.neiki-table-col-resize-handle:hover,
+.neiki-table-col-resize-handle:active {
+  background: var(--neiki-accent-color);
+  opacity: 0.6;
+  border-radius: 3px;
+}
+
+/* ============================================
+   Block Drag & Drop
+   ============================================ */
+.neiki-block-grip {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  color: var(--neiki-text-muted);
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+  border-radius: 4px;
+  z-index: 5;
+  user-select: none;
+}
+
+.neiki-content:hover .neiki-block-grip {
+  opacity: 0.5;
+}
+
+.neiki-block-grip:hover {
+  opacity: 1 !important;
+  color: var(--neiki-text-primary);
+  background: var(--neiki-bg-hover);
+}
+
+.neiki-block-grip:active {
+  cursor: grabbing;
+}
+
+.neiki-block-grip svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+  pointer-events: none;
 }
 
-.neiki-resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
-.neiki-resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
-.neiki-resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
-.neiki-resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
+.neiki-block-ghost {
+  position: fixed;
+  z-index: 100000;
+  pointer-events: none;
+  opacity: 0.7;
+  background: var(--neiki-bg-primary);
+  border: 2px solid var(--neiki-accent-color);
+  border-radius: 6px;
+  padding: 8px 12px;
+  box-shadow: var(--neiki-shadow-lg);
+  max-height: 120px;
+  overflow: hidden;
+}
+
+.neiki-block-placeholder {
+  border: 2px dashed var(--neiki-accent-color);
+  border-radius: 6px;
+  background: rgba(13, 110, 253, 0.05);
+  margin: 2px 0;
+  transition: height 0.15s ease;
+}
 
 /* ============================================
    Print Styles
@@ -1634,7 +1764,11 @@
   .neiki-statusbar,
   .neiki-floating-toolbar,
   .neiki-find-replace,
-  .neiki-code-view-header {
+  .neiki-code-view-header,
+  .neiki-block-grip,
+  .neiki-img-resize-handle,
+  .neiki-img-size-label,
+  .neiki-table-col-resize-handle {
     display: none !important;
   }