@portabletext/editor 1.40.4 → 1.41.0

package/src/editor/Editable.tsx

@@ -36,6 +36,7 @@ import {
 import {getCompoundClientRect} from '../internal-utils/compound-client-rect'
 import {debugWithName} from '../internal-utils/debug'
 import {getDragSelection} from '../internal-utils/drag-selection'
+import {draggingOnDragOrigin} from '../internal-utils/dragging-on-drag-origin'
 import {getEventPosition} from '../internal-utils/event-position'
 import {parseBlocks} from '../internal-utils/parse-blocks'
 import {
@@ -62,6 +63,8 @@ import type {
   ScrollSelectionIntoViewFunction,
 } from '../types/editor'
 import type {HotkeyOptions} from '../types/options'
+import {isSelectionCollapsed} from '../utils'
+import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
 import {Element} from './components/Element'
 import {Leaf} from './components/Leaf'
 import {EditorActorContext} from './editor-actor-context'
@@ -936,144 +939,164 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDragStart?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        const position = getEventPosition({
-          schema: editorActor.getSnapshot().context.schema,
-          slateEditor,
-          event: event.nativeEvent,
-        })
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
+      }
 
-        if (!position) {
-          console.warn('Could not find position for dragstart event')
-          return
-        }
+      // Prevent Slate from handling the event
+      event.stopPropagation()
 
-        const snapshot = getEditorSnapshot({
-          editorActorSnapshot: editorActor.getSnapshot(),
-          slateEditorInstance: slateEditor,
-        })
-        const dragSelection = getDragSelection({
-          eventSelection: position.selection,
-          snapshot,
-        })
+      const position = getEventPosition({
+        schema: editorActor.getSnapshot().context.schema,
+        slateEditor,
+        event: event.nativeEvent,
+      })
+
+      if (!position) {
+        console.warn('Could not find position for dragstart event')
+        return
+      }
 
-        const selectingEntireBlocks = selectors.isSelectingEntireBlocks({
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor,
+      })
+      const dragSelection = getDragSelection({
+        eventSelection: position.selection,
+        snapshot,
+      })
+
+      const selectingEntireBlocks = selectors.isSelectingEntireBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection,
+        },
+      })
+
+      const dragGhost = document.createElement('div')
+
+      const draggedDomNodes = getSelectionDomNodes({
+        snapshot: {
           ...snapshot,
           context: {
             ...snapshot.context,
             selection: dragSelection,
           },
-        })
+        },
+        slateEditor,
+      })
 
-        const dragGhost = document.createElement('div')
+      if (selectingEntireBlocks) {
+        // Clone the DOM Nodes so they won't be visually clipped by scroll-containers etc.
+        const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) =>
+          node.cloneNode(true),
+        )
 
-        const draggedDomNodes = getSelectionDomNodes({
-          snapshot: {
-            ...snapshot,
-            context: {
-              ...snapshot.context,
-              selection: dragSelection,
-            },
-          },
-          slateEditor,
-        })
+        for (const block of clonedBlockNodes) {
+          if (block instanceof HTMLElement) {
+            block.style.position = 'relative'
+          }
+          dragGhost.appendChild(block)
+        }
 
-        if (selectingEntireBlocks) {
-          // Clone the DOM Nodes so they won't be visually clipped by scroll-containers etc.
-          const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) =>
-            node.cloneNode(true),
-          )
+        // A custom drag ghost element can be configured using this data attribute
+        const customGhost = dragGhost.querySelector(
+          '[data-pt-drag-ghost-element]',
+        )
+        if (customGhost) {
+          dragGhost.replaceChildren(customGhost)
+        }
 
-          for (const block of clonedBlockNodes) {
-            if (block instanceof HTMLElement) {
-              block.style.position = 'relative'
-            }
-            dragGhost.appendChild(block)
-          }
+        // Setting the `data-dragged` attribute so the consumer can style the element while it’s dragged
+        dragGhost.setAttribute('data-dragged', '')
 
-          // A custom drag ghost element can be configured using this data attribute
-          const customGhost = dragGhost.querySelector(
-            '[data-pt-drag-ghost-element]',
-          )
-          if (customGhost) {
-            dragGhost.replaceChildren(customGhost)
-          }
+        dragGhost.style.position = 'absolute'
+        dragGhost.style.left = '-99999px'
+        dragGhost.style.boxSizing = 'border-box'
+        document.body.appendChild(dragGhost)
 
-          // Setting the `data-dragged` attribute so the consumer can style the element while it’s dragged
-          dragGhost.setAttribute('data-dragged', '')
-
-          dragGhost.style.position = 'absolute'
-          dragGhost.style.left = '-99999px'
-          dragGhost.style.boxSizing = 'border-box'
-          document.body.appendChild(dragGhost)
-
-          if (customGhost) {
-            const customGhostRect = customGhost.getBoundingClientRect()
-            const x = event.clientX - customGhostRect.left
-            const y = event.clientY - customGhostRect.top
-            dragGhost.style.width = `${customGhostRect.width}px`
-            dragGhost.style.height = `${customGhostRect.height}px`
-            event.dataTransfer.setDragImage(dragGhost, x, y)
-          } else {
-            const blocksDomRect = getCompoundClientRect(
-              draggedDomNodes.blockNodes,
-            )
-            const x = event.clientX - blocksDomRect.left
-            const y = event.clientY - blocksDomRect.top
-            dragGhost.style.width = `${blocksDomRect.width}px`
-            dragGhost.style.height = `${blocksDomRect.height}px`
-            event.dataTransfer.setDragImage(dragGhost, x, y)
-          }
+        if (customGhost) {
+          const customGhostRect = customGhost.getBoundingClientRect()
+          const x = event.clientX - customGhostRect.left
+          const y = event.clientY - customGhostRect.top
+          dragGhost.style.width = `${customGhostRect.width}px`
+          dragGhost.style.height = `${customGhostRect.height}px`
+          event.dataTransfer.setDragImage(dragGhost, x, y)
         } else {
-          const clonedChildNodes = draggedDomNodes.childNodes.map((node) =>
-            node.cloneNode(true),
+          const blocksDomRect = getCompoundClientRect(
+            draggedDomNodes.blockNodes,
           )
+          const x = event.clientX - blocksDomRect.left
+          const y = event.clientY - blocksDomRect.top
+          dragGhost.style.width = `${blocksDomRect.width}px`
+          dragGhost.style.height = `${blocksDomRect.height}px`
+          event.dataTransfer.setDragImage(dragGhost, x, y)
+        }
+      } else {
+        const clonedChildNodes = draggedDomNodes.childNodes.map((node) =>
+          node.cloneNode(true),
+        )
 
-          for (const child of clonedChildNodes) {
-            dragGhost.appendChild(child)
-          }
+        for (const child of clonedChildNodes) {
+          dragGhost.appendChild(child)
+        }
 
-          dragGhost.style.position = 'absolute'
-          dragGhost.style.left = '-99999px'
-          dragGhost.style.boxSizing = 'border-box'
-          document.body.appendChild(dragGhost)
+        dragGhost.style.position = 'absolute'
+        dragGhost.style.left = '-99999px'
+        dragGhost.style.boxSizing = 'border-box'
+        document.body.appendChild(dragGhost)
 
-          const childrenDomRect = getCompoundClientRect(
-            draggedDomNodes.childNodes,
-          )
-          const x = event.clientX - childrenDomRect.left
-          const y = event.clientY - childrenDomRect.top
-          dragGhost.style.width = `${childrenDomRect.width}px`
-          dragGhost.style.height = `${childrenDomRect.height}px`
+        const childrenDomRect = getCompoundClientRect(
+          draggedDomNodes.childNodes,
+        )
+        const x = event.clientX - childrenDomRect.left
+        const y = event.clientY - childrenDomRect.top
+        dragGhost.style.width = `${childrenDomRect.width}px`
+        dragGhost.style.height = `${childrenDomRect.height}px`
 
-          event.dataTransfer.setDragImage(dragGhost, x, y)
-        }
+        event.dataTransfer.setDragImage(dragGhost, x, y)
+      }
 
-        editorActor.send({
-          type: 'dragstart',
-          origin: {
-            selection: dragSelection,
-          },
-          ghost: dragGhost,
-        })
+      // Select drag selection
+      // If the selection is expanded then we just select the end of the
+      // selection
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'select',
+          selection: isSelectionCollapsed(dragSelection)
+            ? dragSelection
+            : {
+                anchor: getSelectionEndPoint(dragSelection),
+                focus: getSelectionEndPoint(dragSelection),
+                backward: false,
+              },
+        },
+        editor: slateEditor,
+      })
 
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.dragstart',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-            position: {
-              selection: dragSelection,
-            },
-          },
-          editor: slateEditor,
-        })
+      editorActor.send({
+        type: 'dragstart',
+        origin: {
+          selection: dragSelection,
+        },
+        ghost: dragGhost,
+      })
 
-        // Prevent Slate from handling the event
-        event.stopPropagation()
-      }
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.dragstart',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+          position: {
+            selection: dragSelection,
+          },
+        },
+        editor: slateEditor,
+      })
     },
     [onDragStart, editorActor, slateEditor],
   )
@@ -1082,21 +1105,43 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDrag?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.drag',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-          },
-          editor: slateEditor,
-        })
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
+      }
 
-        // Prevent Slate from handling the event
-        event.stopPropagation()
+      // Prevent Slate from handling the event
+      event.stopPropagation()
+
+      const position = getEventPosition({
+        schema: editorActor.getSnapshot().context.schema,
+        slateEditor,
+        event: event.nativeEvent,
+      })
+
+      if (!position) {
+        return
+      }
+
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor,
+      })
+
+      if (draggingOnDragOrigin({snapshot, position})) {
+        event.preventDefault()
+        return
       }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.drag',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+        },
+        editor: slateEditor,
+      })
     },
     [onDrag, editorActor, slateEditor],
   )
@@ -1105,21 +1150,23 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDragEnd?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.dragend',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-          },
-          editor: slateEditor,
-        })
-
-        // Prevent Slate from handling the event
-        event.stopPropagation()
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
       }
+
+      // Prevent Slate from handling the event
+      event.stopPropagation()
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.dragend',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+        },
+        editor: slateEditor,
+      })
     },
     [onDragEnd, editorActor, slateEditor],
   )
@@ -1128,32 +1175,44 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDragEnter?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        const position = getEventPosition({
-          schema: editorActor.getSnapshot().context.schema,
-          slateEditor,
-          event: event.nativeEvent,
-        })
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
+      }
 
-        if (!position) {
-          return
-        }
+      // Prevent Slate from handling the event
+      event.stopPropagation()
 
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.dragenter',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-            position,
-          },
-          editor: slateEditor,
-        })
+      const position = getEventPosition({
+        schema: editorActor.getSnapshot().context.schema,
+        slateEditor,
+        event: event.nativeEvent,
+      })
 
-        // Prevent Slate from handling the event
-        event.stopPropagation()
+      if (!position) {
+        return
       }
+
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor,
+      })
+
+      if (draggingOnDragOrigin({snapshot, position})) {
+        event.preventDefault()
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.dragenter',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+          position,
+        },
+        editor: slateEditor,
+      })
     },
     [onDragEnter, editorActor, slateEditor],
   )
@@ -1162,33 +1221,45 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDragOver?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        const position = getEventPosition({
-          schema: editorActor.getSnapshot().context.schema,
-          slateEditor,
-          event: event.nativeEvent,
-        })
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
+      }
 
-        if (!position) {
-          return
-        }
+      // Prevent Slate from handling the event
+      event.stopPropagation()
 
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.dragover',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-            position,
-          },
-          editor: slateEditor,
-          nativeEvent: event,
-        })
+      const position = getEventPosition({
+        schema: editorActor.getSnapshot().context.schema,
+        slateEditor,
+        event: event.nativeEvent,
+      })
 
-        // Prevent Slate from handling the event
-        event.stopPropagation()
+      if (!position) {
+        return
       }
+
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor,
+      })
+
+      if (draggingOnDragOrigin({snapshot, position})) {
+        event.preventDefault()
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.dragover',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+          position,
+        },
+        editor: slateEditor,
+        nativeEvent: event,
+      })
     },
     [onDragOver, editorActor, slateEditor],
   )
@@ -1197,37 +1268,54 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDrop?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        const position = getEventPosition({
-          schema: editorActor.getSnapshot().context.schema,
-          slateEditor,
-          event: event.nativeEvent,
-        })
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
+      }
 
-        if (!position) {
-          console.warn('Could not find position for drop event')
-          return
-        }
+      // Prevent Slate from handling the event
+      event.preventDefault()
 
-        // Find and select the range where the drop happened
-        const range = ReactEditor.findEventRange(slateEditor, event)
-        slateEditor.select(range)
+      const position = getEventPosition({
+        schema: editorActor.getSnapshot().context.schema,
+        slateEditor,
+        event: event.nativeEvent,
+      })
 
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.drop',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-            position,
-          },
-          editor: slateEditor,
-        })
+      if (!position) {
+        console.warn('Could not find position for drop event')
+        return
+      }
 
-        // Prevent Slate from handling the event
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor,
+      })
+
+      if (draggingOnDragOrigin({snapshot, position})) {
         event.preventDefault()
+        return
       }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'select',
+          selection: position.selection,
+        },
+        editor: slateEditor,
+      })
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.drop',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+          position,
+        },
+        editor: slateEditor,
+      })
     },
     [onDrop, editorActor, slateEditor],
   )
@@ -1236,18 +1324,43 @@ export const PortableTextEditable = forwardRef<
     (event: React.DragEvent<HTMLDivElement>) => {
       onDragLeave?.(event)
 
-      if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'drag.dragleave',
-            originEvent: {
-              dataTransfer: event.dataTransfer,
-            },
-          },
-          editor: slateEditor,
-        })
+      if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+        return
+      }
+
+      // Prevent Slate from handling the event
+      event.stopPropagation()
+
+      const position = getEventPosition({
+        schema: editorActor.getSnapshot().context.schema,
+        slateEditor,
+        event: event.nativeEvent,
+      })
+
+      if (!position) {
+        return
       }
+
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor,
+      })
+
+      if (draggingOnDragOrigin({snapshot, position})) {
+        event.preventDefault()
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'drag.dragleave',
+          originEvent: {
+            dataTransfer: event.dataTransfer,
+          },
+        },
+        editor: slateEditor,
+      })
     },
     [onDragLeave, editorActor, slateEditor],
   )

package/src/editor/components/drop-indicator.tsx

@@ -1,6 +1,7 @@
 export function DropIndicator() {
   return (
     <div
+      contentEditable={false}
       className="pt-drop-indicator"
       style={{
         position: 'absolute',
@@ -9,6 +10,8 @@ export function DropIndicator() {
         borderBottom: '1px solid currentColor',
         zIndex: 5,
       }}
-    />
+    >
+      <span />
+    </div>
   )
 }