fix(editor): guard against apply side effects when processing remote …

…changes
portabletext · Aug 16, 2024 · aa4fbed · aa4fbed
1 parent 5302b4e
commit aa4fbed
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git a/packages/editor/src/editor/plugins/createWithMaxBlocks.ts b/packages/editor/src/editor/plugins/createWithMaxBlocks.ts
@@ -1,4 +1,5 @@
 import {type PortableTextSlateEditor} from '../../types/editor'
+import {isChangingRemotely} from '../../utils/withChanges'
 
 /**
  * This plugin makes sure that the PTE maxBlocks prop is respected
@@ -8,6 +9,15 @@ export function createWithMaxBlocks(maxBlocks: number) {
   return function withMaxBlocks(editor: PortableTextSlateEditor): PortableTextSlateEditor {
     const {apply} = editor
     editor.apply = (operation) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(operation)
+        return
+      }
+
       const rows = maxBlocks
       if (rows > 0 && editor.children.length >= rows) {
         if (

diff --git a/packages/editor/src/editor/plugins/createWithObjectKeys.ts b/packages/editor/src/editor/plugins/createWithObjectKeys.ts
@@ -1,6 +1,7 @@
 import {Editor, Element, Node, Transforms} from 'slate'
 
 import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
+import {isChangingRemotely} from '../../utils/withChanges'
 import {isPreservingKeys, PRESERVE_KEYS} from '../../utils/withPreserveKeys'
 
 /**
@@ -21,6 +22,15 @@ export function createWithObjectKeys(
     // For example, when undoing and redoing we want to retain the keys, but
     // when we create a new bold span by splitting a non-bold-span we want the produced node to get a new key.
     editor.apply = (operation) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(operation)
+        return
+      }
+
       if (operation.type === 'split_node') {
         const withNewKey = !isPreservingKeys(editor) || !('_key' in operation.properties)
 

diff --git a/packages/editor/src/editor/plugins/createWithPlaceholderBlock.ts b/packages/editor/src/editor/plugins/createWithPlaceholderBlock.ts
@@ -3,6 +3,7 @@ import {Editor, Path} from 'slate'
 import {type PortableTextSlateEditor} from '../../types/editor'
 import {type SlateTextBlock, type VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
+import {isChangingRemotely} from '../../utils/withChanges'
 
 const debug = debugWithName('plugin:withPlaceholderBlock')
 
@@ -17,6 +18,15 @@ export function createWithPlaceholderBlock(): (
     const {apply} = editor
 
     editor.apply = (op) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(op)
+        return
+      }
+
       if (op.type === 'remove_node') {
         const node = op.node as SlateTextBlock | VoidElement
         if (op.path[0] === 0 && Editor.isVoid(editor, node)) {

diff --git a/packages/editor/src/editor/plugins/createWithPortableTextMarkModel.ts b/packages/editor/src/editor/plugins/createWithPortableTextMarkModel.ts
@@ -19,6 +19,7 @@ import {
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange} from '../../utils/ranges'
 import {EMPTY_MARKS} from '../../utils/values'
+import {isChangingRemotely} from '../../utils/withChanges'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
 
@@ -233,6 +234,15 @@ export function createWithPortableTextMarkModel(
     }
 
     editor.apply = (op) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(op)
+        return
+      }
+
       // Special hook before inserting text at the end of an annotation.
       if (op.type === 'insert_text') {
         const {selection} = editor