103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
'use client'
|
|
import { RichTextEditor, Link } from '@mantine/tiptap';
|
|
import { useEditor } from '@tiptap/react';
|
|
import Highlight from '@tiptap/extension-highlight';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import Underline from '@tiptap/extension-underline';
|
|
import TextAlign from '@tiptap/extension-text-align';
|
|
import Superscript from '@tiptap/extension-superscript';
|
|
import SubScript from '@tiptap/extension-subscript';
|
|
import { useEffect } from 'react';
|
|
|
|
type EditEditorProps = {
|
|
value: string;
|
|
onChange: (content: string) => void;
|
|
};
|
|
|
|
export default function EditEditor({ value, onChange }: EditEditorProps) {
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
Underline,
|
|
Link,
|
|
Superscript,
|
|
SubScript,
|
|
Highlight,
|
|
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
|
],
|
|
content: value,
|
|
// Hapus `immediatelyRender` dan `onMount`
|
|
});
|
|
|
|
// Sinkronisasi konten saat `value` berubah
|
|
useEffect(() => {
|
|
if (editor && value !== editor.getHTML()) {
|
|
editor.commands.setContent(value);
|
|
}
|
|
}, [value, editor]);
|
|
|
|
// Sinkronisasi konten ke parent saat diubah
|
|
useEffect(() => {
|
|
if (!editor) return;
|
|
|
|
const updateHandler = () => onChange(editor.getHTML());
|
|
editor.on('update', updateHandler);
|
|
|
|
return () => {
|
|
editor.off('update', updateHandler);
|
|
};
|
|
}, [editor, onChange]);
|
|
|
|
|
|
return (
|
|
<RichTextEditor editor={editor}>
|
|
<RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
|
|
{/* Toolbar seperti sebelumnya */}
|
|
<RichTextEditor.ControlsGroup>
|
|
<RichTextEditor.Bold />
|
|
<RichTextEditor.Italic />
|
|
<RichTextEditor.Underline />
|
|
<RichTextEditor.Strikethrough />
|
|
<RichTextEditor.ClearFormatting />
|
|
<RichTextEditor.Highlight />
|
|
<RichTextEditor.Code />
|
|
</RichTextEditor.ControlsGroup>
|
|
|
|
<RichTextEditor.ControlsGroup>
|
|
<RichTextEditor.H1 />
|
|
<RichTextEditor.H2 />
|
|
<RichTextEditor.H3 />
|
|
<RichTextEditor.H4 />
|
|
</RichTextEditor.ControlsGroup>
|
|
|
|
<RichTextEditor.ControlsGroup>
|
|
<RichTextEditor.Blockquote />
|
|
<RichTextEditor.Hr />
|
|
<RichTextEditor.BulletList />
|
|
<RichTextEditor.OrderedList />
|
|
<RichTextEditor.Subscript />
|
|
<RichTextEditor.Superscript />
|
|
</RichTextEditor.ControlsGroup>
|
|
|
|
<RichTextEditor.ControlsGroup>
|
|
<RichTextEditor.Link />
|
|
<RichTextEditor.Unlink />
|
|
</RichTextEditor.ControlsGroup>
|
|
|
|
<RichTextEditor.ControlsGroup>
|
|
<RichTextEditor.AlignLeft />
|
|
<RichTextEditor.AlignCenter />
|
|
<RichTextEditor.AlignJustify />
|
|
<RichTextEditor.AlignRight />
|
|
</RichTextEditor.ControlsGroup>
|
|
|
|
<RichTextEditor.ControlsGroup>
|
|
<RichTextEditor.Undo />
|
|
<RichTextEditor.Redo />
|
|
</RichTextEditor.ControlsGroup>
|
|
</RichTextEditor.Toolbar>
|
|
|
|
<RichTextEditor.Content />
|
|
</RichTextEditor>
|
|
);
|
|
} |