@portabletext/editor 1.40.3 → 1.41.0

package/src/internal-utils/drag-selection.test.ts

@@ -41,10 +41,11 @@ describe(getDragSelection.name, () => {
       {
         _key: keyGenerator(),
         _type: 'span',
-        text: 'bar',
+        text: 'baz',
       },
     ],
   }
+  const bazPath = [{_key: baz._key}, 'children', {_key: baz.children[0]._key}]
   const image = {
     _key: keyGenerator(),
     _type: 'image',
@@ -262,6 +263,78 @@ describe(getDragSelection.name, () => {
     })
   })
 
+  test('dragging two text blocks with the top drag handle', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 1,
+          },
+          focus: {
+            path: bazPath,
+            offset: 3,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: bazPath,
+        offset: 3,
+      },
+    })
+  })
+
+  test('dragging two text blocks with the bottom drag handle', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: bazPath,
+            offset: 0,
+          },
+          focus: {
+            path: bazPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 1,
+          },
+          focus: {
+            path: bazPath,
+            offset: 3,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: bazPath,
+        offset: 3,
+      },
+    })
+  })
+
   test('dragging a block object with an expanded selected', () => {
     expect(
       getDragSelection({

package/src/internal-utils/drag-selection.ts

@@ -48,16 +48,32 @@ export function getDragSelection({
   if (
     snapshot.context.selection &&
     selectors.isSelectionExpanded(snapshot) &&
-    selectors.isOverlappingSelection(eventSelection)(snapshot) &&
     selectedBlocks.length > 1
   ) {
     const selectionStartBlock = selectors.getSelectionStartBlock(snapshot)
     const selectionEndBlock = selectors.getSelectionEndBlock(snapshot)
 
-    if (selectionStartBlock && selectionEndBlock) {
+    if (!selectionStartBlock || !selectionEndBlock) {
+      return dragSelection
+    }
+
+    const selectionStartPoint = utils.getBlockStartPoint(selectionStartBlock)
+    const selectionEndPoint = utils.getBlockEndPoint(selectionEndBlock)
+
+    const eventSelectionInsideBlocks = selectors.isOverlappingSelection(
+      eventSelection,
+    )({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: {anchor: selectionStartPoint, focus: selectionEndPoint},
+      },
+    })
+
+    if (eventSelectionInsideBlocks) {
       dragSelection = {
-        anchor: utils.getBlockStartPoint(selectionStartBlock),
-        focus: utils.getBlockEndPoint(selectionEndBlock),
+        anchor: selectionStartPoint,
+        focus: selectionEndPoint,
       }
     }
   }

package/src/internal-utils/dragging-on-drag-origin.ts

@@ -0,0 +1,22 @@
+import type {EditorSnapshot} from '..'
+import * as selectors from '../selectors'
+import type {EventPosition} from './event-position'
+
+export function draggingOnDragOrigin({
+  snapshot,
+  position,
+}: {
+  snapshot: EditorSnapshot
+  position: EventPosition
+}) {
+  const dragOrigin = snapshot.beta.internalDrag?.origin
+  return dragOrigin
+    ? selectors.isOverlappingSelection(position.selection)({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragOrigin.selection,
+        },
+      })
+    : false
+}

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

@@ -4,6 +4,7 @@ import type {EditorSchema, EditorSelection} from '..'
 import type {PortableTextSlateEditor} from '../types/editor'
 import * as utils from '../utils'
 import {toPortableTextRange} from './ranges'
+import {getFirstBlock, getLastBlock, getNodeBlock} from './slate-utils'
 import {fromSlateValue} from './values'
 
 export type EventPosition = {
@@ -31,6 +32,12 @@ export function getEventPosition({
     return undefined
   }
 
+  const block = getNodeBlock({
+    editor: slateEditor,
+    schema,
+    node,
+  })
+
   const positionBlock = getEventPositionBlock({node, slateEditor, event})
   const selection = getEventSelection({
     schema,
@@ -38,13 +45,7 @@ export function getEventPosition({
     event,
   })
 
-  if (positionBlock && !selection && !Editor.isEditor(node)) {
-    const block = fromSlateValue([node], schema.block.name)?.at(0)
-
-    if (!block) {
-      return undefined
-    }
-
+  if (block && positionBlock && !selection && !Editor.isEditor(node)) {
     return {
       block: positionBlock,
       isEditor: false,
@@ -65,6 +66,36 @@ export function getEventPosition({
     return undefined
   }
 
+  const focusBlockPath = selection.focus.path.at(0)
+  const focusBlockKey = utils.isKeyedSegment(focusBlockPath)
+    ? focusBlockPath._key
+    : undefined
+
+  if (!focusBlockKey) {
+    return undefined
+  }
+
+  if (
+    utils.isSelectionCollapsed(selection) &&
+    block &&
+    focusBlockKey !== block._key
+  ) {
+    return {
+      block: positionBlock,
+      isEditor: false,
+      selection: {
+        anchor: utils.getBlockStartPoint({
+          node: block,
+          path: [{_key: block._key}],
+        }),
+        focus: utils.getBlockEndPoint({
+          node: block,
+          path: [{_key: block._key}],
+        }),
+      },
+    }
+  }
+
   return {
     block: positionBlock,
     isEditor: Editor.isEditor(node),
@@ -97,6 +128,32 @@ function getEventPositionBlock({
   slateEditor: PortableTextSlateEditor
   event: DragEvent | MouseEvent
 }): EventPositionBlock | undefined {
+  const [firstBlock] = getFirstBlock({editor: slateEditor})
+
+  if (!firstBlock) {
+    return undefined
+  }
+
+  const firstBlockElement = DOMEditor.toDOMNode(slateEditor, firstBlock)
+  const firstBlockRect = firstBlockElement.getBoundingClientRect()
+
+  if (event.pageY < firstBlockRect.top) {
+    return 'start'
+  }
+
+  const [lastBlock] = getLastBlock({editor: slateEditor})
+
+  if (!lastBlock) {
+    return undefined
+  }
+
+  const lastBlockElement = DOMEditor.toDOMNode(slateEditor, lastBlock)
+  const lastBlockRef = lastBlockElement.getBoundingClientRect()
+
+  if (event.pageY > lastBlockRef.bottom) {
+    return 'end'
+  }
+
   const element = DOMEditor.toDOMNode(slateEditor, node)
   const elementRect = element.getBoundingClientRect()
   const top = elementRect.top
@@ -151,9 +208,11 @@ function getSlateRangeFromEvent(
     )
 
     if (position) {
-      domRange = window.document.createRange()
-      domRange.setStart(position.offsetNode, position.offset)
-      domRange.setEnd(position.offsetNode, position.offset)
+      try {
+        domRange = window.document.createRange()
+        domRange.setStart(position.offsetNode, position.offset)
+        domRange.setEnd(position.offsetNode, position.offset)
+      } catch {}
     }
   } else if (window.document.caretRangeFromPoint !== undefined) {
     // Use WebKit-proprietary fallback method

package/src/internal-utils/slate-utils.ts

@@ -1,5 +1,7 @@
-import {Editor, Node, type Path} from 'slate'
+import {Editor, Element, Node, type Path} from 'slate'
+import type {EditorSchema} from '../editor/define-schema'
 import type {PortableTextSlateEditor} from '../types/editor'
+import {fromSlateValue} from './values'
 
 export function getFocusBlock({
   editor,
@@ -39,18 +41,84 @@ export function getFocusChild({
     : [undefined, undefined]
 }
 
+export function getFirstBlock({
+  editor,
+}: {
+  editor: PortableTextSlateEditor
+}): [node: Node, path: Path] | [undefined, undefined] {
+  const firstPoint = Editor.start(editor, [])
+  const firstBlockPath = firstPoint.path.at(0)
+
+  return firstBlockPath !== undefined
+    ? (Editor.node(editor, [firstBlockPath]) ?? [undefined, undefined])
+    : [undefined, undefined]
+}
+
 export function getLastBlock({
   editor,
 }: {
   editor: PortableTextSlateEditor
 }): [node: Node, path: Path] | [undefined, undefined] {
-  const lastBlock = Array.from(
+  const lastPoint = Editor.end(editor, [])
+  const lastBlockPath = lastPoint.path.at(0)
+  return lastBlockPath !== undefined
+    ? (Editor.node(editor, [lastBlockPath]) ?? [undefined, undefined])
+    : [undefined, undefined]
+}
+
+export function getNodeBlock({
+  editor,
+  schema,
+  node,
+}: {
+  editor: PortableTextSlateEditor
+  schema: EditorSchema
+  node: Node
+}) {
+  if (Editor.isEditor(node)) {
+    return undefined
+  }
+
+  if (isBlockElement(schema, node)) {
+    return elementToBlock({schema, element: node})
+  }
+
+  const parent = Array.from(
     Editor.nodes(editor, {
-      match: (n) => !Editor.isEditor(n),
+      mode: 'highest',
       at: [],
-      reverse: true,
+      match: (n) =>
+        isBlockElement(schema, n) &&
+        n.children.some((child) => child._key === node._key),
     }),
-  ).at(0)
+  )
+    .at(0)
+    ?.at(0)
+
+  return Element.isElement(parent)
+    ? elementToBlock({
+        schema,
+        element: parent,
+      })
+    : undefined
+}
+
+function elementToBlock({
+  schema,
+  element,
+}: {
+  schema: EditorSchema
+  element: Element
+}) {
+  return fromSlateValue([element], schema.block.name)?.at(0)
+}
 
-  return lastBlock ?? [undefined, undefined]
+function isBlockElement(schema: EditorSchema, node: Node): node is Element {
+  return (
+    Element.isElement(node) &&
+    (schema.block.name === node._type ||
+      schema.blockObjects.some(
+        (blockObject) => blockObject.name === node._type,
+      ))
+  )
 }

package/src/utils/index.ts

@@ -8,6 +8,8 @@ export {blockOffsetsToSelection} from './util.block-offsets-to-selection'
 export {childSelectionPointToBlockOffset} from './util.child-selection-point-to-block-offset'
 export {getBlockEndPoint} from './util.get-block-end-point'
 export {getBlockStartPoint} from './util.get-block-start-point'
+export {getSelectionEndPoint} from './util.get-selection-end-point'
+export {getSelectionStartPoint} from './util.get-selection-start-point'
 export {getTextBlockText} from './util.get-text-block-text'
 export {isEmptyTextBlock} from './util.is-empty-text-block'
 export {isEqualSelectionPoints} from './util.is-equal-selection-points'

package/src/utils/util.get-selection-end-point.ts

@@ -0,0 +1,20 @@
+import type {EditorSelection, EditorSelectionPoint} from '..'
+
+/**
+ * @public
+ */
+export function getSelectionEndPoint<
+  TEditorSelection extends NonNullable<EditorSelection> | null,
+  TEditorSelectionPoint extends
+    EditorSelectionPoint | null = TEditorSelection extends NonNullable<EditorSelection>
+    ? EditorSelectionPoint
+    : null,
+>(selection: TEditorSelection): TEditorSelectionPoint {
+  if (!selection) {
+    return null as TEditorSelectionPoint
+  }
+
+  return (
+    selection.backward ? selection.anchor : selection.focus
+  ) as TEditorSelectionPoint
+}

package/src/utils/util.get-selection-start-point.ts

@@ -0,0 +1,20 @@
+import type {EditorSelection, EditorSelectionPoint} from '..'
+
+/**
+ * @public
+ */
+export function getSelectionStartPoint<
+  TEditorSelection extends NonNullable<EditorSelection> | null,
+  TEditorSelectionPoint extends
+    EditorSelectionPoint | null = TEditorSelection extends NonNullable<EditorSelection>
+    ? EditorSelectionPoint
+    : null,
+>(selection: TEditorSelection): TEditorSelectionPoint {
+  if (!selection) {
+    return null as TEditorSelectionPoint
+  }
+
+  return (
+    selection.backward ? selection.focus : selection.anchor
+  ) as TEditorSelectionPoint
+}

package/src/utils/util.is-keyed-segment.ts

@@ -1,8 +1,8 @@
-import type {KeyedSegment, PathSegment} from '@sanity/types'
+import type {KeyedSegment} from '@sanity/types'
 
 /**
  * @public
  */
-export function isKeyedSegment(segment: PathSegment): segment is KeyedSegment {
+export function isKeyedSegment(segment: unknown): segment is KeyedSegment {
   return typeof segment === 'object' && segment !== null && '_key' in segment
 }