@use-kona/editor 0.1.19 → 0.1.21

package/dist/core/createEditable.js

@@ -8,6 +8,7 @@ import { deserialize } from "./deserialize.js";
 import styles_module from "./styles.module.js";
 const SUPPORTED_HANDLERS = [
     'onDrop',
+    'onDragOver',
     'onKeyDown',
     'onPaste'
 ];

package/dist/editor.js

@@ -18,9 +18,24 @@ const KonaEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                 match
             });
         };
+        const insertNodes = (nodes, at)=>{
+            if (!editor || !Array.isArray(nodes) || !nodes.length) return false;
+            const target = at ?? editor.selection ?? [
+                editor.children.length
+            ];
+            try {
+                Transforms.insertNodes(editor, nodes, {
+                    at: target
+                });
+                return true;
+            } catch  {
+                return false;
+            }
+        };
         return {
             serialize: serialize(plugins),
             deserialize: deserialize(plugins),
+            insertNodes,
             deleteNode,
             isEmpty: ()=>isEmpty(editor.children),
             focus: (mode)=>{

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
-import type { DecoratedRange, Descendant, Editor, NodeEntry, NodeMatch } from 'slate';
+import type { DecoratedRange, Descendant, Editor, Location, NodeEntry, NodeMatch } from 'slate';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
 import type { CustomElement, CustomText } from '../types';
 export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement, TLeaf extends CustomText = CustomText> {
@@ -11,6 +11,7 @@ export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomE
     renderLeaf?: (props: RenderLeafProps) => ReactElement | null;
     handlers?: {
         onDrop?: (event: DragEvent, editor: Editor) => void;
+        onDragOver?: (event: DragEvent, editor: Editor) => void;
         onKeyDown?: (event: KeyboardEvent, editor: Editor) => void;
         onPaste?: (event: ClipboardEvent, editor: Editor) => void;
     };
@@ -49,6 +50,7 @@ export type UiParams = {
 export type EditorRef = {
     serialize: (node: CustomElement | CustomText) => string;
     deserialize: (element: HTMLElement) => (Descendant | string)[] | string | Descendant | null;
+    insertNodes: (nodes: Descendant[], at?: Location) => boolean;
     isEmpty: () => boolean;
     deleteNode: (match: NodeMatch<CustomElement>) => void;
     focus: (mode?: 'end') => void;

package/package.json

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

package/src/core/createEditable.tsx

@@ -26,7 +26,7 @@ import type { IPlugin } from '../types';
 import { deserialize } from './deserialize';
 import styles from './styles.module.css';
 
-const SUPPORTED_HANDLERS = ['onDrop', 'onKeyDown', 'onPaste'];
+const SUPPORTED_HANDLERS = ['onDrop', 'onDragOver', 'onKeyDown', 'onPaste'];
 
 type Props = {
   readOnly?: boolean;

package/src/editor.tsx

@@ -29,9 +29,25 @@ export const KonaEditor = forwardRef<EditorRef, KonaEditorProps>(
         Transforms.removeNodes(editor, { at: [], match });
       };
 
+      const insertNodes: EditorRef['insertNodes'] = (nodes, at) => {
+        if (!editor || !Array.isArray(nodes) || !nodes.length) {
+          return false;
+        }
+
+        const target = at ?? editor.selection ?? [editor.children.length];
+
+        try {
+          Transforms.insertNodes(editor, nodes, { at: target });
+          return true;
+        } catch {
+          return false;
+        }
+      };
+
       return {
         serialize: serialize(plugins),
         deserialize: deserialize(plugins),
+        insertNodes,
         deleteNode,
         isEmpty: () => {
           return isEmpty(editor.children);

package/src/types.ts

@@ -3,6 +3,7 @@ import type {
   DecoratedRange,
   Descendant,
   Editor,
+  Location,
   NodeEntry,
   NodeMatch,
 } from 'slate';
@@ -24,6 +25,7 @@ export interface IPlugin<
 
   handlers?: {
     onDrop?: (event: DragEvent, editor: Editor) => void;
+    onDragOver?: (event: DragEvent, editor: Editor) => void;
     onKeyDown?: (event: KeyboardEvent, editor: Editor) => void;
     onPaste?: (event: ClipboardEvent, editor: Editor) => void;
   };
@@ -81,6 +83,7 @@ export type EditorRef = {
   deserialize: (
     element: HTMLElement,
   ) => (Descendant | string)[] | string | Descendant | null;
+  insertNodes: (nodes: Descendant[], at?: Location) => boolean;
   isEmpty: () => boolean;
   deleteNode: (match: NodeMatch<CustomElement>) => void;
   focus: (mode?: 'end') => void;