@use-kona/editor 0.1.20 → 0.1.22

package/dist/editor.js

@@ -18,9 +18,24 @@ const KonaEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                 match
             });
         };
+        const insertNodes = (nodes, at)=>{
+            if (!editor || !Array.isArray(nodes) || !nodes.length) return false;
+            const target = at ?? editor.selection ?? [
+                editor.children.length
+            ];
+            try {
+                Transforms.insertNodes(editor, nodes, {
+                    at: target
+                });
+                return true;
+            } catch  {
+                return false;
+            }
+        };
         return {
             serialize: serialize(plugins),
             deserialize: deserialize(plugins),
+            insertNodes,
             deleteNode,
             isEmpty: ()=>isEmpty(editor.children),
             focus: (mode)=>{

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -1,9 +1,9 @@
 import { useStore } from "@nanostores/react";
 import { map } from "nanostores";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
-import { Editor, Path, Transforms } from "slate";
+import { Editor, Transforms } from "slate";
 import { ReactEditor, useReadOnly, useSlate } from "slate-react";
 class DnDPlugin {
     options;
@@ -34,14 +34,18 @@ class DnDPlugin {
         const options = this.options;
         const isReadOnly = useReadOnly();
         const [dropPosition, setDropPosition] = useState(null);
+        const dropTargetRef = useRef(null);
         const customType = options.customTypes?.[props.element.type];
         const currentElement = props.element;
+        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
@@ -61,7 +65,7 @@ class DnDPlugin {
                 };
             },
             hover (_, monitor) {
-                const element = ReactEditor.toDOMNode(editor, props.element);
+                const element = dropTargetRef.current;
                 if (!element) return;
                 const hoverBoundingRect = element.getBoundingClientRect();
                 const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
@@ -74,7 +78,7 @@ class DnDPlugin {
                 const itemType = monitor.getItemType();
                 const sourceTo = ReactEditor.findPath(editor, props.element);
                 if (!sourceTo) return;
-                const dropPath = getDropPath(editor, sourceTo, dropPosition);
+                const dropPath = getDropPath(editor, sourceTo);
                 if (!dropPath) return;
                 switch(itemType){
                     case NativeTypes.FILE:
@@ -84,13 +88,18 @@ class DnDPlugin {
                         {
                             const dragItem = item;
                             if (!dropPosition || !dragItem.nodeIds?.length) return;
-                            moveNode(editor, sourceTo, dragItem.nodeIds, dropPosition);
+                            moveNode(editor, sourceTo, dragItem.nodeIds);
+                            $store.selected.clear();
                             break;
                         }
                 }
                 setDropPosition(null);
             }
         });
+        const connectDropRef = (el)=>{
+            dropTargetRef.current = el;
+            return drop(el);
+        };
         useEffect(()=>{
             setDropPosition(null);
         }, [
@@ -101,7 +110,7 @@ class DnDPlugin {
         return options.renderBlock?.({
             props,
             dragRef: drag,
-            dropRef: drop,
+            dropRef: connectDropRef,
             previewRef: preview,
             position: dropPosition,
             selected: 'string' == typeof currentElement.nodeId ? $store.selected.has(currentElement.nodeId) : false,
@@ -111,28 +120,28 @@ class DnDPlugin {
         });
     };
 }
-const getDropPath = (editor, targetNodePath, position)=>{
+const getDropPath = (editor, targetNodePath)=>{
     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, targetNodePath, nodeIds, position)=>{
-    const dropPath = getDropPath(editor, targetNodePath, position);
+const moveNode = (editor, targetNodePath, nodeIds)=>{
+    const dropPath = getDropPath(editor, targetNodePath);
     if (!dropPath) return;
-    Transforms.moveNodes(editor, {
-        at: [],
-        match: (n)=>{
-            if (!Editor.isBlock(editor, n)) return false;
-            const node = n;
-            const shouldMove = 'string' == typeof node.nodeId && nodeIds.includes(node.nodeId);
-            return shouldMove;
-        },
-        to: dropPath,
-        mode: 'highest'
+    if (!Editor.hasPath(editor, dropPath)) return;
+    Editor.withoutNormalizing(editor, ()=>{
+        Transforms.moveNodes(editor, {
+            at: [],
+            match: (n)=>{
+                if (!Editor.isBlock(editor, n)) return false;
+                if (Editor.isEditor(n)) return false;
+                const node = n;
+                const shouldMove = 'string' == typeof node.nodeId && nodeIds.includes(node.nodeId);
+                return shouldMove;
+            },
+            to: dropPath,
+            mode: 'highest'
+        });
     });
+    Editor.normalize(editor);
 };
 export { DnDPlugin };

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -26,6 +26,9 @@ class ListsPlugin {
         editor.normalizeNode = (entry)=>{
             const [node, path] = entry;
             if (this.isList(editor, node)) {
+                if (0 === node.children.length) return void Transforms.removeNodes(editor, {
+                    at: path
+                });
                 for (const [child, childPath] of Array.from(Node.children(editor, path)))if (!this.isListItem(editor, child) && !this.isList(editor, child)) return void Transforms.unwrapNodes(editor, {
                     at: childPath,
                     match: (n)=>this.isList(editor, n),
@@ -47,25 +50,12 @@ class ListsPlugin {
                     split: true
                 });
             }
-            if (this.isList(editor, node)) {
-                if (!Path.hasPrevious(path)) return void normalizeNode(entry);
-                const prevListItemPath = Editor.before(editor, path, {
-                    unit: 'block'
-                });
-                const prevList = prevListItemPath && Editor.above(editor, {
-                    at: prevListItemPath,
-                    match: (n)=>this.isList(editor, n)
+            if (this.isList(editor, node) && Path.hasPrevious(path)) {
+                const prevPath = Path.previous(path);
+                const prevNode = Node.get(editor, prevPath);
+                if (this.isList(editor, prevNode) && prevNode.type === node.type) return void Transforms.mergeNodes(editor, {
+                    at: path
                 });
-                if (prevList) {
-                    const currentDepth = this.getListDepth(editor, path);
-                    const prevDepth = this.getListDepth(editor, prevList[1]);
-                    if (this.isList(editor, prevList[0]) && currentDepth === prevDepth && prevList[0].type === node.type) try {
-                        Transforms.mergeNodes(editor, {
-                            at: path,
-                            match: (n)=>this.isList(editor, n)
-                        });
-                    } catch (e) {}
-                }
             }
             normalizeNode(entry);
         };
@@ -238,19 +228,19 @@ class ListsPlugin {
                     mode: 'highest'
                 }));
                 if (!nodes.length) return;
-                Transforms.wrapNodes(editor, {
-                    type: listType,
-                    children: []
-                }, {
-                    mode: 'highest',
-                    match: (n)=>Element.isElement(n) && n.type === listItemType
-                });
                 Transforms.setNodes(editor, {
                     type: listItemType
                 }, {
                     at: nodes[0][1],
                     split: true
                 });
+                Transforms.wrapNodes(editor, {
+                    type: listType,
+                    children: []
+                }, {
+                    at: nodes[0][1],
+                    match: (n)=>n.type === listItemType
+                });
             }
         });
     };
@@ -267,20 +257,6 @@ class ListsPlugin {
         }
         return 0;
     };
-    getListDepth = (editor, path)=>{
-        if (path) {
-            const node = Node.get(editor, path);
-            if (!this.isList(editor, node)) return 0;
-            let count = 0;
-            let parent = Editor.parent(editor, path);
-            while(parent && this.isList(editor, parent[0])){
-                count++;
-                parent = Editor.parent(editor, parent[1]);
-            }
-            return count;
-        }
-        return 0;
-    };
     getListItem = (editor, path)=>{
         if (path) {
             const node = Node.get(editor, path);

package/dist/plugins/ListsPlugin/styles_module.css

@@ -1,4 +1,5 @@
 .list-YEmg4D {
+  margin: 0;
   padding: 0;
 
   & & {

package/dist/plugins/TableOfContentsPlugin/TableOfContentsPlugin.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "@nanostores/react";
 import { map } from "nanostores";
 import { useEffect } from "react";
-import { Editor, Operation } from "slate";
+import { Editor, Operation, Text } from "slate";
 import { ReactEditor } from "slate-react";
 import styles_module from "./styles.module.js";
 class TableOfContentsPlugin {
@@ -56,7 +56,7 @@ class TableOfContentsPlugin {
             return /*#__PURE__*/ jsx("div", {
                 className: styles_module[`h${level}`],
                 onMouseDown: handleMouseDown,
-                children: node.children[0].text
+                children: Text.isText(node.children[0]) ? node.children[0].text : ''
             }, path.join('-'));
         });
         return /*#__PURE__*/ jsxs("div", {

package/dist/{plugins → src/plugins}/CodeBlockPlugin/CodeBlockPlugin.d.ts

@@ -4,7 +4,6 @@ import { type RenderElementProps, type RenderLeafProps } from 'slate-react';
 import type { IPlugin } from '../../types';
 import type { CodeElement } from './types';
 import 'prismjs/themes/prism.css';
-import type { CustomElement } from '../../../types';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-json';
@@ -47,7 +46,7 @@ export declare class CodeBlockPlugin implements IPlugin {
     blocks: ({
         type: string;
         render: (props: RenderElementProps, editor: Editor) => import("react/jsx-runtime").JSX.Element;
-        deserialize: (el: HTMLElement, children: any) => CustomElement | undefined;
+        deserialize: (el: HTMLElement, children: any) => import("../../../types").CustomElement | undefined;
     } | {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{plugins → src/plugins}/HeadingsPlugin/HeadingsPlugin.d.ts

@@ -8,7 +8,7 @@ export declare class HeadingsPlugin implements IPlugin {
     blocks: {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
-        deserialize: (element: HTMLElement, children: any) => import("../..").CustomElement | undefined;
+        deserialize: (element: HTMLElement, children: any) => import("../../../types").CustomElement | undefined;
         serialize: (node: Descendant, children: any) => string | undefined;
     }[];
     static isHeading1Active(editor: Editor): boolean;

package/dist/{plugins → src/plugins}/LinksPlugin/LinksPlugin.d.ts

@@ -14,7 +14,7 @@ export declare class LinksPlugin implements IPlugin {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
         serialize: (element: any, children: any) => string | undefined;
-        deserialize: (element: HTMLElement, children: any) => import("../..").CustomElement | undefined;
+        deserialize: (element: HTMLElement, children: any) => import("../../../types").CustomElement | undefined;
     }[];
     static addLink: (editor: Editor, url: string) => void;
     static removeLink: (editor: Editor) => void;

package/dist/{plugins → src/plugins}/ListsPlugin/ListsPlugin.d.ts

@@ -1,7 +1,6 @@
 import type { KeyboardEvent } from 'react';
 import { Editor } from 'slate';
 import type { RenderElementProps } from 'slate-react';
-import type { CustomElement } from '../../../types';
 import type { IPlugin } from '../../types';
 type Options = {
     listTypes?: string[];
@@ -20,7 +19,7 @@ export declare class ListsPlugin implements IPlugin {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
         serialize: (element: any, children: any) => string | undefined;
-        deserialize: (element: HTMLElement, children: any) => CustomElement | undefined;
+        deserialize: (element: HTMLElement, children: any) => import("../../../types").CustomElement | undefined;
     }[];
     handlers: {
         onKeyDown: (event: KeyboardEvent, editor: Editor) => true | undefined;
@@ -36,7 +35,6 @@ export declare class ListsPlugin implements IPlugin {
     private isListItem;
     static toggleList: (editor: Editor, listType: string, listItemType?: string) => void;
     private getListItemDepth;
-    private getListDepth;
     private getListItem;
 }
 export {};

package/dist/src/plugins/MenuPlugin/MenuPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { IPlugin, UiParams } from '../../types';
+import type { Options } from './types';
+export declare class MenuPlugin implements IPlugin {
+    private options;
+    constructor(options: Options);
+    ui: (params: UiParams) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+}

package/dist/src/types.d.ts

@@ -0,0 +1,60 @@
+import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
+import type { DecoratedRange, Descendant, Editor, Location, NodeEntry, NodeMatch } from 'slate';
+import type { RenderElementProps, RenderLeafProps } from 'slate-react';
+import type { CustomElement, CustomText } from '../types';
+export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement, TLeaf extends CustomText = CustomText> {
+    init?: (editor: TEditor) => TEditor;
+    blocks?: Block<TEditor, TBlock>[];
+    leafs?: Leaf<TEditor, TLeaf>[];
+    hotkeys?: Hotkey[];
+    renderBlock?: (props: RenderElementProps) => ReactElement | null;
+    renderLeaf?: (props: RenderLeafProps) => ReactElement | null;
+    handlers?: {
+        onDrop?: (event: DragEvent, editor: Editor) => void;
+        onDragOver?: (event: DragEvent, editor: Editor) => void;
+        onKeyDown?: (event: KeyboardEvent, editor: Editor) => void;
+        onPaste?: (event: ClipboardEvent, editor: Editor) => void;
+    };
+    decorate?: (entry: NodeEntry) => DecoratedRange[];
+    commands?: {
+        [key: string]: (editor: TEditor, ...args: any[]) => void;
+    };
+    ui?: (params: UiParams) => ReactNode;
+}
+export type Block<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement> = {
+    type: string;
+    render: (props: RenderElementProps & {
+        element: CustomElement & TBlock;
+    }, editor: TEditor) => ReactElement | null;
+    serialize?: Serialize;
+    deserialize?: Deserialize;
+    isVoid?: boolean;
+    isInline?: boolean;
+    onBeforeDelete?: (blocks: TBlock[]) => Promise<boolean>;
+    onDelete?: (blocks: TBlock[]) => void;
+};
+export type Leaf<T extends Editor, TLeaf extends CustomText = CustomText> = {
+    render: (props: RenderLeafProps & {
+        leaf: CustomText & TLeaf;
+    }, editor: T) => ReactElement | null;
+    isVoid?: boolean;
+    serialize?: Serialize;
+    deserialize?: Deserialize;
+};
+type Hotkey = readonly [string, (event: KeyboardEvent, editor: Editor) => void];
+export type UiParams = {
+    editor: Editor;
+    readOnly: boolean;
+    children: ReactNode;
+};
+export type EditorRef = {
+    serialize: (node: CustomElement | CustomText) => string;
+    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;
+};
+export type Serialize = (node: CustomElement | CustomText, children?: string) => string | undefined;
+export type Deserialize = (element: HTMLElement, children?: (string | Descendant)[]) => CustomElement | CustomText[] | undefined;
+export {};

package/dist/types.d.ts

@@ -1,59 +1,7 @@
-import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
-import type { DecoratedRange, Descendant, Editor, NodeEntry, NodeMatch } from 'slate';
-import type { RenderElementProps, RenderLeafProps } from 'slate-react';
-import type { CustomElement, CustomText } from '../types';
-export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement, TLeaf extends CustomText = CustomText> {
-    init?: (editor: TEditor) => TEditor;
-    blocks?: Block<TEditor, TBlock>[];
-    leafs?: Leaf<TEditor, TLeaf>[];
-    hotkeys?: Hotkey[];
-    renderBlock?: (props: RenderElementProps) => ReactElement | null;
-    renderLeaf?: (props: RenderLeafProps) => ReactElement | null;
-    handlers?: {
-        onDrop?: (event: DragEvent, editor: Editor) => void;
-        onDragOver?: (event: DragEvent, editor: Editor) => void;
-        onKeyDown?: (event: KeyboardEvent, editor: Editor) => void;
-        onPaste?: (event: ClipboardEvent, editor: Editor) => void;
-    };
-    decorate?: (entry: NodeEntry) => DecoratedRange[];
-    commands?: {
-        [key: string]: (editor: TEditor, ...args: any[]) => void;
-    };
-    ui?: (params: UiParams) => ReactNode;
-}
-export type Block<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement> = {
-    type: string;
-    render: (props: RenderElementProps & {
-        element: CustomElement & TBlock;
-    }, editor: TEditor) => ReactElement | null;
-    serialize?: Serialize;
-    deserialize?: Deserialize;
-    isVoid?: boolean;
-    isInline?: boolean;
-    onBeforeDelete?: (blocks: TBlock[]) => Promise<boolean>;
-    onDelete?: (blocks: TBlock[]) => void;
-};
-export type Leaf<T extends Editor, TLeaf extends CustomText = CustomText> = {
-    render: (props: RenderLeafProps & {
-        leaf: CustomText & TLeaf;
-    }, editor: T) => ReactElement | null;
-    isVoid?: boolean;
-    serialize?: Serialize;
-    deserialize?: Deserialize;
+export type CustomText = {
+    text: string;
 };
-type Hotkey = readonly [string, (event: KeyboardEvent, editor: Editor) => void];
-export type UiParams = {
-    editor: Editor;
-    readOnly: boolean;
-    children: ReactNode;
-};
-export type EditorRef = {
-    serialize: (node: CustomElement | CustomText) => string;
-    deserialize: (element: HTMLElement) => (Descendant | string)[] | string | Descendant | null;
-    isEmpty: () => boolean;
-    deleteNode: (match: NodeMatch<CustomElement>) => void;
-    focus: (mode?: 'end') => void;
+export type CustomElement = {
+    type: string;
+    children: (CustomElement | CustomText)[];
 };
-export type Serialize = (node: CustomElement | CustomText, children?: string) => string | undefined;
-export type Deserialize = (element: HTMLElement, children?: (string | Descendant)[]) => CustomElement | CustomText[] | undefined;
-export {};

package/dist/utils.js

@@ -2,7 +2,7 @@ import { Text } from "slate";
 const isEmpty = (children)=>{
     const [first] = children || [];
     if (Text.isText(first)) 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;
 };
 export { isEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -11,6 +11,15 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "rslib build && find dist -type f \\( -name '*.spec.*' -o -name '*.test.*' \\) -delete || true",
+    "build:storybook": "storybook build",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "storybook": "NODE_OPTIONS=\"--inspect=9229\" storybook dev",
+    "test": "vitest run"
+  },
   "devDependencies": {
     "@rsbuild/core": "~1.4.0",
     "@rsbuild/plugin-react": "^1.3.2",
@@ -62,14 +71,5 @@
     "is-url": "^1.2.4",
     "nanostores": "^1.0.1",
     "prismjs": "^1.30.0"
-  },
-  "scripts": {
-    "build": "rslib build",
-    "build:storybook": "storybook build",
-    "check": "biome check --write",
-    "dev": "rslib build --watch",
-    "format": "biome format --write",
-    "storybook": "storybook dev",
-    "test": "vitest run"
   }
-}
+}

package/src/editor.tsx

@@ -29,9 +29,25 @@ export const KonaEditor = forwardRef<EditorRef, KonaEditorProps>(
         Transforms.removeNodes(editor, { at: [], match });
       };
 
+      const insertNodes: EditorRef['insertNodes'] = (nodes, at) => {
+        if (!editor || !Array.isArray(nodes) || !nodes.length) {
+          return false;
+        }
+
+        const target = at ?? editor.selection ?? [editor.children.length];
+
+        try {
+          Transforms.insertNodes(editor, nodes, { at: target });
+          return true;
+        } catch {
+          return false;
+        }
+      };
+
       return {
         serialize: serialize(plugins),
         deserialize: deserialize(plugins),
+        insertNodes,
         deleteNode,
         isEmpty: () => {
           return isEmpty(editor.children);