64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import type { Value } from 'platejs';
|
|
|
|
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
|
|
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
|
|
import { Editor, EditorContainer } from '@/components/ui/editor';
|
|
import { FixedToolbar } from '@/components/ui/fixed-toolbar';
|
|
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
|
|
import { ToolbarButton } from '@/components/ui/toolbar';
|
|
import { Plate, usePlateEditor } from 'platejs/react';
|
|
|
|
|
|
const initialValue: Value = [
|
|
{
|
|
children: [{ text: 'Title' }],
|
|
type: 'h3',
|
|
},
|
|
{
|
|
children: [{ text: 'This is a quote.' }],
|
|
type: 'blockquote',
|
|
},
|
|
{
|
|
type: 'p',
|
|
children: [
|
|
{ text: 'Hello! Try out the ' },
|
|
{ text: 'bold', bold: true },
|
|
{ text: ', ' },
|
|
{ text: 'italic', italic: true },
|
|
{ text: ', and ' },
|
|
{ text: 'underline', underline: true },
|
|
{ text: ' formatting.' },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function TosEditor() {
|
|
const editor = usePlateEditor({
|
|
plugins: [
|
|
...BasicBlocksKit,
|
|
...BasicMarksKit,
|
|
], // Add the mark plugins
|
|
value: initialValue, // Set initial content
|
|
});
|
|
|
|
return (
|
|
<Plate editor={editor}> {/* Provides editor context */}
|
|
<FixedToolbar className="justify-start rounded-t-lg">
|
|
{/* Element Toolbar Buttons */}
|
|
<ToolbarButton onClick={() => editor.tf.h1.toggle()}>H1</ToolbarButton>
|
|
<ToolbarButton onClick={() => editor.tf.h2.toggle()}>H2</ToolbarButton>
|
|
<ToolbarButton onClick={() => editor.tf.h3.toggle()}>H3</ToolbarButton>
|
|
<ToolbarButton onClick={() => editor.tf.blockquote.toggle()}>Quote</ToolbarButton>
|
|
{/* Mark Toolbar Buttons */}
|
|
<MarkToolbarButton nodeType="bold" tooltip="Bold (⌘+B)">B</MarkToolbarButton>
|
|
<MarkToolbarButton nodeType="italic" tooltip="Italic (⌘+I)">I</MarkToolbarButton>
|
|
<MarkToolbarButton nodeType="underline" tooltip="Underline (⌘+U)">U</MarkToolbarButton>
|
|
</FixedToolbar>
|
|
<EditorContainer> {/* Styles the editor area */}
|
|
<Editor placeholder="Type your amazing content here..." />
|
|
</EditorContainer>
|
|
</Plate>
|
|
);
|
|
} |