Floating Toolbar Buttons
Floating APIAI LeafAI Toolbar ButtonBlock DiscussionComment Toolbar ButtonDate ElementEditorEmoji Input ElementInline ComboboxInline Equation ElementLink ElementLink Toolbar ButtonMark Toolbar ButtonMention ElementMention Input ElementMore Dropdown MenuSuggestion Line BreakToolbarTurn Into Dropdown MenuFloating Toolbar Buttons
Installation
npx shadcn@canary add https://platejs.org/r/floating-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>
);
}
Plate Plus
- Color picker
- Mark as equation
- Beautifully crafted UI