refactor: replace ReactMarkdown with TipTapView for enhanced markdown rendering in DecisionSummary

Author: mrdavidlaing-mo

components/decision-summary.tsx

@@ -2,31 +2,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/com
 import { Decision } from "@/lib/domain/Decision"
 import { Stakeholder } from "@/lib/domain/Stakeholder"
 import { StakeholderRoleGroups } from "@/components/stakeholders/StakeholderRoleGroups"
-import ReactMarkdown from 'react-markdown'
-import { ReactNode } from 'react'
-
-// Define proper types for the ReactMarkdown components
-interface ReactMarkdownProps {
-  children?: ReactNode;
-  className?: string;
-}
-
-// Components for custom rendering
-const MarkdownComponents = {
-  // Override how strong (bold) is rendered
-  strong: ({ children, ...props }: ReactMarkdownProps) => <span className="font-bold" {...props}>{children}</span>,
-  
-  // Override how emphasis (italic) is rendered
-  em: ({ children, ...props }: ReactMarkdownProps) => <span className="italic" {...props}>{children}</span>,
-  
-  // Override how lists are rendered
-  ul: ({ children, ...props }: ReactMarkdownProps) => <ul className="list-disc ml-5 my-2" {...props}>{children}</ul>,
-  ol: ({ children, ...props }: ReactMarkdownProps) => <ol className="list-decimal ml-5 my-2" {...props}>{children}</ol>,
-  li: ({ children, ...props }: ReactMarkdownProps) => <li className="my-1" {...props}>{children}</li>,
-  
-  // Override how paragraphs are rendered
-  p: ({ children, ...props }: ReactMarkdownProps) => <p className="my-2" {...props}>{children}</p>
-};
+import { TipTapView } from '@/components/tiptap-view'
 
 interface DecisionSummaryProps {
   decision: Decision
@@ -60,7 +36,7 @@ export function DecisionSummary({
         <div className="space-y-2">
           <h3 className="text-muted-foreground">Description</h3>
           <div className="prose prose-sm dark:prose-invert max-w-none">
-            <ReactMarkdown components={MarkdownComponents}>{decision.description || ''}</ReactMarkdown>
+            <TipTapView content={decision.description || ''} />
           </div>
         </div>
 
@@ -80,7 +56,7 @@ export function DecisionSummary({
         <div className="space-y-2">
           <h3 className="text-muted-foreground">Decision</h3>
           <div className="rounded-md bg-muted p-4 prose prose-sm dark:prose-invert max-w-none">
-            <ReactMarkdown components={MarkdownComponents}>{decision.decision || "No decision recorded"}</ReactMarkdown>
+            <TipTapView content={decision.decision || "No decision recorded"} />
           </div>
         </div>
 

components/tiptap-editor.tsx

@@ -44,10 +44,7 @@ export function TipTapEditor({ content, onChange, className = '' }: TipTapEditor
         transformCopiedText: true
       })
     ],
-    content: {
-      type: 'doc',
-      content: content ? [{ type: 'paragraph', content: [{ type: 'text', text: content }] }] : [],
-    },
+    content: rawMarkdown,
     onUpdate: ({ editor }) => {
       // Use the markdown extension to get markdown content
       const markdown = editor.storage.markdown.getMarkdown();

components/tiptap-view.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { Markdown } from 'tiptap-markdown'
+
+interface TipTapViewProps {
+  content: string
+  className?: string
+}
+
+export function TipTapView({ content, className = '' }: TipTapViewProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        bold: {
+          HTMLAttributes: {
+            class: 'font-bold'
+          }
+        },
+        heading: {
+          levels: [1, 2, 3]
+        }
+      }),
+      Markdown.configure({
+        html: false,
+        transformPastedText: true,
+        transformCopiedText: true
+      })
+    ],
+    content,
+    editable: false,
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm dark:prose-invert focus:outline-none max-w-none p-4'
+      }
+    }
+  });
+
+  // Update editor content when content prop changes
+  React.useEffect(() => {
+    if (editor && content !== undefined) {
+      // Only update if content actually changed
+      if (editor.storage.markdown.getMarkdown() !== content) {
+        editor.commands.setContent(content);
+      }
+    }
+  }, [editor, content]);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className={`[&_.ProseMirror]:focus-visible:outline-none [&_.ProseMirror]:focus-visible:ring-0 ${className}`}>
+      <EditorContent 
+        editor={editor} 
+        className="[&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mb-4 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mb-3 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mb-2" 
+      />
+    </div>
+  )
+}