@portabletext/editor 1.31.2 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.31.2",
+  "version": "1.32.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/behavior-actions/behavior.actions.ts

@@ -21,6 +21,10 @@ import {
   removeDecoratorActionImplementation,
   toggleDecoratorActionImplementation,
 } from '../editor/plugins/createWithPortableTextMarkModel'
+import {
+  historyRedoActionImplementation,
+  historyUndoActionImplementation,
+} from '../editor/plugins/createWithUndoRedo'
 import {toSlatePath} from '../internal-utils/paths'
 import {toSlateRange} from '../internal-utils/ranges'
 import {fromSlateValue, toSlateValue} from '../internal-utils/values'
@@ -168,6 +172,8 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       },
     })
   },
+  'history.redo': historyRedoActionImplementation,
+  'history.undo': historyUndoActionImplementation,
   'insert.block': insertBlockActionImplementation,
   'insert.blocks': insertBlocksActionImplementation,
   'insert.block object': insertBlockObjectActionImplementation,
@@ -470,6 +476,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'history.redo': {
+      behaviorActionImplementations['history.redo']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'history.undo': {
+      behaviorActionImplementations['history.undo']({
+        context,
+        action,
+      })
+      break
+    }
     case 'insert.block': {
       behaviorActionImplementations['insert.block']({
         context,

package/src/behaviors/behavior.types.ts

@@ -90,6 +90,12 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'focus'
     }
+  | {
+      type: 'history.redo'
+    }
+  | {
+      type: 'history.undo'
+    }
   | {
       type: 'insert.blocks'
       blocks: Array<PortableTextBlock>

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) {