@c2-markdown-ui/react 0.4.3 → 0.4.4

package/src/lib/MarkdownUI.tsx

@@ -1,23 +1,10 @@
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useEffect } 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)
@@ -30,18 +17,17 @@ if (typeof HTMLElement !== 'undefined') {
     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 }));
+      this.reactRoot.render(React.createElement(Widget, { id, content }));
     }
 
     disconnectedCallback() {
@@ -58,15 +44,9 @@ if (typeof HTMLElement !== 'undefined') {
   }
 }
 
-export const MarkdownUI: React.FC<MarkdownUIProps> = ({ html, data, onWidgetEvent, onSubmit, onFormChange }) => {
+export const MarkdownUI: React.FC<MarkdownUIProps> = ({ html, onWidgetEvent }) => {
   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}>;
@@ -75,37 +55,19 @@ export const MarkdownUI: React.FC<MarkdownUIProps> = ({ html, data, onWidgetEven
       }
     };
 
-    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]);
+  }, [onWidgetEvent]);
 
   return (
     <div ref={containerRef} className="widget-container">
-      <div dangerouslySetInnerHTML={innerHtmlProp} />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
     </div>
   );
 };