Scrum4Me/components/product-docs/product-doc-editor.tsx
Madhura68 bb4a71eafa feat(PBI-96/T-1069): doc viewer/editor + delete-button
- app/(app)/products/[id]/docs/[folder]/[slug]/page.tsx: server-route
  die doc laadt (scope-checked via productAccessFilter), frontmatter
  parseert, en op basis van ?edit=1 viewer of editor toont. Fallback
  voor unparseable frontmatter toont errors + raw content in <pre>.
- product-doc-viewer.tsx: server-component met frontmatter-kop
  (title + status-badge + audience/applies_to/last_updated meta) en
  body via <Markdown> (XSS-safe).
- product-doc-editor.tsx: client-wrapper rond MarkdownDocEditor met
  parseProductDocMd validator + updateProductDocAction + cancelHref.
- delete-product-doc-button.tsx: AlertDialog confirm + delete-action
  + DemoTooltip + redirect-na-success. Disabled in demo.
- Edit-knop conditioneel verborgen bij disabled folder (T-1071 voegt
  banner toe); delete blijft altijd zichtbaar voor cleanup.
- Button met `render={<Link/>}` ipv asChild (CLAUDE.md hardstop
  base-ui pattern).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-16 14:30:13 +02:00

44 lines
1.4 KiB
TypeScript

'use client'
// Editor-wrapper voor Product Docs. Dunne wrapper rond MarkdownDocEditor
// (shared) die de product-doc-specifieke action + validator injecteert.
// Onderdeel van de viewer-page (T-1069) — wordt getoond wanneer `?edit=1`
// in de searchParams staat.
import { useRouter } from 'next/navigation'
import { MarkdownDocEditor } from '@/components/shared/markdown-doc-editor'
import { parseProductDocMd } from '@/lib/product-doc-parser'
import { updateProductDocAction } from '@/actions/product-docs'
interface Props {
docId: string
initialValue: string
/** URL waar de gebruiker naar terug navigeert na annuleren of opslaan. */
cancelHref: string
}
function frontmatterValidator(value: string) {
const r = parseProductDocMd(value)
return r.ok ? [] : r.errors
}
export function ProductDocEditor({ docId, initialValue, cancelHref }: Props) {
const router = useRouter()
return (
<MarkdownDocEditor
storageKey={`product-doc-${docId}`}
initialValue={initialValue}
validate={frontmatterValidator}
onSave={(value) => updateProductDocAction(docId, value)}
onSaved={() => router.refresh()}
onCancel={() => router.push(cancelHref)}
placeholder={`---\ntitle: "..."\nstatus: draft\n---\n\n# Inhoud\n`}
validationErrorsHeader="YAML-frontmatter fouten"
debugId="product-doc-editor"
debugComponentName="ProductDocEditor"
debugFile="components/product-docs/product-doc-editor.tsx"
/>
)
}