diff --git a/apps/docs/src/components/editor/portable-text-editor.tsx b/apps/docs/src/components/editor/portable-text-editor.tsx index b5e065c87..118f39d4f 100644 --- a/apps/docs/src/components/editor/portable-text-editor.tsx +++ b/apps/docs/src/components/editor/portable-text-editor.tsx @@ -1,11 +1,11 @@ import { - EditorEventListener, EditorProvider, PortableTextEditable, type PortableTextBlock, type SchemaDefinition, } from '@portabletext/editor' import {coreBehaviors, defineBehavior} from '@portabletext/editor/behaviors' +import {EventListenerPlugin} from '@portabletext/editor/plugins' import { getFocusSpan, getFocusTextBlock, @@ -72,7 +72,7 @@ export function PortableTextEditor({customSchema}: PortableTextEditorProps) { ], }} > - { if (event.type === 'patch') { setValue((prevValue) => applyAll(prevValue, [event.patch])) diff --git a/apps/docs/src/content/docs/getting-started.mdx b/apps/docs/src/content/docs/getting-started.mdx index 51f13f6c1..f5ea92691 100644 --- a/apps/docs/src/content/docs/getting-started.mdx +++ b/apps/docs/src/content/docs/getting-started.mdx @@ -33,13 +33,12 @@ Start by installing the editor to your project -Next, import `EditorProvider`, `EditorEventListener`, `PortableTextEditable`, `defineSchema`, and the types in the code below. +Next, import `EditorProvider`, `EventListenerPlugin`, `PortableTextEditable`, `defineSchema`, and the types in the code below. ```tsx // App.tsx import { defineSchema, - EditorEventListener, EditorProvider, PortableTextEditable, } from '@portabletext/editor' @@ -48,6 +47,7 @@ import type { RenderDecoratorFunction, RenderStyleFunction, } from '@portabletext/editor' +import {EventListenerPlugin} from '@portabletext/editor/plugins' ``` You won't need all of these right away, but you can add them now. @@ -108,7 +108,6 @@ Add `react` and `useState`, then scaffold out a basic application component. For // app.tsx import { defineSchema, - EditorEventListener, EditorProvider, PortableTextEditable, } from '@portabletext/editor' @@ -117,6 +116,7 @@ import type { RenderDecoratorFunction, RenderStyleFunction, } from '@portabletext/editor' +import {EventListenerPlugin} from '@portabletext/editor/plugins' import {useState} from 'react' const schemaDefinition = defineSchema({ @@ -137,7 +137,7 @@ function App() { initialValue: value, }} > - { if (event.type === 'mutation') { setValue(event.value) @@ -317,7 +317,7 @@ function App() { initialValue: value, }} > - { if (event.type === 'mutation') { setValue(event.value)