@portabletext/editor 1.1.5 → 1.1.7

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-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"), 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"), 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"), styledComponents = require("styled-components"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), schema = require("@sanity/schema"), isHotkeyEsm = require("is-hotkey-esm"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), flatten = require("lodash/flatten.js"), blockTools = require("@sanity/block-tools"), isPlainObject = require("lodash/isPlainObject.js"), throttle = require("lodash/throttle.js"), debounce = require("lodash/debounce.js"), content = require("@sanity/util/content");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -791,7 +791,28 @@ function compileType(rawType) {
     types: [rawType]
   }).get(rawType.name);
 }
-const debug$k = debugWithName("operationToPatches");
+function getFocusBlock(context) {
+  const key = context.selection && types.isKeySegment(context.selection.focus.path[0]) ? context.selection.focus.path[0]._key : void 0, node = key ? context.value.find((block) => block._key === key) : void 0;
+  return node && key ? { node, path: [{ _key: key }] } : void 0;
+}
+function getFocusBlockObject(context) {
+  const focusBlock = getFocusBlock(context);
+  return focusBlock && !types.isPortableTextTextBlock(focusBlock.node) ? { node: focusBlock.node, path: focusBlock.path } : void 0;
+}
+const overwriteSoftReturn = {
+  on: "key down",
+  guard: ({ event }) => isHotkeyEsm.isHotkey("shift+enter", event.nativeEvent),
+  actions: [
+    ({ event }) => (event.nativeEvent.preventDefault(), { type: "insert text", text: `
+` })
+  ]
+}, enterOnVoidBlock = {
+  on: "key down",
+  guard: ({ context, event }) => isHotkeyEsm.isHotkey("enter", event.nativeEvent) ? !!getFocusBlockObject(context) : !1,
+  actions: [
+    ({ event }) => (event.nativeEvent.preventDefault(), { type: "insert text block", decorators: [] })
+  ]
+}, coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock], debug$k = debugWithName("operationToPatches");
 function createOperationToPatches(types2) {
   const textBlockName = types2.block.name;
   function insertTextPatch(editor, operation, beforeValue) {
@@ -3251,9 +3272,6 @@ function createWithPortableTextLists(types2) {
     }, editor;
   };
 }
-function isPortableTextSpan(node) {
-  return node._type === "span" && "text" in node && typeof node.text == "string" && (typeof node.marks > "u" || Array.isArray(node.marks) && node.marks.every((mark) => typeof mark == "string"));
-}
 function isPortableTextBlock(node) {
   return (
     // A block doesn't _have_ to be named 'block' - to differentiate between
@@ -3266,6 +3284,34 @@ function isPortableTextBlock(node) {
     node.children.every((child) => typeof child == "object" && "_type" in child)
   );
 }
+function getPreviousSpan({
+  editor,
+  blockPath,
+  spanPath
+}) {
+  let previousSpan;
+  for (const [child, childPath] of slate.Node.children(editor, blockPath, {
+    reverse: !0
+  }))
+    if (editor.isTextSpan(child) && slate.Path.isBefore(childPath, spanPath)) {
+      previousSpan = child;
+      break;
+    }
+  return previousSpan;
+}
+function getNextSpan({
+  editor,
+  blockPath,
+  spanPath
+}) {
+  let nextSpan;
+  for (const [child, childPath] of slate.Node.children(editor, blockPath))
+    if (editor.isTextSpan(child) && slate.Path.isAfter(childPath, spanPath)) {
+      nextSpan = child;
+      break;
+    }
+  return nextSpan;
+}
 const debug$c = debugWithName("plugin:withPortableTextMarkModel");
 function createWithPortableTextMarkModel(editorActor, types2) {
   return function(editor) {
@@ -3405,25 +3451,13 @@ function createWithPortableTextMarkModel(editorActor, types2) {
             })
           )[0] ?? [void 0, void 0], marks = span.marks ?? [], marksWithoutAnnotations = marks.filter(
             (mark) => decorators.includes(mark)
-          ), spanHasAnnotations = marks.length > marksWithoutAnnotations.length, spanIsEmpty = span.text.length === 0, atTheBeginningOfSpan = selection.anchor.offset === 0, atTheEndOfSpan = selection.anchor.offset === span.text.length;
-          let previousSpan, nextSpan;
-          for (const [child, childPath] of slate.Node.children(editor, blockPath, {
-            reverse: !0
-          }))
-            if (editor.isTextSpan(child) && slate.Path.isBefore(childPath, spanPath)) {
-              previousSpan = child;
-              break;
-            }
-          for (const [child, childPath] of slate.Node.children(editor, blockPath))
-            if (editor.isTextSpan(child) && slate.Path.isAfter(childPath, spanPath)) {
-              nextSpan = child;
-              break;
-            }
-          const previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
-            (mark) => !decorators.includes(mark) && marks.includes(mark)
-          ) : !1, previousSpanHasSameMarks = previousSpan ? previousSpan.marks?.every((mark) => marks.includes(mark)) : !1, nextSpanHasSameAnnotation = nextSpan ? nextSpan.marks?.some(
+          ), spanHasAnnotations = marks.length > marksWithoutAnnotations.length, spanIsEmpty = span.text.length === 0, atTheBeginningOfSpan = selection.anchor.offset === 0, atTheEndOfSpan = selection.anchor.offset === span.text.length, previousSpan = getPreviousSpan({ editor, blockPath, spanPath }), nextSpan = getNextSpan({ editor, blockPath, spanPath }), nextSpanAnnotations = nextSpan?.marks?.filter((mark) => !decorators.includes(mark)) ?? [], spanAnnotations = marks.filter(
+            (mark) => !decorators.includes(mark)
+          ), previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
             (mark) => !decorators.includes(mark) && marks.includes(mark)
-          ) : !1, nextSpanHasSameMarks = nextSpan ? nextSpan.marks?.every((mark) => marks.includes(mark)) : !1;
+          ) : !1, previousSpanHasSameMarks = previousSpan ? previousSpan.marks?.every((mark) => marks.includes(mark)) : !1, nextSpanSharesSomeAnnotations = spanAnnotations.some(
+            (mark) => nextSpanAnnotations?.includes(mark)
+          );
           if (spanHasAnnotations && !spanIsEmpty) {
             if (atTheBeginningOfSpan) {
               previousSpanHasSameMarks ? slate.Transforms.insertNodes(editor, {
@@ -3440,63 +3474,62 @@ function createWithPortableTextMarkModel(editorActor, types2) {
               return;
             }
             if (atTheEndOfSpan) {
-              nextSpanHasSameMarks ? slate.Transforms.insertNodes(editor, {
-                _type: "span",
-                _key: editorActor.getSnapshot().context.keyGenerator(),
-                text: op.text,
-                marks: nextSpan?.marks ?? []
-              }) : nextSpanHasSameAnnotation ? apply2(op) : slate.Transforms.insertNodes(editor, {
-                _type: "span",
-                _key: editorActor.getSnapshot().context.keyGenerator(),
-                text: op.text,
-                marks: []
-              });
-              return;
+              if (nextSpan && nextSpanSharesSomeAnnotations && nextSpanAnnotations.length < spanAnnotations.length || !nextSpanSharesSomeAnnotations) {
+                slate.Transforms.insertNodes(editor, {
+                  _type: "span",
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: nextSpan?.marks ?? []
+                });
+                return;
+              }
+              if (!nextSpan) {
+                slate.Transforms.insertNodes(editor, {
+                  _type: "span",
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: []
+                });
+                return;
+              }
             }
           }
         }
       }
       if (op.type === "remove_text") {
-        const node = Array.from(
-          slate.Editor.nodes(editor, {
-            mode: "lowest",
-            at: { path: op.path, offset: op.offset },
-            match: (n) => n._type === types2.span.name,
-            voids: !1
-          })
-        )[0][0], block = slate.Editor.node(editor, slate.Path.parent(op.path))[0];
-        if (node && isPortableTextSpan(node) && block && isPortableTextBlock(block)) {
-          const markDefs = block.markDefs ?? [], nodeHasAnnotations = (node.marks ?? []).some(
-            (mark) => markDefs.find((markDef) => markDef._key === mark)
-          ), deletingPartOfTheNode = op.offset !== 0, deletingFromTheEnd = op.offset + op.text.length === node.text.length;
-          if (nodeHasAnnotations && deletingPartOfTheNode && deletingFromTheEnd) {
-            slate.Editor.withoutNormalizing(editor, () => {
-              slate.Transforms.splitNodes(editor, {
-                match: slate.Text.isText,
-                at: { path: op.path, offset: op.offset }
-              }), slate.Transforms.removeNodes(editor, { at: slate.Path.next(op.path) });
-            }), editor.onChange();
-            return;
-          }
-          const deletingAllText = op.offset === 0 && deletingFromTheEnd;
-          if (nodeHasAnnotations && deletingAllText) {
-            const marksWithoutAnnotationMarks = ({
-              ...slate.Editor.marks(editor) || {}
-            }.marks || []).filter((mark) => decorators.includes(mark));
-            slate.Editor.withoutNormalizing(editor, () => {
-              apply2(op), slate.Transforms.setNodes(
-                editor,
-                { marks: marksWithoutAnnotationMarks },
-                { at: op.path }
-              );
-            }), editor.onChange();
-            return;
-          }
-          if (node.marks !== void 0 && node.marks.length > 0 && deletingAllText) {
-            slate.Editor.withoutNormalizing(editor, () => {
-              apply2(op), slate.Transforms.setNodes(editor, { marks: [] }, { at: op.path });
-            }), editor.onChange();
-            return;
+        const { selection } = editor;
+        if (selection && slate.Range.isExpanded(selection)) {
+          const [block, blockPath] = slate.Editor.node(editor, selection, {
+            depth: 1
+          }), [span, spanPath] = Array.from(
+            slate.Editor.nodes(editor, {
+              mode: "lowest",
+              at: { path: op.path, offset: op.offset },
+              match: (n) => editor.isTextSpan(n),
+              voids: !1
+            })
+          )[0] ?? [void 0, void 0];
+          if (span && block && isPortableTextBlock(block)) {
+            const markDefs = block.markDefs ?? [], marks = span.marks ?? [], spanHasAnnotations = marks.some(
+              (mark) => markDefs.find((markDef) => markDef._key === mark)
+            ), deletingFromTheEnd = op.offset + op.text.length === span.text.length, deletingAllText = op.offset === 0 && deletingFromTheEnd, previousSpan = getPreviousSpan({ editor, blockPath, spanPath }), nextSpan = getNextSpan({ editor, blockPath, spanPath }), previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
+              (mark) => !decorators.includes(mark) && marks.includes(mark)
+            ) : !1, nextSpanHasSameAnnotation = nextSpan ? nextSpan.marks?.some(
+              (mark) => !decorators.includes(mark) && marks.includes(mark)
+            ) : !1;
+            if (spanHasAnnotations && deletingAllText && !previousSpanHasSameAnnotation && !nextSpanHasSameAnnotation) {
+              const marksWithoutAnnotationMarks = ({
+                ...slate.Editor.marks(editor) || {}
+              }.marks || []).filter((mark) => decorators.includes(mark));
+              slate.Editor.withoutNormalizing(editor, () => {
+                apply2(op), slate.Transforms.setNodes(
+                  editor,
+                  { marks: marksWithoutAnnotationMarks },
+                  { at: op.path }
+                );
+              }), editor.onChange();
+              return;
+            }
           }
         }
       }
@@ -3855,22 +3888,7 @@ function createWithHotkeys(types$1, portableTextEditor, hotkeysFromOptions) {
             return;
           }
         }
-        if (focusBlock && slate.Editor.isVoid(editor, focusBlock)) {
-          slate.Editor.insertNode(editor, editor.pteCreateTextBlock({ decorators: [] })), event.preventDefault(), editor.onChange();
-          return;
-        }
-        event.preventDefault(), editor.insertBreak(), editor.onChange();
-      }
-      if (isShiftEnter) {
-        event.preventDefault(), editor.insertText(`
-`);
-        return;
-      }
-      if (isHotkeyEsm.isHotkey("mod+z", event.nativeEvent)) {
-        event.preventDefault(), editor.undo();
-        return;
       }
-      (isHotkeyEsm.isHotkey("mod+y", event.nativeEvent) || isHotkeyEsm.isHotkey("mod+shift+z", event.nativeEvent)) && (event.preventDefault(), editor.redo());
     }, editor;
   };
 }
@@ -4795,6 +4813,29 @@ ${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
+}) {
+  slate.Editor.insertText(event.editor, event.text);
+}
+function inserTextBlock({
+  context,
+  event
+}) {
+  slate.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 = xstate.fromCallback(({ sendBack }) => {
   const onlineHandler = () => {
     sendBack({ type: "online" });
@@ -4812,6 +4853,15 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
     input: {}
   },
   actions: {
+    "apply:insert text": ({ context, event }) => {
+      xstate.assertEvent(event, "insert text"), inserText({ context, event });
+    },
+    "apply:insert text block": ({ context, event }) => {
+      xstate.assertEvent(event, "insert text block"), inserTextBlock({ context, event });
+    },
+    "assign schema": xstate.assign({
+      schema: ({ event }) => (xstate.assertEvent(event, "update schema"), event.schema)
+    }),
     "emit patch event": xstate.emit(({ event }) => (xstate.assertEvent(event, "patch"), event)),
     "emit mutation event": xstate.emit(({ event }) => (xstate.assertEvent(event, "mutation"), event)),
     "defer event": xstate.assign({
@@ -4823,6 +4873,50 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
     }),
     "clear pending events": xstate.assign({
       pendingEvents: []
+    }),
+    "handle behavior event": xstate.enqueueActions(({ context, event, enqueue }) => {
+      xstate.assertEvent(event, ["key down"]);
+      const eventBehaviors = context.behaviors.filter(
+        (behavior) => behavior.on === event.type
+      );
+      if (eventBehaviors.length === 0)
+        return;
+      const value = fromSlateValue(
+        event.editor.children,
+        context.schema.block.name,
+        KEY_TO_VALUE_ELEMENT.get(event.editor)
+      ), selection = toPortableTextRange(
+        value,
+        event.editor.selection,
+        context.schema
+      );
+      if (!selection) {
+        console.warn(
+          `Unable to handle event ${event.type} due to missing selection`
+        );
+        return;
+      }
+      const behaviorContext = {
+        schema: context.schema,
+        value,
+        selection
+      };
+      for (const eventBehavior of eventBehaviors) {
+        const shouldRun = eventBehavior.guard?.({
+          context: behaviorContext,
+          event
+        }) ?? !0;
+        if (!shouldRun)
+          continue;
+        const actions = eventBehavior.actions.map(
+          (action) => action({ context: behaviorContext, event }, shouldRun)
+        );
+        for (const action of actions)
+          typeof action == "object" && enqueue.raise({
+            ...action,
+            editor: event.editor
+          });
+      }
     })
   },
   actors: {
@@ -4831,8 +4925,10 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
 }).createMachine({
   id: "editor",
   context: ({ input }) => ({
+    behaviors: input.behaviors,
     keyGenerator: input.keyGenerator,
-    pendingEvents: []
+    pendingEvents: [],
+    schema: input.schema
   }),
   invoke: {
     id: "networkLogic",
@@ -4850,7 +4946,17 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
     online: { actions: xstate.emit({ type: "online" }) },
     offline: { actions: xstate.emit({ type: "offline" }) },
     loading: { actions: xstate.emit({ type: "loading" }) },
-    "done loading": { actions: xstate.emit({ type: "done loading" }) }
+    "done loading": { actions: xstate.emit({ type: "done loading" }) },
+    "update schema": { actions: "assign schema" },
+    "key down": {
+      actions: ["handle behavior event"]
+    },
+    "insert text": {
+      actions: ["apply:insert text"]
+    },
+    "insert text block": {
+      actions: ["apply:insert text block"]
+    }
   },
   initial: "pristine",
   states: {
@@ -4945,18 +5051,23 @@ class PortableTextEditor extends react.Component {
       throw new Error('PortableTextEditor: missing "schemaType" property');
     props.incomingPatches$ && console.warn(
       "The prop 'incomingPatches$' is deprecated and renamed to 'patches$'"
+    ), this.schemaTypes = getPortableTextMemberSchemaTypes(
+      props.schemaType.hasOwnProperty("jsonType") ? props.schemaType : compileType(props.schemaType)
     ), this.editorActor = xstate.createActor(editorMachine, {
       input: {
-        keyGenerator: props.keyGenerator || defaultKeyGenerator
+        behaviors: coreBehaviors,
+        keyGenerator: props.keyGenerator || defaultKeyGenerator,
+        schema: this.schemaTypes
       }
-    }), this.editorActor.start(), this.schemaTypes = getPortableTextMemberSchemaTypes(
-      props.schemaType.hasOwnProperty("jsonType") ? props.schemaType : compileType(props.schemaType)
-    );
+    }), this.editorActor.start();
   }
   componentDidUpdate(prevProps) {
     this.props.schemaType !== prevProps.schemaType && (this.schemaTypes = getPortableTextMemberSchemaTypes(
       this.props.schemaType.hasOwnProperty("jsonType") ? this.props.schemaType : compileType(this.props.schemaType)
-    )), this.props.editorRef !== prevProps.editorRef && this.props.editorRef && (this.props.editorRef.current = this);
+    ), this.editorActor.send({
+      type: "update schema",
+      schema: this.schemaTypes
+    })), this.props.editorRef !== prevProps.editorRef && this.props.editorRef && (this.props.editorRef.current = this);
   }
   setEditable = (editable) => {
     this.editable = { ...this.editable, ...editable };
@@ -5513,7 +5624,11 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
   }, [validateSelection, editableElement]);
   const handleKeyDown = react.useCallback(
     (event) => {
-      props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() || slateEditor.pteWithHotKeys(event);
+      props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() || (editorActor.send({
+        type: "key down",
+        nativeEvent: event.nativeEvent,
+        editor: slateEditor
+      }), slateEditor.pteWithHotKeys(event));
     },
     [props, slateEditor]
   ), scrollSelectionIntoViewToSlate = react.useMemo(() => {