remons-markdown-editor 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Button, Dropdown, Modal, Splitter, Tooltip, message } from "antd";
+import { Button, ColorPicker, DatePicker, Dropdown, Form, Input, InputNumber, Modal, Rate, Select, Slider, Splitter, Switch, Tooltip, message } from "antd";
 import { EditorView, basicSetup } from "codemirror";
 import { EditorState, Facet } from "@codemirror/state";
 import { Decoration, EditorView as EditorView$1, ViewPlugin, WidgetType, keymap } from "@codemirror/view";
@@ -552,15 +552,16 @@ var Preview = forwardRef(({ content, previewOptions }, ref) => {
 Preview.displayName = "Preview";
 //#endregion
 //#region src/components/Panel/SplitPanels.tsx
+var { Panel } = Splitter;
 function SplitPanels({ leftPanel, rightPanel }) {
 	return /* @__PURE__ */ jsxs(Splitter, {
 		className: "split-panels",
-		children: [/* @__PURE__ */ jsx(Splitter.Panel, {
+		children: [/* @__PURE__ */ jsx(Panel, {
 			defaultSize: "50%",
 			min: "20%",
 			max: "80%",
 			children: leftPanel
-		}), /* @__PURE__ */ jsx(Splitter.Panel, { children: rightPanel })]
+		}), /* @__PURE__ */ jsx(Panel, { children: rightPanel })]
 	});
 }
 //#endregion
@@ -1041,12 +1042,59 @@ function Toolbar({ editorView, fullscreen = true, onToggleFullscreen, extraItems
 //#endregion
 //#region src/components/Dialog/EditDialog.tsx
 /**
+* 组件类型到 antd 表单组件的映射
+*/
+var FormComponents = {
+	input: Input,
+	textarea: Input.TextArea,
+	number: InputNumber,
+	select: Select,
+	switch: Switch,
+	slider: Slider,
+	rate: Rate,
+	color: ColorPicker,
+	date: DatePicker,
+	dateRange: DatePicker.RangePicker
+};
+/**
+* 渲染对应类型的 antd 表单组件
+*/
+function renderFormItemComponent(field) {
+	const props = field.componentProps || {};
+	const Component = field.componentType ? FormComponents[field.componentType] : Input;
+	return /* @__PURE__ */ jsx(Component, { ...props });
+}
+/**
+* 根据 fields 自动生成 Form.Item 列表
+*/
+function renderAutoForm(form, fields) {
+	if (!fields || fields.length === 0) return null;
+	return /* @__PURE__ */ jsx(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__ */ jsx(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] = useState({});
+	const [form] = Form.useForm();
 	const mergedProps = useMemo(() => {
 		if (!schema) return currentProps;
 		const defaults = {};
@@ -1056,24 +1104,52 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 			...currentProps
 		};
 	}, [schema, currentProps]);
+	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__ */ jsx(Modal, {
 		title: `${schema.label} 属性编辑`,
 		open: visible,
@@ -1081,10 +1157,7 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 		onCancel: handleClose,
 		okText: "保存",
 		cancelText: "取消",
-		children: schema.renderDialog(visible ? {
-			...mergedProps,
-			...formProps
-		} : mergedProps, handleDialogChange)
+		children: renderDialogContent()
 	});
 }
 //#endregion
@@ -1194,7 +1267,7 @@ function useScrollSync(sourceRef, targetRef) {
 }
 //#endregion
 //#region src/MarkdownEditor.tsx
-var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue = "", value, onChange, showPreview = true, fullscreen: fullscreenProp = false, previewOptions, uploadConfig }, ref) {
+var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue = "", value, onChange, showPreview = true, fullscreen: fullscreenProp = true, previewOptions, uploadConfig }, ref) {
 	const [content, setContent] = useState(value ?? defaultValue);
 	const [editorView, setEditorView] = useState(null);
 	const scrollDOMRef = useRef(null);
@@ -1213,14 +1286,19 @@ var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue =
 		onChange?.(newContent);
 	}, [onChange]);
 	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__ */ jsx(ReadOutlined, {}),
+			wrapTags: schema.wrapTags
+		};
 		const defaultProps = {};
 		for (const field of schema?.fields ?? []) defaultProps[field.key] = field.defaultValue ?? "";
-		const iconNode = schema.icon ?? /* @__PURE__ */ jsx(ReadOutlined, {});
 		return {
 			id: `container-${schema.name}`,
 			label: schema.label,
-			icon: () => iconNode,
+			icon: () => schema.icon ?? /* @__PURE__ */ jsx(ReadOutlined, {}),
 			handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
 		};
 	});
@@ -1302,15 +1380,36 @@ var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue =
 * 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>
 *   ),
 * }
 * 
@@ -1320,6 +1419,35 @@ var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue =
 * }
 * ```
 * 
+* @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() {