@portabletext/editor 1.39.1 → 1.40.1

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

@@ -0,0 +1,507 @@
+import {describe, expect, test} from 'vitest'
+import {compileSchemaDefinition, defineSchema} from '../editor/define-schema'
+import type {EditorSelection} from '../types/editor'
+import {createTestSnapshot} from './create-test-snapshot'
+import {getDragSelection} from './drag-selection'
+import {createTestKeyGenerator} from './test-key-generator'
+
+describe(getDragSelection.name, () => {
+  const keyGenerator = createTestKeyGenerator()
+  const foo = {
+    _key: keyGenerator(),
+    _type: 'block',
+    children: [
+      {
+        _key: keyGenerator(),
+        _type: 'span',
+        text: 'foo',
+      },
+      {
+        _key: keyGenerator(),
+        _type: 'stock-ticker',
+      },
+      {
+        _key: keyGenerator(),
+        _type: 'span',
+        text: 'bar',
+      },
+    ],
+  }
+  const fooPath = [{_key: foo._key}, 'children', {_key: foo.children[0]._key}]
+  const stockTickerPath = [
+    {_key: foo._key},
+    'children',
+    {_key: foo.children[1]._key},
+  ]
+  const barPath = [{_key: foo._key}, 'children', {_key: foo.children[2]._key}]
+  const baz = {
+    _key: keyGenerator(),
+    _type: 'block',
+    children: [
+      {
+        _key: keyGenerator(),
+        _type: 'span',
+        text: 'bar',
+      },
+    ],
+  }
+  const image = {
+    _key: keyGenerator(),
+    _type: 'image',
+  }
+  const imagePath = [{_key: image._key}]
+
+  function snapshot(selection: EditorSelection) {
+    return createTestSnapshot({
+      context: {
+        keyGenerator,
+        schema: compileSchemaDefinition(
+          defineSchema({blockObjects: [{name: 'image'}]}),
+        ),
+        selection,
+        value: [foo, baz, image],
+      },
+    })
+  }
+
+  test('dragging one text block', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot(null),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: barPath,
+        offset: 3,
+      },
+    })
+  })
+
+  test('dragging one text block with an existing selection', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 3,
+          },
+        }),
+      }),
+    )
+  })
+
+  test('dragging one text block with a selection elsewhere', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: imagePath,
+            offset: 0,
+          },
+          focus: {
+            path: imagePath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: barPath,
+        offset: 3,
+      },
+    })
+  })
+
+  test('dragging one block object with a selection elsewhere', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: imagePath,
+            offset: 0,
+          },
+          focus: {
+            path: imagePath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: imagePath,
+        offset: 0,
+      },
+      focus: {
+        path: imagePath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging one block object with an expanded selection elsewhere', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: imagePath,
+            offset: 0,
+          },
+          focus: {
+            path: imagePath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 1,
+          },
+          focus: {
+            path: fooPath,
+            offset: 2,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: imagePath,
+        offset: 0,
+      },
+      focus: {
+        path: imagePath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging a text block with an expanded selected', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: imagePath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: imagePath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging a block object with an expanded selected', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: imagePath,
+            offset: 0,
+          },
+          focus: {
+            path: imagePath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: imagePath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: imagePath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging inline object', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot(null),
+      }),
+    ).toEqual({
+      anchor: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+      focus: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging inline object already selected', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+      focus: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging inline object with selection elsewhere', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+      focus: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging inline object with expanded selection elsewhere', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 3,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+      focus: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging inline object in an expanded selection', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: fooPath,
+            offset: 2,
+          },
+          focus: {
+            path: barPath,
+            offset: 2,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+      focus: {
+        path: stockTickerPath,
+        offset: 0,
+      },
+    })
+  })
+
+  test('dragging text block with inline object selected', () => {
+    expect(
+      getDragSelection({
+        eventSelection: {
+          anchor: {
+            path: fooPath,
+            offset: 0,
+          },
+          focus: {
+            path: fooPath,
+            offset: 0,
+          },
+        },
+        snapshot: snapshot({
+          anchor: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+          focus: {
+            path: stockTickerPath,
+            offset: 0,
+          },
+        }),
+      }),
+    ).toEqual({
+      anchor: {
+        path: fooPath,
+        offset: 0,
+      },
+      focus: {
+        path: barPath,
+        offset: 3,
+      },
+    })
+  })
+})

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

@@ -0,0 +1,66 @@
+import type {EditorSnapshot} from '..'
+import * as selectors from '../selectors'
+import * as utils from '../utils'
+import type {EventPosition} from './event-position'
+
+export function getDragSelection({
+  eventSelection,
+  snapshot,
+}: {
+  eventSelection: EventPosition['selection']
+  snapshot: EditorSnapshot
+}) {
+  let dragSelection = eventSelection
+
+  const collapsedSelection = selectors.isSelectionCollapsed({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection,
+    },
+  })
+  const focusTextBlock = selectors.getFocusTextBlock({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection,
+    },
+  })
+  const focusSpan = selectors.getFocusSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection,
+    },
+  })
+
+  if (collapsedSelection && focusTextBlock && focusSpan) {
+    // Looks like we are dragging an empty span
+    // Let's drag the entire block instead
+    dragSelection = {
+      anchor: utils.getBlockStartPoint(focusTextBlock),
+      focus: utils.getBlockEndPoint(focusTextBlock),
+    }
+  }
+
+  const selectedBlocks = selectors.getSelectedBlocks(snapshot)
+
+  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) {
+      dragSelection = {
+        anchor: utils.getBlockStartPoint(selectionStartBlock),
+        focus: utils.getBlockEndPoint(selectionEndBlock),
+      }
+    }
+  }
+
+  return dragSelection
+}

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

@@ -0,0 +1,40 @@
+import {expect, test} from 'vitest'
+import {getEditorSelection} from './editor-selection'
+
+test(getEditorSelection.name, () => {
+  const image = {
+    _type: 'image',
+    _key: 'i1',
+  }
+  const splitBlock = {
+    _type: 'block',
+    _key: 'b1',
+    children: [
+      {_type: 'span', _key: 's1', text: 'foo '},
+      {_type: 'span', _key: 's2', text: 'bar'},
+      {_type: 'span', _key: 's3', text: ' baz'},
+    ],
+  }
+  const blockWithStockTicker = {
+    _type: 'block',
+    _key: 'b2',
+    children: [
+      {_type: 'span', _key: 's1', text: ''},
+      {_type: 'stock-ticker', _key: 'st1'},
+      {_type: 'span', _key: 's2', text: ''},
+    ],
+  }
+
+  expect(getEditorSelection([image, splitBlock])).toEqual({
+    anchor: {path: [{_key: 'i1'}], offset: 0},
+    focus: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 4},
+  })
+  expect(getEditorSelection([splitBlock, image])).toEqual({
+    anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 0},
+    focus: {path: [{_key: 'i1'}], offset: 0},
+  })
+  expect(getEditorSelection([blockWithStockTicker, splitBlock])).toEqual({
+    anchor: {path: [{_key: 'b2'}, 'children', {_key: 's1'}], offset: 0},
+    focus: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 4},
+  })
+})

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

@@ -0,0 +1,60 @@
+import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorSelection, EditorSelectionPoint} from '../types/editor'
+
+export function getEditorSelection(
+  blocks: Array<PortableTextBlock> | undefined,
+): EditorSelection {
+  if (!blocks) {
+    throw new Error('No value found')
+  }
+
+  let anchor: EditorSelectionPoint | undefined
+  let focus: EditorSelectionPoint | undefined
+  const firstBlock = blocks[0]
+  const lastBlock = blocks[blocks.length - 1]
+
+  if (isPortableTextBlock(firstBlock)) {
+    anchor = {
+      path: [
+        {_key: firstBlock._key},
+        'children',
+        {_key: firstBlock.children[0]._key},
+      ],
+      offset: 0,
+    }
+  } else {
+    anchor = {
+      path: [{_key: firstBlock._key}],
+      offset: 0,
+    }
+  }
+
+  const lastChild = isPortableTextBlock(lastBlock)
+    ? lastBlock.children[lastBlock.children.length - 1]
+    : undefined
+  if (
+    isPortableTextBlock(lastBlock) &&
+    lastChild &&
+    isPortableTextSpan(lastChild)
+  ) {
+    focus = {
+      path: [{_key: lastBlock._key}, 'children', {_key: lastChild._key}],
+      offset: lastChild.text.length ?? 0,
+    }
+  } else {
+    focus = {
+      path: [{_key: lastBlock._key}],
+      offset: 0,
+    }
+  }
+
+  if (!anchor || !focus) {
+    throw new Error('No selection found')
+  }
+
+  return {
+    anchor,
+    focus,
+  }
+}