@object-ui/plugin-markdown 0.3.0

package/src/MarkdownImpl.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"
+
+/**
+ * Props for the Markdown component implementation.
+ * 
+ * This component renders markdown content using react-markdown with GitHub Flavored Markdown support.
+ * All content is sanitized to prevent XSS attacks.
+ */
+export interface MarkdownImplProps {
+  /**
+   * The markdown content to render.
+   */
+  content: string
+  
+  /**
+   * Optional CSS class name to apply custom styling to the markdown container.
+   */
+  className?: string
+}
+
+/**
+ * Internal Markdown implementation component.
+ * This contains the actual react-markdown import (heavy ~100-200 KB).
+ */
+export default function MarkdownImpl({ content, className }: MarkdownImplProps) {
+  // Utility function to merge class names (inline to avoid external dependency)
+  const cn = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
+  
+  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]}
+        // Additional security: only allow safe elements
+        // This provides defense-in-depth beyond rehype-sanitize
+        disallowedElements={['script', 'style', 'iframe', 'object', 'embed']}
+        unwrapDisallowed={true}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/src/index.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Plugin Markdown', () => {
+  // Import all renderers to register them
+  beforeAll(async () => {
+    await import('./index');
+  });
+
+  describe('markdown component', () => {
+    it('should be registered in ComponentRegistry', () => {
+      const markdownRenderer = ComponentRegistry.get('markdown');
+      expect(markdownRenderer).toBeDefined();
+    });
+
+    it('should have proper metadata', () => {
+      const config = ComponentRegistry.getConfig('markdown');
+      expect(config).toBeDefined();
+      expect(config?.label).toBe('Markdown');
+      expect(config?.category).toBe('plugin');
+      expect(config?.inputs).toBeDefined();
+      expect(config?.defaultProps).toBeDefined();
+    });
+
+    it('should have expected inputs', () => {
+      const config = ComponentRegistry.getConfig('markdown');
+      const inputNames = config?.inputs?.map((input: any) => input.name) || [];
+      
+      expect(inputNames).toContain('content');
+      expect(inputNames).toContain('className');
+    });
+
+    it('should have content as required input', () => {
+      const config = ComponentRegistry.getConfig('markdown');
+      const contentInput = config?.inputs?.find((input: any) => input.name === 'content');
+      
+      expect(contentInput).toBeDefined();
+      expect(contentInput?.required).toBe(true);
+      expect(contentInput?.type).toBe('string');
+      expect(contentInput?.inputType).toBe('textarea');
+    });
+
+    it('should have sensible default props', () => {
+      const config = ComponentRegistry.getConfig('markdown');
+      const defaults = config?.defaultProps;
+      
+      expect(defaults).toBeDefined();
+      expect(defaults?.content).toBeDefined();
+      expect(typeof defaults?.content).toBe('string');
+      expect(defaults?.content.length).toBeGreaterThan(0);
+      // Verify it contains markdown syntax
+      expect(defaults?.content).toContain('#');
+    });
+  });
+});

package/src/index.tsx

@@ -0,0 +1,62 @@
+import React, { Suspense } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { Skeleton } from '@object-ui/components';
+
+// Export types for external use
+export type { MarkdownSchema } from './types';
+
+// 🚀 Lazy load the implementation file
+// This ensures react-markdown is only loaded when the component is actually rendered
+const LazyMarkdown = React.lazy(() => import('./MarkdownImpl'));
+
+export interface MarkdownRendererProps {
+  schema: {
+    type: string;
+    id?: string;
+    className?: string;
+    content?: string;
+  };
+}
+
+/**
+ * MarkdownRenderer - The public API for the markdown component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ schema }) => {
+  return (
+    <Suspense fallback={<Skeleton className="w-full h-[200px]" />}>
+      <LazyMarkdown
+        content={schema.content || ''}
+        className={schema.className}
+      />
+    </Suspense>
+  );
+};
+
+// Register the component with the ComponentRegistry
+ComponentRegistry.register(
+  'markdown',
+  MarkdownRenderer,
+  {
+    label: 'Markdown',
+    category: 'plugin',
+    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',
+    }
+  }
+);
+
+// Standard Export Protocol - for manual integration
+export const markdownComponents = {
+  'markdown': MarkdownRenderer,
+};

package/src/types.ts

@@ -0,0 +1,28 @@
+import type { BaseSchema } from '@object-ui/types';
+
+/**
+ * Markdown component schema.
+ * Renders markdown content with GitHub Flavored Markdown support.
+ */
+export interface MarkdownSchema extends BaseSchema {
+  type: 'markdown';
+  
+  /**
+   * 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
+   * - Strikethrough
+   * - Task lists
+   */
+  content?: string;
+  
+  /**
+   * Optional CSS class name to apply custom styling to the markdown container.
+   */
+  className?: string;
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "composite": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginMarkdown',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+        },
+      },
+    },
+  },
+});