@portabletext/editor 2.15.4 → 2.16.0

package/src/selectors/selector.get-mark-state.test.ts

@@ -5,6 +5,69 @@ import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {getMarkState} from './selector.get-mark-state'
 
 describe(getMarkState.name, () => {
+  test('Scenario: Caret after annotation', () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockKey = keyGenerator()
+    const fooSpanKey = keyGenerator()
+    const barSpanKey = keyGenerator()
+    const bazSpanKey = keyGenerator()
+    const linkKey = keyGenerator()
+    const snapshot = createTestSnapshot({
+      context: {
+        keyGenerator,
+        value: [
+          {
+            _type: 'block',
+            _key: blockKey,
+            children: [
+              {
+                _type: 'span',
+                _key: fooSpanKey,
+                text: 'foo ',
+                marks: [],
+              },
+              {
+                _type: 'span',
+                _key: barSpanKey,
+                text: 'bar',
+                marks: [linkKey],
+              },
+              {
+                _type: 'span',
+                _key: bazSpanKey,
+                text: ' baz',
+              },
+            ],
+            markDefs: [
+              {
+                _type: 'link',
+                _key: linkKey,
+                href: 'https://portabletext.org',
+              },
+            ],
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: barSpanKey}],
+            offset: 3,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: barSpanKey}],
+            offset: 3,
+          },
+          backward: false,
+        },
+      },
+    })
+
+    expect(getMarkState(snapshot)).toEqual({
+      state: 'changed',
+      marks: [],
+      previousMarks: [linkKey],
+    })
+  })
+
   test('Scenario: Caret after annotated decorator', () => {
     const keyGenerator = createTestKeyGenerator()
     const blockKey = keyGenerator()
@@ -136,4 +199,127 @@ describe(getMarkState.name, () => {
       previousMarks: [linkKey, 'strong'],
     })
   })
+
+  test('Scenario: Caret in annotation, at the edge of decorator', () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockKey = keyGenerator()
+    const fooSpanKey = keyGenerator()
+    const barSpanKey = keyGenerator()
+    const linkKey = keyGenerator()
+    const snapshot = createTestSnapshot({
+      context: {
+        keyGenerator,
+        value: [
+          {
+            _type: 'block',
+            _key: blockKey,
+            children: [
+              {
+                _type: 'span',
+                _key: fooSpanKey,
+                text: 'foo',
+                marks: [linkKey],
+              },
+              {
+                _type: 'span',
+                _key: barSpanKey,
+                text: 'bar',
+                marks: [linkKey, 'strong'],
+              },
+            ],
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: fooSpanKey}],
+            offset: 3,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: fooSpanKey}],
+            offset: 3,
+          },
+          backward: false,
+        },
+        schema: compileSchema(
+          defineSchema({
+            annotations: [{name: 'link'}],
+            decorators: [{name: 'strong'}],
+          }),
+        ),
+      },
+    })
+
+    expect(getMarkState(snapshot)).toEqual({
+      state: 'unchanged',
+      marks: [linkKey],
+    })
+  })
+
+  test('Scenario: Caret between two annotations', () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockKey = keyGenerator()
+    const fooSpanKey = keyGenerator()
+    const barSpanKey = keyGenerator()
+    const linkKey = keyGenerator()
+    const commentKey = keyGenerator()
+    const snapshot = createTestSnapshot({
+      context: {
+        keyGenerator,
+        value: [
+          {
+            _type: 'block',
+            _key: blockKey,
+            children: [
+              {
+                _type: 'span',
+                _key: fooSpanKey,
+                text: 'foo',
+                marks: [linkKey],
+              },
+              {
+                _type: 'span',
+                _key: barSpanKey,
+                text: 'bar',
+                marks: [commentKey],
+              },
+            ],
+            markDefs: [
+              {
+                _type: 'link',
+                _key: linkKey,
+                href: 'https://portabletext.org',
+              },
+              {
+                _type: 'comment',
+                _key: commentKey,
+                text: 'Comment A',
+              },
+            ],
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: fooSpanKey}],
+            offset: 3,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: fooSpanKey}],
+            offset: 3,
+          },
+          backward: false,
+        },
+        schema: compileSchema(
+          defineSchema({
+            annotations: [{name: 'link'}, {name: 'comment'}],
+          }),
+        ),
+      },
+    })
+
+    expect(getMarkState(snapshot)).toEqual({
+      state: 'changed',
+      marks: [],
+      previousMarks: [linkKey],
+    })
+  })
 })

package/src/selectors/selector.get-mark-state.ts

@@ -196,7 +196,6 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
       } else if (previousSpanHasSameAnnotation) {
         return {
           state: 'unchanged',
-          previousMarks: marks,
           marks: focusSpan.node.marks ?? [],
         }
       } else if (!previousSpan) {
@@ -209,26 +208,33 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
     }
 
     if (atTheEndOfSpan) {
-      if (
-        (nextSpan &&
-          nextSpanSharesSomeAnnotations &&
-          nextSpanAnnotations.length < spanAnnotations.length) ||
-        !nextSpanSharesSomeAnnotations
-      ) {
+      if (!nextSpan) {
         return {
           state: 'changed',
           previousMarks: marks,
-          marks: nextSpan?.node.marks ?? [],
+          marks: [],
         }
       }
 
-      if (!nextSpan) {
+      if (nextSpanAnnotations.length > 0 && !nextSpanSharesSomeAnnotations) {
         return {
           state: 'changed',
           previousMarks: marks,
           marks: [],
         }
       }
+
+      if (
+        (nextSpanSharesSomeAnnotations &&
+          nextSpanAnnotations.length < spanAnnotations.length) ||
+        !nextSpanSharesSomeAnnotations
+      ) {
+        return {
+          state: 'changed',
+          previousMarks: marks,
+          marks: nextSpan?.node.marks ?? [],
+        }
+      }
     }
   }
 

package/src/selectors/selector.get-text-after.ts

@@ -0,0 +1,46 @@
+import type {EditorSelector} from '../editor/editor-selector'
+import {getBlockEndPoint} from '../utils/util.get-block-end-point'
+import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
+import {getFocusBlock} from './selector.get-focus-block'
+import {getSelectionText} from './selector.get-selection-text'
+
+/**
+ * @public
+ */
+export const getBlockTextAfter: EditorSelector<string> = (snapshot) => {
+  if (!snapshot.context.selection) {
+    return ''
+  }
+
+  const endPoint = getSelectionEndPoint(snapshot.context.selection)
+  const block = getFocusBlock({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: {
+        anchor: endPoint,
+        focus: endPoint,
+      },
+    },
+  })
+
+  if (!block) {
+    return ''
+  }
+
+  const endOfBlock = getBlockEndPoint({
+    context: snapshot.context,
+    block,
+  })
+
+  return getSelectionText({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: {
+        anchor: endPoint,
+        focus: endOfBlock,
+      },
+    },
+  })
+}

package/src/test/vitest/step-context.ts

@@ -1,4 +1,4 @@
-import type {Locator} from '@vitest/browser/context'
+import type {Locator} from 'vitest/browser'
 import type {Editor} from '../../editor'
 
 /**

package/src/test/vitest/step-definitions.tsx

@@ -1,8 +1,8 @@
 import {defineSchema} from '@portabletext/schema'
 import {getTersePt, parseTersePt} from '@portabletext/test'
-import {userEvent} from '@vitest/browser/context'
 import {Given, Then, When} from 'racejar'
 import {assert, expect, vi} from 'vitest'
+import {userEvent} from 'vitest/browser'
 import {getEditorSelection} from '../../internal-utils/editor-selection'
 import {getSelectionText} from '../../internal-utils/selection-text'
 import {getTextBlockKey} from '../../internal-utils/text-block-key'

package/src/test/vitest/test-editor.tsx

@@ -1,10 +1,10 @@
 import {defineSchema, type SchemaDefinition} from '@portabletext/schema'
 import {createTestKeyGenerator} from '@portabletext/test'
 import type {PortableTextBlock} from '@sanity/types'
-import {page} from '@vitest/browser/context'
 import React from 'react'
 import {expect, vi} from 'vitest'
 import {render} from 'vitest-browser-react'
+import {page} from 'vitest/browser'
 import type {Editor} from '../../editor'
 import {
   PortableTextEditable,
@@ -30,13 +30,12 @@ export async function createTestEditor(
   options: CreateTestEditorOptions = {},
 ): Promise<
   Pick<Context, 'editor' | 'locator'> & {
-    rerender: (options?: CreateTestEditorOptions) => void
+    rerender: (options?: CreateTestEditorOptions) => Promise<void>
   }
 > {
   const editorRef = React.createRef<Editor>()
   const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
-
-  const renderResult = render(
+  const renderResult = await render(
     <EditorProvider
       initialConfig={{
         keyGenerator: keyGenerator,
@@ -50,8 +49,8 @@ export async function createTestEditor(
     </EditorProvider>,
   )
 
-  function rerender(newOptions?: CreateTestEditorOptions) {
-    newOptions
+  async function rerender(newOptions?: CreateTestEditorOptions) {
+    await (newOptions
       ? renderResult.rerender(
           <EditorProvider
             initialConfig={{
@@ -77,7 +76,7 @@ export async function createTestEditor(
             <PortableTextEditable {...options.editableProps} />
             {options.children}
           </EditorProvider>,
-        )
+        ))
   }
 
   const locator = page.getByRole('textbox')