@portabletext/editor 1.1.6 → 1.1.8

package/lib/index.mjs

@@ -9,7 +9,7 @@ import { isKeySegment, isPortableTextTextBlock, isPortableTextSpan, isPortableTe
 import { styled } from "styled-components";
 import uniq from "lodash/uniq.js";
 import { Subject } from "rxjs";
-import { fromCallback, setup, assertEvent, assign, emit, enqueueActions, createActor } from "xstate";
+import { fromCallback, setup, assign, assertEvent, emit, enqueueActions, createActor } from "xstate";
 import { Schema } from "@sanity/schema";
 import { isHotkey } from "is-hotkey-esm";
 import { diffMatchPatch as diffMatchPatch$1, set, insert, setIfMissing, unset, applyAll } from "@portabletext/patches";
@@ -1611,11 +1611,11 @@ function createWithInsertBreak(editorActor, types) {
         (mark) => !types.decorators.some((decorator) => decorator.value === mark)
       ) ?? [], focusBlockPath = editor.selection.focus.path.slice(0, 1), focusBlock = Node.descendant(editor, focusBlockPath);
       if (editor.isTextBlock(focusBlock)) {
-        const [start, end] = Range.edges(editor.selection), isEndAtStartOfBlock = isEqual(end, {
+        const [start, end] = Range.edges(editor.selection), atTheStartOfBlock = isEqual(end, {
           path: [...focusBlockPath, 0],
           offset: 0
         });
-        if (isEndAtStartOfBlock && Range.isCollapsed(editor.selection)) {
+        if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
           Editor.insertNode(
             editor,
             editor.pteCreateTextBlock({
@@ -1626,32 +1626,28 @@ function createWithInsertBreak(editorActor, types) {
           Transforms.select(editor, {
             anchor: { path: [nextBlockPath, 0], offset: 0 },
             focus: { path: [nextBlockPath, 0], offset: 0 }
-          }), editor.onChange();
+          });
           return;
         }
-        const lastFocusBlockChild = focusBlock.children[focusBlock.children.length - 1], isStartAtEndOfBlock = isEqual(start, {
+        const lastFocusBlockChild = focusBlock.children[focusBlock.children.length - 1], atTheEndOfBlock = isEqual(start, {
           path: [...focusBlockPath, focusBlock.children.length - 1],
           offset: editor.isTextSpan(lastFocusBlockChild) ? lastFocusBlockChild.text.length : 0
         });
-        if (isStartAtEndOfBlock && Range.isCollapsed(editor.selection) && focusDecorators.length > 0 && focusAnnotations.length > 0) {
-          Editor.withoutNormalizing(editor, () => {
-            if (!editor.selection)
-              return;
-            Editor.insertNode(
-              editor,
-              editor.pteCreateTextBlock({
-                decorators: []
-              })
-            );
-            const [nextBlockPath] = Path.next(focusBlockPath);
-            Transforms.setSelection(editor, {
-              anchor: { path: [nextBlockPath, 0], offset: 0 },
-              focus: { path: [nextBlockPath, 0], offset: 0 }
-            });
-          }), editor.onChange();
+        if (atTheEndOfBlock && Range.isCollapsed(editor.selection)) {
+          Editor.insertNode(
+            editor,
+            editor.pteCreateTextBlock({
+              decorators: []
+            })
+          );
+          const [nextBlockPath] = Path.next(focusBlockPath);
+          Transforms.setSelection(editor, {
+            anchor: { path: [nextBlockPath, 0], offset: 0 },
+            focus: { path: [nextBlockPath, 0], offset: 0 }
+          });
           return;
         }
-        if (!isEndAtStartOfBlock && !isStartAtEndOfBlock) {
+        if (!atTheStartOfBlock && !atTheEndOfBlock) {
           Editor.withoutNormalizing(editor, () => {
             if (!editor.selection)
               return;
@@ -3814,7 +3810,7 @@ const debug$8 = debugWithName("plugin:withHotKeys"), DEFAULT_HOTKEYS = {
   },
   custom: {}
 };
-function createWithHotkeys(types, portableTextEditor, hotkeysFromOptions) {
+function createWithHotkeys(portableTextEditor, hotkeysFromOptions) {
   const reservedHotkeys = ["enter", "tab", "shift", "delete", "end"], activeHotkeys = hotkeysFromOptions || DEFAULT_HOTKEYS;
   return function(editor) {
     return editor.pteWithHotKeys = (event) => {
@@ -3895,16 +3891,6 @@ function createWithHotkeys(types, portableTextEditor, hotkeysFromOptions) {
           editor.pteEndList() && event.preventDefault();
           return;
         }
-        if (editor.isTextBlock(focusBlock) && focusBlock.style && focusBlock.style !== types.styles[0].value) {
-          const [, end] = Range.edges(editor.selection);
-          if (Editor.isEnd(editor, end, end.path)) {
-            Editor.insertNode(
-              editor,
-              editor.pteCreateTextBlock({ decorators: [] })
-            ), event.preventDefault(), editor.onChange();
-            return;
-          }
-        }
       }
     }, editor;
   };
@@ -4388,7 +4374,7 @@ function _insertFragment(editor, fragment, schemaTypes) {
   }), editor.onChange();
 }
 const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, options) => {
-  const e = editor, { portableTextEditor, patches$, readOnly, maxBlocks } = options, { editorActor, schemaTypes } = portableTextEditor;
+  const e = editor, { editorActor, portableTextEditor, patches$, readOnly, maxBlocks } = options, { schemaTypes } = portableTextEditor;
   e.subscriptions = [], e.destroy ? e.destroy() : originalFnMap.set(e, {
     apply: e.apply,
     onChange: e.onChange,
@@ -4486,9 +4472,10 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
   };
 }, debug$6 = debugWithName("component:PortableTextEditor:SlateContainer");
 function SlateContainer(props) {
-  const { patches$, portableTextEditor, readOnly, maxBlocks } = props, [[slateEditor, subscribe]] = useState(() => {
+  const { editorActor, patches$, portableTextEditor, readOnly, maxBlocks } = props, [[slateEditor, subscribe]] = useState(() => {
     debug$6("Creating new Slate editor instance");
     const { editor, subscribe: _sub } = withPlugins(withReact(createEditor()), {
+      editorActor,
       maxBlocks,
       patches$,
       portableTextEditor,
@@ -4503,6 +4490,7 @@ function SlateContainer(props) {
     };
   }, [subscribe]), useEffect(() => {
     debug$6("Re-initializing plugin chain"), withPlugins(slateEditor, {
+      editorActor,
       maxBlocks,
       patches$,
       portableTextEditor,
@@ -4523,7 +4511,7 @@ const PortableTextEditorReadOnlyContext = createContext(!1), usePortableTextEdit
   return readOnly;
 }, debug$5 = debugWithName("hook:useSyncValue"), CURRENT_VALUE = /* @__PURE__ */ new WeakMap();
 function useSyncValue(props) {
-  const { editorActor, portableTextEditor, readOnly } = props, { schemaTypes } = portableTextEditor, previousValue = useRef(), slateEditor = useSlate(), updateValueFunctionRef = useRef(), updateFromCurrentValue = useCallback(() => {
+  const { editorActor, portableTextEditor, readOnly } = props, schemaTypes = editorActor.getSnapshot().context.schema, previousValue = useRef(), slateEditor = useSlate(), updateValueFunctionRef = useRef(), updateFromCurrentValue = useCallback(() => {
     const currentValue = CURRENT_VALUE.get(portableTextEditor);
     if (previousValue.current === currentValue) {
       debug$5("Value is the same object as previous, not need to sync");
@@ -4830,30 +4818,40 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
     debug$4("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (editorActor.send({ type: "ready" }), isInitialValueFromProps.current = !1);
   }, [editorActor, syncValue, value]), null;
 }
-function inserText({
-  event
-}) {
-  Editor.insertText(event.editor, event.text);
-}
-function inserTextBlock({
-  context,
-  event
-}) {
-  Editor.insertNode(event.editor, {
-    _key: context.keyGenerator(),
-    _type: context.schema.block.name,
-    style: context.schema.styles[0].value ?? "normal",
-    markDefs: [],
-    children: [
-      {
-        _key: context.keyGenerator(),
-        _type: "span",
-        text: ""
-      }
-    ]
-  });
-}
-const networkLogic = fromCallback(({ sendBack }) => {
+const EditorActorContext = createContext({}), behaviorActionImplementations = {
+  "apply block style": ({ event }) => {
+    for (const path of event.paths) {
+      const at = toSlateRange(
+        { anchor: { path, offset: 0 }, focus: { path, offset: 0 } },
+        event.editor
+      );
+      Transforms.setNodes(event.editor, { style: event.style }, { at });
+    }
+  },
+  "delete text": ({ event }) => {
+    Transforms.delete(event.editor, {
+      at: toSlateRange(event.selection, event.editor)
+    });
+  },
+  "insert text": ({ event }) => {
+    Editor.insertText(event.editor, event.text);
+  },
+  "insert text block": ({ context, event }) => {
+    Editor.insertNode(event.editor, {
+      _key: context.keyGenerator(),
+      _type: context.schema.block.name,
+      style: context.schema.styles[0].value ?? "normal",
+      markDefs: [],
+      children: [
+        {
+          _key: context.keyGenerator(),
+          _type: "span",
+          text: ""
+        }
+      ]
+    });
+  }
+}, networkLogic = fromCallback(({ sendBack }) => {
   const onlineHandler = () => {
     sendBack({ type: "online" });
   }, offlineHandler = () => {
@@ -4870,12 +4868,6 @@ const networkLogic = fromCallback(({ sendBack }) => {
     input: {}
   },
   actions: {
-    "apply:insert text": ({ context, event }) => {
-      assertEvent(event, "insert text"), inserText({ context, event });
-    },
-    "apply:insert text block": ({ context, event }) => {
-      assertEvent(event, "insert text block"), inserTextBlock({ context, event });
-    },
     "assign schema": assign({
       schema: ({ event }) => (assertEvent(event, "update schema"), event.schema)
     }),
@@ -4892,7 +4884,7 @@ const networkLogic = fromCallback(({ sendBack }) => {
       pendingEvents: []
     }),
     "handle behavior event": enqueueActions(({ context, event, enqueue }) => {
-      assertEvent(event, ["key down"]);
+      assertEvent(event, ["key down", "before insert text"]);
       const eventBehaviors = context.behaviors.filter(
         (behavior) => behavior.on === event.type
       );
@@ -4968,11 +4960,20 @@ const networkLogic = fromCallback(({ sendBack }) => {
     "key down": {
       actions: ["handle behavior event"]
     },
+    "before insert text": {
+      actions: ["handle behavior event"]
+    },
+    "apply block style": {
+      actions: [behaviorActionImplementations["apply block style"]]
+    },
+    "delete text": {
+      actions: [behaviorActionImplementations["delete text"]]
+    },
     "insert text": {
-      actions: ["apply:insert text"]
+      actions: [behaviorActionImplementations["insert text"]]
     },
     "insert text block": {
-      actions: ["apply:insert text block"]
+      actions: [behaviorActionImplementations["insert text block"]]
     }
   },
   initial: "pristine",
@@ -5046,11 +5047,6 @@ function PortableTextEditorSelectionProvider(props) {
 }
 const defaultKeyGenerator = () => randomKey(12), debug$2 = debugWithName("component:PortableTextEditor");
 class PortableTextEditor extends Component {
-  /**
-   * @internal
-   * Don't use this API directly. It's subject to change.
-   */
-  editorActor;
   /**
    * An observable of all the editor changes.
    */
@@ -5063,6 +5059,7 @@ class PortableTextEditor extends Component {
    * The editor API (currently implemented with Slate).
    */
   editable;
+  editorActor;
   constructor(props) {
     if (super(props), !props.schemaType)
       throw new Error('PortableTextEditor: missing "schemaType" property');
@@ -5095,29 +5092,36 @@ class PortableTextEditor extends Component {
   };
   render() {
     const { value, children, 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__ */ jsx(
+    return /* @__PURE__ */ jsx(EditorActorContext.Provider, { value: this.editorActor, children: /* @__PURE__ */ jsx(
       SlateContainer,
       {
+        editorActor: this.editorActor,
         maxBlocks,
         patches$: _patches$,
         portableTextEditor: this,
         readOnly,
-        children: /* @__PURE__ */ jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxs(PortableTextEditorSelectionProvider, { editorActor: this.editorActor, children: [
-          /* @__PURE__ */ jsx(
-            Synchronizer,
-            {
-              editorActor: this.editorActor,
-              getValue: this.getValue,
-              onChange: (change) => {
-                this.props.onChange(change), this.change$.next(change);
-              },
-              value
-            }
-          ),
-          children
-        ] }) }) })
+        children: /* @__PURE__ */ jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxs(
+          PortableTextEditorSelectionProvider,
+          {
+            editorActor: this.editorActor,
+            children: [
+              /* @__PURE__ */ 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() : [];
@@ -5171,6 +5175,7 @@ class PortableTextEditor extends Component {
 }
 const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (props) => {
   const {
+    editorActor,
     attributes,
     children,
     leaf,
@@ -5225,17 +5230,14 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
   useEffect(() => {
     if (!shouldTrackSelectionAndFocus)
       return;
-    const onBlur = portableTextEditor.editorActor.on("blur", () => {
+    const onBlur = editorActor.on("blur", () => {
       setFocused(!1), setSelected(!1);
-    }), onFocus = portableTextEditor.editorActor.on("focus", () => {
+    }), onFocus = editorActor.on("focus", () => {
       const sel = PortableTextEditor.getSelection(portableTextEditor);
       sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
-    }), onSelection = portableTextEditor.editorActor.on(
-      "selection",
-      (event) => {
-        event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
-      }
-    );
+    }), onSelection = editorActor.on("selection", (event) => {
+      event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
+    });
     return () => {
       onBlur.unsubscribe(), onFocus.unsubscribe(), onSelection.unsubscribe();
     };
@@ -5388,12 +5390,12 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     forwardedRef,
     () => ref.current
   );
-  const rangeDecorationsRef = useRef(rangeDecorations), { editorActor, schemaTypes } = portableTextEditor, slateEditor = useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = useMemo(
+  const rangeDecorationsRef = useRef(rangeDecorations), editorActor = useContext(EditorActorContext), { schemaTypes } = portableTextEditor, slateEditor = useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = useMemo(
     () => createWithInsertData(editorActor, schemaTypes),
     [editorActor, schemaTypes]
   ), withHotKeys = useMemo(
-    () => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
-    [hotkeys, portableTextEditor, schemaTypes]
+    () => createWithHotkeys(portableTextEditor, hotkeys),
+    [hotkeys, portableTextEditor]
   );
   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 = useCallback(
@@ -5426,6 +5428,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
           Leaf,
           {
             ...lProps,
+            editorActor,
             schemaTypes,
             renderAnnotation,
             renderChild,
@@ -5602,7 +5605,11 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     [editorActor, onBlur]
   ), handleOnBeforeInput = useCallback(
     (event) => {
-      onBeforeInput && onBeforeInput(event);
+      onBeforeInput && onBeforeInput(event), !event.defaultPrevented && event.inputType === "insertText" && editorActor.send({
+        type: "before insert text",
+        nativeEvent: event,
+        editor: slateEditor
+      });
     },
     [onBeforeInput]
   ), validateSelection = useCallback(() => {