95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
import { forwardRef, useEffect, useImperativeHandle } from 'react';
|
|
import { EditorContent, useEditor } from '@tiptap/react';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import Link from '@tiptap/extension-link';
|
|
import Placeholder from '@tiptap/extension-placeholder';
|
|
import Image from '@tiptap/extension-image';
|
|
import { Button, Stack } from '@mui/material';
|
|
|
|
export type RichEditorHandle = {
|
|
insertImage: (src: string, alt?: string) => void;
|
|
insertHtmlAtCursor: (html: string) => void;
|
|
};
|
|
|
|
type Props = {
|
|
value: string;
|
|
onChange: (html: string) => void;
|
|
placeholder?: string;
|
|
};
|
|
|
|
const RichEditor = forwardRef<RichEditorHandle, Props>(({ value, onChange, placeholder }, ref) => {
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
Link.configure({ openOnClick: true }),
|
|
Placeholder.configure({ placeholder: placeholder ?? 'Write something…' }),
|
|
Image.configure({ inline: false, allowBase64: false }),
|
|
],
|
|
content: value ?? '',
|
|
onUpdate: ({ editor }) => onChange(editor.getHTML()),
|
|
editorProps: { attributes: { class: 'tiptap-content' } },
|
|
});
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
insertImage: (src: string, alt?: string) => {
|
|
if (!editor) return;
|
|
editor.chain().focus().setImage({ src, alt }).run();
|
|
},
|
|
insertHtmlAtCursor: (html: string) => {
|
|
if (!editor) return;
|
|
editor.chain().focus().insertContent(html).run();
|
|
},
|
|
}), [editor]);
|
|
|
|
useEffect(() => {
|
|
if (editor && value !== editor.getHTML()) {
|
|
editor.commands.setContent(value ?? '', { emitUpdate: false });
|
|
}
|
|
}, [value, editor]);
|
|
|
|
return (
|
|
<div style={{ border: '1px solid #ddd', borderRadius: 6, padding: 8 }}>
|
|
<Stack direction="row" spacing={1} sx={{ mb: 1, flexWrap: 'wrap' }}>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleBold().run()} disabled={!editor}>Bold</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleItalic().run()} disabled={!editor}>Italic</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} disabled={!editor}>H2</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()} disabled={!editor}>H3</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleBulletList().run()} disabled={!editor}>• List</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleOrderedList().run()} disabled={!editor}>1. List</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().toggleCodeBlock().run()} disabled={!editor}>Code</Button>
|
|
<Button size="small" onClick={() => {
|
|
if (!editor) return;
|
|
const href = prompt('Enter link URL');
|
|
if (!href) {
|
|
editor.chain().focus().extendMarkRange('link').unsetLink().run();
|
|
} else {
|
|
editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
|
|
}
|
|
}} disabled={!editor}>Link</Button>
|
|
<Button size="small" onClick={() => editor?.chain().focus().clearNodes().unsetAllMarks().run()} disabled={!editor}>Clear</Button>
|
|
<Button size="small" variant="outlined" onClick={async () => {
|
|
if (!editor) return;
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = 'image/*';
|
|
input.onchange = async () => {
|
|
const file = input.files?.[0];
|
|
if (!file) return;
|
|
const fd = new FormData();
|
|
fd.append('image', file, file.name);
|
|
const res = await fetch('/api/media/image', { method: 'POST', body: fd });
|
|
if (!res.ok) return console.error('Image upload failed', await res.text());
|
|
const data = await res.json();
|
|
const url = data.url as string | undefined;
|
|
if (url) editor.chain().focus().setImage({ src: url, alt: file.name }).run();
|
|
};
|
|
input.click();
|
|
}}>Insert Image</Button>
|
|
</Stack>
|
|
<EditorContent editor={editor} />
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default RichEditor;
|