Fixed Toolbar Buttons
A set of commonly used formatting buttons.
AI LeafAI Toolbar ButtonAlert DialogAlign Dropdown MenuAvatarBlock DiscussionButtonCalendarColor Dropdown MenuComment Toolbar ButtonDate ElementDropdown MenuEditorEmoji Dropdown MenuEmoji Input ElementExport Toolbar ButtonFont Size Toolbar ButtonHistory Toolbar ButtonImport Toolbar ButtonIndent List Toolbar ButtonIndent Todo Toolbar ButtonIndent Toolbar ButtonInline ComboboxInline Equation ElementInputInsert Dropdown MenuLine Height Dropdown MenuLink ElementLink Toolbar ButtonMark Toolbar ButtonMedia Toolbar ButtonMention ElementMention Input ElementMode Dropdown MenuMore Dropdown MenuOutdent Toolbar ButtonPopoverSeparatorSuggestion Line BreakTable Dropdown MenuToggle Toolbar ButtonToolbarTooltipTurn Into Dropdown Menu
Installation
npx shadcx@latest add plate/fixed-toolbar-buttons
Examples
components/demo.tsx
'use client';
import 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/plate-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>
);
}