@use-kona/editor 0.1.24-dnd.7 → 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, 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,7 +23,8 @@ 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;
@@ -53,8 +36,8 @@ class DnDPlugin {
         const [, drag, preview] = useDrag({
             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);
@@ -69,7 +52,6 @@ class DnDPlugin {
                     items,
                     source: {
                         editor,
-                        editorId: this.getEditorId(editor),
                         documentId: options.documentId
                     }
                 };
@@ -77,7 +59,7 @@ class DnDPlugin {
             },
             canDrag: !isReadOnly,
             end: ()=>{
-                $store.selected.clear();
+                selectedNodes.set([]);
             }
         });
         const allCustomTypes = Object.values(options.customTypes || {}).map((customType)=>customType.type);
@@ -108,7 +90,7 @@ class DnDPlugin {
                 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?.editorId === this.editors.get(editor) && void 0 !== this.editors.get(editor);
+                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');
@@ -140,7 +122,7 @@ class DnDPlugin {
                                 insertNodes(editor, insertAt, clonedNodes);
                                 if (!isCopying.current && sourceEditor) removeNodes(sourceEditor, nodeIds);
                             }
-                            $store.selected.clear();
+                            selectedNodes.set([]);
                             break;
                         }
                 }
@@ -159,19 +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);
-            },
-            onNativeDrop: (event)=>{
-                isCopying.current = event.altKey;
-            }
+        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
+                    ]);
+                }
+            })
         });
     };
 }

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/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';
+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;

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

@@ -23,9 +23,8 @@ export type Options = {
         dropRef: ConnectDropTarget;
         previewRef: ConnectDragPreview;
         position: 'top' | 'bottom' | null;
-        selected?: boolean;
-        onToggleSelected: () => void;
         onNativeDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onToggleSelected?: (event: React.MouseEvent<HTMLDivElement>) => void;
     }) => React.ReactNode;
     ignoreNodes?: string[];
     customTypes?: {

package/dist/src/provider.d.ts

@@ -0,0 +1,8 @@
+import type { StoreValue } from 'nanostores';
+import type React from 'react';
+import type { EditorContext } from './types';
+export declare const EditorProvider: ({ children, selectedNodes, }: {
+    children: React.ReactNode;
+    selectedNodes: StoreValue<string[]>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useEditorContext: () => EditorContext;

package/dist/src/types.d.ts

@@ -1,3 +1,4 @@
+import type { StoreValue } from 'nanostores';
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
 import type { DecoratedRange, Descendant, Editor, Location, NodeEntry, NodeMatch } from 'slate';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
@@ -57,4 +58,7 @@ export type EditorRef = {
 };
 export type Serialize = (node: CustomElement | CustomText, children?: string) => string | undefined;
 export type Deserialize = (element: HTMLElement, children?: (string | Descendant)[]) => CustomElement | CustomText[] | undefined;
+export type EditorContext = {
+    selectedNodes: StoreValue<string[]>;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.24-dnd.7",
+  "version": "0.1.25",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -43,10 +43,11 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18",
-    "slate": "^0.117.2",
+    "slate": "^0.126.0",
+    "slate-dom": "^0.126.0",
     "slate-history": "^0.113.1",
-    "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.117.3",
+    "slate-hyperscript": "^0.125.0",
+    "slate-react": "^0.126.0",
     "storybook": "^9.0.13",
     "storybook-addon-rslib": "^2.0.2",
     "storybook-react-rsbuild": "^2.0.2",
@@ -58,10 +59,11 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18",
-    "slate": "^0.117.2",
+    "slate": "^0.126.0",
+    "slate-dom": "^0.126.0",
     "slate-history": "^0.113.1",
-    "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.117.3"
+    "slate-hyperscript": "^0.125.0",
+    "slate-react": "^0.126.0"
   },
   "dependencies": {
     "@nanostores/react": "^1.0.0",
@@ -69,7 +71,6 @@
     "escape-html": "^1.0.3",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
-    "nanoid": "^5.1.16",
     "nanostores": "^1.0.1",
     "prismjs": "^1.30.0"
   }

package/src/core/createEditable.tsx

@@ -1,4 +1,6 @@
+import { useStore } from '@nanostores/react';
 import isHotkey from 'is-hotkey';
+import { atom } from 'nanostores';
 import React, {
   type ClipboardEvent,
   isValidElement,
@@ -7,21 +9,28 @@ import React, {
   type ReactElement,
   type ReactNode,
   useCallback,
+  useState,
 } from 'react';
 import {
   type DecoratedRange,
   type Descendant,
-  type Editor,
+  Editor,
+  Element,
   type NodeEntry,
+  Path,
   Transforms,
 } from 'slate';
 import {
   Editable,
+  ReactEditor,
   type RenderElementProps,
   type RenderLeafProps,
   useReadOnly,
 } from 'slate-react';
+import type { CustomElement } from '../../types';
 import { BaseElement } from '../elements/BaseElement';
+import { Block } from '../elements/Block';
+import { EditorProvider } from '../provider';
 import type { IPlugin } from '../types';
 import { deserialize } from './deserialize';
 import styles from './styles.module.css';
@@ -35,6 +44,10 @@ type Props = {
 export const createEditable =
   (editor: Editor, plugins: IPlugin[]) =>
   ({ readOnly }: Props) => {
+    const [selectedNodes] = useState(() => atom<CustomElement[]>([]));
+
+    const $selectedNodes = useStore(selectedNodes);
+
     const renderElement = (props: RenderElementProps): ReactElement => {
       let result: ReactElement | null = null;
 
@@ -56,13 +69,21 @@ export const createEditable =
         }
       }
 
-      return result || <BaseElement {...props} />;
+      if (Editor.isInline(editor, props.element)) {
+        return result || <BaseElement {...props} />;
+      }
+
+      return (
+        <Block element={props.element} attributes={props.attributes}>
+          {result || <BaseElement {...props} />}
+        </Block>
+      );
     };
 
     const renderLeaf = (props: RenderLeafProps): JSX.Element => {
       let result: ReactNode;
       for (const plugin of plugins) {
-        plugin.leafs?.map((element) => {
+        plugin.leafs?.forEach((element) => {
           const newElement = element.render(
             {
               ...props,
@@ -84,6 +105,132 @@ export const createEditable =
         event.preventDefault();
       }
 
+      if (event.key === 'Escape') {
+        const currentBlock = Editor.above<CustomElement>(editor, {
+          at: editor.selection?.focus,
+          match: (n) => Element.isElement(n) && Editor.isBlock(editor, n),
+        });
+
+        if (!currentBlock) {
+          return;
+        }
+
+        if ($selectedNodes.length === 0) {
+          selectedNodes.set([currentBlock[0]]);
+        } else {
+          selectedNodes.set([]);
+          ReactEditor.blur(editor);
+        }
+      } else if (event.key === 'ArrowDown') {
+        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 (event.key === 'ArrowUp') {
+        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 (event.key === 'Backspace') {
+        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 (event.key === 'Enter') {
+        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) {
@@ -154,12 +301,15 @@ export const createEditable =
         }
 
         return (
-          <div className={styles.ui} onClick={(event) => {
-            event.stopPropagation();
-          }}>
+          <div
+            className={styles.ui}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
             {ui.map((p, index) => (
               <React.Fragment key={index}>
-                {p.ui!({ readOnly, children, editor })}
+                {p.ui?.({ readOnly, children, editor })}
               </React.Fragment>
             ))}
             <div className={styles.editor}>{children}</div>
@@ -170,16 +320,18 @@ export const createEditable =
     );
 
     return (
-      <div className={styles.root}>
-        <Ui>
-          <Editable
-            decorate={decorate}
-            renderElement={renderElement}
-            renderLeaf={renderLeaf}
-            readOnly={readOnly}
-            {...handlers}
-          />
-        </Ui>
-      </div>
+      <EditorProvider selectedNodes={selectedNodes}>
+        <div className={styles.root}>
+          <Ui>
+            <Editable
+              decorate={decorate}
+              renderElement={renderElement}
+              renderLeaf={renderLeaf}
+              readOnly={readOnly}
+              {...handlers}
+            />
+          </Ui>
+        </div>
+      </EditorProvider>
     );
   };

package/src/core/createEditor.ts

@@ -219,7 +219,7 @@ export const createEditor = (plugins: IPlugin[]) => () => {
           const hasOnBeforeDelete = match?.onBeforeDelete;
 
           if (hasOnBeforeDelete) {
-            const result = await match.onBeforeDelete!([node]);
+            const result = await match.onBeforeDelete?.([node]);
 
             if (result) {
               Transforms.removeNodes(editorWithPlugins, {

package/src/core/styles.module.css

@@ -32,3 +32,15 @@
     outline: none;
   }
 }
+
+.block {
+  transition: background-color 0.2s ease-in-out;
+
+  &.selected {
+    background-color: var(--kona-editor-selected-color);
+    & > * {
+      transition: transform 0.2s ease-in-out;
+      transform: scale(0.98);
+    }
+  }
+}

package/src/editor.tsx

@@ -1,5 +1,6 @@
+import { atom } from 'nanostores';
 import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
-import {type Descendant, Editor, type NodeMatch, Transforms} from 'slate';
+import { type Descendant, Editor, type NodeMatch, Transforms } from 'slate';
 import { ReactEditor, Slate } from 'slate-react';
 import type { CustomElement } from '../types';
 import { createEditable } from './core/createEditable';
@@ -54,8 +55,8 @@ export const KonaEditor = forwardRef<EditorRef, KonaEditorProps>(
         },
         focus: (mode?: 'end') => {
           if (mode === 'end') {
-            const endPoint = Editor.end(editor, [])
-            Transforms.select(editor, endPoint)
+            const endPoint = Editor.end(editor, []);
+            Transforms.select(editor, endPoint);
           }
 
           ReactEditor.focus(editor);

package/src/elements/Block.tsx

@@ -0,0 +1,31 @@
+import { useStore } from '@nanostores/react';
+import { Editor } from 'slate';
+import { type RenderElementProps, useSlateStatic } from 'slate-react';
+import styles from '../core/styles.module.css';
+import { useEditorContext } from '../provider';
+
+export const Block = (props: RenderElementProps) => {
+  const editor = useSlateStatic();
+  const { selectedNodes } = useEditorContext();
+  const $selectedNodes = useStore(selectedNodes);
+
+  const isSelected = $selectedNodes.some((node) => node === props.element);
+
+  const classes = isSelected
+    ? `${styles.block} ${styles.selected}`
+    : styles.block;
+
+  const handleClick = () => {
+    if (Editor.isVoid(editor, props.element)) {
+      selectedNodes.set([props.element]);
+    } else {
+      selectedNodes.set([]);
+    }
+  };
+
+  return (
+    <div className={classes} onClick={handleClick}>
+      {props.children}
+    </div>
+  );
+};

package/src/index.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/src/plugins/CodeBlockPlugin/CodeBlockPlugin.tsx

@@ -117,9 +117,7 @@ export class CodeBlockPlugin implements IPlugin {
         // Find the code block node and its path
         const entry = Editor.above(editor, {
           match: (n) =>
-            !Editor.isEditor(n) &&
-            Element.isElement(n) &&
-            n.type === CodeBlockPlugin.CODE_ELEMENT,
+            Element.isElement(n) && n.type === CodeBlockPlugin.CODE_ELEMENT,
         });
 
         if (entry) {

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -1,6 +1,4 @@
 import { useStore } from '@nanostores/react';
-import { nanoid } from 'nanoid';
-import { type MapStore, map } from 'nanostores';
 import { useEffect, useRef, useState } from 'react';
 import { type ConnectDropTarget, useDrag, useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
@@ -12,49 +10,18 @@ import {
   useSlate,
 } from 'slate-react';
 import type { CustomElement } from '../../../types';
+import { useEditorContext } from '../../provider';
 import type { IPlugin } from '../../types';
-import {
-  type EditorDragItem,
-  isNodeWithId,
-  type NodeWithId,
-  type Options,
-} from './types';
+import type { EditorDragItem, NodeWithId, Options } from './types';
 import { getNodesByNodeIds } from './utils';
 
 export class DnDPlugin implements IPlugin {
-  store: MapStore<{ selected: Set<string> }>;
-  editors: WeakMap<Editor, string>;
-
-  constructor(private options: Options) {
-    this.store = map({
-      selected: new Set(),
-    });
-    this.editors = new WeakMap();
-  }
+  constructor(private options: Options) {}
 
   init(editor: Editor) {
-    this.editors.set(editor, nanoid());
-
     return editor;
   }
 
-  getEditorId(editor: Editor) {
-    return this.editors.get(editor);
-  }
-
-  handleToggleSelected = (nodeId: string) => {
-    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 = {
@@ -66,7 +33,8 @@ export class DnDPlugin implements IPlugin {
   renderBlock = (props: RenderElementProps) => {
     const editor = useSlate();
 
-    const $store = useStore(this.store);
+    const { selectedNodes } = useEditorContext();
+    const $selectedNodes = useStore(selectedNodes);
 
     const isCopying = useRef(false);
     const options = this.options;
@@ -85,7 +53,7 @@ export class DnDPlugin implements IPlugin {
     const [, drag, preview] = useDrag({
       type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
       item: () => {
-        const selected = Array.from($store.selected.values());
+        const selected: Array<NodeWithId> = $selectedNodes;
 
         /**
          * We copy nodes that the user is dragging.
@@ -93,8 +61,12 @@ export class DnDPlugin implements IPlugin {
          * we copy selected nodes. Otherwise, we copy only the current node.
          */
         const nodes =
-          selected.length > 0 && selected.includes(currentElement.nodeId)
-            ? getNodesByNodeIds(editor, selected)
+          selected.length > 0 &&
+          selected.find((node) => node.nodeId === currentElement.nodeId)
+            ? getNodesByNodeIds(
+                editor,
+                selected.map((node) => node.nodeId),
+              )
             : [structuredClone(props.element as NodeWithId)];
 
         const item =
@@ -118,7 +90,6 @@ export class DnDPlugin implements IPlugin {
           items,
           source: {
             editor,
-            editorId: this.getEditorId(editor),
             documentId: options.documentId,
           },
         };
@@ -127,7 +98,7 @@ export class DnDPlugin implements IPlugin {
       },
       canDrag: !isReadOnly,
       end: () => {
-        $store.selected.clear();
+        selectedNodes.set([]);
       },
     });
 
@@ -179,9 +150,7 @@ export class DnDPlugin implements IPlugin {
           data.source?.documentId === this.options.documentId &&
           this.options.documentId !== undefined;
         const isSameEditor =
-          data.kind === 'inner' &&
-          data.source?.editorId === this.editors.get(editor) &&
-          this.editors.get(editor) !== undefined;
+          data.kind === 'inner' && data.source?.editor === editor;
 
         const sourceTo = ReactEditor.findPath(editor, props.element);
 
@@ -248,7 +217,7 @@ export class DnDPlugin implements IPlugin {
                 removeNodes(sourceEditor, nodeIds);
               }
             }
-            $store.selected.clear();
+            selectedNodes.set([]);
             break;
           }
         }
@@ -276,25 +245,32 @@ export class DnDPlugin implements IPlugin {
       return props.children;
     }
 
-    return options.renderBlock?.({
-      props,
-      dragRef: drag,
-      dropRef: connectDropRef,
-      previewRef: preview,
-      position: dropPosition,
-      selected:
-        typeof currentElement.nodeId === 'string'
-          ? $store.selected.has(currentElement.nodeId)
-          : false,
-      onToggleSelected: () => {
-        if (typeof currentElement.nodeId === 'string') {
-          this.handleToggleSelected(currentElement.nodeId);
-        }
-      },
-      onNativeDrop: (event) => {
-        isCopying.current = event.altKey;
-      },
-    });
+    return (
+      <div>
+        {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]);
+            }
+          },
+        })}
+      </div>
+    );
   };
 }
 

package/src/plugins/DnDPlugin/types.ts

@@ -1,4 +1,3 @@
-import { type MapStore, map } from 'nanostores';
 import type React from 'react';
 import type {
   ConnectDragPreview,
@@ -10,11 +9,6 @@ import type { RenderElementProps } from 'slate-react';
 import type { CustomElement, CustomText } from '../../../types';
 import type { NodeIdPlugin } from '../NodeIdPlugin';
 
-type DropParams = {
-  editor: Editor;
-  item: unknown;
-};
-
 export type NodeWithId = Omit<CustomElement, 'children'> & {
   nodeId: string;
   children: (NodeWithId | CustomText)[];
@@ -38,9 +32,8 @@ export type Options = {
     dropRef: ConnectDropTarget;
     previewRef: ConnectDragPreview;
     position: 'top' | 'bottom' | null;
-    selected?: boolean;
-    onToggleSelected: () => void;
     onNativeDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onToggleSelected?: (event: React.MouseEvent<HTMLDivElement>) => void;
   }) => React.ReactNode;
   ignoreNodes?: string[];
   customTypes?: {

package/src/plugins/HeadingsPlugin/HeadingsPlugin.tsx

@@ -124,8 +124,7 @@ const isBlockActive = (editor, type) => {
   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,
     }),
   );
 

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -96,7 +96,10 @@ export class ListsPlugin implements IPlugin {
       }
 
       /* Merge adjacent lists */
-      if (this.isList(editor, node as CustomElement) && Path.hasPrevious(path)) {
+      if (
+        this.isList(editor, node as CustomElement) &&
+        Path.hasPrevious(path)
+      ) {
         const prevPath = Path.previous(path);
         const prevNode = Node.get(editor, prevPath) as CustomElement;
 
@@ -331,10 +334,7 @@ export class ListsPlugin implements IPlugin {
     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,
       }),
     );
 

package/src/provider.tsx

@@ -0,0 +1,28 @@
+import type { StoreValue } from 'nanostores';
+import type React from 'react';
+import { createContext, useContext } from 'react';
+import type { EditorContext } from './types';
+
+const Context = createContext<EditorContext | null>(null);
+
+export const EditorProvider = ({
+  children,
+  selectedNodes,
+}: {
+  children: React.ReactNode;
+  selectedNodes: StoreValue<string[]>;
+}) => {
+  return (
+    <Context.Provider value={{ selectedNodes }}>{children}</Context.Provider>
+  );
+};
+
+export const useEditorContext = () => {
+  const context = useContext(Context);
+
+  if (!context) {
+    throw new Error('useEditorContext must be used within an EditorProvider');
+  }
+
+  return context;
+};

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { StoreValue } from 'nanostores';
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
 import type {
   DecoratedRange,
@@ -98,3 +99,7 @@ export type Deserialize = (
   element: HTMLElement,
   children?: (string | Descendant)[],
 ) => CustomElement | CustomText[] | undefined;
+
+export type EditorContext = {
+  selectedNodes: StoreValue<string[]>;
+};