AI LeafAI MenuAI Toolbar ButtonAlign Toolbar ButtonBlock Context MenuBlock DiscussionBlock DraggableBlock SelectionBlock SuggestionBlockquote ElementCallout NodeCaptionCode Block NodesCode LeafColumn NodesComment LeafComment Toolbar ButtonCursor OverlayDate ElementEditorEmoji Input ElementEmoji Toolbar ButtonEquation ElementEquation Toolbar ButtonExport Toolbar ButtonFixed ToolbarFixed Toolbar ButtonsFixed Toolbar List ButtonsFloating ToolbarFloating Toolbar ButtonsFloating Toolbar Classic ButtonsFont Color Toolbar ButtonFont Size Toolbar ButtonHeading ElementHighlight LeafHistory Toolbar ButtonHorizontal Rule ElementImage ElementImport Toolbar ButtonIndent Toolbar ButtonsInline ComboboxInsert Toolbar ButtonInsert Toolbar Classic ButtonKeyboard Input LeafLine Height Toolbar ButtonLink ElementLink Floating ToolbarLink Toolbar ButtonListList NodesList Toolbar ButtonList Toolbar ButtonsMark Toolbar ButtonMedia Audio ElementMedia Embed ElementMedia File ElementMedia Placeholder ElementMedia Preview DialogMedia ToolbarMedia Toolbar ButtonMedia Upload ToastMedia Video ElementMention NodesMode Toolbar ButtonMore Toolbar ButtonParagraph ElementResize HandleSlash Input ElementSuggestion LeafSuggestion Toolbar ButtonTable ElementTable Toolbar ButtonTOC ElementToggle ElementToggle Toolbar ButtonToolbarTurn Into Toolbar ButtonTurn Into Toolbar Classic Button
Loading...
Files
components/list-classic-demo.tsx
'use client';
import * as React from 'react';
import { Plate, usePlateEditor } from 'platejs/react';
import { EditorKit } from '@/components/editor/editor-kit';
import { AutoformatKit } from '@/components/editor/plugins/autoformat-classic-kit';
import { FixedToolbarKit } from '@/components/editor/plugins/fixed-toolbar-classic-kit';
import { FloatingToolbarKit } from '@/components/editor/plugins/floating-toolbar-classic-kit';
import { ListKit } from '@/components/editor/plugins/list-classic-kit';
import { listValue } from '@/registry/examples/values/list-classic-value';
import { Editor, EditorContainer } from '@/components/ui/editor';
export default function ListClassicDemo() {
const editor = usePlateEditor({
// Disable EditorKit's indent and list plugins
override: {
enabled: {
indent: false,
list: false,
},
},
plugins: [
...EditorKit,
...ListKit,
...FixedToolbarKit,
...FloatingToolbarKit,
...AutoformatKit,
],
value: listValue,
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}