@portabletext/editor 2.1.11 → 2.3.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 react22 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.JSX.Element;
+}): react22.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(): react22.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.3.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

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

@@ -1,4 +1,4 @@
-import {isSpan} from '../internal-utils/parse-blocks'
+import {isSpan, isTextBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
 import * as utils from '../utils'
 import {raise} from './behavior.types.action'
@@ -25,6 +25,57 @@ export const abstractDeleteBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'delete',
+    guard: ({snapshot, event}) => {
+      if (event.direction !== 'backward') {
+        return false
+      }
+
+      const previousBlock = selectors.getPreviousBlock(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (!previousBlock || !focusTextBlock) {
+        return false
+      }
+
+      if (!selectors.isAtTheStartOfBlock(focusTextBlock)(snapshot)) {
+        return false
+      }
+
+      const previousBlockEndPoint = utils.getBlockEndPoint({
+        context: snapshot.context,
+        block: previousBlock,
+      })
+
+      if (!isTextBlock(snapshot.context, previousBlock.node)) {
+        return false
+      }
+
+      return {previousBlockEndPoint, focusTextBlock}
+    },
+    actions: [
+      (_, {previousBlockEndPoint, focusTextBlock}) => [
+        raise({
+          type: 'delete.block',
+          at: focusTextBlock.path,
+        }),
+        raise({
+          type: 'select',
+          at: {
+            anchor: previousBlockEndPoint,
+            focus: previousBlockEndPoint,
+          },
+        }),
+        raise({
+          type: 'insert.block',
+          block: focusTextBlock.node,
+          placement: 'auto',
+          select: 'start',
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'delete.forward',
     guard: ({snapshot}) => {
@@ -45,6 +96,45 @@ export const abstractDeleteBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'delete',
+    guard: ({snapshot, event}) => {
+      if (event.direction !== 'forward') {
+        return false
+      }
+
+      const nextBlock = selectors.getNextBlock(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (!nextBlock || !focusTextBlock) {
+        return false
+      }
+
+      if (!selectors.isAtTheEndOfBlock(focusTextBlock)(snapshot)) {
+        return false
+      }
+
+      if (!isTextBlock(snapshot.context, nextBlock.node)) {
+        return false
+      }
+
+      return {nextBlock}
+    },
+    actions: [
+      (_, {nextBlock}) => [
+        raise({
+          type: 'delete.block',
+          at: nextBlock.path,
+        }),
+        raise({
+          type: 'insert.block',
+          block: nextBlock.node,
+          placement: 'auto',
+          select: 'none',
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'delete.block',
     actions: [

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,
+    })
+  }
 }