@portabletext/editor 1.36.6 → 1.38.0

package/src/editor/components/Element.tsx

@@ -5,8 +5,11 @@ import type {
   PortableTextTextBlock,
 } from '@sanity/types'
 import {
+  useContext,
+  useEffect,
   useMemo,
   useRef,
+  useState,
   type FunctionComponent,
   type JSX,
   type ReactElement,
@@ -18,9 +21,12 @@ import {
   useSlateStatic,
   type RenderElementProps,
 } from 'slate-react'
+import {defineBehavior} from '../../behaviors'
 import {debugWithName} from '../../internal-utils/debug'
+import type {EventPositionBlock} from '../../internal-utils/event-position'
 import {fromSlateValue} from '../../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../../internal-utils/weakMaps'
+import * as selectors from '../../selectors'
 import type {
   BlockRenderProps,
   PortableTextMemberSchemaTypes,
@@ -29,10 +35,10 @@ import type {
   RenderListItemFunction,
   RenderStyleFunction,
 } from '../../types/editor'
+import {EditorActorContext} from '../editor-actor-context'
 import {DefaultBlockObject, DefaultInlineObject} from './DefaultObject'
 import {DropIndicator} from './drop-indicator'
 import {useDraggable} from './use-draggable'
-import {useDroppable} from './use-droppable'
 
 const debug = debugWithName('components:Element')
 const debugRenders = false
@@ -72,24 +78,135 @@ export const Element: FunctionComponent<ElementProps> = ({
   renderStyle,
   spellCheck,
 }) => {
-  const editor = useSlateStatic()
+  const editorActor = useContext(EditorActorContext)
+  const slateEditor = useSlateStatic()
   const selected = useSelected()
   const blockRef = useRef<HTMLDivElement | null>(null)
   const inlineBlockObjectRef = useRef(null)
   const focused =
-    (selected && editor.selection && Range.isCollapsed(editor.selection)) ||
+    (selected &&
+      slateEditor.selection &&
+      Range.isCollapsed(slateEditor.selection)) ||
     false
-  const droppable = useDroppable({element, blockRef, readOnly})
-  const draggable = useDraggable({element, blockRef, readOnly})
+  const [dragPositionBlock, setDragPositionBlock] =
+    useState<EventPositionBlock>()
+  const draggable = useDraggable({element, readOnly, blockRef})
+
+  useEffect(() => {
+    const behavior = defineBehavior({
+      on: 'drag.dragover',
+      guard: ({snapshot, event}) => {
+        const dropFocusBlock = selectors.getFocusBlock({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: event.position.selection,
+          },
+        })
+
+        if (!dropFocusBlock || dropFocusBlock.node._key !== element._key) {
+          return false
+        }
+
+        const dragOrigin = snapshot.beta.internalDrag?.origin
+
+        if (!dragOrigin) {
+          return false
+        }
+
+        const draggedBlocks = selectors.getSelectedBlocks({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragOrigin.selection,
+          },
+        })
+
+        if (
+          draggedBlocks.some(
+            (draggedBlock) => draggedBlock.node._key === element._key,
+          )
+        ) {
+          return false
+        }
+
+        const draggingEntireBlocks = selectors.isSelectingEntireBlocks({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragOrigin.selection,
+          },
+        })
+
+        return draggingEntireBlocks
+      },
+      actions: [
+        ({event}) => [
+          {
+            type: 'effect',
+            effect: () => {
+              setDragPositionBlock(event.position.block)
+            },
+          },
+          {
+            type: 'noop',
+          },
+        ],
+      ],
+    })
+
+    editorActor.send({
+      type: 'add behavior',
+      behavior,
+    })
+
+    return () => {
+      editorActor.send({
+        type: 'remove behavior',
+        behavior,
+      })
+    }
+  }, [editorActor, element._key])
+
+  useEffect(() => {
+    const behavior = defineBehavior({
+      on: 'drag.*',
+      guard: ({event}) => {
+        return event.type !== 'drag.dragover'
+      },
+      actions: [
+        () => [
+          {
+            type: 'effect',
+            effect: () => {
+              setDragPositionBlock(undefined)
+            },
+          },
+        ],
+      ],
+    })
+
+    editorActor.send({
+      type: 'add behavior',
+      behavior,
+    })
+
+    return () => {
+      editorActor.send({
+        type: 'remove behavior',
+        behavior,
+      })
+    }
+  }, [editorActor])
 
   const value = useMemo(
     () =>
       fromSlateValue(
         [element],
         schemaTypes.block.name,
-        KEY_TO_VALUE_ELEMENT.get(editor),
+        KEY_TO_VALUE_ELEMENT.get(slateEditor),
       )[0],
-    [editor, element, schemaTypes.block.name],
+    [slateEditor, element, schemaTypes.block.name],
   )
 
   let renderedBlock = children
@@ -107,9 +224,9 @@ export const Element: FunctionComponent<ElementProps> = ({
   }
 
   // Test for inline objects first
-  if (editor.isInline(element)) {
-    const path = ReactEditor.findPath(editor, element)
-    const [block] = Editor.node(editor, path, {depth: 1})
+  if (slateEditor.isInline(element)) {
+    const path = ReactEditor.findPath(slateEditor, element)
+    const [block] = Editor.node(slateEditor, path, {depth: 1})
     const schemaType = schemaTypes.inlineObjects.find(
       (_type) => _type.name === element._type,
     )
@@ -192,7 +309,7 @@ export const Element: FunctionComponent<ElementProps> = ({
       className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`
     }
 
-    if (editor.isListBlock(value) && isListItem && element.listItem) {
+    if (slateEditor.isListBlock(value) && isListItem && element.listItem) {
       const listType = schemaTypes.lists.find(
         (item) => item.value === element.listItem,
       )
@@ -246,11 +363,10 @@ export const Element: FunctionComponent<ElementProps> = ({
         {...attributes}
         className={className}
         spellCheck={spellCheck}
-        {...droppable.droppableProps}
       >
-        {droppable.isDraggingOverTop ? <DropIndicator /> : null}
+        {dragPositionBlock === 'start' ? <DropIndicator /> : null}
         <div ref={blockRef}>{propsOrDefaultRendered}</div>
-        {droppable.isDraggingOverBottom ? <DropIndicator /> : null}
+        {dragPositionBlock === 'end' ? <DropIndicator /> : null}
       </div>
     )
   }
@@ -274,7 +390,7 @@ export const Element: FunctionComponent<ElementProps> = ({
   const block = fromSlateValue(
     [element],
     schemaTypes.block.name,
-    KEY_TO_VALUE_ELEMENT.get(editor),
+    KEY_TO_VALUE_ELEMENT.get(slateEditor),
   )[0]
 
   let renderedBlockFromProps: JSX.Element | undefined
@@ -309,10 +425,9 @@ export const Element: FunctionComponent<ElementProps> = ({
       key={element._key}
       {...attributes}
       className={className}
-      {...droppable.droppableProps}
       {...draggable.draggableProps}
     >
-      {droppable.isDraggingOverTop ? <DropIndicator /> : null}
+      {dragPositionBlock === 'start' ? <DropIndicator /> : null}
       {children}
       <div ref={blockRef} contentEditable={false}>
         {renderedBlockFromProps ? (
@@ -321,7 +436,7 @@ export const Element: FunctionComponent<ElementProps> = ({
           <DefaultBlockObject value={value} />
         )}
       </div>
-      {droppable.isDraggingOverBottom ? <DropIndicator /> : null}
+      {dragPositionBlock === 'end' ? <DropIndicator /> : null}
     </div>
   )
 }

package/src/editor/components/use-draggable.ts

@@ -1,28 +1,21 @@
 import {
   useCallback,
+  useContext,
   useEffect,
-  useRef,
   useState,
   type DragEvent,
   type RefObject,
 } from 'react'
-import {Path, Transforms, type Element as SlateElement} from 'slate'
+import type {Element as SlateElement} from 'slate'
 import {ReactEditor, useSlateStatic} from 'slate-react'
-import {debugWithName} from '../../internal-utils/debug'
-import {
-  IS_DRAGGING,
-  IS_DRAGGING_BLOCK_ELEMENT,
-  IS_DRAGGING_BLOCK_TARGET_POSITION,
-  IS_DRAGGING_ELEMENT_TARGET,
-} from '../../internal-utils/weakMaps'
-
-const debug = debugWithName('useDraggable')
+import {getEventPosition} from '../../internal-utils/event-position'
+import {EditorActorContext} from '../editor-actor-context'
+import {getEditorSnapshot} from '../editor-selector'
 
 type Draggable = {
   draggableProps: {
     draggable: boolean
     onDragStart?: (event: DragEvent) => void
-    onDrag?: (event: DragEvent) => void
     onDragEnd?: (event: DragEvent) => void
   }
 }
@@ -32,8 +25,8 @@ export function useDraggable(props: {
   readOnly: boolean
   blockRef: RefObject<HTMLDivElement | null>
 }): Draggable {
+  const editorActor = useContext(EditorActorContext)
   const editor = useSlateStatic()
-  const dragGhostRef = useRef<HTMLElement>(undefined)
   const [blockElement, setBlockElement] = useState<HTMLElement | null>(null)
 
   useEffect(
@@ -46,95 +39,26 @@ export function useDraggable(props: {
     [editor, props.element, props.blockRef],
   )
 
-  // Note: this is called for the dragging block
-  const handleDragEnd = useCallback(
-    (event: DragEvent) => {
-      const targetBlock = IS_DRAGGING_ELEMENT_TARGET.get(editor)
-      if (targetBlock) {
-        IS_DRAGGING.set(editor, false)
-        event.preventDefault()
-        event.stopPropagation()
-        IS_DRAGGING_ELEMENT_TARGET.delete(editor)
-        if (dragGhostRef.current) {
-          debug('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, props.element)
-        const isBefore = Path.isBefore(myPath, targetPath)
-        if (dragPosition === 'bottom' && !isBefore) {
-          // If it is already at the bottom, don't do anything.
-          if (targetPath[0] >= editor.children.length - 1) {
-            debug('target is already at the bottom, not moving')
-            return
-          }
-          const originalPath = targetPath
-          targetPath = Path.next(targetPath)
-          debug(
-            `Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(
-              targetPath,
-            )}`,
-          )
-        }
-        if (
-          dragPosition === 'top' &&
-          isBefore &&
-          targetPath[0] !== editor.children.length - 1
-        ) {
-          const originalPath = targetPath
-          targetPath = Path.previous(targetPath)
-          debug(
-            `Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(
-              targetPath,
-            )}`,
-          )
-        }
-        if (Path.equals(targetPath, myPath)) {
-          event.preventDefault()
-          debug('targetPath and myPath is the same, not moving')
-          return
-        }
-        debug(
-          `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('No target element, not doing anything')
-    },
-    [editor, props.element],
-  )
+  const handleDragEnd = useCallback(() => {
+    editorActor.send({type: 'dragend'})
+  }, [editorActor])
 
-  // Note: this is called for the dragging block
-  const handleDrag = useCallback(
+  const handleDragStart = useCallback(
     (event: DragEvent) => {
-      IS_DRAGGING.set(editor, true)
-      IS_DRAGGING_BLOCK_ELEMENT.set(editor, props.element)
-      event.stopPropagation() // Stop propagation so that leafs don't get this and take focus/selection!
-
-      const target = event.target
+      const position = getEventPosition({
+        snapshot: getEditorSnapshot({
+          editorActorSnapshot: editorActor.getSnapshot(),
+          slateEditorInstance: editor,
+        }),
+        slateEditor: editor,
+        event: event.nativeEvent,
+      })
 
-      if (target instanceof HTMLElement) {
-        target.style.opacity = '1'
+      if (!position) {
+        console.error('Could not find position for dragstart event')
+        return
       }
-    },
-    [editor, props.element],
-  )
 
-  // Note: this is called for the dragging block
-  const handleDragStart = useCallback(
-    (event: DragEvent) => {
-      debug('Drag start')
-      IS_DRAGGING.set(editor, true)
-      if (event.dataTransfer) {
-        event.dataTransfer.setData('application/portable-text', 'something')
-        event.dataTransfer.effectAllowed = 'move'
-      }
       // Clone blockElement so that it will not be visually clipped by scroll-containers etc.
       // The application that uses the portable-text-editor may indicate the element used as
       // drag ghost by adding a truthy data attribute 'data-pt-drag-ghost-element' to a HTML element.
@@ -151,7 +75,6 @@ export function useDraggable(props: {
         dragGhost.setAttribute('data-dragged', '')
 
         if (document.body) {
-          dragGhostRef.current = dragGhost
           dragGhost.style.position = 'absolute'
           dragGhost.style.left = '-99999px'
           dragGhost.style.boxSizing = 'border-box'
@@ -162,11 +85,22 @@ export function useDraggable(props: {
           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)
     },
-    [blockElement, editor, handleDrag],
+    [blockElement, editor, editorActor],
   )
 
   if (props.readOnly) {
@@ -174,7 +108,6 @@ export function useDraggable(props: {
       draggableProps: {
         draggable: false,
         onDragStart: undefined,
-        onDrag: undefined,
         onDragEnd: undefined,
       },
     }
@@ -184,7 +117,6 @@ export function useDraggable(props: {
     draggableProps: {
       draggable: true,
       onDragStart: handleDragStart,
-      onDrag: handleDrag,
       onDragEnd: handleDragEnd,
     },
   }

package/src/editor/editor-machine.ts

@@ -14,13 +14,17 @@ import {coreBehaviors} from '../behaviors/behavior.core'
 import {defaultBehaviors} from '../behaviors/behavior.default'
 import {
   isCustomBehaviorEvent,
+  isDragBehaviorEvent,
+  isMouseBehaviorEvent,
   type Behavior,
   type CustomBehaviorEvent,
+  type DataBehaviorEvent,
   type InternalBehaviorAction,
   type NativeBehaviorEvent,
   type SyntheticBehaviorEvent,
 } from '../behaviors/behavior.types'
 import type {Converter} from '../converters/converter.types'
+import type {EventPosition} from '../internal-utils/event-position'
 import type {NamespaceEvent} from '../type-utils'
 import type {
   EditorSelection,
@@ -181,7 +185,10 @@ export type InternalEditorEvent =
     }
   | {
       type: 'behavior event'
-      behaviorEvent: SyntheticBehaviorEvent | NativeBehaviorEvent
+      behaviorEvent:
+        | DataBehaviorEvent
+        | SyntheticBehaviorEvent
+        | NativeBehaviorEvent
       editor: PortableTextSlateEditor
       defaultActionCallback?: () => void
       nativeEvent?: {preventDefault: () => void}
@@ -199,7 +206,7 @@ export type InternalEditorEvent =
   | NamespaceEvent<EditorEmittedEvent, 'notify'>
   | NamespaceEvent<UnsetEvent, 'notify'>
   | SyntheticBehaviorEvent
-  | {type: 'dragstart'}
+  | {type: 'dragstart'; origin: EventPosition; ghost?: HTMLElement}
   | {type: 'dragend'}
   | {type: 'drop'}
 
@@ -232,6 +239,10 @@ export const editorMachine = setup({
       maxBlocks: number | undefined
       selection: EditorSelection
       value: Array<PortableTextBlock> | undefined
+      internalDrag?: {
+        ghost?: HTMLElement
+        origin: EventPosition
+      }
     },
     events: {} as InternalEditorEvent,
     emitted: {} as InternalEditorEmittedEvent,
@@ -313,10 +324,13 @@ export const editorMachine = setup({
 
         const defaultAction =
           event.type === 'custom behavior event' ||
+          isDragBehaviorEvent(event.behaviorEvent) ||
           event.behaviorEvent.type === 'copy' ||
+          event.behaviorEvent.type === 'cut' ||
           event.behaviorEvent.type === 'deserialize' ||
           event.behaviorEvent.type === 'key.down' ||
           event.behaviorEvent.type === 'key.up' ||
+          isMouseBehaviorEvent(event.behaviorEvent) ||
           event.behaviorEvent.type === 'paste' ||
           event.behaviorEvent.type === 'serialize'
             ? undefined
@@ -332,10 +346,20 @@ export const editorMachine = setup({
         const eventBehaviors = [
           ...context.behaviors.values(),
           ...defaultBehaviors,
-        ].filter(
-          (behavior) =>
-            behavior.on === '*' || behavior.on === event.behaviorEvent.type,
-        )
+        ].filter((behavior) => {
+          if (behavior.on === '*') {
+            return true
+          }
+
+          if (isDragBehaviorEvent(event.behaviorEvent)) {
+            return (
+              behavior.on === 'drag.*' ||
+              behavior.on === event.behaviorEvent.type
+            )
+          }
+
+          return behavior.on === event.behaviorEvent.type
+        })
 
         if (eventBehaviors.length === 0) {
           if (defaultActionCallback) {
@@ -360,7 +384,10 @@ export const editorMachine = setup({
           withApplyingBehaviorActions(event.editor, () => {
             try {
               performAction({
-                context,
+                context: {
+                  keyGenerator: context.keyGenerator,
+                  schema: context.schema,
+                },
                 action: defaultAction,
               })
             } catch (error) {
@@ -379,8 +406,10 @@ export const editorMachine = setup({
           converters: [...context.converters],
           editor: event.editor,
           keyGenerator: context.keyGenerator,
+          readOnly: self.getSnapshot().matches({'edit mode': 'read only'}),
           schema: context.schema,
           hasTag: (tag) => self.getSnapshot().hasTag(tag),
+          internalDrag: context.internalDrag,
         })
 
         let behaviorOverwritten = false
@@ -440,7 +469,13 @@ export const editorMachine = setup({
                 }
 
                 try {
-                  performAction({context, action: internalAction})
+                  performAction({
+                    context: {
+                      keyGenerator: context.keyGenerator,
+                      schema: context.schema,
+                    },
+                    action: internalAction,
+                  })
                 } catch (error) {
                   console.error(
                     new Error(
@@ -483,7 +518,10 @@ export const editorMachine = setup({
           withApplyingBehaviorActions(event.editor, () => {
             try {
               performAction({
-                context,
+                context: {
+                  keyGenerator: context.keyGenerator,
+                  schema: context.schema,
+                },
                 action: defaultAction,
               })
             } catch (error) {
@@ -656,10 +694,28 @@ export const editorMachine = setup({
           states: {
             'idle': {
               on: {
-                dragstart: {target: 'dragging internally'},
+                dragstart: {
+                  actions: [
+                    assign({
+                      internalDrag: ({event}) => ({
+                        ghost: event.ghost,
+                        origin: event.origin,
+                      }),
+                    }),
+                  ],
+                  target: 'dragging internally',
+                },
               },
             },
             'dragging internally': {
+              exit: [
+                ({context}) => {
+                  if (context.internalDrag?.ghost) {
+                    document.body.removeChild(context.internalDrag.ghost)
+                  }
+                },
+                assign({internalDrag: undefined}),
+              ],
               tags: ['dragging internally'],
               on: {
                 dragend: {target: 'idle'},

package/src/editor/editor-selector.ts

@@ -73,12 +73,14 @@ export function getEditorSnapshot({
         slateEditorInstance,
       }),
       keyGenerator: editorActorSnapshot.context.keyGenerator,
+      readOnly: editorActorSnapshot.matches({'edit mode': 'read only'}),
       schema: editorActorSnapshot.context.schema,
       selection: editorActorSnapshot.context.selection,
       value: getValue({editorActorSnapshot, slateEditorInstance}),
     },
     beta: {
       hasTag: (tag) => editorActorSnapshot.hasTag(tag),
+      internalDrag: editorActorSnapshot.context.internalDrag,
     },
   }
 }

package/src/editor/editor-snapshot.ts

@@ -1,5 +1,6 @@
 import type {PortableTextBlock} from '@sanity/types'
 import type {Converter} from '../converters/converter.types'
+import type {EventPosition} from '../internal-utils/event-position'
 import {toPortableTextRange} from '../internal-utils/ranges'
 import {fromSlateValue} from '../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
@@ -15,6 +16,7 @@ export type EditorContext = {
   activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
+  readOnly: boolean
   schema: EditorSchema
   selection: EditorSelection
   value: Array<PortableTextBlock>
@@ -31,6 +33,11 @@ export type EditorSnapshot = {
    */
   beta: {
     hasTag: HasTag
+    internalDrag:
+      | {
+          origin: EventPosition
+        }
+      | undefined
   }
 }
 
@@ -38,14 +45,22 @@ export function createEditorSnapshot({
   converters,
   editor,
   keyGenerator,
+  readOnly,
   schema,
   hasTag,
+  internalDrag,
 }: {
   converters: Array<Converter>
   editor: PortableTextSlateEditor
   keyGenerator: () => string
+  readOnly: boolean
   schema: EditorSchema
   hasTag: HasTag
+  internalDrag:
+    | {
+        origin: EventPosition
+      }
+    | undefined
 }) {
   const value = fromSlateValue(
     editor.children,
@@ -61,6 +76,7 @@ export function createEditorSnapshot({
     }),
     converters,
     keyGenerator,
+    readOnly,
     schema,
     selection,
     value,
@@ -70,6 +86,7 @@ export function createEditorSnapshot({
     context,
     beta: {
       hasTag,
+      internalDrag,
     },
   } satisfies EditorSnapshot
 }