AI LeafAI MenuAI Toolbar ButtonAlign Toolbar ButtonBlock Context MenuBlock DiscussionBlock DraggableBlock SelectionBlock SuggestionBlockquote ElementCallout NodeCaptionCode Block NodesCode LeafColumn NodesComment LeafComment Toolbar ButtonCursor OverlayDate ElementEditorEmoji Input ElementEmoji Toolbar ButtonEquation ElementEquation Toolbar ButtonExport Toolbar ButtonFixed ToolbarFixed Toolbar ButtonsFloating ToolbarFloating Toolbar ButtonsFont Color Toolbar ButtonFont Size Toolbar ButtonHeading ElementHighlight LeafHistory Toolbar ButtonHorizontal Rule ElementImage ElementImport Toolbar ButtonIndent Toolbar ButtonsInline ComboboxInsert Toolbar ButtonKeyboard Input LeafLine Height Toolbar ButtonLink ElementLink Floating ToolbarLink Toolbar ButtonListList Toolbar ButtonMark Toolbar ButtonMedia Audio ElementMedia Embed ElementMedia File ElementMedia Placeholder ElementMedia Preview DialogMedia ToolbarMedia Toolbar ButtonMedia Upload ToastMedia Video ElementMention NodesMode Toolbar ButtonMore Toolbar ButtonParagraph ElementResize HandleSearch Highlight LeafSlash Input ElementSuggestion LeafSuggestion Toolbar ButtonTable ElementTable Toolbar ButtonTOC ElementToggle ElementToggle Toolbar ButtonToolbarTurn Into Toolbar Button
Loading...
Files
components/find-replace-demo.tsx
'use client';
import * as React from 'react';
import { FindReplacePlugin } from '@platejs/find-replace';
import {
Plate,
useEditorPlugin,
usePlateEditor,
usePluginOption,
} from 'platejs/react';
import { Input } from '@/components/ui/input';
import { EditorKit } from '@/components/editor/editor-kit';
import { findReplaceValue } from '@/registry/examples/values/find-replace-value';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { FixedToolbar } from '@/components/ui/fixed-toolbar';
import { SearchHighlightLeaf } from '@/components/ui/search-highlight-node';
export function FindToolbar() {
const { editor, setOption } = useEditorPlugin(FindReplacePlugin);
const search = usePluginOption(FindReplacePlugin, 'search');
return (
<FixedToolbar className="border-none py-3">
<Input
data-testid="ToolbarSearchHighlightInput"
className="mx-2"
value={search}
onChange={(e) => {
setOption('search', e.target.value);
editor.api.redecorate();
}}
placeholder="Search the text..."
type="search"
/>
</FixedToolbar>
);
}
export default function FindReplaceDemo() {
const editor = usePlateEditor(
{
plugins: [
...EditorKit,
FindReplacePlugin.configure({
options: { search: 'text' },
render: { node: SearchHighlightLeaf },
}),
],
value: findReplaceValue,
},
[]
);
return (
<Plate editor={editor}>
<FindToolbar />
<EditorContainer variant="demo" className="border-t">
<Editor />
</EditorContainer>
</Plate>
);
}