Merge pull request #19 from objectql/copilot/add-markdown-component

Author: hotlong

examples/prototype/src/App.tsx

@@ -365,7 +365,76 @@ const schema = {
                 {
                   value: 'analytics',
                   label: 'Analytics',
-                  body: { type: 'text', content: 'Analytics Content' }
+                  body: {
+                    type: 'div',
+                    className: 'grid gap-6',
+                    body: [
+                      {
+                        type: 'card',
+                        className: 'shadow-sm',
+                        title: 'Markdown Component Demo',
+                        description: 'A fully-featured markdown renderer with GitHub Flavored Markdown support.',
+                        body: {
+                          type: 'div',
+                          className: 'p-6 pt-0',
+                          body: {
+                            type: 'markdown',
+                            content: `# Markdown Component
+
+This is a new **Markdown** component for Object UI! It supports:
+
+## Features
+
+- **Bold** and *italic* text
+- [Links](https://objectui.org)
+- \`Inline code\`
+- Code blocks with syntax highlighting
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, Object UI!");
+}
+\`\`\`
+
+## Lists
+
+### Unordered Lists
+- Item 1
+- Item 2
+  - Nested item 2.1
+  - Nested item 2.2
+- Item 3
+
+### Ordered Lists
+1. First item
+2. Second item
+3. Third item
+
+## Tables (GitHub Flavored Markdown)
+
+| Feature | Status |
+|---------|--------|
+| Headers | ✅ |
+| Lists | ✅ |
+| Tables | ✅ |
+| Code | ✅ |
+
+## Blockquotes
+
+> This is a blockquote. You can use it to highlight important information or quotes.
+
+## Images
+
+![Object UI Logo](/logo.svg)
+
+---
+
+*This markdown is rendered using react-markdown with remark-gfm support!*`
+                          }
+                        }
+                      }
+                    ]
+                  }
                 },
                 {
                   value: 'reports',

packages/components/package.json

@@ -57,8 +57,11 @@
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.71.0",
+    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.4.0",
     "recharts": "^3.6.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",

packages/components/src/new-components.test.ts

@@ -33,6 +33,12 @@ describe('New Components Registration', () => {
       expect(component).toBeDefined();
       expect(component?.label).toBe('Tree View');
     });
+
+    it('should register markdown component', () => {
+      const component = ComponentRegistry.getConfig('markdown');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Markdown');
+    });
   });
 
   describe('Layout Components', () => {

packages/components/src/renderers/data-display/index.ts

@@ -4,3 +4,4 @@ import './alert';
 import './chart';
 import './list';
 import './tree-view';
+import './markdown';

packages/components/src/renderers/data-display/markdown.tsx

@@ -0,0 +1,49 @@
+import { ComponentRegistry } from '@object-ui/core';
+import { Markdown } from '@/ui';
+
+/**
+ * Markdown Renderer Component
+ * 
+ * A schema-driven renderer that displays markdown content in Object UI applications.
+ * This component follows the "Schema First" principle, enabling markdown rendering
+ * through pure JSON/YAML configuration without writing custom code.
+ * 
+ * @example
+ * ```json
+ * {
+ *   "type": "markdown",
+ *   "content": "# Hello World\n\nThis is **markdown** text."
+ * }
+ * ```
+ * 
+ * Features:
+ * - GitHub Flavored Markdown support (tables, strikethrough, task lists)
+ * - XSS protection via rehype-sanitize
+ * - Dark mode support
+ * - Tailwind CSS prose styling
+ */
+ComponentRegistry.register('markdown', 
+  ({ schema, className, ...props }) => (
+    <Markdown 
+      content={schema.content || ''} 
+      className={className}
+      {...props}
+    />
+  ),
+  {
+    label: 'Markdown',
+    inputs: [
+      { 
+        name: 'content', 
+        type: 'string', 
+        label: 'Markdown Content', 
+        required: true,
+        inputType: 'textarea'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      content: '# Hello World\n\nThis is a **markdown** component with *formatting* support.\n\n- Item 1\n- Item 2\n- Item 3',
+    }
+  }
+);

packages/components/src/ui/index.ts

@@ -30,6 +30,7 @@ export * from './input';
 export * from './item';
 export * from './kbd';
 export * from './label';
+export * from './markdown';
 export * from './menubar';
 export * from './navigation-menu';
 export * from './pagination';

packages/components/src/ui/markdown.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import rehypeSanitize from "rehype-sanitize"
+import { cn } from "@/lib/utils"
+
+/**
+ * Props for the Markdown component.
+ * 
+ * This component renders markdown content using react-markdown with GitHub Flavored Markdown support.
+ * All content is sanitized to prevent XSS attacks.
+ */
+export interface MarkdownProps {
+  /**
+   * The markdown content to render. Supports GitHub Flavored Markdown including:
+   * - Headers (H1-H6)
+   * - Bold, italic, and inline code
+   * - Links and images
+   * - Lists (ordered, unordered, and nested)
+   * - Tables
+   * - Blockquotes
+   * - Code blocks
+   */
+  content: string
+  
+  /**
+   * Optional CSS class name to apply custom styling to the markdown container.
+   * The component uses Tailwind CSS prose classes for typography by default.
+   */
+  className?: string
+}
+
+function Markdown({ content, className }: MarkdownProps) {
+  return (
+    <div
+      data-slot="markdown"
+      className={cn(
+        "prose prose-sm dark:prose-invert max-w-none",
+        "prose-headings:font-semibold prose-headings:tracking-tight",
+        "prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl",
+        "prose-p:leading-relaxed prose-p:text-foreground",
+        "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
+        "prose-code:text-foreground prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none",
+        "prose-pre:bg-muted prose-pre:text-foreground prose-pre:border",
+        "prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground",
+        "prose-strong:text-foreground prose-strong:font-semibold",
+        "prose-ul:list-disc prose-ol:list-decimal",
+        "prose-li:text-foreground prose-li:marker:text-muted-foreground",
+        "prose-table:border prose-th:border prose-th:bg-muted prose-td:border",
+        "prose-img:rounded-md prose-img:border",
+        className
+      )}
+    >
+      <ReactMarkdown 
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSanitize]}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}
+
+export { Markdown }