feat(markdown): KB/process render + working in-document anchor links

KB/process content was shown via a bare unsanitized ReactMarkdown in the
ops view dialog (the /ops/[id] route is the editor, not a view). Route
it through the shared SafeMarkdown instead. New dependency-free
lib/markdown-anchors.ts (heading-text flatten, GitHub-ish slug,
per-render dedupe, in-doc href test; unit-tested) is wired into both
SafeMarkdown and MarkdownBody so headings get stable ids and a
[link](#heading) resolves. In-document links no longer force a new tab,
which previously broke the anchor jump for policies/proposals too.
rehype-slug was not added (no offline install); the helper is equivalent
and tested.
This commit is contained in:
Moheeb Zara
2026-05-16 19:11:49 -07:00
parent 2687c1578d
commit 70da0c3752
6 changed files with 157 additions and 19 deletions
+26
View File
@@ -1,9 +1,11 @@
'use client'
import type { ReactNode } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
import { makeHeadingSlugger, isInDocumentHref } from '@/lib/markdown-anchors'
// Renders admin-authored markdown that MAY contain a constrained subset of raw
// HTML. rehype-raw parses the HTML; rehype-sanitize then strips anything
@@ -27,11 +29,35 @@ const schema = {
}
export function SafeMarkdown({ children, className }: { children: string; className?: string }) {
// Per-render so heading ids are stable and de-duplicated within this doc.
const slug = makeHeadingSlugger()
const heading = (Tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') =>
function H({ children: c }: { children?: ReactNode }) {
return <Tag id={slug(c)}>{c}</Tag>
}
return (
<div className={`prose prose-sm prose-neutral dark:prose-invert max-w-none break-words ${className ?? ''}`}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, [rehypeSanitize, schema]]}
components={{
h1: heading('h1'),
h2: heading('h2'),
h3: heading('h3'),
h4: heading('h4'),
h5: heading('h5'),
h6: heading('h6'),
// In-document links (#section) must stay in the page so the anchor
// jump works; everything else opens safely in a new tab.
a: ({ href, children: c }) =>
isInDocumentHref(href) ? (
<a href={href}>{c}</a>
) : (
<a href={href} target="_blank" rel="noopener noreferrer">
{c}
</a>
),
}}
>
{children}
</ReactMarkdown>