@portabletext/editor 1.27.0 → 1.30.0

package/lib/_chunks-es/plugin.event-listener.js

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { withReact, ReactEditor, Slate } from "slate-react";
 import { useSelector, useActorRef } from "@xstate/react";
 import debug$f from "debug";
-import { Editor, Element, Range, Point, Text, Operation, Transforms, Path, Node, createEditor as createEditor$1, deleteBackward, deleteForward, insertText } from "slate";
+import { Editor, Element, Range, Point, Text, Operation, Transforms, Path, Node, createEditor as createEditor$1, select, deleteFragment, insertText, deleteBackward, deleteForward } from "slate";
 import { setup, emit, assign, fromCallback, assertEvent, enqueueActions, createActor } from "xstate";
 import isEqual from "lodash/isEqual.js";
 import { unset, set, setIfMissing, insert, diffMatchPatch as diffMatchPatch$1, applyAll } from "@portabletext/patches";
@@ -13,6 +13,7 @@ import { defineType, defineField, isKeySegment, isPortableTextTextBlock, isPorta
 import flatten from "lodash/flatten.js";
 import isPlainObject from "lodash/isPlainObject.js";
 import uniq from "lodash/uniq.js";
+import { parseBlock } from "./parse-blocks.js";
 import { sliceBlocks } from "./util.slice-blocks.js";
 import { htmlToBlocks } from "@portabletext/block-tools";
 import { toHTML } from "@portabletext/to-html";
@@ -2236,83 +2237,7 @@ const converterJson = {
       reason: "No application/x-portable-text Converter found"
     };
   }
-};
-function isTypedObject(object) {
-  return isRecord(object) && typeof object._type == "string";
-}
-function isRecord(value) {
-  return !!value && (typeof value == "object" || typeof value == "function");
-}
-function parseBlock({
-  context,
-  block,
-  options
-}) {
-  if (!isTypedObject(block) || block._type !== context.schema.block.name && !context.schema.blockObjects.some((blockObject) => blockObject.name === block._type))
-    return;
-  if (block._type !== context.schema.block.name) {
-    const _key = options.refreshKeys ? context.keyGenerator() : typeof block._key == "string" ? block._key : context.keyGenerator();
-    return {
-      ...block,
-      _key
-    };
-  }
-  if (!isPortableTextTextBlock(block))
-    return {
-      _type: context.schema.block.name,
-      _key: options.refreshKeys ? context.keyGenerator() : typeof block._key == "string" ? block._key : context.keyGenerator(),
-      children: [{
-        _key: context.keyGenerator(),
-        _type: context.schema.span.name,
-        text: "",
-        marks: []
-      }],
-      markDefs: [],
-      style: context.schema.styles[0].value
-    };
-  const markDefKeyMap = /* @__PURE__ */ new Map(), markDefs = (block.markDefs ?? []).flatMap((markDef) => {
-    if (context.schema.annotations.some((annotation) => annotation.name === markDef._type)) {
-      const _key = options.refreshKeys ? context.keyGenerator() : markDef._key;
-      return markDefKeyMap.set(markDef._key, _key), [{
-        ...markDef,
-        _key
-      }];
-    }
-    return [];
-  }), children = block.children.flatMap((child) => {
-    if (!isTypedObject(child))
-      return [];
-    if (child._type !== context.schema.span.name && !context.schema.inlineObjects.some((inlineObject) => inlineObject.name === child._type))
-      return [];
-    if (!isPortableTextSpan$1(child))
-      return [{
-        ...child,
-        _key: options.refreshKeys ? context.keyGenerator() : child._key
-      }];
-    const marks = (child.marks ?? []).flatMap((mark) => markDefKeyMap.has(mark) ? [markDefKeyMap.get(mark)] : context.schema.decorators.some((decorator) => decorator.value === mark) ? [mark] : []);
-    return [{
-      ...child,
-      _key: options.refreshKeys ? context.keyGenerator() : child._key,
-      marks
-    }];
-  }), parsedBlock = {
-    ...block,
-    _key: options.refreshKeys ? context.keyGenerator() : block._key,
-    children: children.length > 0 ? children : [{
-      _key: context.keyGenerator(),
-      _type: context.schema.span.name,
-      text: "",
-      marks: []
-    }],
-    markDefs
-  };
-  if (!context.schema.styles.find((style) => style.value === block.style)) {
-    const defaultStyle = context.schema.styles[0].value;
-    defaultStyle !== void 0 ? parsedBlock.style = defaultStyle : delete parsedBlock.style;
-  }
-  return context.schema.lists.find((list) => list.value === block.listItem) || (delete parsedBlock.listItem, delete parsedBlock.level), parsedBlock;
-}
-const converterPortableText = {
+}, converterPortableText = {
   mimeType: "application/x-portable-text",
   serialize: ({
     context,
@@ -2742,7 +2667,7 @@ function createWithEventListeners(editorActor, subscriptions) {
       insertData,
       insertSoftBreak,
       insertText: insertText2,
-      select,
+      select: select2,
       setFragmentData
     } = editor;
     return editor.deleteBackward = (unit) => {
@@ -2827,7 +2752,7 @@ function createWithEventListeners(editorActor, subscriptions) {
       });
     }, editor.select = (location) => {
       if (isApplyingBehaviorActions(editor)) {
-        select(location);
+        select2(location);
         return;
       }
       const range = Editor.range(editor, location);
@@ -2839,7 +2764,7 @@ function createWithEventListeners(editorActor, subscriptions) {
         },
         editor,
         defaultActionCallback: () => {
-          select(location);
+          select2(location);
         }
       });
     }, editor.setFragmentData = (dataTransfer, originEvent) => {
@@ -3125,15 +3050,20 @@ function setPatch(editor, patch) {
         node: c2
       });
     });
-  } else if (block && "value" in block) {
-    const newVal = applyAll([block.value], [patch])[0];
-    return Transforms.setNodes(editor, {
-      ...block,
-      value: newVal
-    }, {
-      at: blockPath
-    }), !0;
-  }
+  } else if (block && "value" in block)
+    if (patch.path.length > 1 && patch.path[1] !== "children") {
+      const newVal = applyAll(block.value, [{
+        ...patch,
+        path: patch.path.slice(1)
+      }]);
+      Transforms.setNodes(editor, {
+        ...block,
+        value: newVal
+      }, {
+        at: blockPath
+      });
+    } else
+      return !1;
   return debugState(editor, "after"), !0;
 }
 function unsetPatch(editor, patch) {
@@ -4815,6 +4745,13 @@ const blockSetBehaviorActionImplementation = ({
   action
 }) => {
   action.dataTransfer.setData(action.mimeType, action.data);
+}, deleteActionImplementation = ({
+  action
+}) => {
+  const range = toSlateRange(action.selection, action.editor);
+  if (!range)
+    throw new Error(`Failed to get Slate Range for selection ${JSON.stringify(action.selection)}`);
+  select(action.editor, range), deleteFragment(action.editor);
 }, insertBlockObjectActionImplementation = ({
   context,
   action
@@ -4870,67 +4807,64 @@ const blockSetBehaviorActionImplementation = ({
     return;
   const anchorBlockPath = editor.selection.anchor.path.slice(0, 1), focusBlockPath = editor.selection.focus.path.slice(0, 1), focusBlock = Node.descendant(editor, focusBlockPath);
   if (editor.isTextBlock(focusBlock) && anchorBlockPath[0] === focusBlockPath[0]) {
-    Editor.withoutNormalizing(editor, () => {
-      if (!editor.selection)
-        return;
-      Transforms.splitNodes(editor, {
-        at: editor.selection
-      });
-      const [nextNode, nextNodePath] = Editor.node(editor, Path.next(focusBlockPath), {
-        depth: 1
-      });
-      if (Transforms.setSelection(editor, {
-        anchor: {
-          path: [...nextNodePath, 0],
-          offset: 0
-        },
-        focus: {
-          path: [...nextNodePath, 0],
-          offset: 0
-        }
-      }), editor.isTextBlock(nextNode) && nextNode.markDefs && nextNode.markDefs.length > 0) {
-        const newMarkDefKeys = /* @__PURE__ */ new Map(), prevNodeSpans = Array.from(Node.children(editor, focusBlockPath)).map((entry) => entry[0]).filter((node) => editor.isTextSpan(node)), children = Node.children(editor, nextNodePath);
-        for (const [child, childPath] of children) {
-          if (!editor.isTextSpan(child))
-            continue;
-          const marks = child.marks ?? [];
-          for (const mark of marks)
-            schema.decorators.some((decorator) => decorator.value === mark) || prevNodeSpans.some((prevNodeSpan) => prevNodeSpan.marks?.includes(mark)) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(mark, keyGenerator());
-          const newMarks = marks.map((mark) => newMarkDefKeys.get(mark) ?? mark);
-          isEqual(marks, newMarks) || Transforms.setNodes(editor, {
-            marks: newMarks
-          }, {
-            at: childPath
-          });
-        }
-        const newMarkDefs = nextNode.markDefs.map((markDef) => ({
-          ...markDef,
-          _key: newMarkDefKeys.get(markDef._key) ?? markDef._key
-        }));
-        isEqual(nextNode.markDefs, newMarkDefs) || Transforms.setNodes(editor, {
-          markDefs: newMarkDefs
+    Transforms.splitNodes(editor, {
+      at: editor.selection
+    });
+    const [nextBlock, nextBlockPath] = Editor.node(editor, Path.next(focusBlockPath), {
+      depth: 1
+    }), nextChild = Node.child(nextBlock, 0);
+    if (!editor.isTextSpan(nextChild) && Transforms.insertNodes(editor, {
+      _key: context.keyGenerator(),
+      _type: "span",
+      text: "",
+      marks: []
+    }, {
+      at: [nextBlockPath[0], 0]
+    }), Transforms.setSelection(editor, {
+      anchor: {
+        path: [...nextBlockPath, 0],
+        offset: 0
+      },
+      focus: {
+        path: [...nextBlockPath, 0],
+        offset: 0
+      }
+    }), editor.isTextBlock(nextBlock) && nextBlock.markDefs && nextBlock.markDefs.length > 0) {
+      const newMarkDefKeys = /* @__PURE__ */ new Map(), prevNodeSpans = Array.from(Node.children(editor, focusBlockPath)).map((entry) => entry[0]).filter((node) => editor.isTextSpan(node)), children = Node.children(editor, nextBlockPath);
+      for (const [child, childPath] of children) {
+        if (!editor.isTextSpan(child))
+          continue;
+        const marks = child.marks ?? [];
+        for (const mark of marks)
+          schema.decorators.some((decorator) => decorator.value === mark) || prevNodeSpans.some((prevNodeSpan) => prevNodeSpan.marks?.includes(mark)) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(mark, keyGenerator());
+        const newMarks = marks.map((mark) => newMarkDefKeys.get(mark) ?? mark);
+        isEqual(marks, newMarks) || Transforms.setNodes(editor, {
+          marks: newMarks
         }, {
-          at: nextNodePath,
-          match: (node) => editor.isTextBlock(node)
+          at: childPath
         });
       }
-    }), editor.onChange();
+      const newMarkDefs = nextBlock.markDefs.map((markDef) => ({
+        ...markDef,
+        _key: newMarkDefKeys.get(markDef._key) ?? markDef._key
+      }));
+      isEqual(nextBlock.markDefs, newMarkDefs) || Transforms.setNodes(editor, {
+        markDefs: newMarkDefs
+      }, {
+        at: nextBlockPath,
+        match: (node) => editor.isTextBlock(node)
+      });
+    }
     return;
   }
   Transforms.splitNodes(editor, {
     always: !0
   });
 }, insertSoftBreakActionImplementation = ({
-  context,
   action
 }) => {
-  insertBreakActionImplementation({
-    context,
-    action: {
-      ...action,
-      type: "insert.break"
-    }
-  });
+  insertText(action.editor, `
+`);
 }, insertInlineObjectActionImplementation = ({
   context,
   action
@@ -5082,6 +5016,7 @@ const blockSetBehaviorActionImplementation = ({
   }) => {
     ReactEditor.focus(action.editor);
   },
+  delete: deleteActionImplementation,
   "delete.backward": ({
     action
   }) => {
@@ -5390,6 +5325,13 @@ function performDefaultAction({
       });
       break;
     }
+    case "delete": {
+      behaviorActionImplementations.delete({
+        context,
+        action
+      });
+      break;
+    }
     case "delete.backward": {
       behaviorActionImplementations["delete.backward"]({
         context,
@@ -6368,30 +6310,224 @@ class PortableTextEditor extends Component {
       /* @__PURE__ */ jsx(EditorActorContext.Provider, { value: this.editor._internal.editorActor, children: /* @__PURE__ */ jsx(Slate, { editor: this.editor._internal.slateEditor.instance, initialValue: this.editor._internal.slateEditor.initialValue, children: /* @__PURE__ */ jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsx(PortableTextEditorSelectionProvider, { editorActor: this.editor._internal.editorActor, children: this.props.children }) }) }) })
     ] });
   }
-  // Static API methods
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isActive = useEditorSelector(editor, selectors.getActiveAnnotations)
+   * ```
+   */
   static activeAnnotations = (editor) => editor && editor.editable ? editor.editable.activeAnnotations() : [];
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isActive = useEditorSelector(editor, selectors.isActiveAnnotation(...))
+   * ```
+   */
   static isAnnotationActive = (editor, annotationType) => editor && editor.editable ? editor.editable.isAnnotationActive(annotationType) : !1;
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'annotation.add',
+   *  annotation: {
+   *    name: '...',
+   *    value: {...},
+   *  }
+   * })
+   * ```
+   */
   static addAnnotation = (editor, type, value) => editor.editable?.addAnnotation(type, value);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'blur',
+   * })
+   * ```
+   */
   static blur = (editor) => {
     debug("Host blurred"), editor.editable?.blur();
   };
   static delete = (editor, selection, options) => editor.editable?.delete(selection, options);
   static findDOMNode = (editor, element) => editor.editable?.findDOMNode(element);
   static findByPath = (editor, path) => editor.editable?.findByPath(path) || [];
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'focus',
+   * })
+   * ```
+   */
   static focus = (editor) => {
     debug("Host requesting focus"), editor.editable?.focus();
   };
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const focusBlock = useEditorSelector(editor, selectors.getFocusBlock)
+   * ```
+   */
   static focusBlock = (editor) => editor.editable?.focusBlock();
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const focusChild = useEditorSelector(editor, selectors.getFocusChild)
+   * ```
+   */
   static focusChild = (editor) => editor.editable?.focusChild();
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const selection = useEditorSelector(editor, selectors.getSelection)
+   * ```
+   */
   static getSelection = (editor) => editor.editable ? editor.editable.getSelection() : null;
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const value = useEditorSelector(editor, selectors.getValue)
+   * ```
+   */
   static getValue = (editor) => editor.editable?.getValue();
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isActive = useEditorSelector(editor, selectors.isActiveStyle(...))
+   * ```
+   */
   static hasBlockStyle = (editor, blockStyle) => editor.editable?.hasBlockStyle(blockStyle);
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isActive = useEditorSelector(editor, selectors.isActiveListItem(...))
+   * ```
+   */
   static hasListStyle = (editor, listStyle) => editor.editable?.hasListStyle(listStyle);
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isSelectionCollapsed = useEditorSelector(editor, selectors.isSelectionCollapsed)
+   * ```
+   */
   static isCollapsedSelection = (editor) => editor.editable?.isCollapsedSelection();
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isSelectionExpanded = useEditorSelector(editor, selectors.isSelectionExpanded)
+   * ```
+   */
   static isExpandedSelection = (editor) => editor.editable?.isExpandedSelection();
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isActive = useEditorSelector(editor, selectors.isActiveDecorator(...))
+   * ```
+   */
   static isMarkActive = (editor, mark) => editor.editable?.isMarkActive(mark);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'insert.span',
+   *  text: '...',
+   *  annotations: [{name: '...', value: {...}}],
+   *  decorators: ['...'],
+   * })
+   * editor.send({
+   *  type: 'insert.inline object',
+   *  inlineObject: {
+   *    name: '...',
+   *    value: {...},
+   *  },
+   * })
+   * ```
+   */
   static insertChild = (editor, type, value) => (debug("Host inserting child"), editor.editable?.insertChild(type, value));
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'insert.block object',
+   *  blockObject: {
+   *    name: '...',
+   *    value: {...},
+   *  },
+   *  placement: 'auto' | 'after' | 'before',
+   * })
+   * ```
+   */
   static insertBlock = (editor, type, value) => editor.editable?.insertBlock(type, value);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'insert.break',
+   * })
+   * ```
+   */
   static insertBreak = (editor) => editor.editable?.insertBreak();
   static isVoid = (editor, element) => editor.editable?.isVoid(element);
   static isObjectPath = (_editor, path) => {
@@ -6400,15 +6536,87 @@ class PortableTextEditor extends Component {
     return path.length > 1 && path[1] !== "children" || isChildObjectEditPath;
   };
   static marks = (editor) => editor.editable?.marks();
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'select',
+   *  selection: {...},
+   * })
+   * ```
+   */
   static select = (editor, selection) => {
     debug("Host setting selection", selection), editor.editable?.select(selection);
   };
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'annotation.remove',
+   *  annotation: {
+   *    name: '...',
+   *  },
+   * })
+   * ```
+   */
   static removeAnnotation = (editor, type) => editor.editable?.removeAnnotation(type);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'style.toggle',
+   *  style: '...',
+   * })
+   * ```
+   */
   static toggleBlockStyle = (editor, blockStyle) => (debug("Host is toggling block style"), editor.editable?.toggleBlockStyle(blockStyle));
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'list item.toggle',
+   *  listItem: '...',
+   * })
+   * ```
+   */
   static toggleList = (editor, listStyle) => editor.editable?.toggleList(listStyle);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'decorator.toggle',
+   *  decorator: '...',
+   * })
+   * ```
+   */
   static toggleMark = (editor, mark) => {
     debug("Host toggling mark", mark), editor.editable?.toggleMark(mark);
   };
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const selectedSlice = useEditorSelector(editor, selectors.getSelectedSlice)
+   * ```
+   */
   static getFragment = (editor) => (debug("Host getting fragment"), editor.editable?.getFragment());
   static undo = (editor) => {
     debug("Host undoing"), editor.editable?.undo();
@@ -6416,6 +6624,16 @@ class PortableTextEditor extends Component {
   static redo = (editor) => {
     debug("Host redoing"), editor.editable?.redo();
   };
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isOverlapping = useEditorSelector(editor, selectors.isOverlappingSelection(selectionB))
+   * ```
+   */
   static isSelectionsOverlapping = (editor, selectionA, selectionB) => editor.editable?.isSelectionsOverlapping(selectionA, selectionB);
 }
 function RoutePatchesObservableToEditorActor(props) {