Wiki Phase 2: TipTap rich-text editor + inline image uploads

Replaces the raw-HTML textarea in the wiki editor with a TipTap (ProseMirror)
WYSIWYG editor.

- new RichTextEditor component: bold/italic/strike, H2/H3, bullet+ordered
  lists, blockquote, code block, divider, link, inline image, undo/redo
- generalized POST /admin/uploads (reuses the screenshot multer config) →
  { url }; the editor uploads inline images through it
- editor output still passes through the Phase 1 server-side sanitizer on
  save and DOMPurify on render
- lazy-loaded as its own chunk so the public bundle doesn't ship TipTap
  (public ~82kB gzip; editor chunk ~106kB gzip loaded only in admin)
- RTE styling added to theme.css (toolbar, active states, prose content)

Verified: uploads serve as images; H2/H3 + lists + link + inline image
round-trip through the WYSIWYG and render sanitized on the public page.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/components/RichTextEditor.jsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import { api } from '../api/client.js'
+
+// Toolbar button.
+function Btn({ onClick, active, disabled, title, children }) {
+  return (
+    <button
+      type="button"
+      title={title}
+      onMouseDown={(e) => e.preventDefault()} // keep editor selection
+      onClick={onClick}
+      disabled={disabled}
+      className={`rte-btn${active ? ' is-active' : ''}`}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default function RichTextEditor({ value, onChange }) {
+  const fileRef = useRef(null)
+  const [uploading, setUploading] = useState(false)
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ heading: { levels: [2, 3] } }),
+      Link.configure({ openOnClick: false, autolink: true }),
+      Image.configure({ inline: false }),
+    ],
+    content: value || '',
+    onUpdate: ({ editor }) => onChange(editor.getHTML()),
+  })
+
+  // Safety net: sync if the parent resets `value` externally (won't fire during
+  // normal typing because the parent value equals what the editor just emitted).
+  useEffect(() => {
+    if (!editor) return
+    if (value != null && value !== editor.getHTML()) {
+      editor.commands.setContent(value, false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, editor])
+
+  if (!editor) return null
+
+  function setLink() {
+    const prev = editor.getAttributes('link').href || ''
+    const url = window.prompt('Link URL (leave blank to remove)', prev)
+    if (url === null) return
+    if (url === '') return editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  }
+
+  async function onPickImage(e) {
+    const file = e.target.files?.[0]
+    e.target.value = '' // allow re-selecting the same file
+    if (!file) return
+    setUploading(true)
+    try {
+      const { url } = await api.admin.upload(file)
+      editor.chain().focus().setImage({ src: url, alt: file.name }).run()
+    } catch (err) {
+      alert(err.message || 'Image upload failed.')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="rte">
+      <div className="rte-toolbar">
+        <Btn title="Bold" active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()}>
+          <b>B</b>
+        </Btn>
+        <Btn title="Italic" active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()}>
+          <i>I</i>
+        </Btn>
+        <Btn title="Strikethrough" active={editor.isActive('strike')} onClick={() => editor.chain().focus().toggleStrike().run()}>
+          <s>S</s>
+        </Btn>
+        <span className="rte-sep" />
+        <Btn title="Heading 2 (table of contents)" active={editor.isActive('heading', { level: 2 })} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>
+          H2
+        </Btn>
+        <Btn title="Heading 3" active={editor.isActive('heading', { level: 3 })} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>
+          H3
+        </Btn>
+        <span className="rte-sep" />
+        <Btn title="Bullet list" active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()}>
+          • List
+        </Btn>
+        <Btn title="Numbered list" active={editor.isActive('orderedList')} onClick={() => editor.chain().focus().toggleOrderedList().run()}>
+          1. List
+        </Btn>
+        <Btn title="Quote" active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()}>
+          ❝
+        </Btn>
+        <Btn title="Code block" active={editor.isActive('codeBlock')} onClick={() => editor.chain().focus().toggleCodeBlock().run()}>
+          {'</>'}
+        </Btn>
+        <Btn title="Divider" onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+          —
+        </Btn>
+        <span className="rte-sep" />
+        <Btn title="Link" active={editor.isActive('link')} onClick={setLink}>
+          🔗
+        </Btn>
+        <Btn title="Insert image" disabled={uploading} onClick={() => fileRef.current?.click()}>
+          {uploading ? '…' : '🖼'}
+        </Btn>
+        <span className="rte-sep" />
+        <Btn title="Undo" disabled={!editor.can().undo()} onClick={() => editor.chain().focus().undo().run()}>
+          ↶
+        </Btn>
+        <Btn title="Redo" disabled={!editor.can().redo()} onClick={() => editor.chain().focus().redo().run()}>
+          ↷
+        </Btn>
+      </div>
+
+      <EditorContent editor={editor} className="rte-content prose" />
+      <input ref={fileRef} type="file" accept="image/*" onChange={onPickImage} hidden />
+    </div>
+  )
+}