From 8bc3bb1f70556f09bac9598c8fc567c5b17f0534 Mon Sep 17 00:00:00 2001 From: Sai Prakash Date: Thu, 16 Jul 2026 00:20:13 -0400 Subject: [PATCH 1/2] Add TipTap rich text editing (markdown + GFM canonical) Shared RichTextEditor on TipTap v3 with the official @tiptap/markdown package: markdown in (contentType: 'markdown'), markdown out (editor.getMarkdown()), so the DB format stays plain markdown and MCP-authored and UI-authored content remain one dialect. GFM via @tiptap/extension-table (TableKit) and @tiptap/extension-list (TaskList/TaskItem); strikethrough from StarterKit. Minimal toolbar. - Asset description + notes cards now edit with the rich editor; description display unified onto markdown rendering. - RichTextField adapter mirrors markdown into a hidden input so the existing FormData flows (work-item auto-save form, work-item create, plan create/edit sheets) work unchanged. Mirrored work items render description read-only instead of a disabled field. - Task descriptions intentionally stay plain textareas. - Read-only paths gain remark-gfm (asset cards, spec card, work-item spec section) so tables, task lists, and strikethrough render. - Note: plan-create description loses browser-level `required` (hidden inputs can't carry it); server behavior unchanged. Co-Authored-By: Claude Fable 5 --- .../assets/[id]/asset-content-cards.tsx | 20 +- app/(dashboard)/plans/[id]/plan-actions.tsx | 5 +- app/(dashboard)/plans/plan-create-panel.tsx | 6 +- .../work-items/work-item-panel.tsx | 23 +- components/rich-text-editor.tsx | 165 ++++ components/rich-text-field.tsx | 26 + components/spec-card.tsx | 3 +- package.json | 7 + pnpm-lock.yaml | 710 ++++++++++++++++++ 9 files changed, 936 insertions(+), 29 deletions(-) create mode 100644 components/rich-text-editor.tsx create mode 100644 components/rich-text-field.tsx diff --git a/app/(dashboard)/assets/[id]/asset-content-cards.tsx b/app/(dashboard)/assets/[id]/asset-content-cards.tsx index 736c9d2..1948375 100644 --- a/app/(dashboard)/assets/[id]/asset-content-cards.tsx +++ b/app/(dashboard)/assets/[id]/asset-content-cards.tsx @@ -2,9 +2,10 @@ import { useState, useTransition } from 'react' import ReactMarkdown from 'react-markdown' +import remarkGfm from 'remark-gfm' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' -import { Textarea } from '@/components/ui/textarea' +import { RichTextEditor } from '@/components/rich-text-editor' import { AlignLeft, NotebookPen, Pencil } from 'lucide-react' import { toast } from 'sonner' import { updateAssetContentAction } from '../../actions' @@ -64,12 +65,11 @@ export function AssetContentCard({ assetId, productSlug, field, value }: Editabl {editing ? (
-