@c2-markdown-ui/react 0.0.0-stage → 0.4.3

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@c2-markdown-ui/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.3",
+  "description": "React renderer for markdown-ui",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./widgets.css": "./src/lib/widgets.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "dev": "vite build --watch",
+    "demo": "node demo/server.js",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "react",
+    "markdown",
+    "widgets",
+    "ui"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {}
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

package/src/lib/MarkdownUI.tsx

@@ -0,0 +1,111 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { Widget } from '../widgets/Widget';
+
+export interface MarkdownUIProps {
+  html: string;
+  /** 表单初始值：{ 字段id: 值 }，作用于页面中所有 form widget（仅取各自 fields 声明的 id）；优先级高于字段 default */
+  data?: Record<string, unknown>;
+  onWidgetEvent?: (event: CustomEvent<{id: string, value: unknown}>) => void;
+  /** 表单提交事件：form 校验通过并点击提交时触发（独立于 onWidgetEvent 的 change 流） */
+  onSubmit?: (event: CustomEvent<{id: string, value: unknown}>) => void;
+  /** 表单字段级统计事件：任一表单项被填写时触发，detail.stats 含 visibleCount / filledCount / values */
+  onFormChange?: (event: CustomEvent<{id: string, stats: {visibleCount: number, filledCount: number, values: Record<string, unknown>}}>) => void;
+}
+
+/** 向 <markdown-ui-widget> 占位标签注入 data-widget-data 属性，把外部初始值带过 custom element 边界 */
+function injectWidgetData(html: string, data?: Record<string, unknown>): string {
+  if (!data || Object.keys(data).length === 0) return html;
+  const encoded = encodeURIComponent(JSON.stringify(data));
+  return html.replace(/<markdown-ui-widget\b/g, `<markdown-ui-widget data-widget-data="${encoded}"`);
+}
+
+// Custom element definition for markdown-ui-widget (browser only)
+let MarkdownUIWidgetElement: typeof HTMLElement | undefined;
+
+if (typeof HTMLElement !== 'undefined') {
+  MarkdownUIWidgetElement = class extends HTMLElement {
+    private reactRoot: Root | null = null;
+
+    connectedCallback() {
+      const id = this.getAttribute('id') || '';
+      const content = this.getAttribute('content') || '';
+      const data = this.getAttribute('data-widget-data') || '';
+
+      console.log('🏗️ Custom element connected', { id, content });
+
+      // Create a React component instance
+      this.innerHTML = '';
+      const div = document.createElement('div');
+      this.appendChild(div);
+
+      // Use React 18+ createRoot API
+      this.reactRoot = createRoot(div);
+      this.reactRoot.render(React.createElement(Widget, { id, content, data }));
+    }
+
+    disconnectedCallback() {
+      if (this.reactRoot) {
+        this.reactRoot.unmount();
+        this.reactRoot = null;
+      }
+    }
+  };
+
+  // Register the custom element if not already registered
+  if (typeof window !== 'undefined' && !customElements.get('markdown-ui-widget')) {
+    customElements.define('markdown-ui-widget', MarkdownUIWidgetElement);
+  }
+}
+
+export const MarkdownUI: React.FC<MarkdownUIProps> = ({ html, data, onWidgetEvent, onSubmit, onFormChange }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const processedHtml = useMemo(() => injectWidgetData(html, data), [html, data]);
+
+  // dangerouslySetInnerHTML 的 prop 对象必须引用稳定：React DOM 对该 prop 只做外层对象引用对比，
+  // 每次渲染新建 { __html } 会导致 innerHTML 全量重写 → custom element 重建 → 组件内部状态丢失
+  const innerHtmlProp = useMemo(() => ({ __html: processedHtml }), [processedHtml]);
+
+  useEffect(() => {
+    const handleWidgetEvent = (e: Event) => {
+      const customEvent = e as CustomEvent<{id: string, value: unknown}>;
+      if (onWidgetEvent) {
+        onWidgetEvent(customEvent);
+      }
+    };
+
+    const handleSubmit = (e: Event) => {
+      const customEvent = e as CustomEvent<{id: string, value: unknown}>;
+      if (onSubmit) {
+        onSubmit(customEvent);
+      }
+    };
+
+    const handleFormChange = (e: Event) => {
+      const customEvent = e as CustomEvent<{id: string, stats: {visibleCount: number, filledCount: number, values: Record<string, unknown>}}>;
+      if (onFormChange) {
+        onFormChange(customEvent);
+      }
+    };
+
+    const container = containerRef.current;
+    if (container) {
+      container.addEventListener('widget-event', handleWidgetEvent);
+      container.addEventListener('widget-submit', handleSubmit);
+      container.addEventListener('widget-form-change', handleFormChange);
+
+      return () => {
+        container.removeEventListener('widget-event', handleWidgetEvent);
+        container.removeEventListener('widget-submit', handleSubmit);
+        container.removeEventListener('widget-form-change', handleFormChange);
+      };
+    }
+  }, [onWidgetEvent, onSubmit, onFormChange]);
+
+  return (
+    <div ref={containerRef} className="widget-container">
+      <div dangerouslySetInnerHTML={innerHtmlProp} />
+    </div>
+  );
+};

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export { MarkdownUI } from './MarkdownUI';
+export type { MarkdownUIProps } from './MarkdownUI';
+export * from '../widgets';