@portabletext/editor 1.37.0 → 1.38.0

package/lib/index.cjs

@@ -1,10 +1,116 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), reactCompilerRuntime = require("react-compiler-runtime"), uniq = require("lodash/uniq.js"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), useEffectEvent = require("use-effect-event");
+var editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), slateDom = require("slate-dom"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"), selector_isAtTheStartOfBlock = require("./_chunks-cjs/selector.is-at-the-start-of-block.cjs"), parseBlocks = require("./_chunks-cjs/parse-blocks.cjs"), selector_isOverlappingSelection = require("./_chunks-cjs/selector.is-overlapping-selection.cjs"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), reactCompilerRuntime = require("react-compiler-runtime"), uniq = require("lodash/uniq.js"), useEffectEvent = require("use-effect-event");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
 var isEqual__default = /* @__PURE__ */ _interopDefaultCompat(isEqual), noop__default = /* @__PURE__ */ _interopDefaultCompat(noop), uniq__default = /* @__PURE__ */ _interopDefaultCompat(uniq);
+function getEventPosition({
+  snapshot,
+  slateEditor,
+  event
+}) {
+  if (!slateDom.DOMEditor.hasTarget(slateEditor, event.target))
+    return;
+  const node = slateDom.DOMEditor.toSlateNode(slateEditor, event.target);
+  if (isClipboardEvent(event)) {
+    const selection2 = snapshot.context.selection;
+    return selection2 ? {
+      block: "end",
+      isEditor: slate.Editor.isEditor(node),
+      selection: selection2
+    } : void 0;
+  }
+  const block = getEventPositionBlock({
+    slateEditor,
+    event
+  }), selection = getEventPositionSelection({
+    snapshot,
+    slateEditor,
+    event
+  });
+  if (!(!block || !selection))
+    return {
+      block,
+      isEditor: slate.Editor.isEditor(node),
+      selection
+    };
+}
+function getEventPositionBlock({
+  slateEditor,
+  event
+}) {
+  if (!slateReact.ReactEditor.hasTarget(slateEditor, event.target))
+    return;
+  const node = slateReact.ReactEditor.toSlateNode(slateEditor, event.target), elementRect = slateReact.ReactEditor.toDOMNode(slateEditor, node).getBoundingClientRect(), top = elementRect.top, height = elementRect.height;
+  return Math.abs(top - event.pageY) < height / 2 ? "start" : "end";
+}
+function getEventPositionSelection({
+  snapshot,
+  slateEditor,
+  event
+}) {
+  const range = getSlateRangeFromEvent(slateEditor, event), selection = range ? editorProvider.toPortableTextRange(snapshot.context.value, range, snapshot.context.schema) : null;
+  if (!selection)
+    return selection;
+  const collapsedSelection = selector_isAtTheStartOfBlock.isSelectionCollapsed({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection
+    }
+  }), focusTextBlock = selector_isAtTheStartOfBlock.getFocusTextBlock({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection
+    }
+  }), focusSpan = selector_isAtTheStartOfBlock.getFocusSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection
+    }
+  });
+  if (event.type === "dragstart" && collapsedSelection && focusTextBlock && focusSpan) {
+    const blockStartPoint = util_sliceBlocks.getBlockStartPoint(focusTextBlock), blockEndPoint = util_sliceBlocks.getBlockEndPoint(focusTextBlock);
+    return {
+      anchor: blockStartPoint,
+      focus: blockEndPoint
+    };
+  }
+  return selection;
+}
+function getSlateRangeFromEvent(editor, event) {
+  if (!event.target || !slateDom.isDOMNode(event.target))
+    return;
+  const window2 = slateDom.DOMEditor.getWindow(editor);
+  let domRange;
+  if (window2.document.caretPositionFromPoint !== void 0) {
+    const position = window2.document.caretPositionFromPoint(event.clientX, event.clientY);
+    position && (domRange = window2.document.createRange(), domRange.setStart(position.offsetNode, position.offset), domRange.setEnd(position.offsetNode, position.offset));
+  } else if (window2.document.caretRangeFromPoint !== void 0)
+    domRange = window2.document.caretRangeFromPoint(event.clientX, event.clientY) ?? void 0;
+  else {
+    console.warn("Neither caretPositionFromPoint nor caretRangeFromPoint is supported");
+    return;
+  }
+  if (!domRange)
+    return;
+  let range;
+  try {
+    range = slateDom.DOMEditor.toSlateRange(editor, domRange, {
+      exactMatch: !1,
+      // It can still throw even with this option set to true
+      suppressThrow: !1
+    });
+  } catch {
+  }
+  return range;
+}
+function isClipboardEvent(event) {
+  return event.type === "copy" || event.type === "cut" || event.type === "paste";
+}
 function normalizePoint(point, value) {
   if (!point || !value)
     return null;
@@ -92,146 +198,69 @@ function DropIndicator() {
     zIndex: 5
   } }), $[0] = t0) : t0 = $[0], t0;
 }
-const debug$4 = editorProvider.debugWithName("useDraggable");
 function useDraggable(props) {
-  const $ = reactCompilerRuntime.c(20), editor = slateReact.useSlateStatic(), dragGhostRef = React.useRef(void 0), [blockElement, setBlockElement] = React.useState(null);
+  const $ = reactCompilerRuntime.c(15), editorActor = React.useContext(editorProvider.EditorActorContext), editor = slateReact.useSlateStatic(), [blockElement, setBlockElement] = React.useState(null);
   let t0, t1;
   $[0] !== editor || $[1] !== props.blockRef || $[2] !== props.element ? (t0 = () => setBlockElement(props.blockRef ? props.blockRef.current : slateReact.ReactEditor.toDOMNode(editor, props.element)), t1 = [editor, props.element, props.blockRef], $[0] = editor, $[1] = props.blockRef, $[2] = props.element, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), React.useEffect(t0, t1);
   let t2;
-  $[5] !== editor || $[6] !== props.element ? (t2 = (event) => {
-    const targetBlock = editorProvider.IS_DRAGGING_ELEMENT_TARGET.get(editor);
-    if (targetBlock) {
-      editorProvider.IS_DRAGGING.set(editor, !1), event.preventDefault(), event.stopPropagation(), editorProvider.IS_DRAGGING_ELEMENT_TARGET.delete(editor), dragGhostRef.current && (debug$4("Removing drag ghost"), document.body.removeChild(dragGhostRef.current));
-      const dragPosition = editorProvider.IS_DRAGGING_BLOCK_TARGET_POSITION.get(editor);
-      editorProvider.IS_DRAGGING_BLOCK_TARGET_POSITION.delete(editor);
-      let targetPath = slateReact.ReactEditor.findPath(editor, targetBlock);
-      const myPath = slateReact.ReactEditor.findPath(editor, props.element), isBefore = slate.Path.isBefore(myPath, targetPath);
-      if (dragPosition === "bottom" && !isBefore) {
-        if (targetPath[0] >= editor.children.length - 1) {
-          debug$4("target is already at the bottom, not moving");
-          return;
-        }
-        const originalPath = targetPath;
-        targetPath = slate.Path.next(targetPath), debug$4(`Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(targetPath)}`);
-      }
-      if (dragPosition === "top" && isBefore && targetPath[0] !== editor.children.length - 1) {
-        const originalPath_0 = targetPath;
-        targetPath = slate.Path.previous(targetPath), debug$4(`Adjusting targetPath from ${JSON.stringify(originalPath_0)} to ${JSON.stringify(targetPath)}`);
-      }
-      if (slate.Path.equals(targetPath, myPath)) {
-        event.preventDefault(), debug$4("targetPath and myPath is the same, not moving");
-        return;
-      }
-      debug$4(`Moving element ${props.element._key} from path ${JSON.stringify(myPath)} to ${JSON.stringify(targetPath)} (${dragPosition})`), slate.Transforms.moveNodes(editor, {
-        at: myPath,
-        to: targetPath
-      }), editor.onChange();
-      return;
-    }
-    debug$4("No target element, not doing anything");
-  }, $[5] = editor, $[6] = props.element, $[7] = t2) : t2 = $[7];
+  $[5] !== editorActor ? (t2 = () => {
+    editorActor.send({
+      type: "dragend"
+    });
+  }, $[5] = editorActor, $[6] = t2) : t2 = $[6];
   const handleDragEnd = t2;
   let t3;
-  $[8] !== editor || $[9] !== props.element ? (t3 = (event_0) => {
-    editorProvider.IS_DRAGGING.set(editor, !0), editorProvider.IS_DRAGGING_BLOCK_ELEMENT.set(editor, props.element), event_0.stopPropagation();
-    const target = event_0.target;
-    target instanceof HTMLElement && (target.style.opacity = "1");
-  }, $[8] = editor, $[9] = props.element, $[10] = t3) : t3 = $[10];
-  const handleDrag = t3;
-  let t4;
-  $[11] !== blockElement || $[12] !== editor || $[13] !== handleDrag ? (t4 = (event_1) => {
-    if (debug$4("Drag start"), editorProvider.IS_DRAGGING.set(editor, !0), event_1.dataTransfer && (event_1.dataTransfer.setData("application/portable-text", "something"), event_1.dataTransfer.effectAllowed = "move"), blockElement && blockElement instanceof HTMLElement) {
+  $[7] !== blockElement || $[8] !== editor || $[9] !== editorActor ? (t3 = (event) => {
+    const position = getEventPosition({
+      snapshot: editorProvider.getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor
+      }),
+      slateEditor: editor,
+      event: event.nativeEvent
+    });
+    if (!position) {
+      console.error("Could not find position for dragstart event");
+      return;
+    }
+    if (blockElement && blockElement instanceof HTMLElement) {
       let dragGhost = blockElement.cloneNode(!0);
       const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
       if (customGhost && (dragGhost = customGhost), dragGhost.setAttribute("data-dragged", ""), document.body) {
-        dragGhostRef.current = dragGhost, dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
-        const rect = blockElement.getBoundingClientRect(), x = event_1.clientX - rect.left, y = event_1.clientY - rect.top;
-        dragGhost.style.width = `${rect.width}px`, dragGhost.style.height = `${rect.height}px`, event_1.dataTransfer.setDragImage(dragGhost, x, y);
+        dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
+        const rect = blockElement.getBoundingClientRect(), x = event.clientX - rect.left, y = event.clientY - rect.top;
+        dragGhost.style.width = `${rect.width}px`, dragGhost.style.height = `${rect.height}px`, event.dataTransfer.setDragImage(dragGhost, x, y), editorActor.send({
+          type: "dragstart",
+          origin: position,
+          ghost: dragGhost
+        });
+        return;
       }
+      editorActor.send({
+        type: "dragstart",
+        origin: position
+      });
     }
-    handleDrag(event_1);
-  }, $[11] = blockElement, $[12] = editor, $[13] = handleDrag, $[14] = t4) : t4 = $[14];
-  const handleDragStart = t4;
+  }, $[7] = blockElement, $[8] = editor, $[9] = editorActor, $[10] = t3) : t3 = $[10];
+  const handleDragStart = t3;
   if (props.readOnly) {
-    let t52;
-    return $[15] === Symbol.for("react.memo_cache_sentinel") ? (t52 = {
+    let t42;
+    return $[11] === Symbol.for("react.memo_cache_sentinel") ? (t42 = {
       draggableProps: {
         draggable: !1,
         onDragStart: void 0,
-        onDrag: void 0,
         onDragEnd: void 0
       }
-    }, $[15] = t52) : t52 = $[15], t52;
+    }, $[11] = t42) : t42 = $[11], t42;
   }
-  let t5;
-  return $[16] !== handleDrag || $[17] !== handleDragEnd || $[18] !== handleDragStart ? (t5 = {
+  let t4;
+  return $[12] !== handleDragEnd || $[13] !== handleDragStart ? (t4 = {
     draggableProps: {
       draggable: !0,
       onDragStart: handleDragStart,
-      onDrag: handleDrag,
       onDragEnd: handleDragEnd
     }
-  }, $[16] = handleDrag, $[17] = handleDragEnd, $[18] = handleDragStart, $[19] = t5) : t5 = $[19], t5;
-}
-const debug$3 = editorProvider.debugWithName("useDroppable");
-function useDroppable(props) {
-  const $ = reactCompilerRuntime.c(27), editor = slateReact.useSlateStatic(), [isDragOver, setIsDragOver] = React.useState(!1), [blockElement, setBlockElement] = React.useState(null);
-  let t0, t1;
-  $[0] !== editor || $[1] !== props.blockRef || $[2] !== props.element ? (t0 = () => setBlockElement(props.blockRef ? props.blockRef.current : slateReact.ReactEditor.toDOMNode(editor, props.element)), t1 = [editor, props.element, props.blockRef], $[0] = editor, $[1] = props.blockRef, $[2] = props.element, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), React.useEffect(t0, t1);
-  let t2;
-  $[5] !== blockElement || $[6] !== editor || $[7] !== props.element ? (t2 = (event) => {
-    const isMyDragOver = editorProvider.IS_DRAGGING_BLOCK_ELEMENT.get(editor);
-    if (!isMyDragOver || !blockElement)
-      return;
-    event.preventDefault(), event.dataTransfer.dropEffect = "move", editorProvider.IS_DRAGGING_ELEMENT_TARGET.set(editor, props.element);
-    const elementRect = blockElement.getBoundingClientRect(), offset = elementRect.top, height = elementRect.height, Y = event.pageY, loc = Math.abs(offset - Y);
-    if (props.element === editor.children[0] || (loc < height / 2 ? editorProvider.IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, "top") : editorProvider.IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, "bottom")), isMyDragOver === props.element) {
-      event.dataTransfer.dropEffect = "none";
-      return;
-    }
-    setIsDragOver(!0);
-  }, $[5] = blockElement, $[6] = editor, $[7] = props.element, $[8] = t2) : t2 = $[8];
-  const handleDragOver = t2;
-  let t3;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
-    setIsDragOver(!1);
-  }, $[9] = t3) : t3 = $[9];
-  const handleDragLeave = t3;
-  let t4;
-  $[10] !== editor || $[11] !== props.element ? (t4 = (event_0) => {
-    editorProvider.IS_DRAGGING_BLOCK_ELEMENT.get(editor) && (debug$3("On drop (prevented)", props.element), event_0.preventDefault(), event_0.stopPropagation(), setIsDragOver(!1));
-  }, $[10] = editor, $[11] = props.element, $[12] = t4) : t4 = $[12];
-  const handleDrop = t4;
-  let t5;
-  $[13] !== editor || $[14] !== isDragOver ? (t5 = isDragOver && editor.children[0] === editorProvider.IS_DRAGGING_ELEMENT_TARGET.get(editor), $[13] = editor, $[14] = isDragOver, $[15] = t5) : t5 = $[15];
-  const isDraggingOverFirstBlock = t5;
-  let t6;
-  $[16] !== editor || $[17] !== isDragOver ? (t6 = isDragOver && editor.children[editor.children.length - 1] === editorProvider.IS_DRAGGING_ELEMENT_TARGET.get(editor), $[16] = editor, $[17] = isDragOver, $[18] = t6) : t6 = $[18];
-  const isDraggingOverLastBlock = t6, dragPosition = editorProvider.IS_DRAGGING_BLOCK_TARGET_POSITION.get(editor), isDraggingOverTop = isDraggingOverFirstBlock || isDragOver && !isDraggingOverFirstBlock && !isDraggingOverLastBlock && dragPosition === "top", isDraggingOverBottom = isDraggingOverLastBlock || isDragOver && !isDraggingOverFirstBlock && !isDraggingOverLastBlock && dragPosition === "bottom";
-  if (props.readOnly) {
-    let t72;
-    return $[19] === Symbol.for("react.memo_cache_sentinel") ? (t72 = {
-      droppableProps: {
-        onDragOver: void 0,
-        onDragLeave: void 0,
-        onDrop: void 0
-      },
-      isDraggingOverTop: !1,
-      isDraggingOverBottom: !1
-    }, $[19] = t72) : t72 = $[19], t72;
-  }
-  let t7;
-  $[20] !== handleDragOver || $[21] !== handleDrop ? (t7 = {
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onDrop: handleDrop
-  }, $[20] = handleDragOver, $[21] = handleDrop, $[22] = t7) : t7 = $[22];
-  let t8;
-  return $[23] !== isDraggingOverBottom || $[24] !== isDraggingOverTop || $[25] !== t7 ? (t8 = {
-    droppableProps: t7,
-    isDraggingOverTop,
-    isDraggingOverBottom
-  }, $[23] = isDraggingOverBottom, $[24] = isDraggingOverTop, $[25] = t7, $[26] = t8) : t8 = $[26], t8;
+  }, $[12] = handleDragEnd, $[13] = handleDragStart, $[14] = t4) : t4 = $[14], t4;
 }
 editorProvider.debugWithName("components:Element");
 const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
@@ -248,15 +277,86 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
   renderStyle,
   spellCheck
 }) => {
-  const editor = slateReact.useSlateStatic(), selected = slateReact.useSelected(), blockRef = React.useRef(null), inlineBlockObjectRef = React.useRef(null), focused = selected && editor.selection && slate.Range.isCollapsed(editor.selection) || !1, droppable = useDroppable({
+  const editorActor = React.useContext(editorProvider.EditorActorContext), slateEditor = slateReact.useSlateStatic(), selected = slateReact.useSelected(), blockRef = React.useRef(null), inlineBlockObjectRef = React.useRef(null), focused = selected && slateEditor.selection && slate.Range.isCollapsed(slateEditor.selection) || !1, [dragPositionBlock, setDragPositionBlock] = React.useState(), draggable = useDraggable({
     element,
-    blockRef,
-    readOnly
-  }), draggable = useDraggable({
-    element,
-    blockRef,
-    readOnly
-  }), value = React.useMemo(() => editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(editor))[0], [editor, element, schemaTypes.block.name]);
+    readOnly,
+    blockRef
+  });
+  React.useEffect(() => {
+    const behavior = behavior_core.defineBehavior({
+      on: "drag.dragover",
+      guard: ({
+        snapshot,
+        event
+      }) => {
+        const dropFocusBlock = selector_isAtTheStartOfBlock.getFocusBlock({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: event.position.selection
+          }
+        });
+        if (!dropFocusBlock || dropFocusBlock.node._key !== element._key)
+          return !1;
+        const dragOrigin = snapshot.beta.internalDrag?.origin;
+        return !dragOrigin || selector_isAtTheStartOfBlock.getSelectedBlocks({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragOrigin.selection
+          }
+        }).some((draggedBlock) => draggedBlock.node._key === element._key) ? !1 : selector_isOverlappingSelection.isSelectingEntireBlocks({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragOrigin.selection
+          }
+        });
+      },
+      actions: [({
+        event: event_0
+      }) => [{
+        type: "effect",
+        effect: () => {
+          setDragPositionBlock(event_0.position.block);
+        }
+      }, {
+        type: "noop"
+      }]]
+    });
+    return editorActor.send({
+      type: "add behavior",
+      behavior
+    }), () => {
+      editorActor.send({
+        type: "remove behavior",
+        behavior
+      });
+    };
+  }, [editorActor, element._key]), React.useEffect(() => {
+    const behavior_0 = behavior_core.defineBehavior({
+      on: "drag.*",
+      guard: ({
+        event: event_1
+      }) => event_1.type !== "drag.dragover",
+      actions: [() => [{
+        type: "effect",
+        effect: () => {
+          setDragPositionBlock(void 0);
+        }
+      }]]
+    });
+    return editorActor.send({
+      type: "add behavior",
+      behavior: behavior_0
+    }), () => {
+      editorActor.send({
+        type: "remove behavior",
+        behavior: behavior_0
+      });
+    };
+  }, [editorActor]);
+  const value = React.useMemo(() => editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(slateEditor))[0], [slateEditor, element, schemaTypes.block.name]);
   let renderedBlock = children, className;
   const blockPath = React.useMemo(() => [{
     _key: element._key
@@ -265,8 +365,8 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
     throw new Error("Expected element to have a _type property");
   if (typeof element._key != "string")
     throw new Error("Expected element to have a _key property");
-  if (editor.isInline(element)) {
-    const path = slateReact.ReactEditor.findPath(editor, element), [block] = slate.Editor.node(editor, path, {
+  if (slateEditor.isInline(element)) {
+    const path = slateReact.ReactEditor.findPath(slateEditor, element), [block] = slate.Editor.node(slateEditor, path, {
       depth: 1
     }), schemaType = schemaTypes.inlineObjects.find((_type) => _type.name === element._type);
     if (!schemaType)
@@ -314,7 +414,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
       editorElementRef: blockRef
     }));
     let level;
-    if (isListItem && (typeof element.level == "number" && (level = element.level), className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`), editor.isListBlock(value) && isListItem && element.listItem) {
+    if (isListItem && (typeof element.level == "number" && (level = element.level), className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`), slateEditor.isListBlock(value) && isListItem && element.listItem) {
       const listType = schemaTypes.lists.find((item_0) => item_0.value === element.listItem);
       renderListItem && listType && (renderedBlock = renderListItem({
         block: value,
@@ -345,17 +445,17 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
         return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaTypes.block;
       }
     }), propsOrDefaultRendered = renderBlock ? renderBlock(renderProps) : children;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, spellCheck, ...droppable.droppableProps, children: [
-      droppable.isDraggingOverTop ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, spellCheck, children: [
+      dragPositionBlock === "start" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, children: propsOrDefaultRendered }),
-      droppable.isDraggingOverBottom ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+      dragPositionBlock === "end" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
     ] }, element._key);
   }
   const schemaType_0 = schemaTypes.blockObjects.find((_type_0) => _type_0.name === element._type);
   if (!schemaType_0)
     throw new Error(`Could not find schema type for block element of _type ${element._type}`);
   className = "pt-block pt-object-block";
-  const block_0 = editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(editor))[0];
+  const block_0 = editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(slateEditor))[0];
   let renderedBlockFromProps;
   if (renderBlock) {
     const _props = Object.defineProperty({
@@ -374,11 +474,11 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
     });
     renderedBlockFromProps = renderBlock(_props);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, ...droppable.droppableProps, ...draggable.draggableProps, children: [
-    droppable.isDraggingOverTop ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, ...draggable.draggableProps, children: [
+    dragPositionBlock === "start" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
     children,
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsxRuntime.jsx(DefaultBlockObject, { value }) }),
-    droppable.isDraggingOverBottom ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+    dragPositionBlock === "end" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
   ] }, element._key);
 };
 Element.displayName = "Element";
@@ -576,7 +676,15 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
     onBeforeInput,
     onPaste,
     onCopy,
+    onCut,
     onClick,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    onDragEnter,
+    onDragOver,
+    onDrop,
+    onDragLeave,
     rangeDecorations,
     renderAnnotation,
     renderBlock,
@@ -688,47 +796,151 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
     return () => teardown();
   }, [editorActor, slateEditor, syncRangeDecorations]);
   const handleCopy = React.useCallback((event) => {
-    onCopy ? onCopy(event) !== void 0 && event.preventDefault() : event.nativeEvent.clipboardData && editorActor.send({
-      type: "behavior event",
-      behaviorEvent: {
-        type: "copy",
-        data: event.nativeEvent.clipboardData
-      },
-      editor: slateEditor,
-      nativeEvent: event
-    });
-  }, [onCopy, editorActor, slateEditor]), handlePaste = React.useCallback((event_0) => {
+    if (onCopy)
+      onCopy(event) !== void 0 && event.preventDefault();
+    else if (event.nativeEvent.clipboardData) {
+      event.stopPropagation(), event.preventDefault();
+      const position = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event.nativeEvent
+      });
+      if (!position) {
+        console.warn("Could not find position for copy event");
+        return;
+      }
+      editorActor.send({
+        type: "behavior event",
+        behaviorEvent: {
+          type: "copy",
+          data: event.nativeEvent.clipboardData,
+          position
+        },
+        editor: slateEditor,
+        nativeEvent: event
+      });
+    }
+  }, [onCopy, editorActor, slateEditor]), handleCut = React.useCallback((event_0) => {
+    if (onCut)
+      onCut(event_0) !== void 0 && event_0.preventDefault();
+    else if (event_0.nativeEvent.clipboardData) {
+      event_0.stopPropagation(), event_0.preventDefault();
+      const position_0 = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event_0.nativeEvent
+      });
+      if (!position_0) {
+        console.warn("Could not find position for cut event");
+        return;
+      }
+      editorActor.send({
+        type: "behavior event",
+        behaviorEvent: {
+          type: "cut",
+          dataTransfer: event_0.nativeEvent.clipboardData,
+          position: position_0
+        },
+        editor: slateEditor,
+        nativeEvent: event_0
+      });
+    }
+  }, [onCut, editorActor, slateEditor]), handlePaste = React.useCallback((event_1) => {
     const value_0 = editorProvider.PortableTextEditor.getValue(portableTextEditor), path = editorProvider.toPortableTextRange(value_0, slateEditor.selection, schemaTypes)?.focus.path || [], onPasteResult = onPaste?.({
-      event: event_0,
+      event: event_1,
       value: value_0,
       path,
       schemaTypes
     });
-    onPasteResult || !slateEditor.selection ? (event_0.preventDefault(), editorActor.send({
-      type: "notify.loading"
-    }), Promise.resolve(onPasteResult).then((result_0) => {
-      debug("Custom paste function from client resolved", result_0), !result_0 || !result_0.insert ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event_0.clipboardData)) : result_0.insert ? slateEditor.insertFragment(editorProvider.toSlateValue(result_0.insert, {
-        schemaTypes
-      })) : console.warn("Your onPaste function returned something unexpected:", result_0);
-    }).catch((error) => (console.error(error), error)).finally(() => {
+    if (onPasteResult || !slateEditor.selection)
+      event_1.preventDefault(), editorActor.send({
+        type: "notify.loading"
+      }), Promise.resolve(onPasteResult).then((result_1) => {
+        if (debug("Custom paste function from client resolved", result_1), !result_1 || !result_1.insert) {
+          debug("No result from custom paste handler, pasting normally");
+          const position_1 = getEventPosition({
+            snapshot: editorProvider.getEditorSnapshot({
+              editorActorSnapshot: editorActor.getSnapshot(),
+              slateEditorInstance: slateEditor
+            }),
+            slateEditor,
+            event: event_1.nativeEvent
+          });
+          if (!position_1) {
+            console.warn("Could not find position for paste event");
+            return;
+          }
+          editorActor.send({
+            type: "behavior event",
+            behaviorEvent: {
+              type: "paste",
+              data: event_1.clipboardData,
+              position: position_1
+            },
+            editor: slateEditor,
+            nativeEvent: event_1
+          });
+        } else result_1.insert ? editorActor.send({
+          type: "behavior event",
+          behaviorEvent: {
+            type: "insert.blocks",
+            blocks: parseBlocks.parseBlocks({
+              context: {
+                keyGenerator: editorActor.getSnapshot().context.keyGenerator,
+                schema: editorActor.getSnapshot().context.schema
+              },
+              blocks: result_1.insert,
+              options: {
+                refreshKeys: !0
+              }
+            }),
+            placement: "auto"
+          },
+          editor: slateEditor
+        }) : console.warn("Your onPaste function returned something unexpected:", result_1);
+      }).catch((error) => (console.warn(error), error)).finally(() => {
+        editorActor.send({
+          type: "notify.done loading"
+        });
+      });
+    else if (event_1.nativeEvent.clipboardData) {
+      event_1.preventDefault(), event_1.stopPropagation();
+      const position_2 = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event_1.nativeEvent
+      });
+      if (!position_2) {
+        console.warn("Could not find position for paste event");
+        return;
+      }
       editorActor.send({
-        type: "notify.done loading"
+        type: "behavior event",
+        behaviorEvent: {
+          type: "paste",
+          data: event_1.nativeEvent.clipboardData,
+          position: position_2
+        },
+        editor: slateEditor,
+        nativeEvent: event_1
       });
-    })) : event_0.nativeEvent.clipboardData && editorActor.send({
-      type: "behavior event",
-      behaviorEvent: {
-        type: "paste",
-        data: event_0.nativeEvent.clipboardData
-      },
-      editor: slateEditor,
-      nativeEvent: event_0
-    }), debug("No result from custom paste handler, pasting normally");
-  }, [editorActor, onPaste, portableTextEditor, schemaTypes, slateEditor]), handleOnFocus = React.useCallback((event_1) => {
-    if (onFocus && onFocus(event_1), !event_1.isDefaultPrevented()) {
+    }
+    debug("No result from custom paste handler, pasting normally");
+  }, [editorActor, onPaste, portableTextEditor, schemaTypes, slateEditor]), handleOnFocus = React.useCallback((event_2) => {
+    if (onFocus && onFocus(event_2), !event_2.isDefaultPrevented()) {
       const selection = editorProvider.PortableTextEditor.getSelection(portableTextEditor);
       selection === null && (slate.Transforms.select(slateEditor, slate.Editor.start(slateEditor, [])), slateEditor.onChange()), editorActor.send({
         type: "notify.focused",
-        event: event_1
+        event: event_2
       });
       const newSelection = editorProvider.PortableTextEditor.getSelection(portableTextEditor);
       selection === newSelection && editorActor.send({
@@ -736,19 +948,37 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
         selection
       });
     }
-  }, [editorActor, onFocus, portableTextEditor, slateEditor]), handleClick = React.useCallback((event_2) => {
-    onClick && onClick(event_2);
-    const focusBlockPath = slateEditor.selection ? slateEditor.selection.focus.path.slice(0, 1) : void 0, focusBlock = focusBlockPath ? slate.Node.descendant(slateEditor, focusBlockPath) : void 0, [_, lastNodePath] = slate.Node.last(slateEditor, []), lastBlockPath = lastNodePath.slice(0, 1), lastNodeFocused = focusBlockPath ? slate.Path.equals(lastBlockPath, focusBlockPath) : !1, lastBlockIsVoid = focusBlock ? !slateEditor.isTextBlock(focusBlock) : !1;
-    slateEditor.selection && slate.Range.isCollapsed(slateEditor.selection) && lastNodeFocused && lastBlockIsVoid && (slate.Transforms.insertNodes(slateEditor, slateEditor.pteCreateTextBlock({
-      decorators: []
-    })), slateEditor.onChange());
-  }, [onClick, slateEditor]), handleOnBlur = React.useCallback((event_3) => {
-    onBlur && onBlur(event_3), event_3.isPropagationStopped() || editorActor.send({
+  }, [editorActor, onFocus, portableTextEditor, slateEditor]), handleClick = React.useCallback((event_3) => {
+    if (onClick && onClick(event_3), event_3.isDefaultPrevented() || event_3.isPropagationStopped())
+      return;
+    const position_3 = getEventPosition({
+      snapshot: editorProvider.getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor
+      }),
+      slateEditor,
+      event: event_3.nativeEvent
+    });
+    if (!position_3) {
+      console.warn("Could not find EventPosition for MouseEvent");
+      return;
+    }
+    editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "mouse.click",
+        position: position_3
+      },
+      editor: slateEditor,
+      nativeEvent: event_3
+    });
+  }, [onClick, editorActor, slateEditor]), handleOnBlur = React.useCallback((event_4) => {
+    onBlur && onBlur(event_4), event_4.isPropagationStopped() || editorActor.send({
       type: "notify.blurred",
-      event: event_3
+      event: event_4
     });
-  }, [editorActor, onBlur]), handleOnBeforeInput = React.useCallback((event_4) => {
-    onBeforeInput && onBeforeInput(event_4);
+  }, [editorActor, onBlur]), handleOnBeforeInput = React.useCallback((event_5) => {
+    onBeforeInput && onBeforeInput(event_5);
   }, [onBeforeInput]), validateSelection = React.useCallback(() => {
     if (!slateEditor.selection)
       return;
@@ -782,39 +1012,39 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
       };
     }
   }, [validateSelection, editableElement]);
-  const handleKeyDown = React.useCallback((event_5) => {
-    props.onKeyDown && props.onKeyDown(event_5), event_5.isDefaultPrevented() || slateEditor.pteWithHotKeys(event_5), event_5.isDefaultPrevented() || editorActor.send({
+  const handleKeyDown = React.useCallback((event_6) => {
+    props.onKeyDown && props.onKeyDown(event_6), event_6.isDefaultPrevented() || slateEditor.pteWithHotKeys(event_6), event_6.isDefaultPrevented() || editorActor.send({
       type: "behavior event",
       behaviorEvent: {
         type: "key.down",
         keyboardEvent: {
-          key: event_5.key,
-          code: event_5.code,
-          altKey: event_5.altKey,
-          ctrlKey: event_5.ctrlKey,
-          metaKey: event_5.metaKey,
-          shiftKey: event_5.shiftKey
+          key: event_6.key,
+          code: event_6.code,
+          altKey: event_6.altKey,
+          ctrlKey: event_6.ctrlKey,
+          metaKey: event_6.metaKey,
+          shiftKey: event_6.shiftKey
         }
       },
       editor: slateEditor,
-      nativeEvent: event_5
+      nativeEvent: event_6
     });
-  }, [props, editorActor, slateEditor]), handleKeyUp = React.useCallback((event_6) => {
-    props.onKeyUp && props.onKeyUp(event_6), event_6.isDefaultPrevented() || editorActor.send({
+  }, [props, editorActor, slateEditor]), handleKeyUp = React.useCallback((event_7) => {
+    props.onKeyUp && props.onKeyUp(event_7), event_7.isDefaultPrevented() || editorActor.send({
       type: "behavior event",
       behaviorEvent: {
         type: "key.up",
         keyboardEvent: {
-          key: event_6.key,
-          code: event_6.code,
-          altKey: event_6.altKey,
-          ctrlKey: event_6.ctrlKey,
-          metaKey: event_6.metaKey,
-          shiftKey: event_6.shiftKey
+          key: event_7.key,
+          code: event_7.code,
+          altKey: event_7.altKey,
+          ctrlKey: event_7.ctrlKey,
+          metaKey: event_7.metaKey,
+          shiftKey: event_7.shiftKey
         }
       },
       editor: slateEditor,
-      nativeEvent: event_6
+      nativeEvent: event_7
     });
   }, [props, editorActor, slateEditor]), scrollSelectionIntoViewToSlate = React.useMemo(() => {
     if (scrollSelectionIntoView !== void 0)
@@ -836,7 +1066,7 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
       }];
     if (path_0.length === 0)
       return [];
-    const result_1 = rangeDecorationState.filter((item) => slate.Range.isCollapsed(item) ? path_0.length !== 2 ? !1 : slate.Path.equals(item.focus.path, path_0) && slate.Path.equals(item.anchor.path, path_0) : slate.Range.intersection(item, {
+    const result_2 = rangeDecorationState.filter((item) => slate.Range.isCollapsed(item) ? path_0.length !== 2 ? !1 : slate.Path.equals(item.focus.path, path_0) && slate.Path.equals(item.anchor.path, path_0) : slate.Range.intersection(item, {
       anchor: {
         path: path_0,
         offset: 0
@@ -846,24 +1076,164 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
         offset: 0
       }
     }) || slate.Range.includes(item, path_0));
-    return result_1.length > 0 ? result_1 : [];
+    return result_2.length > 0 ? result_2 : [];
   }, [slateEditor, schemaTypes, rangeDecorationState]);
-  return React.useEffect(() => {
+  React.useEffect(() => {
     ref.current = slateReact.ReactEditor.toDOMNode(slateEditor, slateEditor), setEditableElement(ref.current);
   }, [slateEditor, ref]), React.useEffect(() => {
-    const window_0 = slateReact.ReactEditor.getWindow(slateEditor), onDragEnd = () => {
+    const window_0 = slateReact.ReactEditor.getWindow(slateEditor), onDragEnd_0 = () => {
       editorActor.send({
         type: "dragend"
       });
-    }, onDrop = () => {
+    }, onDrop_0 = () => {
       editorActor.send({
         type: "drop"
       });
     };
-    return window_0.document.addEventListener("dragend", onDragEnd), window_0.document.addEventListener("drop", onDrop), () => {
-      window_0.document.removeEventListener("dragend", onDragEnd), window_0.document.removeEventListener("drop", onDrop);
+    return window_0.document.addEventListener("dragend", onDragEnd_0), window_0.document.addEventListener("drop", onDrop_0), () => {
+      window_0.document.removeEventListener("dragend", onDragEnd_0), window_0.document.removeEventListener("drop", onDrop_0);
     };
-  }, [slateEditor, editorActor]), portableTextEditor ? hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(
+  }, [slateEditor, editorActor]);
+  const handleDragStart = React.useCallback((event_8) => {
+    if (onDragStart?.(event_8), !event_8.isDefaultPrevented() && !event_8.isPropagationStopped()) {
+      const position_4 = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event_8.nativeEvent
+      });
+      if (!position_4) {
+        console.warn("Could not find position for dragstart event");
+        return;
+      }
+      if (slateReact.ReactEditor.hasTarget(slateEditor, event_8.target)) {
+        const node = slateReact.ReactEditor.toSlateNode(slateEditor, event_8.target), path_1 = slateReact.ReactEditor.findPath(slateEditor, node);
+        if (slate.Element.isElement(node) && slate.Editor.isVoid(slateEditor, node) || slate.Editor.void(slateEditor, {
+          at: path_1,
+          voids: !0
+        })) {
+          const range = slate.Editor.range(slateEditor, path_1);
+          slate.Transforms.select(slateEditor, range);
+        }
+      }
+      editorActor.send({
+        type: "dragstart",
+        origin: position_4
+      }), editorActor.send({
+        type: "behavior event",
+        behaviorEvent: {
+          type: "drag.dragstart",
+          dataTransfer: event_8.dataTransfer,
+          position: position_4
+        },
+        editor: slateEditor
+      }), event_8.stopPropagation();
+    }
+  }, [onDragStart, editorActor, slateEditor]), handleDrag = React.useCallback((event_9) => {
+    onDrag?.(event_9), !event_9.isDefaultPrevented() && !event_9.isPropagationStopped() && (editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.drag",
+        dataTransfer: event_9.dataTransfer
+      },
+      editor: slateEditor
+    }), event_9.stopPropagation());
+  }, [onDrag, editorActor, slateEditor]), handleDragEnd = React.useCallback((event_10) => {
+    onDragEnd?.(event_10), !event_10.isDefaultPrevented() && !event_10.isPropagationStopped() && (editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.dragend",
+        dataTransfer: event_10.dataTransfer
+      },
+      editor: slateEditor
+    }), event_10.stopPropagation());
+  }, [onDragEnd, editorActor, slateEditor]), handleDragEnter = React.useCallback((event_11) => {
+    if (onDragEnter?.(event_11), !event_11.isDefaultPrevented() && !event_11.isPropagationStopped()) {
+      const position_5 = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event_11.nativeEvent
+      });
+      if (!position_5) {
+        console.warn("Could not find position for dragenter event");
+        return;
+      }
+      editorActor.send({
+        type: "behavior event",
+        behaviorEvent: {
+          type: "drag.dragenter",
+          dataTransfer: event_11.dataTransfer,
+          position: position_5
+        },
+        editor: slateEditor
+      }), event_11.stopPropagation();
+    }
+  }, [onDragEnter, editorActor, slateEditor]), handleDragOver = React.useCallback((event_12) => {
+    if (onDragOver?.(event_12), !event_12.isDefaultPrevented() && !event_12.isPropagationStopped()) {
+      const position_6 = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event_12.nativeEvent
+      });
+      if (!position_6) {
+        console.warn("Could not find position for dragover event");
+        return;
+      }
+      editorActor.send({
+        type: "behavior event",
+        behaviorEvent: {
+          type: "drag.dragover",
+          dataTransfer: event_12.dataTransfer,
+          position: position_6
+        },
+        editor: slateEditor,
+        nativeEvent: event_12
+      }), event_12.stopPropagation();
+    }
+  }, [onDragOver, editorActor, slateEditor]), handleDrop = React.useCallback((event_13) => {
+    if (onDrop?.(event_13), !event_13.isDefaultPrevented() && !event_13.isPropagationStopped()) {
+      const position_7 = getEventPosition({
+        snapshot: editorProvider.getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: slateEditor
+        }),
+        slateEditor,
+        event: event_13.nativeEvent
+      });
+      if (!position_7) {
+        console.warn("Could not find position for drop event");
+        return;
+      }
+      const range_0 = slateReact.ReactEditor.findEventRange(slateEditor, event_13);
+      slateEditor.select(range_0), editorActor.send({
+        type: "behavior event",
+        behaviorEvent: {
+          type: "drag.drop",
+          dataTransfer: event_13.dataTransfer,
+          position: position_7
+        },
+        editor: slateEditor
+      }), event_13.preventDefault();
+    }
+  }, [onDrop, editorActor, slateEditor]), handleDragLeave = React.useCallback((event_14) => {
+    onDragLeave?.(event_14), !event_14.isDefaultPrevented() && !event_14.isPropagationStopped() && editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.dragleave",
+        dataTransfer: event_14.dataTransfer
+      },
+      editor: slateEditor
+    });
+  }, [onDragLeave, editorActor, slateEditor]);
+  return portableTextEditor ? hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(
     slateReact.Editable,
     {
       ...restProps,
@@ -872,13 +1242,16 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
       decorate,
       onBlur: handleOnBlur,
       onCopy: handleCopy,
+      onCut: handleCut,
       onClick: handleClick,
       onDOMBeforeInput: handleOnBeforeInput,
-      onDragStart: (event_7) => {
-        props.onDragStart?.(event_7), !event_7.isDefaultPrevented() && !event_7.isPropagationStopped() && editorActor.send({
-          type: "dragstart"
-        });
-      },
+      onDragStart: handleDragStart,
+      onDrag: handleDrag,
+      onDragEnd: handleDragEnd,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onDragLeave: handleDragLeave,
       onFocus: handleOnFocus,
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,