@portabletext/editor 2.9.1 → 2.10.0

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

@@ -1,3 +1,4 @@
+import {Editor} from 'slate'
 import type {
   AbstractBehaviorEventType,
   SyntheticBehaviorEvent,
@@ -19,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'
@@ -65,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,
@@ -79,133 +82,142 @@ export function performOperation({
   context: BehaviorOperationImplementationContext
   operation: BehaviorOperation
 }) {
-  try {
-    switch (operation.type) {
-      case 'annotation.add': {
-        behaviorOperationImplementations['annotation.add']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'annotation.remove': {
-        behaviorOperationImplementations['annotation.remove']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'block.set': {
-        behaviorOperationImplementations['block.set']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'block.unset': {
-        behaviorOperationImplementations['block.unset']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'child.set': {
-        behaviorOperationImplementations['child.set']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'child.unset': {
-        behaviorOperationImplementations['child.unset']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'decorator.add': {
-        behaviorOperationImplementations['decorator.add']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'decorator.remove': {
-        behaviorOperationImplementations['decorator.remove']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'delete': {
-        behaviorOperationImplementations.delete({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'history.redo': {
-        behaviorOperationImplementations['history.redo']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'history.undo': {
-        behaviorOperationImplementations['history.undo']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'insert.block': {
-        behaviorOperationImplementations['insert.block']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'insert.text': {
-        behaviorOperationImplementations['insert.text']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'move.backward': {
-        behaviorOperationImplementations['move.backward']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'move.block': {
-        behaviorOperationImplementations['move.block']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'move.forward': {
-        behaviorOperationImplementations['move.forward']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      default: {
-        behaviorOperationImplementations.select({
-          context,
-          operation: operation,
-        })
-        break
-      }
+  Editor.withoutNormalizing(operation.editor, () => {
+    try {
+      switch (operation.type) {
+        case 'annotation.add': {
+          behaviorOperationImplementations['annotation.add']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'annotation.remove': {
+          behaviorOperationImplementations['annotation.remove']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'block.set': {
+          behaviorOperationImplementations['block.set']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'block.unset': {
+          behaviorOperationImplementations['block.unset']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'child.set': {
+          behaviorOperationImplementations['child.set']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'child.unset': {
+          behaviorOperationImplementations['child.unset']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'decorator.add': {
+          behaviorOperationImplementations['decorator.add']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'decorator.remove': {
+          behaviorOperationImplementations['decorator.remove']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'delete': {
+          behaviorOperationImplementations.delete({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'history.redo': {
+          behaviorOperationImplementations['history.redo']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'history.undo': {
+          behaviorOperationImplementations['history.undo']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'insert.block': {
+          behaviorOperationImplementations['insert.block']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'insert.child': {
+          behaviorOperationImplementations['insert.child']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'insert.text': {
+          behaviorOperationImplementations['insert.text']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'move.backward': {
+          behaviorOperationImplementations['move.backward']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'move.block': {
+          behaviorOperationImplementations['move.block']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        case 'move.forward': {
+          behaviorOperationImplementations['move.forward']({
+            context,
+            operation: operation,
+          })
+          break
+        }
+        default: {
+          behaviorOperationImplementations.select({
+            context,
+            operation: operation,
+          })
+          break
+        }
+      }
+    } catch (error) {
+      console.error(
+        new Error(
+          `Executing "${operation.type}" failed due to: ${error.message}`,
+        ),
+      )
     }
-  } catch (error) {
-    console.error(
-      new Error(
-        `Executing "${operation.type}" failed due to: ${error.message}`,
-      ),
-    )
-  }
+  })
 }

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

@@ -6,10 +6,16 @@ import {getNextSpan} from './selector.get-next-span'
 import {getPreviousSpan} from './selector.get-previous-span'
 import {getSelectedSpans} from './selector.get-selected-spans'
 
-export type MarkState = {
-  state: 'changed' | 'unchanged'
-  marks: Array<string>
-}
+export type MarkState =
+  | {
+      state: 'unchanged'
+      marks: Array<string>
+    }
+  | {
+      state: 'changed'
+      marks: Array<string>
+      previousMarks: Array<string>
+    }
 
 /**
  * Given that text is inserted at the current position, what marks should
@@ -106,21 +112,25 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
       if (previousSpanHasSameMarks) {
         return {
           state: 'changed',
+          previousMarks: marks,
           marks: previousSpan?.node.marks ?? [],
         }
       } else if (previousSpanHasSameAnnotations) {
         return {
           state: 'changed',
+          previousMarks: marks,
           marks: previousSpan?.node.marks ?? [],
         }
       } else if (previousSpanHasSameAnnotation) {
         return {
           state: 'unchanged',
+          previousMarks: marks,
           marks: focusSpan.node.marks ?? [],
         }
       } else if (!previousSpan) {
         return {
           state: 'changed',
+          previousMarks: marks,
           marks: [],
         }
       }
@@ -135,6 +145,7 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
       ) {
         return {
           state: 'changed',
+          previousMarks: marks,
           marks: nextSpan?.node.marks ?? [],
         }
       }
@@ -142,6 +153,7 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
       if (!nextSpan) {
         return {
           state: 'changed',
+          previousMarks: marks,
           marks: [],
         }
       }
@@ -152,11 +164,13 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
     if (previousSpanHasAnnotations) {
       return {
         state: 'changed',
+        previousMarks: marks,
         marks: [],
       }
     } else {
       return {
         state: 'changed',
+        previousMarks: marks,
         marks: (previousSpan?.node.marks ?? []).filter((mark) =>
           decorators.includes(mark),
         ),
@@ -166,6 +180,6 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
 
   return {
     state: 'unchanged',
-    marks: focusSpan.node.marks ?? [],
+    marks,
   }
 }

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/editor/with-applying-behavior-operations.ts

@@ -1,18 +0,0 @@
-import {Editor} from 'slate'
-import {defaultKeyGenerator} from './key-generator'
-
-const CURRENT_OPERATION_ID: WeakMap<Editor, string | undefined> = new WeakMap()
-
-export function withApplyingBehaviorOperations(editor: Editor, fn: () => void) {
-  CURRENT_OPERATION_ID.set(editor, defaultKeyGenerator())
-  Editor.withoutNormalizing(editor, fn)
-  CURRENT_OPERATION_ID.set(editor, undefined)
-}
-
-export function getCurrentOperationId(editor: Editor) {
-  return CURRENT_OPERATION_ID.get(editor)
-}
-
-export function isApplyingBehaviorOperations(editor: Editor) {
-  return getCurrentOperationId(editor) !== undefined
-}