@portabletext/editor 1.36.0 → 1.36.2

package/lib/index.d.cts

@@ -38,7 +38,7 @@ import {
 } from 'react'
 import type {Observable, Subject} from 'rxjs'
 import {Descendant, TextUnit} from 'slate'
-import type {Node as Node_2, Operation} from 'slate'
+import type {Operation} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
 import {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
@@ -100,7 +100,7 @@ export declare type BaseDefinition = {
 /**
  * @beta
  */
-export declare type Behavior<
+declare type Behavior<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
   TGuardResponse = true,
   TBehaviorEvent extends BehaviorEvent = TBehaviorEventType extends '*'
@@ -126,7 +126,7 @@ export declare type Behavior<
 /**
  * @beta
  */
-export declare type BehaviorActionIntend =
+declare type BehaviorActionIntend =
   | SyntheticBehaviorEvent
   | {
       type: 'raise'
@@ -143,7 +143,7 @@ export declare type BehaviorActionIntend =
 /**
  * @beta
  */
-export declare type BehaviorActionIntendSet<TBehaviorEvent, TGuardResponse> = (
+declare type BehaviorActionIntendSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
     /**
      * @deprecated
@@ -159,7 +159,7 @@ export declare type BehaviorActionIntendSet<TBehaviorEvent, TGuardResponse> = (
 /**
  * @beta
  */
-export declare type BehaviorEvent =
+declare type BehaviorEvent =
   | SyntheticBehaviorEvent
   | NativeBehaviorEvent
   | CustomBehaviorEvent
@@ -170,7 +170,7 @@ export declare type BehaviorEvent =
 /**
  * @beta
  */
-export declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
+declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
   /**
    * @deprecated
    * Use `snapshot` instead
@@ -19571,12 +19571,6 @@ declare const editorMachine: StateMachine<
   }
 >
 
-/** @internal */
-export declare type EditorNode = Node_2 & {
-  _key: string
-  _type: string
-}
-
 /**
  * @public
  * The EditorProvider component is used to set up the editor context and configure the Portable Text Editor.
@@ -19705,15 +19699,12 @@ export declare type FocusChange = {
 
 declare type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
 
-/** @internal */
 declare interface History_2 {
   redos: HistoryItem[]
   undos: HistoryItem[]
 }
-export {History_2 as History}
 
-/** @internal */
-export declare type HistoryItem = {
+declare type HistoryItem = {
   operations: Operation[]
   timestamp: Date
 }
@@ -19820,7 +19811,7 @@ declare type NamespaceEvent<
 /**
  * @beta
  */
-export declare type NativeBehaviorEvent =
+declare type NativeBehaviorEvent =
   | {
       type: 'copy'
       data: DataTransfer
@@ -19939,7 +19930,7 @@ export {PortableTextChild}
  * @public
  *
  *
- * The core component that renders the editor. Must be placed within the {@link EventProvider} component.
+ * The core component that renders the editor. Must be placed within the {@link EditorProvider} component.
  *
  * @example
  * ```tsx
@@ -20486,7 +20477,7 @@ export declare type PortableTextEditorProps<
       }
 >
 
-/** @internal */
+/** @beta */
 export declare type PortableTextMemberSchemaTypes = {
   annotations: (ObjectSchemaType & {
     i18nTitleKey?: string
@@ -20501,8 +20492,7 @@ export declare type PortableTextMemberSchemaTypes = {
   lists: BlockListDefinition[]
 }
 
-/** @internal */
-export declare interface PortableTextSlateEditor extends ReactEditor {
+declare interface PortableTextSlateEditor extends ReactEditor {
   _key: 'editor'
   _type: 'editor'
   createPlaceholderBlock: () => Descendant
@@ -20674,10 +20664,7 @@ declare type Serializer<TMIMEType extends MIMEType> = ({
   'serialization.success' | 'serialization.failure'
 >
 
-/**
- * @internal
- */
-export declare type SlateEditor = {
+declare type SlateEditor = {
   instance: PortableTextSlateEditor
   initialValue: Array<Descendant>
 }
@@ -20685,7 +20672,7 @@ export declare type SlateEditor = {
 /**
  * @beta
  */
-export declare type SyntheticBehaviorEvent =
+declare type SyntheticBehaviorEvent =
   | {
       type: 'annotation.add'
       annotation: {

package/lib/index.d.ts

@@ -38,7 +38,7 @@ import {
 } from 'react'
 import type {Observable, Subject} from 'rxjs'
 import {Descendant, TextUnit} from 'slate'
-import type {Node as Node_2, Operation} from 'slate'
+import type {Operation} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
 import {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
@@ -100,7 +100,7 @@ export declare type BaseDefinition = {
 /**
  * @beta
  */
-export declare type Behavior<
+declare type Behavior<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
   TGuardResponse = true,
   TBehaviorEvent extends BehaviorEvent = TBehaviorEventType extends '*'
@@ -126,7 +126,7 @@ export declare type Behavior<
 /**
  * @beta
  */
-export declare type BehaviorActionIntend =
+declare type BehaviorActionIntend =
   | SyntheticBehaviorEvent
   | {
       type: 'raise'
@@ -143,7 +143,7 @@ export declare type BehaviorActionIntend =
 /**
  * @beta
  */
-export declare type BehaviorActionIntendSet<TBehaviorEvent, TGuardResponse> = (
+declare type BehaviorActionIntendSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
     /**
      * @deprecated
@@ -159,7 +159,7 @@ export declare type BehaviorActionIntendSet<TBehaviorEvent, TGuardResponse> = (
 /**
  * @beta
  */
-export declare type BehaviorEvent =
+declare type BehaviorEvent =
   | SyntheticBehaviorEvent
   | NativeBehaviorEvent
   | CustomBehaviorEvent
@@ -170,7 +170,7 @@ export declare type BehaviorEvent =
 /**
  * @beta
  */
-export declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
+declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
   /**
    * @deprecated
    * Use `snapshot` instead
@@ -19571,12 +19571,6 @@ declare const editorMachine: StateMachine<
   }
 >
 
-/** @internal */
-export declare type EditorNode = Node_2 & {
-  _key: string
-  _type: string
-}
-
 /**
  * @public
  * The EditorProvider component is used to set up the editor context and configure the Portable Text Editor.
@@ -19705,15 +19699,12 @@ export declare type FocusChange = {
 
 declare type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
 
-/** @internal */
 declare interface History_2 {
   redos: HistoryItem[]
   undos: HistoryItem[]
 }
-export {History_2 as History}
 
-/** @internal */
-export declare type HistoryItem = {
+declare type HistoryItem = {
   operations: Operation[]
   timestamp: Date
 }
@@ -19820,7 +19811,7 @@ declare type NamespaceEvent<
 /**
  * @beta
  */
-export declare type NativeBehaviorEvent =
+declare type NativeBehaviorEvent =
   | {
       type: 'copy'
       data: DataTransfer
@@ -19939,7 +19930,7 @@ export {PortableTextChild}
  * @public
  *
  *
- * The core component that renders the editor. Must be placed within the {@link EventProvider} component.
+ * The core component that renders the editor. Must be placed within the {@link EditorProvider} component.
  *
  * @example
  * ```tsx
@@ -20486,7 +20477,7 @@ export declare type PortableTextEditorProps<
       }
 >
 
-/** @internal */
+/** @beta */
 export declare type PortableTextMemberSchemaTypes = {
   annotations: (ObjectSchemaType & {
     i18nTitleKey?: string
@@ -20501,8 +20492,7 @@ export declare type PortableTextMemberSchemaTypes = {
   lists: BlockListDefinition[]
 }
 
-/** @internal */
-export declare interface PortableTextSlateEditor extends ReactEditor {
+declare interface PortableTextSlateEditor extends ReactEditor {
   _key: 'editor'
   _type: 'editor'
   createPlaceholderBlock: () => Descendant
@@ -20674,10 +20664,7 @@ declare type Serializer<TMIMEType extends MIMEType> = ({
   'serialization.success' | 'serialization.failure'
 >
 
-/**
- * @internal
- */
-export declare type SlateEditor = {
+declare type SlateEditor = {
   instance: PortableTextSlateEditor
   initialValue: Array<Descendant>
 }
@@ -20685,7 +20672,7 @@ export declare type SlateEditor = {
 /**
  * @beta
  */
-export declare type SyntheticBehaviorEvent =
+declare type SyntheticBehaviorEvent =
   | {
       type: 'annotation.add'
       annotation: {

package/lib/index.js

@@ -1,11 +1,11 @@
-import { debugWithName, IS_DRAGGING_ELEMENT_TARGET, IS_DRAGGING_BLOCK_TARGET_POSITION, IS_DRAGGING_BLOCK_ELEMENT, IS_DRAGGING, fromSlateValue, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, EditorActorContext, toSlateRange, moveRangeByOperation, toPortableTextRange, toSlateValue, isEqualToEmptyEditor, useEditor } from "./_chunks-es/editor-provider.js";
+import { debugWithName, IS_DRAGGING_ELEMENT_TARGET, IS_DRAGGING, IS_DRAGGING_BLOCK_TARGET_POSITION, IS_DRAGGING_BLOCK_ELEMENT, fromSlateValue, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, EditorActorContext, toSlateRange, moveRangeByOperation, toPortableTextRange, toSlateValue, isEqualToEmptyEditor, useEditor } from "./_chunks-es/editor-provider.js";
 import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useSelector } from "@xstate/react";
 import isEqual from "lodash/isEqual.js";
 import noop from "lodash/noop.js";
 import { useRef, useState, useEffect, useMemo, startTransition, useCallback, forwardRef, useImperativeHandle, useContext } from "react";
-import { Editor, Path, Transforms, Range, Element as Element$1, Text, Node } from "slate";
+import { Path, Transforms, Range, Editor, Element as Element$1, Text, Node } from "slate";
 import { useSlateStatic, ReactEditor, useSelected, useSlate, Editable } from "slate-react";
 import { c } from "react-compiler-runtime";
 import uniq from "lodash/uniq.js";
@@ -87,136 +87,158 @@ function DefaultInlineObject(props) {
     "]"
   ] }), $[1] = props.value._key, $[2] = props.value._type, $[3] = t1) : t1 = $[3], t1;
 }
-const debug$3 = debugWithName("components:DraggableBlock"), DraggableBlock = (t0) => {
-  const $ = c(51), {
-    children,
-    element,
-    readOnly,
-    blockRef
-  } = t0, editor = useSlateStatic(), dragGhostRef = useRef(void 0), [isDragOver, setIsDragOver] = useState(!1);
-  let t1, t2;
-  $[0] !== editor || $[1] !== element ? (t2 = Editor.isVoid(editor, element), $[0] = editor, $[1] = element, $[2] = t2) : t2 = $[2], t1 = t2;
-  const isVoid = t1;
-  let t3, t4;
-  $[3] !== editor || $[4] !== element ? (t4 = Editor.isInline(editor, element), $[3] = editor, $[4] = element, $[5] = t4) : t4 = $[5], t3 = t4;
-  const isInline = t3, [blockElement, setBlockElement] = useState(null);
-  let t5, t6;
-  $[6] !== blockRef || $[7] !== editor || $[8] !== element ? (t5 = () => setBlockElement(blockRef ? blockRef.current : ReactEditor.toDOMNode(editor, element)), t6 = [editor, element, blockRef], $[6] = blockRef, $[7] = editor, $[8] = element, $[9] = t5, $[10] = t6) : (t5 = $[9], t6 = $[10]), useEffect(t5, t6);
-  let t7;
-  $[11] !== blockElement || $[12] !== editor || $[13] !== element ? (t7 = (event) => {
-    const isMyDragOver = IS_DRAGGING_BLOCK_ELEMENT.get(editor);
-    if (!isMyDragOver || !blockElement)
-      return;
-    event.preventDefault(), event.dataTransfer.dropEffect = "move", IS_DRAGGING_ELEMENT_TARGET.set(editor, element);
-    const elementRect = blockElement.getBoundingClientRect(), offset = elementRect.top, height = elementRect.height, Y = event.pageY, loc = Math.abs(offset - Y);
-    if (element === editor.children[0] || (loc < height / 2 ? IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, "top") : IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, "bottom")), isMyDragOver === element) {
-      event.dataTransfer.dropEffect = "none";
-      return;
-    }
-    setIsDragOver(!0);
-  }, $[11] = blockElement, $[12] = editor, $[13] = element, $[14] = t7) : t7 = $[14];
-  const handleDragOver = t7;
-  let t8;
-  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => {
-    setIsDragOver(!1);
-  }, $[15] = t8) : t8 = $[15];
-  const handleDragLeave = t8;
-  let t9;
-  $[16] !== editor || $[17] !== element ? (t9 = (event_0) => {
+function DropIndicator() {
+  const $ = c(1);
+  let t0;
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("div", { className: "pt-drop-indicator", style: {
+    position: "absolute",
+    width: "100%",
+    height: 1,
+    borderBottom: "1px solid currentColor",
+    zIndex: 5
+  } }), $[0] = t0) : t0 = $[0], t0;
+}
+const debug$4 = debugWithName("useDraggable");
+function useDraggable(props) {
+  const $ = c(20), editor = useSlateStatic(), dragGhostRef = useRef(void 0), [blockElement, setBlockElement] = useState(null);
+  let t0, t1;
+  $[0] !== editor || $[1] !== props.blockRef || $[2] !== props.element ? (t0 = () => setBlockElement(props.blockRef ? props.blockRef.current : 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]), useEffect(t0, t1);
+  let t2;
+  $[5] !== editor || $[6] !== props.element ? (t2 = (event) => {
     const targetBlock = IS_DRAGGING_ELEMENT_TARGET.get(editor);
     if (targetBlock) {
-      IS_DRAGGING.set(editor, !1), event_0.preventDefault(), event_0.stopPropagation(), IS_DRAGGING_ELEMENT_TARGET.delete(editor), dragGhostRef.current && (debug$3("Removing drag ghost"), document.body.removeChild(dragGhostRef.current));
+      IS_DRAGGING.set(editor, !1), event.preventDefault(), event.stopPropagation(), IS_DRAGGING_ELEMENT_TARGET.delete(editor), dragGhostRef.current && (debug$4("Removing drag ghost"), document.body.removeChild(dragGhostRef.current));
       const dragPosition = IS_DRAGGING_BLOCK_TARGET_POSITION.get(editor);
       IS_DRAGGING_BLOCK_TARGET_POSITION.delete(editor);
       let targetPath = ReactEditor.findPath(editor, targetBlock);
-      const myPath = ReactEditor.findPath(editor, element), isBefore = Path.isBefore(myPath, targetPath);
+      const myPath = ReactEditor.findPath(editor, props.element), isBefore = Path.isBefore(myPath, targetPath);
       if (dragPosition === "bottom" && !isBefore) {
         if (targetPath[0] >= editor.children.length - 1) {
-          debug$3("target is already at the bottom, not moving");
+          debug$4("target is already at the bottom, not moving");
           return;
         }
         const originalPath = targetPath;
-        targetPath = Path.next(targetPath), debug$3(`Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(targetPath)}`);
+        targetPath = 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 = Path.previous(targetPath), debug$3(`Adjusting targetPath from ${JSON.stringify(originalPath_0)} to ${JSON.stringify(targetPath)}`);
+        targetPath = Path.previous(targetPath), debug$4(`Adjusting targetPath from ${JSON.stringify(originalPath_0)} to ${JSON.stringify(targetPath)}`);
       }
       if (Path.equals(targetPath, myPath)) {
-        event_0.preventDefault(), debug$3("targetPath and myPath is the same, not moving");
+        event.preventDefault(), debug$4("targetPath and myPath is the same, not moving");
         return;
       }
-      debug$3(`Moving element ${element._key} from path ${JSON.stringify(myPath)} to ${JSON.stringify(targetPath)} (${dragPosition})`), Transforms.moveNodes(editor, {
+      debug$4(`Moving element ${props.element._key} from path ${JSON.stringify(myPath)} to ${JSON.stringify(targetPath)} (${dragPosition})`), Transforms.moveNodes(editor, {
         at: myPath,
         to: targetPath
       }), editor.onChange();
       return;
     }
-    debug$3("No target element, not doing anything");
-  }, $[16] = editor, $[17] = element, $[18] = t9) : t9 = $[18];
-  const handleDragEnd = t9;
-  let t10;
-  $[19] !== editor || $[20] !== element ? (t10 = (event_1) => {
-    IS_DRAGGING_BLOCK_ELEMENT.get(editor) && (debug$3("On drop (prevented)", element), event_1.preventDefault(), event_1.stopPropagation(), setIsDragOver(!1));
-  }, $[19] = editor, $[20] = element, $[21] = t10) : t10 = $[21];
-  const handleDrop = t10;
-  let t11;
-  $[22] !== editor || $[23] !== element || $[24] !== isVoid ? (t11 = (event_2) => {
-    if (!isVoid) {
-      IS_DRAGGING_BLOCK_ELEMENT.delete(editor);
-      return;
-    }
-    IS_DRAGGING.set(editor, !0), IS_DRAGGING_BLOCK_ELEMENT.set(editor, element), event_2.stopPropagation();
-    const target = event_2.target;
+    debug$4("No target element, not doing anything");
+  }, $[5] = editor, $[6] = props.element, $[7] = t2) : t2 = $[7];
+  const handleDragEnd = t2;
+  let t3;
+  $[8] !== editor || $[9] !== props.element ? (t3 = (event_0) => {
+    IS_DRAGGING.set(editor, !0), IS_DRAGGING_BLOCK_ELEMENT.set(editor, props.element), event_0.stopPropagation();
+    const target = event_0.target;
     target instanceof HTMLElement && (target.style.opacity = "1");
-  }, $[22] = editor, $[23] = element, $[24] = isVoid, $[25] = t11) : t11 = $[25];
-  const handleDrag = t11;
-  let t12;
-  $[26] !== blockElement || $[27] !== editor || $[28] !== handleDrag || $[29] !== isInline || $[30] !== isVoid ? (t12 = (event_3) => {
-    if (!isVoid || isInline) {
-      debug$3("Not dragging block"), IS_DRAGGING_BLOCK_ELEMENT.delete(editor), IS_DRAGGING.set(editor, !1);
-      return;
-    }
-    if (debug$3("Drag start"), IS_DRAGGING.set(editor, !0), event_3.dataTransfer && (event_3.dataTransfer.setData("application/portable-text", "something"), event_3.dataTransfer.effectAllowed = "move"), blockElement && blockElement instanceof HTMLElement) {
+  }, $[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"), 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) {
       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_3.clientX - rect.left, y = event_3.clientY - rect.top;
-        dragGhost.style.width = `${rect.width}px`, dragGhost.style.height = `${rect.height}px`, event_3.dataTransfer.setDragImage(dragGhost, x, y);
+        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);
       }
     }
-    handleDrag(event_3);
-  }, $[26] = blockElement, $[27] = editor, $[28] = handleDrag, $[29] = isInline, $[30] = isVoid, $[31] = t12) : t12 = $[31];
-  const handleDragStart = t12;
-  let t13;
-  $[32] !== editor || $[33] !== isDragOver ? (t13 = isDragOver && editor.children[0] === IS_DRAGGING_ELEMENT_TARGET.get(editor), $[32] = editor, $[33] = isDragOver, $[34] = t13) : t13 = $[34];
-  const isDraggingOverFirstBlock = t13;
-  let t14;
-  $[35] !== editor || $[36] !== isDragOver ? (t14 = isDragOver && editor.children[editor.children.length - 1] === IS_DRAGGING_ELEMENT_TARGET.get(editor), $[35] = editor, $[36] = isDragOver, $[37] = t14) : t14 = $[37];
-  const isDraggingOverLastBlock = t14, dragPosition_0 = IS_DRAGGING_BLOCK_TARGET_POSITION.get(editor), isDraggingOverTop = isDraggingOverFirstBlock || isDragOver && !isDraggingOverFirstBlock && !isDraggingOverLastBlock && dragPosition_0 === "top", isDraggingOverBottom = isDraggingOverLastBlock || isDragOver && !isDraggingOverFirstBlock && !isDraggingOverLastBlock && dragPosition_0 === "bottom";
-  let t15, t16;
-  $[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("div", { className: "pt-drop-indicator", style: {
-    position: "absolute",
-    width: "100%",
-    height: 1,
-    borderBottom: "1px solid currentColor",
-    zIndex: 5
-  } }), $[38] = t16) : t16 = $[38], t15 = t16;
-  const dropIndicator = t15;
-  if (readOnly) {
-    let t172;
-    return $[39] !== children ? (t172 = /* @__PURE__ */ jsx(Fragment, { children }), $[39] = children, $[40] = t172) : t172 = $[40], t172;
+    handleDrag(event_1);
+  }, $[11] = blockElement, $[12] = editor, $[13] = handleDrag, $[14] = t4) : t4 = $[14];
+  const handleDragStart = t4;
+  if (props.readOnly) {
+    let t52;
+    return $[15] === Symbol.for("react.memo_cache_sentinel") ? (t52 = {
+      draggableProps: {
+        draggable: !1,
+        onDragStart: void 0,
+        onDrag: void 0,
+        onDragEnd: void 0
+      }
+    }, $[15] = t52) : t52 = $[15], t52;
   }
-  const t17 = isDraggingOverTop && dropIndicator, t18 = isDraggingOverBottom && dropIndicator;
-  let t19;
-  return $[41] !== children || $[42] !== handleDrag || $[43] !== handleDragEnd || $[44] !== handleDragOver || $[45] !== handleDragStart || $[46] !== handleDrop || $[47] !== isVoid || $[48] !== t17 || $[49] !== t18 ? (t19 = /* @__PURE__ */ jsxs("div", { draggable: isVoid, onDragStart: handleDragStart, onDrag: handleDrag, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDragEnd: handleDragEnd, onDrop: handleDrop, children: [
-    t17,
-    children,
-    t18
-  ] }), $[41] = children, $[42] = handleDrag, $[43] = handleDragEnd, $[44] = handleDragOver, $[45] = handleDragStart, $[46] = handleDrop, $[47] = isVoid, $[48] = t17, $[49] = t18, $[50] = t19) : t19 = $[50], t19;
-};
-DraggableBlock.displayName = "DraggableBlock";
+  let t5;
+  return $[16] !== handleDrag || $[17] !== handleDragEnd || $[18] !== handleDragStart ? (t5 = {
+    draggableProps: {
+      draggable: !0,
+      onDragStart: handleDragStart,
+      onDrag: handleDrag,
+      onDragEnd: handleDragEnd
+    }
+  }, $[16] = handleDrag, $[17] = handleDragEnd, $[18] = handleDragStart, $[19] = t5) : t5 = $[19], t5;
+}
+const debug$3 = debugWithName("useDroppable");
+function useDroppable(props) {
+  const $ = c(27), editor = useSlateStatic(), [isDragOver, setIsDragOver] = useState(!1), [blockElement, setBlockElement] = useState(null);
+  let t0, t1;
+  $[0] !== editor || $[1] !== props.blockRef || $[2] !== props.element ? (t0 = () => setBlockElement(props.blockRef ? props.blockRef.current : 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]), useEffect(t0, t1);
+  let t2;
+  $[5] !== blockElement || $[6] !== editor || $[7] !== props.element ? (t2 = (event) => {
+    const isMyDragOver = IS_DRAGGING_BLOCK_ELEMENT.get(editor);
+    if (!isMyDragOver || !blockElement)
+      return;
+    event.preventDefault(), event.dataTransfer.dropEffect = "move", 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 ? IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, "top") : 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) => {
+    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] === 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] === IS_DRAGGING_ELEMENT_TARGET.get(editor), $[16] = editor, $[17] = isDragOver, $[18] = t6) : t6 = $[18];
+  const isDraggingOverLastBlock = t6, dragPosition = 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;
+}
 debugWithName("components:Element");
 const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
   display: "inline-block"
@@ -232,7 +254,15 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
   renderStyle,
   spellCheck
 }) => {
-  const editor = useSlateStatic(), selected = useSelected(), blockRef = useRef(null), inlineBlockObjectRef = useRef(null), focused = selected && editor.selection && Range.isCollapsed(editor.selection) || !1, value = useMemo(() => fromSlateValue([element], schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0], [editor, element, schemaTypes.block.name]);
+  const editor = useSlateStatic(), selected = useSelected(), blockRef = useRef(null), inlineBlockObjectRef = useRef(null), focused = selected && editor.selection && Range.isCollapsed(editor.selection) || !1, droppable = useDroppable({
+    element,
+    blockRef,
+    readOnly
+  }), draggable = useDraggable({
+    element,
+    blockRef,
+    readOnly
+  }), value = useMemo(() => fromSlateValue([element], schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0], [editor, element, schemaTypes.block.name]);
   let renderedBlock = children, className;
   const blockPath = useMemo(() => [{
     _key: element._key
@@ -321,7 +351,11 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
         return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaTypes.block;
       }
     }), propsOrDefaultRendered = renderBlock ? renderBlock(renderProps) : children;
-    return /* @__PURE__ */ jsx("div", { ...attributes, className, spellCheck, children: /* @__PURE__ */ jsx(DraggableBlock, { element, readOnly, blockRef, children: /* @__PURE__ */ jsx("div", { ref: blockRef, children: propsOrDefaultRendered }) }) }, element._key);
+    return /* @__PURE__ */ jsxs("div", { ...attributes, className, spellCheck, ...droppable.droppableProps, children: [
+      droppable.isDraggingOverTop ? /* @__PURE__ */ jsx(DropIndicator, {}) : null,
+      /* @__PURE__ */ jsx("div", { ref: blockRef, children: propsOrDefaultRendered }),
+      droppable.isDraggingOverBottom ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
+    ] }, element._key);
   }
   const schemaType_0 = schemaTypes.blockObjects.find((_type_0) => _type_0.name === element._type);
   if (!schemaType_0)
@@ -346,9 +380,11 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
     });
     renderedBlockFromProps = renderBlock(_props);
   }
-  return /* @__PURE__ */ jsxs("div", { ...attributes, className, children: [
+  return /* @__PURE__ */ jsxs("div", { ...attributes, className, ...droppable.droppableProps, ...draggable.draggableProps, children: [
+    droppable.isDraggingOverTop ? /* @__PURE__ */ jsx(DropIndicator, {}) : null,
     children,
-    /* @__PURE__ */ jsx(DraggableBlock, { element, readOnly, blockRef, children: /* @__PURE__ */ jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsx(DefaultBlockObject, { value }) }) })
+    /* @__PURE__ */ jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsx(DefaultBlockObject, { value }) }),
+    droppable.isDraggingOverBottom ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
   ] }, element._key);
 };
 Element.displayName = "Element";