@portabletext/editor 1.1.9 → 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,
@@ -14,14 +15,19 @@ import type {
   EditorSelection,
   InvalidValueResolution,
   PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
 } from '../types/editor'
 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'
@@ -65,8 +71,16 @@ export type MutationEvent = {
 type EditorEvent =
   | {type: 'normalizing'}
   | {type: 'done normalizing'}
-  | BehaviorEvent
-  | BehaviorAction
+  | {
+      type: 'behavior event'
+      behaviorEvent: BehaviorEvent
+      editor: PortableTextSlateEditor
+    }
+  | {
+      type: 'behavior action intends'
+      editor: PortableTextSlateEditor
+      actionIntends: Array<BehaviorActionIntend>
+    }
   | {
       type: 'update schema'
       schema: PortableTextMemberSchemaTypes
@@ -153,13 +167,19 @@ export const editorMachine = setup({
       pendingEvents: [],
     }),
     'handle behavior event': enqueueActions(({context, event, enqueue}) => {
-      assertEvent(event, ['key down', 'before insert text'])
+      assertEvent(event, ['behavior event'])
+
+      const defaultAction = {
+        ...event.behaviorEvent,
+        editor: event.editor,
+      } satisfies BehaviorAction
 
       const eventBehaviors = context.behaviors.filter(
-        (behavior) => behavior.on === event.type,
+        (behavior) => behavior.on === event.behaviorEvent.type,
       )
 
       if (eventBehaviors.length === 0) {
+        performDefaultAction({context, action: defaultAction})
         return
       }
 
@@ -178,6 +198,7 @@ export const editorMachine = setup({
         console.warn(
           `Unable to handle event ${event.type} due to missing selection`,
         )
+        performDefaultAction({context, action: defaultAction})
         return
       }
 
@@ -187,32 +208,42 @@ export const editorMachine = setup({
         selection,
       } satisfies BehaviorContext
 
+      let behaviorOverwritten = false
+
       for (const eventBehavior of eventBehaviors) {
         const shouldRun =
           eventBehavior.guard?.({
             context: behaviorContext,
-            event,
+            event: event.behaviorEvent,
           }) ?? true
 
         if (!shouldRun) {
           continue
         }
 
-        const actions = eventBehavior.actions.map((action) =>
-          action({context: behaviorContext, event}, shouldRun),
+        const actionIntendSets = eventBehavior.actions.map((actionSet) =>
+          actionSet(
+            {context: behaviorContext, event: event.behaviorEvent},
+            shouldRun,
+          ),
         )
 
-        for (const action of actions) {
-          if (typeof action !== 'object') {
-            continue
-          }
+        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) {
+        performDefaultAction({context, action: defaultAction})
+      }
     }),
   },
   actors: {
@@ -244,23 +275,86 @@ export const editorMachine = setup({
     'loading': {actions: emit({type: 'loading'})},
     'done loading': {actions: emit({type: 'done loading'})},
     'update schema': {actions: 'assign schema'},
-    'key down': {
-      actions: ['handle behavior event'],
-    },
-    'before insert text': {
-      actions: ['handle behavior event'],
-    },
-    'apply block style': {
-      actions: [behaviorActionImplementations['apply block style']],
-    },
-    'delete text': {
-      actions: [behaviorActionImplementations['delete text']],
-    },
-    'insert text': {
-      actions: [behaviorActionImplementations['insert text']],
-    },
-    'insert text block': {
-      actions: [behaviorActionImplementations['insert text block']],
+    'behavior event': {actions: 'handle behavior event'},
+    '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

@@ -0,0 +1,55 @@
+import type {Editor} from 'slate'
+import type {EditorActor} from '../editor-machine'
+
+export function createWithEventListeners(editorActor: EditorActor) {
+  return function withEventListeners(editor: Editor) {
+    editor.deleteBackward = (unit) => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'delete backward',
+          unit,
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.insertBreak = () => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert break',
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.insertSoftBreak = () => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert soft break',
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.insertText = (text, options) => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert text',
+          text,
+          options,
+        },
+        editor,
+      })
+      return
+    }
+
+    return editor
+  }
+}

package/src/editor/plugins/createWithUtils.ts

@@ -75,13 +75,19 @@ export function createWithUtils({
       }
     }
 
-    editor.pteCreateTextBlock = (options: {decorators: Array<string>}) => {
+    editor.pteCreateTextBlock = (options: {
+      decorators: Array<string>
+      listItem?: string
+      level?: number
+    }) => {
       const block = toSlateValue(
         [
           {
             _type: schemaTypes.block.name,
             _key: editorActor.getSnapshot().context.keyGenerator(),
             style: schemaTypes.styles[0].value || 'normal',
+            ...(options.listItem ? {listItem: options.listItem} : {}),
+            ...(options.level ? {level: options.level} : {}),
             markDefs: [],
             children: [
               {

package/src/editor/plugins/index.ts

@@ -3,8 +3,8 @@ import type {BaseOperation, Editor, Node, NodeEntry} from 'slate'
 import type {PortableTextSlateEditor} from '../../types/editor'
 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'
@@ -98,8 +98,6 @@ export const withPlugins = <T extends Editor>(
 
   const withPlaceholderBlock = createWithPlaceholderBlock()
 
-  const withInsertBreak = createWithInsertBreak(editorActor, schemaTypes)
-
   const withUtils = createWithUtils({
     editorActor,
     schemaTypes,
@@ -109,6 +107,7 @@ export const withPlugins = <T extends Editor>(
     editorActor,
     schemaTypes,
   )
+  const withEventListeners = createWithEventListeners(editorActor)
 
   e.destroy = () => {
     const originalFunctions = originalFnMap.get(e)
@@ -129,9 +128,7 @@ export const withPlugins = <T extends Editor>(
               withUtils(
                 withPlaceholderBlock(
                   withPortableTextLists(
-                    withPortableTextSelections(
-                      withEditableAPI(withInsertBreak(e)),
-                    ),
+                    withPortableTextSelections(withEditableAPI(e)),
                   ),
                 ),
               ),
@@ -145,18 +142,18 @@ export const withPlugins = <T extends Editor>(
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
   return {
-    editor: withSchemaTypes(
-      withObjectKeys(
-        withPortableTextMarkModel(
-          withPortableTextBlockStyle(
-            withPortableTextLists(
-              withPlaceholderBlock(
-                withUtils(
-                  withMaxBlocks(
-                    withUndoRedo(
-                      withPatches(
-                        withPortableTextSelections(
-                          withEditableAPI(withInsertBreak(e)),
+    editor: withEventListeners(
+      withSchemaTypes(
+        withObjectKeys(
+          withPortableTextMarkModel(
+            withPortableTextBlockStyle(
+              withPortableTextLists(
+                withPlaceholderBlock(
+                  withUtils(
+                    withMaxBlocks(
+                      withUndoRedo(
+                        withPatches(
+                          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/types/editor.ts

@@ -222,7 +222,11 @@ export interface PortableTextSlateEditor extends ReactEditor {
   /**
    * Helper function that creates a text block
    */
-  pteCreateTextBlock: (options: {decorators: Array<string>}) => Descendant
+  pteCreateTextBlock: (options: {
+    decorators: Array<string>
+    listItem?: string
+    level?: number
+  }) => Descendant
 
   /**
    * Undo

package/src/editor/plugins/createWithInsertBreak.ts

@@ -1,220 +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 : [],
-            }),
-          )
-
-          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: [],
-            }),
-          )
-
-          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
-  }
-}