@portabletext/editor 2.7.2 → 2.8.0

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

@@ -0,0 +1,320 @@
+import {compileSchema, defineSchema} from '@portabletext/schema'
+import {createTestKeyGenerator} from '@portabletext/test'
+import {describe, expect, test} from 'vitest'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
+import {isActiveAnnotation} from './selector.is-active-annotation'
+
+describe(isActiveAnnotation.name, () => {
+  const keyGenerator = createTestKeyGenerator()
+  const annotationKey = keyGenerator()
+  const blockKey = keyGenerator()
+  const fooKey = keyGenerator()
+  const barKey = keyGenerator()
+  const bazKey = keyGenerator()
+  const value = [
+    {
+      _type: 'block',
+      _key: blockKey,
+      children: [
+        {
+          _type: 'span',
+          _key: fooKey,
+          text: 'foo ',
+          marks: [],
+        },
+        {
+          _type: 'span',
+          _key: barKey,
+          text: 'bar',
+          marks: [annotationKey],
+        },
+        {
+          _type: 'span',
+          _key: bazKey,
+          text: ' baz',
+          marks: [],
+        },
+      ],
+      markDefs: [
+        {_key: annotationKey, _type: 'link', href: 'https://example.com'},
+      ],
+    },
+  ]
+  const schema = compileSchema(
+    defineSchema({
+      annotations: [{name: 'link', fields: [{name: 'href', type: 'string'}]}],
+    }),
+  )
+
+  describe('collapsed selection', () => {
+    test('selection before the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: fooKey}],
+              offset: 4,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: fooKey}],
+              offset: 4,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+
+    test('selection at the start of the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 0,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+
+    test('selection after the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: bazKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: bazKey}],
+              offset: 0,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+
+    test('selection at the end of the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 3,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 3,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+
+    test('selection in the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 2,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 2,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(true)
+    })
+  })
+
+  describe('expanded selection', () => {
+    test('selection on the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 3,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(true)
+    })
+
+    test('selection in the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 1,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 2,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(true)
+    })
+
+    describe('selection including the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: fooKey}],
+              offset: 2,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: bazKey}],
+              offset: 2,
+            },
+          },
+        },
+      })
+
+      test('mode: full', () => {
+        expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+      })
+
+      test('mode: partial', () => {
+        expect(isActiveAnnotation('link', {mode: 'partial'})(snapshot)).toBe(
+          true,
+        )
+      })
+    })
+
+    describe('selection before the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: fooKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: fooKey}],
+              offset: 4,
+            },
+          },
+        },
+      })
+
+      test('mode: full', () => {
+        expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+      })
+
+      test('mode: partial', () => {
+        expect(isActiveAnnotation('link', {mode: 'partial'})(snapshot)).toBe(
+          false,
+        )
+      })
+    })
+
+    test('selection overlapping from the start', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: fooKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 2,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+
+    test('selection after the annotation', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: bazKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: bazKey}],
+              offset: 4,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+
+    test('selection overlapping from the end', () => {
+      const snapshot = createTestSnapshot({
+        context: {
+          schema,
+          value,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}, 'children', {_key: barKey}],
+              offset: 2,
+            },
+            focus: {
+              path: [{_key: blockKey}, 'children', {_key: bazKey}],
+              offset: 4,
+            },
+          },
+        },
+      })
+
+      expect(isActiveAnnotation('link')(snapshot)).toBe(false)
+    })
+  })
+})

package/src/selectors/selector.is-active-annotation.ts

@@ -2,14 +2,38 @@ import {isTextBlock} from '@portabletext/schema'
 import type {EditorSelector} from '../editor/editor-selector'
 import {getActiveAnnotationsMarks} from './selector.get-active-annotation-marks'
 import {getSelectedBlocks} from './selector.get-selected-blocks'
+import {getSelectedValue} from './selector.get-selected-value'
 
 /**
+ * Check whether an annotation is active in the given `snapshot`.
+ *
  * @public
  */
 export function isActiveAnnotation(
   annotation: string,
+  options?: {
+    /**
+     * Choose whether the annotation has to take up the entire selection in the
+     * `snapshot` or if the annotation can be partially selected.
+     *
+     * Defaults to 'full'
+     */
+    mode?: 'partial' | 'full'
+  },
 ): EditorSelector<boolean> {
   return (snapshot) => {
+    const mode = options?.mode ?? 'full'
+
+    if (mode === 'partial') {
+      const selectedValue = getSelectedValue(snapshot)
+
+      const selectionMarkDefs = selectedValue.flatMap((block) =>
+        isTextBlock(snapshot.context, block) ? (block.markDefs ?? []) : [],
+      )
+
+      return selectionMarkDefs.some((markDef) => markDef._type === annotation)
+    }
+
     const selectedBlocks = getSelectedBlocks(snapshot)
     const selectionMarkDefs = selectedBlocks.flatMap((block) =>
       isTextBlock(snapshot.context, block.node)

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

@@ -11,13 +11,17 @@ const b1: PortableTextTextBlock = {
       _type: 'span',
       _key: 'b1c1',
       text: 'foo',
+      marks: [],
     },
     {
       _type: 'span',
       _key: 'b1c2',
       text: 'bar',
+      marks: [],
     },
   ],
+  markDefs: [],
+  style: 'normal',
 }
 const b2: PortableTextBlock = {
   _type: 'image',
@@ -33,8 +37,11 @@ const b3: PortableTextTextBlock = {
       _type: 'span',
       _key: 'b3c1',
       text: 'baz',
+      marks: [],
     },
   ],
+  markDefs: [],
+  style: 'normal',
 }
 const b4: PortableTextTextBlock = {
   _type: 'block',
@@ -44,6 +51,7 @@ const b4: PortableTextTextBlock = {
       _type: 'span',
       _key: 'b4c1',
       text: 'fizz',
+      marks: [],
     },
     {
       _type: 'stock-ticker',
@@ -54,11 +62,19 @@ const b4: PortableTextTextBlock = {
       _type: 'span',
       _key: 'b4c3',
       text: 'buzz',
+      marks: [],
     },
   ],
+  markDefs: [],
+  style: 'normal',
 }
 
-const schema = compileSchema(defineSchema({}))
+const schema = compileSchema(
+  defineSchema({
+    blockObjects: [{name: 'image'}],
+    inlineObjects: [{name: 'stock-ticker'}],
+  }),
+)
 const blocks: Array<PortableTextBlock> = [b1, b2, b3, b4]
 
 describe(sliceBlocks.name, () => {
@@ -413,7 +429,11 @@ describe(sliceBlocks.name, () => {
           {
             _key: 'b0',
             _type: 'block',
-            children: [{_key: 's0', _type: 'span', text: 'Hello, world!'}],
+            children: [
+              {_key: 's0', _type: 'span', text: 'Hello, world!', marks: []},
+            ],
+            markDefs: [],
+            style: 'normal',
             _map: {},
           },
         ],
@@ -422,7 +442,9 @@ describe(sliceBlocks.name, () => {
       {
         _key: 'b0',
         _type: 'block',
-        children: [{_key: 's0', _type: 'span', text: 'world'}],
+        children: [{_key: 's0', _type: 'span', text: 'world', marks: []}],
+        markDefs: [],
+        style: 'normal',
         _map: {},
       },
     ])
@@ -449,8 +471,16 @@ describe(sliceBlocks.name, () => {
             _key: 'b0',
             _type: 'block',
             children: [
-              {_key: 's0', _type: 'span', text: 'Hello, world!', _map: {}},
+              {
+                _key: 's0',
+                _type: 'span',
+                text: 'Hello, world!',
+                _map: {},
+                marks: [],
+              },
             ],
+            markDefs: [],
+            style: 'normal',
           },
         ],
       }),
@@ -458,7 +488,11 @@ describe(sliceBlocks.name, () => {
       {
         _key: 'b0',
         _type: 'block',
-        children: [{_key: 's0', _type: 'span', text: 'world', _map: {}}],
+        children: [
+          {_key: 's0', _type: 'span', text: 'world', _map: {}, marks: []},
+        ],
+        markDefs: [],
+        style: 'normal',
       },
     ])
   })

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

@@ -1,6 +1,8 @@
 import {isSpan, isTextBlock} from '@portabletext/schema'
 import type {PortableTextBlock} from '@sanity/types'
 import type {EditorContext} from '../editor/editor-snapshot'
+import {defaultKeyGenerator} from '../editor/key-generator'
+import {parseBlock} from '../internal-utils/parse-blocks'
 import {
   getBlockKeyFromSelectionPoint,
   getChildKeyFromSelectionPoint,
@@ -162,13 +164,44 @@ export function sliceBlocks({
     }
 
     if (startBlock) {
-      middleBlocks.push(block)
+      middleBlocks.push(
+        parseBlock({
+          context: {
+            ...context,
+            keyGenerator: defaultKeyGenerator,
+          },
+          block,
+          options: {refreshKeys: false, validateFields: false},
+        }) ?? block,
+      )
     }
   }
 
+  const parsedStartBlock = startBlock
+    ? parseBlock({
+        context: {
+          ...context,
+          keyGenerator: defaultKeyGenerator,
+        },
+        block: startBlock,
+        options: {refreshKeys: false, validateFields: false},
+      })
+    : undefined
+
+  const parsedEndBlock = endBlock
+    ? parseBlock({
+        context: {
+          ...context,
+          keyGenerator: defaultKeyGenerator,
+        },
+        block: endBlock,
+        options: {refreshKeys: false, validateFields: false},
+      })
+    : undefined
+
   return [
-    ...(startBlock ? [startBlock] : []),
+    ...(parsedStartBlock ? [parsedStartBlock] : []),
     ...middleBlocks,
-    ...(endBlock ? [endBlock] : []),
+    ...(parsedEndBlock ? [parsedEndBlock] : []),
   ]
 }