Bagian Berita Di Admin Sudah Bisa Upload Di Bun Dev atau Bun Start
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import { RichTextEditor, Link } from '@mantine/tiptap';
|
||||
import { useEditor } from '@tiptap/react';
|
||||
@@ -8,28 +9,38 @@ import TextAlign from '@tiptap/extension-text-align';
|
||||
import Superscript from '@tiptap/extension-superscript';
|
||||
import SubScript from '@tiptap/extension-subscript';
|
||||
import { Button, Stack } from '@mantine/core';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
const content =
|
||||
'<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup><sup /></sup> and <sub><sub /></sub> tags)</li><li>Ordered and bullet lists</li><li>Text align </li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
|
||||
// const content =
|
||||
// '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup><sup /></sup> and <sub><sub /></sub> tags)</li><li>Ordered and bullet lists</li><li>Text align </li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
|
||||
|
||||
export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void }) {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Link,
|
||||
Superscript,
|
||||
SubScript,
|
||||
Highlight,
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
],
|
||||
content,
|
||||
immediatelyRender: false
|
||||
});
|
||||
|
||||
if (!editor) {
|
||||
return null;
|
||||
}
|
||||
export function BeritaEditor({
|
||||
onEditorReady,
|
||||
showSubmit = true,
|
||||
onSubmit,
|
||||
}: {
|
||||
onEditorReady?: (editor: any | null) => void;
|
||||
onSubmit?: (val: string) => void;
|
||||
showSubmit?: boolean;
|
||||
}) {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Link,
|
||||
Superscript,
|
||||
SubScript,
|
||||
Highlight,
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
],
|
||||
content: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
onEditorReady?.(editor);
|
||||
}, [editor, onEditorReady] );
|
||||
|
||||
if (!editor) return null;
|
||||
|
||||
|
||||
return (
|
||||
@@ -82,10 +93,12 @@ export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void })
|
||||
|
||||
<RichTextEditor.Content />
|
||||
</RichTextEditor>
|
||||
<Button onClick={() => {
|
||||
if (!editor) return
|
||||
onSubmit(editor?.getHTML())
|
||||
}}>Submit</Button>
|
||||
{showSubmit && (
|
||||
<Button onClick={() => {
|
||||
if (!editor) return
|
||||
onSubmit?.(editor?.getHTML())
|
||||
}}>Submit</Button>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user