@portabletext/editor 1.31.2 → 1.33.0

package/src/editor/editor-machine.ts

@@ -1,7 +1,6 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import type {FocusEvent} from 'react'
-import {Editor} from 'slate'
 import {
   assertEvent,
   assign,
@@ -30,7 +29,10 @@ import type {
 } from '../types/editor'
 import type {EditorSchema} from './define-schema'
 import {createEditorSnapshot} from './editor-snapshot'
-import {withApplyingBehaviorActions} from './with-applying-behavior-actions'
+import {
+  withApplyingBehaviorActionIntendSet,
+  withApplyingBehaviorActions,
+} from './with-applying-behavior-actions'
 
 export * from 'xstate/guards'
 
@@ -315,17 +317,15 @@ export const editorMachine = setup({
       if (eventBehaviors.length === 0) {
         if (defaultActionCallback) {
           withApplyingBehaviorActions(event.editor, () => {
-            Editor.withoutNormalizing(event.editor, () => {
-              try {
-                defaultActionCallback()
-              } catch (error) {
-                console.error(
-                  new Error(
-                    `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                  ),
-                )
-              }
-            })
+            try {
+              defaultActionCallback()
+            } catch (error) {
+              console.error(
+                new Error(
+                  `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                ),
+              )
+            }
           })
           return
         }
@@ -335,20 +335,18 @@ export const editorMachine = setup({
         }
 
         withApplyingBehaviorActions(event.editor, () => {
-          Editor.withoutNormalizing(event.editor, () => {
-            try {
-              performAction({
-                context,
-                action: defaultAction,
-              })
-            } catch (error) {
-              console.error(
-                new Error(
-                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                ),
-              )
-            }
-          })
+          try {
+            performAction({
+              context,
+              action: defaultAction,
+            })
+          } catch (error) {
+            console.error(
+              new Error(
+                `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+              ),
+            )
+          }
         })
         event.editor.onChange()
         return
@@ -390,43 +388,41 @@ export const editorMachine = setup({
                 (actionIntend) => actionIntend.type !== 'effect',
               ))
 
-          withApplyingBehaviorActions(event.editor, () => {
-            Editor.withoutNormalizing(event.editor, () => {
-              for (const actionIntend of actionIntends) {
-                if (actionIntend.type === 'raise') {
-                  if (isCustomBehaviorEvent(actionIntend.event)) {
-                    enqueue.raise({
-                      type: 'custom behavior event',
-                      behaviorEvent: actionIntend.event as CustomBehaviorEvent,
-                      editor: event.editor,
-                    })
-                  } else {
-                    enqueue.raise({
-                      type: 'behavior event',
-                      behaviorEvent: actionIntend.event,
-                      editor: event.editor,
-                    })
-                  }
-                  continue
+          withApplyingBehaviorActionIntendSet(event.editor, () => {
+            for (const actionIntend of actionIntends) {
+              if (actionIntend.type === 'raise') {
+                if (isCustomBehaviorEvent(actionIntend.event)) {
+                  enqueue.raise({
+                    type: 'custom behavior event',
+                    behaviorEvent: actionIntend.event as CustomBehaviorEvent,
+                    editor: event.editor,
+                  })
+                } else {
+                  enqueue.raise({
+                    type: 'behavior event',
+                    behaviorEvent: actionIntend.event,
+                    editor: event.editor,
+                  })
                 }
+                continue
+              }
 
-                const action = {
-                  ...actionIntend,
-                  editor: event.editor,
-                }
+              const action = {
+                ...actionIntend,
+                editor: event.editor,
+              }
 
-                try {
-                  performAction({context, action})
-                } catch (error) {
-                  console.error(
-                    new Error(
-                      `Performing action "${action.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                    ),
-                  )
-                  break
-                }
+              try {
+                performAction({context, action})
+              } catch (error) {
+                console.error(
+                  new Error(
+                    `Performing action "${action.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  ),
+                )
+                break
               }
-            })
+            }
           })
           event.editor.onChange()
         }
@@ -440,17 +436,15 @@ export const editorMachine = setup({
       if (!behaviorOverwritten) {
         if (defaultActionCallback) {
           withApplyingBehaviorActions(event.editor, () => {
-            Editor.withoutNormalizing(event.editor, () => {
-              try {
-                defaultActionCallback()
-              } catch (error) {
-                console.error(
-                  new Error(
-                    `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                  ),
-                )
-              }
-            })
+            try {
+              defaultActionCallback()
+            } catch (error) {
+              console.error(
+                new Error(
+                  `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                ),
+              )
+            }
           })
           return
         }
@@ -460,20 +454,18 @@ export const editorMachine = setup({
         }
 
         withApplyingBehaviorActions(event.editor, () => {
-          Editor.withoutNormalizing(event.editor, () => {
-            try {
-              performAction({
-                context,
-                action: defaultAction,
-              })
-            } catch (error) {
-              console.error(
-                new Error(
-                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                ),
-              )
-            }
-          })
+          try {
+            performAction({
+              context,
+              action: defaultAction,
+            })
+          } catch (error) {
+            console.error(
+              new Error(
+                `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+              ),
+            )
+          }
         })
         event.editor.onChange()
       }
@@ -610,6 +602,9 @@ export const editorMachine = setup({
             'focus': {
               actions: emit(({event}) => event),
             },
+            'history.*': {
+              actions: emit(({event}) => event),
+            },
             'insert.*': {
               actions: emit(({event}) => event),
             },

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

@@ -1,5 +1,6 @@
 import {Editor} from 'slate'
 import {insertSoftBreakActionImplementation} from '../../behavior-actions/behavior.action.insert-break'
+import {performAction} from '../../behavior-actions/behavior.actions'
 import {toPortableTextRange} from '../../internal-utils/ranges'
 import {fromSlateValue} from '../../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../../internal-utils/weakMaps'
@@ -179,6 +180,31 @@ export function createWithEventListeners(
       return
     }
 
+    editor.redo = () => {
+      if (isApplyingBehaviorActions(editor)) {
+        performAction({
+          context: {
+            keyGenerator: editorActor.getSnapshot().context.keyGenerator,
+            schema: editorActor.getSnapshot().context.schema,
+          },
+          action: {
+            type: 'history.redo',
+            editor,
+          },
+        })
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'history.redo',
+        },
+        editor,
+      })
+      return
+    }
+
     editor.select = (location) => {
       if (isApplyingBehaviorActions(editor)) {
         select(location)
@@ -234,6 +260,31 @@ export function createWithEventListeners(
       return
     }
 
+    editor.undo = () => {
+      if (isApplyingBehaviorActions(editor)) {
+        performAction({
+          context: {
+            keyGenerator: editorActor.getSnapshot().context.keyGenerator,
+            schema: editorActor.getSnapshot().context.schema,
+          },
+          action: {
+            type: 'history.undo',
+            editor,
+          },
+        })
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'history.undo',
+        },
+        editor,
+      })
+      return
+    }
+
     return editor
   }
 }

package/src/editor/plugins/createWithEditableAPI.ts

@@ -111,8 +111,24 @@ export function createEditableAPI(
         }.marks || []
       )
     },
-    undo: (): void => editor.undo(),
-    redo: (): void => editor.redo(),
+    undo: (): void => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'history.undo',
+        },
+        editor,
+      })
+    },
+    redo: (): void => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'history.redo',
+        },
+        editor,
+      })
+    },
     select: (selection: EditorSelection): void => {
       const slateSelection = toSlateRange(selection, editor)
       if (slateSelection) {

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -8,6 +8,7 @@ import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
 import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
+import {decoratorAddActionImplementation} from '../../behavior-actions/behavior.action.decorator.add'
 import type {BehaviorActionImplementation} from '../../behavior-actions/behavior.actions'
 import {debugWithName} from '../../internal-utils/debug'
 import {getNextSpan, getPreviousSpan} from '../../internal-utils/sibling-utils'
@@ -657,102 +658,6 @@ export function createWithPortableTextMarkModel(
   }
 }
 
-export const addDecoratorActionImplementation: BehaviorActionImplementation<
-  'decorator.add'
-> = ({action}) => {
-  const editor = action.editor
-  const mark = action.decorator
-
-  if (editor.selection) {
-    if (Range.isExpanded(editor.selection)) {
-      // Split if needed
-      Transforms.setNodes(
-        editor,
-        {},
-        {match: Text.isText, split: true, hanging: true},
-      )
-      // Use new selection
-      const splitTextNodes = Range.isRange(editor.selection)
-        ? [
-            ...Editor.nodes(editor, {
-              at: editor.selection,
-              match: Text.isText,
-            }),
-          ]
-        : []
-      const shouldRemoveMark =
-        splitTextNodes.length > 1 &&
-        splitTextNodes.every((node) => node[0].marks?.includes(mark))
-
-      if (shouldRemoveMark) {
-        editor.removeMark(mark)
-      } else {
-        splitTextNodes.forEach(([node, path]) => {
-          const marks = [
-            ...(Array.isArray(node.marks) ? node.marks : []).filter(
-              (eMark: string) => eMark !== mark,
-            ),
-            mark,
-          ]
-          Transforms.setNodes(
-            editor,
-            {marks},
-            {at: path, match: Text.isText, split: true, hanging: true},
-          )
-        })
-      }
-    } else {
-      const [block, blockPath] = Editor.node(editor, editor.selection, {
-        depth: 1,
-      })
-      const lonelyEmptySpan =
-        editor.isTextBlock(block) &&
-        block.children.length === 1 &&
-        editor.isTextSpan(block.children[0]) &&
-        block.children[0].text === ''
-          ? block.children[0]
-          : undefined
-
-      if (lonelyEmptySpan) {
-        const existingMarks = lonelyEmptySpan.marks ?? []
-        const existingMarksWithoutDecorator = existingMarks.filter(
-          (existingMark) => existingMark !== mark,
-        )
-
-        Transforms.setNodes(
-          editor,
-          {
-            marks:
-              existingMarks.length === existingMarksWithoutDecorator.length
-                ? [...existingMarks, mark]
-                : existingMarksWithoutDecorator,
-          },
-          {
-            at: blockPath,
-            match: (node) => editor.isTextSpan(node),
-          },
-        )
-      } else {
-        const existingMarks: string[] =
-          {
-            ...(Editor.marks(editor) || {}),
-          }.marks || []
-        const marks = {
-          ...(Editor.marks(editor) || {}),
-          marks: [...existingMarks, mark],
-        }
-        editor.marks = marks as Text
-      }
-    }
-
-    if (editor.selection) {
-      // Reselect
-      const selection = editor.selection
-      editor.selection = {...selection}
-    }
-  }
-}
-
 export const removeDecoratorActionImplementation: BehaviorActionImplementation<
   'decorator.remove'
 > = ({action}) => {
@@ -892,7 +797,7 @@ export const toggleDecoratorActionImplementation: BehaviorActionImplementation<
       },
     })
   } else {
-    addDecoratorActionImplementation({
+    decoratorAddActionImplementation({
       context,
       action: {
         type: 'decorator.add',