@portabletext/editor 2.13.1 → 2.13.2

package/lib/_chunks-dts/behavior.types.action.d.ts

@@ -6,7 +6,7 @@ import { AnnotationDefinition, AnnotationSchemaType, BaseDefinition, BlockObject
 import * as xstate227 from "xstate";
 import { ActorRef, ActorRefFrom, EventObject, Snapshot } from "xstate";
 import { BaseRange, Descendant, Operation } from "slate";
-import * as react22 from "react";
+import * as react20 from "react";
 import React$1, { BaseSyntheticEvent, ClipboardEvent, Component, FocusEvent, JSX, KeyboardEvent as KeyboardEvent$1, MutableRefObject, PropsWithChildren, ReactElement, RefObject, TextareaHTMLAttributes } from "react";
 import * as xstate_guards12 from "xstate/guards";
 import { Observable, Subject } from "rxjs";
@@ -198,7 +198,7 @@ declare class PortableTextEditor extends Component<PortableTextEditorProps<Inter
   componentDidUpdate(prevProps: PortableTextEditorProps): void;
   componentWillUnmount(): void;
   setEditable: (editable: EditableAPI) => void;
-  render(): react22.JSX.Element;
+  render(): react20.JSX.Element;
   /**
    * @deprecated
    * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
@@ -593,7 +593,7 @@ type PortableTextEditableProps = Omit<TextareaHTMLAttributes<HTMLDivElement>, 'o
  * ```
  * @group Components
  */
-declare const PortableTextEditable: react22.ForwardRefExoticComponent<Omit<PortableTextEditableProps, "ref"> & react22.RefAttributes<Omit<HTMLDivElement, "as" | "onPaste" | "onBeforeInput">>>;
+declare const PortableTextEditable: react20.ForwardRefExoticComponent<Omit<PortableTextEditableProps, "ref"> & react20.RefAttributes<Omit<HTMLDivElement, "as" | "onPaste" | "onBeforeInput">>>;
 type DecoratedRange = BaseRange & {
   rangeDecoration: RangeDecoration;
 };
@@ -1331,7 +1331,7 @@ declare const editorMachine: xstate227.StateMachine<{
   initialValue?: Array<PortableTextBlock>;
 }, xstate227.NonReducibleUnknown, InternalPatchEvent | MutationEvent | PatchesEvent | {
   type: "blurred";
-  event: react22.FocusEvent<HTMLDivElement, Element>;
+  event: react20.FocusEvent<HTMLDivElement, Element>;
 } | {
   type: "done loading";
 } | {
@@ -1343,7 +1343,7 @@ declare const editorMachine: xstate227.StateMachine<{
   data: unknown;
 } | {
   type: "focused";
-  event: react22.FocusEvent<HTMLDivElement, Element>;
+  event: react20.FocusEvent<HTMLDivElement, Element>;
 } | {
   type: "invalid value";
   resolution: InvalidValueResolution | null;
@@ -1498,7 +1498,7 @@ declare const editorMachine: xstate227.StateMachine<{
     }, xstate227.AnyEventObject>;
   }) => {
     behaviors: Set<{
-      behavior: Behavior<"*" | "split" | `custom.${string}` | "annotation.add" | "annotation.remove" | "block.set" | "block.unset" | "child.set" | "child.unset" | "decorator.add" | "decorator.remove" | "delete" | "history.redo" | "history.undo" | "insert.block" | "insert.child" | "insert.text" | "move.backward" | "move.block" | "move.forward" | "select" | "annotation.set" | "annotation.toggle" | "decorator.toggle" | "delete.backward" | "delete.block" | "delete.child" | "delete.forward" | "delete.text" | "deserialize" | "deserialize.data" | "deserialization.success" | "deserialization.failure" | "insert.blocks" | "insert.break" | "insert.inline object" | "insert.soft break" | "insert.span" | "list item.add" | "list item.remove" | "list item.toggle" | "move.block down" | "move.block up" | "select.block" | "select.previous block" | "select.next block" | "serialize" | "serialize.data" | "serialization.success" | "serialization.failure" | "style.add" | "style.remove" | "style.toggle" | "clipboard.copy" | "clipboard.cut" | "clipboard.paste" | "drag.dragstart" | "drag.drag" | "drag.dragend" | "drag.dragenter" | "drag.dragover" | "drag.dragleave" | "drag.drop" | "input.*" | "keyboard.keydown" | "keyboard.keyup" | "mouse.click" | "style.*" | "history.*" | "split.*" | "delete.*" | "select.*" | "deserialize.*" | "serialize.*" | "annotation.*" | "block.*" | "child.*" | "decorator.*" | "insert.*" | "move.*" | "deserialization.*" | "list item.*" | "serialization.*" | "clipboard.*" | "drag.*" | "keyboard.*" | "mouse.*", true, {
+      behavior: Behavior<"*" | "split" | `custom.${string}` | "annotation.add" | "annotation.remove" | "block.set" | "block.unset" | "child.set" | "child.unset" | "decorator.add" | "decorator.remove" | "delete" | "history.redo" | "history.undo" | "insert.block" | "insert.child" | "insert.text" | "move.backward" | "move.block" | "move.forward" | "select" | "annotation.set" | "annotation.toggle" | "decorator.toggle" | "delete.backward" | "delete.block" | "delete.child" | "delete.forward" | "delete.text" | "deserialize" | "deserialize.data" | "deserialization.success" | "deserialization.failure" | "insert.blocks" | "insert.break" | "insert.inline object" | "insert.soft break" | "insert.span" | "list item.add" | "list item.remove" | "list item.toggle" | "move.block down" | "move.block up" | "select.block" | "select.previous block" | "select.next block" | "serialize" | "serialize.data" | "serialization.success" | "serialization.failure" | "style.add" | "style.remove" | "style.toggle" | "clipboard.copy" | "clipboard.cut" | "clipboard.paste" | "drag.dragstart" | "drag.drag" | "drag.dragend" | "drag.dragenter" | "drag.dragover" | "drag.dragleave" | "drag.drop" | "input.*" | "keyboard.keydown" | "keyboard.keyup" | "mouse.click" | "history.*" | "split.*" | "delete.*" | "select.*" | "deserialize.*" | "serialize.*" | "annotation.*" | "block.*" | "child.*" | "decorator.*" | "insert.*" | "move.*" | "deserialization.*" | "list item.*" | "serialization.*" | "style.*" | "clipboard.*" | "drag.*" | "keyboard.*" | "mouse.*", true, {
         type: StrictExtract<"split" | "annotation.add" | "annotation.remove" | "block.set" | "block.unset" | "child.set" | "child.unset" | "decorator.add" | "decorator.remove" | "delete" | "history.redo" | "history.undo" | "insert.block" | "insert.child" | "insert.text" | "move.backward" | "move.block" | "move.forward" | "select" | "annotation.set" | "annotation.toggle" | "decorator.toggle" | "delete.backward" | "delete.block" | "delete.child" | "delete.forward" | "delete.text" | "deserialize" | "deserialize.data" | "deserialization.success" | "deserialization.failure" | "insert.blocks" | "insert.break" | "insert.inline object" | "insert.soft break" | "insert.span" | "list item.add" | "list item.remove" | "list item.toggle" | "move.block down" | "move.block up" | "select.block" | "select.previous block" | "select.next block" | "serialize" | "serialize.data" | "serialization.success" | "serialization.failure" | "style.add" | "style.remove" | "style.toggle", "annotation.add">;
         annotation: {
           name: string;
@@ -2006,7 +2006,7 @@ declare const editorMachine: xstate227.StateMachine<{
         type: "drop";
       }, undefined, never, never, never, never, InternalPatchEvent | MutationEvent | PatchesEvent | {
         type: "blurred";
-        event: react22.FocusEvent<HTMLDivElement, Element>;
+        event: react20.FocusEvent<HTMLDivElement, Element>;
       } | {
         type: "done loading";
       } | {
@@ -2018,7 +2018,7 @@ declare const editorMachine: xstate227.StateMachine<{
         data: unknown;
       } | {
         type: "focused";
-        event: react22.FocusEvent<HTMLDivElement, Element>;
+        event: react20.FocusEvent<HTMLDivElement, Element>;
       } | {
         type: "invalid value";
         resolution: InvalidValueResolution | null;
@@ -2889,7 +2889,7 @@ declare const editorMachine: xstate227.StateMachine<{
                         type: "drop";
                       }, undefined, never, never, never, never, InternalPatchEvent | MutationEvent | PatchesEvent | {
                         type: "blurred";
-                        event: react22.FocusEvent<HTMLDivElement, Element>;
+                        event: react20.FocusEvent<HTMLDivElement, Element>;
                       } | {
                         type: "done loading";
                       } | {
@@ -2901,7 +2901,7 @@ declare const editorMachine: xstate227.StateMachine<{
                         data: unknown;
                       } | {
                         type: "focused";
-                        event: react22.FocusEvent<HTMLDivElement, Element>;
+                        event: react20.FocusEvent<HTMLDivElement, Element>;
                       } | {
                         type: "invalid value";
                         resolution: InvalidValueResolution | null;

package/lib/index.cjs

@@ -1884,7 +1884,7 @@ function createDecorate(schema2, slateEditor) {
   };
 }
 const RelayActorContext = React.createContext({}), debug$d = debugWithName("component:Editable"), PortableTextEditable = React.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(171);
+  const $ = reactCompilerRuntime.c(172);
   let hotkeys, onBeforeInput, onBlur, onClick, onCopy, onCut, onDrag, onDragEnd, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, onFocus, onPaste, propsSelection, rangeDecorations, renderAnnotation, renderBlock, renderChild, renderDecorator, renderListItem, renderPlaceholder, renderStyle, restProps, scrollSelectionIntoView, spellCheck;
   $[0] !== props ? ({
     hotkeys,
@@ -2421,16 +2421,50 @@ const RelayActorContext = React.createContext({}), debug$d = debugWithName("comp
   }, $[140] = editorActor, $[141] = onDragLeave, $[142] = slateEditor, $[143] = t34) : t34 = $[143];
   const handleDragLeave = t34;
   let t35;
-  $[144] !== forwardedRef ? (t35 = (node) => {
-    typeof forwardedRef == "function" ? forwardedRef(node) : forwardedRef && (forwardedRef.current = node);
-  }, $[144] = forwardedRef, $[145] = t35) : t35 = $[145];
+  $[144] !== forwardedRef || $[145] !== slateEditor ? (t35 = (node) => {
+    if (typeof forwardedRef == "function" ? forwardedRef(node) : forwardedRef && (forwardedRef.current = node), node) {
+      const mutationObserver = new MutationObserver(() => {
+        validateSelection(slateEditor, node);
+      });
+      return mutationObserver.observe(node, {
+        attributeOldValue: !1,
+        attributes: !1,
+        characterData: !1,
+        childList: !0,
+        subtree: !0
+      }), () => {
+        mutationObserver.disconnect();
+      };
+    }
+  }, $[144] = forwardedRef, $[145] = slateEditor, $[146] = t35) : t35 = $[146];
   const callbackRef = t35;
   if (!portableTextEditor)
     return null;
   let t36;
-  return $[146] !== callbackRef || $[147] !== decorate || $[148] !== handleClick || $[149] !== handleCopy || $[150] !== handleCut || $[151] !== handleDrag || $[152] !== handleDragEnd || $[153] !== handleDragEnter || $[154] !== handleDragLeave || $[155] !== handleDragOver || $[156] !== handleDragStart || $[157] !== handleDrop || $[158] !== handleKeyDown || $[159] !== handleKeyUp || $[160] !== handleOnBeforeInput || $[161] !== handleOnBlur || $[162] !== handleOnFocus || $[163] !== handlePaste || $[164] !== hasInvalidValue || $[165] !== readOnly || $[166] !== renderElement || $[167] !== renderLeaf || $[168] !== restProps || $[169] !== scrollSelectionIntoViewToSlate ? (t36 = hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, { ...restProps, ref: callbackRef, "data-read-only": readOnly, autoFocus: !1, className: restProps.className || "pt-editable", decorate, onBlur: handleOnBlur, onCopy: handleCopy, onCut: handleCut, onClick: handleClick, onDOMBeforeInput: handleOnBeforeInput, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDrop: handleDrop, onDragLeave: handleDragLeave, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onPaste: handlePaste, readOnly, renderPlaceholder: void 0, renderElement, renderLeaf, renderText, scrollSelectionIntoView: scrollSelectionIntoViewToSlate }), $[146] = callbackRef, $[147] = decorate, $[148] = handleClick, $[149] = handleCopy, $[150] = handleCut, $[151] = handleDrag, $[152] = handleDragEnd, $[153] = handleDragEnter, $[154] = handleDragLeave, $[155] = handleDragOver, $[156] = handleDragStart, $[157] = handleDrop, $[158] = handleKeyDown, $[159] = handleKeyUp, $[160] = handleOnBeforeInput, $[161] = handleOnBlur, $[162] = handleOnFocus, $[163] = handlePaste, $[164] = hasInvalidValue, $[165] = readOnly, $[166] = renderElement, $[167] = renderLeaf, $[168] = restProps, $[169] = scrollSelectionIntoViewToSlate, $[170] = t36) : t36 = $[170], t36;
+  return $[147] !== callbackRef || $[148] !== decorate || $[149] !== handleClick || $[150] !== handleCopy || $[151] !== handleCut || $[152] !== handleDrag || $[153] !== handleDragEnd || $[154] !== handleDragEnter || $[155] !== handleDragLeave || $[156] !== handleDragOver || $[157] !== handleDragStart || $[158] !== handleDrop || $[159] !== handleKeyDown || $[160] !== handleKeyUp || $[161] !== handleOnBeforeInput || $[162] !== handleOnBlur || $[163] !== handleOnFocus || $[164] !== handlePaste || $[165] !== hasInvalidValue || $[166] !== readOnly || $[167] !== renderElement || $[168] !== renderLeaf || $[169] !== restProps || $[170] !== scrollSelectionIntoViewToSlate ? (t36 = hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, { ...restProps, ref: callbackRef, "data-read-only": readOnly, autoFocus: !1, className: restProps.className || "pt-editable", decorate, onBlur: handleOnBlur, onCopy: handleCopy, onCut: handleCut, onClick: handleClick, onDOMBeforeInput: handleOnBeforeInput, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDrop: handleDrop, onDragLeave: handleDragLeave, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onPaste: handlePaste, readOnly, renderPlaceholder: void 0, renderElement, renderLeaf, renderText, scrollSelectionIntoView: scrollSelectionIntoViewToSlate }), $[147] = callbackRef, $[148] = decorate, $[149] = handleClick, $[150] = handleCopy, $[151] = handleCut, $[152] = handleDrag, $[153] = handleDragEnd, $[154] = handleDragEnter, $[155] = handleDragLeave, $[156] = handleDragOver, $[157] = handleDragStart, $[158] = handleDrop, $[159] = handleKeyDown, $[160] = handleKeyUp, $[161] = handleOnBeforeInput, $[162] = handleOnBlur, $[163] = handleOnFocus, $[164] = handlePaste, $[165] = hasInvalidValue, $[166] = readOnly, $[167] = renderElement, $[168] = renderLeaf, $[169] = restProps, $[170] = scrollSelectionIntoViewToSlate, $[171] = t36) : t36 = $[171], t36;
 });
 PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
+function validateSelection(slateEditor, activeElement) {
+  if (!slateEditor.selection)
+    return;
+  let root;
+  try {
+    root = slateReact.ReactEditor.findDocumentOrShadowRoot(slateEditor);
+  } catch {
+  }
+  if (!root || activeElement !== root.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$d("DOM range out of sync, validating selection"), domSelection?.removeAllRanges(), domSelection.addRange(newDOMRange));
+  } catch {
+    debug$d("Could not resolve selection, selecting top document"), slate.Transforms.deselect(slateEditor), slateEditor.children.length > 0 && slate.Transforms.select(slateEditor, [0, 0]), slateEditor.onChange();
+  }
+}
 function _temp(s) {
   return s.matches({
     "edit mode": "read only"