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/api/client.js

@@ -70,6 +70,12 @@ export const api = {
       fd.append('image', file)
       return req('/admin/posts/upload', { method: 'POST', body: fd, raw: true })
     },
+    // Generalized upload for rich-text editors → { url }.
+    upload: (file) => {
+      const fd = new FormData()
+      fd.append('image', file)
+      return req('/admin/uploads', { method: 'POST', body: fd, raw: true })
+    },
     listWiki: (params = '') => req(`/admin/wiki${params}`),
     getWiki: (slug) => req(`/admin/wiki/${slug}`),
     createWiki: (data) => req('/admin/wiki', { method: 'POST', body: data }),

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>
+  )
+}

client/src/routes/admin/views/WikiEditor.jsx

@@ -1,7 +1,11 @@
-import { useEffect, useState } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 import Modal from '../../../components/Modal.jsx'
 import { api } from '../../../api/client.js'
 
+// Admin-only and heavy (TipTap) — load as its own chunk so the public bundle
+// never pays for it.
+const RichTextEditor = lazy(() => import('../../../components/RichTextEditor.jsx'))
+
 export default function WikiEditor({ slug, onClose, onSaved }) {
   const isEdit = Boolean(slug)
   const [form, setForm] = useState({
@@ -170,10 +174,12 @@ export default function WikiEditor({ slug, onClose, onSaved }) {
               placeholder="One-line summary shown on the wiki home."
             />
           </label>
-          <label>
-            <span className="field-label">Body (HTML — use &lt;h2&gt; for the table of contents)</span>
-            <textarea value={form.body} onChange={set('body')} className="textarea" style={{ minHeight: 260 }} />
-          </label>
+          <div>
+            <span className="field-label">Body (use Heading 2 for table-of-contents sections)</span>
+            <Suspense fallback={<span className="spin" />}>
+              <RichTextEditor value={form.body} onChange={(html) => setForm((f) => ({ ...f, body: html }))} />
+            </Suspense>
+          </div>
         </div>
       )}
     </Modal>

client/src/styles/theme.css

@@ -312,6 +312,75 @@ button[disabled] {
   border: 1px solid var(--line);
 }
 
+/* ===== Rich text editor (TipTap) ===== */
+.rte {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  overflow: hidden;
+}
+.rte:focus-within {
+  border-color: var(--accent);
+}
+.rte-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-flat);
+}
+.rte-btn {
+  min-width: 30px;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.rte-btn:hover:not([disabled]) {
+  background: var(--blue);
+  color: var(--ink);
+}
+.rte-btn.is-active {
+  background: var(--blue);
+  border-color: var(--accent);
+  color: var(--accent-bright);
+}
+.rte-btn[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.rte-sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 2px 4px;
+  background: var(--line);
+}
+.rte-content {
+  padding: 14px 16px;
+  max-height: 460px;
+  overflow-y: auto;
+}
+.rte-content .ProseMirror {
+  min-height: 220px;
+  outline: none;
+}
+.rte-content .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--dim);
+  pointer-events: none;
+}
+
 /* ===== Admin tables ===== */
 .adm-table {
   width: 100%;