@use-kona/editor 0.1.5 → 0.1.7

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',
@@ -37,6 +39,7 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
             return result;
         };
         const handleHotkey = (event)=>{
+            if ('Tab' === event.key) event.preventDefault();
             for (const plugin of plugins)if (plugin.hotkeys) {
                 for (const hotkey of plugin.hotkeys)if (is_hotkey(hotkey[0], event) && hotkey[1]) {
                     event.preventDefault();
@@ -44,6 +47,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 +77,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/core/queries.d.ts

@@ -1,2 +1,5 @@
-import { Editor, NodeEntry, Node } from 'slate';
-export declare const getPrev: (editor: Editor, node: NodeEntry) => Node | null;
+import { Editor, type NodeEntry } from 'slate';
+/**
+ * @deprecated
+ */
+export declare const getPrev: (editor: Editor, node: NodeEntry) => NodeEntry<import("slate").Ancestor> | null | undefined;

package/dist/core/queries.js

@@ -1,8 +1,11 @@
-import { Node, Path } from "slate";
+import { Editor, Path } from "slate";
 const getPrev = (editor, node)=>{
     try {
         const [, path] = node;
-        return Node.get(editor, Path.previous(path));
+        return Editor.above(editor, {
+            at: Path.previous(path),
+            mode: 'lowest'
+        });
     } catch (e) {
         return null;
     }

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/ListsPlugin/ListsPlugin.d.ts

@@ -30,6 +30,7 @@ export declare class ListsPlugin implements IPlugin {
     private isListItem;
     static toggleList: (editor: Editor, listType: string, listItemType?: string) => void;
     private getListItemDepth;
+    private getListDepth;
     private getListItem;
 }
 export {};

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Editor, Element, Node, Transforms } from "slate";
 import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
-import { getPrev } from "../../core/queries.js";
 import styles_module from "./styles.module.js";
 class ListsPlugin {
     options;
@@ -48,6 +47,24 @@ class ListsPlugin {
                     split: true
                 });
             }
+            if (this.isList(editor, node)) {
+                const prevListItemPath = Editor.before(editor, path, {
+                    unit: 'block'
+                });
+                const prevList = Editor.above(editor, {
+                    at: prevListItemPath,
+                    match: (n)=>this.isList(editor, n)
+                });
+                if (prevList) {
+                    const currentDepth = this.getListDepth(editor, path);
+                    const prevDepth = this.getListDepth(editor, prevList[1]);
+                    if (this.isList(editor, prevList[0]) && currentDepth === prevDepth) try {
+                        Transforms.mergeNodes(editor, {
+                            match: (n)=>this.isList(editor, n)
+                        });
+                    } catch (e) {}
+                }
+            }
             normalizeNode(entry);
         };
         editor.insertBreak = ()=>{
@@ -152,9 +169,15 @@ class ListsPlugin {
                     else if (!event.shiftKey) {
                         const currentListItem = this.getListItem(editor);
                         if (!currentListItem) return;
-                        const prevListItem = getPrev(editor, currentListItem);
-                        if (!prevListItem) return;
-                        if (currentListItem && prevListItem) {
+                        const prevListItemPath = Editor.before(editor, currentListItem[1], {
+                            unit: 'block'
+                        });
+                        if (currentListItem && prevListItemPath) {
+                            const prevListItem = Editor.above(editor, {
+                                at: prevListItemPath,
+                                match: (n)=>this.isListItem(editor, n)
+                            });
+                            if (!prevListItem) return;
                             const currentDepth = this.getListItemDepth(editor, currentListItem[1]);
                             const prevDepth = this.getListItemDepth(editor, prevListItem[1]);
                             if (prevListItem && prevDepth >= currentDepth) Transforms.wrapNodes(editor, {
@@ -220,9 +243,23 @@ class ListsPlugin {
         if (item) {
             let count = 0;
             let parent = Editor.parent(editor, item[1]);
-            while(null !== parent && this.isList(editor, parent[0])){
+            do {
                 parent = Editor.parent(editor, parent[1]);
                 count++;
+            }while (null !== parent && this.isList(editor, parent[0]));
+            return count;
+        }
+        return 0;
+    };
+    getListDepth = (editor, path)=>{
+        if (path) {
+            const node = Node.get(editor, path);
+            if (!this.isList(editor, node)) return 0;
+            let count = 0;
+            let parent = Editor.parent(editor, path);
+            while(parent && this.isList(editor, parent[0])){
+                count++;
+                parent = Editor.parent(editor, parent[1]);
             }
             return count;
         }

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.5",
+  "version": "0.1.7",
   "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'];
@@ -72,6 +80,10 @@ export const createEditable =
     };
 
     const handleHotkey = (event: KeyboardEvent) => {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+      }
+
       for (const plugin of plugins) {
         if (plugin.hotkeys) {
           for (const hotkey of plugin.hotkeys) {
@@ -84,6 +96,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 +140,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/core/queries.ts

@@ -1,9 +1,15 @@
-import { Editor, NodeEntry, Node, Path } from 'slate';
+import { Editor, type NodeEntry, Path } from 'slate';
 
+/**
+ * @deprecated
+ */
 export const getPrev = (editor: Editor, node: NodeEntry) => {
   try {
     const [, path] = node;
-    return Node.get(editor, Path.previous(path));
+    return Editor.above(editor, {
+      at: Path.previous(path),
+      mode: 'lowest',
+    });
   } catch (e) {
     return null;
   }

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/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/ListsPlugin/ListsPlugin.tsx

@@ -88,6 +88,33 @@ export class ListsPlugin implements IPlugin {
         }
       }
 
+      if (this.isList(editor, node as CustomElement)) {
+        const prevListItemPath = Editor.before(editor, path, {
+          unit: 'block',
+        });
+
+        const prevList = Editor.above(editor, {
+          at: prevListItemPath,
+          match: (n) => this.isList(editor, n as CustomElement),
+        });
+
+        if (prevList) {
+          const currentDepth = this.getListDepth(editor, path);
+          const prevDepth = this.getListDepth(editor, prevList[1]);
+
+          if (
+            this.isList(editor, prevList[0] as CustomElement) &&
+            currentDepth === prevDepth
+          ) {
+            try {
+              Transforms.mergeNodes(editor, {
+                match: (n) => this.isList(editor, n as CustomElement),
+              });
+            } catch (e) {}
+          }
+        }
+      }
+
       normalizeNode(entry);
     };
 
@@ -249,17 +276,25 @@ export class ListsPlugin implements IPlugin {
               return;
             }
 
-            const prevListItem = getPrev(editor, currentListItem);
+            const prevListItemPath = Editor.before(editor, currentListItem[1], {
+              unit: 'block',
+            });
 
-            if (!prevListItem) {
-              return;
-            }
+            if (currentListItem && prevListItemPath) {
+              const prevListItem = Editor.above(editor, {
+                at: prevListItemPath,
+                match: (n) => this.isListItem(editor, n as CustomElement),
+              });
+
+              if (!prevListItem) {
+                return;
+              }
 
-            if (currentListItem && prevListItem) {
               const currentDepth = this.getListItemDepth(
                 editor,
                 currentListItem[1],
               );
+
               const prevDepth = this.getListItemDepth(editor, prevListItem[1]);
 
               if (prevListItem && prevDepth >= currentDepth) {
@@ -370,17 +405,37 @@ export class ListsPlugin implements IPlugin {
     if (item) {
       let count = 0;
       let parent = Editor.parent(editor, item[1]);
-      while (
+      do {
+        parent = Editor.parent(editor, parent[1]);
+        count++;
+      } while (
         parent !== null &&
         this.isList(editor, parent[0] as CustomElement)
-      ) {
-        parent = Editor.parent(editor, parent[1]);
+      );
+
+      return count;
+    }
+
+    return 0;
+  };
+
+  private getListDepth = (editor: Editor, path?: Path) => {
+    if (path) {
+      const node = Node.get(editor, path) as CustomElement;
+      if (!this.isList(editor, node)) {
+        return 0;
+      }
+
+      let count = 0;
+      let parent = Editor.parent(editor, path);
+
+      while (parent && this.isList(editor, parent[0] as CustomElement)) {
         count++;
+        parent = Editor.parent(editor, parent[1]);
       }
 
       return count;
     }
-
     return 0;
   };
 

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;