@use-kona/editor 0.1.24 → 0.1.25

package/dist/core/createEditable.js

@@ -1,9 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
 import is_hotkey from "is-hotkey";
-import react, { isValidElement, useCallback } from "react";
-import { Transforms } from "slate";
-import { Editable, useReadOnly } from "slate-react";
+import { atom } from "nanostores";
+import react, { isValidElement, useCallback, useState } from "react";
+import { Editor, Element, Path, Transforms } from "slate";
+import { Editable, ReactEditor, useReadOnly } from "slate-react";
 import { BaseElement } from "../elements/BaseElement.js";
+import { Block } from "../elements/Block.js";
+import { EditorProvider } from "../provider.js";
 import { deserialize } from "./deserialize.js";
 import styles_module from "./styles.module.js";
 const SUPPORTED_HANDLERS = [
@@ -13,6 +17,8 @@ const SUPPORTED_HANDLERS = [
     'onPaste'
 ];
 const createEditable = (editor, plugins)=>({ readOnly })=>{
+        const [selectedNodes] = useState(()=>atom([]));
+        const $selectedNodes = useStore(selectedNodes);
         const renderElement = (props)=>{
             let result = null;
             for (const plugin of plugins)for (const element of plugin.blocks || []){
@@ -24,13 +30,20 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                 ...props,
                 children: result || props.children
             });
-            return result || /*#__PURE__*/ jsx(BaseElement, {
+            if (Editor.isInline(editor, props.element)) return result || /*#__PURE__*/ jsx(BaseElement, {
                 ...props
             });
+            return /*#__PURE__*/ jsx(Block, {
+                element: props.element,
+                attributes: props.attributes,
+                children: result || /*#__PURE__*/ jsx(BaseElement, {
+                    ...props
+                })
+            });
         };
         const renderLeaf = (props)=>{
             let result;
-            for (const plugin of plugins)plugin.leafs?.map((element)=>{
+            for (const plugin of plugins)plugin.leafs?.forEach((element)=>{
                 const newElement = element.render({
                     ...props,
                     children: result || props.children
@@ -41,6 +54,121 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
         };
         const handleHotkey = (event)=>{
             if ('Tab' === event.key) event.preventDefault();
+            if ('Escape' === event.key) {
+                const currentBlock = Editor.above(editor, {
+                    at: editor.selection?.focus,
+                    match: (n)=>Element.isElement(n) && Editor.isBlock(editor, n)
+                });
+                if (!currentBlock) return;
+                if (0 === $selectedNodes.length) selectedNodes.set([
+                    currentBlock[0]
+                ]);
+                else {
+                    selectedNodes.set([]);
+                    ReactEditor.blur(editor);
+                }
+            } else if ('ArrowDown' === event.key) {
+                const currentBlock = Editor.above(editor, {
+                    at: editor.selection?.focus,
+                    match: (n)=>Element.isElement(n)
+                });
+                if (!currentBlock) return;
+                const nextBlock = Editor.next(editor, {
+                    at: currentBlock[1],
+                    match: (n)=>Element.isElement(n),
+                    voids: true
+                });
+                if (nextBlock) {
+                    if (Editor.isVoid(editor, nextBlock[0])) {
+                        event.preventDefault();
+                        selectedNodes.set([
+                            nextBlock[0]
+                        ]);
+                    } else selectedNodes.set([]);
+                    if (Editor.isVoid(editor, currentBlock[0]) || Editor.isVoid(editor, nextBlock[0])) {
+                        event.preventDefault();
+                        Transforms.select(editor, nextBlock[1]);
+                        Transforms.collapse(editor, {
+                            edge: 'start'
+                        });
+                    }
+                }
+            } else if ('ArrowUp' === event.key) {
+                const currentBlock = Editor.above(editor, {
+                    at: editor.selection?.focus,
+                    match: (n)=>Element.isElement(n)
+                });
+                if (!currentBlock) return;
+                const prevBlock = Editor.previous(editor, {
+                    at: currentBlock[1],
+                    match: (n)=>Element.isElement(n),
+                    voids: true
+                });
+                if (prevBlock) {
+                    if (Editor.isVoid(editor, prevBlock[0])) {
+                        event.preventDefault();
+                        selectedNodes.set([
+                            prevBlock[0]
+                        ]);
+                    } else selectedNodes.set([]);
+                    if (Editor.isVoid(editor, currentBlock[0]) || Editor.isVoid(editor, prevBlock[0])) {
+                        event.preventDefault();
+                        Transforms.select(editor, prevBlock[1]);
+                        Transforms.collapse(editor, {
+                            edge: 'end'
+                        });
+                    }
+                }
+            } else if ('Backspace' === event.key) {
+                const currentBlock = Editor.above(editor, {
+                    at: editor.selection?.focus,
+                    match: (n)=>Element.isElement(n) && Editor.isBlock(editor, n)
+                });
+                if (!currentBlock) return;
+                if (editor.selection?.focus.offset !== 0) return;
+                const prevBlock = Editor.previous(editor, {
+                    at: currentBlock[1],
+                    match: (n)=>Element.isElement(n),
+                    voids: true
+                });
+                if (prevBlock && Editor.isVoid(editor, prevBlock[0])) {
+                    event.preventDefault();
+                    Transforms.removeNodes(editor, {
+                        at: currentBlock[1]
+                    });
+                    Transforms.select(editor, prevBlock[1]);
+                    selectedNodes.set([
+                        prevBlock[0]
+                    ]);
+                    Transforms.collapse(editor, {
+                        edge: 'start'
+                    });
+                }
+            } else if ('Enter' === event.key) {
+                const currentBlock = Editor.above(editor, {
+                    at: editor.selection?.focus,
+                    match: (n)=>Element.isElement(n)
+                });
+                if (!currentBlock) return;
+                if (Editor.isVoid(editor, currentBlock[0])) {
+                    event.preventDefault();
+                    Transforms.insertNodes(editor, {
+                        type: 'paragraph',
+                        children: [
+                            {
+                                text: ''
+                            }
+                        ]
+                    }, {
+                        at: Path.next(currentBlock[1])
+                    });
+                    selectedNodes.set([]);
+                    Transforms.select(editor, Path.next(currentBlock[1]));
+                    Transforms.collapse(editor, {
+                        edge: 'start'
+                    });
+                }
+            }
             for (const plugin of plugins)if (plugin.hotkeys) {
                 for (const hotkey of plugin.hotkeys)if (is_hotkey(hotkey[0], event) && hotkey[1]) {
                     event.preventDefault();
@@ -95,7 +223,7 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                 },
                 children: [
                     ui.map((p, index)=>/*#__PURE__*/ jsx(react.Fragment, {
-                            children: p.ui({
+                            children: p.ui?.({
                                 readOnly,
                                 children,
                                 editor
@@ -111,15 +239,18 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
             editor,
             plugins.filter
         ]);
-        return /*#__PURE__*/ jsx("div", {
-            className: styles_module.root,
-            children: /*#__PURE__*/ jsx(Ui, {
-                children: /*#__PURE__*/ jsx(Editable, {
-                    decorate: decorate,
-                    renderElement: renderElement,
-                    renderLeaf: renderLeaf,
-                    readOnly: readOnly,
-                    ...handlers
+        return /*#__PURE__*/ jsx(EditorProvider, {
+            selectedNodes: selectedNodes,
+            children: /*#__PURE__*/ jsx("div", {
+                className: styles_module.root,
+                children: /*#__PURE__*/ jsx(Ui, {
+                    children: /*#__PURE__*/ jsx(Editable, {
+                        decorate: decorate,
+                        renderElement: renderElement,
+                        renderLeaf: renderLeaf,
+                        readOnly: readOnly,
+                        ...handlers
+                    })
                 })
             })
         });

package/dist/core/createEditor.js

@@ -136,7 +136,7 @@ const createEditor_createEditor = (plugins)=>()=>{
                         const hasOnBeforeDelete = match?.onBeforeDelete;
                         if (!hasOnBeforeDelete) return void deleteFragment(options);
                         {
-                            const result = await match.onBeforeDelete([
+                            const result = await match.onBeforeDelete?.([
                                 node
                             ]);
                             if (!result) return;

package/dist/core/styles.module.js

@@ -2,6 +2,8 @@ import "./styles_module.css";
 const styles_module = {
     root: "root-e1gdll",
     ui: "ui-I68yAA",
-    editor: "editor-K2itFp"
+    editor: "editor-K2itFp",
+    block: "block-sBBbL1",
+    selected: "selected-dNsAIz"
 };
 export { styles_module as default };

package/dist/core/styles_module.css

@@ -33,3 +33,16 @@
   }
 }
 
+.block-sBBbL1 {
+  transition: background-color .2s ease-in-out;
+
+  &.selected-dNsAIz {
+    background-color: var(--kona-editor-selected-color);
+
+    & > * {
+      transition: transform .2s ease-in-out;
+      transform: scale(.98);
+    }
+  }
+}
+

package/dist/elements/Block.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { Editor } from "slate";
+import { useSlateStatic } from "slate-react";
+import styles_module from "../core/styles.module.js";
+import { useEditorContext } from "../provider.js";
+const Block = (props)=>{
+    const editor = useSlateStatic();
+    const { selectedNodes } = useEditorContext();
+    const $selectedNodes = useStore(selectedNodes);
+    const isSelected = $selectedNodes.some((node)=>node === props.element);
+    const classes = isSelected ? `${styles_module.block} ${styles_module.selected}` : styles_module.block;
+    const handleClick = ()=>{
+        if (Editor.isVoid(editor, props.element)) selectedNodes.set([
+            props.element
+        ]);
+        else selectedNodes.set([]);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: classes,
+        onClick: handleClick,
+        children: props.children
+    });
+};
+export { Block };

package/dist/index.js

@@ -1,7 +1,8 @@
 import { deserialize } from "./core/deserialize.js";
 import { serialize } from "./core/serialize.js";
 import { defaultValue } from "./defaultValue.js";
+import { useEditorContext } from "./provider.js";
 import { isEmpty } from "./utils.js";
 export * from "./editor.js";
 export * from "./plugins/index.js";
-export { defaultValue, deserialize, isEmpty, serialize };
+export { defaultValue, deserialize, isEmpty, serialize, useEditorContext };

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.js

@@ -78,7 +78,7 @@ class CodeBlockPlugin {
             if ('a' === event.key && (event.ctrlKey || event.metaKey) && node && node.type === CodeBlockPlugin.CODE_ELEMENT) {
                 event.preventDefault();
                 const entry = Editor.above(editor, {
-                    match: (n)=>!Editor.isEditor(n) && Element.isElement(n) && n.type === CodeBlockPlugin.CODE_ELEMENT
+                    match: (n)=>Element.isElement(n) && n.type === CodeBlockPlugin.CODE_ELEMENT
                 });
                 if (entry) {
                     const [, codeBlockPath] = entry;

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -1,38 +1,20 @@
+import { jsx } from "react/jsx-runtime";
 import { useStore } from "@nanostores/react";
-import { nanoid } from "nanoid";
-import { map } from "nanostores";
 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, Element, Path, Transforms } from "slate";
 import { ReactEditor, useReadOnly, useSlate } from "slate-react";
+import { useEditorContext } from "../../provider.js";
 import { getNodesByNodeIds } from "./utils.js";
 class DnDPlugin {
     options;
-    store;
-    editors;
     constructor(options){
         this.options = options;
-        this.store = map({
-            selected: new Set()
-        });
-        this.editors = new WeakMap();
     }
     init(editor) {
-        this.editors.set(editor, nanoid());
         return editor;
     }
-    getEditorId(editor) {
-        return this.editors.get(editor);
-    }
-    handleToggleSelected = (nodeId)=>{
-        const selected = new Set(this.store.get().selected);
-        if (selected.has(nodeId)) selected.delete(nodeId);
-        else selected.add(nodeId);
-        this.store.set({
-            selected
-        });
-    };
     static DND_BLOCK_ELEMENT = 'block';
     handlers = {
         onDrop: (event)=>{
@@ -41,29 +23,35 @@ class DnDPlugin {
     };
     renderBlock = (props)=>{
         const editor = useSlate();
-        const $store = useStore(this.store);
+        const { selectedNodes } = useEditorContext();
+        const $selectedNodes = useStore(selectedNodes);
+        const isCopying = useRef(false);
         const options = this.options;
+        const generateId = this.options?.nodeIdPlugin?.generateId;
         const isReadOnly = useReadOnly();
         const [dropPosition, setDropPosition] = useState(null);
         const dropTargetRef = useRef(null);
-        options.customTypes?.[props.element.type];
+        const customType = options.customTypes?.[props.element.type];
         const currentElement = props.element;
         const [, drag, preview] = useDrag({
-            type: DnDPlugin.DND_BLOCK_ELEMENT,
+            type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
             item: ()=>{
-                const selected = Array.from($store.selected.values());
-                const nodes = selected.length > 0 && selected.includes(currentElement.nodeId) ? getNodesByNodeIds(editor, selected) : [
+                const selected = $selectedNodes;
+                const nodes = selected.length > 0 && selected.find((node)=>node.nodeId === currentElement.nodeId) ? getNodesByNodeIds(editor, selected.map((node)=>node.nodeId)) : [
                     structuredClone(props.element)
                 ];
+                const item = this.options.customTypes?.[currentElement.type]?.getData?.(currentElement);
                 const items = nodes.map((node)=>{
                     if (this.options.customTypes?.[node.type]) return this.options.customTypes[node.type].getData?.(node);
                     return null;
                 }).filter(Boolean);
                 const dragItem = {
+                    kind: 'inner',
                     nodes,
+                    item,
                     items,
                     source: {
-                        editorId: this.getEditorId(editor),
+                        editor,
                         documentId: options.documentId
                     }
                 };
@@ -71,7 +59,7 @@ class DnDPlugin {
             },
             canDrag: !isReadOnly,
             end: ()=>{
-                $store.selected.clear();
+                selectedNodes.set([]);
             }
         });
         const allCustomTypes = Object.values(options.customTypes || {}).map((customType)=>customType.type);
@@ -98,32 +86,47 @@ class DnDPlugin {
                 const hoverClientY = clientOffset.y - hoverBoundingRect.top;
                 hoverClientY < hoverMiddleY ? setDropPosition('top') : setDropPosition('bottom');
             },
-            drop (item, monitor) {
+            drop: (data, monitor)=>{
                 const itemType = monitor.getItemType();
+                const sourceEditor = 'inner' === data.kind ? data.source?.editor : null;
+                const isSameDocument = 'inner' === data.kind && data.source?.documentId === this.options.documentId && void 0 !== this.options.documentId;
+                const isSameEditor = 'inner' === data.kind && data.source?.editor === editor;
                 const sourceTo = ReactEditor.findPath(editor, props.element);
                 if (!sourceTo) return;
                 const insertAt = getDropPath(editor, sourceTo, dropPosition || 'bottom');
                 if (!insertAt) return;
                 const customDropHandler = itemType && options.customDropHandlers?.[itemType];
-                if (customDropHandler) return void customDropHandler.onDrop({
+                if (customDropHandler && 'outer' === data.kind) return void customDropHandler.onDrop({
                     editor,
-                    item,
+                    data,
                     insertAt
                 });
                 switch(itemType){
                     case NativeTypes.FILE:
-                        options.onDropFiles(editor, item.files, insertAt);
+                        options.onDropFiles(editor, data.files, insertAt);
                         break;
                     default:
                         {
-                            const dragItem = item;
+                            const dragItem = data;
+                            if ('outer' === dragItem.kind) return;
                             if (!dropPosition || !dragItem.nodes.length) return;
                             const nodeIds = dragItem.nodes.map((node)=>node.nodeId);
-                            moveNode(editor, sourceTo, nodeIds, dropPosition);
-                            $store.selected.clear();
+                            if (isSameDocument || isSameEditor) if (isCopying.current) {
+                                if (!generateId) return;
+                                const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
+                                insertNodes(editor, insertAt, clonedNodes);
+                            } else moveNode(editor, sourceTo, nodeIds, dropPosition);
+                            else {
+                                if (!generateId) return;
+                                const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
+                                insertNodes(editor, insertAt, clonedNodes);
+                                if (!isCopying.current && sourceEditor) removeNodes(sourceEditor, nodeIds);
+                            }
+                            selectedNodes.set([]);
                             break;
                         }
                 }
+                isCopying.current = false;
                 setDropPosition(null);
             }
         });
@@ -138,16 +141,27 @@ class DnDPlugin {
         ]);
         if (this.options.ignoreNodes?.includes(props.element.type)) return props.children;
         if (editor.isInline(props.element)) return props.children;
-        return options.renderBlock?.({
-            props,
-            dragRef: drag,
-            dropRef: connectDropRef,
-            previewRef: preview,
-            position: dropPosition,
-            selected: 'string' == typeof currentElement.nodeId ? $store.selected.has(currentElement.nodeId) : false,
-            onToggleSelected: ()=>{
-                if ('string' == typeof currentElement.nodeId) this.handleToggleSelected(currentElement.nodeId);
-            }
+        return /*#__PURE__*/ jsx("div", {
+            children: options.renderBlock?.({
+                props,
+                dragRef: drag,
+                dropRef: connectDropRef,
+                previewRef: preview,
+                position: dropPosition,
+                onNativeDrop: (event)=>{
+                    isCopying.current = event.altKey;
+                },
+                onToggleSelected: (event)=>{
+                    event.stopPropagation();
+                    if ($selectedNodes.includes(props.element)) selectedNodes.set([
+                        ...$selectedNodes
+                    ].filter((element)=>element !== props.element));
+                    else selectedNodes.set([
+                        ...$selectedNodes,
+                        props.element
+                    ]);
+                }
+            })
         });
     };
 }
@@ -180,4 +194,38 @@ const moveNode = (editor, targetNodePath, nodeIds, position)=>{
     });
     Editor.normalize(editor);
 };
+const insertNodes = (editor, path, nodes)=>{
+    Editor.withoutNormalizing(editor, ()=>{
+        Transforms.insertNodes(editor, nodes, {
+            at: path
+        });
+    });
+};
+const removeNodes = (editor, nodeIds)=>{
+    try {
+        Transforms.removeNodes(editor, {
+            at: [],
+            match: (n)=>{
+                if (!Element.isElement(n)) return false;
+                if (!Editor.isBlock(editor, n)) return false;
+                const node = n;
+                return 'string' == typeof node.nodeId && nodeIds.includes(node.nodeId);
+            },
+            mode: 'highest'
+        });
+    } catch  {
+        return;
+    }
+};
+const cloneWithNewIds = (nodes, generateId)=>{
+    const copy = structuredClone(nodes);
+    const assignId = (node)=>{
+        node.nodeId = generateId();
+        node.children.forEach((node)=>{
+            if ('children' in node) assignId(node);
+        });
+    };
+    copy.forEach(assignId);
+    return copy;
+};
 export { DnDPlugin };

package/dist/plugins/DnDPlugin/types.js

@@ -0,0 +1,2 @@
+const isNodeWithId = (node)=>'object' == typeof node && null !== node && 'nodeId' in node;
+export { isNodeWithId };

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.js

@@ -85,7 +85,7 @@ const isBlockActive = (editor, type)=>{
     if (!selection) return false;
     const [match] = Array.from(Editor.nodes(editor, {
         at: Editor.unhangRange(editor, selection),
-        match: (node)=>!Editor.isEditor(node) && Element.isElement(node) && node.type === type
+        match: (node)=>Element.isElement(node) && node.type === type
     }));
     return !!match;
 };

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -195,7 +195,7 @@ class ListsPlugin {
         if (!selection) return false;
         const [match] = Array.from(Editor.nodes(editor, {
             at: Editor.unhangRange(editor, selection),
-            match: (node)=>!Editor.isEditor(node) && Element.isElement(node) && node.type === type
+            match: (node)=>Element.isElement(node) && node.type === type
         }));
         return !!match;
     };

package/dist/plugins/NodeIdPlugin/NodeIdPlugin.js

@@ -10,8 +10,10 @@ const assignId = (node, generateId)=>{
 };
 class NodeIdPlugin {
     options;
+    generateId;
     constructor(options){
         this.options = options;
+        this.generateId = options.generateId;
     }
     init(editor) {
         const { apply, normalizeNode } = editor;
@@ -20,22 +22,22 @@ class NodeIdPlugin {
                 const node = Node.get(editor, operation.path);
                 const oldType = operation.properties.type;
                 const newType = operation.newProperties.type;
-                if (!node || !Text.isText(node) && oldType !== newType) operation.newProperties.nodeId = this.options.generateId();
+                if (!node || !Text.isText(node) && oldType !== newType) operation.newProperties.nodeId = this.generateId();
                 return apply(operation);
             }
             if ('insert_node' === operation.type) {
-                assignId(operation.node, this.options.generateId);
+                assignId(operation.node, this.generateId);
                 return apply(operation);
             }
             if ('split_node' === operation.type) {
                 const node = Node.get(editor, operation.path);
-                if (!node || !Text.isText(node)) operation.properties.nodeId = this.options.generateId();
+                if (!node || !Text.isText(node)) operation.properties.nodeId = this.generateId();
             }
             return apply(operation);
         };
         editor.normalizeNode = (entry)=>{
             const [node] = entry;
-            assignId(node, this.options.generateId);
+            assignId(node, this.generateId);
             normalizeNode(entry);
         };
         return editor;

package/dist/provider.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const Context = /*#__PURE__*/ createContext(null);
+const EditorProvider = ({ children, selectedNodes })=>/*#__PURE__*/ jsx(Context.Provider, {
+        value: {
+            selectedNodes
+        },
+        children: children
+    });
+const useEditorContext = ()=>{
+    const context = useContext(Context);
+    if (!context) throw new Error('useEditorContext must be used within an EditorProvider');
+    return context;
+};
+export { EditorProvider, useEditorContext };

package/dist/src/core/createEditable.d.ts

@@ -1,4 +1,4 @@
-import { type Editor } from 'slate';
+import { Editor } from 'slate';
 import type { IPlugin } from '../types';
 type Props = {
     readOnly?: boolean;

package/dist/src/elements/Block.d.ts

@@ -0,0 +1,2 @@
+import { type RenderElementProps } from 'slate-react';
+export declare const Block: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -4,5 +4,6 @@ export { serialize } from './core/serialize';
 export { defaultValue } from './defaultValue';
 export * from './editor';
 export * from './plugins';
+export { useEditorContext } from './provider';
 export type { EditorRef, IPlugin } from './types';
 export { isEmpty } from './utils';

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

@@ -1,20 +1,13 @@
-import { type MapStore } from 'nanostores';
 import { Editor } from 'slate';
 import { ReactEditor, type RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
 import type { Options } from './types';
 export declare class DnDPlugin implements IPlugin {
     private options;
-    store: MapStore<{
-        selected: Set<string>;
-    }>;
-    editors: WeakMap<Editor, string>;
     constructor(options: Options);
     init(editor: Editor): import("slate").BaseEditor & ReactEditor & {
         getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
     };
-    getEditorId(editor: Editor): string | undefined;
-    handleToggleSelected: (nodeId: string) => void;
     static DND_BLOCK_ELEMENT: string;
     handlers: {
         onDrop: (event: DragEvent) => void;