@portabletext/editor 1.36.6 → 1.38.0

package/src/editor/plugins/create-with-event-listeners.ts

@@ -61,15 +61,8 @@ export function createWithEventListeners(
       }
     })
 
-    const {
-      deleteBackward,
-      deleteForward,
-      insertBreak,
-      insertData,
-      insertText,
-      select,
-      setFragmentData,
-    } = editor
+    const {deleteBackward, deleteForward, insertBreak, insertText, select} =
+      editor
 
     editor.deleteBackward = (unit) => {
       if (isApplyingBehaviorActions(editor)) {
@@ -121,20 +114,8 @@ export function createWithEventListeners(
       return
     }
 
-    editor.insertData = (dataTransfer) => {
-      if (isApplyingBehaviorActions(editor)) {
-        insertData(dataTransfer)
-        return
-      }
-
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'deserialize',
-          dataTransfer,
-        },
-        editor,
-      })
+    editor.insertData = () => {
+      console.warn('Unexpected call to .insertData(...)')
       return
     }
 
@@ -236,23 +217,8 @@ export function createWithEventListeners(
       return
     }
 
-    editor.setFragmentData = (dataTransfer, originEvent) => {
-      if (isApplyingBehaviorActions(editor)) {
-        setFragmentData(dataTransfer)
-        return
-      }
-
-      dataTransfer.clearData()
-
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'serialize',
-          dataTransfer,
-          originEvent: originEvent ?? 'unknown',
-        },
-        editor,
-      })
+    editor.setFragmentData = () => {
+      console.warn('Unexpected call to .setFragmentData(...)')
       return
     }
 

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

@@ -13,11 +13,13 @@ export function createTestSnapshot(snapshot: {
         snapshot.context?.schema ?? compileSchemaDefinition(defineSchema({})),
       keyGenerator: snapshot.context?.keyGenerator ?? createTestKeyGenerator(),
       activeDecorators: snapshot.context?.activeDecorators ?? [],
+      readOnly: snapshot.context?.readOnly ?? false,
       value: snapshot.context?.value ?? [],
       selection: snapshot.context?.selection ?? null,
     },
     beta: {
       hasTag: snapshot.beta?.hasTag ?? (() => false),
+      internalDrag: undefined,
     },
   }
 }

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

@@ -0,0 +1,210 @@
+import {Editor, type BaseRange} from 'slate'
+import {DOMEditor, isDOMNode} from 'slate-dom'
+import {ReactEditor} from 'slate-react'
+import type {EditorSelection, EditorSnapshot} from '..'
+import * as selectors from '../selectors'
+import type {PortableTextSlateEditor} from '../types/editor'
+import * as utils from '../utils'
+import {toPortableTextRange} from './ranges'
+
+export type EventPosition = {
+  block: 'start' | 'end'
+  /**
+   * Did the event origin from the editor DOM node itself or from a child node?
+   */
+  isEditor: boolean
+  selection: NonNullable<EditorSelection>
+}
+export type EventPositionBlock = EventPosition['block']
+
+export function getEventPosition({
+  snapshot,
+  slateEditor,
+  event,
+}: {
+  snapshot: EditorSnapshot
+  slateEditor: PortableTextSlateEditor
+  event: DragEvent | ClipboardEvent | MouseEvent
+}): EventPosition | undefined {
+  if (!DOMEditor.hasTarget(slateEditor, event.target)) {
+    return undefined
+  }
+
+  const node = DOMEditor.toSlateNode(slateEditor, event.target)
+
+  if (isClipboardEvent(event)) {
+    const selection = snapshot.context.selection
+
+    if (!selection) {
+      return undefined
+    }
+
+    return {
+      block: 'end',
+      isEditor: Editor.isEditor(node),
+      selection,
+    }
+  }
+
+  const block = getEventPositionBlock({slateEditor, event})
+  const selection = getEventPositionSelection({snapshot, slateEditor, event})
+
+  if (!block || !selection) {
+    return undefined
+  }
+
+  return {
+    block,
+    isEditor: Editor.isEditor(node),
+    selection,
+  }
+}
+
+function getEventPositionBlock({
+  slateEditor,
+  event,
+}: {
+  slateEditor: PortableTextSlateEditor
+  event: DragEvent | MouseEvent
+}): EventPositionBlock | undefined {
+  if (!ReactEditor.hasTarget(slateEditor, event.target)) {
+    return undefined
+  }
+
+  const node = ReactEditor.toSlateNode(slateEditor, event.target)
+  const element = ReactEditor.toDOMNode(slateEditor, node)
+  const elementRect = element.getBoundingClientRect()
+  const top = elementRect.top
+  const height = elementRect.height
+  const location = Math.abs(top - event.pageY)
+
+  return location < height / 2 ? 'start' : 'end'
+}
+
+function getEventPositionSelection({
+  snapshot,
+  slateEditor,
+  event,
+}: {
+  snapshot: EditorSnapshot
+  slateEditor: PortableTextSlateEditor
+  event: DragEvent | MouseEvent
+}): EditorSelection {
+  const range = getSlateRangeFromEvent(slateEditor, event)
+
+  const selection = range
+    ? toPortableTextRange(
+        snapshot.context.value,
+        range,
+        snapshot.context.schema,
+      )
+    : null
+
+  if (!selection) {
+    return selection
+  }
+
+  const collapsedSelection = selectors.isSelectionCollapsed({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection,
+    },
+  })
+  const focusTextBlock = selectors.getFocusTextBlock({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection,
+    },
+  })
+  const focusSpan = selectors.getFocusSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection,
+    },
+  })
+
+  if (
+    event.type === 'dragstart' &&
+    collapsedSelection &&
+    focusTextBlock &&
+    focusSpan
+  ) {
+    // Looks like we are dragging an empty span. Let's drag the entire block
+    // instead
+
+    const blockStartPoint = utils.getBlockStartPoint(focusTextBlock)
+    const blockEndPoint = utils.getBlockEndPoint(focusTextBlock)
+
+    return {
+      anchor: blockStartPoint,
+      focus: blockEndPoint,
+    }
+  }
+
+  return selection
+}
+
+function getSlateRangeFromEvent(
+  editor: PortableTextSlateEditor,
+  event: DragEvent | MouseEvent,
+) {
+  if (!event.target) {
+    return undefined
+  }
+
+  if (!isDOMNode(event.target)) {
+    return undefined
+  }
+
+  const window = DOMEditor.getWindow(editor)
+
+  let domRange: Range | undefined
+
+  if (window.document.caretPositionFromPoint !== undefined) {
+    const position = window.document.caretPositionFromPoint(
+      event.clientX,
+      event.clientY,
+    )
+
+    if (position) {
+      domRange = window.document.createRange()
+      domRange.setStart(position.offsetNode, position.offset)
+      domRange.setEnd(position.offsetNode, position.offset)
+    }
+  } else if (window.document.caretRangeFromPoint !== undefined) {
+    // Use WebKit-proprietary fallback method
+    domRange =
+      window.document.caretRangeFromPoint(event.clientX, event.clientY) ??
+      undefined
+  } else {
+    console.warn(
+      'Neither caretPositionFromPoint nor caretRangeFromPoint is supported',
+    )
+    return undefined
+  }
+
+  if (!domRange) {
+    return undefined
+  }
+
+  let range: BaseRange | undefined
+
+  try {
+    range = DOMEditor.toSlateRange(editor, domRange, {
+      exactMatch: false,
+      // It can still throw even with this option set to true
+      suppressThrow: false,
+    })
+  } catch {}
+
+  return range
+}
+
+function isClipboardEvent(
+  event: DragEvent | ClipboardEvent | MouseEvent,
+): event is ClipboardEvent {
+  return event.type === 'copy' || event.type === 'cut' || event.type === 'paste'
+}

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

@@ -0,0 +1,56 @@
+import {Editor, Node, type Path} from 'slate'
+import type {PortableTextSlateEditor} from '../types/editor'
+
+export function getFocusBlock({
+  editor,
+}: {
+  editor: PortableTextSlateEditor
+}): [node: Node, path: Path] | [undefined, undefined] {
+  if (!editor.selection) {
+    return [undefined, undefined]
+  }
+
+  const focusBlock = Array.from(
+    Editor.nodes(editor, {
+      at: editor.selection.focus.path.slice(0, 1),
+      match: (n) => !Editor.isEditor(n),
+    }),
+  ).at(0)
+
+  return focusBlock ?? [undefined, undefined]
+}
+
+export function getFocusChild({
+  editor,
+}: {
+  editor: PortableTextSlateEditor
+}): [node: Node, path: Path] | [undefined, undefined] {
+  const [focusBlock, focusBlockPath] = getFocusBlock({editor})
+  const childIndex = editor.selection?.focus.path.at(1)
+
+  if (!focusBlock || !focusBlockPath || childIndex === undefined) {
+    return [undefined, undefined]
+  }
+
+  const focusChild = Node.child(focusBlock, childIndex)
+
+  return focusChild
+    ? [focusChild, [...focusBlockPath, childIndex]]
+    : [undefined, undefined]
+}
+
+export function getLastBlock({
+  editor,
+}: {
+  editor: PortableTextSlateEditor
+}): [node: Node, path: Path] | [undefined, undefined] {
+  const lastBlock = Array.from(
+    Editor.nodes(editor, {
+      match: (n) => !Editor.isEditor(n),
+      at: [],
+      reverse: true,
+    }),
+  ).at(0)
+
+  return lastBlock ?? [undefined, undefined]
+}

package/src/internal-utils/weakMaps.ts

@@ -1,24 +1,10 @@
-import type {Editor, Element, Range} from 'slate'
+import type {Editor, Range} from 'slate'
 import type {EditorSelection} from '..'
 
 // Is the editor currently receiving remote changes that are being applied to the content?
 export const IS_PROCESSING_REMOTE_CHANGES: WeakMap<Editor, boolean> =
   new WeakMap()
 
-// Is the editor dragging something?
-export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
-// Is the editor dragging a element?
-export const IS_DRAGGING_BLOCK_ELEMENT: WeakMap<Editor, Element> = new WeakMap()
-
-// When dragging elements, this will be the target element
-export const IS_DRAGGING_ELEMENT_TARGET: WeakMap<Editor, Element> =
-  new WeakMap()
-// Target position for dragging over a block
-export const IS_DRAGGING_BLOCK_TARGET_POSITION: WeakMap<
-  Editor,
-  'top' | 'bottom'
-> = new WeakMap()
-
 export const KEY_TO_SLATE_ELEMENT: WeakMap<Editor, any | undefined> =
   new WeakMap()
 export const KEY_TO_VALUE_ELEMENT: WeakMap<Editor, any | undefined> =

package/src/selectors/index.ts

@@ -1,3 +1,4 @@
+export {isSelectingEntireBlocks} from './selector.is-selecting-entire-blocks'
 export {getActiveAnnotations} from './selector.get-active-annotations'
 export {getActiveListItem} from './selector.get-active-list-item'
 export {getActiveStyle} from './selector.get-active-style'
@@ -7,6 +8,7 @@ export {getAnchorSpan} from './selector.get-anchor-span'
 export {getAnchorTextBlock} from './selector.get-anchor-text-block'
 export {getBlockOffsets} from './selector.get-block-offsets'
 export {getCaretWordSelection} from './selector.get-caret-word-selection'
+export {getFocusInlineObject} from './selector.get-focus-inline-object'
 export {getNextInlineObject} from './selector.get-next-inline-object'
 export {getPreviousInlineObject} from './selector.get-previous-inline-object'
 export {getSelectedSlice} from './selector.get-selected-slice'

package/src/selectors/selector.get-focus-inline-object.ts

@@ -0,0 +1,21 @@
+import {
+  isPortableTextSpan,
+  type KeyedSegment,
+  type PortableTextObject,
+} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {getFocusChild} from './selectors'
+
+/**
+ * @public
+ */
+export const getFocusInlineObject: EditorSelector<
+  | {node: PortableTextObject; path: [KeyedSegment, 'children', KeyedSegment]}
+  | undefined
+> = (snapshot) => {
+  const focusChild = getFocusChild(snapshot)
+
+  return focusChild && !isPortableTextSpan(focusChild.node)
+    ? {node: focusChild.node, path: focusChild.path}
+    : undefined
+}

package/src/selectors/selector.is-overlapping-selection.test.ts

@@ -0,0 +1,171 @@
+import {describe, expect, test} from 'vitest'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
+import type {EditorSelection} from '../types/editor'
+import {isOverlappingSelection} from './selector.is-overlapping-selection'
+
+function snapshot(selection: EditorSelection) {
+  return createTestSnapshot({
+    context: {
+      selection,
+      value: [
+        {_type: 'image', _key: 'k0'},
+        {
+          _type: 'block',
+          _key: 'k1',
+          children: [
+            {_type: 'span', _key: 'k3', text: 'foo'},
+            {_type: 'stock-ticker', _key: 'k4'},
+            {_type: 'span', _key: 'k5', text: 'bar'},
+          ],
+        },
+        {_type: 'image', _key: 'k2'},
+      ],
+    },
+  })
+}
+
+describe(isOverlappingSelection.name, () => {
+  test('null', () => {
+    expect(isOverlappingSelection(null)(snapshot(null))).toBe(false)
+  })
+
+  test('fully selected block object', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k0'}], offset: 0},
+        focus: {path: [{_key: 'k0'}], offset: 0},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k0'}], offset: 0},
+          focus: {path: [{_key: 'k0'}], offset: 0},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('block object inside selection', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k0'}], offset: 0},
+        focus: {path: [{_key: 'k0'}], offset: 0},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k0'}], offset: 0},
+          focus: {path: [{_key: 'k2'}], offset: 0},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('fully selected inline object', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('inline object inside selection', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('selection right before', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(false)
+  })
+
+  test('selection overlapping from the start', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('selection right after', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 2},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(false)
+  })
+
+  test('selection overlapping from the end', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 2},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('before inline object', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+        }),
+      ),
+    ).toBe(false)
+  })
+
+  test('after inline object', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 2},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 2},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k4'}], offset: 0},
+        }),
+      ),
+    ).toBe(false)
+  })
+})