nico
cab86eb02f
Yang udah dikerjakan: Tampilan UI Menu DesaTampilan UI Menu Kesehatan Yang Akan dikerjakan: Tampilan UI Keamanan, dan Menu Selanjutnya Memperbaiki eror di bagian inputan dimana saat nginput data outputnya ikut ke ganti seharusnya di submit dulu
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
'use client'
|
|
import { Button, Stack } from '@mantine/core';
|
|
import { Link, RichTextEditor } from '@mantine/tiptap';
|
|
import Highlight from '@tiptap/extension-highlight';
|
|
import SubScript from '@tiptap/extension-subscript';
|
|
import Superscript from '@tiptap/extension-superscript';
|
|
import TextAlign from '@tiptap/extension-text-align';
|
|
import Underline from '@tiptap/extension-underline';
|
|
import { useEditor } from '@tiptap/react';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import { useEffect } from 'react';
|
|
|
|
|
|
export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: {
|
|
onSubmit?: (val: string) => void,
|
|
onChange: (val: string) => void,
|
|
showSubmit?: boolean,
|
|
initialContent?: string }) {
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
Underline,
|
|
Link,
|
|
Superscript,
|
|
SubScript,
|
|
Highlight,
|
|
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
|
],
|
|
immediatelyRender: false,
|
|
content: initialContent,
|
|
onUpdate : ({editor}) => {
|
|
onChange(editor.getHTML())
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (editor && initialContent !== editor.getHTML()) {
|
|
editor.commands.setContent(initialContent || '<p></p>');
|
|
}
|
|
}, [initialContent, editor]);
|
|
|
|
return (
|
|
<Stack>
|
|
<RichTextEditor editor={editor}>
|
|
<RichTextEditor.Toolbar sticky stickyOffset={60}>
|
|
<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>
|
|
{showSubmit && (
|
|
<Button onClick={() => {
|
|
if (!editor) return
|
|
onSubmit?.(editor?.getHTML())
|
|
}}>Submit</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
} |