@portabletext/plugin-markdown-shortcuts 1.2.0 → 1.3.0

package/dist/index.d.cts

@@ -11,13 +11,6 @@ declare type MarkdownBehaviorsConfig = {
       }
     | undefined
   defaultStyle?: (context: {schema: EditorSchema}) => string | undefined
-  headingStyle?: (context: {
-    schema: EditorSchema
-    level: number
-  }) => string | undefined
-  blockquoteStyle?: (context: {schema: EditorSchema}) => string | undefined
-  unorderedList?: (context: {schema: EditorSchema}) => string | undefined
-  orderedList?: (context: {schema: EditorSchema}) => string | undefined
 }
 
 /**
@@ -40,6 +33,14 @@ export declare function MarkdownShortcutsPlugin({
  * @beta
  */
 export declare type MarkdownShortcutsPluginProps = MarkdownBehaviorsConfig & {
+  blockquoteStyle?: (context: {schema: EditorSchema}) => string | undefined
+  defaultStyle?: (context: {schema: EditorSchema}) => string | undefined
+  headingStyle?: (context: {
+    schema: EditorSchema
+    level: number
+  }) => string | undefined
+  unorderedList?: (context: {schema: EditorSchema}) => string | undefined
+  orderedList?: (context: {schema: EditorSchema}) => string | undefined
   boldDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
   codeDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
   italicDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined

package/dist/index.d.ts

@@ -11,13 +11,6 @@ declare type MarkdownBehaviorsConfig = {
       }
     | undefined
   defaultStyle?: (context: {schema: EditorSchema}) => string | undefined
-  headingStyle?: (context: {
-    schema: EditorSchema
-    level: number
-  }) => string | undefined
-  blockquoteStyle?: (context: {schema: EditorSchema}) => string | undefined
-  unorderedList?: (context: {schema: EditorSchema}) => string | undefined
-  orderedList?: (context: {schema: EditorSchema}) => string | undefined
 }
 
 /**
@@ -40,6 +33,14 @@ export declare function MarkdownShortcutsPlugin({
  * @beta
  */
 export declare type MarkdownShortcutsPluginProps = MarkdownBehaviorsConfig & {
+  blockquoteStyle?: (context: {schema: EditorSchema}) => string | undefined
+  defaultStyle?: (context: {schema: EditorSchema}) => string | undefined
+  headingStyle?: (context: {
+    schema: EditorSchema
+    level: number
+  }) => string | undefined
+  unorderedList?: (context: {schema: EditorSchema}) => string | undefined
+  orderedList?: (context: {schema: EditorSchema}) => string | undefined
   boldDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
   codeDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
   italicDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined

package/dist/index.js

@@ -7,70 +7,8 @@ import { useEffect } from "react";
 import { defineBehavior, execute, raise } from "@portabletext/editor/behaviors";
 import * as selectors from "@portabletext/editor/selectors";
 import { getPreviousInlineObject } from "@portabletext/editor/selectors";
-import * as utils from "@portabletext/editor/utils";
 function createMarkdownBehaviors(config) {
-  const automaticBlockquoteOnSpace = defineBehavior({
-    on: "insert.text",
-    guard: ({
-      snapshot,
-      event
-    }) => {
-      if (event.text !== " ")
-        return !1;
-      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot), focusTextBlock = selectors.getFocusTextBlock(snapshot), focusSpan = selectors.getFocusSpan(snapshot);
-      if (!selectionCollapsed || !focusTextBlock || !focusSpan)
-        return !1;
-      const previousInlineObject = selectors.getPreviousInlineObject(snapshot), blockOffset = utils.spanSelectionPointToBlockOffset({
-        context: snapshot.context,
-        selectionPoint: {
-          path: [{
-            _key: focusTextBlock.node._key
-          }, "children", {
-            _key: focusSpan.node._key
-          }],
-          offset: snapshot.context.selection?.focus.offset ?? 0
-        }
-      });
-      if (previousInlineObject || !blockOffset)
-        return !1;
-      const blockText = utils.getTextBlockText(focusTextBlock.node), caretAtTheEndOfQuote = blockOffset.offset === 1, looksLikeMarkdownQuote = /^>/.test(blockText), blockquoteStyle = config.blockquoteStyle?.({
-        schema: snapshot.context.schema
-      });
-      return caretAtTheEndOfQuote && looksLikeMarkdownQuote && blockquoteStyle !== void 0 ? {
-        focusTextBlock,
-        style: blockquoteStyle
-      } : !1;
-    },
-    actions: [() => [execute({
-      type: "insert.text",
-      text: " "
-    })], (_, {
-      focusTextBlock,
-      style
-    }) => [execute({
-      type: "block.unset",
-      props: ["listItem", "level"],
-      at: focusTextBlock.path
-    }), execute({
-      type: "block.set",
-      props: {
-        style
-      },
-      at: focusTextBlock.path
-    }), execute({
-      type: "delete.text",
-      at: {
-        anchor: {
-          path: focusTextBlock.path,
-          offset: 0
-        },
-        focus: {
-          path: focusTextBlock.path,
-          offset: 2
-        }
-      }
-    })]]
-  }), automaticHrOnPaste = defineBehavior({
+  const automaticHrOnPaste = defineBehavior({
     on: "clipboard.paste",
     guard: ({
       snapshot,
@@ -122,72 +60,6 @@ function createMarkdownBehaviors(config) {
       },
       placement: "after"
     })]]
-  }), automaticHeadingOnSpace = defineBehavior({
-    on: "insert.text",
-    guard: ({
-      snapshot,
-      event
-    }) => {
-      if (event.text !== " ")
-        return !1;
-      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot), focusTextBlock = selectors.getFocusTextBlock(snapshot), focusSpan = selectors.getFocusSpan(snapshot);
-      if (!selectionCollapsed || !focusTextBlock || !focusSpan)
-        return !1;
-      const blockOffset = utils.spanSelectionPointToBlockOffset({
-        context: snapshot.context,
-        selectionPoint: {
-          path: [{
-            _key: focusTextBlock.node._key
-          }, "children", {
-            _key: focusSpan.node._key
-          }],
-          offset: snapshot.context.selection?.focus.offset ?? 0
-        }
-      });
-      if (!blockOffset)
-        return !1;
-      const previousInlineObject = selectors.getPreviousInlineObject(snapshot), blockText = utils.getTextBlockText(focusTextBlock.node), markdownHeadingSearch = /^#+/.exec(blockText), level = markdownHeadingSearch ? markdownHeadingSearch[0].length : void 0, caretAtTheEndOfHeading = blockOffset.offset === level;
-      if (previousInlineObject || !caretAtTheEndOfHeading)
-        return !1;
-      const style = level !== void 0 ? config.headingStyle?.({
-        schema: snapshot.context.schema,
-        level
-      }) : void 0;
-      return level !== void 0 && style !== void 0 ? {
-        focusTextBlock,
-        style,
-        level
-      } : !1;
-    },
-    actions: [({
-      event
-    }) => [execute(event)], (_, {
-      focusTextBlock,
-      style,
-      level
-    }) => [execute({
-      type: "block.unset",
-      props: ["listItem", "level"],
-      at: focusTextBlock.path
-    }), execute({
-      type: "block.set",
-      props: {
-        style
-      },
-      at: focusTextBlock.path
-    }), execute({
-      type: "delete.text",
-      at: {
-        anchor: {
-          path: focusTextBlock.path,
-          offset: 0
-        },
-        focus: {
-          path: focusTextBlock.path,
-          offset: level + 1
-        }
-      }
-    })]]
   }), clearStyleOnBackspace = defineBehavior({
     on: "delete.backward",
     guard: ({
@@ -214,82 +86,89 @@ function createMarkdownBehaviors(config) {
       },
       at: focusTextBlock.path
     })]]
-  }), automaticListOnSpace = defineBehavior({
-    on: "insert.text",
+  });
+  return [automaticHrOnPaste, clearStyleOnBackspace];
+}
+function createBlockquoteRule(config) {
+  return defineInputRule({
+    on: /^> /,
     guard: ({
       snapshot,
       event
     }) => {
-      if (event.text !== " ")
-        return !1;
-      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot), focusTextBlock = selectors.getFocusTextBlock(snapshot), focusSpan = selectors.getFocusSpan(snapshot);
-      if (!selectionCollapsed || !focusTextBlock || !focusSpan)
-        return !1;
-      const previousInlineObject = selectors.getPreviousInlineObject(snapshot), blockOffset = utils.spanSelectionPointToBlockOffset({
-        context: snapshot.context,
-        selectionPoint: {
-          path: [{
-            _key: focusTextBlock.node._key
-          }, "children", {
-            _key: focusSpan.node._key
-          }],
-          offset: snapshot.context.selection?.focus.offset ?? 0
-        }
+      const style = config.blockquoteStyle({
+        schema: snapshot.context.schema
       });
-      if (previousInlineObject || !blockOffset)
+      if (!style || getPreviousInlineObject(snapshot))
         return !1;
-      const blockText = utils.getTextBlockText(focusTextBlock.node), defaultStyle = config.defaultStyle?.({
-        schema: snapshot.context.schema
-      }), looksLikeUnorderedList = /^(-|\*)/.test(blockText), unorderedList = config.unorderedList?.({
-        schema: snapshot.context.schema
-      }), caretAtTheEndOfUnorderedList = blockOffset.offset === 1;
-      if (defaultStyle && caretAtTheEndOfUnorderedList && looksLikeUnorderedList && unorderedList !== void 0)
-        return {
-          focusTextBlock,
-          listItem: unorderedList,
-          listItemLength: 1,
-          style: defaultStyle
-        };
-      const looksLikeOrderedList = /^1\./.test(blockText), orderedList = config.orderedList?.({
-        schema: snapshot.context.schema
-      }), caretAtTheEndOfOrderedList = blockOffset.offset === 2;
-      return defaultStyle && caretAtTheEndOfOrderedList && looksLikeOrderedList && orderedList !== void 0 ? {
-        focusTextBlock,
-        listItem: orderedList,
-        listItemLength: 2,
-        style: defaultStyle
+      const match = event.matches.at(0);
+      return match ? {
+        style,
+        match
       } : !1;
     },
     actions: [({
       event
-    }) => [execute(event)], (_, {
-      focusTextBlock,
+    }, {
       style,
-      listItem,
-      listItemLength
-    }) => [execute({
+      match
+    }) => [raise({
+      type: "block.unset",
+      props: ["listItem", "level"],
+      at: event.focusTextBlock.path
+    }), raise({
       type: "block.set",
       props: {
-        listItem,
-        level: 1,
         style
       },
-      at: focusTextBlock.path
-    }), execute({
-      type: "delete.text",
-      at: {
-        anchor: {
-          path: focusTextBlock.path,
-          offset: 0
-        },
-        focus: {
-          path: focusTextBlock.path,
-          offset: listItemLength + 1
-        }
-      }
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "delete",
+      at: match.targetOffsets
+    })]]
+  });
+}
+function createHeadingRule(config) {
+  return defineInputRule({
+    on: /^#+ /,
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      if (getPreviousInlineObject(snapshot))
+        return !1;
+      const match = event.matches.at(0);
+      if (!match)
+        return !1;
+      const level = match.text.length - 1, style = config.headingStyle({
+        schema: snapshot.context.schema,
+        level
+      });
+      return style ? {
+        match,
+        style
+      } : !1;
+    },
+    actions: [({
+      event
+    }, {
+      match,
+      style
+    }) => [raise({
+      type: "block.unset",
+      props: ["listItem", "level"],
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "block.set",
+      props: {
+        style
+      },
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "delete",
+      at: match.targetOffsets
     })]]
   });
-  return [automaticBlockquoteOnSpace, automaticHeadingOnSpace, automaticHrOnPaste, clearStyleOnBackspace, automaticListOnSpace];
 }
 function createHorizontalRuleRule(config) {
   return defineInputRule({
@@ -326,8 +205,88 @@ function createHorizontalRuleRule(config) {
     })]]
   });
 }
+function createOrderedListRule(config) {
+  return defineInputRule({
+    on: /^1\. /,
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const orderedList = config.orderedList({
+        schema: snapshot.context.schema
+      });
+      if (!orderedList || getPreviousInlineObject(snapshot))
+        return !1;
+      const match = event.matches.at(0);
+      return match ? {
+        match,
+        orderedList
+      } : !1;
+    },
+    actions: [({
+      event
+    }, {
+      match,
+      orderedList
+    }) => [raise({
+      type: "block.unset",
+      props: ["style"],
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "block.set",
+      props: {
+        listItem: orderedList,
+        level: event.focusTextBlock.node.level ?? 1
+      },
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "delete",
+      at: match.targetOffsets
+    })]]
+  });
+}
+function createUnorderedListRule(config) {
+  return defineInputRule({
+    on: /^(-|\*) /,
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const unorderedList = config.unorderedList({
+        schema: snapshot.context.schema
+      });
+      if (!unorderedList || getPreviousInlineObject(snapshot))
+        return !1;
+      const match = event.matches.at(0);
+      return match ? {
+        match,
+        unorderedList
+      } : !1;
+    },
+    actions: [({
+      event
+    }, {
+      match,
+      unorderedList
+    }) => [raise({
+      type: "block.unset",
+      props: ["style"],
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "block.set",
+      props: {
+        listItem: unorderedList,
+        level: event.focusTextBlock.node.level ?? 1
+      },
+      at: event.focusTextBlock.path
+    }), raise({
+      type: "delete",
+      at: match.targetOffsets
+    })]]
+  });
+}
 function MarkdownShortcutsPlugin(t0) {
-  const $ = c(25), {
+  const $ = c(35), {
     blockquoteStyle,
     boldDecorator,
     codeDecorator,
@@ -339,15 +298,10 @@ function MarkdownShortcutsPlugin(t0) {
     strikeThroughDecorator,
     unorderedList
   } = t0, editor = useEditor();
-  let t1, t2;
-  $[0] !== blockquoteStyle || $[1] !== defaultStyle || $[2] !== editor || $[3] !== headingStyle || $[4] !== horizontalRuleObject || $[5] !== orderedList || $[6] !== unorderedList ? (t1 = () => {
+  let t1;
+  $[0] !== defaultStyle || $[1] !== editor ? (t1 = () => {
     const unregisterBehaviors = createMarkdownBehaviors({
-      blockquoteStyle,
-      defaultStyle,
-      headingStyle,
-      horizontalRuleObject,
-      orderedList,
-      unorderedList
+      defaultStyle
     }).map((behavior) => editor.registerBehavior({
       behavior
     }));
@@ -355,9 +309,11 @@ function MarkdownShortcutsPlugin(t0) {
       for (const unregisterBehavior of unregisterBehaviors)
         unregisterBehavior();
     };
-  }, t2 = [blockquoteStyle, defaultStyle, editor, headingStyle, horizontalRuleObject, orderedList, unorderedList], $[0] = blockquoteStyle, $[1] = defaultStyle, $[2] = editor, $[3] = headingStyle, $[4] = horizontalRuleObject, $[5] = orderedList, $[6] = unorderedList, $[7] = t1, $[8] = t2) : (t1 = $[7], t2 = $[8]), useEffect(t1, t2);
+  }, $[0] = defaultStyle, $[1] = editor, $[2] = t1) : t1 = $[2];
+  let t2;
+  $[3] !== defaultStyle || $[4] !== editor || $[5] !== horizontalRuleObject ? (t2 = [defaultStyle, editor, horizontalRuleObject], $[3] = defaultStyle, $[4] = editor, $[5] = horizontalRuleObject, $[6] = t2) : t2 = $[6], useEffect(t1, t2);
   let t3;
-  $[9] !== boldDecorator ? (t3 = boldDecorator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  $[7] !== boldDecorator ? (t3 = boldDecorator ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(CharacterPairDecoratorPlugin, { decorator: boldDecorator, pair: {
       char: "*",
       amount: 2
@@ -366,14 +322,14 @@ function MarkdownShortcutsPlugin(t0) {
       char: "_",
       amount: 2
     } })
-  ] }) : null, $[9] = boldDecorator, $[10] = t3) : t3 = $[10];
+  ] }) : null, $[7] = boldDecorator, $[8] = t3) : t3 = $[8];
   let t4;
-  $[11] !== codeDecorator ? (t4 = codeDecorator ? /* @__PURE__ */ jsx(CharacterPairDecoratorPlugin, { decorator: codeDecorator, pair: {
+  $[9] !== codeDecorator ? (t4 = codeDecorator ? /* @__PURE__ */ jsx(CharacterPairDecoratorPlugin, { decorator: codeDecorator, pair: {
     char: "`",
     amount: 1
-  } }) : null, $[11] = codeDecorator, $[12] = t4) : t4 = $[12];
+  } }) : null, $[9] = codeDecorator, $[10] = t4) : t4 = $[10];
   let t5;
-  $[13] !== italicDecorator ? (t5 = italicDecorator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  $[11] !== italicDecorator ? (t5 = italicDecorator ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(CharacterPairDecoratorPlugin, { decorator: italicDecorator, pair: {
       char: "*",
       amount: 1
@@ -382,24 +338,44 @@ function MarkdownShortcutsPlugin(t0) {
       char: "_",
       amount: 1
     } })
-  ] }) : null, $[13] = italicDecorator, $[14] = t5) : t5 = $[14];
+  ] }) : null, $[11] = italicDecorator, $[12] = t5) : t5 = $[12];
   let t6;
-  $[15] !== strikeThroughDecorator ? (t6 = strikeThroughDecorator ? /* @__PURE__ */ jsx(CharacterPairDecoratorPlugin, { decorator: strikeThroughDecorator, pair: {
+  $[13] !== strikeThroughDecorator ? (t6 = strikeThroughDecorator ? /* @__PURE__ */ jsx(CharacterPairDecoratorPlugin, { decorator: strikeThroughDecorator, pair: {
     char: "~",
     amount: 2
-  } }) : null, $[15] = strikeThroughDecorator, $[16] = t6) : t6 = $[16];
+  } }) : null, $[13] = strikeThroughDecorator, $[14] = t6) : t6 = $[14];
   let t7;
-  $[17] !== horizontalRuleObject ? (t7 = horizontalRuleObject ? /* @__PURE__ */ jsx(InputRulePlugin, { rules: [createHorizontalRuleRule({
-    horizontalRuleObject
-  })] }) : null, $[17] = horizontalRuleObject, $[18] = t7) : t7 = $[18];
+  $[15] !== blockquoteStyle ? (t7 = blockquoteStyle ? /* @__PURE__ */ jsx(InputRulePlugin, { rules: [createBlockquoteRule({
+    blockquoteStyle
+  })] }) : null, $[15] = blockquoteStyle, $[16] = t7) : t7 = $[16];
   let t8;
-  return $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  $[17] !== headingStyle ? (t8 = headingStyle ? /* @__PURE__ */ jsx(InputRulePlugin, { rules: [createHeadingRule({
+    headingStyle
+  })] }) : null, $[17] = headingStyle, $[18] = t8) : t8 = $[18];
+  let t9;
+  $[19] !== horizontalRuleObject ? (t9 = horizontalRuleObject ? /* @__PURE__ */ jsx(InputRulePlugin, { rules: [createHorizontalRuleRule({
+    horizontalRuleObject
+  })] }) : null, $[19] = horizontalRuleObject, $[20] = t9) : t9 = $[20];
+  let t10;
+  $[21] !== orderedList ? (t10 = orderedList ? /* @__PURE__ */ jsx(InputRulePlugin, { rules: [createOrderedListRule({
+    orderedList
+  })] }) : null, $[21] = orderedList, $[22] = t10) : t10 = $[22];
+  let t11;
+  $[23] !== unorderedList ? (t11 = unorderedList ? /* @__PURE__ */ jsx(InputRulePlugin, { rules: [createUnorderedListRule({
+    unorderedList
+  })] }) : null, $[23] = unorderedList, $[24] = t11) : t11 = $[24];
+  let t12;
+  return $[25] !== t10 || $[26] !== t11 || $[27] !== t3 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
     t3,
     t4,
     t5,
     t6,
-    t7
-  ] }), $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24], t8;
+    t7,
+    t8,
+    t9,
+    t10,
+    t11
+  ] }), $[25] = t10, $[26] = t11, $[27] = t3, $[28] = t4, $[29] = t5, $[30] = t6, $[31] = t7, $[32] = t8, $[33] = t9, $[34] = t12) : t12 = $[34], t12;
 }
 export {
   MarkdownShortcutsPlugin