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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user