feat(editor): integrate TipTap rich editor; add Drafts list; fix TipTap setContent typing

apps/admin/src/components/EditorShell.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Stack, TextField, Typography } from '@mui/material';
 import AdminLayout from '../layout/AdminLayout';
 import Recorder from '../features/recorder/Recorder';
+import RichEditor from './RichEditor';
 import { useEffect, useState } from 'react';
 
 export default function EditorShell({ onLogout }: { onLogout?: () => void }) {
@@ -88,13 +89,7 @@ export default function EditorShell({ onLogout }: { onLogout?: () => void }) {
         </Box>
         <Box>
           <Typography variant="subtitle1" sx={{ mb: 1 }}>Draft</Typography>
-          <TextField
+          <RichEditor value={draft} onChange={(html) => setDraft(html)} placeholder="Write your post..." />
-            fullWidth
-            multiline
-            minRows={8}
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-          />
           <Stack direction="row" spacing={2} sx={{ mt: 1 }}>
             <Button variant="contained" onClick={saveDraft}>Save Draft</Button>
             {draftId && (

apps/admin/src/components/RichEditor.tsx

@@ -0,0 +1,46 @@
+import { useEffect } 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';
+
+export default function RichEditor({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (html: string) => void;
+  placeholder?: string;
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({ openOnClick: true }),
+      Placeholder.configure({ placeholder: placeholder || 'Write something…' }),
+    ],
+    content: value || '',
+    onUpdate: ({ editor }) => {
+      const html = editor.getHTML();
+      onChange(html);
+    },
+    editorProps: {
+      attributes: {
+        class: 'tiptap-content',
+      },
+    },
+  });
+
+  // keep external value in sync if it changes (basic)
+  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 }}>
+      <EditorContent editor={editor} />
+    </div>
+  );
+}