@portabletext/editor 1.3.0 → 1.3.1

package/lib/index.js

@@ -2733,16 +2733,16 @@ const debug$h = debugWithName("plugin:withUndoRedo"), debugVerbose$3 = debug$h.e
 }, getRemotePatches = (editor) => (REMOTE_PATCHES.get(editor) || REMOTE_PATCHES.set(editor, []), REMOTE_PATCHES.get(editor) || []);
 function createWithUndoRedo(options) {
   const {
+    editorActor,
     readOnly,
-    patches$,
     blockSchemaType
   } = options;
   return (editor) => {
     let previousSnapshot = fromSlateValue(editor.children, blockSchemaType.name);
     const remotePatches = getRemotePatches(editor);
-    patches$ && editor.subscriptions.push(() => {
+    editor.subscriptions.push(() => {
       debug$h("Subscribing to patches");
-      const sub = patches$.subscribe(({
+      const sub = editorActor.on("patches", ({
         patches: patches2,
         snapshot
       }) => {
@@ -2982,7 +2982,6 @@ function findOperationTargetBlock(editor, operation) {
 const debug$g = debugWithName("plugin:withPatches");
 function createWithPatches({
   editorActor,
-  patches$,
   patchFunctions,
   readOnly,
   schemaTypes
@@ -3018,11 +3017,11 @@ function createWithPatches({
       const remotePatches = patches2.filter((p) => p.origin !== "local");
       remotePatches.length !== 0 && (bufferedPatches = bufferedPatches.concat(remotePatches), handleBufferedRemotePatches());
     };
-    return patches$ && editor.subscriptions.push(() => {
-      debug$g("Subscribing to patches$");
-      const sub = patches$.subscribe(handlePatches);
+    return editor.subscriptions.push(() => {
+      debug$g("Subscribing to remote patches");
+      const sub = editorActor.on("patches", handlePatches);
       return () => {
-        debug$g("Unsubscribing to patches$"), sub.unsubscribe();
+        debug$g("Unsubscribing to remote patches"), sub.unsubscribe();
       };
     }), editor.apply = (operation) => {
       if (readOnly)
@@ -4511,7 +4510,6 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
   const e = editor, {
     editorActor,
     portableTextEditor,
-    patches$,
     readOnly,
     maxBlocks
   } = options, {
@@ -4527,13 +4525,12 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
     schemaTypes
   }), withEditableAPI = createWithEditableAPI(editorActor, portableTextEditor, schemaTypes), withPatches = createWithPatches({
     editorActor,
-    patches$,
     patchFunctions: operationToPatches,
     readOnly,
     schemaTypes
   }), withMaxBlocks = createWithMaxBlocks(maxBlocks || -1), withPortableTextLists = createWithPortableTextLists(schemaTypes), withUndoRedo = createWithUndoRedo({
+    editorActor,
     readOnly,
-    patches$,
     blockSchemaType: schemaTypes.block
   }), withPortableTextMarkModel = createWithPortableTextMarkModel(editorActor, schemaTypes), withPortableTextBlockStyle = createWithPortableTextBlockStyle(editorActor, schemaTypes), withPlaceholderBlock = createWithPlaceholderBlock(), withUtils = createWithUtils({
     editorActor,
@@ -4566,15 +4563,14 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
   };
 }, debug$6 = debugWithName("component:PortableTextEditor:SlateContainer");
 function SlateContainer(props) {
-  const $ = reactCompilerRuntime.c(28), {
+  const $ = reactCompilerRuntime.c(26), {
     editorActor,
-    patches$,
     portableTextEditor,
     readOnly,
     maxBlocks
   } = props;
   let t0;
-  $[0] !== editorActor || $[1] !== maxBlocks || $[2] !== patches$ || $[3] !== portableTextEditor || $[4] !== readOnly ? (t0 = () => {
+  $[0] !== editorActor || $[1] !== maxBlocks || $[2] !== portableTextEditor || $[3] !== readOnly ? (t0 = () => {
     debug$6("Creating new Slate editor instance");
     const {
       editor,
@@ -4582,43 +4578,41 @@ function SlateContainer(props) {
     } = withPlugins(slateReact.withReact(slate.createEditor()), {
       editorActor,
       maxBlocks,
-      patches$,
       portableTextEditor,
       readOnly
     });
     return KEY_TO_VALUE_ELEMENT.set(editor, {}), KEY_TO_SLATE_ELEMENT.set(editor, {}), [editor, _sub];
-  }, $[0] = editorActor, $[1] = maxBlocks, $[2] = patches$, $[3] = portableTextEditor, $[4] = readOnly, $[5] = t0) : t0 = $[5];
+  }, $[0] = editorActor, $[1] = maxBlocks, $[2] = portableTextEditor, $[3] = readOnly, $[4] = t0) : t0 = $[4];
   const [t1] = react.useState(t0), [slateEditor, subscribe] = t1;
   let t2, t3;
-  $[6] !== subscribe ? (t2 = () => {
+  $[5] !== subscribe ? (t2 = () => {
     const unsubscribe = subscribe();
     return () => {
       unsubscribe();
     };
-  }, t3 = [subscribe], $[6] = subscribe, $[7] = t2, $[8] = t3) : (t2 = $[7], t3 = $[8]), react.useEffect(t2, t3);
+  }, t3 = [subscribe], $[5] = subscribe, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3);
   let t4, t5;
-  $[9] !== slateEditor || $[10] !== editorActor || $[11] !== maxBlocks || $[12] !== patches$ || $[13] !== portableTextEditor || $[14] !== readOnly ? (t4 = () => {
+  $[8] !== slateEditor || $[9] !== editorActor || $[10] !== maxBlocks || $[11] !== portableTextEditor || $[12] !== readOnly ? (t4 = () => {
     debug$6("Re-initializing plugin chain"), withPlugins(slateEditor, {
       editorActor,
       maxBlocks,
-      patches$,
       portableTextEditor,
       readOnly
     });
-  }, t5 = [editorActor, portableTextEditor, maxBlocks, readOnly, patches$, slateEditor], $[9] = slateEditor, $[10] = editorActor, $[11] = maxBlocks, $[12] = patches$, $[13] = portableTextEditor, $[14] = readOnly, $[15] = t4, $[16] = t5) : (t4 = $[15], t5 = $[16]), react.useEffect(t4, t5);
+  }, t5 = [editorActor, portableTextEditor, maxBlocks, readOnly, slateEditor], $[8] = slateEditor, $[9] = editorActor, $[10] = maxBlocks, $[11] = portableTextEditor, $[12] = readOnly, $[13] = t4, $[14] = t5) : (t4 = $[13], t5 = $[14]), react.useEffect(t4, t5);
   let t6, t7;
-  $[17] !== slateEditor ? (t7 = slateEditor.pteCreateTextBlock({
+  $[15] !== slateEditor ? (t7 = slateEditor.pteCreateTextBlock({
     decorators: []
-  }), $[17] = slateEditor, $[18] = t7) : t7 = $[18];
+  }), $[15] = slateEditor, $[16] = t7) : t7 = $[16];
   let t8;
-  $[19] !== t7 ? (t8 = [t7], $[19] = t7, $[20] = t8) : t8 = $[20], t6 = t8;
+  $[17] !== t7 ? (t8 = [t7], $[17] = t7, $[18] = t8) : t8 = $[18], t6 = t8;
   const initialValue = t6;
   let t9, t10;
-  $[21] !== slateEditor ? (t9 = () => () => {
+  $[19] !== slateEditor ? (t9 = () => () => {
     debug$6("Destroying Slate editor"), slateEditor.destroy();
-  }, t10 = [slateEditor], $[21] = slateEditor, $[22] = t9, $[23] = t10) : (t9 = $[22], t10 = $[23]), react.useEffect(t9, t10);
+  }, t10 = [slateEditor], $[19] = slateEditor, $[20] = t9, $[21] = t10) : (t9 = $[20], t10 = $[21]), react.useEffect(t9, t10);
   let t11;
-  return $[24] !== slateEditor || $[25] !== initialValue || $[26] !== props.children ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, { editor: slateEditor, initialValue, children: props.children }), $[24] = slateEditor, $[25] = initialValue, $[26] = props.children, $[27] = t11) : t11 = $[27], t11;
+  return $[22] !== slateEditor || $[23] !== initialValue || $[24] !== props.children ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, { editor: slateEditor, initialValue, children: props.children }), $[22] = slateEditor, $[23] = initialValue, $[24] = props.children, $[25] = t11) : t11 = $[25], t11;
 }
 SlateContainer.displayName = "SlateContainer";
 const PortableTextEditorReadOnlyContext = react.createContext(!1), usePortableTextEditorReadOnlyStatus = () => {
@@ -4815,20 +4809,28 @@ 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(), readOnly = usePortableTextEditorReadOnlyStatus(), {
+  const $ = reactCompilerRuntime.c(35), portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), {
     editorActor,
     getValue,
     onChange,
     value
-  } = props, pendingPatches = react.useRef([]), syncValue = useSyncValue({
+  } = props;
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
+  const pendingPatches = react.useRef(t0);
+  let t1;
+  $[1] !== editorActor || $[2] !== portableTextEditor || $[3] !== readOnly ? (t1 = {
     editorActor,
     portableTextEditor,
     readOnly
-  }), slateEditor = slateReact.useSlate();
-  react.useEffect(() => {
+  }, $[1] = editorActor, $[2] = portableTextEditor, $[3] = readOnly, $[4] = t1) : t1 = $[4];
+  const syncValue = useSyncValue(t1), slateEditor = slateReact.useSlate();
+  let t2, t3;
+  $[5] !== slateEditor ? (t2 = () => {
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !1);
-  }, [slateEditor]);
-  const onFlushPendingPatches = react.useCallback(() => {
+  }, t3 = [slateEditor], $[5] = slateEditor, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3);
+  let t4;
+  $[8] !== getValue || $[9] !== editorActor || $[10] !== slateEditor ? (t4 = () => {
     if (pendingPatches.current.length > 0) {
       debug$4("Flushing pending patches"), debugVerbose$1 && debug$4(`Patches:
 ${JSON.stringify(pendingPatches.current, null, 2)}`);
@@ -4840,61 +4842,68 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
       }), pendingPatches.current = [];
     }
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !1);
-  }, [editorActor, slateEditor, getValue]), onFlushPendingPatchesThrottled = react.useMemo(() => throttle__default.default(() => {
-    if (slate.Editor.isNormalizing(slateEditor)) {
-      onFlushPendingPatches();
-      return;
-    }
-    onFlushPendingPatchesThrottled();
-  }, FLUSH_PATCHES_THROTTLED_MS, {
-    leading: !1,
-    trailing: !0
-  }), [onFlushPendingPatches, slateEditor]);
-  react.useEffect(() => () => {
+  }, $[8] = getValue, $[9] = editorActor, $[10] = slateEditor, $[11] = t4) : t4 = $[11];
+  const onFlushPendingPatches = t4;
+  let t5, t6;
+  $[12] !== onFlushPendingPatches ? (t5 = () => () => {
     onFlushPendingPatches();
-  }, [onFlushPendingPatches]);
-  const handleChange = useEffectEvent.useEffectEvent((change) => onChange(change));
-  react.useEffect(() => {
+  }, t6 = [onFlushPendingPatches], $[12] = onFlushPendingPatches, $[13] = t5, $[14] = t6) : (t5 = $[13], t6 = $[14]), react.useEffect(t5, t6);
+  let t7;
+  $[15] !== onChange ? (t7 = (change) => onChange(change), $[15] = onChange, $[16] = t7) : t7 = $[16];
+  const handleChange = useEffectEvent.useEffectEvent(t7);
+  let t8, t9;
+  $[17] !== slateEditor || $[18] !== onFlushPendingPatches || $[19] !== editorActor || $[20] !== handleChange ? (t8 = () => {
+    const onFlushPendingPatchesThrottled = throttle__default.default(() => {
+      if (slate.Editor.isNormalizing(slateEditor)) {
+        onFlushPendingPatches();
+        return;
+      }
+      onFlushPendingPatchesThrottled();
+    }, FLUSH_PATCHES_THROTTLED_MS, {
+      leading: !1,
+      trailing: !0
+    });
     debug$4("Subscribing to editor changes");
     const sub = editorActor.on("*", (event) => {
-      switch (event.type) {
-        case "patch":
+      bb18: switch (event.type) {
+        case "patch": {
           IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !0), pendingPatches.current.push(event.patch), onFlushPendingPatchesThrottled(), handleChange(event);
-          break;
+          break bb18;
+        }
         case "loading": {
           handleChange({
             type: "loading",
             isLoading: !0
           });
-          break;
+          break bb18;
         }
         case "done loading": {
           handleChange({
             type: "loading",
             isLoading: !1
           });
-          break;
+          break bb18;
         }
         case "offline": {
           handleChange({
             type: "connection",
             value: "offline"
           });
-          break;
+          break bb18;
         }
         case "online": {
           handleChange({
             type: "connection",
             value: "online"
           });
-          break;
+          break bb18;
         }
         case "value changed": {
           handleChange({
             type: "value",
             value: event.value
           });
-          break;
+          break bb18;
         }
         case "invalid value": {
           handleChange({
@@ -4902,15 +4911,17 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
             resolution: event.resolution,
             value: event.value
           });
-          break;
+          break bb18;
         }
         case "error": {
           handleChange({
             ...event,
             level: "warning"
           });
-          break;
+          break bb18;
         }
+        case "patches":
+          break bb18;
         default:
           handleChange(event);
       }
@@ -4918,24 +4929,26 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
     return () => {
       debug$4("Unsubscribing to changes"), sub.unsubscribe();
     };
-  }, [handleChange, editorActor, onFlushPendingPatchesThrottled, slateEditor]);
-  const handleOnline = react.useCallback(() => {
+  }, t9 = [editorActor, handleChange, onFlushPendingPatches, slateEditor], $[17] = slateEditor, $[18] = onFlushPendingPatches, $[19] = editorActor, $[20] = handleChange, $[21] = t8, $[22] = t9) : (t8 = $[21], t9 = $[22]), react.useEffect(t8, t9);
+  let t10;
+  $[23] !== syncValue || $[24] !== value ? (t10 = () => {
     debug$4("Editor is online, syncing from props.value"), syncValue(value);
-  }, [syncValue, value]);
-  react.useEffect(() => {
-    const subscription = editorActor.on("online", () => {
-      portableTextEditor.props.patches$ && handleOnline();
-    });
+  }, $[23] = syncValue, $[24] = value, $[25] = t10) : t10 = $[25];
+  const handleOnline = t10;
+  let t11, t12;
+  $[26] !== editorActor || $[27] !== handleOnline ? (t11 = () => {
+    const subscription = editorActor.on("online", handleOnline);
     return () => {
       subscription.unsubscribe();
     };
-  }, [handleOnline, editorActor, portableTextEditor.props.patches$]);
+  }, t12 = [handleOnline, editorActor], $[26] = editorActor, $[27] = handleOnline, $[28] = t11, $[29] = t12) : (t11 = $[28], t12 = $[29]), react.useEffect(t11, t12);
   const isInitialValueFromProps = react.useRef(!0);
-  return react.useEffect(() => {
+  let t13, t14;
+  return $[30] !== syncValue || $[31] !== value || $[32] !== editorActor ? (t13 = () => {
     debug$4("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (editorActor.send({
       type: "ready"
     }), isInitialValueFromProps.current = !1);
-  }, [editorActor, syncValue, value]), null;
+  }, t14 = [editorActor, syncValue, value], $[30] = syncValue, $[31] = value, $[32] = editorActor, $[33] = t13, $[34] = t14) : (t13 = $[33], t14 = $[34]), react.useEffect(t13, t14), null;
 }
 Synchronizer.displayName = "Synchronizer";
 const EditorActorContext = react.createContext({}), insertBreakActionImplementation = ({
@@ -5430,6 +5443,11 @@ const networkLogic = xstate.fromCallback(({
         type: "loading"
       })
     },
+    patches: {
+      actions: xstate.emit(({
+        event
+      }) => event)
+    },
     "done loading": {
       actions: xstate.emit({
         type: "done loading"
@@ -5578,12 +5596,15 @@ class PortableTextEditor extends react.Component {
       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;
-    return /* @__PURE__ */ jsxRuntime.jsx(EditorActorContext.Provider, { value: this.editorActor, children: /* @__PURE__ */ jsxRuntime.jsx(SlateContainer, { editorActor: this.editorActor, maxBlocks, patches$: _patches$, portableTextEditor: this, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxRuntime.jsxs(PortableTextEditorSelectionProvider, { editorActor: this.editorActor, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Synchronizer, { editorActor: this.editorActor, getValue: this.getValue, onChange: (change) => {
-        this.props.onChange(change), this.change$.next(change);
-      }, value }),
-      children
-    ] }) }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      _patches$ ? /* @__PURE__ */ jsxRuntime.jsx(RoutePatchesObservableToEditorActor, { editorActor: this.editorActor, patches$: _patches$ }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(EditorActorContext.Provider, { value: this.editorActor, children: /* @__PURE__ */ jsxRuntime.jsx(SlateContainer, { editorActor: this.editorActor, maxBlocks, portableTextEditor: this, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxRuntime.jsxs(PortableTextEditorSelectionProvider, { editorActor: this.editorActor, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Synchronizer, { editorActor: this.editorActor, getValue: this.getValue, onChange: (change) => {
+          this.props.onChange(change), this.change$.next(change);
+        }, value }),
+        children
+      ] }) }) }) }) })
+    ] });
   }
   // Static API methods
   static activeAnnotations = (editor) => editor && editor.editable ? editor.editable.activeAnnotations() : [];
@@ -5635,6 +5656,21 @@ class PortableTextEditor extends react.Component {
   };
   static isSelectionsOverlapping = (editor, selectionA, selectionB) => editor.editable?.isSelectionsOverlapping(selectionA, selectionB);
 }
+function RoutePatchesObservableToEditorActor(props) {
+  const $ = reactCompilerRuntime.c(4);
+  let t0, t1;
+  return $[0] !== props.patches$ || $[1] !== props.editorActor ? (t0 = () => {
+    const subscription = props.patches$.subscribe((payload) => {
+      props.editorActor.send({
+        type: "patches",
+        ...payload
+      });
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, t1 = [props.editorActor, props.patches$], $[0] = props.patches$, $[1] = props.editorActor, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), react.useEffect(t0, t1), null;
+}
 const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (props) => {
   const {
     editorActor,