@portabletext/editor 1.22.0 → 1.24.0

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

@@ -0,0 +1,136 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type PortableTextBlock,
+} from '@sanity/types'
+import type {EditorContext} from '../editor/editor-snapshot'
+import {isTypedObject} from './asserters'
+
+export function parseBlock({
+  context,
+  block,
+}: {
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>
+  block: unknown
+}): PortableTextBlock | undefined {
+  if (!isTypedObject(block)) {
+    return undefined
+  }
+
+  if (
+    block._type !== context.schema.block.name &&
+    !context.schema.blockObjects.some(
+      (blockObject) => blockObject.name === block._type,
+    )
+  ) {
+    return undefined
+  }
+
+  if (!isPortableTextTextBlock(block)) {
+    return {
+      ...block,
+      _key: context.keyGenerator(),
+    }
+  }
+
+  const markDefKeyMap = new Map<string, string>()
+  const markDefs = (block.markDefs ?? []).flatMap((markDef) => {
+    if (
+      context.schema.annotations.some(
+        (annotation) => annotation.name === markDef._type,
+      )
+    ) {
+      const _key = context.keyGenerator()
+      markDefKeyMap.set(markDef._key, _key)
+
+      return [
+        {
+          ...markDef,
+          _key,
+        },
+      ]
+    }
+
+    return []
+  })
+
+  const children = block.children.flatMap((child) => {
+    if (!isTypedObject(child)) {
+      return []
+    }
+
+    if (
+      child._type !== context.schema.span.name &&
+      !context.schema.inlineObjects.some(
+        (inlineObject) => inlineObject.name === child._type,
+      )
+    ) {
+      return []
+    }
+
+    if (!isPortableTextSpan(child)) {
+      return [
+        {
+          ...child,
+          _key: context.keyGenerator(),
+        },
+      ]
+    }
+
+    const marks = (child.marks ?? []).flatMap((mark) => {
+      if (markDefKeyMap.has(mark)) {
+        return [markDefKeyMap.get(mark)]
+      }
+
+      if (
+        context.schema.decorators.some((decorator) => decorator.value === mark)
+      ) {
+        return [mark]
+      }
+
+      return []
+    })
+
+    return [
+      {
+        ...child,
+        _key: context.keyGenerator(),
+        marks,
+      },
+    ]
+  })
+
+  const parsedBlock = {
+    ...block,
+    _key: context.keyGenerator(),
+    children:
+      children.length > 0
+        ? children
+        : [
+            {
+              _key: context.keyGenerator(),
+              _type: context.schema.span.name,
+              text: '',
+              marks: [],
+            },
+          ],
+    markDefs,
+  }
+
+  if (!context.schema.styles.find((style) => style.value === block.style)) {
+    const defaultStyle = context.schema.styles[0].value
+
+    if (defaultStyle !== undefined) {
+      parsedBlock.style = defaultStyle
+    } else {
+      delete parsedBlock.style
+    }
+  }
+
+  if (!context.schema.lists.find((list) => list.value === block.listItem)) {
+    delete parsedBlock.listItem
+    delete parsedBlock.level
+  }
+
+  return parsedBlock
+}

package/src/internal-utils/test-key-generator.ts

@@ -0,0 +1,9 @@
+export function createTestKeyGenerator() {
+  let index = 0
+
+  return function keyGenerator() {
+    const key = `k${index}`
+    index++
+    return key
+  }
+}

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

@@ -6,6 +6,7 @@ test(getSelectedSpans.name, () => {
   function snapshot(selection: EditorSelection): EditorSnapshot {
     return {
       context: {
+        converters: [],
         schema: {} as EditorSchema,
         keyGenerator: () => '',
         activeDecorators: [],

package/src/selectors/selector.get-selection-text.test.ts

@@ -6,6 +6,7 @@ test(getSelectionText.name, () => {
   function snapshot(selection: EditorSelection): EditorSnapshot {
     return {
       context: {
+        converters: [],
         schema: {} as EditorSchema,
         keyGenerator: () => '',
         activeDecorators: [],

package/src/selectors/selector.is-active-decorator.test.ts

@@ -7,6 +7,7 @@ test(isActiveDecorator.name, () => {
   function snapshot(selection: EditorSelection): EditorSnapshot {
     return {
       context: {
+        converters: [],
         schema: {} as EditorSchema,
         keyGenerator: () => '',
         activeDecorators: [],

package/src/utils/util.slice-blocks.test.ts

@@ -2,43 +2,62 @@ import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {describe, expect, test} from 'vitest'
 import {sliceBlocks} from './util.slice-blocks'
 
-const textBlock1: PortableTextTextBlock = {
+const b1: PortableTextTextBlock = {
   _type: 'block',
   _key: 'b1',
   children: [
     {
       _type: 'span',
-      _key: 's1',
+      _key: 'b1c1',
       text: 'foo',
-      marks: ['strong'],
     },
     {
       _type: 'span',
-      _key: 's2',
+      _key: 'b1c2',
       text: 'bar',
     },
   ],
 }
-const textBlock2: PortableTextTextBlock = {
+const b2: PortableTextBlock = {
+  _type: 'image',
+  _key: 'b2',
+  src: 'https://example.com/image.jpg',
+  alt: 'Example',
+}
+const b3: PortableTextTextBlock = {
   _type: 'block',
   _key: 'b3',
   children: [
     {
       _type: 'span',
-      _key: 's3',
+      _key: 'b3c1',
       text: 'baz',
     },
   ],
 }
+const b4: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b4',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b4c1',
+      text: 'fizz',
+    },
+    {
+      _type: 'stock-ticker',
+      _key: 'b4c2',
+      symbol: 'AAPL',
+    },
+    {
+      _type: 'span',
+      _key: 'b4c3',
+      text: 'buzz',
+    },
+  ],
+}
 
-const blocks: Array<PortableTextBlock> = [
-  textBlock1,
-  {
-    _type: 'image',
-    _key: 'b2',
-  },
-  textBlock2,
-]
+const blocks: Array<PortableTextBlock> = [b1, b2, b3, b4]
 
 describe(sliceBlocks.name, () => {
   test('sensible defaults', () => {
@@ -52,19 +71,19 @@ describe(sliceBlocks.name, () => {
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 0,
           },
           focus: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 3,
           },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
-        children: [textBlock1.children[0]],
+        ...b1,
+        children: [b1.children[0]],
       },
     ])
   })
@@ -75,21 +94,21 @@ describe(sliceBlocks.name, () => {
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 1,
           },
           focus: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 2,
           },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
+        ...b1,
         children: [
           {
-            ...textBlock1.children[0],
+            ...b1.children[0],
             text: 'o',
           },
         ],
@@ -97,67 +116,229 @@ describe(sliceBlocks.name, () => {
     ])
   })
 
+  test('starting and ending selection on a block object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+        },
+      }),
+    ).toEqual([b2])
+  })
+
+  test('starting selection on a block object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 3,
+          },
+        },
+      }),
+    ).toEqual([b2, b3])
+  })
+
   test('ending selection on a block object', () => {
     expect(
       sliceBlocks({
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 3,
           },
           focus: {
-            path: [{_key: 'b2'}],
+            path: [{_key: b2._key}],
             offset: 0,
           },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
+        ...b1,
         children: [
           {
-            ...textBlock1.children[0],
+            ...b1.children[0],
             text: '',
           },
+          ...b1.children.slice(1),
         ],
       },
       blocks[1],
     ])
   })
 
+  test('slicing across block object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 3,
+          },
+        },
+      }),
+    ).toEqual([b1, b2, b3])
+  })
+
   test('starting and ending mid-span', () => {
     expect(
       sliceBlocks({
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
             offset: 2,
           },
-          focus: {path: [{_key: 'b3'}, 'children', {_key: 's3'}], offset: 1},
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 1,
+          },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
+        ...b3,
         children: [
           {
-            ...textBlock1.children[0],
-            text: 'o',
+            ...b3.children[0],
+            text: 'z',
           },
         ],
       },
-      blocks[1],
       {
-        ...textBlock2,
+        ...b4,
+        children: [
+          {
+            ...b4.children[0],
+            text: 'f',
+          },
+        ],
+      },
+    ])
+  })
+
+  test('starting mid-span and ending end-span', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 2,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 4,
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        ...b3,
         children: [
           {
-            ...textBlock2.children[0],
-            text: 'az',
+            ...b3.children[0],
+            text: 'z',
           },
         ],
       },
+      {
+        ...b4,
+        children: [
+          {
+            ...b4.children[0],
+          },
+        ],
+      },
+    ])
+  })
+
+  test('starting on inline object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[1]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[2]._key}],
+            offset: 4,
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        ...b4,
+        children: [b4.children[1], b4.children[2]],
+      },
+    ])
+  })
+
+  test('ending on inline object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[1]._key}],
+            offset: 0,
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        ...b4,
+        children: [b4.children[0], b4.children[1]],
+      },
+    ])
+  })
+
+  test('starting and ending on inline object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[1]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[1]._key}],
+            offset: 0,
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        ...b4,
+        children: [b4.children[1]],
+      },
     ])
   })
 })

package/src/utils/util.slice-blocks.ts

@@ -47,8 +47,20 @@ export function sliceBlocks({
   }
 
   for (const block of blocks) {
+    if (!isPortableTextTextBlock(block)) {
+      if (block._key === startBlockKey && block._key === endBlockKey) {
+        startBlock = block
+        break
+      }
+    }
+
     if (block._key === startBlockKey) {
-      if (isPortableTextTextBlock(block) && startChildKey) {
+      if (!isPortableTextTextBlock(block)) {
+        startBlock = block
+        continue
+      }
+
+      if (startChildKey) {
         for (const child of block.children) {
           if (child._key === startChildKey) {
             if (isPortableTextSpan(child)) {
@@ -66,14 +78,17 @@ export function sliceBlocks({
                   },
                 ],
               }
-              break
+            } else {
+              startBlock = {
+                ...block,
+                children: [child],
+              }
             }
 
-            startBlock = {
-              ...block,
-              children: [child],
+            if (startChildKey === endChildKey) {
+              break
             }
-            break
+            continue
           }
 
           if (startBlock && isPortableTextTextBlock(startBlock)) {
@@ -97,10 +112,19 @@ export function sliceBlocks({
       }
 
       startBlock = block
+
+      if (startBlockKey === endBlockKey) {
+        break
+      }
     }
 
     if (block._key === endBlockKey) {
-      if (isPortableTextTextBlock(block) && endBlockKey) {
+      if (!isPortableTextTextBlock(block)) {
+        endBlock = block
+        break
+      }
+
+      if (endChildKey) {
         endBlock = {
           ...block,
           children: [],
@@ -111,8 +135,9 @@ export function sliceBlocks({
             if (child._key === endChildKey && isPortableTextSpan(child)) {
               endBlock.children.push({
                 ...child,
-                text: child.text.slice(endPoint.offset),
+                text: child.text.slice(0, endPoint.offset),
               })
+
               break
             }
 
@@ -124,7 +149,7 @@ export function sliceBlocks({
           }
         }
 
-        continue
+        break
       }
 
       endBlock = block
@@ -132,7 +157,9 @@ export function sliceBlocks({
       break
     }
 
-    middleBlocks.push(block)
+    if (startBlock) {
+      middleBlocks.push(block)
+    }
   }
 
   return [