@portabletext/editor 1.35.3 → 1.36.0

package/lib/_chunks-cjs/editor-provider.cjs

@@ -1,5 +1,5 @@
 "use strict";
-var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), slateReact = require("slate-react"), react = require("@xstate/react"), debug$e = require("debug"), slate = require("slate"), xstate = require("xstate"), isEqual = require("lodash/isEqual.js"), patches = require("@portabletext/patches"), types = require("@sanity/types"), flatten = require("lodash/flatten.js"), isPlainObject = require("lodash/isPlainObject.js"), uniq = require("lodash/uniq.js"), getRandomValues = require("get-random-values-esm"), util_blockOffsetsToSelection = require("./util.block-offsets-to-selection.cjs"), util_sliceBlocks = require("./util.slice-blocks.cjs"), blockTools = require("@portabletext/block-tools"), toHtml = require("@portabletext/to-html"), schema = require("@sanity/schema"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), selector_isAtTheStartOfBlock = require("./selector.is-at-the-start-of-block.cjs"), selector_isActiveStyle = require("./selector.is-active-style.cjs"), omit = require("lodash/omit.js"), startCase = require("lodash.startcase"), behavior_core = require("./behavior.core.cjs"), rxjs = require("rxjs"), useEffectEvent = require("use-effect-event");
+var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), slateReact = require("slate-react"), react = require("@xstate/react"), debug$e = require("debug"), isEqual = require("lodash/isEqual.js"), slate = require("slate"), xstate = require("xstate"), patches = require("@portabletext/patches"), types = require("@sanity/types"), flatten = require("lodash/flatten.js"), isPlainObject = require("lodash/isPlainObject.js"), uniq = require("lodash/uniq.js"), getRandomValues = require("get-random-values-esm"), util_blockOffsetsToSelection = require("./util.block-offsets-to-selection.cjs"), util_sliceBlocks = require("./util.slice-blocks.cjs"), blockTools = require("@portabletext/block-tools"), toHtml = require("@portabletext/to-html"), schema = require("@sanity/schema"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), selector_isAtTheStartOfBlock = require("./selector.is-at-the-start-of-block.cjs"), selector_isActiveStyle = require("./selector.is-active-style.cjs"), omit = require("lodash/omit.js"), startCase = require("lodash.startcase"), behavior_core = require("./behavior.core.cjs"), rxjs = require("rxjs"), useEffectEvent = require("use-effect-event");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -319,7 +319,7 @@ function compileType(rawType) {
     types: [rawType]
   }).get(rawType.name);
 }
-const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === "test" ? 500 : 1e3, mutationMachine = xstate.setup({
+const mutationMachine = xstate.setup({
   types: {
     context: {},
     events: {},
@@ -330,63 +330,152 @@ const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === "test" ? 500 : 1e3,
     "emit has pending patches": xstate.emit({
       type: "has pending patches"
     }),
-    "emit mutation": xstate.emit(({
-      context
-    }) => ({
-      type: "mutation",
-      patches: context.pendingPatches,
-      snapshot: fromSlateValue(context.slateEditor.children, context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(context.slateEditor))
-    })),
-    "clear pending patches": xstate.assign({
-      pendingPatches: []
+    "emit mutations": xstate.enqueueActions(({
+      context,
+      enqueue
+    }) => {
+      for (const bulk of context.pendingMutations)
+        enqueue.emit({
+          type: "mutation",
+          patches: bulk.patches,
+          snapshot: bulk.value
+        });
+    }),
+    "clear pending mutations": xstate.assign({
+      pendingMutations: []
     }),
     "defer patch": xstate.assign({
-      pendingPatches: ({
+      pendingMutations: ({
         context,
         event
-      }) => [...context.pendingPatches, event.patch]
+      }) => {
+        if (xstate.assertEvent(event, "patch"), context.pendingMutations.length === 0)
+          return [{
+            actionId: event.actionId,
+            value: event.value,
+            patches: [event.patch]
+          }];
+        const lastBulk = context.pendingMutations.at(-1);
+        return lastBulk && lastBulk.actionId === event.actionId ? context.pendingMutations.slice(0, -1).concat({
+          value: event.value,
+          actionId: lastBulk.actionId,
+          patches: [...lastBulk.patches, event.patch]
+        }) : context.pendingMutations.concat({
+          value: event.value,
+          actionId: event.actionId,
+          patches: [event.patch]
+        });
+      }
+    })
+  },
+  actors: {
+    "type listener": xstate.fromCallback(({
+      input,
+      sendBack
+    }) => {
+      const originalApply = input.slateEditor.apply;
+      return input.slateEditor.apply = (op) => {
+        op.type === "insert_text" || op.type === "remove_text" ? sendBack({
+          type: "typing"
+        }) : sendBack({
+          type: "not typing"
+        }), originalApply(op);
+      }, () => {
+        input.slateEditor.apply = originalApply;
+      };
     })
   },
   guards: {
+    "is typing": xstate.stateIn({
+      typing: "typing"
+    }),
+    "no pending mutations": ({
+      context
+    }) => context.pendingMutations.length === 0,
     "slate is normalizing": ({
       context
     }) => slate.Editor.isNormalizing(context.slateEditor)
+  },
+  delays: {
+    "mutation debounce": process.env.NODE_ENV === "test" ? 250 : 0,
+    "type debounce": process.env.NODE_ENV === "test" ? 0 : 250
   }
 }).createMachine({
   id: "mutation",
   context: ({
     input
   }) => ({
-    pendingPatches: [],
+    pendingMutations: [],
     schema: input.schema,
     slateEditor: input.slateEditor
   }),
-  initial: "idle",
+  type: "parallel",
   states: {
-    idle: {
-      on: {
-        patch: {
-          actions: ["defer patch", "emit has pending patches"],
-          target: "has pending patches"
+    typing: {
+      initial: "idle",
+      invoke: {
+        src: "type listener",
+        input: ({
+          context
+        }) => ({
+          slateEditor: context.slateEditor
+        })
+      },
+      states: {
+        idle: {
+          on: {
+            typing: {
+              target: "typing"
+            }
+          }
+        },
+        typing: {
+          after: {
+            "type debounce": {
+              target: "idle"
+            }
+          },
+          on: {
+            "not typing": {
+              target: "idle"
+            },
+            typing: {
+              target: "typing",
+              reenter: !0
+            }
+          }
         }
       }
     },
-    "has pending patches": {
-      after: {
-        [FLUSH_PATCHES_THROTTLED_MS]: [{
-          guard: "slate is normalizing",
-          target: "idle",
-          actions: ["emit mutation", "clear pending patches"]
-        }, {
-          target: "has pending patches",
-          reenter: !0
-        }]
-      },
-      on: {
-        patch: {
-          target: "has pending patches",
-          actions: ["defer patch"],
-          reenter: !0
+    mutations: {
+      initial: "idle",
+      states: {
+        idle: {
+          on: {
+            patch: {
+              actions: ["defer patch", "emit has pending patches"],
+              target: "emitting mutations"
+            }
+          }
+        },
+        "emitting mutations": {
+          after: {
+            "mutation debounce": [{
+              guard: xstate.and([xstate.not("is typing"), "slate is normalizing"]),
+              target: "idle",
+              actions: ["emit mutations", "clear pending mutations"]
+            }, {
+              target: "emitting mutations",
+              reenter: !0
+            }]
+          },
+          on: {
+            patch: {
+              target: "emitting mutations",
+              actions: ["defer patch"],
+              reenter: !0
+            }
+          }
         }
       }
     }
@@ -1412,13 +1501,15 @@ function randomKey(length) {
   const table = getByteHexTable();
   return whatwgRNG(length).reduce((str, n) => str + table[n], "").slice(0, length);
 }
-const IS_APPLYING_BEHAVIOR_ACTIONS = /* @__PURE__ */ new WeakMap();
+const CURRENT_ACTION_ID = /* @__PURE__ */ new WeakMap();
 function withApplyingBehaviorActions(editor, fn) {
-  const prev = IS_APPLYING_BEHAVIOR_ACTIONS.get(editor);
-  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, !0), slate.Editor.withoutNormalizing(editor, fn), IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, prev);
+  CURRENT_ACTION_ID.set(editor, defaultKeyGenerator()), slate.Editor.withoutNormalizing(editor, fn), CURRENT_ACTION_ID.set(editor, void 0);
+}
+function getCurrentActionId(editor) {
+  return CURRENT_ACTION_ID.get(editor);
 }
 function isApplyingBehaviorActions(editor) {
-  return IS_APPLYING_BEHAVIOR_ACTIONS.get(editor) ?? !1;
+  return getCurrentActionId(editor) !== void 0;
 }
 const CURRENT_BEHAVIOR_ACTION_INTEND_SET = /* @__PURE__ */ new WeakMap();
 function withApplyingBehaviorActionIntendSet(editor, fn) {
@@ -2141,7 +2232,7 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
 }
 const debug$b = debugWithName("component:PortableTextEditor:Synchronizer");
 function Synchronizer(props) {
-  const $ = reactCompilerRuntime.c(40), {
+  const $ = reactCompilerRuntime.c(41), {
     editorActor,
     slateEditor
   } = props, value = react.useSelector(props.editorActor, _temp), readOnly = react.useSelector(props.editorActor, _temp2);
@@ -2193,7 +2284,7 @@ function Synchronizer(props) {
     };
   }, t8 = [mutationActorRef, syncActorRef, editorActor], $[16] = editorActor, $[17] = mutationActorRef, $[18] = syncActorRef, $[19] = t7, $[20] = t8) : (t7 = $[19], t8 = $[20]), React.useEffect(t7, t8);
   let t10, t9;
-  $[21] !== props.editorActor || $[22] !== syncActorRef ? (t9 = () => {
+  $[21] !== props.editorActor || $[22] !== slateEditor || $[23] !== syncActorRef ? (t9 = () => {
     const subscription_0 = syncActorRef.on("*", (event_0) => {
       bb15: switch (event_0.type) {
         case "invalid value": {
@@ -2210,6 +2301,14 @@ function Synchronizer(props) {
           });
           break bb15;
         }
+        case "patch": {
+          props.editorActor.send({
+            ...event_0,
+            type: "internal.patch",
+            value: fromSlateValue(slateEditor.children, props.editorActor.getSnapshot().context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(slateEditor))
+          });
+          break bb15;
+        }
         default:
           props.editorActor.send(event_0);
       }
@@ -2217,33 +2316,36 @@ function Synchronizer(props) {
     return () => {
       subscription_0.unsubscribe();
     };
-  }, t10 = [props.editorActor, syncActorRef], $[21] = props.editorActor, $[22] = syncActorRef, $[23] = t10, $[24] = t9) : (t10 = $[23], t9 = $[24]), React.useEffect(t9, t10);
+  }, t10 = [props.editorActor, slateEditor, syncActorRef], $[21] = props.editorActor, $[22] = slateEditor, $[23] = syncActorRef, $[24] = t10, $[25] = t9) : (t10 = $[24], t9 = $[25]), React.useEffect(t9, t10);
   let t11, t12;
-  $[25] !== readOnly || $[26] !== syncActorRef ? (t11 = () => {
+  $[26] !== readOnly || $[27] !== syncActorRef ? (t11 = () => {
     syncActorRef.send({
       type: "update readOnly",
       readOnly
     });
-  }, t12 = [syncActorRef, readOnly], $[25] = readOnly, $[26] = syncActorRef, $[27] = t11, $[28] = t12) : (t11 = $[27], t12 = $[28]), React.useEffect(t11, t12);
+  }, t12 = [syncActorRef, readOnly], $[26] = readOnly, $[27] = syncActorRef, $[28] = t11, $[29] = t12) : (t11 = $[28], t12 = $[29]), React.useEffect(t11, t12);
   let t13, t14;
-  $[29] !== syncActorRef || $[30] !== value ? (t13 = () => {
+  $[30] !== syncActorRef || $[31] !== value ? (t13 = () => {
     debug$b("Value from props changed, syncing new value"), syncActorRef.send({
       type: "update value",
       value
     });
-  }, t14 = [syncActorRef, value], $[29] = syncActorRef, $[30] = value, $[31] = t13, $[32] = t14) : (t13 = $[31], t14 = $[32]), React.useEffect(t13, t14);
+  }, t14 = [syncActorRef, value], $[30] = syncActorRef, $[31] = value, $[32] = t13, $[33] = t14) : (t13 = $[32], t14 = $[33]), React.useEffect(t13, t14);
   let t15;
-  $[33] !== editorActor || $[34] !== mutationActorRef ? (t15 = () => {
+  $[34] !== editorActor || $[35] !== mutationActorRef ? (t15 = () => {
     debug$b("Subscribing to patch events");
-    const sub = editorActor.on("patch", (event_1) => {
-      mutationActorRef.send(event_1);
+    const sub = editorActor.on("internal.patch", (event_1) => {
+      mutationActorRef.send({
+        ...event_1,
+        type: "patch"
+      });
     });
     return () => {
       debug$b("Unsubscribing to patch events"), sub.unsubscribe();
     };
-  }, $[33] = editorActor, $[34] = mutationActorRef, $[35] = t15) : t15 = $[35];
+  }, $[34] = editorActor, $[35] = mutationActorRef, $[36] = t15) : t15 = $[36];
   let t16;
-  return $[36] !== editorActor || $[37] !== mutationActorRef || $[38] !== slateEditor ? (t16 = [editorActor, mutationActorRef, slateEditor], $[36] = editorActor, $[37] = mutationActorRef, $[38] = slateEditor, $[39] = t16) : t16 = $[39], React.useEffect(t15, t16), null;
+  return $[37] !== editorActor || $[38] !== mutationActorRef || $[39] !== slateEditor ? (t16 = [editorActor, mutationActorRef, slateEditor], $[37] = editorActor, $[38] = mutationActorRef, $[39] = slateEditor, $[40] = t16) : t16 = $[40], React.useEffect(t15, t16), null;
 }
 function _temp2(s_0) {
   return s_0.matches({
@@ -4347,7 +4449,7 @@ const blockSetBehaviorActionImplementation = ({
   "deserialization.failure": ({
     action
   }) => {
-    console.error(`Deserialization of ${action.mimeType} failed with reason ${action.reason}`);
+    console.warn(`Deserialization of ${action.mimeType} failed with reason ${action.reason}`);
   },
   "deserialization.success": ({
     context,
@@ -4480,7 +4582,7 @@ const blockSetBehaviorActionImplementation = ({
   "serialization.failure": ({
     action
   }) => {
-    console.error(`Serialization of ${action.mimeType} failed with reason ${action.reason}`);
+    console.warn(`Serialization of ${action.mimeType} failed with reason ${action.reason}`);
   },
   "serialization.success": ({
     context,
@@ -4844,6 +4946,7 @@ function createWithEventListeners(editorActor, subscriptions) {
           case "loading":
           case "mutation":
           case "patch":
+          case "internal.patch":
           case "patches":
           case "read only":
           case "ready":
@@ -5486,18 +5589,21 @@ function createWithPatches({
           patches$1 = [...patches$1, ...patchFunctions.moveNodePatch(editor, operation, previousChildren)];
           break;
       }
-      return !editorWasEmpty && editorIsEmpty && ["merge_node", "set_node", "remove_text", "remove_node"].includes(operation.type) && (patches$1 = [...patches$1, patches.unset([])], editorActor.send({
+      if (!editorWasEmpty && editorIsEmpty && ["merge_node", "set_node", "remove_text", "remove_node"].includes(operation.type) && (patches$1 = [...patches$1, patches.unset([])], editorActor.send({
         type: "notify.unset",
         previousValue: fromSlateValue(previousChildren, schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))
-      })), editorWasEmpty && patches$1.length > 0 && (patches$1 = [patches.setIfMissing([], []), ...patches$1]), patches$1.length > 0 && patches$1.forEach((patch) => {
-        editorActor.send({
-          type: "patch",
-          patch: {
-            ...patch,
-            origin: "local"
-          }
-        });
-      }), editor;
+      })), editorWasEmpty && patches$1.length > 0 && (patches$1 = [patches.setIfMissing([], []), ...patches$1]), patches$1.length > 0)
+        for (const patch of patches$1)
+          editorActor.send({
+            type: "internal.patch",
+            patch: {
+              ...patch,
+              origin: "local"
+            },
+            actionId: getCurrentActionId(editor),
+            value: fromSlateValue(editor.children, schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))
+          });
+      return editor;
     }, editor;
   };
 }
@@ -5954,9 +6060,15 @@ const editorMachine = xstate.setup({
         event
       }) => (xstate.assertEvent(event, "update schema"), event.schema)
     }),
-    "emit patch event": xstate.emit(({
-      event
-    }) => (xstate.assertEvent(event, "patch"), event)),
+    "emit patch event": xstate.enqueueActions(({
+      event,
+      enqueue
+    }) => {
+      xstate.assertEvent(event, "internal.patch"), enqueue.emit(event), enqueue.emit({
+        type: "patch",
+        patch: event.patch
+      });
+    }),
     "emit mutation event": xstate.emit(({
       event
     }) => (xstate.assertEvent(event, "mutation"), event)),
@@ -5970,14 +6082,17 @@ const editorMachine = xstate.setup({
       pendingEvents: ({
         context,
         event
-      }) => (xstate.assertEvent(event, ["patch", "mutation"]), [...context.pendingEvents, event])
+      }) => (xstate.assertEvent(event, ["internal.patch", "mutation"]), [...context.pendingEvents, event])
     }),
     "emit pending events": xstate.enqueueActions(({
       context,
       enqueue
     }) => {
       for (const event of context.pendingEvents)
-        enqueue(xstate.emit(event));
+        event.type === "internal.patch" ? (enqueue.emit(event), enqueue.emit({
+          type: "patch",
+          patch: event.patch
+        })) : enqueue.emit(event);
     }),
     "emit ready": xstate.emit({
       type: "ready"
@@ -5995,7 +6110,7 @@ const editorMachine = xstate.setup({
       const defaultAction = event.type === "custom behavior event" || event.behaviorEvent.type === "copy" || event.behaviorEvent.type === "deserialize" || event.behaviorEvent.type === "key.down" || event.behaviorEvent.type === "key.up" || event.behaviorEvent.type === "paste" || event.behaviorEvent.type === "serialize" ? void 0 : {
         ...event.behaviorEvent,
         editor: event.editor
-      }, defaultActionCallback = event.type === "behavior event" ? event.defaultActionCallback : void 0, eventBehaviors = [...foundationalBehaviors, ...context.behaviors.values(), ...defaultBehaviors].filter((behavior) => behavior.on === event.behaviorEvent.type);
+      }, defaultActionCallback = event.type === "behavior event" ? event.defaultActionCallback : void 0, eventBehaviors = [...foundationalBehaviors, ...context.behaviors.values(), ...defaultBehaviors].filter((behavior) => behavior.on === "*" || behavior.on === event.behaviorEvent.type);
       if (eventBehaviors.length === 0) {
         if (defaultActionCallback) {
           withApplyingBehaviorActions(event.editor, () => {
@@ -6393,7 +6508,7 @@ const editorMachine = xstate.setup({
         "setting up": {
           exit: ["emit ready"],
           on: {
-            patch: {
+            "internal.patch": {
               actions: "defer event"
             },
             mutation: {
@@ -6412,7 +6527,7 @@ const editorMachine = xstate.setup({
                 normalizing: {
                   target: "normalizing"
                 },
-                patch: {
+                "internal.patch": {
                   actions: "defer event",
                   target: "#editor.setup.dirty"
                 },
@@ -6427,7 +6542,7 @@ const editorMachine = xstate.setup({
                 "done normalizing": {
                   target: "idle"
                 },
-                patch: {
+                "internal.patch": {
                   actions: "defer event"
                 },
                 mutation: {
@@ -6440,7 +6555,7 @@ const editorMachine = xstate.setup({
         dirty: {
           entry: ["emit pending events", "clear pending events"],
           on: {
-            patch: {
+            "internal.patch": {
               actions: "emit patch event"
             },
             mutation: {
@@ -6960,9 +7075,31 @@ class PortableTextEditor extends React.Component {
    * ```
    */
   static getFragment = (editor) => editor.editable?.getFragment();
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *   type: 'history.undo',
+   * })
+   * ```
+   */
   static undo = (editor) => {
     debug("Host undoing"), editor.editable?.undo();
   };
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *   type: 'history.redo',
+   * })
+   * ```
+   */
   static redo = (editor) => {
     debug("Host redoing"), editor.editable?.redo();
   };