55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { Plate, usePlateEditor } from 'platejs/react';
|
|
|
|
import { BasicNodesKit } from '@/components/editor/plugins/basic-nodes-kit';
|
|
import { Editor, EditorContainer } from '@/components/ui/editor';
|
|
|
|
export function PlateEditor() {
|
|
const editor = usePlateEditor({
|
|
plugins: BasicNodesKit,
|
|
value,
|
|
});
|
|
|
|
return (
|
|
<Plate editor={editor}>
|
|
<EditorContainer>
|
|
<Editor variant="demo" placeholder="Type..." />
|
|
</EditorContainer>
|
|
</Plate>
|
|
);
|
|
}
|
|
|
|
const value = [
|
|
{
|
|
children: [{ text: 'Basic Editor' }],
|
|
type: 'h1',
|
|
},
|
|
{
|
|
children: [{ text: 'Heading 2' }],
|
|
type: 'h2',
|
|
},
|
|
{
|
|
children: [{ text: 'Heading 3' }],
|
|
type: 'h3',
|
|
},
|
|
{
|
|
children: [{ text: 'This is a blockquote element' }],
|
|
type: 'blockquote',
|
|
},
|
|
{
|
|
children: [
|
|
{ text: 'Basic marks: ' },
|
|
{ bold: true, text: 'bold' },
|
|
{ text: ', ' },
|
|
{ italic: true, text: 'italic' },
|
|
{ text: ', ' },
|
|
{ text: 'underline', underline: true },
|
|
{ text: ', ' },
|
|
{ strikethrough: true, text: 'strikethrough' },
|
|
{ text: '.' },
|
|
],
|
|
type: 'p',
|
|
},
|
|
];
|