@portabletext/editor 2.15.1 → 2.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -114,7 +114,7 @@
     "rxjs": "^7.8.2",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.46.1",
-    "vite": "^7.1.7",
+    "vite": "^7.1.10",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
     "@portabletext/sanity-bridge": "1.1.15",

package/src/editor/plugins/createWithObjectKeys.ts

@@ -193,6 +193,43 @@ export function createWithObjectKeys(editorActor: EditorActor) {
 
     editor.normalizeNode = (entry) => {
       const [node, path] = entry
+
+      if (Element.isElement(node)) {
+        const [parent] = Editor.parent(editor, path)
+
+        if (parent && Editor.isEditor(parent)) {
+          const blockKeys = new Set<string>()
+
+          for (const sibling of parent.children) {
+            if (sibling._key && blockKeys.has(sibling._key)) {
+              const _key = editorActor.getSnapshot().context.keyGenerator()
+
+              blockKeys.add(_key)
+
+              withNormalizeNode(editor, () => {
+                Transforms.setNodes(editor, {_key}, {at: path})
+              })
+
+              return
+            }
+
+            if (!sibling._key) {
+              const _key = editorActor.getSnapshot().context.keyGenerator()
+
+              blockKeys.add(_key)
+
+              withNormalizeNode(editor, () => {
+                Transforms.setNodes(editor, {_key}, {at: path})
+              })
+
+              return
+            }
+
+            blockKeys.add(sibling._key)
+          }
+        }
+      }
+
       if (
         Element.isElement(node) &&
         node._type === editorActor.getSnapshot().context.schema.block.name
@@ -208,18 +245,36 @@ export function createWithObjectKeys(editorActor: EditorActor) {
           })
           return
         }
-        // Set keys on it's children
+
+        // Set unique keys on it's children
+        const childKeys = new Set<string>()
+
         for (const [child, childPath] of Node.children(editor, path)) {
+          if (child._key && childKeys.has(child._key)) {
+            const _key = editorActor.getSnapshot().context.keyGenerator()
+
+            childKeys.add(_key)
+
+            withNormalizeNode(editor, () => {
+              Transforms.setNodes(editor, {_key}, {at: childPath})
+            })
+
+            return
+          }
+
           if (!child._key) {
+            const _key = editorActor.getSnapshot().context.keyGenerator()
+
+            childKeys.add(_key)
+
             withNormalizeNode(editor, () => {
-              Transforms.setNodes(
-                editor,
-                {_key: editorActor.getSnapshot().context.keyGenerator()},
-                {at: childPath},
-              )
+              Transforms.setNodes(editor, {_key}, {at: childPath})
             })
+
             return
           }
+
+          childKeys.add(child._key)
         }
       }
 

package/src/internal-utils/applyPatch.ts

@@ -202,9 +202,19 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
 
   const isTextBlock = editor.isTextBlock(block.node)
 
-  // Ignore patches targeting nested void data, like 'markDefs'
-  if (isTextBlock && patch.path.length > 1 && patch.path[1] !== 'children') {
-    return false
+  if (isTextBlock && patch.path[1] !== 'children') {
+    const updatedBlock = applyAll(block.node, [
+      {
+        ...patch,
+        path: patch.path.slice(1),
+      },
+    ])
+
+    Transforms.setNodes(editor, updatedBlock as Partial<Node>, {
+      at: [block.index],
+    })
+
+    return true
   }
 
   const child = findBlockChild(block, patch.path)

package/src/internal-utils/operation-to-patches.ts

@@ -9,7 +9,7 @@ import {
 } from '@portabletext/patches'
 import {isSpan, isTextBlock} from '@portabletext/schema'
 import type {Path, PortableTextSpan, PortableTextTextBlock} from '@sanity/types'
-import {get, isUndefined, omitBy} from 'lodash'
+import {get} from 'lodash'
 import {
   Element,
   Text,
@@ -101,20 +101,55 @@ export function setNodePatch(
   children: Descendant[],
   operation: SetNodeOperation,
 ): Array<Patch> {
-  if (operation.path.length === 1) {
-    const block = children[operation.path[0]]
-    if (typeof block._key !== 'string') {
-      throw new Error('Expected block to have a _key')
+  const blockIndex = operation.path.at(0)
+
+  if (blockIndex !== undefined && operation.path.length === 1) {
+    const block = children.at(blockIndex)
+
+    if (!block) {
+      console.error('Could not find block at index', blockIndex)
+      return []
+    }
+
+    if (isTextBlock({schema}, block)) {
+      const patches: Patch[] = []
+
+      for (const key of Object.keys(operation.newProperties)) {
+        const value = (operation.newProperties as Record<string, unknown>)[key]
+
+        if (key === '_key') {
+          patches.push(set(value, [blockIndex, '_key']))
+        } else {
+          patches.push(set(value, [{_key: block._key}, key]))
+        }
+      }
+
+      return patches
+    } else {
+      const patches: Patch[] = []
+
+      const _key = operation.newProperties._key
+
+      if (_key !== undefined) {
+        patches.push(set(_key, [blockIndex, '_key']))
+      }
+
+      const properties =
+        'value' in operation.newProperties &&
+        typeof operation.newProperties.value === 'object'
+          ? (operation.newProperties.value as Record<string, unknown>)
+          : ({} satisfies Record<string, unknown>)
+
+      const keys = Object.keys(properties)
+
+      for (const key of keys) {
+        const value = properties[key]
+
+        patches.push(set(value, [{_key: block._key}, key]))
+      }
+
+      return patches
     }
-    const setNode = omitBy(
-      {...children[operation.path[0]], ...operation.newProperties},
-      isUndefined,
-    ) as unknown as Descendant
-    return [
-      set(fromSlateValue([setNode], schema.block.name)[0], [
-        {_key: block._key},
-      ]),
-    ]
   } else if (operation.path.length === 2) {
     const block = children[operation.path[0]]
     if (isTextBlock({schema}, block)) {

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

@@ -17,6 +17,7 @@ test(getTextSelection.name, () => {
   expect(getTextSelection({schema, value: [simpleBlock]}, 'foo')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 0},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 3},
+    backward: false,
   })
 
   const joinedBlock = {
@@ -28,18 +29,22 @@ test(getTextSelection.name, () => {
   expect(getTextSelection({schema, value: [joinedBlock]}, 'foo ')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 0},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 4},
+    backward: false,
   })
   expect(getTextSelection({schema, value: [joinedBlock]}, 'o')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 1},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 2},
+    backward: false,
   })
   expect(getTextSelection({schema, value: [joinedBlock]}, 'bar')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 4},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 7},
+    backward: false,
   })
   expect(getTextSelection({schema, value: [joinedBlock]}, ' baz')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 7},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 11},
+    backward: false,
   })
 
   const noSpaceBlock = {
@@ -54,6 +59,7 @@ test(getTextSelection.name, () => {
   expect(getTextSelection({schema, value: [noSpaceBlock]}, 'obar')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 2},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's2'}], offset: 3},
+    backward: false,
   })
 
   const emptyLineBlock = {
@@ -70,6 +76,7 @@ test(getTextSelection.name, () => {
     {
       anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 0},
       focus: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 3},
+      backward: false,
     },
   )
 
@@ -86,24 +93,29 @@ test(getTextSelection.name, () => {
   expect(getTextSelection({schema, value: [splitBlock]}, 'foo')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 0},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 3},
+    backward: false,
   })
   expect(getTextSelection({schema, value: [splitBlock]}, 'bar')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's2'}], offset: 0},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's2'}], offset: 3},
+    backward: false,
   })
   expect(getTextSelection({schema, value: [splitBlock]}, 'baz')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 1},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 4},
+    backward: false,
   })
   expect(
     getTextSelection({schema, value: [splitBlock]}, 'foo bar baz'),
   ).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 0},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 4},
+    backward: false,
   })
   expect(getTextSelection({schema, value: [splitBlock]}, 'o bar b')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 2},
     focus: {path: [{_key: 'b1'}, 'children', {_key: 's3'}], offset: 2},
+    backward: false,
   })
 
   const twoBlocks = [
@@ -122,6 +134,7 @@ test(getTextSelection.name, () => {
   expect(getTextSelection({schema, value: twoBlocks}, 'ooba')).toEqual({
     anchor: {path: [{_key: 'b1'}, 'children', {_key: 's1'}], offset: 1},
     focus: {path: [{_key: 'b2'}, 'children', {_key: 's2'}], offset: 2},
+    backward: false,
   })
 })
 

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

@@ -102,6 +102,7 @@ export function getTextSelection(
   return {
     anchor,
     focus,
+    backward: false,
   }
 }
 

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

@@ -1,5 +1,5 @@
 import {Transforms, type Element as SlateElement} from 'slate'
-import {toSlateValue} from '../internal-utils/values'
+import {toSlateBlock} from '../internal-utils/values'
 import {parseBlock} from '../utils/parse-blocks'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
@@ -40,13 +40,9 @@ export const blockSetOperationImplementation: BehaviorOperationImplementation<
     throw new Error(`Unable to update block at ${JSON.stringify(operation.at)}`)
   }
 
-  const slateBlock = toSlateValue([parsedBlock], {
+  const slateBlock = toSlateBlock(parsedBlock, {
     schemaTypes: context.schema,
-  })?.at(0) as SlateElement | undefined
-
-  if (!slateBlock) {
-    throw new Error(`Unable to convert block to Slate value`)
-  }
+  }) as SlateElement
 
   Transforms.setNodes(operation.editor, slateBlock, {at: [blockIndex]})
 }

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

@@ -6,6 +6,8 @@ import type {Editor} from '../../editor'
  */
 export type Context = {
   editor: Editor
+  editorB: Editor
   locator: Locator
+  locatorB: Locator
   keyMap?: Map<string, string>
 }

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

@@ -13,7 +13,7 @@ import {
   getTextSelection,
 } from '../../internal-utils/text-selection'
 import {getValueAnnotations} from '../../internal-utils/value-annotations'
-import {createTestEditor} from '../../test/vitest'
+import {createTestEditor, createTestEditors} from '../../test/vitest'
 import {
   parseBlocks,
   parseInlineObject,
@@ -25,33 +25,45 @@ import {selectionPointToBlockOffset} from '../../utils/util.selection-point-to-b
 import type {Parameter} from '../gherkin-parameter-types'
 import type {Context} from './step-context'
 
+const schemaDefinition = defineSchema({
+  annotations: [{name: 'comment'}, {name: 'link'}],
+  decorators: [{name: 'em'}, {name: 'strong'}],
+  blockObjects: [{name: 'image'}, {name: 'break'}],
+  inlineObjects: [{name: 'stock-ticker'}],
+  lists: [{name: 'bullet'}, {name: 'number'}],
+  styles: [
+    {name: 'normal'},
+    {name: 'h1'},
+    {name: 'h2'},
+    {name: 'h3'},
+    {name: 'h4'},
+    {name: 'h5'},
+    {name: 'h6'},
+    {name: 'blockquote'},
+  ],
+})
+
 /**
  * @internal
  */
 export const stepDefinitions = [
   Given('one editor', async (context: Context) => {
     const {editor, locator} = await createTestEditor({
-      schemaDefinition: defineSchema({
-        annotations: [{name: 'comment'}, {name: 'link'}],
-        decorators: [{name: 'em'}, {name: 'strong'}],
-        blockObjects: [{name: 'image'}, {name: 'break'}],
-        inlineObjects: [{name: 'stock-ticker'}],
-        lists: [{name: 'bullet'}, {name: 'number'}],
-        styles: [
-          {name: 'normal'},
-          {name: 'h1'},
-          {name: 'h2'},
-          {name: 'h3'},
-          {name: 'h4'},
-          {name: 'h5'},
-          {name: 'h6'},
-          {name: 'blockquote'},
-        ],
-      }),
+      schemaDefinition,
+    })
+
+    context.locator = locator
+    context.editor = editor
+  }),
+  Given('two editors', async (context: Context) => {
+    const {editor, locator, editorB, locatorB} = await createTestEditors({
+      schemaDefinition,
     })
 
     context.locator = locator
     context.editor = editor
+    context.locatorB = locatorB
+    context.editorB = editorB
   }),
 
   Given('a global keymap', (context: Context) => {
@@ -62,6 +74,10 @@ export const stepDefinitions = [
     await userEvent.click(context.locator)
   }),
 
+  When('Editor B is focused', async (context: Context) => {
+    await userEvent.click(context.locatorB)
+  }),
+
   Given(
     'the text {terse-pt}',
     (context: Context, tersePt: Parameter['tersePt']) => {
@@ -172,6 +188,12 @@ export const stepDefinitions = [
   When('{string} is typed', async (context: Context, text: string) => {
     await userEvent.type(context.locator, text)
   }),
+  When(
+    '{string} is typed by Editor B',
+    async (context: Context, text: string) => {
+      await userEvent.type(context.locatorB, text)
+    },
+  ),
   When('{string} is inserted', (context: Context, text: string) => {
     context.editor.send({type: 'insert.text', text})
   }),
@@ -276,6 +298,28 @@ export const stepDefinitions = [
       })
     },
   ),
+  When(
+    'the caret is put after {string} by Editor B',
+    async (context: Context, text: string) => {
+      await vi.waitFor(() => {
+        const selection = getSelectionAfterText(
+          context.editorB.getSnapshot().context,
+          text,
+        )
+
+        expect(selection).not.toBeNull()
+
+        context.editorB.send({
+          type: 'select',
+          at: selection,
+        })
+
+        expect(context.editorB.getSnapshot().context.selection).toEqual(
+          selection,
+        )
+      })
+    },
+  ),
   Then(
     'the caret is after {string}',
     async (context: Context, text: string) => {

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

@@ -11,6 +11,7 @@ import {
   type PortableTextEditableProps,
 } from '../../editor/Editable'
 import {EditorProvider} from '../../editor/editor-provider'
+import {EventListenerPlugin} from '../../plugins'
 import {EditorRefPlugin} from '../../plugins/plugin.editor-ref'
 import type {Context} from './step-context'
 
@@ -89,3 +90,96 @@ export async function createTestEditor(
     rerender,
   }
 }
+
+/**
+ * @internal
+ */
+export async function createTestEditors(
+  options: CreateTestEditorOptions,
+): Promise<Pick<Context, 'editor' | 'locator' | 'editorB' | 'locatorB'>> {
+  const editorRef = React.createRef<Editor>()
+  const editorBRef = React.createRef<Editor>()
+  const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
+
+  render(
+    <>
+      <EditorProvider
+        initialConfig={{
+          keyGenerator: keyGenerator,
+          schemaDefinition: options.schemaDefinition ?? defineSchema({}),
+          initialValue: options.initialValue,
+        }}
+      >
+        <EditorRefPlugin ref={editorRef} />
+        <PortableTextEditable
+          {...options.editableProps}
+          data-testid="editor-a"
+        />
+        <EventListenerPlugin
+          on={(event) => {
+            if (event.type === 'mutation') {
+              editorBRef.current?.send({
+                type: 'patches',
+                patches: event.patches.map((patch) => ({
+                  ...patch,
+                  origin: 'remote',
+                })),
+                snapshot: event.snapshot,
+              })
+              editorBRef.current?.send({
+                type: 'update value',
+                value: event.value,
+              })
+            }
+          }}
+        />
+        {options.children}
+      </EditorProvider>
+      <EditorProvider
+        initialConfig={{
+          keyGenerator: keyGenerator,
+          schemaDefinition: options.schemaDefinition ?? defineSchema({}),
+          initialValue: options.initialValue,
+        }}
+      >
+        <EditorRefPlugin ref={editorBRef} />
+        <PortableTextEditable
+          {...options.editableProps}
+          data-testid="editor-b"
+        />
+        <EventListenerPlugin
+          on={(event) => {
+            if (event.type === 'mutation') {
+              editorRef.current?.send({
+                type: 'patches',
+                patches: event.patches.map((patch) => ({
+                  ...patch,
+                  origin: 'remote',
+                })),
+                snapshot: event.value,
+              })
+              editorRef.current?.send({
+                type: 'update value',
+                value: event.value,
+              })
+            }
+          }}
+        />
+        {options.children}
+      </EditorProvider>
+    </>,
+  )
+
+  const locator = page.getByTestId('editor-a')
+  const locatorB = page.getByTestId('editor-b')
+
+  await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
+  await vi.waitFor(() => expect.element(locatorB).toBeInTheDocument())
+
+  return {
+    editor: editorRef.current!,
+    locator,
+    editorB: editorBRef.current!,
+    locatorB,
+  }
+}