nico
d88f168258
Yang Sudah Di Kerjakan * Tampilan UI Admin di menu inovasi * API Create, edit dan delete potensi Yang Lagi Dikerjakan: * Progress Tampilan UI Admin Di Menu Lingkungan Yang Akan Dikerjakan: * API Menu Lain * Tampilan UI Admin Di Menu Pendidikan
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
// TestEditor.tsx
|
|
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';
|
|
|
|
type CreateEditorProps = {
|
|
value: string;
|
|
onChange: (content: string) => void;
|
|
};
|
|
|
|
export default function CreateEditor({ value, onChange }: CreateEditorProps) {
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
Underline,
|
|
Link,
|
|
Superscript,
|
|
SubScript,
|
|
Highlight,
|
|
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
|
],
|
|
content: value,
|
|
onUpdate: () => {
|
|
if (editor) {
|
|
onChange(editor.getHTML());
|
|
}
|
|
},
|
|
});
|
|
|
|
return (
|
|
<RichTextEditor editor={editor}>
|
|
<RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
|
|
<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>
|
|
);
|
|
} |