AI
AI PluginAI LeafAI MenuAI Toolbar ButtonBlock Context MenuBlock DiscussionBlock SelectionBlockquote ElementCallout ElementCaptionCode Block ElementCode LeafCode Line ElementCode Syntax LeafColumn ElementColumn Group ElementComment LeafCursor OverlayDate ElementDraggableEditorEmoji Dropdown MenuEmoji Input ElementEquation ElementHeading ElementHighlight LeafHorizontal Rule ElementImage ElementImage PreviewIndent Fire MarkerIndent Todo MarkerInline ComboboxInline Equation ElementInline Equation Toolbar ButtonKeyboard Input LeafLink ElementLink Floating ToolbarMedia Audio ElementMedia Embed ElementMedia File ElementMedia Placeholder ElementMedia PopoverMedia Upload ToastMedia Video ElementMention ElementMention Input ElementParagraph ElementResize HandleSlash Input ElementSuggestion LeafSuggestion Line BreakTable Cell ElementTable ElementTable Row ElementTOC ElementToggle ElementToolbar
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>
);
}