@use-kona/editor 0.1.20 → 0.1.22

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { type MapStore, map } from 'nanostores';
 import type React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   type ConnectDragPreview,
   type ConnectDragSource,
@@ -92,15 +92,21 @@ export class DnDPlugin implements IPlugin {
       null,
     );
 
+    const dropTargetRef = useRef<HTMLElement | null>(null);
+
     const customType = options.customTypes?.[props.element.type];
     const currentElement = props.element as DnDNode;
 
+    const selected = Array.from($store.selected.values());
+
     const [, drag, preview] = useDrag({
       type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
       item: {
         ...(customType?.getData?.(props.element) || {}),
         element: props.element,
-        nodeIds: Array.from($store.selected.values()),
+        nodeIds: currentElement?.nodeId && selected.includes(currentElement?.nodeId)
+          ? selected
+          : [currentElement?.nodeId],
       },
       ...(customType?.getDndItem?.(props.element) || {}),
       canDrag: !isReadOnly,
@@ -124,10 +130,7 @@ export class DnDPlugin implements IPlugin {
         };
       },
       hover(_, monitor) {
-        const element = ReactEditor.toDOMNode(
-          editor,
-          props.element,
-        ) as HTMLElement;
+        const element = dropTargetRef.current;
         if (!element) return;
 
         const hoverBoundingRect = element.getBoundingClientRect();
@@ -151,7 +154,7 @@ export class DnDPlugin implements IPlugin {
 
         if (!sourceTo) return;
 
-        const dropPath = getDropPath(editor, sourceTo, dropPosition);
+        const dropPath = getDropPath(editor, sourceTo);
 
         if (!dropPath) return;
 
@@ -170,7 +173,8 @@ export class DnDPlugin implements IPlugin {
               return;
             }
 
-            moveNode(editor, sourceTo, dragItem.nodeIds, dropPosition);
+            moveNode(editor, sourceTo, dragItem.nodeIds);
+            $store.selected.clear();
             break;
           }
         }
@@ -179,6 +183,11 @@ export class DnDPlugin implements IPlugin {
       },
     });
 
+    const connectDropRef: ConnectDropTarget = (el) => {
+      dropTargetRef.current = el as HTMLElement | null;
+      return drop(el);
+    };
+
     // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about this dep
     useEffect(() => {
       setDropPosition(null);
@@ -195,7 +204,7 @@ export class DnDPlugin implements IPlugin {
     return options.renderBlock?.({
       props,
       dragRef: drag,
-      dropRef: drop,
+      dropRef: connectDropRef,
       previewRef: preview,
       position: dropPosition,
       selected:
@@ -214,44 +223,45 @@ export class DnDPlugin implements IPlugin {
 const getDropPath = (
   editor: Editor,
   targetNodePath: Path,
-  position: 'top' | 'bottom' | null,
 ) => {
   const target = Editor.node(editor, targetNodePath);
 
-  switch (position) {
-    case 'top':
-      return target[1];
-    case 'bottom':
-      return Path.next(target[1]);
-  }
+  return target[1];
 };
 
 const moveNode = (
   editor: Editor,
   targetNodePath: Path,
   nodeIds: string[],
-  position: 'top' | 'bottom',
 ) => {
-  const dropPath = getDropPath(editor, targetNodePath, position);
+  const dropPath = getDropPath(editor, targetNodePath);
 
   if (!dropPath) return;
+  if (!Editor.hasPath(editor, dropPath)) {
+    return
+  }
 
-  // nodeIds.reverse().forEach((nodeId) => {
-  Transforms.moveNodes(editor, {
-    // at: sourceNodePath,
-    at: [],
-    match: (n) => {
-      if (!Editor.isBlock(editor, n as CustomElement)) {
-        return false;
-      }
-
-      const node = n as DnDNode;
-      const shouldMove =
-        typeof node.nodeId === 'string' && nodeIds.includes(node.nodeId);
-      return shouldMove;
-    },
-    to: dropPath,
-    mode: 'highest',
+  Editor.withoutNormalizing(editor, () => {
+    Transforms.moveNodes(editor, {
+      at: [],
+      match: (n) => {
+        if (!Editor.isBlock(editor, n as CustomElement)) {
+          return false;
+        }
+
+        if (Editor.isEditor(n)) {
+          return false;
+        }
+
+        const node = n as DnDNode;
+        const shouldMove =
+          typeof node.nodeId === 'string' && nodeIds.includes(node.nodeId);
+        return shouldMove;
+      },
+      to: dropPath,
+      mode: 'highest',
+    });
   });
-  // });
+  Editor.normalize(editor);
+
 };

package/src/plugins/ListsPlugin/ListsPlugin.spec.tsx

@@ -7,9 +7,11 @@ import {
   type HyperscriptShorthands,
 } from 'slate-hyperscript';
 import { describe, expect, it } from 'vitest';
+import { Editor } from 'slate';
 import { createEditor } from '../../core/createEditor';
 import { ListsPlugin } from './ListsPlugin';
 
+
 const elements: HyperscriptShorthands = {
   paragraph: { type: 'paragraph' },
   numberedList: { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
@@ -48,9 +50,6 @@ describe('ListsPlugin', () => {
             <text>Hello world</text>
           </listItem>
         </bulletedList>
-        <paragraph>
-          <text></text>
-        </paragraph>
       </editor>
     );
 
@@ -74,12 +73,173 @@ describe('ListsPlugin', () => {
             <text>Hello world</text>
           </listItem>
         </numberedList>
-        <paragraph>
-          <text></text>
-        </paragraph>
       </editor>
     );
 
     expect(editor.children).toEqual(output.children);
   });
+
+  it('should merge two adjacent bulleted lists during normalization', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'one' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'two' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'one' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'two' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
+
+  it('should merge two adjacent numbered lists during normalization', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
+
+  it('should not merge lists of different types', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
+
+  it('should merge multiple adjacent lists of same type', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '1' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '2' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '3' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '1' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '2' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '3' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
 });

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -44,8 +44,15 @@ export class ListsPlugin implements IPlugin {
 
     editor.normalizeNode = (entry: NodeEntry) => {
       const [node, path] = entry;
-      //
+
       if (this.isList(editor, node as CustomElement)) {
+        if ((node as CustomElement).children.length === 0) {
+          Transforms.removeNodes(editor, {
+            at: path,
+          });
+          return;
+        }
+
         /* Unwrap lists around non-list-items */
         for (const [child, childPath] of Array.from(
           Node.children(editor, path),
@@ -64,6 +71,7 @@ export class ListsPlugin implements IPlugin {
         }
       }
 
+      /* Wrap list items in list if they are not already wrapped */
       if (this.isListItem(editor, node as CustomElement)) {
         const parent = Editor.above(editor, {
           at: path,
@@ -87,39 +95,17 @@ export class ListsPlugin implements IPlugin {
         }
       }
 
-      if (this.isList(editor, node as CustomElement)) {
-        if (!Path.hasPrevious(path)) {
-          normalizeNode(entry);
-          return;
-        }
-
-        const prevListItemPath = Editor.before(editor, path, {
-          unit: 'block',
-        });
-
-        const prevList =
-          prevListItemPath &&
-          Editor.above<CustomElement>(editor, {
-            at: prevListItemPath,
-            match: (n) => this.isList(editor, n as CustomElement),
-          });
+      /* Merge adjacent lists */
+      if (this.isList(editor, node as CustomElement) && Path.hasPrevious(path)) {
+        const prevPath = Path.previous(path);
+        const prevNode = Node.get(editor, prevPath) as CustomElement;
 
-        if (prevList) {
-          const currentDepth = this.getListDepth(editor, path);
-          const prevDepth = this.getListDepth(editor, prevList[1]);
-
-          if (
-            this.isList(editor, prevList[0] as CustomElement) &&
-            currentDepth === prevDepth &&
-            prevList[0].type === (node as CustomElement).type
-          ) {
-            try {
-              Transforms.mergeNodes(editor, {
-                at: path,
-                match: (n) => this.isList(editor, n as CustomElement),
-              });
-            } catch (e) {}
-          }
+        if (
+          this.isList(editor, prevNode) &&
+          prevNode.type === (node as CustomElement).type
+        ) {
+          Transforms.mergeNodes(editor, { at: path });
+          return;
         }
       }
 
@@ -424,22 +410,20 @@ export class ListsPlugin implements IPlugin {
           return;
         }
 
+        Transforms.setNodes(
+          editor,
+          { type: listItemType },
+          { at: nodes[0][1], split: true },
+        );
+
         Transforms.wrapNodes(
           editor,
           { type: listType, children: [] },
           {
-            mode: 'highest',
-            match: (n) => {
-              return Element.isElement(n) && n.type === listItemType;
-            },
+            at: nodes[0][1],
+            match: (n) => (n as CustomElement).type === listItemType,
           },
         );
-
-        Transforms.setNodes(
-          editor,
-          { type: listItemType },
-          { at: nodes[0][1], split: true },
-        );
       }
     });
   };
@@ -464,26 +448,6 @@ export class ListsPlugin implements IPlugin {
     return 0;
   };
 
-  private getListDepth = (editor: Editor, path?: Path) => {
-    if (path) {
-      const node = Node.get(editor, path) as CustomElement;
-      if (!this.isList(editor, node)) {
-        return 0;
-      }
-
-      let count = 0;
-      let parent = Editor.parent(editor, path);
-
-      while (parent && this.isList(editor, parent[0] as CustomElement)) {
-        count++;
-        parent = Editor.parent(editor, parent[1]);
-      }
-
-      return count;
-    }
-    return 0;
-  };
-
   private getListItem = (editor: Editor, path?: Path) => {
     if (path) {
       const node = Node.get(editor, path) as CustomElement;

package/src/plugins/ListsPlugin/styles.module.css

@@ -1,5 +1,6 @@
 .list {
   padding: 0;
+  margin: 0;
 
   & & {
     margin-left: 32px;

package/src/plugins/TableOfContentsPlugin/TableOfContentsPlugin.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { type MapStore, map } from 'nanostores';
 import { type MouseEvent, useEffect } from 'react';
-import { Editor, type NodeEntry, Operation } from 'slate';
+import { Editor, type NodeEntry, Operation, Text } from 'slate';
 import { ReactEditor } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import type { IPlugin, UiParams } from '../../types';
@@ -87,7 +87,7 @@ export class TableOfContentsPlugin implements IPlugin {
             className={styles[`h${level}`]}
             onMouseDown={handleMouseDown}
           >
-            {node.children[0].text}
+            {Text.isText(node.children[0]) ? node.children[0].text : ''}
           </div>
         );
       },

package/src/types.ts

@@ -3,6 +3,7 @@ import type {
   DecoratedRange,
   Descendant,
   Editor,
+  Location,
   NodeEntry,
   NodeMatch,
 } from 'slate';
@@ -82,6 +83,7 @@ export type EditorRef = {
   deserialize: (
     element: HTMLElement,
   ) => (Descendant | string)[] | string | Descendant | null;
+  insertNodes: (nodes: Descendant[], at?: Location) => boolean;
   isEmpty: () => boolean;
   deleteNode: (match: NodeMatch<CustomElement>) => void;
   focus: (mode?: 'end') => void;

package/src/utils.ts

@@ -7,8 +7,10 @@ export const isEmpty = (children: Descendant[]) => {
     return first.text.trim() === '';
   }
 
-  if (children && children.length <= 1 && Text.isText(first?.children?.[0])) {
-    return first.children.every((child) => child.text?.trim() === '');
+  if (children && children.length <= 1 && first && 'children' in first) {
+    return first.children.every(
+      (child) => Text.isText(child) && child.text?.trim() === '',
+    );
   }
 
   return false;

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Kona
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/plugins/CommandsPlugin/resolveCommands.spec.d.ts

@@ -1 +0,0 @@
-export {};