@portabletext/editor 1.1.1 → 1.1.2

package/lib/index.mjs

@@ -9,6 +9,7 @@ import { isKeySegment, isPortableTextSpan as isPortableTextSpan$1, isPortableTex
 import { styled } from "styled-components";
 import uniq from "lodash/uniq.js";
 import { Subject } from "rxjs";
+import { fromCallback, setup, emit, assertEvent, assign, enqueueActions, createActor } from "xstate";
 import { Schema } from "@sanity/schema";
 import { diffMatchPatch as diffMatchPatch$1, set, insert, setIfMissing, unset, applyAll } from "@portabletext/patches";
 import get from "lodash/get.js";
@@ -126,7 +127,7 @@ function normalizeSelection(selection, value) {
   const { anchor, focus } = selection;
   return anchor && value.find((blk) => isEqual({ _key: blk._key }, anchor.path[0])) && (newAnchor = normalizePoint(anchor, value)), focus && value.find((blk) => isEqual({ _key: blk._key }, focus.path[0])) && (newFocus = normalizePoint(focus, value)), newAnchor && newFocus ? { anchor: newAnchor, focus: newFocus, backward: selection.backward } : null;
 }
-const EMPTY_MARKDEFS = [], VOID_CHILD_KEY = "void-child";
+const VOID_CHILD_KEY = "void-child";
 function keepObjectEquality(object, keyMap) {
   const value = keyMap[object._key];
   return value && isEqual(object, value) ? value : (keyMap[object._key] = object, object);
@@ -1710,7 +1711,7 @@ function createWithMaxBlocks(maxBlocks) {
     }, editor;
   };
 }
-function createWithObjectKeys(schemaTypes, keyGenerator) {
+function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
   return function(editor) {
     const { apply: apply2, normalizeNode } = editor;
     return editor.apply = (operation) => {
@@ -1746,10 +1747,13 @@ function createWithObjectKeys(schemaTypes, keyGenerator) {
     }, editor.normalizeNode = (entry) => {
       const [node, path] = entry;
       if (Element$1.isElement(node) && node._type === schemaTypes.block.name) {
-        node._key || Transforms.setNodes(editor, { _key: keyGenerator() }, { at: path });
+        if (!node._key) {
+          editorActor.send({ type: "normalizing" }), Transforms.setNodes(editor, { _key: keyGenerator() }, { at: path }), editorActor.send({ type: "done normalizing" });
+          return;
+        }
         for (const [child, childPath] of Node.children(editor, path))
           if (!child._key) {
-            Transforms.setNodes(editor, { _key: keyGenerator() }, { at: childPath });
+            editorActor.send({ type: "normalizing" }), Transforms.setNodes(editor, { _key: keyGenerator() }, { at: childPath }), editorActor.send({ type: "done normalizing" });
             return;
           }
       }
@@ -2906,7 +2910,7 @@ function findOperationTargetBlock(editor, operation) {
 }
 const debug$g = debugWithName("plugin:withPatches");
 function createWithPatches({
-  change$,
+  editorActor,
   patches$,
   patchFunctions,
   readOnly,
@@ -3035,7 +3039,7 @@ function createWithPatches({
       }
       return !editorWasEmpty && editorIsEmpty && ["merge_node", "set_node", "remove_text", "remove_node"].includes(
         operation.type
-      ) && (patches = [...patches, unset([])], change$.next({
+      ) && (patches = [...patches, unset([])], editorActor.send({
         type: "unset",
         previousValue: fromSlateValue(
           previousChildren,
@@ -3043,7 +3047,7 @@ function createWithPatches({
           KEY_TO_VALUE_ELEMENT.get(editor)
         )
       })), editorWasEmpty && patches.length > 0 && (patches = [setIfMissing([], []), ...patches]), patches.length > 0 && patches.forEach((patch) => {
-        change$.next({
+        editorActor.send({
           type: "patch",
           patch: { ...patch, origin: "local" }
         });
@@ -3079,25 +3083,25 @@ function createWithPlaceholderBlock() {
   };
 }
 const debug$e = debugWithName("plugin:withPortableTextBlockStyle");
-function createWithPortableTextBlockStyle(types) {
+function createWithPortableTextBlockStyle(editorActor, types) {
   const defaultStyle = types.styles[0].value;
   return function(editor) {
     const { normalizeNode } = editor;
     return editor.normalizeNode = (nodeEntry) => {
-      normalizeNode(nodeEntry);
       const [, path] = nodeEntry;
       for (const op of editor.operations)
         if (op.type === "split_node" && op.path.length === 1 && editor.isTextBlock(op.properties) && op.properties.style !== defaultStyle && op.path[0] === path[0] && !Path.equals(path, op.path)) {
           const [child] = Editor.node(editor, [op.path[0] + 1, 0]);
           if (Text.isText(child) && child.text === "") {
-            debug$e(`Normalizing split node to ${defaultStyle} style`, op), Transforms.setNodes(
+            debug$e(`Normalizing split node to ${defaultStyle} style`, op), editorActor.send({ type: "normalizing" }), Transforms.setNodes(
               editor,
               { style: defaultStyle },
               { at: [op.path[0] + 1], voids: !1 }
-            );
-            break;
+            ), editorActor.send({ type: "done normalizing" });
+            return;
           }
         }
+      normalizeNode(nodeEntry);
     }, editor.pteHasBlockStyle = (style) => editor.selection ? [
       ...Editor.nodes(editor, {
         at: editor.selection,
@@ -3242,7 +3246,7 @@ function isPortableTextBlock(node) {
   );
 }
 const debug$c = debugWithName("plugin:withPortableTextMarkModel");
-function createWithPortableTextMarkModel(types, change$, keyGenerator) {
+function createWithPortableTextMarkModel(editorActor, types, keyGenerator) {
   return function(editor) {
     const { apply: apply2, normalizeNode } = editor, decorators = types.decorators.map((t) => t.value), forceNewSelection = () => {
       editor.selection && (Transforms.select(editor, { ...editor.selection }), editor.selection = { ...editor.selection });
@@ -3251,7 +3255,7 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
         editor.selection,
         types
       );
-      change$.next({ type: "selection", selection: ptRange });
+      editorActor.send({ type: "selection", selection: ptRange });
     };
     return editor.normalizeNode = (nodeEntry) => {
       const [node, path] = nodeEntry;
@@ -3264,20 +3268,20 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
               "Merging spans",
               JSON.stringify(child, null, 2),
               JSON.stringify(nextNode, null, 2)
-            ), Transforms.mergeNodes(editor, {
+            ), editorActor.send({ type: "normalizing" }), Transforms.mergeNodes(editor, {
               at: [childPath[0], childPath[1] + 1],
               voids: !0
-            });
+            }), editorActor.send({ type: "done normalizing" });
             return;
           }
         }
       }
       if (editor.isTextBlock(node) && !Array.isArray(node.markDefs)) {
-        debug$c("Adding .markDefs to block node"), Transforms.setNodes(editor, { markDefs: [] }, { at: path });
+        debug$c("Adding .markDefs to block node"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(editor, { markDefs: [] }, { at: path }), editorActor.send({ type: "done normalizing" });
         return;
       }
       if (editor.isTextSpan(node) && !Array.isArray(node.marks)) {
-        debug$c("Adding .marks to span node"), Transforms.setNodes(editor, { marks: [] }, { at: path });
+        debug$c("Adding .marks to span node"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(editor, { marks: [] }, { at: path }), editorActor.send({ type: "done normalizing" });
         return;
       }
       if (editor.isTextSpan(node)) {
@@ -3285,11 +3289,11 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
           (mark) => !decorators2.includes(mark)
         );
         if (editor.isTextBlock(block) && node.text === "" && annotations && annotations.length > 0) {
-          debug$c("Removing annotations from empty span node"), Transforms.setNodes(
+          debug$c("Removing annotations from empty span node"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(
             editor,
             { marks: node.marks?.filter((mark) => decorators2.includes(mark)) },
             { at: path }
-          );
+          ), editorActor.send({ type: "done normalizing" });
           return;
         }
       }
@@ -3299,7 +3303,7 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
           if (editor.isTextSpan(child)) {
             const marks = child.marks ?? [], orphanedAnnotations = marks.filter((mark) => !decorators2.includes(mark) && !node.markDefs?.find((def) => def._key === mark));
             if (orphanedAnnotations.length > 0) {
-              debug$c("Removing orphaned annotations from span node"), Transforms.setNodes(
+              debug$c("Removing orphaned annotations from span node"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(
                 editor,
                 {
                   marks: marks.filter(
@@ -3307,7 +3311,7 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
                   )
                 },
                 { at: childPath }
-              );
+              ), editorActor.send({ type: "done normalizing" });
               return;
             }
           }
@@ -3319,7 +3323,7 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
             (decorator) => decorator.value
           ), marks = node.marks ?? [], orphanedAnnotations = marks.filter((mark) => !decorators2.includes(mark) && !block.markDefs?.find((def) => def._key === mark));
           if (orphanedAnnotations.length > 0) {
-            debug$c("Removing orphaned annotations from span node"), Transforms.setNodes(
+            debug$c("Removing orphaned annotations from span node"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(
               editor,
               {
                 marks: marks.filter(
@@ -3327,7 +3331,7 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
                 )
               },
               { at: path }
-            );
+            ), editorActor.send({ type: "done normalizing" });
             return;
           }
         }
@@ -3336,20 +3340,23 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
         const markDefs = node.markDefs ?? [], markDefKeys = /* @__PURE__ */ new Set(), newMarkDefs = [];
         for (const markDef of markDefs)
           markDefKeys.has(markDef._key) || (markDefKeys.add(markDef._key), newMarkDefs.push(markDef));
-        markDefs.length !== newMarkDefs.length && (debug$c("Removing duplicate markDefs"), Transforms.setNodes(editor, { markDefs: newMarkDefs }, { at: path }));
+        if (markDefs.length !== newMarkDefs.length) {
+          debug$c("Removing duplicate markDefs"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(editor, { markDefs: newMarkDefs }, { at: path }), editorActor.send({ type: "done normalizing" });
+          return;
+        }
       }
       if (editor.isTextBlock(node) && !editor.operations.some(
         (op) => op.type === "merge_node" && "markDefs" in op.properties && op.path.length === 1
       )) {
         const newMarkDefs = (node.markDefs || []).filter((def) => node.children.find((child) => Text.isText(child) && Array.isArray(child.marks) && child.marks.includes(def._key)));
         if (node.markDefs && !isEqual(newMarkDefs, node.markDefs)) {
-          debug$c("Removing markDef not in use"), Transforms.setNodes(
+          debug$c("Removing markDef not in use"), editorActor.send({ type: "normalizing" }), Transforms.setNodes(
             editor,
             {
               markDefs: newMarkDefs
             },
             { at: path }
-          );
+          ), editorActor.send({ type: "done normalizing" });
           return;
         }
       }
@@ -3582,7 +3589,7 @@ function createWithPortableTextMarkModel(types, change$, keyGenerator) {
   };
 }
 const debug$b = debugWithName("plugin:withPortableTextSelections"), debugVerbose$2 = debug$b.enabled && !1;
-function createWithPortableTextSelections(change$, types) {
+function createWithPortableTextSelections(editorActor, types) {
   let prevSelection = null;
   return function(editor) {
     const emitPortableTextSelection = () => {
@@ -3601,7 +3608,7 @@ function createWithPortableTextSelections(change$, types) {
           `Emitting selection ${JSON.stringify(ptRange || null)} (${JSON.stringify(
             editor.selection
           )})`
-        ), ptRange ? change$.next({ type: "selection", selection: ptRange }) : change$.next({ type: "selection", selection: null });
+        ), ptRange ? editorActor.send({ type: "selection", selection: ptRange }) : editorActor.send({ type: "selection", selection: null });
       }
       prevSelection = editor.selection;
     }, { onChange } = editor;
@@ -3613,6 +3620,7 @@ function createWithPortableTextSelections(change$, types) {
 }
 const debug$a = debugWithName("plugin:withSchemaTypes");
 function createWithSchemaTypes({
+  editorActor,
   schemaTypes,
   keyGenerator
 }) {
@@ -3624,16 +3632,18 @@ function createWithSchemaTypes({
       if (node._type === void 0 && path.length === 2) {
         debug$a("Setting span type on text node without a type");
         const span = node, key = span._key || keyGenerator();
-        Transforms.setNodes(
+        editorActor.send({ type: "normalizing" }), Transforms.setNodes(
           editor,
           { ...span, _type: schemaTypes.span.name, _key: key },
           { at: path }
-        );
+        ), editorActor.send({ type: "done normalizing" });
+        return;
       }
       if (node._key === void 0 && (path.length === 1 || path.length === 2)) {
         debug$a("Setting missing key on child node without a key");
         const key = keyGenerator();
-        Transforms.setNodes(editor, { _key: key }, { at: path });
+        editorActor.send({ type: "normalizing" }), Transforms.setNodes(editor, { _key: key }, { at: path }), editorActor.send({ type: "done normalizing" });
+        return;
       }
       normalizeNode(entry);
     }, editor;
@@ -3941,22 +3951,6 @@ function validateValue(value, types, keyGenerator) {
           }
         }, !0;
       }
-      if (blk.markDefs && !Array.isArray(blk.markDefs))
-        return resolution = {
-          patches: [
-            set({ ...textBlock, markDefs: EMPTY_MARKDEFS }, [
-              { _key: textBlock._key }
-            ])
-          ],
-          description: "Block has invalid required property 'markDefs'.",
-          action: "Add empty markDefs array",
-          item: textBlock,
-          i18n: {
-            description: "inputs.portable-text.invalid-value.missing-or-invalid-markdefs.description",
-            action: "inputs.portable-text.invalid-value.missing-or-invalid-markdefs.action",
-            values: { key: textBlock._key }
-          }
-        }, !0;
       const allUsedMarks = uniq(
         flatten(
           textBlock.children.filter((cld) => cld._type === types.span.name).map((cld) => cld.marks || [])
@@ -4101,7 +4095,7 @@ function validateValue(value, types, keyGenerator) {
   }) && (valid = !1), { valid, resolution, value });
 }
 const debug$7 = debugWithName("plugin:withInsertData");
-function createWithInsertData(change$, schemaTypes, keyGenerator) {
+function createWithInsertData(editorActor, schemaTypes, keyGenerator) {
   return function(editor) {
     const blockTypeName = schemaTypes.block.name, spanTypeName = schemaTypes.span.name, whitespaceOnPasteMode = schemaTypes.block.options.unstable_whitespaceOnPasteMode, toPlainText = (blocks) => blocks.map((block) => editor.isTextBlock(block) ? block.children.map((child) => child._type === spanTypeName ? child.text : `[${schemaTypes.inlineObjects.find((t) => t.name === child._type)?.title || "Object"}]`).join("") : `[${schemaTypes.blockObjects.find((t) => t.name === block._type)?.title || "Object"}]`).join(`
 
@@ -4155,9 +4149,8 @@ function createWithInsertData(change$, schemaTypes, keyGenerator) {
           ), validation = validateValue(parsed, schemaTypes, keyGenerator);
           if (!validation.valid && !validation.resolution?.autoResolve) {
             const errorDescription = `${validation.resolution?.description}`;
-            return change$.next({
+            return editorActor.send({
               type: "error",
-              level: "warning",
               name: "pasteError",
               description: errorDescription,
               data: validation
@@ -4170,7 +4163,6 @@ function createWithInsertData(change$, schemaTypes, keyGenerator) {
     }, editor.insertTextOrHTMLData = (data) => {
       if (!editor.selection)
         return debug$7("No selection, not inserting"), !1;
-      change$.next({ type: "loading", isLoading: !0 });
       const html = data.getData("text/html"), text = data.getData("text/plain");
       if (html || text) {
         debug$7("Inserting data", data);
@@ -4201,9 +4193,8 @@ function createWithInsertData(change$, schemaTypes, keyGenerator) {
           const errorDescription = `Could not validate the resulting portable text to insert.
 ${validation.resolution?.description}
 Try to insert as plain text (shift-paste) instead.`;
-          return change$.next({
+          return editorActor.send({
             type: "error",
-            level: "warning",
             name: "pasteError",
             description: errorDescription,
             data: validation
@@ -4211,9 +4202,9 @@ Try to insert as plain text (shift-paste) instead.`;
         }
         return debug$7(
           `Inserting ${insertedType} fragment at ${JSON.stringify(editor.selection)}`
-        ), _insertFragment(editor, fragment, schemaTypes), change$.next({ type: "loading", isLoading: !1 }), !0;
+        ), _insertFragment(editor, fragment, schemaTypes), !0;
       }
-      return change$.next({ type: "loading", isLoading: !1 }), !1;
+      return !1;
     }, editor.insertData = (data) => {
       editor.insertPortableTextData(data) || editor.insertTextOrHTMLData(data);
     }, editor.insertFragmentData = (data) => {
@@ -4300,18 +4291,26 @@ function _insertFragment(editor, fragment, schemaTypes) {
   }), editor.onChange();
 }
 const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, options) => {
-  const e = editor, { keyGenerator, portableTextEditor, patches$, readOnly, maxBlocks } = options, { schemaTypes, change$ } = portableTextEditor;
+  const e = editor, { keyGenerator, portableTextEditor, patches$, readOnly, maxBlocks } = options, { editorActor, schemaTypes } = portableTextEditor;
   e.subscriptions = [], e.destroy ? e.destroy() : originalFnMap.set(e, {
     apply: e.apply,
     onChange: e.onChange,
     normalizeNode: e.normalizeNode
   });
-  const operationToPatches = createOperationToPatches(schemaTypes), withObjectKeys = createWithObjectKeys(schemaTypes, keyGenerator), withSchemaTypes = createWithSchemaTypes({ schemaTypes, keyGenerator }), withEditableAPI = createWithEditableAPI(
+  const operationToPatches = createOperationToPatches(schemaTypes), withObjectKeys = createWithObjectKeys(
+    editorActor,
+    schemaTypes,
+    keyGenerator
+  ), withSchemaTypes = createWithSchemaTypes({
+    editorActor,
+    schemaTypes,
+    keyGenerator
+  }), withEditableAPI = createWithEditableAPI(
     portableTextEditor,
     schemaTypes,
     keyGenerator
   ), withPatches = createWithPatches({
-    change$,
+    editorActor,
     keyGenerator,
     patches$,
     patchFunctions: operationToPatches,
@@ -4322,15 +4321,18 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
     patches$,
     blockSchemaType: schemaTypes.block
   }), withPortableTextMarkModel = createWithPortableTextMarkModel(
+    editorActor,
     schemaTypes,
-    change$,
     keyGenerator
-  ), withPortableTextBlockStyle = createWithPortableTextBlockStyle(schemaTypes), withPlaceholderBlock = createWithPlaceholderBlock(), withInsertBreak = createWithInsertBreak(schemaTypes, keyGenerator), withUtils = createWithUtils({
+  ), withPortableTextBlockStyle = createWithPortableTextBlockStyle(
+    editorActor,
+    schemaTypes
+  ), withPlaceholderBlock = createWithPlaceholderBlock(), withInsertBreak = createWithInsertBreak(schemaTypes, keyGenerator), withUtils = createWithUtils({
     keyGenerator,
     schemaTypes,
     portableTextEditor
   }), withPortableTextSelections = createWithPortableTextSelections(
-    change$,
+    editorActor,
     schemaTypes
   );
   return e.destroy = () => {
@@ -4447,7 +4449,7 @@ const defaultKeyGenerator = () => randomKey(12), PortableTextEditorKeyGeneratorC
   return readOnly;
 }, debug$5 = debugWithName("hook:useSyncValue"), CURRENT_VALUE = /* @__PURE__ */ new WeakMap();
 function useSyncValue(props) {
-  const { portableTextEditor, readOnly, keyGenerator } = props, { change$, schemaTypes } = portableTextEditor, previousValue = useRef(), slateEditor = useSlate(), updateValueFunctionRef = useRef(), updateFromCurrentValue = useCallback(() => {
+  const { editorActor, portableTextEditor, readOnly, keyGenerator } = props, { schemaTypes } = portableTextEditor, previousValue = useRef(), slateEditor = useSlate(), updateValueFunctionRef = useRef(), updateFromCurrentValue = useCallback(() => {
     const currentValue = CURRENT_VALUE.get(portableTextEditor);
     if (previousValue.current === currentValue) {
       debug$5("Value is the same object as previous, not need to sync");
@@ -4518,7 +4520,7 @@ function useSyncValue(props) {
                       !validation.valid && validation.resolution?.autoResolve && validation.resolution?.patches.length > 0 && !readOnly && previousValue.current && previousValue.current !== value && (console.warn(
                         `${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`
                       ), validation.resolution.patches.forEach((patch) => {
-                        change$.next({ type: "patch", patch });
+                        editorActor.send({ type: "patch", patch });
                       })), validation.valid || validation.resolution?.autoResolve ? (oldBlock._key === currentBlock._key ? (debug$5.enabled && debug$5("Updating block", oldBlock, currentBlock), _updateBlock(
                         slateEditor,
                         currentBlock,
@@ -4528,8 +4530,8 @@ function useSyncValue(props) {
                         slateEditor,
                         currentBlock,
                         currentBlockIndex
-                      )), isChanged = !0) : (change$.next({
-                        type: "invalidValue",
+                      )), isChanged = !0) : (editorActor.send({
+                        type: "invalid value",
                         resolution: validation.resolution,
                         value
                       }), isValid = !1);
@@ -4545,8 +4547,8 @@ function useSyncValue(props) {
                         currentBlock
                       ), validation.valid || validation.resolution?.autoResolve ? Transforms.insertNodes(slateEditor, currentBlock, {
                         at: [currentBlockIndex]
-                      }) : (debug$5("Invalid", validation), change$.next({
-                        type: "invalidValue",
+                      }) : (debug$5("Invalid", validation), editorActor.send({
+                        type: "invalid value",
                         resolution: validation.resolution,
                         value
                       }), isValid = !1);
@@ -4567,8 +4569,8 @@ function useSyncValue(props) {
         try {
           slateEditor.onChange();
         } catch (err) {
-          console.error(err), change$.next({
-            type: "invalidValue",
+          console.error(err), editorActor.send({
+            type: "invalid value",
             resolution: null,
             value
           });
@@ -4577,14 +4579,14 @@ function useSyncValue(props) {
         hadSelection && !slateEditor.selection && (Transforms.select(slateEditor, {
           anchor: { path: [0, 0], offset: 0 },
           focus: { path: [0, 0], offset: 0 }
-        }), slateEditor.onChange()), change$.next({ type: "value", value });
+        }), slateEditor.onChange()), editorActor.send({ type: "value changed", value });
       } else
         debug$5("Server value and editor value is equal, no need to sync.");
       previousValue.current = value;
     };
     return updateValueFunctionRef.current = updateFunction, updateFunction;
   }, [
-    change$,
+    editorActor,
     keyGenerator,
     portableTextEditor,
     readOnly,
@@ -4653,9 +4655,9 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
 }
 const debug$4 = debugWithName("component:PortableTextEditor:Synchronizer"), debugVerbose$1 = debug$4.enabled && !1, FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === "test" ? 500 : 1e3;
 function Synchronizer(props) {
-  const portableTextEditor = usePortableTextEditor(), keyGenerator = usePortableTextEditorKeyGenerator(), readOnly = usePortableTextEditorReadOnlyStatus(), { change$, getValue, onChange, value } = props, pendingPatches = useRef([]), syncValue = useSyncValue({
+  const portableTextEditor = usePortableTextEditor(), keyGenerator = usePortableTextEditorKeyGenerator(), readOnly = usePortableTextEditorReadOnlyStatus(), { editorActor, getValue, onChange, value } = props, pendingPatches = useRef([]), syncValue = useSyncValue({
+    editorActor,
     keyGenerator,
-    onChange,
     portableTextEditor,
     readOnly
   }), slateEditor = useSlate();
@@ -4667,14 +4669,14 @@ function Synchronizer(props) {
       debug$4("Flushing pending patches"), debugVerbose$1 && debug$4(`Patches:
 ${JSON.stringify(pendingPatches.current, null, 2)}`);
       const snapshot = getValue();
-      change$.next({
+      editorActor.send({
         type: "mutation",
         patches: pendingPatches.current,
         snapshot
       }), pendingPatches.current = [];
     }
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !1);
-  }, [slateEditor, getValue, change$]), onFlushPendingPatchesThrottled = useMemo(() => throttle(
+  }, [editorActor, slateEditor, getValue]), onFlushPendingPatchesThrottled = useMemo(() => throttle(
     () => {
       if (Editor.isNormalizing(slateEditor)) {
         onFlushPendingPatches();
@@ -4691,34 +4693,174 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
   useEffect(() => () => {
     onFlushPendingPatches();
   }, [onFlushPendingPatches]), useEffect(() => {
-    debug$4("Subscribing to editor changes$");
-    const sub = change$.subscribe((next) => {
-      switch (next.type) {
+    debug$4("Subscribing to editor changes");
+    const sub = editorActor.on("*", (event) => {
+      switch (event.type) {
         case "patch":
-          IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !0), pendingPatches.current.push(next.patch), onFlushPendingPatchesThrottled(), onChange(next);
+          IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !0), pendingPatches.current.push(event.patch), onFlushPendingPatchesThrottled(), onChange(event);
+          break;
+        case "loading": {
+          onChange({ type: "loading", isLoading: !0 });
+          break;
+        }
+        case "done loading": {
+          onChange({ type: "loading", isLoading: !1 });
+          break;
+        }
+        case "offline": {
+          onChange({ type: "connection", value: "offline" });
+          break;
+        }
+        case "online": {
+          onChange({ type: "connection", value: "online" });
+          break;
+        }
+        case "value changed": {
+          onChange({ type: "value", value: event.value });
+          break;
+        }
+        case "invalid value": {
+          onChange({
+            type: "invalidValue",
+            resolution: event.resolution,
+            value: event.value
+          });
           break;
+        }
+        case "error": {
+          onChange({
+            ...event,
+            level: "warning"
+          });
+          break;
+        }
         default:
-          onChange(next);
+          onChange(event);
       }
     });
     return () => {
-      debug$4("Unsubscribing to changes$"), sub.unsubscribe();
+      debug$4("Unsubscribing to changes"), sub.unsubscribe();
     };
-  }, [change$, onChange, onFlushPendingPatchesThrottled, slateEditor]);
+  }, [editorActor, onFlushPendingPatchesThrottled, slateEditor]);
   const handleOnline = useCallback(() => {
-    debug$4("Editor is online, syncing from props.value"), change$.next({ type: "connection", value: "online" }), syncValue(value);
-  }, [change$, syncValue, value]), handleOffline = useCallback(() => {
-    debug$4("Editor is offline"), change$.next({ type: "connection", value: "offline" });
-  }, [change$]);
-  useEffect(() => (portableTextEditor.props.patches$ && (window.addEventListener("online", handleOnline), window.addEventListener("offline", handleOffline)), () => {
-    portableTextEditor.props.patches$ && (window.removeEventListener("online", handleOnline), window.removeEventListener("offline", handleOffline));
-  }));
+    debug$4("Editor is online, syncing from props.value"), syncValue(value);
+  }, [syncValue, value]);
+  useEffect(() => {
+    const subscription = editorActor.on("online", () => {
+      portableTextEditor.props.patches$ && handleOnline();
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [editorActor]);
   const isInitialValueFromProps = useRef(!0);
   return useEffect(() => {
-    debug$4("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (change$.next({ type: "loading", isLoading: !1 }), change$.next({ type: "ready" }), isInitialValueFromProps.current = !1);
-  }, [change$, syncValue, value]), null;
+    debug$4("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (editorActor.send({ type: "ready" }), isInitialValueFromProps.current = !1);
+  }, [editorActor, syncValue, value]), null;
 }
-const PortableTextEditorSelectionContext = createContext(null), usePortableTextEditorSelection = () => {
+const networkLogic = fromCallback(({ sendBack }) => {
+  const onlineHandler = () => {
+    sendBack({ type: "online" });
+  }, offlineHandler = () => {
+    sendBack({ type: "offline" });
+  };
+  return window.addEventListener("online", onlineHandler), window.addEventListener("offline", offlineHandler), () => {
+    window.removeEventListener("online", onlineHandler), window.removeEventListener("offline", offlineHandler);
+  };
+}), editorMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    emitted: {}
+  },
+  actions: {
+    "emit patch event": emit(({ event }) => (assertEvent(event, "patch"), event)),
+    "emit mutation event": emit(({ event }) => (assertEvent(event, "mutation"), event)),
+    "defer event": assign({
+      pendingEvents: ({ context, event }) => (assertEvent(event, ["patch", "mutation"]), [...context.pendingEvents, event])
+    }),
+    "emit pending events": enqueueActions(({ context, enqueue }) => {
+      for (const event of context.pendingEvents)
+        enqueue(emit(event));
+    }),
+    "clear pending events": assign({
+      pendingEvents: []
+    })
+  },
+  actors: {
+    networkLogic
+  }
+}).createMachine({
+  id: "editor",
+  context: {
+    pendingEvents: []
+  },
+  invoke: {
+    id: "networkLogic",
+    src: "networkLogic"
+  },
+  on: {
+    ready: { actions: emit(({ event }) => event) },
+    unset: { actions: emit(({ event }) => event) },
+    "value changed": { actions: emit(({ event }) => event) },
+    "invalid value": { actions: emit(({ event }) => event) },
+    error: { actions: emit(({ event }) => event) },
+    selection: { actions: emit(({ event }) => event) },
+    blur: { actions: emit(({ event }) => event) },
+    focus: { actions: emit(({ event }) => event) },
+    online: { actions: emit({ type: "online" }) },
+    offline: { actions: emit({ type: "offline" }) },
+    loading: { actions: emit({ type: "loading" }) },
+    "done loading": { actions: emit({ type: "done loading" }) }
+  },
+  initial: "pristine",
+  states: {
+    pristine: {
+      initial: "idle",
+      states: {
+        idle: {
+          on: {
+            normalizing: {
+              target: "normalizing"
+            },
+            patch: {
+              actions: "defer event",
+              target: "#editor.dirty"
+            },
+            mutation: {
+              actions: "defer event",
+              target: "#editor.dirty"
+            }
+          }
+        },
+        normalizing: {
+          on: {
+            "done normalizing": {
+              target: "idle"
+            },
+            patch: {
+              actions: "defer event"
+            },
+            mutation: {
+              actions: "defer event"
+            }
+          }
+        }
+      }
+    },
+    dirty: {
+      entry: ["emit pending events", "clear pending events"],
+      on: {
+        patch: {
+          actions: "emit patch event"
+        },
+        mutation: {
+          actions: "emit mutation event"
+        }
+      }
+    }
+  }
+}), PortableTextEditorSelectionContext = createContext(null), usePortableTextEditorSelection = () => {
   const selection = useContext(PortableTextEditorSelectionContext);
   if (selection === void 0)
     throw new Error(
@@ -4727,21 +4869,26 @@ const PortableTextEditorSelectionContext = createContext(null), usePortableTextE
   return selection;
 }, debug$3 = debugWithName("component:PortableTextEditor:SelectionProvider"), debugVerbose = debug$3.enabled && !1;
 function PortableTextEditorSelectionProvider(props) {
-  const { change$ } = props, [selection, setSelection] = useState(null);
+  const [selection, setSelection] = useState(null);
   return useEffect(() => {
-    debug$3("Subscribing to selection changes$");
-    const subscription = change$.subscribe((next) => {
-      next.type === "selection" && startTransition(() => {
-        debugVerbose && debug$3("Setting selection"), setSelection(next.selection);
+    debug$3("Subscribing to selection changes");
+    const subscription = props.editorActor.on("selection", (event) => {
+      startTransition(() => {
+        debugVerbose && debug$3("Setting selection"), setSelection(event.selection);
       });
     });
     return () => {
-      debug$3("Unsubscribing to selection changes$"), subscription.unsubscribe();
+      debug$3("Unsubscribing to selection changes"), subscription.unsubscribe();
     };
-  }, [change$]), /* @__PURE__ */ jsx(PortableTextEditorSelectionContext.Provider, { value: selection, children: props.children });
+  }, [props.editorActor]), /* @__PURE__ */ jsx(PortableTextEditorSelectionContext.Provider, { value: selection, children: props.children });
 }
 const debug$2 = debugWithName("component:PortableTextEditor");
 class PortableTextEditor extends Component {
+  /**
+   * @internal
+   * Don't use this API directly. It's subject to change.
+   */
+  editorActor;
   /**
    * An observable of all the editor changes.
    */
@@ -4759,7 +4906,7 @@ class PortableTextEditor extends Component {
       throw new Error('PortableTextEditor: missing "schemaType" property');
     props.incomingPatches$ && console.warn(
       "The prop 'incomingPatches$' is deprecated and renamed to 'patches$'"
-    ), this.change$.next({ type: "loading", isLoading: !0 }), this.schemaTypes = getPortableTextMemberSchemaTypes(
+    ), this.editorActor = createActor(editorMachine), this.editorActor.start(), this.schemaTypes = getPortableTextMemberSchemaTypes(
       props.schemaType.hasOwnProperty("jsonType") ? props.schemaType : compileType(props.schemaType)
     );
   }
@@ -4776,7 +4923,7 @@ class PortableTextEditor extends Component {
       return this.editable.getValue();
   };
   render() {
-    const { onChange, value, children, patches$, incomingPatches$ } = this.props, { change$ } = this, _patches$ = incomingPatches$ || patches$, maxBlocks = typeof this.props.maxBlocks > "u" ? void 0 : Number.parseInt(this.props.maxBlocks.toString(), 10) || void 0, readOnly = !!this.props.readOnly, keyGenerator = this.props.keyGenerator || defaultKeyGenerator;
+    const { value, children, patches$, incomingPatches$ } = this.props, _patches$ = incomingPatches$ || patches$, maxBlocks = typeof this.props.maxBlocks > "u" ? void 0 : Number.parseInt(this.props.maxBlocks.toString(), 10) || void 0, readOnly = !!this.props.readOnly, keyGenerator = this.props.keyGenerator || defaultKeyGenerator;
     return /* @__PURE__ */ jsx(
       SlateContainer,
       {
@@ -4785,18 +4932,26 @@ class PortableTextEditor extends Component {
         patches$: _patches$,
         portableTextEditor: this,
         readOnly,
-        children: /* @__PURE__ */ jsx(PortableTextEditorKeyGeneratorContext.Provider, { value: keyGenerator, children: /* @__PURE__ */ jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxs(PortableTextEditorSelectionProvider, { change$, children: [
-          /* @__PURE__ */ jsx(
-            Synchronizer,
-            {
-              change$,
-              getValue: this.getValue,
-              onChange,
-              value
-            }
-          ),
-          children
-        ] }) }) }) })
+        children: /* @__PURE__ */ jsx(PortableTextEditorKeyGeneratorContext.Provider, { value: keyGenerator, children: /* @__PURE__ */ jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxs(
+          PortableTextEditorSelectionProvider,
+          {
+            editorActor: this.editorActor,
+            children: [
+              /* @__PURE__ */ jsx(
+                Synchronizer,
+                {
+                  editorActor: this.editorActor,
+                  getValue: this.getValue,
+                  onChange: (change) => {
+                    this.props.onChange(change), this.change$.next(change);
+                  },
+                  value
+                }
+              ),
+              children
+            ]
+          }
+        ) }) }) })
       }
     );
   }
@@ -4906,20 +5061,19 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
   useEffect(() => {
     if (!shouldTrackSelectionAndFocus)
       return;
-    const sub = portableTextEditor.change$.subscribe((next) => {
-      if (next.type === "blur") {
-        setFocused(!1), setSelected(!1);
-        return;
+    const onBlur = portableTextEditor.editorActor.on("blur", () => {
+      setFocused(!1), setSelected(!1);
+    }), onFocus = portableTextEditor.editorActor.on("focus", () => {
+      const sel = PortableTextEditor.getSelection(portableTextEditor);
+      sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
+    }), onSelection = portableTextEditor.editorActor.on(
+      "selection",
+      (event) => {
+        event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
       }
-      if (next.type === "focus") {
-        const sel = PortableTextEditor.getSelection(portableTextEditor);
-        sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
-        return;
-      }
-      next.type === "selection" && (next.selection && isEqual(next.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange());
-    });
+    );
     return () => {
-      sub.unsubscribe();
+      onBlur.unsubscribe(), onFocus.unsubscribe(), onSelection.unsubscribe();
     };
   }, [
     path,
@@ -5070,9 +5224,9 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     forwardedRef,
     () => ref.current
   );
-  const rangeDecorationsRef = useRef(rangeDecorations), { change$, schemaTypes } = portableTextEditor, slateEditor = useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = useMemo(
-    () => createWithInsertData(change$, schemaTypes, keyGenerator),
-    [change$, keyGenerator, schemaTypes]
+  const rangeDecorationsRef = useRef(rangeDecorations), { editorActor, schemaTypes } = portableTextEditor, slateEditor = useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = useMemo(
+    () => createWithInsertData(editorActor, schemaTypes, keyGenerator),
+    [editorActor, keyGenerator, schemaTypes]
   ), withHotKeys = useMemo(
     () => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
     [hotkeys, portableTextEditor, schemaTypes]
@@ -5145,10 +5299,13 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
           `Normalized selection from props ${JSON.stringify(normalizedSelection)}`
         );
         const slateRange = toSlateRange(normalizedSelection, slateEditor);
-        slateRange && (Transforms.select(slateEditor, slateRange), slateEditor.operations.some((o) => o.type === "set_selection") || change$.next({ type: "selection", selection: normalizedSelection }), slateEditor.onChange());
+        slateRange && (Transforms.select(slateEditor, slateRange), slateEditor.operations.some((o) => o.type === "set_selection") || editorActor.send({
+          type: "selection",
+          selection: normalizedSelection
+        }), slateEditor.onChange());
       }
     }
-  }, [propsSelection, slateEditor, blockTypeName, change$]), syncRangeDecorations = useCallback(
+  }, [editorActor, propsSelection, slateEditor]), syncRangeDecorations = useCallback(
     (operation) => {
       if (rangeDecorations && rangeDecorations.length > 0) {
         const newSlateRanges = [];
@@ -5192,23 +5349,17 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     [portableTextEditor, rangeDecorations, schemaTypes, slateEditor]
   );
   useEffect(() => {
-    const sub = change$.subscribe((next) => {
-      switch (next.type) {
-        case "ready":
-          restoreSelectionFromProps();
-          break;
-        case "invalidValue":
-          setHasInvalidValue(!0);
-          break;
-        case "value":
-          setHasInvalidValue(!1);
-          break;
-      }
+    const onReady = editorActor.on("ready", () => {
+      restoreSelectionFromProps();
+    }), onInvalidValue = editorActor.on("invalid value", () => {
+      setHasInvalidValue(!0);
+    }), onValueChanged = editorActor.on("value changed", () => {
+      setHasInvalidValue(!1);
     });
     return () => {
-      sub.unsubscribe();
+      onReady.unsubscribe(), onInvalidValue.unsubscribe(), onValueChanged.unsubscribe();
     };
-  }, [change$, restoreSelectionFromProps]), useEffect(() => {
+  }, [editorActor, restoreSelectionFromProps]), useEffect(() => {
     propsSelection && !hasInvalidValue && restoreSelectionFromProps();
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps]);
   const originalApply = useMemo(() => slateEditor.apply, [slateEditor]), [syncedRangeDecorations, setSyncedRangeDecorations] = useState(!1);
@@ -5239,7 +5390,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
         slateEditor.selection,
         schemaTypes
       )?.focus.path || [], onPasteResult = onPaste({ event, value, path, schemaTypes });
-      onPasteResult === void 0 ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event.clipboardData)) : (change$.next({ type: "loading", isLoading: !0 }), Promise.resolve(onPasteResult).then((result) => {
+      onPasteResult === void 0 ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event.clipboardData)) : (editorActor.send({ type: "loading" }), Promise.resolve(onPasteResult).then((result) => {
         debug("Custom paste function from client resolved", result), !result || !result.insert ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event.clipboardData)) : result.insert ? slateEditor.insertFragment(
           toSlateValue(result.insert, {
             schemaTypes
@@ -5249,23 +5400,23 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
           result
         );
       }).catch((error) => (console.error(error), error)).finally(() => {
-        change$.next({ type: "loading", isLoading: !1 });
+        editorActor.send({ type: "done loading" });
       }));
     },
-    [change$, onPaste, portableTextEditor, schemaTypes, slateEditor]
+    [onPaste, portableTextEditor, schemaTypes, slateEditor]
   ), handleOnFocus = useCallback(
     (event) => {
       if (onFocus && onFocus(event), !event.isDefaultPrevented()) {
         const selection = PortableTextEditor.getSelection(portableTextEditor);
-        selection === null && (Transforms.select(slateEditor, Editor.start(slateEditor, [])), slateEditor.onChange()), change$.next({ type: "focus", event });
+        selection === null && (Transforms.select(slateEditor, Editor.start(slateEditor, [])), slateEditor.onChange()), editorActor.send({ type: "focus", event });
         const newSelection = PortableTextEditor.getSelection(portableTextEditor);
-        selection === newSelection && change$.next({
+        selection === newSelection && editorActor.send({
           type: "selection",
           selection
         });
       }
     },
-    [onFocus, portableTextEditor, change$, slateEditor]
+    [editorActor, onFocus, portableTextEditor, slateEditor]
   ), handleClick = useCallback(
     (event) => {
       if (onClick && onClick(event), slateEditor.selection && event.target === event.currentTarget) {
@@ -5282,9 +5433,9 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     [onClick, slateEditor]
   ), handleOnBlur = useCallback(
     (event) => {
-      onBlur && onBlur(event), event.isPropagationStopped() || change$.next({ type: "blur", event });
+      onBlur && onBlur(event), event.isPropagationStopped() || editorActor.send({ type: "blur", event });
     },
-    [change$, onBlur]
+    [editorActor, onBlur]
   ), handleOnBeforeInput = useCallback(
     (event) => {
       onBeforeInput && onBeforeInput(event);
@@ -5390,6 +5541,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
 export {
   PortableTextEditable,
   PortableTextEditor,
+  editorMachine,
   defaultKeyGenerator as keyGenerator,
   usePortableTextEditor,
   usePortableTextEditorSelection