@portabletext/editor 2.1.11 → 2.2.0

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react12 from "react";
+import * as react21 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.JSX.Element;
+}): react21.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react12.JSX.Element;
+declare function OneLinePlugin(): react21.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.1.11",
+  "version": "2.2.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,8 +80,8 @@
     "slate-react": "0.117.4",
     "xstate": "^5.20.2",
     "@portabletext/block-tools": "2.0.8",
-    "@portabletext/patches": "1.1.6",
-    "@portabletext/keyboard-shortcuts": "1.1.1"
+    "@portabletext/keyboard-shortcuts": "1.1.1",
+    "@portabletext/patches": "1.1.6"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

package/src/behaviors/behavior.abstract.split.ts

@@ -56,6 +56,79 @@ export const abstractSplitBehaviors = [
     actions: [(_, {selection}) => [raise({type: 'delete', at: selection})]],
   }),
 
+  defineBehavior({
+    on: 'split',
+    guard: ({snapshot}) => {
+      const selection = snapshot.context.selection
+
+      if (!selection || utils.isSelectionCollapsed(selection)) {
+        return false
+      }
+
+      const selectionStartBlock = selectors.getSelectionStartBlock(snapshot)
+      const selectionEndBlock = selectors.getSelectionEndBlock(snapshot)
+
+      if (!selectionStartBlock || !selectionEndBlock) {
+        return false
+      }
+
+      if (selectionStartBlock.node._key === selectionEndBlock.node._key) {
+        return false
+      }
+
+      const startPoint = utils.getSelectionStartPoint(selection)
+      const startBlockEndPoint = utils.getBlockEndPoint({
+        context: snapshot.context,
+        block: selectionStartBlock,
+      })
+      const endPoint = utils.getSelectionEndPoint(selection)
+      const endBlockStartPoint = utils.getBlockStartPoint({
+        context: snapshot.context,
+        block: selectionEndBlock,
+      })
+
+      const selectedValue = selectors.getSelectedValue(snapshot)
+
+      const blocksInBetween = selectedValue.filter(
+        (block) =>
+          block._key !== selectionStartBlock.node._key &&
+          block._key !== selectionEndBlock.node._key,
+      )
+
+      return {
+        startPoint,
+        startBlockEndPoint,
+        endPoint,
+        endBlockStartPoint,
+        blocksInBetween,
+      }
+    },
+    actions: [
+      (
+        _,
+        {
+          startPoint,
+          startBlockEndPoint,
+          endPoint,
+          endBlockStartPoint,
+          blocksInBetween,
+        },
+      ) => [
+        raise({
+          type: 'delete',
+          at: {anchor: startPoint, focus: startBlockEndPoint},
+        }),
+        ...blocksInBetween.map((block) =>
+          raise({type: 'delete.block', at: [{_key: block._key}]}),
+        ),
+        raise({
+          type: 'delete',
+          at: {anchor: endBlockStartPoint, focus: endPoint},
+        }),
+      ],
+    ],
+  }),
+
   defineBehavior({
     on: 'split',
     guard: ({snapshot}) => {
@@ -111,7 +184,10 @@ export const abstractSplitBehaviors = [
           block: focusTextBlock.node,
         }),
         context: snapshot.context,
-        options: {refreshKeys: true, validateFields: true},
+        options: {
+          refreshKeys: false,
+          validateFields: false,
+        },
       })
 
       if (!newTextBlock) {

package/src/converters/converter.portable-text.deserialize.test.ts

@@ -159,7 +159,7 @@ describe(converterPortableText.deserialize, () => {
     ).toMatchObject({
       data: [
         {
-          _key: 'k0',
+          _key: 'b2',
           _type: 'image',
           src: 'https://example.com/image.jpg',
         },
@@ -573,7 +573,7 @@ describe(converterPortableText.deserialize, () => {
             {
               _type: 'span',
               text: 'foo',
-              marks: ['k1'],
+              marks: ['b0m0'],
             },
             {
               _type: 'span',
@@ -583,7 +583,7 @@ describe(converterPortableText.deserialize, () => {
           ],
           markDefs: [
             {
-              _key: 'k1',
+              _key: 'b0m0',
               _type: 'link',
               href: 'https://example.com',
             },

package/src/converters/converter.portable-text.ts

@@ -50,7 +50,7 @@ export const converterPortableText = defineConverter({
         context: snapshot.context,
         block,
         options: {
-          refreshKeys: true,
+          refreshKeys: false,
           validateFields: false,
         },
       })

package/src/converters/converter.text-html.ts

@@ -62,7 +62,7 @@ export function createConverterTextHtml(
           block,
           options: {
             refreshKeys: false,
-            validateFields: true,
+            validateFields: false,
           },
         })
         return parsedBlock ? [parsedBlock] : []

package/src/converters/converter.text-plain.ts

@@ -85,7 +85,7 @@ export function createConverterTextPlain(
           block,
           options: {
             refreshKeys: false,
-            validateFields: true,
+            validateFields: false,
           },
         })
         return parsedBlock ? [parsedBlock] : []

package/src/editor/Editable.tsx

@@ -474,8 +474,8 @@ export const PortableTextEditable = forwardRef<
                     },
                     blocks: result.insert,
                     options: {
-                      refreshKeys: true,
-                      validateFields: true,
+                      refreshKeys: false,
+                      validateFields: false,
                     },
                   }),
                   placement: 'auto',

package/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -191,57 +191,51 @@ describe('plugin:withPortableTextMarksModel', () => {
       await waitFor(() => {
         PortableTextEditor.select(editor, sel)
         PortableTextEditor.delete(editor, sel)
-        expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        [
+        expect(PortableTextEditor.getValue(editor)).toEqual([
           {
-            "_key": "5fc57af23597",
-            "_type": "myTestBlockType",
-            "children": [
+            _key: '5fc57af23597',
+            _type: 'myTestBlockType',
+            children: [
               {
-                "_key": "be1c67c6971a",
-                "_type": "span",
-                "marks": [],
-                "text": "This is a ",
+                _key: 'be1c67c6971a',
+                _type: 'span',
+                marks: [],
+                text: 'This is a ',
               },
               {
-                "_key": "11c8c9f783a8",
-                "_type": "span",
-                "marks": [
-                  "fde1fd54b544",
-                ],
-                "text": "link",
+                _key: '11c8c9f783a8',
+                _type: 'span',
+                marks: ['fde1fd54b544'],
+                text: 'link',
               },
               {
-                "_key": "576c748e0cd2",
-                "_type": "span",
-                "marks": [],
-                "text": "This is ",
+                _key: '576c748e0cd2',
+                _type: 'span',
+                marks: [],
+                text: 'This is ',
               },
               {
-                "_key": "f3d73d3833bf",
-                "_type": "span",
-                "marks": [
-                  "7b6d3d5de30c",
-                ],
-                "text": "another",
+                _key: 'f3d73d3833bf',
+                _type: 'span',
+                marks: ['7b6d3d5de30c'],
+                text: 'another',
               },
             ],
-            "markDefs": [
+            markDefs: [
               {
-                "_key": "fde1fd54b544",
-                "_type": "link",
-                "url": "1",
+                _key: 'fde1fd54b544',
+                _type: 'link',
+                url: '1',
               },
               {
-                "_key": "7b6d3d5de30c",
-                "_type": "link",
-                "url": "2",
+                _key: '7b6d3d5de30c',
+                _type: 'link',
+                url: '2',
               },
             ],
-            "style": "normal",
+            style: 'normal',
           },
-        ]
-      `)
+        ])
       })
     })
 

package/src/editor/plugins/createWithObjectKeys.ts

@@ -1,4 +1,6 @@
-import {Editor, Element, Node, Transforms} from 'slate'
+import {isEqual} from 'lodash'
+import {Editor, Element, Node, Path, Transforms} from 'slate'
+import {isSpan, isTextBlock} from '../../internal-utils/parse-blocks'
 import {isChangingRemotely} from '../../internal-utils/withChanges'
 import {isRedoing, isUndoing} from '../../internal-utils/withUndoRedo'
 import type {PortableTextSlateEditor} from '../../types/editor'
@@ -78,6 +80,113 @@ export function createWithObjectKeys(editorActor: EditorActor) {
         }
       }
 
+      if (operation.type === 'merge_node') {
+        const index = operation.path[operation.path.length - 1]
+        const prevPath = Path.previous(operation.path)
+        const prevIndex = prevPath[prevPath.length - 1]
+
+        if (operation.path.length !== 1 || prevPath.length !== 1) {
+          apply(operation)
+          return
+        }
+
+        const block = editor.value.at(index)
+        const previousBlock = editor.value.at(prevIndex)
+
+        if (!block || !previousBlock) {
+          apply(operation)
+          return
+        }
+
+        if (
+          !isTextBlock(editorActor.getSnapshot().context, block) ||
+          !isTextBlock(editorActor.getSnapshot().context, previousBlock)
+        ) {
+          apply(operation)
+          return
+        }
+
+        // If we are merging two text blocks, then we need to make sure there
+        // are no duplicate keys in the blocks. Therefore, we assign new keys
+        // to any child or markDef that shares key with other children or
+        // markDefs in the previous block.
+        const previousBlockChildKeys = previousBlock.children.map(
+          (child) => child._key,
+        )
+        const previousBlockMarkDefKeys =
+          previousBlock.markDefs?.map((markDef) => markDef._key) ?? []
+
+        // Assign new keys to markDefs with duplicate keys and keep track of
+        // the mapping between the old and new keys
+        const markDefKeyMap = new Map<string, string>()
+        const adjustedMarkDefs = block.markDefs?.map((markDef) => {
+          if (previousBlockMarkDefKeys.includes(markDef._key)) {
+            const newKey = editorActor.getSnapshot().context.keyGenerator()
+            markDefKeyMap.set(markDef._key, newKey)
+            return {
+              ...markDef,
+              _key: newKey,
+            }
+          }
+
+          return markDef
+        })
+
+        // Assign new keys to spans with duplicate keys and update any markDef
+        // key if needed
+        let childIndex = 0
+        for (const child of block.children) {
+          if (isSpan(editorActor.getSnapshot().context, child)) {
+            const marks =
+              child.marks?.map((mark) => {
+                const markDefKey = markDefKeyMap.get(mark)
+
+                if (markDefKey) {
+                  return markDefKey
+                }
+
+                return mark
+              }) ?? []
+
+            if (!isEqual(child.marks, marks)) {
+              Transforms.setNodes(
+                editor,
+                {
+                  marks,
+                },
+                {
+                  at: [index, childIndex],
+                },
+              )
+            }
+          }
+
+          if (previousBlockChildKeys.includes(child._key)) {
+            Transforms.setNodes(
+              editor,
+              {
+                _key: editorActor.getSnapshot().context.keyGenerator(),
+              },
+              {
+                at: [index, childIndex],
+              },
+            )
+          }
+          childIndex++
+        }
+
+        apply({
+          ...operation,
+          properties: {
+            ...operation.properties,
+            // Make sure the adjusted markDefs are carried along for the merge
+            // operation
+            markDefs: adjustedMarkDefs,
+          },
+        })
+        return
+      }
+
       apply(operation)
     }
 

package/src/internal-utils/test-editor.tsx

@@ -24,6 +24,7 @@ export async function createTestEditor(
     initialValue?: Array<PortableTextBlock>
     keyGenerator?: () => string
     schemaDefinition?: SchemaDefinition
+    children?: React.ReactNode
   } = {},
 ) {
   const editorRef = React.createRef<Editor>()
@@ -45,6 +46,7 @@ export async function createTestEditor(
       <InternalSlateEditorRefPlugin ref={slateRef} />
       <EventListenerPlugin on={onEvent} />
       <PortableTextEditable />
+      {options.children}
     </EditorProvider>,
   )
 

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

@@ -1,4 +1,4 @@
-import {Transforms} from 'slate'
+import {deleteText, setSelection, Transforms} from 'slate'
 import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {isTextBlock} from '../internal-utils/parse-blocks'
 import {getBlockPath} from '../internal-utils/slate-utils'
@@ -11,15 +11,33 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
 > = ({context, operation}) => {
   const anchorBlockKey = getBlockKeyFromSelectionPoint(operation.at.anchor)
   const focusBlockKey = getBlockKeyFromSelectionPoint(operation.at.focus)
+
+  const startBlockKey = operation.at.backward ? focusBlockKey : anchorBlockKey
   const endBlockKey = operation.at.backward ? anchorBlockKey : focusBlockKey
   const endOffset = operation.at.backward
     ? operation.at.focus.offset
     : operation.at.anchor.offset
 
+  if (!startBlockKey) {
+    throw new Error('Failed to get start block key')
+  }
+
   if (!endBlockKey) {
     throw new Error('Failed to get end block key')
   }
 
+  const startBlockIndex = operation.editor.blockIndexMap.get(startBlockKey)
+
+  if (startBlockIndex === undefined) {
+    throw new Error('Failed to get start block index')
+  }
+
+  const startBlock = operation.editor.value.at(startBlockIndex)
+
+  if (!startBlock) {
+    throw new Error('Failed to get start block')
+  }
+
   const endBlockIndex = operation.editor.blockIndexMap.get(endBlockKey)
 
   if (endBlockIndex === undefined) {
@@ -82,10 +100,21 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
 
   const hanging = isTextBlock(context, endBlock) && endOffset === 0
 
-  operation.editor.delete({
+  deleteText(operation.editor, {
     at: range,
     reverse: operation.direction === 'backward',
     unit: operation.unit,
     hanging,
   })
+
+  if (
+    operation.editor.selection &&
+    isTextBlock(context, startBlock) &&
+    isTextBlock(context, endBlock)
+  ) {
+    setSelection(operation.editor, {
+      anchor: operation.editor.selection.focus,
+      focus: operation.editor.selection.focus,
+    })
+  }
 }

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

@@ -1,7 +1,7 @@
+import {isEqual} from 'lodash'
 import {Editor, Path, Point, Range, Transforms, type Descendant} from 'slate'
 import {DOMEditor} from 'slate-dom'
-import type {EditorSchema} from '../editor/editor-schema'
-import {parseBlock} from '../internal-utils/parse-blocks'
+import {isSpan, parseBlock} from '../internal-utils/parse-blocks'
 import {
   getFocusBlock,
   getFocusChild,
@@ -12,7 +12,10 @@ import {
 import {isEqualToEmptyEditor, toSlateValue} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {isEmptyTextBlock} from '../utils'
-import type {BehaviorOperationImplementation} from './behavior.operations'
+import type {
+  BehaviorOperationImplementation,
+  BehaviorOperationImplementationContext,
+} from './behavior.operations'
 
 export const insertBlockOperationImplementation: BehaviorOperationImplementation<
   'insert.block'
@@ -36,26 +39,26 @@ export const insertBlockOperationImplementation: BehaviorOperationImplementation
   }
 
   insertBlock({
+    context,
     block: fragment,
     placement: operation.placement,
     select: operation.select ?? 'start',
     editor: operation.editor,
-    schema: context.schema,
   })
 }
 
 export function insertBlock({
+  context,
   block,
   placement,
   select,
   editor,
-  schema,
 }: {
+  context: BehaviorOperationImplementationContext
   block: Descendant
   placement: 'auto' | 'after' | 'before'
   select: 'start' | 'end' | 'none'
   editor: PortableTextSlateEditor
-  schema: EditorSchema
 }) {
   const [startBlock, startBlockPath] = getSelectionStartBlock({editor})
   const [endBlock, endBlockPath] = getSelectionEndBlock({editor})
@@ -93,7 +96,7 @@ export function insertBlock({
     } else {
       // placement === 'auto'
 
-      if (lastBlock && isEqualToEmptyEditor([lastBlock], schema)) {
+      if (lastBlock && isEqualToEmptyEditor([lastBlock], context.schema)) {
         // And if the last block was an empty text block, let's remove
         // that too
         Transforms.removeNodes(editor, {at: lastBlockPath})
@@ -211,7 +214,7 @@ export function insertBlock({
           Transforms.select(editor, adjustedSelection)
         }
 
-        if (focusBlock && isEqualToEmptyEditor([focusBlock], schema)) {
+        if (focusBlock && isEqualToEmptyEditor([focusBlock], context.schema)) {
           Transforms.removeNodes(editor, {at: focusBlockPath})
         }
 
@@ -221,7 +224,7 @@ export function insertBlock({
       if (editor.isTextBlock(endBlock) && editor.isTextBlock(block)) {
         const selectionStartPoint = Range.start(currentSelection)
 
-        if (isEqualToEmptyEditor([endBlock], schema)) {
+        if (isEqualToEmptyEditor([endBlock], context.schema)) {
           const currentSelection = editor.selection
 
           Transforms.insertNodes(editor, [block], {
@@ -241,25 +244,94 @@ export function insertBlock({
           return
         }
 
+        const endBlockChildKeys = endBlock.children.map((child) => child._key)
+        const endBlockMarkDefsKeys =
+          endBlock.markDefs?.map((markDef) => markDef._key) ?? []
+
+        // Assign new keys to markDefs with duplicate keys and keep track of
+        // the mapping between the old and new keys
+        const markDefKeyMap = new Map<string, string>()
+        const adjustedMarkDefs = block.markDefs?.map((markDef) => {
+          if (endBlockMarkDefsKeys.includes(markDef._key)) {
+            const newKey = context.keyGenerator()
+            markDefKeyMap.set(markDef._key, newKey)
+            return {
+              ...markDef,
+              _key: newKey,
+            }
+          }
+
+          return markDef
+        })
+
+        // Assign new keys to spans with duplicate keys and update any markDef
+        // key if needed
+        const adjustedChildren = block.children.map((child) => {
+          if (isSpan(context, child)) {
+            const marks =
+              child.marks?.map((mark) => {
+                const markDefKey = markDefKeyMap.get(mark)
+
+                if (markDefKey) {
+                  return markDefKey
+                }
+
+                return mark
+              }) ?? []
+
+            if (!isEqual(child.marks, marks)) {
+              return {
+                ...child,
+                _key: endBlockChildKeys.includes(child._key)
+                  ? context.keyGenerator()
+                  : child._key,
+                marks,
+              }
+            }
+          }
+
+          if (endBlockChildKeys.includes(child._key)) {
+            return {
+              ...child,
+              _key: context.keyGenerator(),
+            }
+          }
+
+          return child
+        })
+
+        // Carry over the markDefs from the incoming block to the end block
         Transforms.setNodes(
           editor,
           {
-            markDefs: [...(endBlock.markDefs ?? []), ...(block.markDefs ?? [])],
+            markDefs: [
+              ...(endBlock.markDefs ?? []),
+              ...(adjustedMarkDefs ?? []),
+            ],
           },
           {
             at: endBlockPath,
           },
         )
 
+        // If the children have changed, we need to create a new block with
+        // the adjusted children
+        const adjustedBlock = !isEqual(block.children, adjustedChildren)
+          ? {
+              ...block,
+              children: adjustedChildren as Descendant[],
+            }
+          : block
+
         if (select === 'end') {
-          Transforms.insertFragment(editor, [block], {
+          Transforms.insertFragment(editor, [adjustedBlock], {
             voids: true,
           })
 
           return
         }
 
-        Transforms.insertFragment(editor, [block], {
+        Transforms.insertFragment(editor, [adjustedBlock], {
           at: currentSelection,
           voids: true,
         })
@@ -301,7 +373,7 @@ export function insertBlock({
               Transforms.select(editor, Editor.start(editor, endBlockPath))
             }
 
-            if (isEmptyTextBlock({schema}, endBlock)) {
+            if (isEmptyTextBlock(context, endBlock)) {
               Transforms.removeNodes(editor, {at: Path.next(endBlockPath)})
             }
           } else if (

package/src/utils/util.merge-text-blocks.ts

@@ -18,7 +18,7 @@ export function mergeTextBlocks({
   const parsedIncomingBlock = parseBlock({
     context,
     block: incomingBlock,
-    options: {refreshKeys: true, validateFields: true},
+    options: {refreshKeys: false, validateFields: false},
   })
 
   if (!parsedIncomingBlock || !isTextBlock(context, parsedIncomingBlock)) {