Fixed Toolbar Buttons
AI LeafAI Toolbar ButtonAlign Dropdown MenuBlock DiscussionColor Dropdown MenuComment Toolbar ButtonDate ElementEditorEmoji Dropdown MenuEmoji Input ElementExport Toolbar ButtonFont Size Toolbar ButtonHistory Toolbar ButtonImport Toolbar ButtonIndent List Toolbar ButtonIndent Todo Toolbar ButtonIndent Toolbar ButtonInline ComboboxInline Equation ElementInsert Dropdown MenuLine Height Dropdown MenuLink ElementLink Toolbar ButtonMark Toolbar ButtonMedia Toolbar ButtonMention ElementMention Input ElementMode Dropdown MenuMore Dropdown MenuOutdent Toolbar ButtonSuggestion Line BreakTable Dropdown MenuToggle Toolbar ButtonToolbarTurn Into Dropdown Menu
Installation
npx shadcn@canary add https://platejs.org/r/fixed-toolbar-buttons
Examples
components/demo.tsx
'use client';
import * as React from 'react';
import { Plate } from '@udecode/plate/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = useCreateEditor({
plugins: [...editorPlugins],
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}