AI LeafAI Toolbar ButtonAlign Toolbar ButtonBlock DiscussionBlock SelectionBlock SuggestionBlockquote ElementCallout NodeCaptionCode Block NodesCode LeafColumn NodesComment LeafComment Toolbar ButtonDate ElementEditorEmoji Input ElementEmoji Toolbar ButtonEquation ElementExport Toolbar ButtonFont 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 Toolbar ButtonListList Toolbar ButtonMark Toolbar ButtonMedia Audio ElementMedia File ElementMedia ToolbarMedia Toolbar ButtonMedia Video ElementMention NodesMode Toolbar ButtonMore Toolbar ButtonParagraph ElementResize HandleSuggestion LeafSuggestion Toolbar ButtonTable ElementTable Toolbar ButtonTOC ElementToggle ElementToggle Toolbar ButtonToolbarTurn Into Toolbar Button
Installation
npx shadcn@latest add https://platejs.org/r/fixed-toolbar-buttonsExamples
Loading...
Files
components/demo.tsx
'use client';
import * as React from 'react';
import { Plate, usePlateEditor } from 'platejs/react';
import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = usePlateEditor({
plugins: EditorKit,
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}