@portabletext/plugin-character-pair-decorator 4.0.22 → 4.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/plugin-character-pair-decorator",
-  "version": "4.0.22",
+  "version": "4.0.24",
   "description": "Automatically match a pair of characters and decorate the text in between",
   "keywords": [
     "portabletext",
@@ -32,30 +32,29 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "src",
     "dist"
   ],
   "dependencies": {
     "@xstate/react": "^6.0.0",
-    "react-compiler-runtime": "1.0.0",
+    "react-compiler-runtime": "^1.0.0",
     "remeda": "^2.32.0",
     "xstate": "^5.24.0"
   },
   "devDependencies": {
     "@sanity/tsconfig": "^1.0.0",
     "@types/react": "^19.2.7",
-    "babel-plugin-react-compiler": "1.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "react": "^19.2.1",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.48.0",
     "vitest": "^4.0.14",
-    "@portabletext/editor": "^3.3.2"
+    "@portabletext/editor": "^3.3.4"
   },
   "peerDependencies": {
     "react": "^18.3 || ^19",
-    "@portabletext/editor": "^3.3.2"
+    "@portabletext/editor": "^3.3.4"
   },
   "engines": {
     "node": ">=20.19 <22 || >=22.12"

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

@@ -1,218 +0,0 @@
-import type {BlockOffset, EditorContext} from '@portabletext/editor'
-import {
-  defineBehavior,
-  effect,
-  forward,
-  raise,
-} 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: ({
-    context,
-    schema,
-  }: {
-    context: Pick<EditorContext, 'schema'>
-    /**
-     * @deprecated Use `context.schema` instead
-     */
-    schema: EditorContext['schema']
-  }) => 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({
-        context: {schema: snapshot.context.schema},
-        schema: snapshot.context.schema,
-      })
-
-      if (decorator === undefined) {
-        return false
-      }
-
-      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
-      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)
-      const selectionStartOffset = selectionStartPoint
-        ? utils.spanSelectionPointToBlockOffset({
-            context: snapshot.context,
-            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({
-          context: snapshot.context,
-          offsets: prefixOffsets,
-        })
-        const inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(
-          {
-            ...snapshot,
-            context: {
-              ...snapshot.context,
-              selection: prefixSelection
-                ? {
-                    anchor: prefixSelection.focus,
-                    focus: prefixSelection.focus,
-                  }
-                : null,
-            },
-          },
-        )
-        const inlineObjectBeforePrefixFocusOffset =
-          inlineObjectBeforePrefixFocus
-            ? utils.childSelectionPointToBlockOffset({
-                context: snapshot.context,
-                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({
-              context: snapshot.context,
-              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}) => [forward(event)],
-      (_, {prefixOffsets, suffixOffsets, decorator}) => [
-        // Decorate the text between the prefix and suffix
-        raise({
-          type: 'decorator.add',
-          decorator,
-          at: {
-            anchor: prefixOffsets.focus,
-            focus: suffixOffsets.anchor,
-          },
-        }),
-        // Delete the suffix
-        raise({
-          type: 'delete.text',
-          at: suffixOffsets,
-        }),
-        // Delete the prefix
-        raise({
-          type: 'delete.text',
-          at: prefixOffsets,
-        }),
-        // Toggle the decorator off so the next inserted text isn't emphasized
-        raise({
-          type: 'decorator.remove',
-          decorator,
-        }),
-        effect(() => {
-          config.onDecorate({
-            ...suffixOffsets.anchor,
-            offset:
-              suffixOffsets.anchor.offset -
-              (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
-          })
-        }),
-      ],
-    ],
-  })
-}

package/src/index.ts

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

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

@@ -1,275 +0,0 @@
-import type {BlockOffset, Editor, EditorContext} from '@portabletext/editor'
-import {useEditor} from '@portabletext/editor'
-import {
-  defineBehavior,
-  effect,
-  forward,
-  raise,
-} 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'
-
-/**
- * @public
- */
-export function CharacterPairDecoratorPlugin(props: {
-  decorator: ({
-    context,
-    schema,
-  }: {
-    context: Pick<EditorContext, 'schema'>
-    /**
-     * @deprecated Use `context.schema` instead
-     */
-    schema: EditorContext['schema']
-  }) => string | undefined
-  pair: {char: string; amount: number}
-}) {
-  const editor = useEditor()
-
-  useActorRef(decoratorPairMachine, {
-    input: {
-      editor,
-      decorator: props.decorator,
-      pair: props.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: ({
-      context,
-      schema,
-    }: {
-      context: Pick<EditorContext, 'schema'>
-      /**
-       * @deprecated Use `context.schema` instead
-       */
-      schema: EditorContext['schema']
-    }) => 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({
-          context: snapshot.context,
-          selectionPoint: event.at.anchor,
-        })
-        const focus = utils.spanSelectionPointToBlockOffset({
-          context: snapshot.context,
-          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: [
-        () => [
-          raise({
-            type: 'history.undo',
-          }),
-          effect(() => {
-            sendBack({type: 'delete.backward'})
-          }),
-        ],
-      ],
-    }),
-  })
-
-  return unregister
-}
-
-const decoratorPairMachine = setup({
-  types: {
-    context: {} as {
-      decorator: ({
-        context,
-        schema,
-      }: {
-        context: Pick<EditorContext, 'schema'>
-        /**
-         * @deprecated Use `context.schema` instead
-         */
-        schema: EditorContext['schema']
-      }) => string | undefined
-      editor: Editor
-      offsetAfterDecorator?: BlockOffset
-      pair: {char: string; amount: number}
-    },
-    input: {} as {
-      decorator: ({
-        context,
-        schema,
-      }: {
-        context: Pick<EditorContext, 'schema'>
-        /**
-         * @deprecated Use `context.schema` instead
-         */
-        schema: EditorContext['schema']
-      }) => 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

@@ -1,74 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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}`
-}