endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(editor): replace RichEditor with clean TipTap component; remove unused import

Browse Source
This commit is contained in:
Ender 2025-10-24 03:41:12 +02:00
parent 8cbc9a034a
commit 8f4fbb098f
2 changed files with 41 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin/src/components/EditorShell.tsx
View File

@ -1,4 +1,4 @@
import { Box, Button, Stack, TextField, Typography } from '@mui/material'; import { Box, Button, Stack, Typography } from '@mui/material';
import AdminLayout from '../layout/AdminLayout'; import AdminLayout from '../layout/AdminLayout';
import Recorder from '../features/recorder/Recorder'; import Recorder from '../features/recorder/Recorder';
import RichEditor from './RichEditor'; import RichEditor from './RichEditor';

86
apps/admin/src/components/RichEditor.tsx
View File

@ -1,4 +1,4 @@
import { useEffect } from 'react'; import { forwardRef, useEffect, useImperativeHandle } from 'react';
import { EditorContent, useEditor } from '@tiptap/react'; import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit'; import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link'; import Link from '@tiptap/extension-link';
@ -6,38 +6,39 @@ import Placeholder from '@tiptap/extension-placeholder';
import Image from '@tiptap/extension-image'; import Image from '@tiptap/extension-image';
import { Button, Stack } from '@mui/material'; import { Button, Stack } from '@mui/material';
export default function RichEditor({ export type RichEditorHandle = {
value, insertImage: (src: string, alt?: string) => void;
onChange, };
placeholder,
}: { type Props = {
value: string; value: string;
onChange: (html: string) => void; onChange: (html: string) => void;
placeholder?: string; placeholder?: string;
}) { };
const RichEditor = forwardRef<RichEditorHandle, Props>(({ value, onChange, placeholder }, ref) => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
StarterKit, StarterKit,
Link.configure({ openOnClick: true }), Link.configure({ openOnClick: true }),
Placeholder.configure({ placeholder: placeholder || 'Write something…' }), Placeholder.configure({ placeholder: placeholder ?? 'Write something…' }),
Image.configure({ inline: false, allowBase64: false }), Image.configure({ inline: false, allowBase64: false }),
], ],
content: value || '', content: value ?? '',
onUpdate: ({ editor }) => { onUpdate: ({ editor }) => onChange(editor.getHTML()),
const html = editor.getHTML(); editorProps: { attributes: { class: 'tiptap-content' } },
onChange(html);
},
editorProps: {
attributes: {
class: 'tiptap-content',
},
},
}); });
// keep external value in sync if it changes (basic) useImperativeHandle(ref, () => ({
insertImage: (src: string, alt?: string) => {
if (!editor) return;
editor.chain().focus().setImage({ src, alt }).run();
},
}), [editor]);
useEffect(() => { useEffect(() => {
if (editor && value !== editor.getHTML()) { if (editor && value !== editor.getHTML()) {
editor.commands.setContent(value || '', { emitUpdate: false }); editor.commands.setContent(value ?? '', { emitUpdate: false });
} }
}, [value, editor]); }, [value, editor]);
@ -45,34 +46,27 @@ export default function RichEditor({
<div style={{ border: '1px solid #ddd', borderRadius: 6, padding: 8 }}> <div style={{ border: '1px solid #ddd', borderRadius: 6, padding: 8 }}>
<Stack direction="row" spacing={1} sx={{ mb: 1 }}> <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
<Button size="small" variant="outlined" onClick={async () => { <Button size="small" variant="outlined" onClick={async () => {
try { if (!editor) return;
if (!editor) return; const input = document.createElement('input');
const input = document.createElement('input'); input.type = 'file';
input.type = 'file'; input.accept = 'image/*';
input.accept = 'image/*'; input.onchange = async () => {
input.onchange = async () => { const file = input.files?.[0];
const file = input.files?.[0]; if (!file) return;
if (!file) return; const fd = new FormData();
const fd = new FormData(); fd.append('image', file, file.name);
fd.append('image', file, file.name); const res = await fetch('/api/media/image', { method: 'POST', body: fd });
const res = await fetch('/api/media/image', { method: 'POST', body: fd }); if (!res.ok) return console.error('Image upload failed', await res.text());
if (!res.ok) { const data = await res.json();
console.error('Image upload failed', await res.text()); const url = data.url as string | undefined;
return; if (url) editor.chain().focus().setImage({ src: url, alt: file.name }).run();
} };
const data = await res.json(); input.click();
const url: string | undefined = data.url;
if (url) {
editor.chain().focus().setImage({ src: url, alt: file.name }).run();
}
};
input.click();
} catch (e) {
console.error(e);
}
}}>Insert Image</Button> }}>Insert Image</Button>
</Stack> </Stack>
<EditorContent editor={editor} /> <EditorContent editor={editor} />
</div> </div>
); );
} });
export default RichEditor;