@use-kona/editor 0.1.24 → 0.1.25

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

@@ -2,9 +2,16 @@ import type React from 'react';
 import type { ConnectDragPreview, ConnectDragSource, ConnectDropTarget } from 'react-dnd';
 import type { Editor, Path } from 'slate';
 import type { RenderElementProps } from 'slate-react';
-import type { CustomElement } from '../../../types';
-export type NodeWithId = CustomElement & {
+import type { CustomElement, CustomText } from '../../../types';
+import type { NodeIdPlugin } from '../NodeIdPlugin';
+export type NodeWithId = Omit<CustomElement, 'children'> & {
     nodeId: string;
+    children: (NodeWithId | CustomText)[];
+};
+export declare const isNodeWithId: (node: unknown) => node is NodeWithId;
+export type CustomDropHandler<T = unknown> = {
+    type: string | symbol;
+    onDrop: (context: CustomDropContext<T>) => DropResult;
 };
 export type Options = {
     editorId?: string;
@@ -16,8 +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?: {
@@ -27,25 +34,23 @@ export type Options = {
         };
     };
     customDropHandlers?: {
-        [type: string | symbol]: {
-            type: string | symbol;
-            onDrop: <T = unknown>(context: CustomDropContext<T>) => DropResult;
-        };
+        [type: string | symbol]: CustomDropHandler;
     };
+    nodeIdPlugin?: NodeIdPlugin;
 };
-type CustomDropContext<T = unknown> = {
+export type CustomDropContext<TItem = unknown> = {
     editor: Editor;
-    item: T;
+    data: EditorOuterDragItem<TItem>;
     insertAt: Path;
 };
 type DropResult = 'handled' | 'ignored';
-/**
- * We're using this type to represent a drag item that is being dragged from the editor.
- */
-export type EditorDragItem = {
+export type EditorInnerDragItem<TItem = unknown> = {
+    kind: 'inner';
     nodes: NodeWithId[];
-    items?: unknown[];
+    item?: TItem;
+    items?: TItem[];
     source: {
+        editor: Editor;
         /**
          * Different editors have different unique identifiers.
          */
@@ -59,4 +64,13 @@ export type EditorDragItem = {
     };
     data?: Record<string, unknown>;
 };
+export type EditorOuterDragItem<TItem = unknown> = {
+    kind: 'outer';
+    item: TItem;
+    items: TItem[];
+};
+/**
+ * We're using this type to represent a drag item that is being dragged from the editor.
+ */
+export type EditorDragItem<TItem = unknown> = EditorInnerDragItem<TItem> | EditorOuterDragItem<TItem>;
 export {};

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

@@ -9,6 +9,7 @@ type Options = {
 };
 export declare class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
     private options;
+    generateId: () => string;
     constructor(options: Options);
     init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor & {
         getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];

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",
+  "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) {