Add Markdown component with GFM support and XSS protection

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }