@portabletext/editor 1.50.8 → 1.52.0

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

@@ -1,90 +1,21 @@
-import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
 import type {PortableTextBlock} from '@sanity/types'
+import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
 import type {EditorSelection} from '../types/editor'
-import {isKeyedSegment} from '../utils'
-import {reverseSelection} from '../utils/util.reverse-selection'
+import {sliceBlocks} from '../utils/util.slice-blocks'
+import {getTersePt} from './terse-pt'
 
 export function getSelectionText(
   value: Array<PortableTextBlock> | undefined,
   selection: EditorSelection,
 ) {
   if (!value || !selection) {
-    return undefined
+    return []
   }
 
-  const forwardSelection = selection.backward
-    ? reverseSelection(selection)
-    : selection
+  const slice = sliceBlocks({
+    context: {schema: compileSchemaDefinition(defineSchema({})), selection},
+    blocks: value,
+  })
 
-  if (!forwardSelection) {
-    return undefined
-  }
-
-  const text: Array<string> = []
-
-  for (const block of value) {
-    if (
-      text.length === 0 &&
-      isKeyedSegment(forwardSelection.anchor.path[0]) &&
-      block._key !== forwardSelection.anchor.path[0]._key
-    ) {
-      continue
-    }
-
-    if (text.length > 0) {
-      text.push('|')
-    }
-
-    if (isPortableTextBlock(block)) {
-      for (const child of block.children) {
-        if (isPortableTextSpan(child)) {
-          if (
-            isKeyedSegment(forwardSelection.anchor.path[2]) &&
-            child._key === forwardSelection.anchor.path[2]._key &&
-            isKeyedSegment(forwardSelection.focus.path[2]) &&
-            child._key === forwardSelection.focus.path[2]._key
-          ) {
-            text.push(
-              child.text.slice(
-                forwardSelection.anchor.offset,
-                forwardSelection.focus.offset,
-              ),
-            )
-            break
-          }
-
-          if (
-            isKeyedSegment(forwardSelection.anchor.path[2]) &&
-            child._key === forwardSelection.anchor.path[2]._key
-          ) {
-            text.push(child.text.slice(forwardSelection.anchor.offset))
-            continue
-          }
-
-          if (
-            isKeyedSegment(forwardSelection.focus.path[2]) &&
-            child._key === forwardSelection.focus.path[2]._key
-          ) {
-            text.push(child.text.slice(0, forwardSelection.focus.offset))
-            break
-          }
-
-          if (text.length > 0) {
-            text.push(child.text)
-          }
-        }
-      }
-    } else {
-      text.push(`[${block._type}]`)
-    }
-
-    if (
-      isKeyedSegment(forwardSelection.focus.path[0]) &&
-      block._key === forwardSelection.focus.path[0]._key
-    ) {
-      break
-    }
-  }
-
-  return text
+  return getTersePt(slice)
 }

package/src/internal-utils/terse-pt.test.ts

@@ -1,5 +1,9 @@
 import {expect, test} from 'vitest'
-import {getTersePt, parseTersePt} from './terse-pt'
+import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import {getTersePt, parseTersePt, parseTersePtString} from './terse-pt'
+
+const keyGenerator = createTestKeyGenerator()
 
 test(getTersePt.name, () => {
   const fooBlock = {
@@ -23,38 +27,116 @@ test(getTersePt.name, () => {
     children: [{_key: 's4', _type: 'span', text: 'foo\nbar'}],
   }
 
-  expect(getTersePt([fooBlock, barBlock])).toEqual(['foo', '|', 'bar'])
-  expect(getTersePt([emptyBlock, barBlock])).toEqual(['', '|', 'bar'])
+  expect(getTersePt([fooBlock, barBlock])).toEqual(['foo', 'bar'])
+  expect(getTersePt([emptyBlock, barBlock])).toEqual(['', 'bar'])
   expect(getTersePt([fooBlock, emptyBlock, barBlock])).toEqual([
     'foo',
-    '|',
     '',
-    '|',
     'bar',
   ])
-  expect(getTersePt([fooBlock, softReturnBlock])).toEqual([
-    'foo',
-    '|',
-    'foo\nbar',
-  ])
+  expect(getTersePt([fooBlock, softReturnBlock])).toEqual(['foo', 'foo\nbar'])
+
+  expect(
+    getTersePt([
+      {
+        _key: keyGenerator(),
+        _type: 'block',
+        children: [{_key: keyGenerator(), _type: 'span', text: 'foo'}],
+      },
+    ]),
+  ).toEqual(['foo'])
+  expect(
+    getTersePt([
+      {
+        _key: keyGenerator(),
+        _type: 'block',
+        children: [{_key: keyGenerator(), _type: 'span', text: 'foo'}],
+        listItem: 'number',
+      },
+    ]),
+  ).toEqual(['#:foo'])
+  expect(
+    getTersePt([
+      {
+        _key: keyGenerator(),
+        _type: 'block',
+        children: [{_key: keyGenerator(), _type: 'span', text: 'foo'}],
+        listItem: 'number',
+        style: 'h3',
+      },
+    ]),
+  ).toEqual(['#h3:foo'])
+  expect(
+    getTersePt([
+      {
+        _key: keyGenerator(),
+        _type: 'block',
+        children: [{_key: keyGenerator(), _type: 'span', text: 'foo'}],
+        level: 2,
+        listItem: 'number',
+        style: 'h3',
+      },
+    ]),
+  ).toEqual(['>>#h3:foo'])
+})
+
+test(parseTersePtString.name, () => {
+  expect(parseTersePtString('foo')).toEqual(['foo'])
+  expect(parseTersePtString('foo,bar')).toEqual(['foo,bar'])
+  expect(parseTersePtString('foo,bar|baz')).toEqual(['foo,bar', 'baz'])
+  expect(parseTersePtString('|foo')).toEqual(['', 'foo'])
+  expect(parseTersePtString('foo|')).toEqual(['foo', ''])
+  expect(parseTersePtString('foo|bar\nbaz')).toEqual(['foo', 'bar\nbaz'])
+  expect(parseTersePtString('f,oo||ba,r')).toEqual(['f,oo', '', 'ba,r'])
+  expect(parseTersePtString('|')).toEqual(['', ''])
+  expect(parseTersePtString('||')).toEqual(['', '', ''])
+  expect(parseTersePtString('>>#h3:foo')).toEqual(['>>#h3:foo'])
 })
 
 test(parseTersePt.name, () => {
-  expect(parseTersePt('foo')).toEqual(['foo'])
-  expect(parseTersePt('foo,bar')).toEqual(['foo', 'bar'])
-  expect(parseTersePt('foo,bar|baz')).toEqual(['foo', 'bar', '|', 'baz'])
-  expect(parseTersePt('|foo')).toEqual(['', '|', 'foo'])
-  expect(parseTersePt('foo|')).toEqual(['foo', '|', ''])
-  expect(parseTersePt('foo|bar\nbaz')).toEqual(['foo', '|', 'bar\nbaz'])
-  expect(parseTersePt('f,oo||ba,r')).toEqual([
-    'f',
-    'oo',
-    '|',
-    '',
-    '|',
-    'ba',
-    'r',
+  expect(
+    parseTersePt(
+      {
+        schema: compileSchemaDefinition(defineSchema({})),
+        keyGenerator: createTestKeyGenerator(),
+      },
+      parseTersePtString('[image]|foo|>>#h4:bar|-:baz,fizz|,[stock-ticker],'),
+    ),
+  ).toEqual([
+    {
+      _key: 'k0',
+      _type: 'image',
+    },
+    {
+      _key: 'k1',
+      _type: 'block',
+      children: [{_key: 'k2', _type: 'span', text: 'foo'}],
+    },
+    {
+      _key: 'k3',
+      _type: 'block',
+      children: [{_key: 'k4', _type: 'span', text: 'bar'}],
+      level: 2,
+      listItem: 'number',
+      style: 'h4',
+    },
+    {
+      _key: 'k5',
+      _type: 'block',
+      children: [
+        {_key: 'k6', _type: 'span', text: 'baz'},
+        {_key: 'k7', _type: 'span', text: 'fizz'},
+      ],
+      listItem: 'bullet',
+    },
+    {
+      _key: 'k8',
+      _type: 'block',
+      children: [
+        {_key: 'k9', _type: 'span', text: ''},
+        {_key: 'k10', _type: 'stock-ticker'},
+        {_key: 'k11', _type: 'span', text: ''},
+      ],
+    },
   ])
-  expect(parseTersePt('|')).toEqual(['', '|', ''])
-  expect(parseTersePt('||')).toEqual(['', '|', '', '|', ''])
 })

package/src/internal-utils/terse-pt.ts

@@ -1,36 +1,154 @@
 import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
-import type {PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
+import type {EditorContext} from '../editor/editor-snapshot'
 
-export function getTersePt(value: Array<PortableTextBlock> | undefined) {
+type TersePtConfig = {
+  style: (name?: string) => string
+  listItem: (name?: string) => string
+  level: (level?: number) => string
+}
+
+const defaultConfig: TersePtConfig = {
+  style: (name) =>
+    name === undefined || name === 'normal'
+      ? ''
+      : name === 'blockquote'
+        ? 'q'
+        : `${name}`,
+  listItem: (name) => (name === undefined ? '' : name === 'number' ? '#' : '-'),
+  level: (level) => (level === undefined ? '' : '>'.repeat(level)),
+}
+
+export function getTersePt(
+  value: Array<PortableTextBlock> | undefined,
+): Array<string> {
   if (!value) {
-    return undefined
+    return []
   }
 
   const blocks: Array<string> = []
 
   for (const block of value) {
-    if (blocks.length > 0) {
-      blocks.push('|')
-    }
+    let terseBlock = ''
+
     if (isPortableTextBlock(block)) {
+      const blockPrefix = `${defaultConfig.level(block.level)}${defaultConfig.listItem(block.listItem)}${defaultConfig.style(block.style)}`
+
+      if (blockPrefix) {
+        terseBlock = `${blockPrefix}:`
+      }
+
+      let index = -1
       for (const child of block.children) {
+        index++
+
         if (isPortableTextSpan(child)) {
-          blocks.push(child.text)
+          terseBlock = `${terseBlock}${index > 0 ? ',' : ''}${child.text}`
         } else {
-          blocks.push(`[${child._type}]`)
+          terseBlock = `${terseBlock}${index > 0 ? ',' : ''}[${child._type}]`
         }
       }
     } else {
-      blocks.push(`[${block._type}]`)
+      terseBlock = `[${block._type}]`
+    }
+
+    blocks.push(terseBlock)
+  }
+
+  return blocks
+}
+
+export function parseTersePt(
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>,
+  tersePt: Array<string>,
+): Array<PortableTextBlock> {
+  const blocks: Array<PortableTextBlock> = []
+
+  for (const terseBlock of tersePt) {
+    if (terseBlock.startsWith('[')) {
+      blocks.push({
+        _type: terseBlock.slice(1, -1),
+        _key: context.keyGenerator(),
+      })
+
+      continue
     }
+
+    const block: PortableTextTextBlock = {
+      _key: context.keyGenerator(),
+      _type: context.schema.block.name,
+      children: [],
+    }
+
+    if (terseBlock.includes(':')) {
+      const [prefix, content] = terseBlock.split(':')
+
+      const listItem = prefix.includes('#')
+        ? 'number'
+        : prefix.includes('-')
+          ? 'bullet'
+          : undefined
+
+      if (listItem !== undefined) {
+        block.listItem = listItem
+      }
+
+      const level = prefix.split('').filter((part) => part === '>').length
+
+      if (level > 0) {
+        block.level = level
+      }
+
+      const style = prefix
+        .split('')
+        .filter((part) => !['#', '-', '>'].includes(part))
+        .join('')
+
+      if (style) {
+        block.style = style
+      }
+
+      const textRuns = content.split(',')
+
+      for (const textRun of textRuns) {
+        if (textRun.startsWith('[')) {
+          block.children.push({
+            _key: context.keyGenerator(),
+            _type: textRun.slice(1, -1),
+          })
+        } else {
+          block.children.push({
+            _key: context.keyGenerator(),
+            _type: context.schema.span.name,
+            text: textRun,
+          })
+        }
+      }
+    } else {
+      const textRuns = terseBlock.split(',')
+
+      for (const textRun of textRuns) {
+        if (textRun.startsWith('[')) {
+          block.children.push({
+            _key: context.keyGenerator(),
+            _type: textRun.slice(1, -1),
+          })
+        } else {
+          block.children.push({
+            _key: context.keyGenerator(),
+            _type: context.schema.span.name,
+            text: textRun,
+          })
+        }
+      }
+    }
+
+    blocks.push(block)
   }
 
   return blocks
 }
 
-export function parseTersePt(text: string) {
-  return text
-    .replace(/\|/g, ',|,')
-    .split(',')
-    .map((span) => span.replace(/\\n/g, '\n'))
+export function parseTersePtString(text: string) {
+  return text.split('|').map((span) => span.replace(/\\n/g, '\n'))
 }

package/src/operations/behavior.operation.decorator.add.ts

@@ -111,8 +111,6 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
       beta: {
         activeAnnotations: [],
         activeDecorators: [],
-        hasTag: () => false,
-        internalDrag: undefined,
       },
       context: {
         converters: [],

package/src/operations/behavior.operation.delete.ts

@@ -1,24 +1,29 @@
 import {Transforms} from 'slate'
 import {toSlateRange} from '../internal-utils/ranges'
 import {getBlockPath} from '../internal-utils/slate-utils'
-import {isKeyedSegment} from '../utils'
+import {getBlockKeyFromSelectionPoint} from '../selection/selection-point'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const deleteOperationImplementation: BehaviorOperationImplementation<
   'delete'
 > = ({operation}) => {
-  const anchorBlockPath = isKeyedSegment(operation.at.anchor.path[0])
-    ? getBlockPath({
-        editor: operation.editor,
-        _key: operation.at.anchor.path[0]._key,
-      })
-    : undefined
-  const focusBlockPath = isKeyedSegment(operation.at.focus.path[0])
-    ? getBlockPath({
-        editor: operation.editor,
-        _key: operation.at.focus.path[0]._key,
-      })
-    : undefined
+  const anchorBlockKey = getBlockKeyFromSelectionPoint(operation.at.anchor)
+  const focusBlockKey = getBlockKeyFromSelectionPoint(operation.at.focus)
+
+  const anchorBlockPath =
+    anchorBlockKey !== undefined
+      ? getBlockPath({
+          editor: operation.editor,
+          _key: anchorBlockKey,
+        })
+      : undefined
+  const focusBlockPath =
+    focusBlockKey !== undefined
+      ? getBlockPath({
+          editor: operation.editor,
+          _key: focusBlockKey,
+        })
+      : undefined
 
   if (
     operation.at.anchor.path.length === 1 &&

package/src/operations/behavior.operation.insert.block.ts

@@ -82,7 +82,7 @@ export function insertBlock({
       }
     } else if (placement === 'after') {
       const nextPath = lastBlockPath ? [lastBlockPath[0] + 1] : [0]
-      Transforms.insertNodes(editor, [block], {at: nextPath, select: false})
+      Transforms.insertNodes(editor, [block], {at: nextPath})
 
       if (select === 'start') {
         Transforms.select(editor, Editor.start(editor, nextPath))
@@ -358,6 +358,10 @@ export function insertBlock({
             const [focusChild] = getFocusChild({editor})
 
             if (focusChild && editor.isTextSpan(focusChild)) {
+              Transforms.splitNodes(editor, {
+                at: currentSelection,
+              })
+
               Transforms.insertFragment(editor, [block], {
                 at: currentSelection,
               })

package/src/selection/selection-point.ts

@@ -0,0 +1,22 @@
+import type {EditorSelectionPoint} from '../types/editor'
+import {isKeyedSegment} from '../utils'
+
+export function getBlockKeyFromSelectionPoint(point: EditorSelectionPoint) {
+  const blockPathSegment = point.path.at(0)
+
+  if (isKeyedSegment(blockPathSegment)) {
+    return blockPathSegment._key
+  }
+
+  return undefined
+}
+
+export function getChildKeyFromSelectionPoint(point: EditorSelectionPoint) {
+  const childPathSegment = point.path.at(2)
+
+  if (isKeyedSegment(childPathSegment)) {
+    return childPathSegment._key
+  }
+
+  return undefined
+}

package/src/selectors/selector.get-anchor-block.ts

@@ -1,6 +1,6 @@
 import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
-import {isKeyedSegment} from '../utils'
+import {getBlockKeyFromSelectionPoint} from '../selection/selection-point'
 
 /**
  * @public
@@ -8,11 +8,11 @@ import {isKeyedSegment} from '../utils'
 export const getAnchorBlock: EditorSelector<
   {node: PortableTextBlock; path: [KeyedSegment]} | undefined
 > = (snapshot) => {
-  const key = snapshot.context.selection
-    ? isKeyedSegment(snapshot.context.selection.anchor.path[0])
-      ? snapshot.context.selection.anchor.path[0]._key
-      : undefined
-    : undefined
+  if (!snapshot.context.selection) {
+    return undefined
+  }
+
+  const key = getBlockKeyFromSelectionPoint(snapshot.context.selection.anchor)
 
   const node = key
     ? snapshot.context.value.find((block) => block._key === key)

package/src/selectors/selector.get-anchor-child.ts

@@ -1,7 +1,7 @@
 import type {KeyedSegment} from '@portabletext/patches'
 import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
-import {isKeyedSegment} from '../utils'
+import {getChildKeyFromSelectionPoint} from '../selection/selection-point'
 import {getAnchorTextBlock} from './selector.get-anchor-text-block'
 
 /**
@@ -14,17 +14,17 @@ export const getAnchorChild: EditorSelector<
     }
   | undefined
 > = (snapshot) => {
+  if (!snapshot.context.selection) {
+    return undefined
+  }
+
   const anchorBlock = getAnchorTextBlock(snapshot)
 
   if (!anchorBlock) {
     return undefined
   }
 
-  const key = snapshot.context.selection
-    ? isKeyedSegment(snapshot.context.selection.anchor.path[2])
-      ? snapshot.context.selection.anchor.path[2]._key
-      : undefined
-    : undefined
+  const key = getChildKeyFromSelectionPoint(snapshot.context.selection.anchor)
 
   const node = key
     ? anchorBlock.node.children.find((span) => span._key === key)

package/src/selectors/selector.get-selected-spans.ts

@@ -1,7 +1,12 @@
 import type {KeyedSegment, PortableTextSpan} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {isSpan, isTextBlock} from '../internal-utils/parse-blocks'
-import {isKeyedSegment} from '../utils'
+import {
+  getBlockKeyFromSelectionPoint,
+  getChildKeyFromSelectionPoint,
+} from '../selection/selection-point'
+import {getSelectionEndPoint} from './selector.get-selection-end-point'
+import {getSelectionStartPoint} from './selector.get-selection-start-point'
 
 /**
  * @public
@@ -21,30 +26,22 @@ export const getSelectedSpans: EditorSelector<
     path: [KeyedSegment, 'children', KeyedSegment]
   }> = []
 
-  const startPoint = snapshot.context.selection.backward
-    ? snapshot.context.selection.focus
-    : snapshot.context.selection.anchor
-  const endPoint = snapshot.context.selection.backward
-    ? snapshot.context.selection.anchor
-    : snapshot.context.selection.focus
+  const startPoint = getSelectionStartPoint(snapshot)
+  const endPoint = getSelectionEndPoint(snapshot)
 
-  const startBlockKey = isKeyedSegment(startPoint.path[0])
-    ? startPoint.path[0]._key
-    : undefined
-  const endBlockKey = isKeyedSegment(endPoint.path[0])
-    ? endPoint.path[0]._key
-    : undefined
+  if (!startPoint || !endPoint) {
+    return selectedSpans
+  }
+
+  const startBlockKey = getBlockKeyFromSelectionPoint(startPoint)
+  const endBlockKey = getBlockKeyFromSelectionPoint(endPoint)
 
   if (!startBlockKey || !endBlockKey) {
     return selectedSpans
   }
 
-  const startSpanKey = isKeyedSegment(startPoint.path[2])
-    ? startPoint.path[2]._key
-    : undefined
-  const endSpanKey = isKeyedSegment(endPoint.path[2])
-    ? endPoint.path[2]._key
-    : undefined
+  const startSpanKey = getChildKeyFromSelectionPoint(startPoint)
+  const endSpanKey = getChildKeyFromSelectionPoint(endPoint)
 
   let startBlockFound = false