@portabletext/plugin-character-pair-decorator 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 - 2025 Sanity.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# `@portabletext/plugin-character-pair-decorator`
+
+> Automatically match a pair of characters and decorate the text in between
+
+Import the `CharacterPairDecoratorPlugin` React component and place it inside the `EditorProvider` to automatically register the necessary Behaviors:
+
+```tsx
+import {
+  defineSchema,
+  EditorProvider,
+  PortableTextEditable,
+} from '@portabletext/editor'
+import {CharacterPairDecoratorPlugin} from '@portabletext/plugin-character-pair-decorator'
+
+function App() {
+  return (
+    <EditorProvider
+      initialConfig={{
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'italic'}],
+        }),
+      }}
+    >
+      <PortableTextEditable />
+      <CharacterPairDecoratorPlugin
+        decorator={({schema}) =>
+          schema.decorators.find((d) => d.name === 'italic')?.name
+        }
+        pair={{char: '#', amount: 1}}
+      />
+    </EditorProvider>
+  )
+}
+```

package/dist/index.cjs

@@ -0,0 +1,291 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var editor = require("@portabletext/editor"), behaviors = require("@portabletext/editor/behaviors"), utils = require("@portabletext/editor/utils"), react = require("@xstate/react"), remeda = require("remeda"), xstate = require("xstate"), selectors = require("@portabletext/editor/selectors");
+function _interopNamespaceCompat(e) {
+  if (e && typeof e == "object" && "default" in e) return e;
+  var n = /* @__PURE__ */ Object.create(null);
+  return e && Object.keys(e).forEach(function(k) {
+    if (k !== "default") {
+      var d = Object.getOwnPropertyDescriptor(e, k);
+      Object.defineProperty(n, k, d.get ? d : {
+        enumerable: !0,
+        get: function() {
+          return e[k];
+        }
+      });
+    }
+  }), n.default = e, Object.freeze(n);
+}
+var utils__namespace = /* @__PURE__ */ _interopNamespaceCompat(utils), selectors__namespace = /* @__PURE__ */ _interopNamespaceCompat(selectors);
+function createCharacterPairRegex(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 createCharacterPairDecoratorBehavior(config) {
+  config.pair.amount < 1 && console.warn(
+    "The amount of characters in the pair should be greater than 0"
+  );
+  const pairRegex = createCharacterPairRegex(
+    config.pair.char,
+    config.pair.amount
+  ), regEx = new RegExp(`(${pairRegex})$`);
+  return behaviors.defineBehavior({
+    on: "insert.text",
+    guard: ({ snapshot, event }) => {
+      if (config.pair.amount < 1)
+        return !1;
+      const decorator = config.decorator({ schema: snapshot.context.schema });
+      if (decorator === void 0)
+        return !1;
+      const focusTextBlock = selectors__namespace.getFocusTextBlock(snapshot), selectionStartPoint = selectors__namespace.getSelectionStartPoint(snapshot), selectionStartOffset = selectionStartPoint ? utils__namespace.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: selectionStartPoint
+      }) : void 0;
+      if (!focusTextBlock || !selectionStartOffset)
+        return !1;
+      const newText = `${selectors__namespace.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 = utils__namespace.blockOffsetsToSelection({
+          value: snapshot.context.value,
+          offsets: prefixOffsets
+        }), inlineObjectBeforePrefixFocus = selectors__namespace.getPreviousInlineObject(
+          {
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: prefixSelection ? {
+                anchor: prefixSelection.focus,
+                focus: prefixSelection.focus
+              } : null
+            }
+          }
+        ), inlineObjectBeforePrefixFocusOffset = inlineObjectBeforePrefixFocus ? utils__namespace.childSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: {
+            path: inlineObjectBeforePrefixFocus.path,
+            offset: 0
+          }
+        }) : void 0;
+        if (inlineObjectBeforePrefixFocusOffset && inlineObjectBeforePrefixFocusOffset.offset > prefixOffsets.anchor.offset && inlineObjectBeforePrefixFocusOffset.offset < prefixOffsets.focus.offset)
+          return !1;
+      }
+      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {
+        const previousInlineObject = selectors__namespace.getPreviousInlineObject(snapshot), previousInlineObjectOffset = previousInlineObject ? utils__namespace.childSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: {
+            path: previousInlineObject.path,
+            offset: 0
+          }
+        }) : void 0;
+        if (previousInlineObjectOffset && previousInlineObjectOffset.offset > suffixOffsets.anchor.offset && previousInlineObjectOffset.offset < suffixOffsets.focus.offset)
+          return !1;
+      }
+      return {
+        prefixOffsets,
+        suffixOffsets,
+        decorator
+      };
+    },
+    actions: [
+      // Insert the text as usual in its own undo step
+      ({ event }) => [behaviors.execute(event)],
+      (_, { prefixOffsets, suffixOffsets, decorator }) => [
+        // Decorate the text between the prefix and suffix
+        behaviors.execute({
+          type: "decorator.add",
+          decorator,
+          at: {
+            anchor: prefixOffsets.focus,
+            focus: suffixOffsets.anchor
+          }
+        }),
+        // Delete the suffix
+        behaviors.execute({
+          type: "delete.text",
+          at: suffixOffsets
+        }),
+        // Delete the prefix
+        behaviors.execute({
+          type: "delete.text",
+          at: prefixOffsets
+        }),
+        // Toggle the decorator off so the next inserted text isn't emphasized
+        behaviors.execute({
+          type: "decorator.remove",
+          decorator
+        }),
+        behaviors.effect(() => {
+          config.onDecorate({
+            ...suffixOffsets.anchor,
+            offset: suffixOffsets.anchor.offset - (prefixOffsets.focus.offset - prefixOffsets.anchor.offset)
+          });
+        })
+      ]
+    ]
+  });
+}
+function CharacterPairDecoratorPlugin(config) {
+  const editor$1 = editor.useEditor();
+  return react.useActorRef(decoratorPairMachine, {
+    input: {
+      editor: editor$1,
+      decorator: config.decorator,
+      pair: config.pair
+    }
+  }), null;
+}
+const decorateListener = ({ sendBack, input }) => input.editor.registerBehavior({
+  behavior: createCharacterPairDecoratorBehavior({
+    decorator: input.decorator,
+    pair: input.pair,
+    onDecorate: (offset) => {
+      sendBack({ type: "decorator.add", blockOffset: offset });
+    }
+  })
+}), selectionListenerCallback = ({ sendBack, input }) => input.editor.registerBehavior({
+  behavior: behaviors.defineBehavior({
+    on: "select",
+    guard: ({ snapshot, event }) => {
+      if (!event.at)
+        return { blockOffsets: void 0 };
+      const anchor = utils__namespace.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: event.at.anchor
+      }), focus = utils__namespace.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: event.at.focus
+      });
+      return !anchor || !focus ? { blockOffsets: void 0 } : {
+        blockOffsets: {
+          anchor,
+          focus
+        }
+      };
+    },
+    actions: [
+      ({ event }, { blockOffsets }) => [
+        {
+          type: "effect",
+          effect: () => {
+            sendBack({ type: "selection", blockOffsets });
+          }
+        },
+        behaviors.forward(event)
+      ]
+    ]
+  })
+}), deleteBackwardListenerCallback = ({ sendBack, input }) => input.editor.registerBehavior({
+  behavior: behaviors.defineBehavior({
+    on: "delete.backward",
+    actions: [
+      () => [
+        behaviors.execute({
+          type: "history.undo"
+        }),
+        behaviors.effect(() => {
+          sendBack({ type: "delete.backward" });
+        })
+      ]
+    ]
+  })
+}), decoratorPairMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actors: {
+    "decorate listener": xstate.fromCallback(decorateListener),
+    "delete.backward listener": xstate.fromCallback(deleteBackwardListenerCallback),
+    "selection listener": xstate.fromCallback(selectionListenerCallback)
+  }
+}).createMachine({
+  id: "decorator pair",
+  context: ({ input }) => ({
+    decorator: input.decorator,
+    editor: input.editor,
+    pair: input.pair
+  }),
+  initial: "idle",
+  states: {
+    idle: {
+      invoke: [
+        {
+          src: "decorate listener",
+          input: ({ context }) => ({
+            decorator: context.decorator,
+            editor: context.editor,
+            pair: context.pair
+          })
+        }
+      ],
+      on: {
+        "decorator.add": {
+          target: "decorator added",
+          actions: xstate.assign({
+            offsetAfterDecorator: ({ event }) => event.blockOffset
+          })
+        }
+      }
+    },
+    "decorator added": {
+      exit: [
+        xstate.assign({
+          offsetAfterDecorator: void 0
+        })
+      ],
+      invoke: [
+        {
+          src: "selection listener",
+          input: ({ context }) => ({ editor: context.editor })
+        },
+        {
+          src: "delete.backward listener",
+          input: ({ context }) => ({ editor: context.editor })
+        }
+      ],
+      on: {
+        selection: {
+          target: "idle",
+          guard: ({ context, event }) => !remeda.isDeepEqual(
+            {
+              anchor: context.offsetAfterDecorator,
+              focus: context.offsetAfterDecorator
+            },
+            event.blockOffsets
+          )
+        },
+        "delete.backward": {
+          target: "idle"
+        }
+      }
+    }
+  }
+});
+exports.CharacterPairDecoratorPlugin = CharacterPairDecoratorPlugin;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/regex.character-pair.ts","../src/behavior.character-pair-decorator.ts","../src/plugin.character-pair-decorator.ts"],"sourcesContent":["export function createCharacterPairRegex(char: string, amount: number) {\n  // Negative lookbehind: Ensures that the matched sequence is not preceded by the same character\n  const prePrefix = `(?<!\\\\${char})`\n\n  // Repeats the character `amount` times\n  const prefix = `\\\\${char}`.repeat(Math.max(amount, 1))\n\n  // Negative lookahead: Ensures that the opening pair (**, *, etc.) is not followed by a space\n  const postPrefix = `(?!\\\\s)`\n\n  // Captures the content inside the pair\n  const content = `([^${char}\\\\n]+?)`\n\n  // Negative lookbehind: Ensures that the content is not followed by a space\n  const preSuffix = `(?<!\\\\s)`\n\n  // Repeats the character `amount` times\n  const suffix = `\\\\${char}`.repeat(Math.max(amount, 1))\n\n  // Negative lookahead: Ensures that the matched sequence is not followed by the same character\n  const postSuffix = `(?!\\\\${char})`\n\n  return `${prePrefix}${prefix}${postPrefix}${content}${preSuffix}${suffix}${postSuffix}`\n}\n","import type {BlockOffset, EditorSchema} from '@portabletext/editor'\nimport {defineBehavior, effect, execute} from '@portabletext/editor/behaviors'\nimport * as selectors from '@portabletext/editor/selectors'\nimport * as utils from '@portabletext/editor/utils'\nimport {createCharacterPairRegex} from './regex.character-pair'\n\nexport function createCharacterPairDecoratorBehavior(config: {\n  decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n  pair: {char: string; amount: number}\n  onDecorate: (offset: BlockOffset) => void\n}) {\n  if (config.pair.amount < 1) {\n    console.warn(\n      `The amount of characters in the pair should be greater than 0`,\n    )\n  }\n\n  const pairRegex = createCharacterPairRegex(\n    config.pair.char,\n    config.pair.amount,\n  )\n  const regEx = new RegExp(`(${pairRegex})$`)\n\n  return defineBehavior({\n    on: 'insert.text',\n    guard: ({snapshot, event}) => {\n      if (config.pair.amount < 1) {\n        return false\n      }\n\n      const decorator = config.decorator({schema: snapshot.context.schema})\n\n      if (decorator === undefined) {\n        return false\n      }\n\n      const focusTextBlock = selectors.getFocusTextBlock(snapshot)\n      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)\n      const selectionStartOffset = selectionStartPoint\n        ? utils.spanSelectionPointToBlockOffset({\n            value: snapshot.context.value,\n            selectionPoint: selectionStartPoint,\n          })\n        : undefined\n\n      if (!focusTextBlock || !selectionStartOffset) {\n        return false\n      }\n\n      const textBefore = selectors.getBlockTextBefore(snapshot)\n      const newText = `${textBefore}${event.text}`\n      const textToDecorate = newText.match(regEx)?.at(0)\n\n      if (textToDecorate === undefined) {\n        return false\n      }\n\n      const prefixOffsets = {\n        anchor: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar**\".length - \"**bar**\".length = 4\n          offset: newText.length - textToDecorate.length,\n        },\n        focus: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar**\".length - \"**bar**\".length + \"*\".length * 2 = 6\n          offset:\n            newText.length -\n            textToDecorate.length +\n            config.pair.char.length * config.pair.amount,\n        },\n      }\n\n      const suffixOffsets = {\n        anchor: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar*|\" (10) + \"*\".length - 2 = 9\n          offset:\n            selectionStartOffset.offset +\n            event.text.length -\n            config.pair.char.length * config.pair.amount,\n        },\n        focus: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar*|\" (10) + \"*\".length = 11\n          offset: selectionStartOffset.offset + event.text.length,\n        },\n      }\n\n      // If the prefix is more than one character, then we need to check if\n      // there is an inline object inside it\n      if (prefixOffsets.focus.offset - prefixOffsets.anchor.offset > 1) {\n        const prefixSelection = utils.blockOffsetsToSelection({\n          value: snapshot.context.value,\n          offsets: prefixOffsets,\n        })\n        const inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(\n          {\n            ...snapshot,\n            context: {\n              ...snapshot.context,\n              selection: prefixSelection\n                ? {\n                    anchor: prefixSelection.focus,\n                    focus: prefixSelection.focus,\n                  }\n                : null,\n            },\n          },\n        )\n        const inlineObjectBeforePrefixFocusOffset =\n          inlineObjectBeforePrefixFocus\n            ? utils.childSelectionPointToBlockOffset({\n                value: snapshot.context.value,\n                selectionPoint: {\n                  path: inlineObjectBeforePrefixFocus.path,\n                  offset: 0,\n                },\n              })\n            : undefined\n\n        if (\n          inlineObjectBeforePrefixFocusOffset &&\n          inlineObjectBeforePrefixFocusOffset.offset >\n            prefixOffsets.anchor.offset &&\n          inlineObjectBeforePrefixFocusOffset.offset <\n            prefixOffsets.focus.offset\n        ) {\n          return false\n        }\n      }\n\n      // If the suffix is more than one character, then we need to check if\n      // there is an inline object inside it\n      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {\n        const previousInlineObject = selectors.getPreviousInlineObject(snapshot)\n        const previousInlineObjectOffset = previousInlineObject\n          ? utils.childSelectionPointToBlockOffset({\n              value: snapshot.context.value,\n              selectionPoint: {\n                path: previousInlineObject.path,\n                offset: 0,\n              },\n            })\n          : undefined\n\n        if (\n          previousInlineObjectOffset &&\n          previousInlineObjectOffset.offset > suffixOffsets.anchor.offset &&\n          previousInlineObjectOffset.offset < suffixOffsets.focus.offset\n        ) {\n          return false\n        }\n      }\n\n      return {\n        prefixOffsets,\n        suffixOffsets,\n        decorator,\n      }\n    },\n    actions: [\n      // Insert the text as usual in its own undo step\n      ({event}) => [execute(event)],\n      (_, {prefixOffsets, suffixOffsets, decorator}) => [\n        // Decorate the text between the prefix and suffix\n        execute({\n          type: 'decorator.add',\n          decorator,\n          at: {\n            anchor: prefixOffsets.focus,\n            focus: suffixOffsets.anchor,\n          },\n        }),\n        // Delete the suffix\n        execute({\n          type: 'delete.text',\n          at: suffixOffsets,\n        }),\n        // Delete the prefix\n        execute({\n          type: 'delete.text',\n          at: prefixOffsets,\n        }),\n        // Toggle the decorator off so the next inserted text isn't emphasized\n        execute({\n          type: 'decorator.remove',\n          decorator,\n        }),\n        effect(() => {\n          config.onDecorate({\n            ...suffixOffsets.anchor,\n            offset:\n              suffixOffsets.anchor.offset -\n              (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),\n          })\n        }),\n      ],\n    ],\n  })\n}\n","import type {BlockOffset, Editor, EditorSchema} from '@portabletext/editor'\nimport {useEditor} from '@portabletext/editor'\nimport {\n  defineBehavior,\n  effect,\n  execute,\n  forward,\n} from '@portabletext/editor/behaviors'\nimport * as utils from '@portabletext/editor/utils'\nimport {useActorRef} from '@xstate/react'\nimport {isDeepEqual} from 'remeda'\nimport {\n  assign,\n  fromCallback,\n  setup,\n  type AnyEventObject,\n  type CallbackLogicFunction,\n} from 'xstate'\nimport {createCharacterPairDecoratorBehavior} from './behavior.character-pair-decorator'\n\n/**\n * @beta\n */\nexport function CharacterPairDecoratorPlugin(config: {\n  decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n  pair: {char: string; amount: number}\n}) {\n  const editor = useEditor()\n\n  useActorRef(decoratorPairMachine, {\n    input: {\n      editor,\n      decorator: config.decorator,\n      pair: config.pair,\n    },\n  })\n\n  return null\n}\n\ntype DecoratorPairEvent =\n  | {\n      type: 'decorator.add'\n      blockOffset: BlockOffset\n    }\n  | {\n      type: 'selection'\n      blockOffsets?: {\n        anchor: BlockOffset\n        focus: BlockOffset\n      }\n    }\n  | {\n      type: 'delete.backward'\n    }\n\nconst decorateListener: CallbackLogicFunction<\n  AnyEventObject,\n  DecoratorPairEvent,\n  {\n    decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n    editor: Editor\n    pair: {char: string; amount: number}\n  }\n> = ({sendBack, input}) => {\n  const unregister = input.editor.registerBehavior({\n    behavior: createCharacterPairDecoratorBehavior({\n      decorator: input.decorator,\n      pair: input.pair,\n      onDecorate: (offset) => {\n        sendBack({type: 'decorator.add', blockOffset: offset})\n      },\n    }),\n  })\n\n  return unregister\n}\n\nconst selectionListenerCallback: CallbackLogicFunction<\n  AnyEventObject,\n  DecoratorPairEvent,\n  {editor: Editor}\n> = ({sendBack, input}) => {\n  const unregister = input.editor.registerBehavior({\n    behavior: defineBehavior({\n      on: 'select',\n      guard: ({snapshot, event}) => {\n        if (!event.at) {\n          return {blockOffsets: undefined}\n        }\n\n        const anchor = utils.spanSelectionPointToBlockOffset({\n          value: snapshot.context.value,\n          selectionPoint: event.at.anchor,\n        })\n        const focus = utils.spanSelectionPointToBlockOffset({\n          value: snapshot.context.value,\n          selectionPoint: event.at.focus,\n        })\n\n        if (!anchor || !focus) {\n          return {blockOffsets: undefined}\n        }\n\n        return {\n          blockOffsets: {\n            anchor,\n            focus,\n          },\n        }\n      },\n      actions: [\n        ({event}, {blockOffsets}) => [\n          {\n            type: 'effect',\n            effect: () => {\n              sendBack({type: 'selection', blockOffsets})\n            },\n          },\n          forward(event),\n        ],\n      ],\n    }),\n  })\n\n  return unregister\n}\n\nconst deleteBackwardListenerCallback: CallbackLogicFunction<\n  AnyEventObject,\n  DecoratorPairEvent,\n  {editor: Editor}\n> = ({sendBack, input}) => {\n  const unregister = input.editor.registerBehavior({\n    behavior: defineBehavior({\n      on: 'delete.backward',\n      actions: [\n        () => [\n          execute({\n            type: 'history.undo',\n          }),\n          effect(() => {\n            sendBack({type: 'delete.backward'})\n          }),\n        ],\n      ],\n    }),\n  })\n\n  return unregister\n}\n\nconst decoratorPairMachine = setup({\n  types: {\n    context: {} as {\n      decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n      editor: Editor\n      offsetAfterDecorator?: BlockOffset\n      pair: {char: string; amount: number}\n    },\n    input: {} as {\n      decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n      editor: Editor\n      pair: {char: string; amount: number}\n    },\n    events: {} as DecoratorPairEvent,\n  },\n  actors: {\n    'decorate listener': fromCallback(decorateListener),\n    'delete.backward listener': fromCallback(deleteBackwardListenerCallback),\n    'selection listener': fromCallback(selectionListenerCallback),\n  },\n}).createMachine({\n  id: 'decorator pair',\n  context: ({input}) => ({\n    decorator: input.decorator,\n    editor: input.editor,\n    pair: input.pair,\n  }),\n  initial: 'idle',\n  states: {\n    'idle': {\n      invoke: [\n        {\n          src: 'decorate listener',\n          input: ({context}) => ({\n            decorator: context.decorator,\n            editor: context.editor,\n            pair: context.pair,\n          }),\n        },\n      ],\n      on: {\n        'decorator.add': {\n          target: 'decorator added',\n          actions: assign({\n            offsetAfterDecorator: ({event}) => event.blockOffset,\n          }),\n        },\n      },\n    },\n    'decorator added': {\n      exit: [\n        assign({\n          offsetAfterDecorator: undefined,\n        }),\n      ],\n      invoke: [\n        {\n          src: 'selection listener',\n          input: ({context}) => ({editor: context.editor}),\n        },\n        {\n          src: 'delete.backward listener',\n          input: ({context}) => ({editor: context.editor}),\n        },\n      ],\n      on: {\n        'selection': {\n          target: 'idle',\n          guard: ({context, event}) => {\n            const selectionChanged = !isDeepEqual(\n              {\n                anchor: context.offsetAfterDecorator,\n                focus: context.offsetAfterDecorator,\n              },\n              event.blockOffsets,\n            )\n\n            return selectionChanged\n          },\n        },\n        'delete.backward': {\n          target: 'idle',\n        },\n      },\n    },\n  },\n})\n"],"names":["defineBehavior","selectors","utils","execute","effect","editor","useEditor","useActorRef","forward","setup","fromCallback","assign","isDeepEqual"],"mappings":";;;;;;;;;;;;;;;;;;;AAAgB,SAAA,yBAAyB,MAAc,QAAgB;AAErE,QAAM,YAAY,SAAS,IAAI,KAGzB,SAAS,KAAK,IAAI,GAAG,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,GAG/C,aAAa,WAGb,UAAU,MAAM,IAAI,WAGpB,YAAY,YAGZ,SAAS,KAAK,IAAI,GAAG,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,GAG/C,aAAa,QAAQ,IAAI;AAE/B,SAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU;AACvF;ACjBO,SAAS,qCAAqC,QAIlD;AACG,SAAO,KAAK,SAAS,KACvB,QAAQ;AAAA,IACN;AAAA,EACF;AAGF,QAAM,YAAY;AAAA,IAChB,OAAO,KAAK;AAAA,IACZ,OAAO,KAAK;AAAA,EAAA,GAER,QAAQ,IAAI,OAAO,IAAI,SAAS,IAAI;AAE1C,SAAOA,yBAAe;AAAA,IACpB,IAAI;AAAA,IACJ,OAAO,CAAC,EAAC,UAAU,YAAW;AACxB,UAAA,OAAO,KAAK,SAAS;AAChB,eAAA;AAGH,YAAA,YAAY,OAAO,UAAU,EAAC,QAAQ,SAAS,QAAQ,QAAO;AAEpE,UAAI,cAAc;AACT,eAAA;AAGT,YAAM,iBAAiBC,qBAAU,kBAAkB,QAAQ,GACrD,sBAAsBA,qBAAU,uBAAuB,QAAQ,GAC/D,uBAAuB,sBACzBC,iBAAM,gCAAgC;AAAA,QACpC,OAAO,SAAS,QAAQ;AAAA,QACxB,gBAAgB;AAAA,MACjB,CAAA,IACD;AAEA,UAAA,CAAC,kBAAkB,CAAC;AACf,eAAA;AAIT,YAAM,UAAU,GADGD,qBAAU,mBAAmB,QAAQ,CAC3B,GAAG,MAAM,IAAI,IACpC,iBAAiB,QAAQ,MAAM,KAAK,GAAG,GAAG,CAAC;AAEjD,UAAI,mBAAmB;AACd,eAAA;AAGT,YAAM,gBAAgB;AAAA,QACpB,QAAQ;AAAA,UACN,MAAM,eAAe;AAAA;AAAA,UAErB,QAAQ,QAAQ,SAAS,eAAe;AAAA,QAC1C;AAAA,QACA,OAAO;AAAA,UACL,MAAM,eAAe;AAAA;AAAA,UAErB,QACE,QAAQ,SACR,eAAe,SACf,OAAO,KAAK,KAAK,SAAS,OAAO,KAAK;AAAA,QAAA;AAAA,SAItC,gBAAgB;AAAA,QACpB,QAAQ;AAAA,UACN,MAAM,eAAe;AAAA;AAAA,UAErB,QACE,qBAAqB,SACrB,MAAM,KAAK,SACX,OAAO,KAAK,KAAK,SAAS,OAAO,KAAK;AAAA,QAC1C;AAAA,QACA,OAAO;AAAA,UACL,MAAM,eAAe;AAAA;AAAA,UAErB,QAAQ,qBAAqB,SAAS,MAAM,KAAK;AAAA,QAAA;AAAA,MAErD;AAIA,UAAI,cAAc,MAAM,SAAS,cAAc,OAAO,SAAS,GAAG;AAC1D,cAAA,kBAAkBC,iBAAM,wBAAwB;AAAA,UACpD,OAAO,SAAS,QAAQ;AAAA,UACxB,SAAS;AAAA,QAAA,CACV,GACK,gCAAgCD,qBAAU;AAAA,UAC9C;AAAA,YACE,GAAG;AAAA,YACH,SAAS;AAAA,cACP,GAAG,SAAS;AAAA,cACZ,WAAW,kBACP;AAAA,gBACE,QAAQ,gBAAgB;AAAA,gBACxB,OAAO,gBAAgB;AAAA,cAAA,IAEzB;AAAA,YAAA;AAAA,UACN;AAAA,QAGE,GAAA,sCACJ,gCACIC,iBAAM,iCAAiC;AAAA,UACrC,OAAO,SAAS,QAAQ;AAAA,UACxB,gBAAgB;AAAA,YACd,MAAM,8BAA8B;AAAA,YACpC,QAAQ;AAAA,UAAA;AAAA,QAEX,CAAA,IACD;AAGJ,YAAA,uCACA,oCAAoC,SAClC,cAAc,OAAO,UACvB,oCAAoC,SAClC,cAAc,MAAM;AAEf,iBAAA;AAAA,MAAA;AAMX,UAAI,cAAc,MAAM,SAAS,cAAc,OAAO,SAAS,GAAG;AAC1D,cAAA,uBAAuBD,qBAAU,wBAAwB,QAAQ,GACjE,6BAA6B,uBAC/BC,iBAAM,iCAAiC;AAAA,UACrC,OAAO,SAAS,QAAQ;AAAA,UACxB,gBAAgB;AAAA,YACd,MAAM,qBAAqB;AAAA,YAC3B,QAAQ;AAAA,UAAA;AAAA,QAEX,CAAA,IACD;AAGF,YAAA,8BACA,2BAA2B,SAAS,cAAc,OAAO,UACzD,2BAA2B,SAAS,cAAc,MAAM;AAEjD,iBAAA;AAAA,MAAA;AAIJ,aAAA;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA;AAAA,MAEP,CAAC,EAAC,YAAW,CAACC,UAAA,QAAQ,KAAK,CAAC;AAAA,MAC5B,CAAC,GAAG,EAAC,eAAe,eAAe,gBAAe;AAAA;AAAA,QAEhDA,kBAAQ;AAAA,UACN,MAAM;AAAA,UACN;AAAA,UACA,IAAI;AAAA,YACF,QAAQ,cAAc;AAAA,YACtB,OAAO,cAAc;AAAA,UAAA;AAAA,QACvB,CACD;AAAA;AAAA,QAEDA,kBAAQ;AAAA,UACN,MAAM;AAAA,UACN,IAAI;AAAA,QAAA,CACL;AAAA;AAAA,QAEDA,kBAAQ;AAAA,UACN,MAAM;AAAA,UACN,IAAI;AAAA,QAAA,CACL;AAAA;AAAA,QAEDA,kBAAQ;AAAA,UACN,MAAM;AAAA,UACN;AAAA,QAAA,CACD;AAAA,QACDC,UAAAA,OAAO,MAAM;AACX,iBAAO,WAAW;AAAA,YAChB,GAAG,cAAc;AAAA,YACjB,QACE,cAAc,OAAO,UACpB,cAAc,MAAM,SAAS,cAAc,OAAO;AAAA,UAAA,CACtD;AAAA,QACF,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;ACjLO,SAAS,6BAA6B,QAG1C;AACD,QAAMC,WAASC,OAAAA,UAAU;AAEzB,SAAAC,MAAAA,YAAY,sBAAsB;AAAA,IAChC,OAAO;AAAA,MAAA,QACLF;AAAAA,MACA,WAAW,OAAO;AAAA,MAClB,MAAM,OAAO;AAAA,IAAA;AAAA,EAEhB,CAAA,GAEM;AACT;AAkBA,MAAM,mBAQF,CAAC,EAAC,UAAU,MACK,MAAA,MAAM,OAAO,iBAAiB;AAAA,EAC/C,UAAU,qCAAqC;AAAA,IAC7C,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,YAAY,CAAC,WAAW;AACtB,eAAS,EAAC,MAAM,iBAAiB,aAAa,QAAO;AAAA,IAAA;AAAA,EAExD,CAAA;AACH,CAAC,GAKG,4BAIF,CAAC,EAAC,UAAU,MAAK,MACA,MAAM,OAAO,iBAAiB;AAAA,EAC/C,UAAUL,UAAAA,eAAe;AAAA,IACvB,IAAI;AAAA,IACJ,OAAO,CAAC,EAAC,UAAU,YAAW;AAC5B,UAAI,CAAC,MAAM;AACF,eAAA,EAAC,cAAc,OAAS;AAG3B,YAAA,SAASE,iBAAM,gCAAgC;AAAA,QACnD,OAAO,SAAS,QAAQ;AAAA,QACxB,gBAAgB,MAAM,GAAG;AAAA,MAAA,CAC1B,GACK,QAAQA,iBAAM,gCAAgC;AAAA,QAClD,OAAO,SAAS,QAAQ;AAAA,QACxB,gBAAgB,MAAM,GAAG;AAAA,MAAA,CAC1B;AAED,aAAI,CAAC,UAAU,CAAC,QACP,EAAC,cAAc,WAGjB;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,CAAC,EAAC,MAAA,GAAQ,EAAC,mBAAkB;AAAA,QAC3B;AAAA,UACE,MAAM;AAAA,UACN,QAAQ,MAAM;AACZ,qBAAS,EAAC,MAAM,aAAa,aAAA,CAAa;AAAA,UAAA;AAAA,QAE9C;AAAA,QACAM,UAAAA,QAAQ,KAAK;AAAA,MAAA;AAAA,IACf;AAAA,EAEH,CAAA;AACH,CAAC,GAKG,iCAIF,CAAC,EAAC,UAAU,MAAK,MACA,MAAM,OAAO,iBAAiB;AAAA,EAC/C,UAAUR,UAAAA,eAAe;AAAA,IACvB,IAAI;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,QACJG,kBAAQ;AAAA,UACN,MAAM;AAAA,QAAA,CACP;AAAA,QACDC,UAAAA,OAAO,MAAM;AACF,mBAAA,EAAC,MAAM,mBAAkB;AAAA,QACnC,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAEH,CAAA;AACH,CAAC,GAKG,uBAAuBK,aAAM;AAAA,EACjC,OAAO;AAAA,IACL,SAAS,CAAC;AAAA,IAMV,OAAO,CAAC;AAAA,IAKR,QAAQ,CAAA;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqBC,oBAAa,gBAAgB;AAAA,IAClD,4BAA4BA,oBAAa,8BAA8B;AAAA,IACvE,sBAAsBA,oBAAa,yBAAyB;AAAA,EAAA;AAEhE,CAAC,EAAE,cAAc;AAAA,EACf,IAAI;AAAA,EACJ,SAAS,CAAC,EAAC,aAAY;AAAA,IACrB,WAAW,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,IACd,MAAM,MAAM;AAAA,EAAA;AAAA,EAEd,SAAS;AAAA,EACT,QAAQ;AAAA,IACN,MAAQ;AAAA,MACN,QAAQ;AAAA,QACN;AAAA,UACE,KAAK;AAAA,UACL,OAAO,CAAC,EAAC,eAAc;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,QAAQ,QAAQ;AAAA,YAChB,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAEJ;AAAA,MACA,IAAI;AAAA,QACF,iBAAiB;AAAA,UACf,QAAQ;AAAA,UACR,SAASC,OAAAA,OAAO;AAAA,YACd,sBAAsB,CAAC,EAAC,YAAW,MAAM;AAAA,UAC1C,CAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ;AAAA,IACA,mBAAmB;AAAA,MACjB,MAAM;AAAA,QACJA,cAAO;AAAA,UACL,sBAAsB;AAAA,QACvB,CAAA;AAAA,MACH;AAAA,MACA,QAAQ;AAAA,QACN;AAAA,UACE,KAAK;AAAA,UACL,OAAO,CAAC,EAAC,QAAA,OAAc,EAAC,QAAQ,QAAQ,OAAM;AAAA,QAChD;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,CAAC,EAAC,QAAA,OAAc,EAAC,QAAQ,QAAQ,OAAM;AAAA,QAAA;AAAA,MAElD;AAAA,MACA,IAAI;AAAA,QACF,WAAa;AAAA,UACX,QAAQ;AAAA,UACR,OAAO,CAAC,EAAC,SAAS,MAAA,MACS,CAACC,OAAA;AAAA,YACxB;AAAA,cACE,QAAQ,QAAQ;AAAA,cAChB,OAAO,QAAQ;AAAA,YACjB;AAAA,YACA,MAAM;AAAA,UAAA;AAAA,QAKZ;AAAA,QACA,mBAAmB;AAAA,UACjB,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;;"}

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import type {EditorSchema} from '@portabletext/editor'
+
+/**
+ * @beta
+ */
+export declare function CharacterPairDecoratorPlugin(config: {
+  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+  pair: {
+    char: string
+    amount: number
+  }
+}): null
+
+export {}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type {EditorSchema} from '@portabletext/editor'
+
+/**
+ * @beta
+ */
+export declare function CharacterPairDecoratorPlugin(config: {
+  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+  pair: {
+    char: string
+    amount: number
+  }
+}): null
+
+export {}

package/dist/index.js

@@ -0,0 +1,281 @@
+import { useEditor } from "@portabletext/editor";
+import { defineBehavior, execute, effect, forward } from "@portabletext/editor/behaviors";
+import * as utils from "@portabletext/editor/utils";
+import { useActorRef } from "@xstate/react";
+import { isDeepEqual } from "remeda";
+import { setup, fromCallback, assign } from "xstate";
+import * as selectors from "@portabletext/editor/selectors";
+function createCharacterPairRegex(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 createCharacterPairDecoratorBehavior(config) {
+  config.pair.amount < 1 && console.warn(
+    "The amount of characters in the pair should be greater than 0"
+  );
+  const pairRegex = createCharacterPairRegex(
+    config.pair.char,
+    config.pair.amount
+  ), regEx = new RegExp(`(${pairRegex})$`);
+  return defineBehavior({
+    on: "insert.text",
+    guard: ({ snapshot, event }) => {
+      if (config.pair.amount < 1)
+        return !1;
+      const decorator = config.decorator({ schema: snapshot.context.schema });
+      if (decorator === void 0)
+        return !1;
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot), selectionStartPoint = selectors.getSelectionStartPoint(snapshot), selectionStartOffset = selectionStartPoint ? utils.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: selectionStartPoint
+      }) : void 0;
+      if (!focusTextBlock || !selectionStartOffset)
+        return !1;
+      const newText = `${selectors.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 = utils.blockOffsetsToSelection({
+          value: snapshot.context.value,
+          offsets: prefixOffsets
+        }), inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(
+          {
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: prefixSelection ? {
+                anchor: prefixSelection.focus,
+                focus: prefixSelection.focus
+              } : null
+            }
+          }
+        ), inlineObjectBeforePrefixFocusOffset = inlineObjectBeforePrefixFocus ? utils.childSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: {
+            path: inlineObjectBeforePrefixFocus.path,
+            offset: 0
+          }
+        }) : void 0;
+        if (inlineObjectBeforePrefixFocusOffset && inlineObjectBeforePrefixFocusOffset.offset > prefixOffsets.anchor.offset && inlineObjectBeforePrefixFocusOffset.offset < prefixOffsets.focus.offset)
+          return !1;
+      }
+      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {
+        const previousInlineObject = selectors.getPreviousInlineObject(snapshot), previousInlineObjectOffset = previousInlineObject ? utils.childSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: {
+            path: previousInlineObject.path,
+            offset: 0
+          }
+        }) : void 0;
+        if (previousInlineObjectOffset && previousInlineObjectOffset.offset > suffixOffsets.anchor.offset && previousInlineObjectOffset.offset < suffixOffsets.focus.offset)
+          return !1;
+      }
+      return {
+        prefixOffsets,
+        suffixOffsets,
+        decorator
+      };
+    },
+    actions: [
+      // Insert the text as usual in its own undo step
+      ({ event }) => [execute(event)],
+      (_, { prefixOffsets, suffixOffsets, decorator }) => [
+        // Decorate the text between the prefix and suffix
+        execute({
+          type: "decorator.add",
+          decorator,
+          at: {
+            anchor: prefixOffsets.focus,
+            focus: suffixOffsets.anchor
+          }
+        }),
+        // Delete the suffix
+        execute({
+          type: "delete.text",
+          at: suffixOffsets
+        }),
+        // Delete the prefix
+        execute({
+          type: "delete.text",
+          at: prefixOffsets
+        }),
+        // Toggle the decorator off so the next inserted text isn't emphasized
+        execute({
+          type: "decorator.remove",
+          decorator
+        }),
+        effect(() => {
+          config.onDecorate({
+            ...suffixOffsets.anchor,
+            offset: suffixOffsets.anchor.offset - (prefixOffsets.focus.offset - prefixOffsets.anchor.offset)
+          });
+        })
+      ]
+    ]
+  });
+}
+function CharacterPairDecoratorPlugin(config) {
+  const editor = useEditor();
+  return useActorRef(decoratorPairMachine, {
+    input: {
+      editor,
+      decorator: config.decorator,
+      pair: config.pair
+    }
+  }), null;
+}
+const decorateListener = ({ sendBack, input }) => input.editor.registerBehavior({
+  behavior: createCharacterPairDecoratorBehavior({
+    decorator: input.decorator,
+    pair: input.pair,
+    onDecorate: (offset) => {
+      sendBack({ type: "decorator.add", blockOffset: offset });
+    }
+  })
+}), selectionListenerCallback = ({ sendBack, input }) => input.editor.registerBehavior({
+  behavior: defineBehavior({
+    on: "select",
+    guard: ({ snapshot, event }) => {
+      if (!event.at)
+        return { blockOffsets: void 0 };
+      const anchor = utils.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: event.at.anchor
+      }), focus = utils.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: event.at.focus
+      });
+      return !anchor || !focus ? { blockOffsets: void 0 } : {
+        blockOffsets: {
+          anchor,
+          focus
+        }
+      };
+    },
+    actions: [
+      ({ event }, { blockOffsets }) => [
+        {
+          type: "effect",
+          effect: () => {
+            sendBack({ type: "selection", blockOffsets });
+          }
+        },
+        forward(event)
+      ]
+    ]
+  })
+}), deleteBackwardListenerCallback = ({ sendBack, input }) => input.editor.registerBehavior({
+  behavior: defineBehavior({
+    on: "delete.backward",
+    actions: [
+      () => [
+        execute({
+          type: "history.undo"
+        }),
+        effect(() => {
+          sendBack({ type: "delete.backward" });
+        })
+      ]
+    ]
+  })
+}), decoratorPairMachine = setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actors: {
+    "decorate listener": fromCallback(decorateListener),
+    "delete.backward listener": fromCallback(deleteBackwardListenerCallback),
+    "selection listener": fromCallback(selectionListenerCallback)
+  }
+}).createMachine({
+  id: "decorator pair",
+  context: ({ input }) => ({
+    decorator: input.decorator,
+    editor: input.editor,
+    pair: input.pair
+  }),
+  initial: "idle",
+  states: {
+    idle: {
+      invoke: [
+        {
+          src: "decorate listener",
+          input: ({ context }) => ({
+            decorator: context.decorator,
+            editor: context.editor,
+            pair: context.pair
+          })
+        }
+      ],
+      on: {
+        "decorator.add": {
+          target: "decorator added",
+          actions: assign({
+            offsetAfterDecorator: ({ event }) => event.blockOffset
+          })
+        }
+      }
+    },
+    "decorator added": {
+      exit: [
+        assign({
+          offsetAfterDecorator: void 0
+        })
+      ],
+      invoke: [
+        {
+          src: "selection listener",
+          input: ({ context }) => ({ editor: context.editor })
+        },
+        {
+          src: "delete.backward listener",
+          input: ({ context }) => ({ editor: context.editor })
+        }
+      ],
+      on: {
+        selection: {
+          target: "idle",
+          guard: ({ context, event }) => !isDeepEqual(
+            {
+              anchor: context.offsetAfterDecorator,
+              focus: context.offsetAfterDecorator
+            },
+            event.blockOffsets
+          )
+        },
+        "delete.backward": {
+          target: "idle"
+        }
+      }
+    }
+  }
+});
+export {
+  CharacterPairDecoratorPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/regex.character-pair.ts","../src/behavior.character-pair-decorator.ts","../src/plugin.character-pair-decorator.ts"],"sourcesContent":["export function createCharacterPairRegex(char: string, amount: number) {\n  // Negative lookbehind: Ensures that the matched sequence is not preceded by the same character\n  const prePrefix = `(?<!\\\\${char})`\n\n  // Repeats the character `amount` times\n  const prefix = `\\\\${char}`.repeat(Math.max(amount, 1))\n\n  // Negative lookahead: Ensures that the opening pair (**, *, etc.) is not followed by a space\n  const postPrefix = `(?!\\\\s)`\n\n  // Captures the content inside the pair\n  const content = `([^${char}\\\\n]+?)`\n\n  // Negative lookbehind: Ensures that the content is not followed by a space\n  const preSuffix = `(?<!\\\\s)`\n\n  // Repeats the character `amount` times\n  const suffix = `\\\\${char}`.repeat(Math.max(amount, 1))\n\n  // Negative lookahead: Ensures that the matched sequence is not followed by the same character\n  const postSuffix = `(?!\\\\${char})`\n\n  return `${prePrefix}${prefix}${postPrefix}${content}${preSuffix}${suffix}${postSuffix}`\n}\n","import type {BlockOffset, EditorSchema} from '@portabletext/editor'\nimport {defineBehavior, effect, execute} from '@portabletext/editor/behaviors'\nimport * as selectors from '@portabletext/editor/selectors'\nimport * as utils from '@portabletext/editor/utils'\nimport {createCharacterPairRegex} from './regex.character-pair'\n\nexport function createCharacterPairDecoratorBehavior(config: {\n  decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n  pair: {char: string; amount: number}\n  onDecorate: (offset: BlockOffset) => void\n}) {\n  if (config.pair.amount < 1) {\n    console.warn(\n      `The amount of characters in the pair should be greater than 0`,\n    )\n  }\n\n  const pairRegex = createCharacterPairRegex(\n    config.pair.char,\n    config.pair.amount,\n  )\n  const regEx = new RegExp(`(${pairRegex})$`)\n\n  return defineBehavior({\n    on: 'insert.text',\n    guard: ({snapshot, event}) => {\n      if (config.pair.amount < 1) {\n        return false\n      }\n\n      const decorator = config.decorator({schema: snapshot.context.schema})\n\n      if (decorator === undefined) {\n        return false\n      }\n\n      const focusTextBlock = selectors.getFocusTextBlock(snapshot)\n      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)\n      const selectionStartOffset = selectionStartPoint\n        ? utils.spanSelectionPointToBlockOffset({\n            value: snapshot.context.value,\n            selectionPoint: selectionStartPoint,\n          })\n        : undefined\n\n      if (!focusTextBlock || !selectionStartOffset) {\n        return false\n      }\n\n      const textBefore = selectors.getBlockTextBefore(snapshot)\n      const newText = `${textBefore}${event.text}`\n      const textToDecorate = newText.match(regEx)?.at(0)\n\n      if (textToDecorate === undefined) {\n        return false\n      }\n\n      const prefixOffsets = {\n        anchor: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar**\".length - \"**bar**\".length = 4\n          offset: newText.length - textToDecorate.length,\n        },\n        focus: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar**\".length - \"**bar**\".length + \"*\".length * 2 = 6\n          offset:\n            newText.length -\n            textToDecorate.length +\n            config.pair.char.length * config.pair.amount,\n        },\n      }\n\n      const suffixOffsets = {\n        anchor: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar*|\" (10) + \"*\".length - 2 = 9\n          offset:\n            selectionStartOffset.offset +\n            event.text.length -\n            config.pair.char.length * config.pair.amount,\n        },\n        focus: {\n          path: focusTextBlock.path,\n          // Example: \"foo **bar*|\" (10) + \"*\".length = 11\n          offset: selectionStartOffset.offset + event.text.length,\n        },\n      }\n\n      // If the prefix is more than one character, then we need to check if\n      // there is an inline object inside it\n      if (prefixOffsets.focus.offset - prefixOffsets.anchor.offset > 1) {\n        const prefixSelection = utils.blockOffsetsToSelection({\n          value: snapshot.context.value,\n          offsets: prefixOffsets,\n        })\n        const inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(\n          {\n            ...snapshot,\n            context: {\n              ...snapshot.context,\n              selection: prefixSelection\n                ? {\n                    anchor: prefixSelection.focus,\n                    focus: prefixSelection.focus,\n                  }\n                : null,\n            },\n          },\n        )\n        const inlineObjectBeforePrefixFocusOffset =\n          inlineObjectBeforePrefixFocus\n            ? utils.childSelectionPointToBlockOffset({\n                value: snapshot.context.value,\n                selectionPoint: {\n                  path: inlineObjectBeforePrefixFocus.path,\n                  offset: 0,\n                },\n              })\n            : undefined\n\n        if (\n          inlineObjectBeforePrefixFocusOffset &&\n          inlineObjectBeforePrefixFocusOffset.offset >\n            prefixOffsets.anchor.offset &&\n          inlineObjectBeforePrefixFocusOffset.offset <\n            prefixOffsets.focus.offset\n        ) {\n          return false\n        }\n      }\n\n      // If the suffix is more than one character, then we need to check if\n      // there is an inline object inside it\n      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {\n        const previousInlineObject = selectors.getPreviousInlineObject(snapshot)\n        const previousInlineObjectOffset = previousInlineObject\n          ? utils.childSelectionPointToBlockOffset({\n              value: snapshot.context.value,\n              selectionPoint: {\n                path: previousInlineObject.path,\n                offset: 0,\n              },\n            })\n          : undefined\n\n        if (\n          previousInlineObjectOffset &&\n          previousInlineObjectOffset.offset > suffixOffsets.anchor.offset &&\n          previousInlineObjectOffset.offset < suffixOffsets.focus.offset\n        ) {\n          return false\n        }\n      }\n\n      return {\n        prefixOffsets,\n        suffixOffsets,\n        decorator,\n      }\n    },\n    actions: [\n      // Insert the text as usual in its own undo step\n      ({event}) => [execute(event)],\n      (_, {prefixOffsets, suffixOffsets, decorator}) => [\n        // Decorate the text between the prefix and suffix\n        execute({\n          type: 'decorator.add',\n          decorator,\n          at: {\n            anchor: prefixOffsets.focus,\n            focus: suffixOffsets.anchor,\n          },\n        }),\n        // Delete the suffix\n        execute({\n          type: 'delete.text',\n          at: suffixOffsets,\n        }),\n        // Delete the prefix\n        execute({\n          type: 'delete.text',\n          at: prefixOffsets,\n        }),\n        // Toggle the decorator off so the next inserted text isn't emphasized\n        execute({\n          type: 'decorator.remove',\n          decorator,\n        }),\n        effect(() => {\n          config.onDecorate({\n            ...suffixOffsets.anchor,\n            offset:\n              suffixOffsets.anchor.offset -\n              (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),\n          })\n        }),\n      ],\n    ],\n  })\n}\n","import type {BlockOffset, Editor, EditorSchema} from '@portabletext/editor'\nimport {useEditor} from '@portabletext/editor'\nimport {\n  defineBehavior,\n  effect,\n  execute,\n  forward,\n} from '@portabletext/editor/behaviors'\nimport * as utils from '@portabletext/editor/utils'\nimport {useActorRef} from '@xstate/react'\nimport {isDeepEqual} from 'remeda'\nimport {\n  assign,\n  fromCallback,\n  setup,\n  type AnyEventObject,\n  type CallbackLogicFunction,\n} from 'xstate'\nimport {createCharacterPairDecoratorBehavior} from './behavior.character-pair-decorator'\n\n/**\n * @beta\n */\nexport function CharacterPairDecoratorPlugin(config: {\n  decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n  pair: {char: string; amount: number}\n}) {\n  const editor = useEditor()\n\n  useActorRef(decoratorPairMachine, {\n    input: {\n      editor,\n      decorator: config.decorator,\n      pair: config.pair,\n    },\n  })\n\n  return null\n}\n\ntype DecoratorPairEvent =\n  | {\n      type: 'decorator.add'\n      blockOffset: BlockOffset\n    }\n  | {\n      type: 'selection'\n      blockOffsets?: {\n        anchor: BlockOffset\n        focus: BlockOffset\n      }\n    }\n  | {\n      type: 'delete.backward'\n    }\n\nconst decorateListener: CallbackLogicFunction<\n  AnyEventObject,\n  DecoratorPairEvent,\n  {\n    decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n    editor: Editor\n    pair: {char: string; amount: number}\n  }\n> = ({sendBack, input}) => {\n  const unregister = input.editor.registerBehavior({\n    behavior: createCharacterPairDecoratorBehavior({\n      decorator: input.decorator,\n      pair: input.pair,\n      onDecorate: (offset) => {\n        sendBack({type: 'decorator.add', blockOffset: offset})\n      },\n    }),\n  })\n\n  return unregister\n}\n\nconst selectionListenerCallback: CallbackLogicFunction<\n  AnyEventObject,\n  DecoratorPairEvent,\n  {editor: Editor}\n> = ({sendBack, input}) => {\n  const unregister = input.editor.registerBehavior({\n    behavior: defineBehavior({\n      on: 'select',\n      guard: ({snapshot, event}) => {\n        if (!event.at) {\n          return {blockOffsets: undefined}\n        }\n\n        const anchor = utils.spanSelectionPointToBlockOffset({\n          value: snapshot.context.value,\n          selectionPoint: event.at.anchor,\n        })\n        const focus = utils.spanSelectionPointToBlockOffset({\n          value: snapshot.context.value,\n          selectionPoint: event.at.focus,\n        })\n\n        if (!anchor || !focus) {\n          return {blockOffsets: undefined}\n        }\n\n        return {\n          blockOffsets: {\n            anchor,\n            focus,\n          },\n        }\n      },\n      actions: [\n        ({event}, {blockOffsets}) => [\n          {\n            type: 'effect',\n            effect: () => {\n              sendBack({type: 'selection', blockOffsets})\n            },\n          },\n          forward(event),\n        ],\n      ],\n    }),\n  })\n\n  return unregister\n}\n\nconst deleteBackwardListenerCallback: CallbackLogicFunction<\n  AnyEventObject,\n  DecoratorPairEvent,\n  {editor: Editor}\n> = ({sendBack, input}) => {\n  const unregister = input.editor.registerBehavior({\n    behavior: defineBehavior({\n      on: 'delete.backward',\n      actions: [\n        () => [\n          execute({\n            type: 'history.undo',\n          }),\n          effect(() => {\n            sendBack({type: 'delete.backward'})\n          }),\n        ],\n      ],\n    }),\n  })\n\n  return unregister\n}\n\nconst decoratorPairMachine = setup({\n  types: {\n    context: {} as {\n      decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n      editor: Editor\n      offsetAfterDecorator?: BlockOffset\n      pair: {char: string; amount: number}\n    },\n    input: {} as {\n      decorator: ({schema}: {schema: EditorSchema}) => string | undefined\n      editor: Editor\n      pair: {char: string; amount: number}\n    },\n    events: {} as DecoratorPairEvent,\n  },\n  actors: {\n    'decorate listener': fromCallback(decorateListener),\n    'delete.backward listener': fromCallback(deleteBackwardListenerCallback),\n    'selection listener': fromCallback(selectionListenerCallback),\n  },\n}).createMachine({\n  id: 'decorator pair',\n  context: ({input}) => ({\n    decorator: input.decorator,\n    editor: input.editor,\n    pair: input.pair,\n  }),\n  initial: 'idle',\n  states: {\n    'idle': {\n      invoke: [\n        {\n          src: 'decorate listener',\n          input: ({context}) => ({\n            decorator: context.decorator,\n            editor: context.editor,\n            pair: context.pair,\n          }),\n        },\n      ],\n      on: {\n        'decorator.add': {\n          target: 'decorator added',\n          actions: assign({\n            offsetAfterDecorator: ({event}) => event.blockOffset,\n          }),\n        },\n      },\n    },\n    'decorator added': {\n      exit: [\n        assign({\n          offsetAfterDecorator: undefined,\n        }),\n      ],\n      invoke: [\n        {\n          src: 'selection listener',\n          input: ({context}) => ({editor: context.editor}),\n        },\n        {\n          src: 'delete.backward listener',\n          input: ({context}) => ({editor: context.editor}),\n        },\n      ],\n      on: {\n        'selection': {\n          target: 'idle',\n          guard: ({context, event}) => {\n            const selectionChanged = !isDeepEqual(\n              {\n                anchor: context.offsetAfterDecorator,\n                focus: context.offsetAfterDecorator,\n              },\n              event.blockOffsets,\n            )\n\n            return selectionChanged\n          },\n        },\n        'delete.backward': {\n          target: 'idle',\n        },\n      },\n    },\n  },\n})\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@portabletext/plugin-character-pair-decorator",
+  "version": "1.0.0",
+  "description": "Automatically match a pair of characters and decorate the text in between",
+  "keywords": [
+    "portabletext",
+    "plugin",
+    "pair",
+    "decorator",
+    "behaviors"
+  ],
+  "homepage": "https://portabletext.org",
+  "bugs": {
+    "url": "https://github.com/portabletext/plugins/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/portabletext/plugins.git",
+    "directory": "plugins/character-pair-decorator"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@portabletext/editor": "^1.48.4",
+    "@types/react": "^19.1.2",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "@portabletext/editor": "^1.48.3",
+    "react": "^19.1.0"
+  },
+  "dependencies": {
+    "@xstate/react": "^5.0.3",
+    "remeda": "^2.21.3",
+    "xstate": "^5.19.2"
+  },
+  "scripts": {
+    "build": "pkg-utils build --strict --check --clean",
+    "check:lint": "biome lint .",
+    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ignore-pattern '**/__tests__/**' --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --plugin react-hooks --rule 'react-compiler/react-compiler: [warn]' --rule 'react-hooks/rules-of-hooks: [error]' --rule 'react-hooks/exhaustive-deps: [error]' src",
+    "check:types": "tsc",
+    "check:types:watch": "tsc --watch",
+    "clean": "del .turbo && del dist && del node_modules",
+    "dev": "pkg-utils watch",
+    "lint:fix": "biome lint --write .",
+    "test:unit": "vitest --run",
+    "test:unit:watch": "vitest"
+  }
+}

package/src/behavior.character-pair-decorator.ts

@@ -0,0 +1,201 @@
+import type {BlockOffset, EditorSchema} from '@portabletext/editor'
+import {defineBehavior, effect, execute} from '@portabletext/editor/behaviors'
+import * as selectors from '@portabletext/editor/selectors'
+import * as utils from '@portabletext/editor/utils'
+import {createCharacterPairRegex} from './regex.character-pair'
+
+export function createCharacterPairDecoratorBehavior(config: {
+  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+  pair: {char: string; amount: number}
+  onDecorate: (offset: BlockOffset) => void
+}) {
+  if (config.pair.amount < 1) {
+    console.warn(
+      `The amount of characters in the pair should be greater than 0`,
+    )
+  }
+
+  const pairRegex = createCharacterPairRegex(
+    config.pair.char,
+    config.pair.amount,
+  )
+  const regEx = new RegExp(`(${pairRegex})$`)
+
+  return defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot, event}) => {
+      if (config.pair.amount < 1) {
+        return false
+      }
+
+      const decorator = config.decorator({schema: snapshot.context.schema})
+
+      if (decorator === undefined) {
+        return false
+      }
+
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)
+      const selectionStartOffset = selectionStartPoint
+        ? utils.spanSelectionPointToBlockOffset({
+            value: snapshot.context.value,
+            selectionPoint: selectionStartPoint,
+          })
+        : undefined
+
+      if (!focusTextBlock || !selectionStartOffset) {
+        return false
+      }
+
+      const textBefore = selectors.getBlockTextBefore(snapshot)
+      const newText = `${textBefore}${event.text}`
+      const textToDecorate = newText.match(regEx)?.at(0)
+
+      if (textToDecorate === undefined) {
+        return false
+      }
+
+      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,
+        },
+      }
+
+      const 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 the prefix is more than one character, then we need to check if
+      // there is an inline object inside it
+      if (prefixOffsets.focus.offset - prefixOffsets.anchor.offset > 1) {
+        const prefixSelection = utils.blockOffsetsToSelection({
+          value: snapshot.context.value,
+          offsets: prefixOffsets,
+        })
+        const inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(
+          {
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: prefixSelection
+                ? {
+                    anchor: prefixSelection.focus,
+                    focus: prefixSelection.focus,
+                  }
+                : null,
+            },
+          },
+        )
+        const inlineObjectBeforePrefixFocusOffset =
+          inlineObjectBeforePrefixFocus
+            ? utils.childSelectionPointToBlockOffset({
+                value: snapshot.context.value,
+                selectionPoint: {
+                  path: inlineObjectBeforePrefixFocus.path,
+                  offset: 0,
+                },
+              })
+            : undefined
+
+        if (
+          inlineObjectBeforePrefixFocusOffset &&
+          inlineObjectBeforePrefixFocusOffset.offset >
+            prefixOffsets.anchor.offset &&
+          inlineObjectBeforePrefixFocusOffset.offset <
+            prefixOffsets.focus.offset
+        ) {
+          return false
+        }
+      }
+
+      // If the suffix is more than one character, then we need to check if
+      // there is an inline object inside it
+      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {
+        const previousInlineObject = selectors.getPreviousInlineObject(snapshot)
+        const previousInlineObjectOffset = previousInlineObject
+          ? utils.childSelectionPointToBlockOffset({
+              value: snapshot.context.value,
+              selectionPoint: {
+                path: previousInlineObject.path,
+                offset: 0,
+              },
+            })
+          : undefined
+
+        if (
+          previousInlineObjectOffset &&
+          previousInlineObjectOffset.offset > suffixOffsets.anchor.offset &&
+          previousInlineObjectOffset.offset < suffixOffsets.focus.offset
+        ) {
+          return false
+        }
+      }
+
+      return {
+        prefixOffsets,
+        suffixOffsets,
+        decorator,
+      }
+    },
+    actions: [
+      // Insert the text as usual in its own undo step
+      ({event}) => [execute(event)],
+      (_, {prefixOffsets, suffixOffsets, decorator}) => [
+        // Decorate the text between the prefix and suffix
+        execute({
+          type: 'decorator.add',
+          decorator,
+          at: {
+            anchor: prefixOffsets.focus,
+            focus: suffixOffsets.anchor,
+          },
+        }),
+        // Delete the suffix
+        execute({
+          type: 'delete.text',
+          at: suffixOffsets,
+        }),
+        // Delete the prefix
+        execute({
+          type: 'delete.text',
+          at: prefixOffsets,
+        }),
+        // Toggle the decorator off so the next inserted text isn't emphasized
+        execute({
+          type: 'decorator.remove',
+          decorator,
+        }),
+        effect(() => {
+          config.onDecorate({
+            ...suffixOffsets.anchor,
+            offset:
+              suffixOffsets.anchor.offset -
+              (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
+          })
+        }),
+      ],
+    ],
+  })
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './plugin.character-pair-decorator'

package/src/plugin.character-pair-decorator.ts

@@ -0,0 +1,239 @@
+import type {BlockOffset, Editor, EditorSchema} from '@portabletext/editor'
+import {useEditor} from '@portabletext/editor'
+import {
+  defineBehavior,
+  effect,
+  execute,
+  forward,
+} from '@portabletext/editor/behaviors'
+import * as utils from '@portabletext/editor/utils'
+import {useActorRef} from '@xstate/react'
+import {isDeepEqual} from 'remeda'
+import {
+  assign,
+  fromCallback,
+  setup,
+  type AnyEventObject,
+  type CallbackLogicFunction,
+} from 'xstate'
+import {createCharacterPairDecoratorBehavior} from './behavior.character-pair-decorator'
+
+/**
+ * @beta
+ */
+export function CharacterPairDecoratorPlugin(config: {
+  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+  pair: {char: string; amount: number}
+}) {
+  const editor = useEditor()
+
+  useActorRef(decoratorPairMachine, {
+    input: {
+      editor,
+      decorator: config.decorator,
+      pair: config.pair,
+    },
+  })
+
+  return null
+}
+
+type DecoratorPairEvent =
+  | {
+      type: 'decorator.add'
+      blockOffset: BlockOffset
+    }
+  | {
+      type: 'selection'
+      blockOffsets?: {
+        anchor: BlockOffset
+        focus: BlockOffset
+      }
+    }
+  | {
+      type: 'delete.backward'
+    }
+
+const decorateListener: CallbackLogicFunction<
+  AnyEventObject,
+  DecoratorPairEvent,
+  {
+    decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+    editor: Editor
+    pair: {char: string; amount: number}
+  }
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: createCharacterPairDecoratorBehavior({
+      decorator: input.decorator,
+      pair: input.pair,
+      onDecorate: (offset) => {
+        sendBack({type: 'decorator.add', blockOffset: offset})
+      },
+    }),
+  })
+
+  return unregister
+}
+
+const selectionListenerCallback: CallbackLogicFunction<
+  AnyEventObject,
+  DecoratorPairEvent,
+  {editor: Editor}
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'select',
+      guard: ({snapshot, event}) => {
+        if (!event.at) {
+          return {blockOffsets: undefined}
+        }
+
+        const anchor = utils.spanSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: event.at.anchor,
+        })
+        const focus = utils.spanSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: event.at.focus,
+        })
+
+        if (!anchor || !focus) {
+          return {blockOffsets: undefined}
+        }
+
+        return {
+          blockOffsets: {
+            anchor,
+            focus,
+          },
+        }
+      },
+      actions: [
+        ({event}, {blockOffsets}) => [
+          {
+            type: 'effect',
+            effect: () => {
+              sendBack({type: 'selection', blockOffsets})
+            },
+          },
+          forward(event),
+        ],
+      ],
+    }),
+  })
+
+  return unregister
+}
+
+const deleteBackwardListenerCallback: CallbackLogicFunction<
+  AnyEventObject,
+  DecoratorPairEvent,
+  {editor: Editor}
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'delete.backward',
+      actions: [
+        () => [
+          execute({
+            type: 'history.undo',
+          }),
+          effect(() => {
+            sendBack({type: 'delete.backward'})
+          }),
+        ],
+      ],
+    }),
+  })
+
+  return unregister
+}
+
+const decoratorPairMachine = setup({
+  types: {
+    context: {} as {
+      decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+      editor: Editor
+      offsetAfterDecorator?: BlockOffset
+      pair: {char: string; amount: number}
+    },
+    input: {} as {
+      decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+      editor: Editor
+      pair: {char: string; amount: number}
+    },
+    events: {} as DecoratorPairEvent,
+  },
+  actors: {
+    'decorate listener': fromCallback(decorateListener),
+    'delete.backward listener': fromCallback(deleteBackwardListenerCallback),
+    'selection listener': fromCallback(selectionListenerCallback),
+  },
+}).createMachine({
+  id: 'decorator pair',
+  context: ({input}) => ({
+    decorator: input.decorator,
+    editor: input.editor,
+    pair: input.pair,
+  }),
+  initial: 'idle',
+  states: {
+    'idle': {
+      invoke: [
+        {
+          src: 'decorate listener',
+          input: ({context}) => ({
+            decorator: context.decorator,
+            editor: context.editor,
+            pair: context.pair,
+          }),
+        },
+      ],
+      on: {
+        'decorator.add': {
+          target: 'decorator added',
+          actions: assign({
+            offsetAfterDecorator: ({event}) => event.blockOffset,
+          }),
+        },
+      },
+    },
+    'decorator added': {
+      exit: [
+        assign({
+          offsetAfterDecorator: undefined,
+        }),
+      ],
+      invoke: [
+        {
+          src: 'selection listener',
+          input: ({context}) => ({editor: context.editor}),
+        },
+        {
+          src: 'delete.backward listener',
+          input: ({context}) => ({editor: context.editor}),
+        },
+      ],
+      on: {
+        'selection': {
+          target: 'idle',
+          guard: ({context, event}) => {
+            const selectionChanged = !isDeepEqual(
+              {
+                anchor: context.offsetAfterDecorator,
+                focus: context.offsetAfterDecorator,
+              },
+              event.blockOffsets,
+            )
+
+            return selectionChanged
+          },
+        },
+        'delete.backward': {
+          target: 'idle',
+        },
+      },
+    },
+  },
+})

package/src/regex.character-pair.test.ts

@@ -0,0 +1,74 @@
+import {expect, test} from 'vitest'
+import {createCharacterPairRegex} from './regex.character-pair'
+
+const italicRegex = new RegExp(
+  `(${createCharacterPairRegex('*', 1)}|${createCharacterPairRegex('_', 1)})$`,
+)
+function getTextToItalic(text: string) {
+  return text.match(italicRegex)?.at(0)
+}
+
+const boldRegex = new RegExp(
+  `(${createCharacterPairRegex('*', 2)}|${createCharacterPairRegex('_', 2)})$`,
+)
+function getTextToBold(text: string) {
+  return text.match(boldRegex)?.at(0)
+}
+
+test(getTextToItalic.name, () => {
+  expect(getTextToItalic('Hello *world*')).toBe('*world*')
+  expect(getTextToItalic('Hello _world_')).toBe('_world_')
+  expect(getTextToItalic('*Hello*world*')).toBe('*world*')
+  expect(getTextToItalic('_Hello_world_')).toBe('_world_')
+
+  expect(getTextToItalic('* Hello world *')).toBe(undefined)
+  expect(getTextToItalic('* Hello world*')).toBe(undefined)
+  expect(getTextToItalic('*Hello world *')).toBe(undefined)
+  expect(getTextToItalic('_ Hello world _')).toBe(undefined)
+  expect(getTextToItalic('_ Hello world_')).toBe(undefined)
+  expect(getTextToItalic('_Hello world _')).toBe(undefined)
+
+  expect(getTextToItalic('Hello *world')).toBe(undefined)
+  expect(getTextToItalic('Hello world*')).toBe(undefined)
+  expect(getTextToItalic('Hello *world* *')).toBe(undefined)
+
+  expect(getTextToItalic('_Hello*world_')).toBe('_Hello*world_')
+  expect(getTextToItalic('*Hello_world*')).toBe('*Hello_world*')
+
+  expect(getTextToItalic('*hello\nworld*')).toBe(undefined)
+  expect(getTextToItalic('_hello\nworld_')).toBe(undefined)
+
+  expect(getTextToItalic('*')).toBe(undefined)
+  expect(getTextToItalic('_')).toBe(undefined)
+  expect(getTextToItalic('**')).toBe(undefined)
+  expect(getTextToItalic('__')).toBe(undefined)
+})
+
+test(getTextToBold.name, () => {
+  expect(getTextToBold('Hello **world**')).toBe('**world**')
+  expect(getTextToBold('Hello __world__')).toBe('__world__')
+  expect(getTextToBold('**Hello**world**')).toBe('**world**')
+  expect(getTextToBold('__Hello__world__')).toBe('__world__')
+
+  expect(getTextToBold('** Hello world **')).toBe(undefined)
+  expect(getTextToBold('** Hello world**')).toBe(undefined)
+  expect(getTextToBold('**Hello world **')).toBe(undefined)
+  expect(getTextToBold('__ Hello world __')).toBe(undefined)
+  expect(getTextToBold('__ Hello world__')).toBe(undefined)
+  expect(getTextToBold('__Hello world __')).toBe(undefined)
+
+  expect(getTextToBold('Hello **world')).toBe(undefined)
+  expect(getTextToBold('Hello world**')).toBe(undefined)
+  expect(getTextToBold('Hello **world** **')).toBe(undefined)
+
+  expect(getTextToBold('__Hello**world__')).toBe('__Hello**world__')
+  expect(getTextToBold('**Hello__world**')).toBe('**Hello__world**')
+
+  expect(getTextToBold('**hello\nworld**')).toBe(undefined)
+  expect(getTextToBold('__hello\nworld__')).toBe(undefined)
+
+  expect(getTextToBold('**')).toBe(undefined)
+  expect(getTextToBold('__')).toBe(undefined)
+  expect(getTextToBold('****')).toBe(undefined)
+  expect(getTextToBold('____')).toBe(undefined)
+})

package/src/regex.character-pair.ts

@@ -0,0 +1,24 @@
+export function createCharacterPairRegex(char: string, amount: number) {
+  // Negative lookbehind: Ensures that the matched sequence is not preceded by the same character
+  const prePrefix = `(?<!\\${char})`
+
+  // Repeats the character `amount` times
+  const prefix = `\\${char}`.repeat(Math.max(amount, 1))
+
+  // Negative lookahead: Ensures that the opening pair (**, *, etc.) is not followed by a space
+  const postPrefix = `(?!\\s)`
+
+  // Captures the content inside the pair
+  const content = `([^${char}\\n]+?)`
+
+  // Negative lookbehind: Ensures that the content is not followed by a space
+  const preSuffix = `(?<!\\s)`
+
+  // Repeats the character `amount` times
+  const suffix = `\\${char}`.repeat(Math.max(amount, 1))
+
+  // Negative lookahead: Ensures that the matched sequence is not followed by the same character
+  const postSuffix = `(?!\\${char})`
+
+  return `${prePrefix}${prefix}${postPrefix}${content}${preSuffix}${suffix}${postSuffix}`
+}