@portabletext/editor 1.7.0 → 1.8.0

package/lib/index.mjs

@@ -317,6 +317,21 @@ const breakingBlockObject = {
   blockObjects: coreBlockObjectBehaviors,
   lists: coreListBehaviors
 };
+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
+    // allowed child types and marks, one might name them differently
+    typeof node._type == "string" && // Toolkit-types like nested spans are @-prefixed
+    node._type[0] !== "@" && // `markDefs` isn't _required_ per say, but if it's there, it needs to be an array
+    (!("markDefs" in node) || !node.markDefs || Array.isArray(node.markDefs) && // Every mark definition needs to have an `_key` to be mappable in child spans
+    node.markDefs.every((def) => typeof def._key == "string")) && // `children` is required and needs to be an array
+    "children" in node && Array.isArray(node.children) && // All children are objects with `_type` (usually spans, but can contain other stuff)
+    node.children.every((child) => typeof child == "object" && "_type" in child)
+  );
+}
 function createMarkdownBehaviors(config) {
   const automaticBlockquoteOnSpace = {
     on: "insert text",
@@ -329,7 +344,7 @@ 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.mapBlockquoteStyle(context.schema);
+      const caretAtTheEndOfQuote = context.selection.focus.offset === 1, looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text), blockquoteStyle = config.mapBlockquoteStyle?.(context.schema);
       return caretAtTheEndOfQuote && looksLikeMarkdownQuote && blockquoteStyle !== void 0 ? {
         focusTextBlock,
         focusSpan,
@@ -364,6 +379,48 @@ function createMarkdownBehaviors(config) {
         }
       }
     }]]
+  }, automaticBreak = {
+    on: "insert text",
+    guard: ({
+      context,
+      event
+    }) => {
+      if (event.text !== "-")
+        return !1;
+      const breakObject = config.mapBreakObject?.(context.schema), focusBlock = getFocusTextBlock(context), selectionCollapsed = selectionIsCollapsed(context);
+      if (!breakObject || !focusBlock || !selectionCollapsed)
+        return !1;
+      const onlyText = focusBlock.node.children.every(isPortableTextSpan), blockText = focusBlock.node.children.map((child) => child.text ?? "").join("");
+      return onlyText && blockText === "--" ? {
+        breakObject,
+        focusBlock
+      } : !1;
+    },
+    actions: [() => [{
+      type: "insert text",
+      text: "-"
+    }], (_, {
+      breakObject,
+      focusBlock
+    }) => [{
+      type: "insert block object",
+      ...breakObject
+    }, {
+      type: "delete",
+      selection: {
+        anchor: {
+          path: focusBlock.path,
+          offset: 0
+        },
+        focus: {
+          path: focusBlock.path,
+          offset: 0
+        }
+      }
+    }, {
+      type: "insert text block",
+      decorators: []
+    }]]
   }, automaticHeadingOnSpace = {
     on: "insert text",
     guard: ({
@@ -378,7 +435,7 @@ function createMarkdownBehaviors(config) {
       const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text), headingLevel = markdownHeadingSearch ? markdownHeadingSearch[0].length : void 0;
       if (context.selection.focus.offset !== headingLevel)
         return !1;
-      const headingStyle = headingLevel !== void 0 ? config.mapHeadingStyle(context.schema, headingLevel) : void 0;
+      const headingStyle = headingLevel !== void 0 ? config.mapHeadingStyle?.(context.schema, headingLevel) : void 0;
       return headingLevel !== void 0 && headingStyle !== void 0 ? {
         focusTextBlock,
         focusSpan,
@@ -423,7 +480,7 @@ function createMarkdownBehaviors(config) {
       const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
       if (!selectionCollapsed || !focusTextBlock || !focusSpan)
         return !1;
-      const atTheBeginningOfBLock = focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection.focus.offset === 0, defaultStyle = config.mapDefaultStyle(context.schema);
+      const atTheBeginningOfBLock = focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection.focus.offset === 0, defaultStyle = config.mapDefaultStyle?.(context.schema);
       return atTheBeginningOfBLock && defaultStyle && focusTextBlock.node.style !== defaultStyle ? {
         defaultStyle,
         focusTextBlock
@@ -448,7 +505,7 @@ function createMarkdownBehaviors(config) {
       const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
       if (!selectionCollapsed || !focusTextBlock || !focusSpan)
         return !1;
-      const defaultStyle = config.mapDefaultStyle(context.schema), looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text), unorderedListStyle = config.mapUnorderedListStyle(context.schema), caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1;
+      const defaultStyle = config.mapDefaultStyle?.(context.schema), looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text), unorderedListStyle = config.mapUnorderedListStyle?.(context.schema), caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1;
       if (defaultStyle && caretAtTheEndOfUnorderedList && looksLikeUnorderedList && unorderedListStyle !== void 0)
         return {
           focusTextBlock,
@@ -457,7 +514,7 @@ function createMarkdownBehaviors(config) {
           listItemLength: 1,
           style: defaultStyle
         };
-      const looksLikeOrderedList = /^1./.test(focusSpan.node.text), orderedListStyle = config.mapOrderedListStyle(context.schema), caretAtTheEndOfOrderedList = context.selection.focus.offset === 2;
+      const looksLikeOrderedList = /^1./.test(focusSpan.node.text), orderedListStyle = config.mapOrderedListStyle?.(context.schema), caretAtTheEndOfOrderedList = context.selection.focus.offset === 2;
       return defaultStyle && caretAtTheEndOfOrderedList && looksLikeOrderedList && orderedListStyle !== void 0 ? {
         focusTextBlock,
         focusSpan,
@@ -495,7 +552,7 @@ function createMarkdownBehaviors(config) {
       }
     }]]
   };
-  return [automaticBlockquoteOnSpace, automaticHeadingOnSpace, clearStyleOnBackspace, automaticListOnSpace];
+  return [automaticBlockquoteOnSpace, automaticBreak, automaticHeadingOnSpace, clearStyleOnBackspace, automaticListOnSpace];
 }
 function getPortableTextMemberSchemaTypes(portableTextType) {
   if (!portableTextType)
@@ -3925,21 +3982,6 @@ function createWithPortableTextLists(types) {
     }, 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
-    // allowed child types and marks, one might name them differently
-    typeof node._type == "string" && // Toolkit-types like nested spans are @-prefixed
-    node._type[0] !== "@" && // `markDefs` isn't _required_ per say, but if it's there, it needs to be an array
-    (!("markDefs" in node) || !node.markDefs || Array.isArray(node.markDefs) && // Every mark definition needs to have an `_key` to be mappable in child spans
-    node.markDefs.every((def) => typeof def._key == "string")) && // `children` is required and needs to be an array
-    "children" in node && Array.isArray(node.children) && // All children are objects with `_type` (usually spans, but can contain other stuff)
-    node.children.every((child) => typeof child == "object" && "_type" in child)
-  );
-}
 function getPreviousSpan({
   editor,
   blockPath,
@@ -4647,17 +4689,19 @@ function createSlateEditor(config) {
   KEY_TO_VALUE_ELEMENT.set(instance, {}), KEY_TO_SLATE_ELEMENT.set(instance, {});
   for (const subscription of subscriptions)
     unsubscriptions.push(subscription());
-  const initialValue = [instance.pteCreateTextBlock({
-    decorators: []
-  })], slateEditor = {
-    instance,
-    initialValue,
-    destroy: () => {
+  config.editorActor.subscribe((snapshot) => {
+    if (snapshot.status !== "active") {
       debug$7("Destroying Slate editor"), instance.destroy();
       for (const unsubscribe of unsubscriptions)
         unsubscribe();
       subscriptions = [], unsubscriptions = [];
     }
+  });
+  const initialValue = [instance.pteCreateTextBlock({
+    decorators: []
+  })], slateEditor = {
+    instance,
+    initialValue
   };
   return slateEditors.set(config.editorActor, slateEditor), slateEditor;
 }
@@ -4750,32 +4794,18 @@ 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) => {
-      const block = toSlateValue([{
-        _key: editorActor.getSnapshot().context.keyGenerator(),
-        _type: type.name,
-        ...value || {}
-      }], {
-        schemaTypes: editorActor.getSnapshot().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 ?? [];
+    insertBlock: (type, value) => insertBlockObjectActionImplementation({
+      context: {
+        keyGenerator: editorActor.getSnapshot().context.keyGenerator,
+        schema: types
+      },
+      action: {
+        type: "insert block object",
+        name: type.name,
+        value,
+        editor
       }
-      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 || [];
-    },
+    }),
     hasBlockStyle: (style) => {
       try {
         return editor.pteHasBlockStyle(style);
@@ -4945,6 +4975,35 @@ 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
@@ -5325,6 +5384,7 @@ const addAnnotationActionImplementation = ({
       at: location
     });
   },
+  "insert block object": insertBlockObjectActionImplementation,
   "insert break": insertBreakActionImplementation,
   "insert soft break": insertSoftBreakActionImplementation,
   "insert text": ({
@@ -5382,6 +5442,13 @@ function performAction({
       });
       break;
     }
+    case "insert block object": {
+      behaviorActionImplementations["insert block object"]({
+        context,
+        action
+      });
+      break;
+    }
     case "insert text block": {
       behaviorActionImplementations["insert text block"]({
         context,
@@ -5912,7 +5979,7 @@ class PortableTextEditor extends Component {
   constructor(props) {
     if (super(props), props.editor) {
       const editor = props.editor;
-      this.editorActor = editor._internal.editorActor, this.editorActor.start(), this.schemaTypes = this.editorActor.getSnapshot().context.schema;
+      this.editorActor = editor._internal.editorActor, this.slateEditor = editor._internal.slateEditor, this.editorActor.start(), this.schemaTypes = this.editorActor.getSnapshot().context.schema;
     } else {
       if (!props.schemaType)
         throw new Error('PortableTextEditor: missing "schemaType" property');
@@ -5921,16 +5988,16 @@ class PortableTextEditor extends Component {
           keyGenerator: props.keyGenerator || defaultKeyGenerator,
           schema: this.schemaTypes
         }
-      }), this.editorActor.start(), props.readOnly && this.editorActor.send({
+      }), this.editorActor.start(), this.slateEditor = createSlateEditor({
+        editorActor: this.editorActor
+      }), props.readOnly && this.editorActor.send({
         type: "toggle readOnly"
       }), props.maxBlocks && this.editorActor.send({
         type: "update maxBlocks",
         maxBlocks: props.maxBlocks === void 0 ? void 0 : Number.parseInt(props.maxBlocks.toString(), 10)
       });
     }
-    this.slateEditor = createSlateEditor({
-      editorActor: this.editorActor
-    }), this.editable = createEditableAPI(this.slateEditor.instance, this.editorActor);
+    this.editable = createEditableAPI(this.slateEditor.instance, this.editorActor);
   }
   componentDidUpdate(prevProps) {
     !this.props.editor && !prevProps.editor && this.props.schemaType !== prevProps.schemaType && (this.schemaTypes = getPortableTextMemberSchemaTypes(this.props.schemaType.hasOwnProperty("jsonType") ? this.props.schemaType : compileType(this.props.schemaType)), this.editorActor.send({
@@ -5943,9 +6010,6 @@ class PortableTextEditor extends Component {
       maxBlocks: this.props.maxBlocks === void 0 ? void 0 : Number.parseInt(this.props.maxBlocks.toString(), 10)
     })), this.props.editorRef !== prevProps.editorRef && this.props.editorRef && (this.props.editorRef.current = this);
   }
-  componentWillUnmount() {
-    this.slateEditor.destroy();
-  }
   setEditable = (editable) => {
     this.editable = {
       ...this.editable,
@@ -6732,7 +6796,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
 });
 PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
 function useEditor(config) {
-  const $ = c(17), t0 = config.keyGenerator ?? defaultKeyGenerator;
+  const $ = c(20), t0 = config.keyGenerator ?? defaultKeyGenerator;
   let t1;
   $[0] !== config.schema || $[1] !== config.schemaDefinition ? (t1 = config.schemaDefinition ? compileSchemaDefinition(config.schemaDefinition) : getPortableTextMemberSchemaTypes(config.schema.hasOwnProperty("jsonType") ? config.schema : compileType(config.schema)), $[0] = config.schema, $[1] = config.schemaDefinition, $[2] = t1) : t1 = $[2];
   let t2;
@@ -6743,22 +6807,28 @@ function useEditor(config) {
       schema: t1
     }
   }, $[3] = config.behaviors, $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6];
-  const editorActor = useActorRef(editorMachine, t2), readOnly = useSelector(editorActor, _temp);
-  let t3, t4;
-  $[7] !== editorActor ? (t3 = (event) => {
-    editorActor.send(event);
-  }, t4 = (event_0, listener) => editorActor.on(event_0, listener), $[7] = editorActor, $[8] = t3, $[9] = t4) : (t3 = $[8], t4 = $[9]);
-  let t5;
-  $[10] !== editorActor ? (t5 = {
+  const editorActor = useActorRef(editorMachine, t2);
+  let t3;
+  $[7] !== editorActor ? (t3 = createSlateEditor({
     editorActor
-  }, $[10] = editorActor, $[11] = t5) : t5 = $[11];
+  }), $[7] = editorActor, $[8] = t3) : t3 = $[8];
+  const slateEditor = t3, readOnly = useSelector(editorActor, _temp);
+  let t4, t5;
+  $[9] !== editorActor ? (t4 = (event) => {
+    editorActor.send(event);
+  }, t5 = (event_0, listener) => editorActor.on(event_0, listener), $[9] = editorActor, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]);
   let t6;
-  return $[12] !== readOnly || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = {
-    send: t3,
-    on: t4,
+  $[12] !== editorActor || $[13] !== slateEditor ? (t6 = {
+    editorActor,
+    slateEditor
+  }, $[12] = editorActor, $[13] = slateEditor, $[14] = t6) : t6 = $[14];
+  let t7;
+  return $[15] !== readOnly || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = {
+    send: t4,
+    on: t5,
     readOnly,
-    _internal: t5
-  }, $[12] = readOnly, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+    _internal: t6
+  }, $[15] = readOnly, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
 }
 function _temp(s) {
   return s.context.readOnly;