@portabletext/editor 1.39.1 → 1.40.0

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

@@ -1,5 +1,5 @@
 "use strict";
-var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), slateReact = require("slate-react"), react = require("@xstate/react"), debug$e = require("debug"), isEqual = require("lodash/isEqual.js"), slate = require("slate"), xstate = require("xstate"), patches = require("@portabletext/patches"), types = require("@sanity/types"), flatten = require("lodash/flatten.js"), isPlainObject = require("lodash/isPlainObject.js"), uniq = require("lodash/uniq.js"), getRandomValues = require("get-random-values-esm"), parseBlocks = require("./parse-blocks.cjs"), util_sliceBlocks = require("./util.slice-blocks.cjs"), blockTools = require("@portabletext/block-tools"), toHtml = require("@portabletext/to-html"), schema = require("@sanity/schema"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), selector_isAtTheStartOfBlock = require("./selector.is-at-the-start-of-block.cjs"), selector_isOverlappingSelection = require("./selector.is-overlapping-selection.cjs"), omit = require("lodash/omit.js"), slateDom = require("slate-dom"), startCase = require("lodash.startcase"), behavior_core = require("./behavior.core.cjs"), rxjs = require("rxjs"), useEffectEvent = require("use-effect-event");
+var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), slateReact = require("slate-react"), react = require("@xstate/react"), debug$e = require("debug"), isEqual = require("lodash/isEqual.js"), slate = require("slate"), xstate = require("xstate"), patches = require("@portabletext/patches"), types = require("@sanity/types"), flatten = require("lodash/flatten.js"), isPlainObject = require("lodash/isPlainObject.js"), uniq = require("lodash/uniq.js"), getRandomValues = require("get-random-values-esm"), util_selectionPointToBlockOffset = require("./util.selection-point-to-block-offset.cjs"), util_sliceBlocks = require("./util.slice-blocks.cjs"), blockTools = require("@portabletext/block-tools"), toHtml = require("@portabletext/to-html"), schema = require("@sanity/schema"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), selector_isAtTheStartOfBlock = require("./selector.is-at-the-start-of-block.cjs"), selector_isOverlappingSelection = require("./selector.is-overlapping-selection.cjs"), omit = require("lodash/omit.js"), slateDom = require("slate-dom"), startCase = require("lodash.startcase"), behavior_core = require("./behavior.core.cjs"), rxjs = require("rxjs"), useEffectEvent = require("use-effect-event");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -218,12 +218,7 @@ function toSlateValue(value, {
       _type,
       _key,
       ...rest
-    } = block, voidChildren = [{
-      _key: VOID_CHILD_KEY,
-      _type: "span",
-      text: "",
-      marks: []
-    }];
+    } = block;
     if (block && block._type === schemaTypes.block.name) {
       const textBlock = block;
       let hasInlines = !1;
@@ -236,7 +231,12 @@ function toSlateValue(value, {
         return cType !== "span" ? (hasInlines = !0, keepObjectEquality({
           _type: cType,
           _key: cKey,
-          children: voidChildren,
+          children: [{
+            _key: VOID_CHILD_KEY,
+            _type: "span",
+            text: "",
+            marks: []
+          }],
           value: cRest,
           __inline: !0
         }, keyMap)) : child;
@@ -251,7 +251,12 @@ function toSlateValue(value, {
     return keepObjectEquality({
       _type,
       _key,
-      children: voidChildren,
+      children: [{
+        _key: VOID_CHILD_KEY,
+        _type: "span",
+        text: "",
+        marks: []
+      }],
       value: rest
     }, keyMap);
   }) : [];
@@ -307,65 +312,7 @@ function fromSlateValue(value, textBlockType, keyMap = {}) {
 function isEqualToEmptyEditor(children, schemaTypes) {
   return children === void 0 || children && Array.isArray(children) && children.length === 0 || children && Array.isArray(children) && children.length === 1 && slate.Element.isElement(children[0]) && children[0]._type === schemaTypes.block.name && "style" in children[0] && children[0].style === schemaTypes.styles[0].value && !("listItem" in children[0]) && Array.isArray(children[0].children) && children[0].children.length === 1 && slate.Text.isText(children[0].children[0]) && children[0].children[0]._type === "span" && !children[0].children[0].marks?.join("") && children[0].children[0].text === "";
 }
-const IS_PROCESSING_REMOTE_CHANGES = /* @__PURE__ */ new WeakMap(), KEY_TO_SLATE_ELEMENT = /* @__PURE__ */ new WeakMap(), KEY_TO_VALUE_ELEMENT = /* @__PURE__ */ new WeakMap(), SLATE_TO_PORTABLE_TEXT_RANGE = /* @__PURE__ */ new WeakMap(), EditorActorContext = React.createContext({});
-function getActiveDecorators({
-  schema: schema2,
-  slateEditorInstance
-}) {
-  const decorators = schema2.decorators.map((decorator) => decorator.value);
-  return ({
-    ...slate.Editor.marks(slateEditorInstance) ?? {}
-  }.marks ?? []).filter((mark) => decorators.includes(mark));
-}
-function getValue({
-  editorActorSnapshot,
-  slateEditorInstance
-}) {
-  return fromSlateValue(slateEditorInstance.children, editorActorSnapshot.context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(slateEditorInstance));
-}
-function defaultCompare(a, b) {
-  return a === b;
-}
-function useEditorSelector(editor, selector, t0) {
-  const $ = reactCompilerRuntime.c(3), compare = t0 === void 0 ? defaultCompare : t0;
-  let t1;
-  return $[0] !== editor._internal.slateEditor.instance || $[1] !== selector ? (t1 = (editorActorSnapshot) => {
-    const snapshot = getEditorSnapshot({
-      editorActorSnapshot,
-      slateEditorInstance: editor._internal.slateEditor.instance
-    });
-    return selector(snapshot);
-  }, $[0] = editor._internal.slateEditor.instance, $[1] = selector, $[2] = t1) : t1 = $[2], react.useSelector(editor._internal.editorActor, t1, compare);
-}
-function getEditorSnapshot({
-  editorActorSnapshot,
-  slateEditorInstance
-}) {
-  return {
-    context: {
-      converters: [...editorActorSnapshot.context.converters],
-      activeDecorators: getActiveDecorators({
-        schema: editorActorSnapshot.context.schema,
-        slateEditorInstance
-      }),
-      keyGenerator: editorActorSnapshot.context.keyGenerator,
-      readOnly: editorActorSnapshot.matches({
-        "edit mode": "read only"
-      }),
-      schema: editorActorSnapshot.context.schema,
-      selection: editorActorSnapshot.context.selection,
-      value: getValue({
-        editorActorSnapshot,
-        slateEditorInstance
-      })
-    },
-    beta: {
-      hasTag: (tag) => editorActorSnapshot.hasTag(tag),
-      internalDrag: editorActorSnapshot.context.internalDrag
-    }
-  };
-}
-const PortableTextEditorContext = React.createContext(null), usePortableTextEditor = () => {
+const IS_PROCESSING_REMOTE_CHANGES = /* @__PURE__ */ new WeakMap(), KEY_TO_SLATE_ELEMENT = /* @__PURE__ */ new WeakMap(), KEY_TO_VALUE_ELEMENT = /* @__PURE__ */ new WeakMap(), SLATE_TO_PORTABLE_TEXT_RANGE = /* @__PURE__ */ new WeakMap(), EditorActorContext = React.createContext({}), PortableTextEditorContext = React.createContext(null), usePortableTextEditor = () => {
   const editor = React.useContext(PortableTextEditorContext);
   if (!editor)
     throw new Error("The `usePortableTextEditor` hook must be used inside the <PortableTextEditor> component's context.");
@@ -2490,7 +2437,7 @@ const converterJson = {
         reason: "Data is not an array"
       };
     const parsedBlocks = blocks.flatMap((block) => {
-      const parsedBlock = parseBlocks.parseBlock({
+      const parsedBlock = util_selectionPointToBlockOffset.parseBlock({
         context: snapshot.context,
         block,
         options: {
@@ -3070,10 +3017,10 @@ const decoratorAddActionImplementation = ({
   } : void 0, selection = manualSelection ? toSlateRange(manualSelection, action.editor) ?? editor.selection : editor.selection;
   if (!selection)
     return;
-  const editorSelection = toPortableTextRange(value, selection, context.schema), anchorOffset = editorSelection ? util_sliceBlocks.spanSelectionPointToBlockOffset({
+  const editorSelection = toPortableTextRange(value, selection, context.schema), anchorOffset = editorSelection ? util_selectionPointToBlockOffset.selectionPointToBlockOffset({
     value,
     selectionPoint: editorSelection.anchor
-  }) : void 0, focusOffset = editorSelection ? util_sliceBlocks.spanSelectionPointToBlockOffset({
+  }) : void 0, focusOffset = editorSelection ? util_selectionPointToBlockOffset.selectionPointToBlockOffset({
     value,
     selectionPoint: editorSelection.focus
   }) : void 0;
@@ -3086,7 +3033,7 @@ const decoratorAddActionImplementation = ({
       split: !0,
       hanging: !0
     });
-    const newValue = fromSlateValue(editor.children, context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(editor)), newSelection = parseBlocks.blockOffsetsToSelection({
+    const newValue = fromSlateValue(editor.children, context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(editor)), newSelection = util_selectionPointToBlockOffset.blockOffsetsToSelection({
       value: newValue,
       offsets: {
         anchor: anchorOffset,
@@ -3125,6 +3072,11 @@ const decoratorAddActionImplementation = ({
       });
     }
   } else {
+    if (!Array.from(slate.Editor.nodes(editor, {
+      at: selection,
+      match: (node) => editor.isTextSpan(node)
+    }))?.at(0))
+      return;
     const [block, blockPath] = slate.Editor.node(editor, selection, {
       depth: 1
     }), lonelyEmptySpan = editor.isTextBlock(block) && block.children.length === 1 && editor.isTextSpan(block.children[0]) && block.children[0].text === "" ? block.children[0] : void 0;
@@ -3625,8 +3577,7 @@ const toggleDecoratorActionImplementation = ({
   }) : decoratorAddActionImplementation({
     context,
     action: {
-      editor: action.editor,
-      decorator: action.decorator
+      ...action
     }
   });
 }, debug$8 = debugWithName("API:editable");
@@ -4151,7 +4102,7 @@ const addAnnotationActionImplementation = ({
   const {
     _type,
     ...filteredProps
-  } = action.props, updatedBlock = parseBlocks.parseBlock({
+  } = action.props, updatedBlock = util_selectionPointToBlockOffset.parseBlock({
     context,
     block: {
       ...parsedBlock,
@@ -4195,8 +4146,8 @@ const addAnnotationActionImplementation = ({
   const parsedBlock = fromSlateValue([block], context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(action.editor)).at(0);
   if (!parsedBlock)
     throw new Error(`Unable to parse block at ${JSON.stringify(action.at)}`);
-  if (parseBlocks.isTextBlock(context.schema, parsedBlock)) {
-    const propsToRemove = action.props.filter((prop) => prop !== "_type"), updatedTextBlock = parseBlocks.parseBlock({
+  if (util_selectionPointToBlockOffset.isTextBlock(context.schema, parsedBlock)) {
+    const propsToRemove = action.props.filter((prop) => prop !== "_type"), updatedTextBlock = util_selectionPointToBlockOffset.parseBlock({
       context,
       block: omit__default.default(parsedBlock, propsToRemove),
       options: {
@@ -4213,7 +4164,7 @@ const addAnnotationActionImplementation = ({
     });
     return;
   }
-  const updatedBlockObject = parseBlocks.parseBlock({
+  const updatedBlockObject = util_selectionPointToBlockOffset.parseBlock({
     context,
     block: omit__default.default(parsedBlock, action.props.filter((prop) => prop !== "_type")),
     options: {
@@ -4283,7 +4234,7 @@ const addAnnotationActionImplementation = ({
   context,
   action
 }) => {
-  const value = fromSlateValue(action.editor.children, context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(action.editor)), selection = parseBlocks.blockOffsetsToSelection({
+  const value = fromSlateValue(action.editor.children, context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(action.editor)), selection = util_selectionPointToBlockOffset.blockOffsetsToSelection({
     value,
     offsets: {
       anchor: action.anchor,
@@ -4348,7 +4299,7 @@ const insertBlockActionImplementation = ({
   context,
   action
 }) => {
-  const parsedBlock = parseBlocks.parseBlock({
+  const parsedBlock = util_selectionPointToBlockOffset.parseBlock({
     block: action.block,
     context,
     options: {
@@ -4547,7 +4498,7 @@ const selectActionImplementation = ({
   context,
   action
 }) => {
-  const parsedBlocks = parseBlocks.parseBlocks({
+  const parsedBlocks = util_selectionPointToBlockOffset.parseBlocks({
     context,
     blocks: action.blocks,
     options: {
@@ -6151,12 +6102,24 @@ const keyIs = {
   guard: ({
     snapshot,
     event
-  }) => !selector_isOverlappingSelection.isActiveDecorator(event.decorator)(snapshot),
+  }) => {
+    const manualSelection = event.offsets ? util_selectionPointToBlockOffset.blockOffsetsToSelection({
+      value: snapshot.context.value,
+      offsets: event.offsets
+    }) : null;
+    return manualSelection ? !selector_isOverlappingSelection.isActiveDecorator(event.decorator)({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: manualSelection
+      }
+    }) : !selector_isOverlappingSelection.isActiveDecorator(event.decorator)(snapshot);
+  },
   actions: [({
     event
   }) => [behavior_core.raise({
-    type: "decorator.add",
-    decorator: event.decorator
+    ...event,
+    type: "decorator.add"
   })]]
 }), toggleListItemOff = behavior_core.defineBehavior({
   on: "list item.toggle",
@@ -6388,17 +6351,17 @@ const keyIs = {
     draggedBlocks,
     dragOrigin,
     originEvent
-  }) => [behavior_core.raise({
-    type: "insert.blocks",
-    blocks: event.data,
-    placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
-  }), ...draggingEntireBlocks ? draggedBlocks.map((block) => behavior_core.raise({
+  }) => [...draggingEntireBlocks ? draggedBlocks.map((block) => behavior_core.raise({
     type: "delete.block",
     blockPath: block.path
   })) : [behavior_core.raise({
     type: "delete",
     selection: dragOrigin.selection
-  })]]]
+  })], behavior_core.raise({
+    type: "insert.blocks",
+    blocks: event.data,
+    placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
+  })]]
 }), behavior_core.defineBehavior({
   on: "deserialization.success",
   actions: [({
@@ -6443,6 +6406,15 @@ const keyIs = {
     originEvent: event
   })]]
 }), toggleAnnotationOff, toggleAnnotationOn, toggleDecoratorOff, toggleDecoratorOn, toggleListItemOff, toggleListItemOn, toggleStyleOff, toggleStyleOn, raiseDeserializationSuccessOrFailure, raiseSerializationSuccessOrFailure, raiseInsertSoftBreak];
+function getActiveDecorators({
+  schema: schema2,
+  slateEditorInstance
+}) {
+  const decorators = schema2.decorators.map((decorator) => decorator.value);
+  return ({
+    ...slate.Editor.marks(slateEditorInstance) ?? {}
+  }.marks ?? []).filter((mark) => decorators.includes(mark));
+}
 function createEditorSnapshot({
   converters,
   editor,
@@ -7038,13 +7010,61 @@ const editorMachine = xstate.setup({
     }
   }
 });
-function createEditor(config) {
+function getValue({
+  editorActorSnapshot,
+  slateEditorInstance
+}) {
+  return fromSlateValue(slateEditorInstance.children, editorActorSnapshot.context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(slateEditorInstance));
+}
+function defaultCompare(a, b) {
+  return a === b;
+}
+function useEditorSelector(editor, selector, t0) {
+  const $ = reactCompilerRuntime.c(3), compare = t0 === void 0 ? defaultCompare : t0;
+  let t1;
+  return $[0] !== editor || $[1] !== selector ? (t1 = (editorActorSnapshot) => {
+    const snapshot = getEditorSnapshot({
+      editorActorSnapshot,
+      slateEditorInstance: editor._internal.slateEditor.instance
+    });
+    return selector(snapshot);
+  }, $[0] = editor, $[1] = selector, $[2] = t1) : t1 = $[2], react.useSelector(editor._internal.editorActor, t1, compare);
+}
+function getEditorSnapshot({
+  editorActorSnapshot,
+  slateEditorInstance
+}) {
+  return {
+    context: {
+      converters: [...editorActorSnapshot.context.converters],
+      activeDecorators: getActiveDecorators({
+        schema: editorActorSnapshot.context.schema,
+        slateEditorInstance
+      }),
+      keyGenerator: editorActorSnapshot.context.keyGenerator,
+      readOnly: editorActorSnapshot.matches({
+        "edit mode": "read only"
+      }),
+      schema: editorActorSnapshot.context.schema,
+      selection: editorActorSnapshot.context.selection,
+      value: getValue({
+        editorActorSnapshot,
+        slateEditorInstance
+      })
+    },
+    beta: {
+      hasTag: (tag) => editorActorSnapshot.hasTag(tag),
+      internalDrag: editorActorSnapshot.context.internalDrag
+    }
+  };
+}
+function createInternalEditor(config) {
   const editorActor = xstate.createActor(editorMachine, {
     input: editorConfigToMachineInput(config)
   });
-  return editorActor.start(), createEditorFromActor(editorActor);
+  return editorActor.start(), createInternalEditorFromActor(editorActor);
 }
-function useCreateEditor(config) {
+function useCreateInternalEditor(config) {
   const $ = reactCompilerRuntime.c(6);
   let t0;
   $[0] !== config ? (t0 = editorConfigToMachineInput(config), $[0] = config, $[1] = t0) : t0 = $[1];
@@ -7054,7 +7074,7 @@ function useCreateEditor(config) {
   }, $[2] = t0, $[3] = t1) : t1 = $[3];
   const editorActor = react.useActorRef(editorMachine, t1);
   let t2, t3;
-  return $[4] !== editorActor ? (t3 = createEditorFromActor(editorActor), $[4] = editorActor, $[5] = t3) : t3 = $[5], t2 = t3, t2;
+  return $[4] !== editorActor ? (t3 = createInternalEditorFromActor(editorActor), $[4] = editorActor, $[5] = t3) : t3 = $[5], t2 = t3, t2;
 }
 function editorConfigToMachineInput(config) {
   return {
@@ -7067,7 +7087,7 @@ function editorConfigToMachineInput(config) {
     value: config.initialValue
   };
 }
-function createEditorFromActor(editorActor) {
+function createInternalEditorFromActor(editorActor) {
   const slateEditor = createSlateEditor({
     editorActor
   }), editable = createEditableAPI(slateEditor.instance, editorActor);
@@ -7154,7 +7174,7 @@ class PortableTextEditor extends React.Component {
    * The editor API (currently implemented with Slate).
    */
   constructor(props) {
-    super(props), props.editor ? this.editor = props.editor : this.editor = createEditor({
+    super(props), props.editor ? this.editor = props.editor : this.editor = createInternalEditor({
       keyGenerator: props.keyGenerator ?? defaultKeyGenerator,
       schema: props.schemaType,
       initialValue: props.value,
@@ -7646,11 +7666,11 @@ function RouteEventsToChanges(props) {
 }
 const EditorContext = React__default.default.createContext(void 0);
 function EditorProvider(props) {
-  const $ = reactCompilerRuntime.c(28), editor = useCreateEditor(props.initialConfig), editorActor = editor._internal.editorActor, slateEditor = editor._internal.slateEditor;
+  const $ = reactCompilerRuntime.c(28), internalEditor = useCreateInternalEditor(props.initialConfig), editorActor = internalEditor._internal.editorActor, slateEditor = internalEditor._internal.slateEditor;
   let t0, t1;
-  $[0] !== editor ? (t1 = new PortableTextEditor({
-    editor
-  }), $[0] = editor, $[1] = t1) : t1 = $[1], t0 = t1;
+  $[0] !== internalEditor ? (t1 = new PortableTextEditor({
+    editor: internalEditor
+  }), $[0] = internalEditor, $[1] = t1) : t1 = $[1], t0 = t1;
   const portableTextEditor = t0;
   let t2;
   $[2] !== portableTextEditor.change$ ? (t2 = (change) => {
@@ -7669,11 +7689,11 @@ function EditorProvider(props) {
   let t8;
   $[20] !== editorActor || $[21] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(EditorActorContext.Provider, { value: editorActor, children: t7 }), $[20] = editorActor, $[21] = t7, $[22] = t8) : t8 = $[22];
   let t9;
-  return $[23] !== editor || $[24] !== t3 || $[25] !== t4 || $[26] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsxs(EditorContext.Provider, { value: editor, children: [
+  return $[23] !== internalEditor || $[24] !== t3 || $[25] !== t4 || $[26] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsxs(EditorContext.Provider, { value: internalEditor, children: [
     t3,
     t4,
     t8
-  ] }), $[23] = editor, $[24] = t3, $[25] = t4, $[26] = t8, $[27] = t9) : t9 = $[27], t9;
+  ] }), $[23] = internalEditor, $[24] = t3, $[25] = t4, $[26] = t8, $[27] = t9) : t9 = $[27], t9;
 }
 function useEditor() {
   const editor = React__default.default.useContext(EditorContext);