@portabletext/editor 1.11.2 → 1.12.0

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-import { isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isKeySegment, defineType, defineField, isPortableTextListBlock } from "@sanity/types";
+import { isKeySegment, isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, defineType, defineField, isPortableTextListBlock } from "@sanity/types";
 import { Schema } from "@sanity/schema";
 import startCase from "lodash.startcase";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
@@ -138,7 +138,13 @@ function getNextBlock(context) {
     return nextBlock;
 }
 function isEmptyTextBlock(block) {
-  return block.children.length === 1 && block.children[0].text === "";
+  if (!isPortableTextTextBlock(block))
+    return !1;
+  const onlyText = block.children.every(isPortableTextSpan$1), blockText = getTextBlockText(block);
+  return onlyText && blockText === "";
+}
+function getTextBlockText(block) {
+  return block.children.map((child) => child.text ?? "").join("");
 }
 const breakingBlockObject = {
   on: "insert break",
@@ -147,7 +153,7 @@ const breakingBlockObject = {
   }) => !!getFocusBlockObject(context),
   actions: [() => [{
     type: "insert text block",
-    decorators: []
+    placement: "after"
   }]]
 }, deletingEmptyTextBlockAfterBlockObject = {
   on: "delete backward",
@@ -164,17 +170,8 @@ const breakingBlockObject = {
     focusTextBlock,
     previousBlock
   }) => [{
-    type: "delete",
-    selection: {
-      anchor: {
-        path: focusTextBlock.path,
-        offset: 0
-      },
-      focus: {
-        path: focusTextBlock.path,
-        offset: 0
-      }
-    }
+    type: "delete block",
+    blockPath: focusTextBlock.path
   }, {
     type: "select",
     selection: {
@@ -203,17 +200,8 @@ const breakingBlockObject = {
     focusTextBlock,
     nextBlock
   }) => [{
-    type: "delete",
-    selection: {
-      anchor: {
-        path: focusTextBlock.path,
-        offset: 0
-      },
-      focus: {
-        path: focusTextBlock.path,
-        offset: 0
-      }
-    }
+    type: "delete block",
+    blockPath: focusTextBlock.path
   }, {
     type: "select",
     selection: {
@@ -391,6 +379,58 @@ function isPortableTextBlock(node) {
     node.children.every((child) => typeof child == "object" && "_type" in child)
   );
 }
+function blockOffsetToSpanSelectionPoint({
+  value,
+  blockOffset
+}) {
+  let offsetLeft = blockOffset.offset, selectionPoint;
+  for (const block of value)
+    if (block._key === blockOffset.path[0]._key && isPortableTextTextBlock(block)) {
+      for (const child of block.children)
+        if (isPortableTextSpan$1(child)) {
+          if (offsetLeft === 0) {
+            selectionPoint = {
+              path: [...blockOffset.path, "children", {
+                _key: child._key
+              }],
+              offset: 0
+            };
+            break;
+          }
+          if (offsetLeft <= child.text.length) {
+            selectionPoint = {
+              path: [...blockOffset.path, "children", {
+                _key: child._key
+              }],
+              offset: offsetLeft
+            };
+            break;
+          }
+          offsetLeft -= child.text.length;
+        }
+    }
+  return selectionPoint;
+}
+function spanSelectionPointToBlockOffset({
+  value,
+  selectionPoint
+}) {
+  let offset = 0;
+  for (const block of value)
+    if (block._key === selectionPoint.path[0]._key && isPortableTextTextBlock(block)) {
+      for (const child of block.children)
+        if (isPortableTextSpan$1(child)) {
+          if (child._key === selectionPoint.path[2]._key)
+            return {
+              path: [{
+                _key: block._key
+              }],
+              offset: offset + selectionPoint.offset
+            };
+          offset += child.text.length;
+        }
+    }
+}
 function createMarkdownBehaviors(config) {
   const automaticBlockquoteOnSpace = {
     on: "insert text",
@@ -403,12 +443,24 @@ function createMarkdownBehaviors(config) {
       const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
       if (!selectionCollapsed || !focusTextBlock || !focusSpan)
         return !1;
-      const caretAtTheEndOfQuote = context.selection.focus.offset === 1, looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text), blockquoteStyle = config.blockquoteStyle?.({
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [{
+            _key: focusTextBlock.node._key
+          }, "children", {
+            _key: focusSpan.node._key
+          }],
+          offset: context.selection.focus.offset
+        }
+      });
+      if (!blockOffset)
+        return !1;
+      const blockText = getTextBlockText(focusTextBlock.node), caretAtTheEndOfQuote = blockOffset.offset === 1, looksLikeMarkdownQuote = /^>/.test(blockText), blockquoteStyle = config.blockquoteStyle?.({
         schema: context.schema
       });
       return caretAtTheEndOfQuote && looksLikeMarkdownQuote && blockquoteStyle !== void 0 ? {
         focusTextBlock,
-        focusSpan,
         style: blockquoteStyle
       } : !1;
     },
@@ -417,7 +469,6 @@ function createMarkdownBehaviors(config) {
       text: " "
     }], (_, {
       focusTextBlock,
-      focusSpan,
       style
     }) => [{
       type: "unset block",
@@ -428,19 +479,17 @@ function createMarkdownBehaviors(config) {
       style,
       paths: [focusTextBlock.path]
     }, {
-      type: "delete",
-      selection: {
-        anchor: {
-          path: focusSpan.path,
-          offset: 0
-        },
-        focus: {
-          path: focusSpan.path,
-          offset: 2
-        }
+      type: "delete text",
+      anchor: {
+        path: focusTextBlock.path,
+        offset: 0
+      },
+      focus: {
+        path: focusTextBlock.path,
+        offset: 2
       }
     }]]
-  }, automaticBreak = {
+  }, automaticHr = {
     on: "insert text",
     guard: ({
       context,
@@ -449,14 +498,14 @@ function createMarkdownBehaviors(config) {
       const hrCharacter = event.text === "-" ? "-" : event.text === "*" ? "*" : event.text === "_" ? "_" : void 0;
       if (hrCharacter === void 0)
         return !1;
-      const breakObject = config.horizontalRuleObject?.({
+      const hrObject = config.horizontalRuleObject?.({
         schema: context.schema
       }), focusBlock = getFocusTextBlock(context), selectionCollapsed = selectionIsCollapsed(context);
-      if (!breakObject || !focusBlock || !selectionCollapsed)
+      if (!hrObject || !focusBlock || !selectionCollapsed)
         return !1;
       const onlyText = focusBlock.node.children.every(isPortableTextSpan), blockText = focusBlock.node.children.map((child) => child.text ?? "").join("");
       return onlyText && blockText === `${hrCharacter}${hrCharacter}` ? {
-        breakObject,
+        hrObject,
         focusBlock,
         hrCharacter
       } : !1;
@@ -467,26 +516,59 @@ function createMarkdownBehaviors(config) {
       type: "insert text",
       text: hrCharacter
     }], (_, {
-      breakObject,
+      hrObject,
       focusBlock
     }) => [{
       type: "insert block object",
-      ...breakObject
+      placement: "after",
+      blockObject: hrObject
     }, {
-      type: "delete",
-      selection: {
-        anchor: {
-          path: focusBlock.path,
-          offset: 0
-        },
-        focus: {
-          path: focusBlock.path,
-          offset: 0
-        }
-      }
+      type: "delete block",
+      blockPath: focusBlock.path
     }, {
       type: "insert text block",
-      decorators: []
+      placement: "after"
+    }]]
+  }, automaticHrOnPaste = {
+    on: "paste",
+    guard: ({
+      context,
+      event
+    }) => {
+      const text = event.clipboardData.getData("text/plain"), hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm, hrCharacters = text.match(hrRegExp)?.[0], hrObject = config.horizontalRuleObject?.({
+        schema: context.schema
+      }), focusBlock = getFocusBlock(context);
+      return !hrCharacters || !hrObject || !focusBlock ? !1 : {
+        hrCharacters,
+        hrObject,
+        focusBlock
+      };
+    },
+    actions: [(_, {
+      hrCharacters
+    }) => [{
+      type: "insert text",
+      text: hrCharacters
+    }], (_, {
+      hrObject,
+      focusBlock
+    }) => isPortableTextTextBlock(focusBlock.node) ? [{
+      type: "insert text block",
+      textBlock: {
+        children: focusBlock.node.children
+      },
+      placement: "after"
+    }, {
+      type: "insert block object",
+      blockObject: hrObject,
+      placement: "after"
+    }, {
+      type: "delete block",
+      blockPath: focusBlock.path
+    }] : [{
+      type: "insert block object",
+      blockObject: hrObject,
+      placement: "after"
     }]]
   }, automaticHeadingOnSpace = {
     on: "insert text",
@@ -499,8 +581,21 @@ function createMarkdownBehaviors(config) {
       const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
       if (!selectionCollapsed || !focusTextBlock || !focusSpan)
         return !1;
-      const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text), level = markdownHeadingSearch ? markdownHeadingSearch[0].length : void 0;
-      if (context.selection.focus.offset !== level)
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [{
+            _key: focusTextBlock.node._key
+          }, "children", {
+            _key: focusSpan.node._key
+          }],
+          offset: context.selection.focus.offset
+        }
+      });
+      if (!blockOffset)
+        return !1;
+      const blockText = getTextBlockText(focusTextBlock.node), markdownHeadingSearch = /^#+/.exec(blockText), level = markdownHeadingSearch ? markdownHeadingSearch[0].length : void 0;
+      if (blockOffset.offset !== level)
         return !1;
       const style = level !== void 0 ? config.headingStyle?.({
         schema: context.schema,
@@ -508,7 +603,6 @@ function createMarkdownBehaviors(config) {
       }) : void 0;
       return level !== void 0 && style !== void 0 ? {
         focusTextBlock,
-        focusSpan,
         style,
         level
       } : !1;
@@ -518,7 +612,6 @@ function createMarkdownBehaviors(config) {
       text: " "
     }], (_, {
       focusTextBlock,
-      focusSpan,
       style,
       level
     }) => [{
@@ -530,16 +623,14 @@ function createMarkdownBehaviors(config) {
       style,
       paths: [focusTextBlock.path]
     }, {
-      type: "delete",
-      selection: {
-        anchor: {
-          path: focusSpan.path,
-          offset: 0
-        },
-        focus: {
-          path: focusSpan.path,
-          offset: level + 1
-        }
+      type: "delete text",
+      anchor: {
+        path: focusTextBlock.path,
+        offset: 0
+      },
+      focus: {
+        path: focusTextBlock.path,
+        offset: level + 1
       }
     }]]
   }, clearStyleOnBackspace = {
@@ -577,15 +668,27 @@ function createMarkdownBehaviors(config) {
       const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
       if (!selectionCollapsed || !focusTextBlock || !focusSpan)
         return !1;
-      const defaultStyle = config.defaultStyle?.({
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [{
+            _key: focusTextBlock.node._key
+          }, "children", {
+            _key: focusSpan.node._key
+          }],
+          offset: context.selection.focus.offset
+        }
+      });
+      if (!blockOffset)
+        return !1;
+      const blockText = getTextBlockText(focusTextBlock.node), defaultStyle = config.defaultStyle?.({
         schema: context.schema
-      }), looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text), unorderedListStyle = config.unorderedListStyle?.({
+      }), looksLikeUnorderedList = /^(-|\*)/.test(blockText), unorderedListStyle = config.unorderedListStyle?.({
         schema: context.schema
-      }), caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1;
+      }), caretAtTheEndOfUnorderedList = blockOffset.offset === 1;
       if (defaultStyle && caretAtTheEndOfUnorderedList && looksLikeUnorderedList && unorderedListStyle !== void 0)
         return {
           focusTextBlock,
-          focusSpan,
           listItem: unorderedListStyle,
           listItemLength: 1,
           style: defaultStyle
@@ -595,7 +698,6 @@ function createMarkdownBehaviors(config) {
       }), caretAtTheEndOfOrderedList = context.selection.focus.offset === 2;
       return defaultStyle && caretAtTheEndOfOrderedList && looksLikeOrderedList && orderedListStyle !== void 0 ? {
         focusTextBlock,
-        focusSpan,
         listItem: orderedListStyle,
         listItemLength: 2,
         style: defaultStyle
@@ -606,7 +708,6 @@ function createMarkdownBehaviors(config) {
       text: " "
     }], (_, {
       focusTextBlock,
-      focusSpan,
       style,
       listItem,
       listItemLength
@@ -617,20 +718,18 @@ function createMarkdownBehaviors(config) {
       style,
       paths: [focusTextBlock.path]
     }, {
-      type: "delete",
-      selection: {
-        anchor: {
-          path: focusSpan.path,
-          offset: 0
-        },
-        focus: {
-          path: focusSpan.path,
-          offset: listItemLength + 1
-        }
+      type: "delete text",
+      anchor: {
+        path: focusTextBlock.path,
+        offset: 0
+      },
+      focus: {
+        path: focusTextBlock.path,
+        offset: listItemLength + 1
       }
     }]]
   };
-  return [automaticBlockquoteOnSpace, automaticBreak, automaticHeadingOnSpace, clearStyleOnBackspace, automaticListOnSpace];
+  return [automaticBlockquoteOnSpace, automaticHeadingOnSpace, automaticHr, automaticHrOnPaste, clearStyleOnBackspace, automaticListOnSpace];
 }
 function getPortableTextMemberSchemaTypes(portableTextType) {
   if (!portableTextType)
@@ -4728,7 +4827,65 @@ function createSlateEditor(config) {
   };
   return slateEditors.set(config.editorActor, slateEditor), slateEditor;
 }
-const debug$5 = debugWithName("API:editable");
+function insertBlock({
+  block,
+  placement,
+  editor,
+  schema
+}) {
+  if (editor.selection) {
+    const [focusBlock, focusBlockPath] = Array.from(Editor.nodes(editor, {
+      at: editor.selection.focus.path.slice(0, 1),
+      match: (n) => !Editor.isEditor(n)
+    }))[0] ?? [void 0, void 0];
+    if (placement === "after") {
+      const nextPath = [focusBlockPath[0] + 1];
+      Transforms.insertNodes(editor, block, {
+        at: nextPath
+      }), Transforms.select(editor, {
+        anchor: {
+          path: [nextPath[0], 0],
+          offset: 0
+        },
+        focus: {
+          path: [nextPath[0], 0],
+          offset: 0
+        }
+      });
+    } else
+      Editor.insertNode(editor, block);
+    focusBlock && isEqualToEmptyEditor([focusBlock], schema) && Transforms.removeNodes(editor, {
+      at: focusBlockPath
+    });
+  } else {
+    const lastBlock = Array.from(Editor.nodes(editor, {
+      match: (n) => !Editor.isEditor(n),
+      at: [],
+      reverse: !0
+    }))[0];
+    Editor.insertNode(editor, block), lastBlock && isEqualToEmptyEditor([lastBlock[0]], schema) && Transforms.removeNodes(editor, {
+      at: lastBlock[1]
+    });
+  }
+}
+const insertBlockObjectActionImplementation = ({
+  context,
+  action
+}) => {
+  const block = toSlateValue([{
+    _key: context.keyGenerator(),
+    _type: action.blockObject.name,
+    ...action.blockObject.value ? action.blockObject.value : {}
+  }], {
+    schemaTypes: context.schema
+  })[0];
+  insertBlock({
+    block,
+    placement: action.placement,
+    editor: action.editor,
+    schema: context.schema
+  });
+}, debug$5 = debugWithName("API:editable");
 function createEditableAPI(editor, editorActor) {
   const types = editorActor.getSnapshot().context.schema;
   return {
@@ -4817,18 +4974,21 @@ function createEditableAPI(editor, editorActor) {
         at: editor.selection
       }), editor.onChange(), toPortableTextRange(fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)), editor.selection, types)?.focus.path || [];
     },
-    insertBlock: (type, value) => insertBlockObjectActionImplementation({
+    insertBlock: (type, value) => (insertBlockObjectActionImplementation({
       context: {
         keyGenerator: editorActor.getSnapshot().context.keyGenerator,
         schema: types
       },
       action: {
         type: "insert block object",
-        name: type.name,
-        value,
+        blockObject: {
+          name: type.name,
+          value
+        },
+        placement: "auto",
         editor
       }
-    }),
+    }), editor.onChange(), toPortableTextRange(fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)), editor.selection, types)?.focus.path ?? []),
     hasBlockStyle: (style) => {
       try {
         return editor.pteHasBlockStyle(style);
@@ -4998,35 +5158,6 @@ function createEditableAPI(editor, editorActor) {
     }
   };
 }
-const insertBlockObjectActionImplementation = ({
-  context,
-  action
-}) => {
-  const editor = action.editor, types = context.schema, block = toSlateValue([{
-    _key: context.keyGenerator(),
-    _type: action.name,
-    ...action.value ? action.value : {}
-  }], {
-    schemaTypes: context.schema
-  })[0];
-  if (!editor.selection) {
-    const lastBlock = Array.from(Editor.nodes(editor, {
-      match: (n) => !Editor.isEditor(n),
-      at: [],
-      reverse: !0
-    }))[0];
-    return Editor.insertNode(editor, block), lastBlock && isEqualToEmptyEditor([lastBlock[0]], types) && Transforms.removeNodes(editor, {
-      at: lastBlock[1]
-    }), editor.onChange(), toPortableTextRange(fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)), editor.selection, types)?.focus.path ?? [];
-  }
-  const focusBlock = Array.from(Editor.nodes(editor, {
-    at: editor.selection.focus.path.slice(0, 1),
-    match: (n) => n._type === types.block.name
-  }))[0];
-  return Editor.insertNode(editor, block), focusBlock && isEqualToEmptyEditor([focusBlock[0]], types) && Transforms.removeNodes(editor, {
-    at: focusBlock[1]
-  }), editor.onChange(), toPortableTextRange(fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)), editor.selection, types)?.focus.path || [];
-};
 function isAnnotationActive({
   editor,
   annotation
@@ -5422,18 +5553,52 @@ const addAnnotationActionImplementation = ({
   }) => {
     deleteForward(action.editor, action.unit);
   },
-  delete: ({
+  "delete block": ({
+    action
+  }) => {
+    const range = toSlateRange({
+      anchor: {
+        path: action.blockPath,
+        offset: 0
+      },
+      focus: {
+        path: action.blockPath,
+        offset: 0
+      }
+    }, action.editor);
+    if (!range) {
+      console.error("Unable to find Slate range from selection points");
+      return;
+    }
+    Transforms.removeNodes(action.editor, {
+      at: range
+    });
+  },
+  "delete text": ({
+    context,
     action
   }) => {
-    const location = toSlateRange(action.selection, action.editor);
-    if (!location) {
-      console.error(`Could not find Slate location from selection ${action.selection}`);
+    const value = fromSlateValue(action.editor.children, context.schema.block.name, KEY_TO_VALUE_ELEMENT.get(action.editor)), anchor = blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: action.anchor
+    }), focus = blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: action.focus
+    });
+    if (!anchor || !focus) {
+      console.error("Unable to find anchor or focus selection point");
       return;
     }
-    location.anchor.path.length === 1 && location.focus.path.length === 1 ? Transforms.removeNodes(action.editor, {
-      at: location
-    }) : Transforms.delete(action.editor, {
-      at: location
+    const range = toSlateRange({
+      anchor,
+      focus
+    }, action.editor);
+    if (!range) {
+      console.error("Unable to find Slate range from selection points");
+      return;
+    }
+    Transforms.delete(action.editor, {
+      at: range
     });
   },
   "insert block object": insertBlockObjectActionImplementation,
@@ -5449,16 +5614,27 @@ const addAnnotationActionImplementation = ({
     context,
     action
   }) => {
-    Editor.insertNode(action.editor, {
+    const block = toSlateValue([{
       _key: context.keyGenerator(),
       _type: context.schema.block.name,
       style: context.schema.styles[0].value ?? "normal",
       markDefs: [],
-      children: [{
+      children: action.textBlock?.children?.map((child) => ({
+        ...child,
+        _key: context.keyGenerator()
+      })) ?? [{
+        _type: context.schema.span.name,
         _key: context.keyGenerator(),
-        _type: "span",
         text: ""
       }]
+    }], {
+      schemaTypes: context.schema
+    })[0];
+    insertBlock({
+      block,
+      editor: action.editor,
+      schema: context.schema,
+      placement: action.placement
     });
   },
   effect: ({
@@ -5493,8 +5669,15 @@ function performAction({
   action
 }) {
   switch (action.type) {
-    case "delete": {
-      behaviorActionImplementations.delete({
+    case "delete block": {
+      behaviorActionImplementations["delete block"]({
+        context,
+        action
+      });
+      break;
+    }
+    case "delete text": {
+      behaviorActionImplementations["delete text"]({
         context,
         action
       });