@portabletext/editor 1.34.0 → 1.35.0

package/lib/plugins/index.js

@@ -2,6 +2,7 @@ import { c } from "react-compiler-runtime";
 import React, { useEffect } from "react";
 import { useEditor } from "../_chunks-es/plugin.event-listener.js";
 import { EventListenerPlugin } from "../_chunks-es/plugin.event-listener.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { createMarkdownBehaviors } from "../_chunks-es/behavior.markdown.js";
 import { useActorRef } from "@xstate/react";
 import isEqual from "lodash/isEqual.js";
@@ -12,7 +13,6 @@ import { blockOffsetsToSelection } from "../_chunks-es/util.block-offsets-to-sel
 import { childSelectionPointToBlockOffset, isTextBlock, splitTextBlock, mergeTextBlocks } from "../utils/index.js";
 import { getBlockTextBefore } from "../_chunks-es/selector.get-text-before.js";
 import { defineBehavior, raise } from "../_chunks-es/behavior.core.js";
-import { jsx } from "react/jsx-runtime";
 function BehaviorPlugin(props) {
   const $ = c(4), editor = useEditor();
   let t0, t1;
@@ -34,114 +34,72 @@ const EditorRefPlugin = React.forwardRef((_, ref) => {
   return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => portableTextEditorRef.current, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), React.useImperativeHandle(ref, t0, t1), null;
 });
 EditorRefPlugin.displayName = "EditorRefPlugin";
-const asteriskPairRegex = "(?<!\\*)\\*(?!\\s)([^*\\n]+?)(?<!\\s)\\*(?!\\*)", underscorePairRegex = "(?<!_)_(?!\\s)([^_\\n]+?)(?<!\\s)_(?!_)", italicRegex = new RegExp(`(${asteriskPairRegex}|${underscorePairRegex})$`), doubleAsteriskPairRegex = "(?<!\\*)\\*\\*(?!\\s)([^*\\n]+?)(?<!\\s)\\*\\*(?!\\*)", doubleUnderscorePairRegex = "(?<!_)__(?!\\s)([^_\\n]+?)(?<!\\s)__(?!_)", boldRegex = new RegExp(`(${doubleAsteriskPairRegex}|${doubleUnderscorePairRegex})$`);
-function getTextToItalic(text) {
-  return text.match(italicRegex)?.at(0);
+function createPairRegex(char, amount) {
+  const prePrefix = `(?<!\\${char})`, prefix = `\\${char}`.repeat(Math.max(amount, 1)), postPrefix = "(?!\\s)", content = `([^${char}\\n]+?)`, preSuffix = "(?<!\\s)", suffix = `\\${char}`.repeat(Math.max(amount, 1)), postSuffix = `(?!\\${char})`;
+  return `${prePrefix}${prefix}${postPrefix}${content}${preSuffix}${suffix}${postSuffix}`;
 }
-function getTextToBold(text) {
-  return text.match(boldRegex)?.at(0);
-}
-function useMarkdownEmphasisBehaviors(props) {
-  const $ = c(10), editor = useEditor();
-  let t0;
-  $[0] !== editor || $[1] !== props.config ? (t0 = props.config.boldDecorator?.({
-    schema: editor.getSnapshot().context.schema
-  }), $[0] = editor, $[1] = props.config, $[2] = t0) : t0 = $[2];
-  let t1;
-  $[3] !== editor || $[4] !== props.config ? (t1 = props.config.italicDecorator?.({
-    schema: editor.getSnapshot().context.schema
-  }), $[3] = editor, $[4] = props.config, $[5] = t1) : t1 = $[5];
-  let t2;
-  $[6] !== editor || $[7] !== t0 || $[8] !== t1 ? (t2 = {
-    input: {
-      editor,
-      boldDecorator: t0,
-      italicDecorator: t1
-    }
-  }, $[6] = editor, $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], useActorRef(emphasisMachine, t2);
-}
-const emphasisListener = ({
-  sendBack,
-  input
-}) => input.editor.registerBehavior({
-  behavior: defineBehavior({
+function createDecoratorPairBehavior(config) {
+  config.pair.amount < 1 && console.warn("The amount of characters in the pair should be greater than 0");
+  const pairRegex = createPairRegex(config.pair.char, config.pair.amount), regEx = new RegExp(`(${pairRegex})$`);
+  return defineBehavior({
     on: "insert.text",
     guard: ({
-      context,
+      snapshot,
       event
     }) => {
-      const boldDecorator = input.boldDecorator, italicDecorator = input.italicDecorator;
-      if (boldDecorator === void 0 && italicDecorator === void 0)
+      if (config.pair.amount < 1)
         return !1;
-      const focusTextBlock = getFocusTextBlock({
-        context
-      }), selectionStartPoint = getSelectionStartPoint({
-        context
-      }), selectionStartOffset = selectionStartPoint ? spanSelectionPointToBlockOffset({
-        value: context.value,
+      const decorator = config.decorator({
+        schema: snapshot.context.schema
+      });
+      if (decorator === void 0)
+        return !1;
+      const focusTextBlock = getFocusTextBlock(snapshot), selectionStartPoint = getSelectionStartPoint(snapshot), selectionStartOffset = selectionStartPoint ? spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
         selectionPoint: selectionStartPoint
       }) : void 0;
       if (!focusTextBlock || !selectionStartOffset)
         return !1;
-      const textBefore = getBlockTextBefore({
-        context
-      }), textToItalic = getTextToItalic(`${textBefore}${event.text}`);
-      if (textToItalic !== void 0 && italicDecorator !== void 0) {
-        const prefixOffsets = {
-          anchor: {
-            path: focusTextBlock.path,
-            // Example: "foo *bar*".length - "*bar*".length = 4
-            offset: `${textBefore}${event.text}`.length - textToItalic.length
-          },
-          focus: {
-            path: focusTextBlock.path,
-            // Example: "foo *bar*".length - "*bar*".length + 1 = 5
-            offset: `${textBefore}${event.text}`.length - textToItalic.length + 1
-          }
-        }, suffixOffsets = {
-          anchor: {
-            path: focusTextBlock.path,
-            // Example: "foo *bar|" (8) + "*".length - 1 = 8
-            offset: selectionStartOffset.offset + event.text.length - 1
-          },
-          focus: {
-            path: focusTextBlock.path,
-            // Example: "foo *bar|" (8) + "*".length = 9
-            offset: selectionStartOffset.offset + event.text.length
-          }
-        };
-        return {
-          prefixOffsets,
-          suffixOffsets,
-          decorator: italicDecorator
-        };
-      }
-      const textToBold = getTextToBold(`${textBefore}${event.text}`);
-      if (textToBold !== void 0 && boldDecorator !== void 0) {
-        const prefixOffsets = {
-          anchor: {
-            path: focusTextBlock.path,
-            // Example: "foo **bar**".length - "**bar**".length = 4
-            offset: `${textBefore}${event.text}`.length - textToBold.length
-          },
-          focus: {
-            path: focusTextBlock.path,
-            // Example: "foo **bar**".length - "**bar**".length + 2 = 6
-            offset: `${textBefore}${event.text}`.length - textToBold.length + 2
-          }
-        }, prefixSelection = blockOffsetsToSelection({
-          value: context.value,
+      const newText = `${getBlockTextBefore(snapshot)}${event.text}`, textToDecorate = newText.match(regEx)?.at(0);
+      if (textToDecorate === void 0)
+        return !1;
+      const prefixOffsets = {
+        anchor: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar**".length - "**bar**".length = 4
+          offset: newText.length - textToDecorate.length
+        },
+        focus: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar**".length - "**bar**".length + "*".length * 2 = 6
+          offset: newText.length - textToDecorate.length + config.pair.char.length * config.pair.amount
+        }
+      }, suffixOffsets = {
+        anchor: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar*|" (10) + "*".length - 2 = 9
+          offset: selectionStartOffset.offset + event.text.length - config.pair.char.length * config.pair.amount
+        },
+        focus: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar*|" (10) + "*".length = 11
+          offset: selectionStartOffset.offset + event.text.length
+        }
+      };
+      if (prefixOffsets.focus.offset - prefixOffsets.anchor.offset > 1) {
+        const prefixSelection = blockOffsetsToSelection({
+          value: snapshot.context.value,
           offsets: prefixOffsets
         }), inlineObjectBeforePrefixFocus = getPreviousInlineObject({
           context: {
-            ...context,
+            ...snapshot.context,
             selection: prefixSelection ? {
               anchor: prefixSelection.focus,
               focus: prefixSelection.focus
             } : null
           }
         }), inlineObjectBeforePrefixFocusOffset = inlineObjectBeforePrefixFocus ? childSelectionPointToBlockOffset({
-          value: context.value,
+          value: snapshot.context.value,
           selectionPoint: {
             path: inlineObjectBeforePrefixFocus.path,
             offset: 0
@@ -149,68 +107,95 @@ const emphasisListener = ({
         }) : void 0;
         if (inlineObjectBeforePrefixFocusOffset && inlineObjectBeforePrefixFocusOffset.offset > prefixOffsets.anchor.offset && inlineObjectBeforePrefixFocusOffset.offset < prefixOffsets.focus.offset)
           return !1;
-        const suffixOffsets = {
-          anchor: {
-            path: focusTextBlock.path,
-            // Example: "foo **bar*|" (10) + "*".length - 2 = 9
-            offset: selectionStartOffset.offset + event.text.length - 2
-          },
-          focus: {
-            path: focusTextBlock.path,
-            // Example: "foo **bar*|" (10) + "*".length = 11
-            offset: selectionStartOffset.offset + event.text.length
-          }
-        }, previousInlineObject = getPreviousInlineObject({
-          context
-        }), previousInlineObjectOffset = previousInlineObject ? childSelectionPointToBlockOffset({
-          value: context.value,
+      }
+      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {
+        const previousInlineObject = getPreviousInlineObject(snapshot), previousInlineObjectOffset = previousInlineObject ? childSelectionPointToBlockOffset({
+          value: snapshot.context.value,
           selectionPoint: {
             path: previousInlineObject.path,
             offset: 0
           }
         }) : void 0;
-        return previousInlineObjectOffset && previousInlineObjectOffset.offset > suffixOffsets.anchor.offset && previousInlineObjectOffset.offset < suffixOffsets.focus.offset ? !1 : {
-          prefixOffsets,
-          suffixOffsets,
-          decorator: boldDecorator
-        };
+        if (previousInlineObjectOffset && previousInlineObjectOffset.offset > suffixOffsets.anchor.offset && previousInlineObjectOffset.offset < suffixOffsets.focus.offset)
+          return !1;
       }
-      return !1;
+      return {
+        prefixOffsets,
+        suffixOffsets,
+        decorator
+      };
     },
-    actions: [({
-      event
-    }) => [event], (_, {
-      prefixOffsets,
-      suffixOffsets,
-      decorator
-    }) => [{
-      type: "decorator.add",
-      decorator,
-      offsets: {
-        anchor: prefixOffsets.focus,
-        focus: suffixOffsets.anchor
-      }
-    }, {
-      type: "delete.text",
-      ...suffixOffsets
-    }, {
-      type: "delete.text",
-      ...prefixOffsets
-    }, {
-      type: "decorator.remove",
-      decorator
-    }, {
-      type: "effect",
-      effect: () => {
-        sendBack({
-          type: "emphasis.add",
-          blockOffset: {
-            ...suffixOffsets.anchor,
-            offset: suffixOffsets.anchor.offset - (prefixOffsets.focus.offset - prefixOffsets.anchor.offset)
+    actions: [
+      // Insert the text as usual in its own undo step
+      ({
+        event
+      }) => [event],
+      (_, {
+        prefixOffsets,
+        suffixOffsets,
+        decorator
+      }) => [
+        // Decorate the text between the prefix and suffix
+        {
+          type: "decorator.add",
+          decorator,
+          offsets: {
+            anchor: prefixOffsets.focus,
+            focus: suffixOffsets.anchor
           }
-        });
-      }
-    }]]
+        },
+        // Delete the suffix
+        {
+          type: "delete.text",
+          ...suffixOffsets
+        },
+        // Delete the prefix
+        {
+          type: "delete.text",
+          ...prefixOffsets
+        },
+        // Toggle the decorator off so the next inserted text isn't emphasized
+        {
+          type: "decorator.remove",
+          decorator
+        },
+        {
+          type: "effect",
+          effect: () => {
+            config.onDecorate({
+              ...suffixOffsets.anchor,
+              offset: suffixOffsets.anchor.offset - (prefixOffsets.focus.offset - prefixOffsets.anchor.offset)
+            });
+          }
+        }
+      ]
+    ]
+  });
+}
+function DecoratorShortcutPlugin(config) {
+  const $ = c(4), editor = useEditor();
+  let t0;
+  return $[0] !== config.decorator || $[1] !== config.pair || $[2] !== editor ? (t0 = {
+    input: {
+      editor,
+      decorator: config.decorator,
+      pair: config.pair
+    }
+  }, $[0] = config.decorator, $[1] = config.pair, $[2] = editor, $[3] = t0) : t0 = $[3], useActorRef(decoratorPairMachine, t0), null;
+}
+const emphasisListener = ({
+  sendBack,
+  input
+}) => input.editor.registerBehavior({
+  behavior: createDecoratorPairBehavior({
+    decorator: input.decorator,
+    pair: input.pair,
+    onDecorate: (offset) => {
+      sendBack({
+        type: "emphasis.add",
+        blockOffset: offset
+      });
+    }
   })
 }), selectionListenerCallback = ({
   sendBack,
@@ -219,7 +204,7 @@ const emphasisListener = ({
   behavior: defineBehavior({
     on: "select",
     guard: ({
-      context,
+      snapshot,
       event
     }) => {
       if (!event.selection)
@@ -227,10 +212,10 @@ const emphasisListener = ({
           blockOffsets: void 0
         };
       const anchor = spanSelectionPointToBlockOffset({
-        value: context.value,
+        value: snapshot.context.value,
         selectionPoint: event.selection.anchor
       }), focus = spanSelectionPointToBlockOffset({
-        value: context.value,
+        value: snapshot.context.value,
         selectionPoint: event.selection.focus
       });
       return !anchor || !focus ? {
@@ -271,7 +256,7 @@ const emphasisListener = ({
       }
     }]]
   })
-}), emphasisMachine = setup({
+}), decoratorPairMachine = setup({
   types: {
     context: {},
     input: {},
@@ -283,13 +268,13 @@ const emphasisListener = ({
     "selection listener": fromCallback(selectionListenerCallback)
   }
 }).createMachine({
-  id: "emphasis",
+  id: "decorator pair",
   context: ({
     input
   }) => ({
-    boldDecorator: input.boldDecorator,
-    italicDecorator: input.italicDecorator,
-    editor: input.editor
+    decorator: input.decorator,
+    editor: input.editor,
+    pair: input.pair
   }),
   initial: "idle",
   states: {
@@ -299,9 +284,9 @@ const emphasisListener = ({
         input: ({
           context
         }) => ({
+          decorator: context.decorator,
           editor: context.editor,
-          boldDecorator: context.boldDecorator,
-          italicDecorator: context.italicDecorator
+          pair: context.pair
         })
       }],
       on: {
@@ -354,9 +339,7 @@ const emphasisListener = ({
 });
 function MarkdownPlugin(props) {
   const editor = useEditor();
-  return useMarkdownEmphasisBehaviors({
-    config: props.config
-  }), useEffect(() => {
+  return useEffect(() => {
     const unregisterBehaviors = createMarkdownBehaviors(props.config).map((behavior) => editor.registerBehavior({
       behavior
     }));
@@ -364,7 +347,36 @@ function MarkdownPlugin(props) {
       for (const unregisterBehavior of unregisterBehaviors)
         unregisterBehavior();
     };
-  }, [editor, props.config]), null;
+  }, [editor, props.config]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.config.boldDecorator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DecoratorShortcutPlugin, { decorator: props.config.boldDecorator, pair: {
+        char: "*",
+        amount: 2
+      } }),
+      /* @__PURE__ */ jsx(DecoratorShortcutPlugin, { decorator: props.config.boldDecorator, pair: {
+        char: "_",
+        amount: 2
+      } })
+    ] }) : null,
+    props.config.codeDecorator ? /* @__PURE__ */ jsx(DecoratorShortcutPlugin, { decorator: props.config.codeDecorator, pair: {
+      char: "`",
+      amount: 1
+    } }) : null,
+    props.config.italicDecorator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DecoratorShortcutPlugin, { decorator: props.config.italicDecorator, pair: {
+        char: "*",
+        amount: 1
+      } }),
+      /* @__PURE__ */ jsx(DecoratorShortcutPlugin, { decorator: props.config.italicDecorator, pair: {
+        char: "_",
+        amount: 1
+      } })
+    ] }) : null,
+    props.config.strikeThroughDecorator ? /* @__PURE__ */ jsx(DecoratorShortcutPlugin, { decorator: props.config.strikeThroughDecorator, pair: {
+      char: "~",
+      amount: 2
+    } }) : null
+  ] });
 }
 const oneLineBehaviors = [
   /**
@@ -373,12 +385,8 @@ const oneLineBehaviors = [
    */
   defineBehavior({
     on: "insert.break",
-    guard: ({
-      context
-    }) => context.selection && isSelectionExpanded({
-      context
-    }) ? {
-      selection: context.selection
+    guard: (snapshot) => snapshot.context.selection && isSelectionExpanded(snapshot) ? {
+      selection: snapshot.context.selection
     } : !1,
     actions: [(_, {
       selection
@@ -417,17 +425,11 @@ const oneLineBehaviors = [
   defineBehavior({
     on: "insert.block",
     guard: ({
-      context,
+      snapshot,
       event
     }) => {
-      const focusTextBlock = getFocusTextBlock({
-        context
-      }), selectionStartPoint = getSelectionStartPoint({
-        context
-      }), selectionEndPoint = getSelectionEndPoint({
-        context
-      });
-      if (!focusTextBlock || !isTextBlock(context, event.block) || !selectionStartPoint || !selectionEndPoint)
+      const focusTextBlock = getFocusTextBlock(snapshot), selectionStartPoint = getSelectionStartPoint(snapshot), selectionEndPoint = getSelectionEndPoint(snapshot);
+      if (!focusTextBlock || !isTextBlock(snapshot.context, event.block) || !selectionStartPoint || !selectionEndPoint)
         return !1;
       const blockStartPoint = getBlockStartPoint(focusTextBlock), blockEndPoint = getBlockEndPoint(focusTextBlock), newFocus = getBlockEndPoint({
         node: event.block,
@@ -467,31 +469,25 @@ const oneLineBehaviors = [
   defineBehavior({
     on: "insert.block",
     guard: ({
-      context,
+      snapshot,
       event
     }) => {
-      const focusTextBlock = getFocusTextBlock({
-        context
-      }), selectionStartPoint = getSelectionStartPoint({
-        context
-      }), selectionEndPoint = getSelectionEndPoint({
-        context
-      });
-      if (!focusTextBlock || !isTextBlock(context, event.block) || !selectionStartPoint || !selectionEndPoint)
+      const focusTextBlock = getFocusTextBlock(snapshot), selectionStartPoint = getSelectionStartPoint(snapshot), selectionEndPoint = getSelectionEndPoint(snapshot);
+      if (!focusTextBlock || !isTextBlock(snapshot.context, event.block) || !selectionStartPoint || !selectionEndPoint)
         return !1;
       const blockBeforeStartPoint = splitTextBlock({
-        context,
+        context: snapshot.context,
         block: focusTextBlock.node,
         point: selectionStartPoint
       })?.before, blockAfterEndPoint = splitTextBlock({
-        context,
+        context: snapshot.context,
         block: focusTextBlock.node,
         point: selectionEndPoint
       })?.after;
       if (!blockBeforeStartPoint || !blockAfterEndPoint)
         return !1;
       const targetBlock = mergeTextBlocks({
-        context,
+        context: snapshot.context,
         targetBlock: blockBeforeStartPoint,
         incomingBlock: event.block
       }), newFocus = getBlockEndPoint({
@@ -500,7 +496,7 @@ const oneLineBehaviors = [
           _key: targetBlock._key
         }]
       }), mergedBlock = mergeTextBlocks({
-        context,
+        context: snapshot.context,
         targetBlock,
         incomingBlock: blockAfterEndPoint
       });