@portabletext/editor 1.36.0 → 1.36.2

package/lib/index.cjs

@@ -81,136 +81,158 @@ function DefaultInlineObject(props) {
     "]"
   ] }), $[1] = props.value._key, $[2] = props.value._type, $[3] = t1) : t1 = $[3], t1;
 }
-const debug$3 = editorProvider.debugWithName("components:DraggableBlock"), DraggableBlock = (t0) => {
-  const $ = reactCompilerRuntime.c(51), {
-    children,
-    element,
-    readOnly,
-    blockRef
-  } = t0, editor = slateReact.useSlateStatic(), dragGhostRef = React.useRef(void 0), [isDragOver, setIsDragOver] = React.useState(!1);
-  let t1, t2;
-  $[0] !== editor || $[1] !== element ? (t2 = slate.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 = slate.Editor.isInline(editor, element), $[3] = editor, $[4] = element, $[5] = t4) : t4 = $[5], t3 = t4;
-  const isInline = t3, [blockElement, setBlockElement] = React.useState(null);
-  let t5, t6;
-  $[6] !== blockRef || $[7] !== editor || $[8] !== element ? (t5 = () => setBlockElement(blockRef ? blockRef.current : slateReact.ReactEditor.toDOMNode(editor, element)), t6 = [editor, element, blockRef], $[6] = blockRef, $[7] = editor, $[8] = element, $[9] = t5, $[10] = t6) : (t5 = $[9], t6 = $[10]), React.useEffect(t5, t6);
-  let t7;
-  $[11] !== blockElement || $[12] !== editor || $[13] !== element ? (t7 = (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, 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 ? editorProvider.IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, "top") : editorProvider.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 $ = reactCompilerRuntime.c(1);
+  let t0;
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.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 = editorProvider.debugWithName("useDraggable");
+function useDraggable(props) {
+  const $ = reactCompilerRuntime.c(20), editor = slateReact.useSlateStatic(), dragGhostRef = React.useRef(void 0), [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_0.preventDefault(), event_0.stopPropagation(), editorProvider.IS_DRAGGING_ELEMENT_TARGET.delete(editor), dragGhostRef.current && (debug$3("Removing drag ghost"), document.body.removeChild(dragGhostRef.current));
+      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, element), isBefore = slate.Path.isBefore(myPath, targetPath);
+      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$3("target is already at the bottom, not moving");
+          debug$4("target is already at the bottom, not moving");
           return;
         }
         const originalPath = targetPath;
-        targetPath = slate.Path.next(targetPath), debug$3(`Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(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$3(`Adjusting targetPath from ${JSON.stringify(originalPath_0)} to ${JSON.stringify(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_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})`), slate.Transforms.moveNodes(editor, {
+      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$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) => {
-    editorProvider.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) {
-      editorProvider.IS_DRAGGING_BLOCK_ELEMENT.delete(editor);
-      return;
-    }
-    editorProvider.IS_DRAGGING.set(editor, !0), editorProvider.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) => {
+    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");
-  }, $[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"), editorProvider.IS_DRAGGING_BLOCK_ELEMENT.delete(editor), editorProvider.IS_DRAGGING.set(editor, !1);
-      return;
-    }
-    if (debug$3("Drag start"), editorProvider.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"), 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) {
       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] === editorProvider.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] === editorProvider.IS_DRAGGING_ELEMENT_TARGET.get(editor), $[35] = editor, $[36] = isDragOver, $[37] = t14) : t14 = $[37];
-  const isDraggingOverLastBlock = t14, dragPosition_0 = editorProvider.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.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 = 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;
+}
 editorProvider.debugWithName("components:Element");
 const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
   display: "inline-block"
@@ -226,7 +248,15 @@ 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, value = React.useMemo(() => editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(editor))[0], [editor, element, schemaTypes.block.name]);
+  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({
+    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]);
   let renderedBlock = children, className;
   const blockPath = React.useMemo(() => [{
     _key: element._key
@@ -315,7 +345,11 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
         return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaTypes.block;
       }
     }), propsOrDefaultRendered = renderBlock ? renderBlock(renderProps) : children;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...attributes, className, spellCheck, children: /* @__PURE__ */ jsxRuntime.jsx(DraggableBlock, { element, readOnly, blockRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, children: propsOrDefaultRendered }) }) }, element._key);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, spellCheck, ...droppable.droppableProps, children: [
+      droppable.isDraggingOverTop ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, children: propsOrDefaultRendered }),
+      droppable.isDraggingOverBottom ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+    ] }, element._key);
   }
   const schemaType_0 = schemaTypes.blockObjects.find((_type_0) => _type_0.name === element._type);
   if (!schemaType_0)
@@ -340,9 +374,11 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
     });
     renderedBlockFromProps = renderBlock(_props);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, ...droppable.droppableProps, ...draggable.draggableProps, children: [
+    droppable.isDraggingOverTop ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(DraggableBlock, { element, readOnly, blockRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsxRuntime.jsx(DefaultBlockObject, { value }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsxRuntime.jsx(DefaultBlockObject, { value }) }),
+    droppable.isDraggingOverBottom ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
   ] }, element._key);
 };
 Element.displayName = "Element";