@portabletext/editor 1.51.0 → 1.52.1

package/src/editor/Editable.tsx

@@ -23,18 +23,14 @@ import {
   type RenderElementProps,
   type RenderLeafProps,
 } from 'slate-react'
-import {getCompoundClientRect} from '../internal-utils/compound-client-rect'
 import {debugWithName} from '../internal-utils/debug'
-import {getDragSelection} from '../internal-utils/drag-selection'
 import {getEventPosition} from '../internal-utils/event-position'
 import {parseBlocks} from '../internal-utils/parse-blocks'
 import {toSlateRange} from '../internal-utils/ranges'
 import {normalizeSelection} from '../internal-utils/selection'
-import {getSelectionDomNodes} from '../internal-utils/selection-elements'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {fromSlateValue} from '../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
-import * as selectors from '../selectors'
 import type {
   EditorSelection,
   OnCopyFn,
@@ -50,13 +46,10 @@ 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 {RenderElement} from './components/render-element'
 import {RenderLeaf} from './components/render-leaf'
 import {RenderText, type RenderTextProps} from './components/render-text'
 import {EditorActorContext} from './editor-actor-context'
-import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
 import {PortableTextEditor} from './PortableTextEditor'
@@ -811,131 +804,9 @@ export const PortableTextEditable = forwardRef<
         return
       }
 
-      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,
-      })
-
-      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),
-        )
-
-        for (const block of clonedBlockNodes) {
-          if (block instanceof HTMLElement) {
-            block.style.position = 'relative'
-          }
-          dragGhost.appendChild(block)
-        }
-
-        // 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)
-        }
-
-        // 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)
-        }
-      } else {
-        const clonedChildNodes = draggedDomNodes.childNodes.map((node) =>
-          node.cloneNode(true),
-        )
-
-        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)
-
-        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)
-      }
-
-      // 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',
-          at: isSelectionCollapsed(dragSelection)
-            ? dragSelection
-            : {
-                anchor: getSelectionEndPoint(dragSelection),
-                focus: getSelectionEndPoint(dragSelection),
-                backward: false,
-              },
-        },
-        editor: slateEditor,
-      })
-
       editorActor.send({
         type: 'dragstart',
-        origin: {
-          selection: dragSelection,
-        },
-        ghost: dragGhost,
+        origin: position,
       })
 
       editorActor.send({
@@ -943,11 +814,11 @@ export const PortableTextEditable = forwardRef<
         behaviorEvent: {
           type: 'drag.dragstart',
           originEvent: {
+            clientX: event.clientX,
+            clientY: event.clientY,
             dataTransfer: event.dataTransfer,
           },
-          position: {
-            selection: dragSelection,
-          },
+          position,
         },
         editor: slateEditor,
       })
@@ -1079,6 +950,7 @@ export const PortableTextEditable = forwardRef<
           originEvent: {
             dataTransfer: event.dataTransfer,
           },
+          dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
           position,
         },
         editor: slateEditor,
@@ -1117,6 +989,7 @@ export const PortableTextEditable = forwardRef<
           originEvent: {
             dataTransfer: event.dataTransfer,
           },
+          dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
           position,
         },
         editor: slateEditor,

package/src/editor/components/render-element.tsx

@@ -2,11 +2,7 @@ import {useSelector} from '@xstate/react'
 import {useContext, type ReactElement} from 'react'
 import type {Element as SlateElement} from 'slate'
 import type {RenderElementProps} from 'slate-react'
-import {
-  parseBlockObject,
-  parseInlineObject,
-  parseTextBlock,
-} from '../../internal-utils/parse-blocks'
+import {isTextBlock} from '../../internal-utils/parse-blocks'
 import type {
   RenderBlockFunction,
   RenderChildFunction,
@@ -35,22 +31,19 @@ export function RenderElement(props: {
     '__inline' in props.element && props.element.__inline === true
 
   if (isInline) {
-    const inlineObject = parseInlineObject({
-      context: {
-        keyGenerator: () => '',
-        schema,
-      },
-      options: {refreshKeys: false, validateFields: false},
-      inlineObject: {
-        _key: props.element._key,
-        _type: props.element._type,
-        ...('value' in props.element && typeof props.element.value === 'object'
-          ? props.element.value
-          : {}),
-      },
-    })
+    const inlineObject = {
+      _key: props.element._key,
+      _type: props.element._type,
+      ...('value' in props.element && typeof props.element.value === 'object'
+        ? props.element.value
+        : {}),
+    }
 
-    if (!inlineObject) {
+    if (
+      !schema.inlineObjects.find(
+        (inlineObject) => inlineObject.name === props.element._type,
+      )
+    ) {
       console.error(
         `Unable to find Inline Object "${props.element._type}" in Schema`,
       )
@@ -74,16 +67,7 @@ export function RenderElement(props: {
     )
   }
 
-  const textBlock = parseTextBlock({
-    context: {
-      keyGenerator: () => '',
-      schema,
-    },
-    options: {refreshKeys: false, validateFields: false},
-    block: props.element,
-  })
-
-  if (textBlock) {
+  if (isTextBlock({schema}, props.element)) {
     return (
       <RenderTextBlock
         attributes={props.attributes}
@@ -93,29 +77,26 @@ export function RenderElement(props: {
         renderListItem={props.renderListItem}
         renderStyle={props.renderStyle}
         spellCheck={props.spellCheck}
-        textBlock={textBlock}
+        textBlock={props.element}
       >
         {props.children}
       </RenderTextBlock>
     )
   }
 
-  const blockObject = parseBlockObject({
-    context: {
-      keyGenerator: () => '',
-      schema,
-    },
-    options: {refreshKeys: false, validateFields: false},
-    blockObject: {
-      _key: props.element._key,
-      _type: props.element._type,
-      ...('value' in props.element && typeof props.element.value === 'object'
-        ? props.element.value
-        : {}),
-    },
-  })
+  const blockObject = {
+    _key: props.element._key,
+    _type: props.element._type,
+    ...('value' in props.element && typeof props.element.value === 'object'
+      ? props.element.value
+      : {}),
+  }
 
-  if (!blockObject) {
+  if (
+    !schema.blockObjects.find(
+      (blockObject) => blockObject.name === props.element._type,
+    )
+  ) {
     console.error(
       `Unable to find Block Object "${props.element._type}" in Schema`,
     )

package/src/editor/editor-machine.ts

@@ -114,10 +114,14 @@ export type InternalEditorEvent =
     }
   | MutationEvent
   | InternalPatchEvent
+  | {
+      type: 'set drag ghost'
+      ghost: HTMLElement
+    }
   | {
       type: 'dragstart'
-      origin: Pick<EventPosition, 'selection'>
       ghost?: HTMLElement
+      origin: Pick<EventPosition, 'selection'>
     }
   | {type: 'dragend'}
   | {type: 'drop'}
@@ -148,9 +152,9 @@ export const editorMachine = setup({
       selection: EditorSelection
       initialValue: Array<PortableTextBlock> | undefined
       internalDrag?: {
-        ghost?: HTMLElement
         origin: Pick<EventPosition, 'selection'>
       }
+      dragGhost?: HTMLElement
       slateEditor?: PortableTextSlateEditor
     },
     events: {} as InternalEditorEvent,
@@ -273,9 +277,9 @@ export const editorMachine = setup({
               keyGenerator: context.keyGenerator,
               readOnly: self.getSnapshot().matches({'edit mode': 'read only'}),
               schema: context.schema,
-              internalDrag: context.internalDrag,
             }),
           nativeEvent: event.nativeEvent,
+          sendBack: (event) => self.send(event),
         })
       } catch (error) {
         console.error(
@@ -322,6 +326,9 @@ export const editorMachine = setup({
         emit(({event}) => ({...event, type: 'selection'})),
       ],
     },
+    'set drag ghost': {
+      actions: assign({dragGhost: ({event}) => event.ghost}),
+    },
   },
   type: 'parallel',
   states: {
@@ -427,7 +434,6 @@ export const editorMachine = setup({
                   actions: [
                     assign({
                       internalDrag: ({event}) => ({
-                        ghost: event.ghost,
                         origin: event.origin,
                       }),
                     }),
@@ -495,20 +501,21 @@ export const editorMachine = setup({
                   debug('exit: edit mode->editable->dragging internally')
                 },
                 ({context}) => {
-                  if (context.internalDrag?.ghost) {
+                  if (context.dragGhost) {
                     try {
-                      context.internalDrag.ghost.parentNode?.removeChild(
-                        context.internalDrag.ghost,
+                      context.dragGhost.parentNode?.removeChild(
+                        context.dragGhost,
                       )
                     } catch (error) {
                       console.error(
                         new Error(
-                          `Removing the internal drag ghost failed due to: ${error.message}`,
+                          `Removing the drag ghost failed due to: ${error.message}`,
                         ),
                       )
                     }
                   }
                 },
+                assign({dragGhost: undefined}),
                 assign({internalDrag: undefined}),
               ],
               tags: ['dragging internally'],

package/src/editor/editor-selector.ts

@@ -86,7 +86,6 @@ export function getEditorSnapshot({
         markState: slateEditorInstance.markState,
         schema: editorActorSnapshot.context.schema,
       }),
-      internalDrag: editorActorSnapshot.context.internalDrag,
     },
   }
 }

package/src/editor/editor-snapshot.ts

@@ -1,6 +1,5 @@
 import type {PortableTextBlock} from '@sanity/types'
 import type {Converter} from '../converters/converter.types'
-import type {EventPosition} from '../internal-utils/event-position'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 import type {EditorSchema} from './editor-schema'
@@ -31,11 +30,6 @@ export type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 
@@ -45,18 +39,12 @@ export function createEditorSnapshot({
   keyGenerator,
   readOnly,
   schema,
-  internalDrag,
 }: {
   converters: Array<Converter>
   editor: PortableTextSlateEditor
   keyGenerator: () => string
   readOnly: boolean
   schema: EditorSchema
-  internalDrag:
-    | {
-        origin: Pick<EventPosition, 'selection'>
-      }
-    | undefined
 }) {
   const selection = editor.selection
     ? slateRangeToSelection({
@@ -87,7 +75,6 @@ export function createEditorSnapshot({
         markState: editor.markState,
         schema,
       }),
-      internalDrag,
     },
   } satisfies EditorSnapshot
 }

package/src/editor/plugins/createWithSchemaTypes.ts

@@ -3,7 +3,7 @@ import type {
   PortableTextSpan,
   PortableTextTextBlock,
 } from '@sanity/types'
-import {Transforms, type Element} from 'slate'
+import {Editor, Transforms, type Element} from 'slate'
 import {debugWithName} from '../../internal-utils/debug'
 import {
   isListBlock,
@@ -27,15 +27,31 @@ export function createWithSchemaTypes({
     editor: PortableTextSlateEditor,
   ): PortableTextSlateEditor {
     editor.isTextBlock = (value: unknown): value is PortableTextTextBlock => {
+      if (Editor.isEditor(value)) {
+        return false
+      }
+
       return isTextBlock(editorActor.getSnapshot().context, value)
     }
     editor.isTextSpan = (value: unknown): value is PortableTextSpan => {
+      if (Editor.isEditor(value)) {
+        return false
+      }
+
       return isSpan(editorActor.getSnapshot().context, value)
     }
     editor.isListBlock = (value: unknown): value is PortableTextListBlock => {
+      if (Editor.isEditor(value)) {
+        return false
+      }
+
       return isListBlock(editorActor.getSnapshot().context, value)
     }
     editor.isVoid = (element: Element): boolean => {
+      if (Editor.isEditor(element)) {
+        return false
+      }
+
       return (
         editorActor.getSnapshot().context.schema.block.name !== element._type &&
         (editorActor
@@ -49,6 +65,10 @@ export function createWithSchemaTypes({
       )
     }
     editor.isInline = (element: Element): boolean => {
+      if (Editor.isEditor(element)) {
+        return false
+      }
+
       const inlineSchemaTypes = editorActor
         .getSnapshot()
         .context.schema.inlineObjects.map((obj) => obj.name)

package/src/internal-utils/create-test-snapshot.ts

@@ -19,7 +19,6 @@ export function createTestSnapshot(snapshot: {
     beta: {
       activeAnnotations: snapshot.beta?.activeAnnotations ?? [],
       activeDecorators: snapshot.beta?.activeDecorators ?? [],
-      internalDrag: undefined,
     },
   }
 }

package/src/internal-utils/event-position.ts

@@ -35,79 +35,93 @@ export function getEventPosition({
     return undefined
   }
 
-  const node = getEventNode({slateEditor, event})
+  const eventNode = getEventNode({slateEditor, event})
 
-  if (!node) {
+  if (!eventNode) {
     return undefined
   }
 
-  const block = getNodeBlock({
+  const eventBlock = getNodeBlock({
     editor: slateEditor,
     schema: editorActor.getSnapshot().context.schema,
-    node,
+    node: eventNode,
   })
-
-  const positionBlock = getEventPositionBlock({node, slateEditor, event})
-  const selection = getEventSelection({
+  const eventPositionBlock = getEventPositionBlock({
+    node: eventNode,
+    slateEditor,
+    event,
+  })
+  const eventSelection = getEventSelection({
     schema: editorActor.getSnapshot().context.schema,
     slateEditor,
     event,
   })
 
-  if (block && positionBlock && !selection && !Editor.isEditor(node)) {
+  if (
+    eventBlock &&
+    eventPositionBlock &&
+    !eventSelection &&
+    !Editor.isEditor(eventNode)
+  ) {
+    // If we for some reason can't find the event selection, then we default to
+    // selecting the entire block that the event originates from.
     return {
-      block: positionBlock,
+      block: eventPositionBlock,
       isEditor: false,
       selection: {
         anchor: utils.getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
         focus: utils.getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
       },
     }
   }
 
-  if (!positionBlock || !selection) {
+  if (!eventPositionBlock || !eventSelection) {
     return undefined
   }
 
-  const focusBlockKey = getBlockKeyFromSelectionPoint(selection.focus)
+  const eventSelectionFocusBlockKey = getBlockKeyFromSelectionPoint(
+    eventSelection.focus,
+  )
 
-  if (focusBlockKey === undefined) {
+  if (eventSelectionFocusBlockKey === undefined) {
     return undefined
   }
 
   if (
-    utils.isSelectionCollapsed(selection) &&
-    block &&
-    focusBlockKey !== block._key
+    utils.isSelectionCollapsed(eventSelection) &&
+    eventBlock &&
+    eventSelectionFocusBlockKey !== eventBlock._key
   ) {
+    // If the event block and event selection somehow don't match, then the
+    // event block takes precedence.
     return {
-      block: positionBlock,
+      block: eventPositionBlock,
       isEditor: false,
       selection: {
         anchor: utils.getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
         focus: utils.getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
       },
@@ -115,9 +129,9 @@ export function getEventPosition({
   }
 
   return {
-    block: positionBlock,
-    isEditor: Editor.isEditor(node),
-    selection,
+    block: eventPositionBlock,
+    isEditor: Editor.isEditor(eventNode),
+    selection: eventSelection,
   }
 }
 

package/src/internal-utils/parse-blocks.ts

@@ -97,13 +97,19 @@ export function isTextBlock(
   context: Pick<EditorContext, 'schema'>,
   block: unknown,
 ): block is PortableTextTextBlock {
-  return (
-    parseTextBlock({
-      block,
-      context: {schema: context.schema, keyGenerator: () => ''},
-      options: {refreshKeys: false, validateFields: false},
-    }) !== undefined
-  )
+  if (!isTypedObject(block)) {
+    return false
+  }
+
+  if (block._type !== context.schema.block.name) {
+    return false
+  }
+
+  if (!Array.isArray(block.children)) {
+    return false
+  }
+
+  return true
 }
 
 export function parseTextBlock({
@@ -249,14 +255,19 @@ export function isSpan(
   context: Pick<EditorContext, 'schema'>,
   child: unknown,
 ): child is PortableTextSpan {
-  return (
-    parseSpan({
-      span: child,
-      markDefKeyMap: new Map(),
-      context: {schema: context.schema, keyGenerator: () => ''},
-      options: {refreshKeys: false, validateFields: false},
-    }) !== undefined
-  )
+  if (!isTypedObject(child)) {
+    return false
+  }
+
+  if (child._type !== context.schema.span.name) {
+    return false
+  }
+
+  if (typeof child.text !== 'string') {
+    return false
+  }
+
+  return true
 }
 
 export function parseSpan({