@portabletext/editor 7.7.0 → 7.8.1

package/lib/index.js

@@ -5,11 +5,11 @@ import React, { createContext, useContext, useRef, useEffect, useLayoutEffect, u
 import { serializePath, isKeyedSegment, getNode, getParent, parentPath, getChildren, getNodeChildren } from "./_chunks-es/get-parent.js";
 import { isPath, getLeaf, isRange, isPoint, isObject, isLeafObject, getAncestor, pathContains, getSpan, isBeforePoint, getText, rangeIntersects, getTextBlock, getUnionSchema, getFirstChild } from "./_chunks-es/get-first-child.js";
 import { rangeEdges, isTextBlockNode, isBackwardRange, hasNode, getNodes, isAncestorPath, isEditableContainer, getSibling, isInline, isObject as isObject$1, isSpanNode, isBlock, getEnclosingBlock, getAncestors, getPathSubSchema, getBlock, resolveContainerAt, comparePaths, getEnclosingContainer, comparePoints$1 as comparePoints, isAfterPoint } from "./_chunks-es/get-path-sub-schema.js";
-import { isSpan, isTextBlock, compileSchema } from "@portabletext/schema";
+import { isSpan, isTextBlock, getSubSchema, compileSchema } from "@portabletext/schema";
 import { defineSchema } from "@portabletext/schema";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { createKeyboardShortcut, undo, redo, code, underline, italic as italic$1, bold as bold$1 } from "@portabletext/keyboard-shortcuts";
-import { rangesOverlap, getFocusInlineObject, isSelectionCollapsed as isSelectionCollapsed$1, getFocusTextBlock, getFocusSpan, getFragment, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, isOverlappingSelection, getFocusBlock, getSelectedBlocks, isSelectingEntireBlocks, getSelectedValue, isActiveAnnotation, getActiveAnnotationsMarks, getActiveDecorators, getCaretWordSelection, getSelectionStartChild, getSelectionEndChild, getPreviousSpan, getNextSpan, getSelectionStartPoint, getSelectionEndPoint, getFocusBlockObject, getLastBlock, getFirstBlock, isAtTheEndOfBlock, isAtTheStartOfBlock, getMarkState, getFocusListBlock, getNextBlock, getPreviousBlock, getSelectedTextBlocks, getRootAcceptedTypes, isActiveDecorator, getFocusChild, getActiveAnnotations, isActiveListItem, isActiveStyle } from "./_chunks-es/selector.is-at-the-start-of-block.js";
+import { rangesOverlap, getFocusInlineObject, getFocusTextBlock, getFocusSpan, getFragment, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, isOverlappingSelection, isSelectionCollapsed as isSelectionCollapsed$1, getFocusBlock, getSelectedBlocks, isSelectingEntireBlocks, getSelectedValue, isActiveAnnotation, getActiveAnnotationsMarks, getActiveDecorators, getCaretWordSelection, getSelectionStartChild, getSelectionEndChild, getPreviousSpan, getNextSpan, getSelectionStartPoint, getSelectionEndPoint, getFocusBlockObject, getLastBlock, getFirstBlock, isAtTheEndOfBlock, isAtTheStartOfBlock, getRootAcceptedTypes, getMarkState, getFocusListBlock, getNextBlock, getPreviousBlock, getSelectedTextBlocks, isActiveDecorator, getFocusChild, getActiveAnnotations, isActiveListItem, isActiveStyle } from "./_chunks-es/selector.is-at-the-start-of-block.js";
 import { isEqualSelectionPoints, blockOffsetToSpanSelectionPoint, getBlockKeyFromSelectionPoint, getBlockEndPoint, getBlockStartPoint, isSelectionCollapsed, defaultKeyGenerator, parseBlocks, parseBlock, isListBlock, getSelectionStartPoint as getSelectionStartPoint$1, getSelectionEndPoint as getSelectionEndPoint$1, parseAnnotation, parseMarkDefs, parseSpan, parseInlineObject } from "./_chunks-es/util.slice-blocks.js";
 import rawDebug from "debug";
 import { isEmptyTextBlock, getTextBlockText } from "./_chunks-es/util.is-empty-text-block.js";
@@ -4046,6 +4046,9 @@ const debug = {
   syncValue: createDebugger("sync:value"),
   syncPatch: createDebugger("sync:patch")
 };
+function isDragEvent(event) {
+  return "dataTransfer" in event;
+}
 function getEventPosition({
   editorActor,
   editorEngine,
@@ -4085,6 +4088,22 @@ function getEventPosition({
         }
       }
     };
+  if (eventPositionBlock && !isEditor(eventNode) && isEditableContainer(editorEngine.snapshot, eventNode, eventPath) && isDragEvent(event))
+    return {
+      block: eventPositionBlock,
+      isEditor: !1,
+      isContainer: !0,
+      selection: {
+        anchor: {
+          path: eventPath,
+          offset: 0
+        },
+        focus: {
+          path: eventPath,
+          offset: 0
+        }
+      }
+    };
   if (eventBlock && eventBlockPath && eventPositionBlock && !eventSelection && !isEventContainer(editorEngine, eventNode, eventPath))
     return {
       block: eventPositionBlock,
@@ -4227,16 +4246,6 @@ function getSelectionFromEvent(editor, event) {
 function isEventContainer(editorEngine, eventNode, eventPath) {
   return isEditor(eventNode) ? !0 : isEditableContainer(editorEngine.snapshot, eventNode, eventPath);
 }
-function createEditorPriority(config) {
-  return {
-    id: defaultKeyGenerator(),
-    name: config?.name,
-    reference: config?.reference
-  };
-}
-const corePriority = createEditorPriority({
-  name: "core"
-});
 function getDragSelection({
   eventSelection,
   snapshot
@@ -4306,6 +4315,16 @@ function getDragSelection({
   }
   return dragSelection;
 }
+function createEditorPriority(config) {
+  return {
+    id: defaultKeyGenerator(),
+    name: config?.name,
+    reference: config?.reference
+  };
+}
+const corePriority = createEditorPriority({
+  name: "core"
+});
 function createDropPositionBehaviorsConfig({
   setDropPosition
 }) {
@@ -6027,7 +6046,7 @@ function RenderLeaf(props) {
 }
 function RenderText(props) {
   const $ = c(10);
-  if (useContext(ParentContainerContext)) {
+  if (useContext(NewPipelineContext)) {
     const t02 = props.attributes;
     let rest;
     if ($[0] !== t02) {
@@ -6123,7 +6142,7 @@ function validateSelection(editorEngine, editorElement) {
     const newDOMRange = DOMEditor.toDOMRange(editorEngine, editorEngine.snapshot.context.selection);
     (newDOMRange.startOffset !== existingDOMRange.startOffset || newDOMRange.endOffset !== existingDOMRange.endOffset) && (debug.selection("DOM range out of sync, validating selection"), domSelection?.removeAllRanges(), domSelection.addRange(newDOMRange));
   } catch {
-    debug.selection("Could not resolve selection, selecting top document"), applyDeselect(editorEngine), editorEngine.snapshot.context.value.length > 0 && applySelect(editorEngine, start(editorEngine, [])), editorEngine.onChange();
+    debug.selection("Could not resolve selection, skipping DOM sync this tick");
   }
 }
 const PortableTextEditable = forwardRef(function(props, forwardedRef) {
@@ -6515,9 +6534,16 @@ const PortableTextEditable = forwardRef(function(props, forwardedRef) {
       console.warn("Could not find position for dragstart event");
       return;
     }
+    const dragPosition = {
+      ...position_4,
+      selection: getDragSelection({
+        snapshot: editorEngine.snapshot,
+        eventSelection: position_4.selection
+      })
+    };
     return editorActor.send({
       type: "dragstart",
-      origin: position_4
+      origin: dragPosition
     }), editorActor.send({
       type: "behavior event",
       behaviorEvent: {
@@ -6527,7 +6553,7 @@ const PortableTextEditable = forwardRef(function(props, forwardedRef) {
           clientY: event_8.clientY,
           dataTransfer: event_8.dataTransfer
         },
-        position: position_4
+        position: dragPosition
       },
       editor: editorEngine
     }), !0;
@@ -11389,7 +11415,39 @@ function getCompoundClientRect(nodes) {
   }
   return new DOMRect(left, top, right - left, bottom - top);
 }
+function fitBlocksToDestination(snapshot, blocks) {
+  if (blocks.length === 0)
+    return [];
+  const startBlock = getSelectionStartBlock(snapshot);
+  if (!startBlock)
+    return [...blocks];
+  const resolvedAt = resolveContainerAt(snapshot.context.containers, snapshot.context.value, startBlock.path), subSchema = resolvedAt && "field" in resolvedAt && resolvedAt.of ? getSubSchema(snapshot.context.schema, resolvedAt.of) : getPathSubSchema(snapshot, startBlock.path), accepted = getRootAcceptedTypes(subSchema);
+  if (accepted.size === 0)
+    return [];
+  const result = [];
+  for (const block of blocks)
+    fitOne(block, accepted, result);
+  return result;
+}
+function fitOne(block, accepted, out) {
+  if (accepted.has(block._type)) {
+    out.push(block);
+    return;
+  }
+  for (const value of Object.values(block))
+    if (Array.isArray(value))
+      for (const child of value)
+        isBlockLike(child) && fitOne(child, accepted, out);
+}
+function isBlockLike(value) {
+  return typeof value == "object" && value !== null && "_type" in value && typeof value._type == "string";
+}
 function isDropTargetingDragOrigin(dropSelection, dragOriginSelection, snapshot) {
+  if (isCollapsedRange(dragOriginSelection)) {
+    const originPath = dragOriginSelection.anchor.path;
+    if (isAncestorPath(originPath, dropSelection.anchor.path) || isAncestorPath(originPath, dropSelection.focus.path))
+      return !0;
+  }
   if (!isOverlappingSelection(dropSelection)({
     ...snapshot,
     context: {
@@ -11428,25 +11486,18 @@ const coreDndBehaviors = [
           ...snapshot.context,
           selection: dragSelection
         }
-      }), draggedDomNodes = {
-        blockNodes: dom.getBlockNodes({
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: dragSelection
-          }
-        }),
-        childNodes: dom.getChildNodes({
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: dragSelection
-          }
-        })
+      }), dragSnapshot = {
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
       };
       return {
-        dragSelection,
-        draggedDomNodes,
+        draggedDomNodes: {
+          blockNodes: dom.getBlockNodes(dragSnapshot),
+          childNodes: dom.getChildNodes(dragSnapshot)
+        },
         selectingEntireBlocks
       };
     },
@@ -11454,7 +11505,6 @@ const coreDndBehaviors = [
       dom,
       event
     }, {
-      dragSelection,
       draggedDomNodes,
       selectingEntireBlocks
     }) => {
@@ -11466,10 +11516,7 @@ const coreDndBehaviors = [
         const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
         if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
           const customGhostRect = customGhost.getBoundingClientRect(), x = event.originEvent.clientX - customGhostRect.left, y = event.originEvent.clientY - customGhostRect.top;
-          return dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, [raise({
-            type: "select",
-            at: dragSelection
-          }), effect(() => {
+          return dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, [effect(() => {
             dom.setDragGhost({
               event,
               ghost: {
@@ -11481,10 +11528,7 @@ const coreDndBehaviors = [
           }), forward(event)];
         } else {
           const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x = event.originEvent.clientX - blocksDomRect.left, y = event.originEvent.clientY - blocksDomRect.top;
-          return dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, [raise({
-            type: "select",
-            at: dragSelection
-          }), effect(() => {
+          return dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, [effect(() => {
             dom.setDragGhost({
               event,
               ghost: {
@@ -11501,10 +11545,7 @@ const coreDndBehaviors = [
           dragGhost.appendChild(child);
         dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
         const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x = event.originEvent.clientX - childrenDomRect.left, y = event.originEvent.clientY - childrenDomRect.top;
-        return dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, [raise({
-          type: "select",
-          at: dragSelection
-        }), effect(() => {
+        return dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, [effect(() => {
           dom.setDragGhost({
             event,
             ghost: {
@@ -11593,48 +11634,52 @@ const coreDndBehaviors = [
       const dragOrigin = event.originEvent.dragOrigin, dragSelection = getDragSelection({
         eventSelection: dragOrigin.selection,
         snapshot
-      }), dropPosition = event.originEvent.position.selection, droppingOnDragOrigin = dragOrigin ? isDropTargetingDragOrigin(dropPosition, dragSelection, snapshot) : !1, draggingEntireBlocks = isSelectingEntireBlocks({
+      }), dropPosition = event.originEvent.position.selection, droppingOnDragOrigin = dragOrigin ? isDropTargetingDragOrigin(dropPosition, dragSelection, snapshot) : !1, dragSnapshot = {
         ...snapshot,
         context: {
           ...snapshot.context,
           selection: dragSelection
         }
-      }), draggedBlocks = getFragment({
+      }, draggingEntireBlocks = isSelectingEntireBlocks(dragSnapshot), draggedNodes = getFragment(dragSnapshot), fittedBlocks = fitBlocksToDestination({
+        ...snapshot,
         context: {
           ...snapshot.context,
-          selection: dragSelection
+          selection: dropPosition
         }
-      });
+      }, event.data);
       return droppingOnDragOrigin ? !1 : {
         dropPosition,
         draggingEntireBlocks,
-        draggedBlocks,
+        draggedNodes,
         dragOrigin,
-        originEvent: event.originEvent
+        originEvent: event.originEvent,
+        fittedBlocks
       };
     },
-    actions: [({
-      event
-    }, {
+    actions: [(_, {
       draggingEntireBlocks,
-      draggedBlocks,
+      draggedNodes,
       dragOrigin,
       dropPosition,
-      originEvent
-    }) => [raise({
-      type: "select",
-      at: dropPosition
-    }), ...draggingEntireBlocks ? draggedBlocks.map((block) => raise({
-      type: "delete.block",
-      at: block.path
-    })) : [raise({
-      type: "delete",
-      at: dragOrigin.selection
-    })], raise({
-      type: "insert.blocks",
-      blocks: event.data,
-      placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
-    })]]
+      originEvent,
+      fittedBlocks
+    }) => {
+      const deleteEvents = draggingEntireBlocks ? draggedNodes.map((entry) => raise({
+        type: "unset",
+        at: entry.path
+      })) : [raise({
+        type: "delete",
+        at: dragOrigin.selection
+      })];
+      return [raise({
+        type: "select",
+        at: dropPosition
+      }), ...deleteEvents, raise({
+        type: "insert.blocks",
+        blocks: fittedBlocks,
+        placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
+      })];
+    }]
   })
 ], coreInsertBehaviors = [defineBehavior({
   on: "insert.text",
@@ -14850,35 +14895,7 @@ const abstractAnnotationBehaviors = [defineBehavior({
     ...event,
     type: "delete"
   })]]
-})];
-function fitBlocksToDestination(snapshot, blocks) {
-  if (blocks.length === 0)
-    return [];
-  const startBlock = getSelectionStartBlock(snapshot);
-  if (!startBlock)
-    return [...blocks];
-  const subSchema = getPathSubSchema(snapshot, startBlock.path), accepted = getRootAcceptedTypes(subSchema);
-  if (accepted.size === 0)
-    return [];
-  const result = [];
-  for (const block of blocks)
-    fitOne(block, accepted, result);
-  return result;
-}
-function fitOne(block, accepted, out) {
-  if (accepted.has(block._type)) {
-    out.push(block);
-    return;
-  }
-  for (const value of Object.values(block))
-    if (Array.isArray(value))
-      for (const child of value)
-        isBlockLike(child) && fitOne(child, accepted, out);
-}
-function isBlockLike(value) {
-  return typeof value == "object" && value !== null && "_type" in value && typeof value._type == "string";
-}
-const mimeTypePriority = ["application/x-portable-text", "application/json", "text/markdown", "text/html", "text/plain"];
+})], mimeTypePriority = ["application/x-portable-text", "application/json", "text/markdown", "text/html", "text/plain"];
 function getFirstAvailableData({
   dataTransfer,
   startAfter
@@ -16052,13 +16069,22 @@ const abstractInsertBehaviors = [
     event
   }) => {
     const converter = snapshot.context.converters.find((converter2) => converter2.mimeType === event.mimeType);
-    return converter ? converter.serialize({
-      snapshot,
+    if (!converter)
+      return !1;
+    const snapshotForConverter = event.originEvent.type === "drag.dragstart" ? {
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.originEvent.position.selection
+      }
+    } : snapshot;
+    return converter.serialize({
+      snapshot: snapshotForConverter,
       event: {
         type: "serialize",
         originEvent: event.originEvent.type
       }
-    }) : !1;
+    });
   },
   actions: [({
     event