@portabletext/editor 1.1.10 → 1.1.11

package/src/editor/editor-machine.ts

@@ -1,6 +1,7 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import type {FocusEvent} from 'react'
+import {Editor} from 'slate'
 import {
   assertEvent,
   assign,
@@ -19,10 +20,14 @@ import type {
 import {toPortableTextRange} from '../utils/ranges'
 import {fromSlateValue} from '../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
-import {behaviorActionImplementations} from './behavior/behavior.actions'
+import {
+  behaviorActionImplementations,
+  performDefaultAction,
+} from './behavior/behavior.actions'
 import type {
   Behavior,
   BehaviorAction,
+  BehaviorActionIntend,
   BehaviorContext,
   BehaviorEvent,
 } from './behavior/behavior.types'
@@ -71,7 +76,11 @@ type EditorEvent =
       behaviorEvent: BehaviorEvent
       editor: PortableTextSlateEditor
     }
-  | BehaviorAction
+  | {
+      type: 'behavior action intends'
+      editor: PortableTextSlateEditor
+      actionIntends: Array<BehaviorActionIntend>
+    }
   | {
       type: 'update schema'
       schema: PortableTextMemberSchemaTypes
@@ -160,12 +169,17 @@ export const editorMachine = setup({
     'handle behavior event': enqueueActions(({context, event, enqueue}) => {
       assertEvent(event, ['behavior event'])
 
+      const defaultAction = {
+        ...event.behaviorEvent,
+        editor: event.editor,
+      } satisfies BehaviorAction
+
       const eventBehaviors = context.behaviors.filter(
         (behavior) => behavior.on === event.behaviorEvent.type,
       )
 
       if (eventBehaviors.length === 0) {
-        event.behaviorEvent.default()
+        performDefaultAction({context, action: defaultAction})
         return
       }
 
@@ -184,7 +198,7 @@ export const editorMachine = setup({
         console.warn(
           `Unable to handle event ${event.type} due to missing selection`,
         )
-        event.behaviorEvent.default()
+        performDefaultAction({context, action: defaultAction})
         return
       }
 
@@ -207,29 +221,28 @@ export const editorMachine = setup({
           continue
         }
 
-        const actions = eventBehavior.actions.map((action) =>
-          action(
+        const actionIntendSets = eventBehavior.actions.map((actionSet) =>
+          actionSet(
             {context: behaviorContext, event: event.behaviorEvent},
             shouldRun,
           ),
         )
 
-        for (const action of actions) {
-          if (typeof action !== 'object') {
-            continue
-          }
-
-          behaviorOverwritten = true
+        for (const actionIntends of actionIntendSets) {
+          behaviorOverwritten =
+            actionIntends.length > 0 &&
+            actionIntends.some((actionIntend) => actionIntend.type !== 'effect')
 
           enqueue.raise({
-            ...action,
+            type: 'behavior action intends',
             editor: event.editor,
+            actionIntends,
           })
         }
       }
 
       if (!behaviorOverwritten) {
-        event.behaviorEvent.default()
+        performDefaultAction({context, action: defaultAction})
       }
     }),
   },
@@ -263,26 +276,85 @@ export const editorMachine = setup({
     'done loading': {actions: emit({type: 'done loading'})},
     'update schema': {actions: 'assign schema'},
     'behavior event': {actions: 'handle behavior event'},
-    'apply block style': {
-      actions: [behaviorActionImplementations['apply block style']],
-    },
-    'delete backward': {
-      actions: [behaviorActionImplementations['delete backward']],
-    },
-    'delete text': {
-      actions: [behaviorActionImplementations['delete text']],
-    },
-    'insert break': {
-      actions: [behaviorActionImplementations['insert break']],
-    },
-    'insert soft break': {
-      actions: [behaviorActionImplementations['insert soft break']],
-    },
-    'insert text': {
-      actions: [behaviorActionImplementations['insert text']],
-    },
-    'insert text block': {
-      actions: [behaviorActionImplementations['insert text block']],
+    'behavior action intends': {
+      actions: [
+        ({context, event}) => {
+          Editor.withoutNormalizing(event.editor, () => {
+            for (const actionIntend of event.actionIntends) {
+              const action = {
+                ...actionIntend,
+                editor: event.editor,
+              }
+
+              switch (action.type) {
+                case 'delete backward': {
+                  behaviorActionImplementations['delete backward']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'delete text': {
+                  behaviorActionImplementations['delete text']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'insert break': {
+                  behaviorActionImplementations['insert break']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'insert soft break': {
+                  behaviorActionImplementations['insert soft break']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'insert text': {
+                  behaviorActionImplementations['insert text']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'insert text block': {
+                  behaviorActionImplementations['insert text block']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'set block': {
+                  behaviorActionImplementations['set block']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                case 'unset block': {
+                  behaviorActionImplementations['unset block']({
+                    context,
+                    action,
+                  })
+                  break
+                }
+                default: {
+                  behaviorActionImplementations.effect({
+                    context,
+                    action,
+                  })
+                }
+              }
+            }
+          })
+          event.editor.onChange()
+        },
+      ],
     },
   },
   initial: 'pristine',

package/src/editor/plugins/create-with-event-listeners.ts

@@ -3,15 +3,12 @@ import type {EditorActor} from '../editor-machine'
 
 export function createWithEventListeners(editorActor: EditorActor) {
   return function withEventListeners(editor: Editor) {
-    const {deleteBackward, insertBreak, insertSoftBreak, insertText} = editor
-
     editor.deleteBackward = (unit) => {
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
           type: 'delete backward',
           unit,
-          default: () => deleteBackward(unit),
         },
         editor,
       })
@@ -23,7 +20,6 @@ export function createWithEventListeners(editorActor: EditorActor) {
         type: 'behavior event',
         behaviorEvent: {
           type: 'insert break',
-          default: insertBreak,
         },
         editor,
       })
@@ -35,7 +31,6 @@ export function createWithEventListeners(editorActor: EditorActor) {
         type: 'behavior event',
         behaviorEvent: {
           type: 'insert soft break',
-          default: insertSoftBreak,
         },
         editor,
       })
@@ -48,7 +43,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
         behaviorEvent: {
           type: 'insert text',
           text,
-          default: () => insertText(text, options),
+          options,
         },
         editor,
       })

package/src/editor/plugins/index.ts

@@ -5,7 +5,6 @@ import type {createEditorOptions} from '../../types/options'
 import {createOperationToPatches} from '../../utils/operationToPatches'
 import {createWithEventListeners} from './create-with-event-listeners'
 import {createWithEditableAPI} from './createWithEditableAPI'
-import {createWithInsertBreak} from './createWithInsertBreak'
 import {createWithMaxBlocks} from './createWithMaxBlocks'
 import {createWithObjectKeys} from './createWithObjectKeys'
 import {createWithPatches} from './createWithPatches'
@@ -99,8 +98,6 @@ export const withPlugins = <T extends Editor>(
 
   const withPlaceholderBlock = createWithPlaceholderBlock()
 
-  const withInsertBreak = createWithInsertBreak(editorActor, schemaTypes)
-
   const withUtils = createWithUtils({
     editorActor,
     schemaTypes,
@@ -131,9 +128,7 @@ export const withPlugins = <T extends Editor>(
               withUtils(
                 withPlaceholderBlock(
                   withPortableTextLists(
-                    withPortableTextSelections(
-                      withEditableAPI(withInsertBreak(e)),
-                    ),
+                    withPortableTextSelections(withEditableAPI(e)),
                   ),
                 ),
               ),
@@ -158,9 +153,7 @@ export const withPlugins = <T extends Editor>(
                     withMaxBlocks(
                       withUndoRedo(
                         withPatches(
-                          withPortableTextSelections(
-                            withEditableAPI(withInsertBreak(e)),
-                          ),
+                          withPortableTextSelections(withEditableAPI(e)),
                         ),
                       ),
                     ),

package/src/index.ts

@@ -5,8 +5,8 @@ export type {
   BehaviorContext,
   BehaviorEvent,
   BehaviorGuard,
-  RaiseBehaviorActionIntend,
   PickFromUnion,
+  BehaviorActionIntendSet,
 } from './editor/behavior/behavior.types'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'

package/src/editor/plugins/createWithInsertBreak.ts

@@ -1,224 +0,0 @@
-import {isEqual} from 'lodash'
-import {Editor, Node, Path, Range, Transforms} from 'slate'
-import type {
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
-import type {SlateTextBlock, VoidElement} from '../../types/slate'
-import type {EditorActor} from '../editor-machine'
-
-export function createWithInsertBreak(
-  editorActor: EditorActor,
-  types: PortableTextMemberSchemaTypes,
-): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  return function withInsertBreak(
-    editor: PortableTextSlateEditor,
-  ): PortableTextSlateEditor {
-    const {insertBreak} = editor
-
-    editor.insertBreak = () => {
-      if (!editor.selection) {
-        insertBreak()
-        return
-      }
-
-      const [focusSpan] = Array.from(
-        Editor.nodes(editor, {
-          mode: 'lowest',
-          at: editor.selection.focus,
-          match: (n) => editor.isTextSpan(n),
-          voids: false,
-        }),
-      )[0] ?? [undefined]
-      const focusDecorators =
-        focusSpan.marks?.filter((mark) =>
-          types.decorators.some((decorator) => decorator.value === mark),
-        ) ?? []
-      const focusAnnotations =
-        focusSpan.marks?.filter(
-          (mark) =>
-            !types.decorators.some((decorator) => decorator.value === mark),
-        ) ?? []
-
-      const focusBlockPath = editor.selection.focus.path.slice(0, 1)
-      const focusBlock = Node.descendant(editor, focusBlockPath) as
-        | SlateTextBlock
-        | VoidElement
-
-      if (editor.isTextBlock(focusBlock)) {
-        const [start, end] = Range.edges(editor.selection)
-        const atTheStartOfBlock = isEqual(end, {
-          path: [...focusBlockPath, 0],
-          offset: 0,
-        })
-
-        if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
-          Editor.insertNode(
-            editor,
-            editor.pteCreateTextBlock({
-              decorators: focusAnnotations.length === 0 ? focusDecorators : [],
-              listItem: focusBlock.listItem,
-              level: focusBlock.level,
-            }),
-          )
-
-          const [nextBlockPath] = Path.next(focusBlockPath)
-
-          Transforms.select(editor, {
-            anchor: {path: [nextBlockPath, 0], offset: 0},
-            focus: {path: [nextBlockPath, 0], offset: 0},
-          })
-
-          return
-        }
-
-        const lastFocusBlockChild =
-          focusBlock.children[focusBlock.children.length - 1]
-        const atTheEndOfBlock = isEqual(start, {
-          path: [...focusBlockPath, focusBlock.children.length - 1],
-          offset: editor.isTextSpan(lastFocusBlockChild)
-            ? lastFocusBlockChild.text.length
-            : 0,
-        })
-
-        if (atTheEndOfBlock && Range.isCollapsed(editor.selection)) {
-          Editor.insertNode(
-            editor,
-            editor.pteCreateTextBlock({
-              decorators: [],
-              listItem: focusBlock.listItem,
-              level: focusBlock.level,
-            }),
-          )
-
-          const [nextBlockPath] = Path.next(focusBlockPath)
-
-          Transforms.setSelection(editor, {
-            anchor: {path: [nextBlockPath, 0], offset: 0},
-            focus: {path: [nextBlockPath, 0], offset: 0},
-          })
-
-          return
-        }
-
-        const isInTheMiddleOfNode = !atTheStartOfBlock && !atTheEndOfBlock
-
-        if (isInTheMiddleOfNode) {
-          Editor.withoutNormalizing(editor, () => {
-            if (!editor.selection) {
-              return
-            }
-
-            Transforms.splitNodes(editor, {
-              at: editor.selection,
-            })
-
-            const [nextNode, nextNodePath] = Editor.node(
-              editor,
-              Path.next(focusBlockPath),
-              {depth: 1},
-            )
-
-            Transforms.setSelection(editor, {
-              anchor: {path: [...nextNodePath, 0], offset: 0},
-              focus: {path: [...nextNodePath, 0], offset: 0},
-            })
-
-            /**
-             * Assign new keys to markDefs that are now split across two blocks
-             */
-            if (
-              editor.isTextBlock(nextNode) &&
-              nextNode.markDefs &&
-              nextNode.markDefs.length > 0
-            ) {
-              const newMarkDefKeys = new Map<string, string>()
-
-              const prevNodeSpans = Array.from(
-                Node.children(editor, focusBlockPath),
-              )
-                .map((entry) => entry[0])
-                .filter((node) => editor.isTextSpan(node))
-              const children = Node.children(editor, nextNodePath)
-
-              for (const [child, childPath] of children) {
-                if (!editor.isTextSpan(child)) {
-                  continue
-                }
-
-                const marks = child.marks ?? []
-
-                // Go through the marks of the span and figure out if any of
-                // them refer to annotations that are also present in the
-                // previous block
-                for (const mark of marks) {
-                  if (
-                    types.decorators.some(
-                      (decorator) => decorator.value === mark,
-                    )
-                  ) {
-                    continue
-                  }
-
-                  if (
-                    prevNodeSpans.some((prevNodeSpan) =>
-                      prevNodeSpan.marks?.includes(mark),
-                    ) &&
-                    !newMarkDefKeys.has(mark)
-                  ) {
-                    // This annotation is both present in the previous block
-                    // and this block, so let's assign a new key to it
-                    newMarkDefKeys.set(
-                      mark,
-                      editorActor.getSnapshot().context.keyGenerator(),
-                    )
-                  }
-                }
-
-                const newMarks = marks.map(
-                  (mark) => newMarkDefKeys.get(mark) ?? mark,
-                )
-
-                // No need to update the marks if they are the same
-                if (!isEqual(marks, newMarks)) {
-                  Transforms.setNodes(
-                    editor,
-                    {marks: newMarks},
-                    {
-                      at: childPath,
-                    },
-                  )
-                }
-              }
-
-              // Time to update all the markDefs that need a new key because
-              // they've been split across blocks
-              const newMarkDefs = nextNode.markDefs.map((markDef) => ({
-                ...markDef,
-                _key: newMarkDefKeys.get(markDef._key) ?? markDef._key,
-              }))
-
-              // No need to update the markDefs if they are the same
-              if (!isEqual(nextNode.markDefs, newMarkDefs)) {
-                Transforms.setNodes(
-                  editor,
-                  {markDefs: newMarkDefs},
-                  {
-                    at: nextNodePath,
-                    match: (node) => editor.isTextBlock(node),
-                  },
-                )
-              }
-            }
-          })
-          editor.onChange()
-          return
-        }
-      }
-
-      insertBreak()
-    }
-
-    return editor
-  }
-}