Floating APIAI LeafAI Toolbar ButtonBlock DiscussionBlock SuggestionCode LeafComment LeafComment Toolbar ButtonDate ElementEditorEmoji Input ElementEquation Toolbar ButtonHighlight LeafInline ComboboxKeyboard Input LeafLink ElementLink Toolbar ButtonMark Toolbar ButtonMention NodesMore Toolbar ButtonSuggestion LeafSuggestion Toolbar ButtonToolbarTurn Into Toolbar ButtonFloating Toolbar Buttons
Installation
npx shadcn@latest add https://platejs.org/r/floating-toolbar-buttons
Examples
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>
);
}
Plate Plus
- Color picker
- Mark as equation
- Beautifully crafted UI