> For the complete documentation index, see [llms.txt](/llms.txt).
> The full corpus is at [llms-full.txt](/llms-full.txt).

# Create a custom behavior

> Add custom behaviors to the Portable Text Editor

import {LinkCard} from '@astrojs/starlight/components'

Behaviors add functionality to the Portable Text Editor (PTE) in a declarative way.

:::note[Prerequisites]
This guide covers `@portabletext/editor` **v6.x** ([changelog](https://github.com/portabletext/editor/releases)). Requires React 18+.
:::

For a deep dive into behaviors and how they work, check out [Behaviors](/editor/concepts/behavior/).

## Import the behavior helper

Begin by importing `defineBehavior`.

```tsx
import {defineBehavior} from '@portabletext/editor/behaviors'
```

## Define the behavior

Behaviors need three things:

- A triggering event. See the [full list of events](/editor/reference/behavior-api#behavior-event-types).
- A guard, or condition that determines if this behavior should apply.
- An action to invoke if the event and guard are met.

Here's an example behavior:

```tsx
const noLowerCaseA = defineBehavior({
  on: 'insert.text',
  guard: ({event}) => event.text === 'a',
  actions: [() => [{type: 'execute', event: {type: 'insert.text', text: 'A'}}]],
})
```

Let's break it down:

1. It listens for the `insert.text` event. You can use any [native, synthetic or custom event](/editor/reference/behavior-api#behavior-event-types) here.
2. The guard checks if the text that triggered this event is equal to a lowercase `a`. The guard is true and the behavior will perform the actions.
3. It sends an `execute` action with an `insert.text` event to insert "A" instead of "a".

<LinkCard
  title="Understanding Behaviors"
  description="Learn more about how each part of the Behavior API works."
  href="/editor/concepts/behavior/"
/>

## Register the behavior

In order to use the behavior, add it to the `EditorProvider` using the `BehaviorPlugin`.

```tsx
import {defineBehavior} from '@portabletext/editor/behaviors'
import {BehaviorPlugin} from '@portabletext/editor/plugins'

const noLowerCaseA = defineBehavior({
    on: 'insert.text',
    guard: ({event}) => event.text === 'a',
    actions: [() => [{type: 'execute', event: {type: 'insert.text', text: 'A'}}]],
})

// ...

<EditorProvider
    initialConfig={{
        schemaDefinition,
    }}
>
    <BehaviorPlugin behaviors={[noLowerCaseA]} />
    {/* ... */}
</EditorProvider>
```