nico
d3a43c72ab
Yang Sudah Di Kerjakan - Tampilan UI Admin di menu kesehatan Yang Akan Dikerjakan: - API Di Menu Desa - Tampilan UI Admin Di Menu Keamanan
96 lines
2.9 KiB
TypeScript
96 lines
2.9 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';
|
|
|
|
|
|
function KesehatanEditorText({ 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())
|
|
}
|
|
});
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
export default KesehatanEditorText;
|