remons-markdown-editor 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/hooks/useRegisterToolbar.d.ts

@@ -9,15 +9,36 @@ import { ComponentSchema } from '../types';
  * 2. 标签包裹模式：name + wrapTags
  *    插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
  *
- * @example 容器模式
+ * @example 容器模式 - 使用 fields 自动生成表单（最简）
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [
+ *     { key: 'type', name: '类型', componentType: 'select',
+ *       componentProps: { options: [{ value: 'price', label: '价格' }, { value: 'info', label: '信息' }] } },
+ *     { key: 'content', name: '内容', componentType: 'textarea',
+ *       componentProps: { rows: 3 } },
+ *     { key: 'enabled', name: '启用', componentType: 'switch' },
+ *   ],
+ * }
+ * // 支持的 componentType: 'input' | 'textarea' | 'number' | 'select' | 'switch' | 'slider' | 'rate' | 'color' | 'date' | 'dateRange'
+ * ```
+ *
+ * @example 容器模式 - 使用 Form.Item 自动绑定（推荐）
  * ```tsx
  * const schema: ComponentSchema = {
  *   name: 'alert',
  *   label: '警告框',
  *   icon: <AlertOutlined />,
  *   fields: [{ key: 'level', defaultValue: 'info' }],
- *   renderDialog: (props, onChange) => (
- *     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
+ *   renderDialog: ({ form }) => (
+ *     <Form form={form} layout="vertical">
+ *       <Form.Item name="level" label="级别">
+ *         <Input />
+ *       </Form.Item>
+ *     </Form>
  *   ),
  * }
  *
@@ -27,6 +48,35 @@ import { ComponentSchema } from '../types';
  * }
  * ```
  *
+ * @example 容器模式 - 手动控制
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [{ key: 'level', defaultValue: 'info' }],
+ *   renderDialog: ({ props, onChange }) => (
+ *     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
+ *   ),
+ * }
+ * ```
+ *
+ * @example 容器模式 - 完全自定义弹窗
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [{ key: 'level', defaultValue: 'info' }],
+ *   renderDialog: ({ props, onSave }) => (
+ *     <MyCustomEditor
+ *       value={props.level}
+ *       onSave={({ level }) => onSave({ level })}
+ *     />
+ *   ),
+ * }
+ * ```
+ *
  * @example 标签包裹模式
  * ```tsx
  * function MyPage() {

package/dist/index.cjs

@@ -577,15 +577,16 @@ var Preview = (0, react.forwardRef)(({ content, previewOptions }, ref) => {
 Preview.displayName = "Preview";
 //#endregion
 //#region src/components/Panel/SplitPanels.tsx
+var { Panel } = antd.Splitter;
 function SplitPanels({ leftPanel, rightPanel }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Splitter, {
 		className: "split-panels",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Splitter.Panel, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, {
 			defaultSize: "50%",
 			min: "20%",
 			max: "80%",
 			children: leftPanel
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Splitter.Panel, { children: rightPanel })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, { children: rightPanel })]
 	});
 }
 //#endregion
@@ -1066,12 +1067,59 @@ function Toolbar({ editorView, fullscreen = true, onToggleFullscreen, extraItems
 //#endregion
 //#region src/components/Dialog/EditDialog.tsx
 /**
+* 组件类型到 antd 表单组件的映射
+*/
+var FormComponents = {
+	input: antd.Input,
+	textarea: antd.Input.TextArea,
+	number: antd.InputNumber,
+	select: antd.Select,
+	switch: antd.Switch,
+	slider: antd.Slider,
+	rate: antd.Rate,
+	color: antd.ColorPicker,
+	date: antd.DatePicker,
+	dateRange: antd.DatePicker.RangePicker
+};
+/**
+* 渲染对应类型的 antd 表单组件
+*/
+function renderFormItemComponent(field) {
+	const props = field.componentProps || {};
+	const Component = field.componentType ? FormComponents[field.componentType] : antd.Input;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...props });
+}
+/**
+* 根据 fields 自动生成 Form.Item 列表
+*/
+function renderAutoForm(form, fields) {
+	if (!fields || fields.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Form, {
+		form,
+		layout: "vertical",
+		children: fields.map((field) => {
+			if (!field.componentType) return null;
+			const formItemProps = {
+				name: field.key,
+				label: field.name || field.key,
+				valuePropName: field.componentType === "switch" ? "checked" : void 0,
+				...field.componentProps
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Form.Item, {
+				...formItemProps,
+				children: renderFormItemComponent(field)
+			}, field.key);
+		})
+	});
+}
+/**
 * 属性编辑弹窗组件
 * 根据组件 schema 的 renderDialog 函数渲染弹窗内容
 */
 function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 	const schema = componentRegistry.get(typeName);
 	const [formProps, setFormProps] = (0, react.useState)({});
+	const [form] = antd.Form.useForm();
 	const mergedProps = (0, react.useMemo)(() => {
 		if (!schema) return currentProps;
 		const defaults = {};
@@ -1081,24 +1129,52 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 			...currentProps
 		};
 	}, [schema, currentProps]);
+	(0, react.useEffect)(() => {
+		if (visible) {
+			form.setFieldsValue(mergedProps);
+			setFormProps({});
+		}
+	}, [
+		visible,
+		mergedProps,
+		form
+	]);
 	const handleDialogChange = (key, value) => {
 		setFormProps((prev) => ({
 			...prev,
 			[key]: value
 		}));
 	};
-	const handleOk = () => {
-		onSave(visible ? {
+	const handleOk = async () => {
+		let finalProps = visible ? {
 			...mergedProps,
 			...formProps
-		} : mergedProps);
-		setFormProps({});
+		} : mergedProps;
+		try {
+			const formValues = await form.validateFields();
+			finalProps = {
+				...finalProps,
+				...formValues
+			};
+		} catch {}
+		onSave(finalProps);
 	};
 	const handleClose = () => {
 		setFormProps({});
 		onClose();
 	};
-	if (!schema || !schema.renderDialog) return null;
+	if (!schema) return null;
+	const context = {
+		props: mergedProps,
+		form,
+		onChange: handleDialogChange,
+		onSave
+	};
+	const renderDialogContent = () => {
+		if (schema.renderDialog) return schema.renderDialog(context);
+		if (schema.fields?.some((f) => f.componentType) && schema.fields) return renderAutoForm(form, schema.fields);
+		return null;
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Modal, {
 		title: `${schema.label} 属性编辑`,
 		open: visible,
@@ -1106,10 +1182,7 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 		onCancel: handleClose,
 		okText: "保存",
 		cancelText: "取消",
-		children: schema.renderDialog(visible ? {
-			...mergedProps,
-			...formProps
-		} : mergedProps, handleDialogChange)
+		children: renderDialogContent()
 	});
 }
 //#endregion
@@ -1219,7 +1292,7 @@ function useScrollSync(sourceRef, targetRef) {
 }
 //#endregion
 //#region src/MarkdownEditor.tsx
-var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ defaultValue = "", value, onChange, showPreview = true, fullscreen: fullscreenProp = false, previewOptions, uploadConfig }, ref) {
+var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ defaultValue = "", value, onChange, showPreview = true, fullscreen: fullscreenProp = true, previewOptions, uploadConfig }, ref) {
 	const [content, setContent] = (0, react.useState)(value ?? defaultValue);
 	const [editorView, setEditorView] = (0, react.useState)(null);
 	const scrollDOMRef = (0, react.useRef)(null);
@@ -1238,14 +1311,19 @@ var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ def
 		onChange?.(newContent);
 	}, [onChange]);
 	(0, react.useImperativeHandle)(ref, () => ({ getContent: () => content }), [content]);
-	const extraToolbarItems = componentRegistry.getAll().map((schema) => {
+	const extraToolbarItems = componentRegistry.getAll().flatMap((schema) => {
+		if (schema.wrapTags) return {
+			id: `wrap-${schema.name}`,
+			label: schema.label,
+			icon: () => schema.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.ReadOutlined, {}),
+			wrapTags: schema.wrapTags
+		};
 		const defaultProps = {};
 		for (const field of schema?.fields ?? []) defaultProps[field.key] = field.defaultValue ?? "";
-		const iconNode = schema.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.ReadOutlined, {});
 		return {
 			id: `container-${schema.name}`,
 			label: schema.label,
-			icon: () => iconNode,
+			icon: () => schema.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.ReadOutlined, {}),
 			handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
 		};
 	});
@@ -1272,7 +1350,7 @@ var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ def
 		setDialogVisible(false);
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: fullscreen ? "app fullscreen" : "app",
+		className: fullscreen ? "markdown-editor-app fullscreen" : "markdown-editor-app",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toolbar, {
 				editorView,
@@ -1327,15 +1405,36 @@ var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ def
 * 2. 标签包裹模式：name + wrapTags
 *    插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
 * 
-* @example 容器模式
+* @example 容器模式 - 使用 fields 自动生成表单（最简）
+* ```tsx
+* const schema: ComponentSchema = {
+*   name: 'alert',
+*   label: '警告框',
+*   icon: <AlertOutlined />,
+*   fields: [
+*     { key: 'type', name: '类型', componentType: 'select',
+*       componentProps: { options: [{ value: 'price', label: '价格' }, { value: 'info', label: '信息' }] } },
+*     { key: 'content', name: '内容', componentType: 'textarea',
+*       componentProps: { rows: 3 } },
+*     { key: 'enabled', name: '启用', componentType: 'switch' },
+*   ],
+* }
+* // 支持的 componentType: 'input' | 'textarea' | 'number' | 'select' | 'switch' | 'slider' | 'rate' | 'color' | 'date' | 'dateRange'
+* ```
+* 
+* @example 容器模式 - 使用 Form.Item 自动绑定（推荐）
 * ```tsx
 * const schema: ComponentSchema = {
 *   name: 'alert',
 *   label: '警告框',
 *   icon: <AlertOutlined />,
 *   fields: [{ key: 'level', defaultValue: 'info' }],
-*   renderDialog: (props, onChange) => (
-*     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
+*   renderDialog: ({ form }) => (
+*     <Form form={form} layout="vertical">
+*       <Form.Item name="level" label="级别">
+*         <Input />
+*       </Form.Item>
+*     </Form>
 *   ),
 * }
 * 
@@ -1345,6 +1444,35 @@ var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ def
 * }
 * ```
 * 
+* @example 容器模式 - 手动控制
+* ```tsx
+* const schema: ComponentSchema = {
+*   name: 'alert',
+*   label: '警告框',
+*   icon: <AlertOutlined />,
+*   fields: [{ key: 'level', defaultValue: 'info' }],
+*   renderDialog: ({ props, onChange }) => (
+*     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
+*   ),
+* }
+* ```
+* 
+* @example 容器模式 - 完全自定义弹窗
+* ```tsx
+* const schema: ComponentSchema = {
+*   name: 'alert',
+*   label: '警告框',
+*   icon: <AlertOutlined />,
+*   fields: [{ key: 'level', defaultValue: 'info' }],
+*   renderDialog: ({ props, onSave }) => (
+*     <MyCustomEditor
+*       value={props.level}
+*       onSave={({ level }) => onSave({ level })}
+*     />
+*   ),
+* }
+* ```
+* 
 * @example 标签包裹模式
 * ```tsx
 * function MyPage() {