@c2-markdown-ui/react 0.4.3 → 0.4.4

package/src/widgets/Widget.tsx

@@ -1,131 +1,83 @@
-import React, { useEffect } from 'react';
-import * as widgets from './index';
-
-export interface WidgetProps {
-  id: string;
-  content: string;
-  /** 外部传入的表单初始值（encodeURIComponent 后的 JSON 字符串），由 MarkdownUI 注入 */
-  data?: string;
-}
-
-type WidgetType = keyof typeof widgets;
-
-// Map camelCase JSON types to PascalCase component names
-const typeMapping: Record<string, WidgetType> = {
-  'button': 'Button',
-  'button-group': 'ButtonGroup',
-  'cascade': 'Cascader',
-  'chart-line': 'Chart',
-  'chart-bar': 'Chart',
-  'chart-pie': 'Chart',
-  'chart-scatter': 'Chart',
-  'date-picker': 'DatePicker',
-  'form': 'Form',
-  'incomplete': 'Incomplete',
-  'multiple-choice-question': 'MultipleChoiceQuestion',
-  'number-input': 'NumberInput',
-  'quiz': 'Quiz',
-  'radio-group': 'RadioGroup',
-  'select': 'Select',
-  'select-multi': 'SelectMulti',
-  'tree-select': 'TreeSelect',
-  'short-answer-question': 'ShortAnswerQuestion',
-  'slider': 'Slider',
-  'switch': 'Switch',
-  'text-input': 'TextInput'
-};
-
-export const Widget: React.FC<WidgetProps> = ({ id, content, data }) => {
-  const parsed = JSON.parse(decodeURIComponent(content));
-  const componentType = typeMapping[parsed.type] || parsed.type;
-  const WidgetComponent = widgets[componentType as WidgetType];
-
-  // 解析外部注入的表单初始值（容错：非法 JSON 时忽略）
-  let initialData: Record<string, unknown> | undefined;
-  if (data) {
-    try {
-      initialData = JSON.parse(decodeURIComponent(data));
-    } catch {
-      initialData = undefined;
-    }
-  }
-
-  const dispatch = (detail: any) => {
-    console.log('🔥 Widget dispatch called', { id, detail });
-
-    const event = new CustomEvent('widget-event', {
-      detail: detail,
-      bubbles: true,
-      composed: true
-    });
-
-    // Find the custom element and bubble up to find the closest widget container
-    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
-    console.log('🔍 Custom element found:', customElement);
-
-    if (customElement) {
-      const container = customElement.closest('.widget-container');
-      console.log('📦 Container found:', container);
-      if (container) {
-        console.log('📤 Dispatching event on container');
-        container.dispatchEvent(event);
-      }
-    } else {
-      console.log('❌ No custom element found for id:', id);
-    }
-  };
-
-  /** form 提交事件：独立于 widget-event，通过 widget-submit 派发 */
-  const dispatchSubmit = (value: any) => {
-    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
-    if (customElement) {
-      const container = customElement.closest('.widget-container');
-      if (container) {
-        container.dispatchEvent(new CustomEvent('widget-submit', {
-          detail: { id, value },
-          bubbles: true,
-          composed: true
-        }));
-      }
-    }
-  };
-
-  /** form 字段级统计事件：任一表单项被填写时通过 widget-form-change 派发 */
-  const dispatchFieldChange = (stats: any) => {
-    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
-    if (customElement) {
-      const container = customElement.closest('.widget-container');
-      if (container) {
-        container.dispatchEvent(new CustomEvent('widget-form-change', {
-          detail: { id, stats },
-          bubbles: true,
-          composed: true
-        }));
-      }
-    }
-  };
-
-  if (!WidgetComponent) {
-    return (
-      <div className="widget">
-        <span style={{ color: 'red' }}>
-          Unknown widget "{parsed.type}"
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="widget">
-      <WidgetComponent
-        {...parsed}
-        initialData={initialData}
-        onchange={(value: any) => dispatch({ id, value })}
-        {...(parsed.type === 'form' ? {
-          onsubmit: (values: any) => dispatchSubmit(values),
-          onfieldchange: (stats: any) => dispatchFieldChange(stats)
-        } : {})}
-      />
-    </div>
-  );
+import React, { useEffect } from 'react';
+import * as widgets from './index';
+
+export interface WidgetProps {
+  id: string;
+  content: string;
+}
+
+type WidgetType = keyof typeof widgets;
+
+// Map camelCase JSON types to PascalCase component names
+const typeMapping: Record<string, WidgetType> = {
+  'button': 'Button',
+  'button-group': 'ButtonGroup',
+  'cascade': 'Cascader',
+  'chart-line': 'Chart',
+  'chart-bar': 'Chart',
+  'chart-pie': 'Chart',
+  'chart-scatter': 'Chart',
+  'date-picker': 'DatePicker',
+  'form': 'Form',
+  'incomplete': 'Incomplete',
+  'multiple-choice-question': 'MultipleChoiceQuestion',
+  'number-input': 'NumberInput',
+  'quiz': 'Quiz',
+  'radio-group': 'RadioGroup',
+  'select': 'Select',
+  'select-multi': 'SelectMulti',
+  'short-answer-question': 'ShortAnswerQuestion',
+  'slider': 'Slider',
+  'switch': 'Switch',
+  'text-input': 'TextInput'
+};
+
+export const Widget: React.FC<WidgetProps> = ({ id, content }) => {
+  const parsed = JSON.parse(decodeURIComponent(content));
+  const componentType = typeMapping[parsed.type] || parsed.type;
+  const WidgetComponent = widgets[componentType as WidgetType];
+
+  const dispatch = (detail: any) => {
+    console.log('🔥 Widget dispatch called', { id, detail });
+    
+    const event = new CustomEvent('widget-event', {
+      detail: detail,
+      bubbles: true,
+      composed: true
+    });
+    
+    // Find the custom element and bubble up to find the closest widget container
+    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
+    console.log('🔍 Custom element found:', customElement);
+    
+    if (customElement) {
+      const container = customElement.closest('.widget-container');
+      console.log('📦 Container found:', container);
+      if (container) {
+        console.log('📤 Dispatching event on container');
+        container.dispatchEvent(event);
+      }
+    } else {
+      console.log('❌ No custom element found for id:', id);
+    }
+  };
+
+  if (!WidgetComponent) {
+    return (
+      <div className="widget">
+        <span style={{ color: 'red' }}>
+          Unknown widget "{parsed.type}"
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="widget">
+      <WidgetComponent 
+        {...parsed} 
+        onchange={(value: any) => dispatch({ id, value })} 
+      />
+    </div>
+  );
 };

package/src/widgets/choiceUtils.ts

@@ -1,90 +1,45 @@
-/** 选项条目：value 是表单实际取值（key），label 是展示文案 */
-export interface ChoiceItem {
-  value: string;
-  label: string;
-}
-
-/**
- * 解析本地 choices 条目的 key:label 格式：
- * - "bj:北京"  → {value: "bj", label: "北京"}（value 是表单实际取值，label 是展示文案）
- * - "北京"     → {value: "北京", label: "北京"}（无冒号或不符合判定规则时视为纯文本）
- * - "09:00"   → {value: "09:00", label: "09:00"}（纯数字 key 视为时间/比例值，保持原样）
- * - "http://x" → 原样（label 以 // 开头视为 URL）
- *
- * 判定规则：按首个冒号分割，仅当 key 非空且不含空白、非纯数字，
- * 且 label 非空、不以 // 开头时才视为 key:label。
- */
-export function parseChoice(c: string): ChoiceItem {
-  const s = String(c ?? '');
-  const idx = s.indexOf(':');
-  if (idx > 0) {
-    const key = s.slice(0, idx);
-    const label = s.slice(idx + 1);
-    if (key && label && !/\s/.test(key) && !/^\d+$/.test(key) && !label.startsWith('//')) {
-      return { value: key, label };
-    }
-  }
-  return { value: s, label: s };
-}
-
-/** 把本地 choices（string[] 或对象数组）解析为 {value,label} 数组。
- *  对象条目：value > key 取值（表单实际取值），label 缺省回落到 value */
-export function parseChoices(choices: string[] | Array<{ value?: string; key?: string; label?: string }> | undefined | null): ChoiceItem[] {
-  return (choices || []).map((c) => {
-    if (c !== null && typeof c === 'object') {
-      const value = (c as any).value ?? (c as any).key;
-      if (value === undefined || value === null || value === '') return null;
-      const valueStr = String(value);
-      const label = (c as any).label !== undefined && (c as any).label !== null && (c as any).label !== ''
-        ? String((c as any).label)
-        : valueStr;
-      return { value: valueStr, label };
-    }
-    return parseChoice(c as string);
-  }).filter((c: ChoiceItem | null): c is ChoiceItem => c !== null);
-}
-
-/**
- * 兼容常见远端响应格式并归一化为 {value,label}：
- * - ["测试"]                          → value=label="测试"
- * - [{key:"test",label:"测试"}]       → value="test"（表单取值），label="测试"（展示）
- * - [{value:"test",label:"测试"}]     → value="test"，label="测试"
- * - {data:[...]} / {options:[...]} / {choices:[...]} / {items:[...]} → 取内嵌数组
- *
- * 对象条目取值优先级：value > key > id > name；展示优先级：label > name > text > value。
- */
-export function normalizeRemoteChoices(json: any): ChoiceItem[] {
-  let list = json;
-  if (!Array.isArray(json)) {
-    list = Array.isArray(json?.data) ? json.data
-      : Array.isArray(json?.options) ? json.options
-      : Array.isArray(json?.choices) ? json.choices
-      : Array.isArray(json?.items) ? json.items
-      : [];
-  }
-  return (list || [])
-    .map((item: any): ChoiceItem | null => {
-      if (typeof item === 'string' || typeof item === 'number') {
-        const s = String(item);
-        return s ? { value: s, label: s } : null;
-      }
-      if (item && typeof item === 'object') {
-        const value = item.value ?? item.key ?? item.id ?? item.name;
-        if (value === undefined || value === null || value === '') return null;
-        const label = item.label ?? item.name ?? item.text ?? String(value);
-        return { value: String(value), label: String(label) };
-      }
-      return null;
-    })
-    .filter((c: ChoiceItem | null): c is ChoiceItem => c !== null);
-}
-
-/**
- * 把本地 choices / default 值（可能写的是展示文案或 key:label 原文）映射到远端 value 体系：
- * 条目本身已是 value 优先，字符串则用 label 匹配远端条目回查 value。
- */
-export function resolveChoiceValue(c: string, remote: ChoiceItem[]): string {
-  const parsed = parseChoice(c).value;
-  const hit = remote.find(r => r.value === c || r.label === c || r.value === parsed);
-  return hit ? hit.value : c;
-}
+/** 选项条目：value 是表单实际取值（key），label 是展示文案 */
+export interface ChoiceItem {
+  value: string;
+  label: string;
+}
+
+/**
+ * 解析本地 choices 条目的 key:label 格式：
+ * - "bj:北京"  → {value: "bj", label: "北京"}（value 是表单实际取值，label 是展示文案）
+ * - "北京"     → {value: "北京", label: "北京"}（无冒号或不符合判定规则时视为纯文本）
+ * - "09:00"   → {value: "09:00", label: "09:00"}（纯数字 key 视为时间/比例值，保持原样）
+ * - "http://x" → 原样（label 以 // 开头视为 URL）
+ *
+ * 判定规则：按首个冒号分割，仅当 key 非空且不含空白、非纯数字，
+ * 且 label 非空、不以 // 开头时才视为 key:label。
+ */
+export function parseChoice(c: string): ChoiceItem {
+  const s = String(c ?? '');
+  const idx = s.indexOf(':');
+  if (idx > 0) {
+    const key = s.slice(0, idx);
+    const label = s.slice(idx + 1);
+    if (key && label && !/\s/.test(key) && !/^\d+$/.test(key) && !label.startsWith('//')) {
+      return { value: key, label };
+    }
+  }
+  return { value: s, label: s };
+}
+
+/** 把本地 choices（string[] 或对象数组）解析为 {value,label} 数组。
+ *  对象条目：value > key 取值（表单实际取值），label 缺省回落到 value */
+export function parseChoices(choices: string[] | Array<{ value?: string; key?: string; label?: string }> | undefined | null): ChoiceItem[] {
+  return (choices || []).map((c) => {
+    if (c !== null && typeof c === 'object') {
+      const value = (c as any).value ?? (c as any).key;
+      if (value === undefined || value === null || value === '') return null;
+      const valueStr = String(value);
+      const label = (c as any).label !== undefined && (c as any).label !== null && (c as any).label !== ''
+        ? String((c as any).label)
+        : valueStr;
+      return { value: valueStr, label };
+    }
+    return parseChoice(c as string);
+  }).filter((c: ChoiceItem | null): c is ChoiceItem => c !== null);
+}

package/src/widgets/index.ts

@@ -1,18 +1,17 @@
-export { Button } from './Button';
-export { ButtonGroup } from './ButtonGroup';
-export { Cascader } from './Cascader';
-export { Chart } from './Chart';
-export { DatePicker } from './DatePicker';
-export { Form } from './Form';
-export { Incomplete } from './Incomplete';
-export { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
-export { NumberInput } from './NumberInput';
-export { Quiz } from './Quiz';
-export { RadioGroup } from './Radio';
-export { Select } from './Select';
-export { SelectMulti } from './SelectMulti';
-export { TreeSelect } from './TreeSelect';
-export { ShortAnswerQuestion } from './ShortAnswerQuestion';
-export { Slider } from './Slider';
-export { Switch } from './Switch';
+export { Button } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export { Cascader } from './Cascader';
+export { Chart } from './Chart';
+export { DatePicker } from './DatePicker';
+export { Form } from './Form';
+export { Incomplete } from './Incomplete';
+export { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+export { NumberInput } from './NumberInput';
+export { Quiz } from './Quiz';
+export { RadioGroup } from './Radio';
+export { Select } from './Select';
+export { SelectMulti } from './SelectMulti';
+export { ShortAnswerQuestion } from './ShortAnswerQuestion';
+export { Slider } from './Slider';
+export { Switch } from './Switch';
 export { TextInput } from './TextInput';