@portabletext/plugin-character-pair-decorator

@portabletext/plugin-character-pair-decorator

Automatically match a pair of characters and decorate the text in between

Installation

npm install @portabletext/plugin-character-pair-decorator

Usage

Import the CharacterPairDecoratorPlugin React component and place it inside the EditorProvider to automatically register the necessary Behaviors:

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={({context}) =>
          context.schema.decorators.find((d) => d.name === 'italic')?.name
        }
        pair={{char: '#', amount: 1}}
      />
    </EditorProvider>
  )
}

Why look up the decorator in the schema?

The decorator callback returns the name found in context.schema (context.schema.decorators.find((d) => d.name === 'italic')?.name) instead of a hardcoded 'italic'. That lookup is what makes it schema-aware: if the schema has no such decorator the callback returns undefined and the pairing is skipped, so it never applies a decorator the schema does not declare.

The same gating follows containers, because context.schema is resolved at the caret: inside a code block whose sub-schema declares no decorators the pairing is skipped. Read context.schema rather than capturing the top-level schema and the plugin stays correct at every nesting level.