@portabletext/editor 2.9.2 → 2.11.0

package/src/internal-utils/parse-blocks.test.ts

@@ -12,7 +12,7 @@ describe(parseBlock.name, () => {
           keyGenerator: createTestKeyGenerator(),
           schema: compileSchema(defineSchema({})),
         },
-        options: {validateFields: true},
+        options: {removeUnusedMarkDefs: true, validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -25,7 +25,7 @@ describe(parseBlock.name, () => {
           keyGenerator: createTestKeyGenerator(),
           schema: compileSchema(defineSchema({})),
         },
-        options: {validateFields: true},
+        options: {removeUnusedMarkDefs: true, validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -39,7 +39,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({})),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toBe(undefined)
     })
@@ -54,7 +54,7 @@ describe(parseBlock.name, () => {
               defineSchema({blockObjects: [{name: 'image'}]}),
             ),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toBe(undefined)
     })
@@ -69,7 +69,7 @@ describe(parseBlock.name, () => {
               defineSchema({blockObjects: [{name: 'image'}]}),
             ),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -87,7 +87,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({})),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -114,7 +114,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: {...schema, block: {...schema.block, name: 'text'}},
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -149,7 +149,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({})),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toBe(undefined)
     })
@@ -188,7 +188,7 @@ describe(parseBlock.name, () => {
               }),
             ),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -236,7 +236,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({lists: [{name: 'bullet'}]})),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -263,7 +263,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({lists: [{name: 'bullet'}]})),
           },
-          options: {validateFields: true},
+          options: {removeUnusedMarkDefs: true, validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -290,7 +290,7 @@ describe(parseBlock.name, () => {
               keyGenerator: createTestKeyGenerator(),
               schema: compileSchema(defineSchema({})),
             },
-            options: {validateFields: true},
+            options: {removeUnusedMarkDefs: true, validateFields: true},
           }),
         ).toEqual({
           _type: 'block',
@@ -320,7 +320,7 @@ describe(parseBlock.name, () => {
                 }),
               ),
             },
-            options: {validateFields: true},
+            options: {removeUnusedMarkDefs: true, validateFields: true},
           }),
         ).toEqual({
           _type: 'block',
@@ -351,7 +351,7 @@ describe(parseBlock.name, () => {
                 }),
               ),
             },
-            options: {validateFields: true},
+            options: {removeUnusedMarkDefs: true, validateFields: true},
           }),
         ).toEqual({
           _type: 'block',

package/src/internal-utils/parse-blocks.ts

@@ -19,6 +19,7 @@ export function parseBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   blocks: unknown
   options: {
+    removeUnusedMarkDefs: boolean
     validateFields: boolean
   }
 }): Array<PortableTextBlock> {
@@ -41,6 +42,7 @@ export function parseBlock({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   block: unknown
   options: {
+    removeUnusedMarkDefs: boolean
     validateFields: boolean
   }
 }): PortableTextBlock | undefined {
@@ -99,7 +101,10 @@ export function parseTextBlock({
 }: {
   block: unknown
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
-  options: {validateFields: boolean}
+  options: {
+    removeUnusedMarkDefs: boolean
+    validateFields: boolean
+  }
 }): PortableTextTextBlock | undefined {
   if (!isTypedObject(block)) {
     return undefined
@@ -204,7 +209,9 @@ export function parseTextBlock({
               marks: [],
             },
           ],
-    markDefs: markDefs.filter((markDef) => marks.includes(markDef._key)),
+    markDefs: options.removeUnusedMarkDefs
+      ? markDefs.filter((markDef) => marks.includes(markDef._key))
+      : markDefs,
     ...customFields,
   }
 

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

@@ -6,18 +6,13 @@ import React from 'react'
 import {expect, vi} from 'vitest'
 import {render} from 'vitest-browser-react'
 import type {Context} from '../../gherkin-tests-v2/step-context'
-import type {NativeBehaviorEvent} from '../behaviors'
 import type {Editor} from '../editor'
 import {
   PortableTextEditable,
   type PortableTextEditableProps,
 } from '../editor/Editable'
-import type {EditorActor} from '../editor/editor-machine'
 import {EditorProvider} from '../editor/editor-provider'
 import {EditorRefPlugin} from '../plugins/plugin.editor-ref'
-import {InternalEditorAfterRefPlugin} from '../plugins/plugin.internal.editor-actor-ref'
-import {InternalSlateEditorRefPlugin} from '../plugins/plugin.internal.slate-editor-ref'
-import type {PortableTextSlateEditor} from '../types/editor'
 
 type CreateTestEditorOptions = {
   initialValue?: Array<PortableTextBlock>
@@ -35,8 +30,6 @@ export async function createTestEditor(
   }
 > {
   const editorRef = React.createRef<Editor>()
-  const editorActorRef = React.createRef<EditorActor>()
-  const slateRef = React.createRef<PortableTextSlateEditor>()
   const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
 
   const renderResult = render(
@@ -48,8 +41,6 @@ export async function createTestEditor(
       }}
     >
       <EditorRefPlugin ref={editorRef} />
-      <InternalEditorAfterRefPlugin ref={editorActorRef} />
-      <InternalSlateEditorRefPlugin ref={slateRef} />
       <PortableTextEditable {...options.editableProps} />
       {options.children}
     </EditorProvider>,
@@ -66,8 +57,6 @@ export async function createTestEditor(
             }}
           >
             <EditorRefPlugin ref={editorRef} />
-            <InternalEditorAfterRefPlugin ref={editorActorRef} />
-            <InternalSlateEditorRefPlugin ref={slateRef} />
             <PortableTextEditable {...newOptions.editableProps} />
             {newOptions.children}
           </EditorProvider>,
@@ -81,8 +70,6 @@ export async function createTestEditor(
             }}
           >
             <EditorRefPlugin ref={editorRef} />
-            <InternalEditorAfterRefPlugin ref={editorActorRef} />
-            <InternalSlateEditorRefPlugin ref={slateRef} />
             <PortableTextEditable {...options.editableProps} />
             {options.children}
           </EditorProvider>,
@@ -93,19 +80,8 @@ export async function createTestEditor(
 
   await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
 
-  function sendNativeEvent(event: NativeBehaviorEvent) {
-    editorActorRef.current?.send({
-      type: 'behavior event',
-      behaviorEvent: event,
-      editor: slateRef.current!,
-    })
-  }
-
   return {
-    editor: {
-      ...editorRef.current!,
-      sendNativeEvent,
-    },
+    editor: editorRef.current!,
     locator,
     rerender,
   }

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

@@ -30,15 +30,16 @@ export const blockSetOperationImplementation: BehaviorOperationImplementation<
   const parsedBlock = parseBlock({
     context,
     block: updatedBlock,
-    options: {validateFields: true},
+    options: {
+      removeUnusedMarkDefs: false,
+      validateFields: true,
+    },
   })
 
   if (!parsedBlock) {
     throw new Error(`Unable to update block at ${JSON.stringify(operation.at)}`)
   }
 
-  parsedBlock.markDefs = updatedBlock.markDefs
-
   const slateBlock = toSlateValue([parsedBlock], {
     schemaTypes: context.schema,
   })?.at(0) as SlateElement | undefined

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

@@ -51,7 +51,10 @@ export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
     const updatedTextBlock = parseBlock({
       context,
       block: omit(parsedBlock, propsToRemove),
-      options: {validateFields: true},
+      options: {
+        removeUnusedMarkDefs: true,
+        validateFields: true,
+      },
     })
 
     if (!updatedTextBlock) {
@@ -81,7 +84,10 @@ export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
       parsedBlock,
       operation.props.filter((prop) => prop !== '_type'),
     ),
-    options: {validateFields: true},
+    options: {
+      removeUnusedMarkDefs: true,
+      validateFields: true,
+    },
   })
 
   if (!updatedBlockObject) {

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

@@ -24,7 +24,10 @@ export const insertBlockOperationImplementation: BehaviorOperationImplementation
   const parsedBlock = parseBlock({
     block: operation.block,
     context,
-    options: {validateFields: true},
+    options: {
+      removeUnusedMarkDefs: true,
+      validateFields: true,
+    },
   })
 
   if (!parsedBlock) {

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

@@ -0,0 +1,95 @@
+import {isTextBlock} from '@portabletext/schema'
+import {Transforms} from 'slate'
+import {parseInlineObject, parseSpan} from '../internal-utils/parse-blocks'
+import {getFocusBlock, getFocusSpan} from '../internal-utils/slate-utils'
+import {VOID_CHILD_KEY} from '../internal-utils/values'
+import type {BehaviorOperationImplementation} from './behavior.operations'
+
+export const insertChildOperationImplementation: BehaviorOperationImplementation<
+  'insert.child'
+> = ({context, operation}) => {
+  const focus = operation.editor.selection?.focus
+  const focusBlockIndex = focus?.path.at(0)
+  const focusChildIndex = focus?.path.at(1)
+
+  if (focusBlockIndex === undefined || focusChildIndex === undefined) {
+    throw new Error('Unable to insert child without a focus')
+  }
+
+  const [focusBlock, focusBlockPath] = getFocusBlock({editor: operation.editor})
+
+  if (!focus || !focusBlock || !focusBlockPath) {
+    throw new Error('Unable to insert child without a focus block')
+  }
+
+  if (!isTextBlock(context, focusBlock)) {
+    throw new Error('Unable to insert child into a non-text block')
+  }
+
+  const markDefs = focusBlock.markDefs ?? []
+  const markDefKeyMap = new Map<string, string>()
+  for (const markDef of markDefs) {
+    markDefKeyMap.set(markDef._key, markDef._key)
+  }
+
+  const span = parseSpan({
+    span: operation.child,
+    context,
+    markDefKeyMap,
+    options: {validateFields: true},
+  })
+
+  if (span) {
+    const [focusSpan] = getFocusSpan({editor: operation.editor})
+
+    if (focusSpan) {
+      Transforms.insertNodes(operation.editor, span, {
+        at: focus,
+        select: true,
+      })
+    } else {
+      Transforms.insertNodes(operation.editor, span, {
+        at: [focusBlockIndex, focusChildIndex + 1],
+        select: true,
+      })
+    }
+
+    return
+  }
+
+  const inlineObject = parseInlineObject({
+    inlineObject: operation.child,
+    context,
+    options: {validateFields: true},
+  })
+
+  if (inlineObject) {
+    const {_key, _type, ...rest} = inlineObject
+
+    Transforms.insertNodes(
+      operation.editor,
+      {
+        _key,
+        _type,
+        children: [
+          {
+            _key: VOID_CHILD_KEY,
+            _type: 'span',
+            text: '',
+            marks: [],
+          },
+        ],
+        value: rest,
+        __inline: true,
+      },
+      {
+        at: [focusBlockIndex, focusChildIndex + 1],
+        select: true,
+      },
+    )
+
+    return
+  }
+
+  throw new Error('Unable to parse child')
+}

package/src/operations/behavior.operations.ts

@@ -20,6 +20,7 @@ import {childUnsetOperationImplementation} from './behavior.operation.child.unse
 import {decoratorAddOperationImplementation} from './behavior.operation.decorator.add'
 import {deleteOperationImplementation} from './behavior.operation.delete'
 import {insertBlockOperationImplementation} from './behavior.operation.insert.block'
+import {insertChildOperationImplementation} from './behavior.operation.insert.child'
 import {insertTextOperationImplementation} from './behavior.operation.insert.text'
 import {moveBackwardOperationImplementation} from './behavior.operation.move.backward'
 import {moveBlockOperationImplementation} from './behavior.operation.move.block'
@@ -66,6 +67,7 @@ const behaviorOperationImplementations: BehaviorOperationImplementations = {
   'history.redo': historyRedoOperationImplementation,
   'history.undo': historyUndoOperationImplementation,
   'insert.block': insertBlockOperationImplementation,
+  'insert.child': insertChildOperationImplementation,
   'insert.text': insertTextOperationImplementation,
   'move.backward': moveBackwardOperationImplementation,
   'move.block': moveBlockOperationImplementation,
@@ -167,6 +169,13 @@ export function performOperation({
           })
           break
         }
+        case 'insert.child': {
+          behaviorOperationImplementations['insert.child']({
+            context,
+            operation: operation,
+          })
+          break
+        }
         case 'insert.text': {
           behaviorOperationImplementations['insert.text']({
             context,

package/src/selectors/selector.get-trimmed-selection.test.ts

@@ -33,6 +33,7 @@ function snapshot(
           },
           block,
           options: {
+            removeUnusedMarkDefs: true,
             validateFields: false,
           },
         })

package/src/types/block-with-optional-key.ts

@@ -1,4 +1,8 @@
-import type {PortableTextObject, PortableTextTextBlock} from '@sanity/types'
+import type {
+  PortableTextObject,
+  PortableTextSpan,
+  PortableTextTextBlock,
+} from '@portabletext/schema'
 
 export type TextBlockWithOptionalKey = Omit<PortableTextTextBlock, '_key'> & {
   _key?: PortableTextTextBlock['_key']
@@ -11,3 +15,11 @@ export type ObjectBlockWithOptionalKey = Omit<PortableTextObject, '_key'> & {
 export type BlockWithOptionalKey =
   | TextBlockWithOptionalKey
   | ObjectBlockWithOptionalKey
+
+export type SpanWithOptionalKey = Omit<PortableTextSpan, '_key'> & {
+  _key?: PortableTextSpan['_key']
+}
+
+export type ChildWithOptionalKey =
+  | SpanWithOptionalKey
+  | ObjectBlockWithOptionalKey

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

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

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

@@ -171,7 +171,7 @@ export function sliceBlocks({
             keyGenerator: defaultKeyGenerator,
           },
           block,
-          options: {validateFields: false},
+          options: {removeUnusedMarkDefs: true, validateFields: false},
         }) ?? block,
       )
     }
@@ -184,7 +184,7 @@ export function sliceBlocks({
           keyGenerator: defaultKeyGenerator,
         },
         block: startBlock,
-        options: {validateFields: false},
+        options: {removeUnusedMarkDefs: true, validateFields: false},
       })
     : undefined
 
@@ -195,7 +195,7 @@ export function sliceBlocks({
           keyGenerator: defaultKeyGenerator,
         },
         block: endBlock,
-        options: {validateFields: false},
+        options: {removeUnusedMarkDefs: true, validateFields: false},
       })
     : undefined
 

package/src/utils/util.slice-text-block.test.ts

@@ -107,7 +107,7 @@ describe(sliceTextBlock.name, () => {
     })
   })
 
-  test('multiple children', () => {
+  describe('multiple children', () => {
     const fooSpan = createSpan({
       text: 'foo',
       marks: ['strong'],
@@ -127,36 +127,62 @@ describe(sliceTextBlock.name, () => {
       children: [fooSpan, barSpan, stockTicker, bazSpan],
     })
 
-    expect(
-      sliceTextBlock({
-        context: {
-          schema,
-          selection: {
-            anchor: {
-              path: [{_key: block._key}, 'children', {_key: barSpan._key}],
-              offset: 1,
+    test('mid-span', () => {
+      expect(
+        sliceTextBlock({
+          context: {
+            schema,
+            selection: {
+              anchor: {
+                path: [{_key: block._key}, 'children', {_key: barSpan._key}],
+                offset: 1,
+              },
+              focus: {
+                path: [{_key: block._key}, 'children', {_key: bazSpan._key}],
+                offset: 1,
+              },
             },
-            focus: {
-              path: [{_key: block._key}, 'children', {_key: bazSpan._key}],
-              offset: 1,
+          },
+          block,
+        }),
+      ).toEqual({
+        ...block,
+        children: [
+          {
+            ...barSpan,
+            text: 'ar',
+          },
+          stockTicker,
+          {
+            ...bazSpan,
+            text: 'b',
+          },
+        ],
+      })
+    })
+
+    test('from end of span to end of block', () => {
+      expect(
+        sliceTextBlock({
+          context: {
+            schema,
+            selection: {
+              anchor: {
+                path: [{_key: block._key}, 'children', {_key: fooSpan._key}],
+                offset: 3,
+              },
+              focus: {
+                path: [{_key: block._key}, 'children', {_key: bazSpan._key}],
+                offset: 3,
+              },
             },
           },
-        },
-        block,
-      }),
-    ).toEqual({
-      ...block,
-      children: [
-        {
-          ...barSpan,
-          text: 'ar',
-        },
-        stockTicker,
-        {
-          ...bazSpan,
-          text: 'b',
-        },
-      ],
+          block,
+        }),
+      ).toEqual({
+        ...block,
+        children: [{...fooSpan, text: ''}, barSpan, stockTicker, bazSpan],
+      })
     })
   })
 })

package/src/plugins/plugin.internal.editor-actor-ref.tsx

@@ -1,15 +0,0 @@
-import React, {useContext} from 'react'
-import {EditorActorContext} from '../editor/editor-actor-context'
-import type {EditorActor} from '../editor/editor-machine'
-
-export const InternalEditorAfterRefPlugin =
-  React.forwardRef<EditorActor | null>((_, ref) => {
-    const editorActor = useContext(EditorActorContext)
-
-    const editorActorRef = React.useRef(editorActor)
-
-    React.useImperativeHandle(ref, () => editorActorRef.current, [])
-
-    return null
-  })
-InternalEditorAfterRefPlugin.displayName = 'InternalEditorAfterRefPlugin'