AI Menu
AI PluginAI LeafBlock SelectionBlockquote ElementCallout ElementCaptionCode Block ElementCode LeafCode Line ElementCode Syntax LeafColumn ElementColumn Group ElementDate ElementEditorEmoji Dropdown MenuEquation ElementHeading ElementHighlight LeafHorizontal Rule ElementImage ElementIndent Todo MarkerInline Equation ElementKeyboard Input LeafLink ElementMedia Audio ElementMedia File ElementMedia PopoverMedia Video ElementMention ElementParagraph ElementResize HandleTable Cell ElementTable ElementTable Row ElementTOC ElementToolbarAI Menu
Installation
npx shadcn@canary add https://platejs.org/r/ai-menu
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
Combobox menu with free-form prompt input
- Additional trigger methods:
- Block menu button
- Slash command menu
- Beautifully crafted UI