@portabletext/editor 1.1.12-canary.2 → 1.1.12-canary.3

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), react = require("react"), slate = require("slate"), slateReact = require("slate-react"), debug$m = require("debug"), types = require("@sanity/types"), styledComponents = require("styled-components"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), schema = require("@sanity/schema"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), flatten = require("lodash/flatten.js"), isHotkeyEsm = require("is-hotkey-esm"), blockTools = require("@sanity/block-tools"), isPlainObject = require("lodash/isPlainObject.js"), throttle = require("lodash/throttle.js"), useEffectEvent = require("use-effect-event"), debounce = require("lodash/debounce.js"), content = require("@sanity/util/content");
+var jsxRuntime = require("react/jsx-runtime"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), react = require("react"), slate = require("slate"), slateReact = require("slate-react"), debug$m = require("debug"), types = require("@sanity/types"), reactCompilerRuntime = require("react-compiler-runtime"), styledComponents = require("styled-components"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), schema = require("@sanity/schema"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), flatten = require("lodash/flatten.js"), isHotkeyEsm = require("is-hotkey-esm"), blockTools = require("@sanity/block-tools"), isPlainObject = require("lodash/isPlainObject.js"), throttle = require("lodash/throttle.js"), useEffectEvent = require("use-effect-event"), debounce = require("lodash/debounce.js"), content = require("@sanity/util/content");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -779,6 +779,25 @@ function getFocusBlockObject(context) {
     path: focusBlock.path
   } : void 0;
 }
+function getFocusChild(context) {
+  const focusBlock = getFocusTextBlock(context);
+  if (!focusBlock)
+    return;
+  const key = context.selection && types.isKeySegment(context.selection.focus.path[2]) ? context.selection.focus.path[2]._key : void 0, node = key ? focusBlock.node.children.find((span) => span._key === key) : void 0;
+  return node && key ? {
+    node,
+    path: [...focusBlock.path, "children", {
+      _key: key
+    }]
+  } : void 0;
+}
+function getFocusSpan(context) {
+  const focusChild = getFocusChild(context);
+  return focusChild && types.isPortableTextSpan(focusChild.node) ? {
+    node: focusChild.node,
+    path: focusChild.path
+  } : void 0;
+}
 function getSelectionStartBlock(context) {
   const key = context.selection.backward ? types.isKeySegment(context.selection.focus.path[0]) ? context.selection.focus.path[0]._key : void 0 : types.isKeySegment(context.selection.anchor.path[0]) ? context.selection.anchor.path[0]._key : void 0, node = key ? context.value.find((block) => block._key === key) : void 0;
   return node && key ? {
@@ -845,14 +864,7 @@ function getNextBlock(context) {
 function isEmptyTextBlock(block) {
   return block.children.length === 1 && block.children[0].text === "";
 }
-const softReturn = {
-  on: "insert soft break",
-  actions: [() => [{
-    type: "insert text",
-    text: `
-`
-  }]]
-}, breakingVoidBlock = {
+const breakingVoidBlock = {
   on: "insert break",
   guard: ({
     context
@@ -939,7 +951,50 @@ const softReturn = {
       }
     }
   }]]
-}, coreBehaviors = [softReturn, breakingVoidBlock, deletingEmptyTextBlockAfterBlockObject, deletingEmptyTextBlockBeforeBlockObject], debug$k = debugWithName("operationToPatches");
+}, coreBlockObjectBehaviors = [breakingVoidBlock, deletingEmptyTextBlockAfterBlockObject, deletingEmptyTextBlockBeforeBlockObject], clearListOnBackspace = {
+  on: "delete backward",
+  guard: ({
+    context
+  }) => {
+    const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
+    return !selectionCollapsed || !focusTextBlock || !focusSpan ? !1 : focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection.focus.offset === 0 && focusTextBlock.node.level === 1 ? {
+      focusTextBlock
+    } : !1;
+  },
+  actions: [(_, {
+    focusTextBlock
+  }) => [{
+    type: "unset block",
+    props: ["listItem", "level"],
+    paths: [focusTextBlock.path]
+  }]]
+}, unindentListOnBackspace = {
+  on: "delete backward",
+  guard: ({
+    context
+  }) => {
+    const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
+    return !selectionCollapsed || !focusTextBlock || !focusSpan ? !1 : focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection.focus.offset === 0 && focusTextBlock.node.level !== void 0 && focusTextBlock.node.level > 1 ? {
+      focusTextBlock,
+      level: focusTextBlock.node.level - 1
+    } : !1;
+  },
+  actions: [(_, {
+    focusTextBlock,
+    level
+  }) => [{
+    type: "set block",
+    level,
+    paths: [focusTextBlock.path]
+  }]]
+}, coreListBehaviors = [clearListOnBackspace, unindentListOnBackspace], softReturn = {
+  on: "insert soft break",
+  actions: [() => [{
+    type: "insert text",
+    text: `
+`
+  }]]
+}, coreBehaviors = [softReturn, ...coreBlockObjectBehaviors, ...coreListBehaviors], debug$k = debugWithName("operationToPatches");
 function createOperationToPatches(types2) {
   const textBlockName = types2.block.name;
   function insertTextPatch(editor, operation, beforeValue) {
@@ -4684,28 +4739,20 @@ 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 $ = reactCompilerRuntime.c(36), portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), {
+  const portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), {
     editorActor,
     getValue,
     onChange,
     value
-  } = 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 = {
+  } = props, pendingPatches = react.useRef([]), syncValue = useSyncValue({
     editorActor,
     portableTextEditor,
     readOnly
-  }, $[1] = editorActor, $[2] = portableTextEditor, $[3] = readOnly, $[4] = t1) : t1 = $[4];
-  const syncValue = useSyncValue(t1), slateEditor = slateReact.useSlate();
-  let t2, t3;
-  $[5] !== slateEditor ? (t2 = () => {
+  }), slateEditor = slateReact.useSlate();
+  react.useEffect(() => {
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !1);
-  }, 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 = () => {
+  }, [slateEditor]);
+  const onFlushPendingPatches = react.useCallback(() => {
     if (pendingPatches.current.length > 0) {
       debug$4("Flushing pending patches"), debugVerbose$1 && debug$4(`Patches:
 ${JSON.stringify(pendingPatches.current, null, 2)}`);
@@ -4717,68 +4764,61 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
       }), pendingPatches.current = [];
     }
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !1);
-  }, $[8] = getValue, $[9] = editorActor, $[10] = slateEditor, $[11] = t4) : t4 = $[11];
-  const onFlushPendingPatches = t4;
-  let t5, t6;
-  $[12] !== onFlushPendingPatches ? (t5 = () => () => {
+  }, [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(() => () => {
     onFlushPendingPatches();
-  }, 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
-    });
+  }, [onFlushPendingPatches]);
+  const handleChange = useEffectEvent.useEffectEvent((change) => onChange(change));
+  react.useEffect(() => {
     debug$4("Subscribing to editor changes");
     const sub = editorActor.on("*", (event) => {
-      bb18: switch (event.type) {
-        case "patch": {
+      switch (event.type) {
+        case "patch":
           IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !0), pendingPatches.current.push(event.patch), onFlushPendingPatchesThrottled(), handleChange(event);
-          break bb18;
-        }
+          break;
         case "loading": {
           handleChange({
             type: "loading",
             isLoading: !0
           });
-          break bb18;
+          break;
         }
         case "done loading": {
           handleChange({
             type: "loading",
             isLoading: !1
           });
-          break bb18;
+          break;
         }
         case "offline": {
           handleChange({
             type: "connection",
             value: "offline"
           });
-          break bb18;
+          break;
         }
         case "online": {
           handleChange({
             type: "connection",
             value: "online"
           });
-          break bb18;
+          break;
         }
         case "value changed": {
           handleChange({
             type: "value",
             value: event.value
           });
-          break bb18;
+          break;
         }
         case "invalid value": {
           handleChange({
@@ -4786,14 +4826,14 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
             resolution: event.resolution,
             value: event.value
           });
-          break bb18;
+          break;
         }
         case "error": {
           handleChange({
             ...event,
             level: "warning"
           });
-          break bb18;
+          break;
         }
         default:
           handleChange(event);
@@ -4802,28 +4842,24 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
     return () => {
       debug$4("Unsubscribing to changes"), sub.unsubscribe();
     };
-  }, 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 = () => {
+  }, [handleChange, editorActor, onFlushPendingPatchesThrottled, slateEditor]);
+  const handleOnline = react.useCallback(() => {
     debug$4("Editor is online, syncing from props.value"), syncValue(value);
-  }, $[23] = syncValue, $[24] = value, $[25] = t10) : t10 = $[25];
-  const handleOnline = t10;
-  let t11, t12;
-  $[26] !== editorActor || $[27] !== portableTextEditor.props.patches$ || $[28] !== handleOnline ? (t11 = () => {
+  }, [syncValue, value]);
+  react.useEffect(() => {
     const subscription = editorActor.on("online", () => {
       portableTextEditor.props.patches$ && handleOnline();
     });
     return () => {
       subscription.unsubscribe();
     };
-  }, t12 = [handleOnline, editorActor, portableTextEditor.props.patches$], $[26] = editorActor, $[27] = portableTextEditor.props.patches$, $[28] = handleOnline, $[29] = t11, $[30] = t12) : (t11 = $[29], t12 = $[30]), react.useEffect(t11, t12);
+  }, [handleOnline, editorActor, portableTextEditor.props.patches$]);
   const isInitialValueFromProps = react.useRef(!0);
-  let t13, t14;
-  return $[31] !== syncValue || $[32] !== value || $[33] !== editorActor ? (t13 = () => {
+  return react.useEffect(() => {
     debug$4("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (editorActor.send({
       type: "ready"
     }), isInitialValueFromProps.current = !1);
-  }, t14 = [editorActor, syncValue, value], $[31] = syncValue, $[32] = value, $[33] = editorActor, $[34] = t13, $[35] = t14) : (t13 = $[34], t14 = $[35]), react.useEffect(t13, t14), null;
+  }, [editorActor, syncValue, value]), null;
 }
 Synchronizer.displayName = "Synchronizer";
 const EditorActorContext = react.createContext({}), insertBreakActionImplementation = ({
@@ -5647,14 +5683,6 @@ 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",
@@ -5662,9 +5690,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   left: 0,
   right: 0
 }, PortableTextEditable = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(122);
-  let rangeDecorations, hotkeys, spellCheck, renderBlock, renderChild, renderListItem, renderStyle, renderAnnotation, renderDecorator, renderPlaceholder, propsSelection, onCopy, onPaste, onFocus, onClick, onBlur, onBeforeInput, scrollSelectionIntoView, restProps;
-  $[0] !== props ? ({
+  const {
     hotkeys,
     onBlur,
     onFocus,
@@ -5684,30 +5710,13 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
     scrollSelectionIntoView,
     spellCheck,
     ...restProps
-  } = props, $[0] = props, $[1] = rangeDecorations, $[2] = hotkeys, $[3] = spellCheck, $[4] = renderBlock, $[5] = renderChild, $[6] = renderListItem, $[7] = renderStyle, $[8] = renderAnnotation, $[9] = renderDecorator, $[10] = renderPlaceholder, $[11] = propsSelection, $[12] = onCopy, $[13] = onPaste, $[14] = onFocus, $[15] = onClick, $[16] = onBlur, $[17] = onBeforeInput, $[18] = scrollSelectionIntoView, $[19] = restProps) : (rangeDecorations = $[1], hotkeys = $[2], spellCheck = $[3], renderBlock = $[4], renderChild = $[5], renderListItem = $[6], renderStyle = $[7], renderAnnotation = $[8], renderDecorator = $[9], renderPlaceholder = $[10], propsSelection = $[11], onCopy = $[12], onPaste = $[13], onFocus = $[14], onClick = $[15], onBlur = $[16], onBeforeInput = $[17], scrollSelectionIntoView = $[18], restProps = $[19]);
-  const portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), ref = react.useRef(null), [editableElement, setEditableElement] = react.useState(null), [hasInvalidValue, setHasInvalidValue] = react.useState(!1);
-  let t0;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[20] = t0) : t0 = $[20];
-  const [rangeDecorationState, setRangeDecorationsState] = react.useState(t0);
-  let t1;
-  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[21] = t1) : t1 = $[21], react.useImperativeHandle(forwardedRef, t1);
+  } = props, portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), ref = react.useRef(null), [editableElement, setEditableElement] = react.useState(null), [hasInvalidValue, setHasInvalidValue] = react.useState(!1), [rangeDecorationState, setRangeDecorationsState] = react.useState([]);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
   const rangeDecorationsRef = react.useRef(rangeDecorations), editorActor = react.useContext(EditorActorContext), {
     schemaTypes
-  } = portableTextEditor, slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name;
-  bb0: {
-    const withInsertData = createWithInsertData(editorActor, schemaTypes);
-    if (readOnly) {
-      debug("Editable is in read only mode"), withInsertData(slateEditor);
-      break bb0;
-    }
-    const withHotKeys = createWithHotkeys(portableTextEditor, hotkeys);
-    debug("Editable is in edit mode"), withInsertData(withHotKeys(slateEditor));
-  }
-  let t3;
-  $[22] !== readOnly || $[23] !== renderBlock || $[24] !== renderChild || $[25] !== renderListItem || $[26] !== renderStyle || $[27] !== schemaTypes || $[28] !== spellCheck ? (t3 = (eProps) => /* @__PURE__ */ jsxRuntime.jsx(Element, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, schemaTypes, spellCheck }), $[22] = readOnly, $[23] = renderBlock, $[24] = renderChild, $[25] = renderListItem, $[26] = renderStyle, $[27] = schemaTypes, $[28] = spellCheck, $[29] = t3) : t3 = $[29];
-  const renderElement = t3;
-  let t4;
-  $[30] !== editorActor || $[31] !== schemaTypes || $[32] !== renderAnnotation || $[33] !== renderChild || $[34] !== renderDecorator || $[35] !== readOnly || $[36] !== renderPlaceholder ? (t4 = (lProps) => {
+  } = portableTextEditor, slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = react.useMemo(() => createWithInsertData(editorActor, schemaTypes), [editorActor, schemaTypes]), withHotKeys = react.useMemo(() => createWithHotkeys(portableTextEditor, hotkeys), [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]);
+  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 });
       if (renderPlaceholder && lProps.leaf.placeholder && lProps.text.text === "")
@@ -5721,10 +5730,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       })), rendered;
     }
     return lProps.children;
-  }, $[30] = editorActor, $[31] = schemaTypes, $[32] = renderAnnotation, $[33] = renderChild, $[34] = renderDecorator, $[35] = readOnly, $[36] = renderPlaceholder, $[37] = t4) : t4 = $[37];
-  const renderLeaf = t4;
-  let t5;
-  $[38] !== propsSelection || $[39] !== slateEditor || $[40] !== blockTypeName || $[41] !== editorActor ? (t5 = () => {
+  }, [editorActor, readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder, schemaTypes]), restoreSelectionFromProps = react.useCallback(() => {
     if (propsSelection) {
       debug(`Selection from props ${JSON.stringify(propsSelection)}`);
       const normalizedSelection = normalizeSelection(propsSelection, fromSlateValue(slateEditor.children, blockTypeName));
@@ -5737,10 +5743,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         }), slateEditor.onChange());
       }
     }
-  }, $[38] = propsSelection, $[39] = slateEditor, $[40] = blockTypeName, $[41] = editorActor, $[42] = t5) : t5 = $[42];
-  const restoreSelectionFromProps = t5;
-  let t6;
-  $[43] !== rangeDecorations || $[44] !== slateEditor || $[45] !== portableTextEditor || $[46] !== schemaTypes ? (t6 = (operation) => {
+  }, [blockTypeName, editorActor, propsSelection, slateEditor]), syncRangeDecorations = react.useCallback((operation) => {
     if (rangeDecorations && rangeDecorations.length > 0) {
       const newSlateRanges = [];
       if (rangeDecorations.forEach((rangeDecorationItem) => {
@@ -5772,10 +5775,8 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       }
     }
     setRangeDecorationsState((rangeDecorationState_0) => rangeDecorationState_0.length > 0 ? [] : rangeDecorationState_0);
-  }, $[43] = rangeDecorations, $[44] = slateEditor, $[45] = portableTextEditor, $[46] = schemaTypes, $[47] = t6) : t6 = $[47];
-  const syncRangeDecorations = t6;
-  let t7, t8;
-  $[48] !== editorActor || $[49] !== restoreSelectionFromProps ? (t7 = () => {
+  }, [portableTextEditor, rangeDecorations, schemaTypes, slateEditor]);
+  react.useEffect(() => {
     const onReady = editorActor.on("ready", () => {
       restoreSelectionFromProps();
     }), onInvalidValue = editorActor.on("invalid value", () => {
@@ -5786,32 +5787,22 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
     return () => {
       onReady.unsubscribe(), onInvalidValue.unsubscribe(), onValueChanged.unsubscribe();
     };
-  }, t8 = [editorActor, restoreSelectionFromProps], $[48] = editorActor, $[49] = restoreSelectionFromProps, $[50] = t7, $[51] = t8) : (t7 = $[50], t8 = $[51]), react.useEffect(t7, t8);
-  let t9, t10;
-  $[52] !== propsSelection || $[53] !== hasInvalidValue || $[54] !== restoreSelectionFromProps ? (t9 = () => {
+  }, [editorActor, restoreSelectionFromProps]), react.useEffect(() => {
     propsSelection && !hasInvalidValue && restoreSelectionFromProps();
-  }, t10 = [hasInvalidValue, propsSelection, restoreSelectionFromProps], $[52] = propsSelection, $[53] = hasInvalidValue, $[54] = restoreSelectionFromProps, $[55] = t9, $[56] = t10) : (t9 = $[55], t10 = $[56]), react.useEffect(t9, t10);
-  const [syncedRangeDecorations, setSyncedRangeDecorations] = react.useState(!1);
-  let t11, t12;
-  $[57] !== syncedRangeDecorations || $[58] !== syncRangeDecorations ? (t11 = () => {
+  }, [hasInvalidValue, propsSelection, restoreSelectionFromProps]);
+  const originalApply = react.useMemo(() => slateEditor.apply, [slateEditor]), [syncedRangeDecorations, setSyncedRangeDecorations] = react.useState(!1);
+  react.useEffect(() => {
     syncedRangeDecorations || (setSyncedRangeDecorations(!0), syncRangeDecorations());
-  }, t12 = [syncRangeDecorations, syncedRangeDecorations], $[57] = syncedRangeDecorations, $[58] = syncRangeDecorations, $[59] = t11, $[60] = t12) : (t11 = $[59], t12 = $[60]), react.useEffect(t11, t12);
-  let t13, t14;
-  $[61] !== rangeDecorations || $[62] !== syncRangeDecorations ? (t13 = () => {
+  }, [syncRangeDecorations, syncedRangeDecorations]), react.useEffect(() => {
     isEqual__default.default(rangeDecorations, rangeDecorationsRef.current) || syncRangeDecorations(), rangeDecorationsRef.current = rangeDecorations;
-  }, t14 = [rangeDecorations, syncRangeDecorations], $[61] = rangeDecorations, $[62] = syncRangeDecorations, $[63] = t13, $[64] = t14) : (t13 = $[63], t14 = $[64]), react.useEffect(t13, t14);
-  let t15, t16;
-  $[65] !== slateEditor || $[66] !== syncRangeDecorations ? (t15 = () => {
-    const teardown = withSyncRangeDecorations(slateEditor, syncRangeDecorations);
-    return () => teardown();
-  }, t16 = [slateEditor, syncRangeDecorations], $[65] = slateEditor, $[66] = syncRangeDecorations, $[67] = t15, $[68] = t16) : (t15 = $[67], t16 = $[68]), react.useEffect(t15, t16);
-  let t17;
-  $[69] !== onCopy ? (t17 = (event) => {
+  }, [rangeDecorations, syncRangeDecorations]), react.useEffect(() => (slateEditor.apply = (op) => {
+    originalApply(op), op.type !== "set_selection" && syncRangeDecorations(op);
+  }, () => {
+    slateEditor.apply = originalApply;
+  }), [originalApply, slateEditor, syncRangeDecorations]);
+  const handleCopy = react.useCallback((event) => {
     onCopy && onCopy(event) !== void 0 && event.preventDefault();
-  }, $[69] = onCopy, $[70] = t17) : t17 = $[70];
-  const handleCopy = t17;
-  let t18;
-  $[71] !== slateEditor || $[72] !== onPaste || $[73] !== portableTextEditor || $[74] !== schemaTypes || $[75] !== editorActor ? (t18 = (event_0) => {
+  }, [onCopy]), handlePaste = react.useCallback((event_0) => {
     if (event_0.preventDefault(), !slateEditor.selection)
       return;
     if (!onPaste) {
@@ -5835,10 +5826,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         type: "done loading"
       });
     }));
-  }, $[71] = slateEditor, $[72] = onPaste, $[73] = portableTextEditor, $[74] = schemaTypes, $[75] = editorActor, $[76] = t18) : t18 = $[76];
-  const handlePaste = t18;
-  let t19;
-  $[77] !== onFocus || $[78] !== portableTextEditor || $[79] !== slateEditor || $[80] !== editorActor ? (t19 = (event_1) => {
+  }, [editorActor, onPaste, portableTextEditor, schemaTypes, slateEditor]), handleOnFocus = react.useCallback((event_1) => {
     if (onFocus && onFocus(event_1), !event_1.isDefaultPrevented()) {
       const selection = PortableTextEditor.getSelection(portableTextEditor);
       selection === null && (slate.Transforms.select(slateEditor, slate.Editor.start(slateEditor, [])), slateEditor.onChange()), editorActor.send({
@@ -5851,10 +5839,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         selection
       });
     }
-  }, $[77] = onFocus, $[78] = portableTextEditor, $[79] = slateEditor, $[80] = editorActor, $[81] = t19) : t19 = $[81];
-  const handleOnFocus = t19;
-  let t20;
-  $[82] !== onClick || $[83] !== slateEditor ? (t20 = (event_2) => {
+  }, [editorActor, onFocus, portableTextEditor, slateEditor]), handleClick = react.useCallback((event_2) => {
     if (onClick && onClick(event_2), slateEditor.selection && event_2.target === event_2.currentTarget) {
       const [lastBlock, path_0] = slate.Node.last(slateEditor, []), focusPath = slateEditor.selection.focus.path.slice(0, 1), lastPath = path_0.slice(0, 1);
       if (slate.Path.equals(focusPath, lastPath)) {
@@ -5864,23 +5849,33 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         })), slateEditor.onChange());
       }
     }
-  }, $[82] = onClick, $[83] = slateEditor, $[84] = t20) : t20 = $[84];
-  const handleClick = t20;
-  let t21;
-  $[85] !== onBlur || $[86] !== editorActor ? (t21 = (event_3) => {
+  }, [onClick, slateEditor]), handleOnBlur = react.useCallback((event_3) => {
     onBlur && onBlur(event_3), event_3.isPropagationStopped() || editorActor.send({
       type: "blur",
       event: event_3
     });
-  }, $[85] = onBlur, $[86] = editorActor, $[87] = t21) : t21 = $[87];
-  const handleOnBlur = t21;
-  let t22;
-  $[88] !== onBeforeInput ? (t22 = (event_4) => {
+  }, [editorActor, onBlur]), handleOnBeforeInput = react.useCallback((event_4) => {
     onBeforeInput && onBeforeInput(event_4);
-  }, $[88] = onBeforeInput, $[89] = t22) : t22 = $[89];
-  const handleOnBeforeInput = t22, validateSelection = useValidateSelection(ref, slateEditor);
-  let t23, t24;
-  $[90] !== editableElement || $[91] !== validateSelection ? (t23 = () => {
+  }, [onBeforeInput]), validateSelection = react.useCallback(() => {
+    if (!slateEditor.selection)
+      return;
+    const root = slateReact.ReactEditor.findDocumentOrShadowRoot(slateEditor), {
+      activeElement
+    } = root;
+    if (ref.current !== activeElement)
+      return;
+    const domSelection = slateReact.ReactEditor.getWindow(slateEditor).getSelection();
+    if (!domSelection || domSelection.rangeCount === 0)
+      return;
+    const existingDOMRange = domSelection.getRangeAt(0);
+    try {
+      const newDOMRange = slateReact.ReactEditor.toDOMRange(slateEditor, slateEditor.selection);
+      (newDOMRange.startOffset !== existingDOMRange.startOffset || newDOMRange.endOffset !== existingDOMRange.endOffset) && (debug("DOM range out of sync, validating selection"), domSelection?.removeAllRanges(), domSelection.addRange(newDOMRange));
+    } catch {
+      debug("Could not resolve selection, selecting top document"), slate.Transforms.deselect(slateEditor), slateEditor.children.length > 0 && slate.Transforms.select(slateEditor, [0, 0]), slateEditor.onChange();
+    }
+  }, [ref, slateEditor]);
+  react.useEffect(() => {
     if (editableElement) {
       const mutationObserver = new MutationObserver(validateSelection);
       return mutationObserver.observe(editableElement, {
@@ -5893,31 +5888,15 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         mutationObserver.disconnect();
       };
     }
-  }, t24 = [validateSelection, editableElement], $[90] = editableElement, $[91] = validateSelection, $[92] = t23, $[93] = t24) : (t23 = $[92], t24 = $[93]), react.useEffect(t23, t24);
-  let t25;
-  $[94] !== props || $[95] !== slateEditor ? (t25 = (event_5) => {
+  }, [validateSelection, editableElement]);
+  const handleKeyDown = react.useCallback((event_5) => {
     props.onKeyDown && props.onKeyDown(event_5), event_5.isDefaultPrevented() || slateEditor.pteWithHotKeys(event_5);
-  }, $[94] = props, $[95] = slateEditor, $[96] = t25) : t25 = $[96];
-  const handleKeyDown = t25;
-  let t26;
-  bb1: {
-    if (scrollSelectionIntoView === void 0) {
-      t26 = void 0;
-      break bb1;
-    }
-    if (scrollSelectionIntoView === null) {
-      t26 = noop__default.default;
-      break bb1;
-    }
-    let t272;
-    $[97] !== scrollSelectionIntoView || $[98] !== portableTextEditor ? (t272 = (_editor, domRange) => {
-      scrollSelectionIntoView(portableTextEditor, domRange);
-    }, $[97] = scrollSelectionIntoView, $[98] = portableTextEditor, $[99] = t272) : t272 = $[99], t26 = t272;
-  }
-  const scrollSelectionIntoViewToSlate = t26;
-  let t27;
-  $[100] !== slateEditor.children || $[101] !== schemaTypes || $[102] !== rangeDecorationState ? (t27 = (t282) => {
-    const [, path_1] = t282;
+  }, [props, slateEditor]), scrollSelectionIntoViewToSlate = react.useMemo(() => {
+    if (scrollSelectionIntoView !== void 0)
+      return scrollSelectionIntoView === null ? noop__default.default : (_editor, domRange) => {
+        scrollSelectionIntoView(portableTextEditor, domRange);
+      };
+  }, [portableTextEditor, scrollSelectionIntoView]), decorate = react.useCallback(([, path_1]) => {
     if (isEqualToEmptyEditor(slateEditor.children, schemaTypes))
       return [{
         anchor: {
@@ -5943,38 +5922,32 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       }
     }) || slate.Range.includes(item, path_1));
     return result_1.length > 0 ? result_1 : [];
-  }, $[100] = slateEditor.children, $[101] = schemaTypes, $[102] = rangeDecorationState, $[103] = t27) : t27 = $[103];
-  const decorate = t27;
-  let t28, t29;
-  if ($[104] !== slateEditor ? (t28 = () => {
+  }, [slateEditor, schemaTypes, rangeDecorationState]);
+  return react.useEffect(() => {
     ref.current = slateReact.ReactEditor.toDOMNode(slateEditor, slateEditor), setEditableElement(ref.current);
-  }, t29 = [slateEditor, ref], $[104] = slateEditor, $[105] = t28, $[106] = t29) : (t28 = $[105], t29 = $[106]), react.useEffect(t28, t29), !portableTextEditor)
-    return null;
-  let t30;
-  return $[107] !== hasInvalidValue || $[108] !== restProps || $[109] !== decorate || $[110] !== handleOnBlur || $[111] !== handleCopy || $[112] !== handleClick || $[113] !== handleOnBeforeInput || $[114] !== handleOnFocus || $[115] !== handleKeyDown || $[116] !== handlePaste || $[117] !== readOnly || $[118] !== renderElement || $[119] !== renderLeaf || $[120] !== scrollSelectionIntoViewToSlate ? (t30 = hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, { ...restProps, autoFocus: !1, className: restProps.className || "pt-editable", decorate, onBlur: handleOnBlur, onCopy: handleCopy, onClick: handleClick, onDOMBeforeInput: handleOnBeforeInput, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, readOnly, renderPlaceholder: void 0, renderElement, renderLeaf, scrollSelectionIntoView: scrollSelectionIntoViewToSlate }), $[107] = hasInvalidValue, $[108] = restProps, $[109] = decorate, $[110] = handleOnBlur, $[111] = handleCopy, $[112] = handleClick, $[113] = handleOnBeforeInput, $[114] = handleOnFocus, $[115] = handleKeyDown, $[116] = handlePaste, $[117] = readOnly, $[118] = renderElement, $[119] = renderLeaf, $[120] = scrollSelectionIntoViewToSlate, $[121] = t30) : t30 = $[121], t30;
+  }, [slateEditor, ref]), portableTextEditor ? hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(
+    slateReact.Editable,
+    {
+      ...restProps,
+      autoFocus: !1,
+      className: restProps.className || "pt-editable",
+      decorate,
+      onBlur: handleOnBlur,
+      onCopy: handleCopy,
+      onClick: handleClick,
+      onDOMBeforeInput: handleOnBeforeInput,
+      onFocus: handleOnFocus,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      readOnly,
+      renderPlaceholder: void 0,
+      renderElement,
+      renderLeaf,
+      scrollSelectionIntoView: scrollSelectionIntoViewToSlate
+    }
+  ) : null;
 });
 PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
-function useValidateSelection(ref, slateEditor) {
-  return react.useCallback(() => {
-    if (!slateEditor.selection)
-      return;
-    const root = slateReact.ReactEditor.findDocumentOrShadowRoot(slateEditor), {
-      activeElement
-    } = root;
-    if (ref.current !== activeElement)
-      return;
-    const domSelection = slateReact.ReactEditor.getWindow(slateEditor).getSelection();
-    if (!domSelection || domSelection.rangeCount === 0)
-      return;
-    const existingDOMRange = domSelection.getRangeAt(0);
-    try {
-      const newDOMRange = slateReact.ReactEditor.toDOMRange(slateEditor, slateEditor.selection);
-      (newDOMRange.startOffset !== existingDOMRange.startOffset || newDOMRange.endOffset !== existingDOMRange.endOffset) && (debug("DOM range out of sync, validating selection"), domSelection?.removeAllRanges(), domSelection.addRange(newDOMRange));
-    } catch {
-      debug("Could not resolve selection, selecting top document"), slate.Transforms.deselect(slateEditor), slateEditor.children.length > 0 && slate.Transforms.select(slateEditor, [0, 0]), slateEditor.onChange();
-    }
-  }, [ref, slateEditor]);
-}
 exports.PortableTextEditable = PortableTextEditable;
 exports.PortableTextEditor = PortableTextEditor;
 exports.editorMachine = editorMachine;