@use-kona/editor 0.1.4 → 0.1.6

package/dist/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/core/createEditable.js

@@ -1,8 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import is_hotkey from "is-hotkey";
 import react, { isValidElement, useCallback } from "react";
+import { Transforms } from "slate";
 import { Editable, useReadOnly } from "slate-react";
 import { BaseElement } from "../elements/BaseElement.js";
+import { deserialize } from "./deserialize.js";
 import styles_module from "./styles.module.js";
 const SUPPORTED_HANDLERS = [
     'onDrop',
@@ -44,6 +46,14 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                 }
             }
         };
+        const handlePaste = (event)=>{
+            const html = event.clipboardData?.getData('text/html');
+            if (!html) return;
+            const parsed = new DOMParser().parseFromString(html, 'text/html');
+            const value = deserialize(plugins)(parsed.body);
+            event.preventDefault();
+            Transforms.insertNodes(editor, value);
+        };
         const decorate = (entry)=>{
             const decorators = plugins.filter((plugin)=>!!plugin.decorate);
             return decorators.reduce((decorations, plugin)=>{
@@ -66,7 +76,8 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
             });
             return handlers;
         }, {
-            onKeyDown: handleHotkey
+            onKeyDown: handleHotkey,
+            onPaste: handlePaste
         });
         const Ui = useCallback(({ children })=>{
             const ui = plugins.filter((p)=>Boolean(p.ui));

package/dist/core/createEditor.js

@@ -74,7 +74,7 @@ const createEditor_createEditor = (plugins)=>()=>{
                         const result = matchedBlock.onBeforeDelete ? await matchedBlock?.onBeforeDelete?.([
                             node
                         ]) : true;
-                        if (result) {
+                        if (result && Editor.isVoid(editorWithPlugins, node)) {
                             Transforms.removeNodes(editorWithPlugins, {
                                 at: path
                             });
@@ -92,19 +92,19 @@ const createEditor_createEditor = (plugins)=>()=>{
             const { selection } = editorWithPlugins;
             if (!selection) return;
             if (Range.isCollapsed(selection)) {
-                const firstEntry = Editor.above(editorWithPlugins, {
+                const currentEntry = Editor.above(editorWithPlugins, {
                     at: selection.anchor,
                     match: (n)=>Editor.isBlock(editorWithPlugins, n),
                     mode: 'lowest'
                 });
-                const secondEntry = Editor.above(editorWithPlugins, {
+                const previousEntry = Editor.above(editorWithPlugins, {
                     at: Editor.before(editorWithPlugins, selection.anchor),
                     match: (n)=>Editor.isBlock(editorWithPlugins, n),
                     mode: 'lowest'
                 });
-                if (!firstEntry || !secondEntry) return;
-                const [_, currentPath] = firstEntry;
-                const [node, path] = secondEntry;
+                if (!currentEntry || !previousEntry) return;
+                const [_, currentPath] = currentEntry;
+                const [node, path] = previousEntry;
                 if (node && Editor.isStart(editorWithPlugins, selection.anchor, currentPath)) {
                     const matchedBlock = plugins.reduce((block, plugin)=>{
                         const match = plugin.blocks?.find((b)=>b.type === node.type);
@@ -114,15 +114,15 @@ const createEditor_createEditor = (plugins)=>()=>{
                         const result = matchedBlock.onBeforeDelete ? await matchedBlock.onBeforeDelete([
                             node
                         ]) : true;
-                        if (result) {
+                        if (result && Editor.isVoid(editorWithPlugins, node)) {
                             Transforms.removeNodes(editorWithPlugins, {
                                 at: path
                             });
                             matchedBlock.onDelete?.([
                                 node
                             ]);
+                            return;
                         }
-                        return;
                     }
                 }
             }

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.d.ts

@@ -4,6 +4,7 @@ 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';
@@ -43,10 +44,15 @@ export declare class CodeBlockPlugin implements IPlugin {
     } & {
         token: boolean;
     })[];
-    blocks: {
+    blocks: ({
         type: string;
         render: (props: RenderElementProps, editor: Editor) => import("react/jsx-runtime").JSX.Element;
-    }[];
+        deserialize: (el: HTMLElement, children: any) => CustomElement | undefined;
+    } | {
+        type: string;
+        render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
+        deserialize?: undefined;
+    })[];
     leafs: {
         render: (props: RenderLeafProps) => import("react/jsx-runtime").JSX.Element;
     }[];

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.js

@@ -26,6 +26,7 @@ import "prismjs/components/prism-bash";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-yaml";
 import "prismjs/components/prism-markdown";
+import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 class CodeBlockPlugin {
     options;
     constructor(options){
@@ -155,6 +156,17 @@ class CodeBlockPlugin {
                         Content
                     })
                 });
+            },
+            deserialize: (el, children)=>{
+                const { nodeName } = el;
+                if ('PRE' === nodeName) {
+                    const lines = children.join('').split('\n');
+                    return external_slate_hyperscript_jsx('element', {
+                        type: CodeBlockPlugin.CODE_ELEMENT
+                    }, lines.map((line)=>external_slate_hyperscript_jsx('element', {
+                            type: CodeBlockPlugin.CODE_LINE_ELEMENT
+                        }, line)));
+                }
             }
         },
         {

package/dist/plugins/CommandsPlugin/Menu.js

@@ -16,6 +16,7 @@ const Menu = (props)=>{
     const selection = useSlateSelection();
     const editor = useSlate();
     const isFocused = useFocused();
+    const ref = useRef(null);
     const entry = Editor.above(editor, {
         match: (n)=>Editor.isBlock(editor, n)
     });
@@ -95,7 +96,8 @@ const Menu = (props)=>{
     }, [
         store.filter
     ]);
-    const handleMenuLayout = (element)=>{
+    useLayoutEffect(()=>{
+        const element = ref.current;
         if (element) {
             const { height, top } = element.getBoundingClientRect();
             const domSelection = window.getSelection();
@@ -106,7 +108,7 @@ const Menu = (props)=>{
                     top: `${top - height - (rect?.height ?? 22)}px`
                 }));
         }
-    };
+    }, []);
     if (!commands.length) return null;
     if (entry && ignoreNodes.includes(entry[0].type)) return null;
     return /*#__PURE__*/ createPortal(renderMenu(/*#__PURE__*/ jsxs(Fragment, {
@@ -118,7 +120,7 @@ const Menu = (props)=>{
                 }
             }),
             /*#__PURE__*/ jsx("div", {
-                ref: handleMenuLayout,
+                ref: ref,
                 style: style,
                 className: styles_module.menu,
                 onMouseDown: (event)=>{

package/dist/plugins/EmojiPlugin/Menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useFocused, useSlateSelection } from "slate-react";
 import styles_module from "./styles.module.js";
@@ -7,6 +7,7 @@ const Menu = (props)=>{
     const { isOpen, children } = props;
     const isFocused = useFocused();
     const selection = useSlateSelection();
+    const ref = useRef(null);
     const [style, setStyle] = useState({});
     useLayoutEffect(()=>{
         if (!selection || !isFocused) return void setStyle(void 0);
@@ -29,7 +30,8 @@ const Menu = (props)=>{
         isFocused,
         isOpen
     ]);
-    const handleMenuLayout = (element)=>{
+    useLayoutEffect(()=>{
+        const element = ref.current;
         if (element) {
             const { height, top } = element.getBoundingClientRect();
             const domSelection = window.getSelection();
@@ -40,9 +42,9 @@ const Menu = (props)=>{
                     top: `${top - height - (rect?.height ?? 22)}px`
                 }));
         }
-    };
+    }, []);
     return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
-        ref: handleMenuLayout,
+        ref: ref,
         style: style,
         className: styles_module.root,
         children: children

package/dist/plugins/ShortcutsPlugin/ShortcutsPlugin.js

@@ -25,12 +25,12 @@ class ShortcutsPlugin {
                         const currentPoint = Range.start(selection);
                         const [currentNode] = Editor.node(editor, currentPoint.path);
                         const textBeforeCursor = Node.string(currentNode).slice(0, currentPoint.offset);
-                        matchBefore = new RegExp(shortcut.before.source, 'g').exec(textBeforeCursor);
+                        matchBefore = new RegExp(`${shortcut.before.source}`, 'g').exec(textBeforeCursor);
                     }
                     if (shortcut.after && matchBefore) {
                         const currentPoint = Range.start(selection);
                         const [currentNode] = Editor.node(editor, currentPoint.path);
-                        const textBetweenMatches = Node.string(currentNode).slice(matchBefore.index, currentPoint.offset);
+                        const textBetweenMatches = Node.string(currentNode).slice(matchBefore.index + matchBefore[0].length, currentPoint.offset);
                         matchAfter = new RegExp(shortcut.after.source + '$', 'g').exec(textBetweenMatches);
                     }
                     if (matchBefore && !shortcut.after) return void shortcut.change(editor, {
@@ -42,8 +42,8 @@ class ShortcutsPlugin {
                     if (matchBefore && matchAfter && shortcut.before && shortcut.after) return void shortcut.change(editor, {
                         before: matchBefore,
                         after: matchAfter,
-                        text: matchAfter.input,
-                        cleanText: matchBefore.input.slice(matchBefore.index + matchBefore[0].length, matchBefore.index + matchBefore[0].length + matchAfter.index - matchAfter[0].length)
+                        text: matchBefore.input.slice(matchBefore.index),
+                        cleanText: matchBefore.input.slice(matchBefore.index + matchBefore[0].length, matchBefore.input.length - matchAfter[0].length)
                     });
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/core/createEditable.tsx

@@ -1,5 +1,6 @@
 import isHotkey from 'is-hotkey';
 import React, {
+  type ClipboardEvent,
   isValidElement,
   type JSX,
   type KeyboardEvent,
@@ -7,7 +8,13 @@ import React, {
   type ReactNode,
   useCallback,
 } from 'react';
-import type { DecoratedRange, Editor, NodeEntry } from 'slate';
+import {
+  DecoratedRange,
+  Descendant,
+  Editor,
+  NodeEntry,
+  Transforms,
+} from 'slate';
 import {
   Editable,
   type RenderElementProps,
@@ -16,6 +23,7 @@ import {
 } from 'slate-react';
 import { BaseElement } from '../elements/BaseElement';
 import type { IPlugin } from '../types';
+import { deserialize } from './deserialize';
 import styles from './styles.module.css';
 
 const SUPPORTED_HANDLERS = ['onDrop', 'onKeyDown', 'onPaste'];
@@ -84,6 +92,17 @@ export const createEditable =
       }
     };
 
+    const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
+      const html = event.clipboardData?.getData('text/html');
+      if (!html) return;
+
+      const parsed = new DOMParser().parseFromString(html, 'text/html');
+      const value = deserialize(plugins)(parsed.body);
+      event.preventDefault();
+
+      Transforms.insertNodes(editor, value as Descendant);
+    };
+
     const decorate = (entry: NodeEntry) => {
       const decorators: IPlugin[] = plugins.filter(
         (plugin) => !!plugin.decorate,
@@ -117,6 +136,7 @@ export const createEditable =
       },
       {
         onKeyDown: handleHotkey,
+        onPaste: handlePaste,
       },
     );
 

package/src/core/createEditor.ts

@@ -119,7 +119,7 @@ export const createEditor = (plugins: IPlugin[]) => () => {
           const result = matchedBlock.onBeforeDelete
             ? await matchedBlock?.onBeforeDelete?.([node])
             : true;
-          if (result) {
+          if (result && Editor.isVoid(editorWithPlugins, node)) {
             Transforms.removeNodes(editorWithPlugins, { at: path });
             matchedBlock.onDelete?.([node]);
           }
@@ -139,23 +139,23 @@ export const createEditor = (plugins: IPlugin[]) => () => {
     }
 
     if (Range.isCollapsed(selection)) {
-      const firstEntry = Editor.above<CustomElement>(editorWithPlugins, {
+      const currentEntry = Editor.above<CustomElement>(editorWithPlugins, {
         at: selection.anchor,
         match: (n) => Editor.isBlock(editorWithPlugins, n as CustomElement),
         mode: 'lowest',
       });
-      const secondEntry = Editor.above<CustomElement>(editorWithPlugins, {
+      const previousEntry = Editor.above<CustomElement>(editorWithPlugins, {
         at: Editor.before(editorWithPlugins, selection.anchor),
         match: (n) => Editor.isBlock(editorWithPlugins, n as CustomElement),
         mode: 'lowest',
       });
 
-      if (!firstEntry || !secondEntry) {
+      if (!currentEntry || !previousEntry) {
         return;
       }
 
-      const [_, currentPath] = firstEntry;
-      const [node, path] = secondEntry;
+      const [_, currentPath] = currentEntry;
+      const [node, path] = previousEntry;
 
       if (
         node &&
@@ -170,11 +170,11 @@ export const createEditor = (plugins: IPlugin[]) => () => {
           const result = matchedBlock.onBeforeDelete
             ? await matchedBlock.onBeforeDelete([node])
             : true;
-          if (result) {
+          if (result && Editor.isVoid(editorWithPlugins, node)) {
             Transforms.removeNodes(editorWithPlugins, { at: path });
             matchedBlock.onDelete?.([node]);
+            return;
           }
-          return;
         }
       }
     }

package/src/core/deserialize.ts

@@ -1,6 +1,5 @@
-import { type Descendant, Element, type Node } from 'slate';
+import { type Descendant, Element } from 'slate';
 import { jsx } from 'slate-hyperscript';
-import { CustomElement, CustomText } from '../../types';
 import type { IPlugin } from '../types';
 
 export const deserialize =
@@ -36,7 +35,8 @@ export const deserialize =
       return jsx('element', { type: 'paragraph' }, children);
     }
 
-    let result: CustomElement | CustomText[] | null = null;
+    let result: (Descendant | string)[] | string | Descendant | null = null;
+
     for (const plugin of plugins) {
       if (plugin.blocks?.some((b) => b.deserialize)) {
         plugin.blocks.forEach((e) => {
@@ -61,7 +61,9 @@ export const deserialize =
               | string
               | Descendant
             )[];
+
             const newResult = e.deserialize(element, childrenAsDescendants);
+
             if (newResult) {
               result = newResult;
             }

package/src/plugins/CodeBlockPlugin/CodeBlockPlugin.tsx

@@ -42,6 +42,7 @@ import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-sql';
 import 'prismjs/components/prism-yaml';
 import 'prismjs/components/prism-markdown';
+import { jsx } from 'slate-hyperscript';
 
 type Options = {
   renderCodeBlock: (
@@ -211,6 +212,21 @@ export class CodeBlockPlugin implements IPlugin {
           </>
         );
       },
+      deserialize: (el: HTMLElement, children) => {
+        const { nodeName } = el;
+
+        if (nodeName === 'PRE') {
+          const lines = children.join('').split('\n');
+
+          return jsx(
+            'element',
+            { type: CodeBlockPlugin.CODE_ELEMENT },
+            lines.map((line) =>
+              jsx('element', { type: CodeBlockPlugin.CODE_LINE_ELEMENT }, line),
+            ),
+          );
+        }
+      },
     },
     {
       type: CodeBlockPlugin.CODE_LINE_ELEMENT,

package/src/plugins/CommandsPlugin/Menu.tsx

@@ -35,6 +35,7 @@ export const Menu = (props: Props) => {
   const selection = useSlateSelection();
   const editor = useSlate() as Editor;
   const isFocused = useFocused();
+  const ref = useRef<HTMLDivElement>(null)
 
   const entry = Editor.above<CustomElement>(editor, {
     match: (n) => Editor.isBlock(editor, n as CustomElement),
@@ -137,7 +138,8 @@ export const Menu = (props: Props) => {
     }
   }, [store.filter]);
 
-  const handleMenuLayout = (element: HTMLDivElement) => {
+  useLayoutEffect(() => {
+    const element = ref.current;
     if (element) {
       const { height, top } = element.getBoundingClientRect();
 
@@ -152,7 +154,7 @@ export const Menu = (props: Props) => {
         }));
       }
     }
-  };
+  }, []);
 
   if (!commands.length) {
     return null;
@@ -174,7 +176,7 @@ export const Menu = (props: Props) => {
           />
         )}
         <div
-          ref={handleMenuLayout}
+          ref={ref}
           style={style}
           className={styles.menu}
           onMouseDown={(event) => {

package/src/plugins/EmojiPlugin/Menu.tsx

@@ -1,7 +1,7 @@
 import {
   type CSSProperties,
   type ReactNode,
-  useLayoutEffect,
+  useLayoutEffect, useRef,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -18,6 +18,7 @@ export const Menu = (props: Props) => {
 
   const isFocused = useFocused();
   const selection = useSlateSelection();
+  const ref = useRef<HTMLDivElement>(null);
 
   const [style, setStyle] = useState<CSSProperties | undefined>({});
 
@@ -48,7 +49,8 @@ export const Menu = (props: Props) => {
     }, 0);
   }, [selection, isFocused, isOpen]);
 
-  const handleMenuLayout = (element: HTMLDivElement) => {
+  useLayoutEffect(() => {
+    const element = ref.current;
     if (element) {
       const { height, top } = element.getBoundingClientRect();
 
@@ -63,10 +65,11 @@ export const Menu = (props: Props) => {
         }));
       }
     }
-  };
+  }, []);
+
 
   return createPortal(
-    <div ref={handleMenuLayout} style={style} className={styles.root}>
+    <div ref={ref} style={style} className={styles.root}>
       {children}
     </div>,
     document.body,

package/src/plugins/LinksPlugin/LinksPlugin.tsx

@@ -2,7 +2,6 @@ import isUrl from 'is-url';
 import { Editor, Element, Range, Transforms } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
-import { deserialize } from '../../core/deserialize';
 import type { IPlugin } from '../../types';
 import { LINK_ELEMENT } from './constants';
 import { Link } from './Link';

package/src/plugins/ShortcutsPlugin/ShortcutsPlugin.tsx

@@ -67,7 +67,7 @@ export class ShortcutsPlugin implements IPlugin {
               );
 
               // Check if the text before cursor matches the pattern
-              matchBefore = new RegExp(shortcut.before.source, 'g').exec(
+              matchBefore = new RegExp(`${shortcut.before.source}`, 'g').exec(
                 textBeforeCursor,
               );
             }
@@ -77,7 +77,7 @@ export class ShortcutsPlugin implements IPlugin {
               const currentPoint = Range.start(selection);
               const [currentNode] = Editor.node(editor, currentPoint.path);
               const textBetweenMatches = Node.string(currentNode).slice(
-                matchBefore.index,
+                matchBefore.index + matchBefore[0].length,
                 currentPoint.offset,
               );
 
@@ -110,13 +110,10 @@ export class ShortcutsPlugin implements IPlugin {
               shortcut.change(editor, {
                 before: matchBefore,
                 after: matchAfter,
-                text: matchAfter.input,
+                text: matchBefore.input.slice(matchBefore.index),
                 cleanText: matchBefore.input.slice(
                   matchBefore.index + matchBefore[0].length,
-                  matchBefore.index +
-                    matchBefore[0].length +
-                    matchAfter.index -
-                    matchAfter[0].length,
+                  matchBefore.input.length - matchAfter[0].length,
                 ),
               });
               return;