@portabletext/editor 1.6.0 → 1.6.1

package/lib/index.js

@@ -6215,6 +6215,14 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
   return react.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, ref: spanRef, children: content2 }, leaf._key), [leaf, attributes, content2]);
 };
 Leaf.displayName = "Leaf";
+function withSyncRangeDecorations(slateEditor, syncRangeDecorations) {
+  const originalApply = slateEditor.apply;
+  return slateEditor.apply = (op) => {
+    originalApply(op), op.type !== "set_selection" && syncRangeDecorations(op);
+  }, () => {
+    slateEditor.apply = originalApply;
+  };
+}
 const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   position: "absolute",
   userSelect: "none",
@@ -6246,8 +6254,14 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const rangeDecorationsRef = react.useRef(rangeDecorations), editorActor = react.useContext(EditorActorContext), {
     schemaTypes
-  } = portableTextEditor, slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = react.useMemo(() => createWithInsertData(editorActor, schemaTypes), [editorActor, schemaTypes]), withHotKeys = react.useMemo(() => createWithHotkeys(editorActor, portableTextEditor, hotkeys), [editorActor, hotkeys, portableTextEditor]);
-  react.useMemo(() => readOnly ? (debug("Editable is in read only mode"), withInsertData(slateEditor)) : (debug("Editable is in edit mode"), withInsertData(withHotKeys(slateEditor))), [readOnly, slateEditor, withHotKeys, withInsertData]);
+  } = portableTextEditor, slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name;
+  react.useMemo(() => {
+    const withInsertData = createWithInsertData(editorActor, schemaTypes);
+    if (readOnly)
+      return debug("Editable is in read only mode"), withInsertData(slateEditor);
+    const withHotKeys = createWithHotkeys(editorActor, portableTextEditor, hotkeys);
+    return debug("Editable is in edit mode"), withInsertData(withHotKeys(slateEditor));
+  }, [editorActor, hotkeys, portableTextEditor, readOnly, schemaTypes, slateEditor]);
   const renderElement = react.useCallback((eProps) => /* @__PURE__ */ jsxRuntime.jsx(Element, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, schemaTypes, spellCheck }), [schemaTypes, spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = react.useCallback((lProps) => {
     if (lProps.leaf._type === "span") {
       let rendered = /* @__PURE__ */ jsxRuntime.jsx(Leaf, { ...lProps, editorActor, schemaTypes, renderAnnotation, renderChild, renderDecorator, readOnly });
@@ -6322,16 +6336,15 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   }, [editorActor, restoreSelectionFromProps]), react.useEffect(() => {
     propsSelection && !hasInvalidValue && restoreSelectionFromProps();
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps]);
-  const originalApply = react.useMemo(() => slateEditor.apply, [slateEditor]), [syncedRangeDecorations, setSyncedRangeDecorations] = react.useState(!1);
+  const [syncedRangeDecorations, setSyncedRangeDecorations] = react.useState(!1);
   react.useEffect(() => {
     syncedRangeDecorations || (setSyncedRangeDecorations(!0), syncRangeDecorations());
   }, [syncRangeDecorations, syncedRangeDecorations]), react.useEffect(() => {
     isEqual__default.default(rangeDecorations, rangeDecorationsRef.current) || syncRangeDecorations(), rangeDecorationsRef.current = rangeDecorations;
-  }, [rangeDecorations, syncRangeDecorations]), react.useEffect(() => (slateEditor.apply = (op) => {
-    originalApply(op), op.type !== "set_selection" && syncRangeDecorations(op);
-  }, () => {
-    slateEditor.apply = originalApply;
-  }), [originalApply, slateEditor, syncRangeDecorations]);
+  }, [rangeDecorations, syncRangeDecorations]), react.useEffect(() => {
+    const teardown = withSyncRangeDecorations(slateEditor, syncRangeDecorations);
+    return () => teardown();
+  }, [slateEditor, syncRangeDecorations]);
   const handleCopy = react.useCallback((event) => {
     onCopy && onCopy(event) !== void 0 && event.preventDefault();
   }, [onCopy]), handlePaste = react.useCallback((event_0) => {