remons-markdown-editor 1.0.0-beta.15 → 1.0.0-beta.17

package/dist/components/Toolbar/buttons.d.ts

@@ -8,6 +8,31 @@ export declare function insertAtCursor(view: EditorView, before: string, after?:
  * 在当前行行首插入文本
  */
 export declare function insertAtLineStart(view: EditorView, text: string): void;
+/**
+ * 切换标题：
+ * - 当前行已是目标级别标题 → 移除行首 # 前缀（变回普通文本）
+ * - 当前行是其他级别标题 → 替换为目标级别
+ * - 当前行是普通文本 → 插入目标级别前缀
+ * @param view - CodeMirror 编辑器实例
+ * @param level - 标题级别（1-6）
+ */
+export declare function toggleHeading(view: EditorView, level: number): void;
+/**
+ * 切换任务列表（checkbox 待办）
+ * - 支持多行：对选区内每一行应用 `- [ ] `
+ * - 普通列表项（如 `- 内容`）直接转换为 `- [ ] 内容`
+ * - 切换：若所有目标行都已是任务项，则移除行首前缀
+ */
+export declare function toggleTaskList(view: EditorView): void;
+/**
+ * 切换行首前缀（支持多行选区）
+ * - 已是对应前缀的行 → 移除前缀（变回普通文本）
+ * - 未加前缀的行 → 在行首插入前缀
+ * @param view - CodeMirror 编辑器实例
+ * @param pattern - 匹配行首前缀的正则
+ * @param insertText - 未匹配时插入的前缀文本
+ */
+export declare function toggleLinePrefix(view: EditorView, pattern: RegExp, insertText: string): void;
 /**
  * 上传图片
  * @param file - 要上传的文件

package/dist/index.cjs

@@ -333,6 +333,104 @@ function insertAtLineStart(view, text) {
 	view.dispatch({ selection: { anchor: line.from + text.length } });
 }
 /**
+* 切换标题：
+* - 当前行已是目标级别标题 → 移除行首 # 前缀（变回普通文本）
+* - 当前行是其他级别标题 → 替换为目标级别
+* - 当前行是普通文本 → 插入目标级别前缀
+* @param view - CodeMirror 编辑器实例
+* @param level - 标题级别（1-6）
+*/
+function toggleHeading(view, level) {
+	const line = view.state.doc.lineAt(view.state.selection.main.from);
+	const m = line.text.match(/^(\s*)(#{1,6})(\s+|\s*$)/);
+	const indent = m ? m[1] : "";
+	const text = "#".repeat(level) + " ";
+	if (m && m[2].length === level) view.dispatch({ changes: {
+		from: line.from,
+		to: line.from + m[0].length,
+		insert: indent
+	} });
+	else {
+		view.dispatch({ changes: {
+			from: line.from,
+			to: m ? line.from + m[0].length : line.from,
+			insert: indent + text
+		} });
+		view.dispatch({ selection: { anchor: line.from + indent.length + text.length } });
+	}
+}
+/**
+* 切换任务列表（checkbox 待办）
+* - 支持多行：对选区内每一行应用 `- [ ] `
+* - 普通列表项（如 `- 内容`）直接转换为 `- [ ] 内容`
+* - 切换：若所有目标行都已是任务项，则移除行首前缀
+*/
+function toggleTaskList(view) {
+	const doc = view.state.doc;
+	const { from, to } = view.state.selection.main;
+	const first = doc.lineAt(from);
+	const last = doc.lineAt(to);
+	const lines = [];
+	for (let n = first.number; n <= last.number; n++) lines.push(doc.line(n));
+	const taskRe = /^(\s*)([-*+])\s\[( |x)\]\s?/;
+	const allTask = lines.every((line) => taskRe.test(line.text));
+	const changes = [];
+	for (const line of lines) {
+		const taskMatch = line.text.match(taskRe);
+		if (taskMatch) changes.push({
+			from: line.from,
+			to: line.from + taskMatch[0].length,
+			insert: allTask ? "" : `${taskMatch[1]}${taskMatch[2]} [ ] `
+		});
+		else {
+			const bulletMatch = line.text.match(/^(\s*)([-*+])\s/);
+			if (bulletMatch) {
+				const idx = line.from + bulletMatch[1].length + bulletMatch[2].length;
+				changes.push({
+					from: idx,
+					to: idx + 1,
+					insert: " [ ] "
+				});
+			} else changes.push({
+				from: line.from,
+				to: line.from,
+				insert: "- [ ] "
+			});
+		}
+	}
+	view.dispatch({ changes });
+}
+/**
+* 切换行首前缀（支持多行选区）
+* - 已是对应前缀的行 → 移除前缀（变回普通文本）
+* - 未加前缀的行 → 在行首插入前缀
+* @param view - CodeMirror 编辑器实例
+* @param pattern - 匹配行首前缀的正则
+* @param insertText - 未匹配时插入的前缀文本
+*/
+function toggleLinePrefix(view, pattern, insertText) {
+	const doc = view.state.doc;
+	const { from, to } = view.state.selection.main;
+	const first = doc.lineAt(from);
+	const last = doc.lineAt(Math.max(to, from));
+	const changes = [];
+	for (let n = first.number; n <= last.number; n++) {
+		const line = doc.line(n);
+		const m = line.text.match(pattern);
+		if (m) changes.push({
+			from: line.from,
+			to: line.from + m[0].length,
+			insert: ""
+		});
+		else changes.push({
+			from: line.from,
+			to: line.from,
+			insert: insertText
+		});
+	}
+	view.dispatch({ changes });
+}
+/**
 * 上传图片
 * @param file - 要上传的文件
 * @param uploadConfig - 上传配置
@@ -616,39 +714,33 @@ function createToolbarConfig(options) {
 			children: [
 				{
 					id: "heading1",
-					label: "标题 1",
-					icon: _ant_design_icons.FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "# ")
+					label: "H1",
+					handler: (v) => toggleHeading(v, 1)
 				},
 				{
 					id: "heading2",
-					label: "标题 2",
-					icon: _ant_design_icons.FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "## ")
+					label: "H2",
+					handler: (v) => toggleHeading(v, 2)
 				},
 				{
 					id: "heading3",
-					label: "标题 3",
-					icon: _ant_design_icons.FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "### ")
+					label: "H3",
+					handler: (v) => toggleHeading(v, 3)
 				},
 				{
 					id: "heading4",
-					label: "标题 4",
-					icon: _ant_design_icons.FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "#### ")
+					label: "H4",
+					handler: (v) => toggleHeading(v, 4)
 				},
 				{
 					id: "heading5",
-					label: "标题 5",
-					icon: _ant_design_icons.FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "##### ")
+					label: "H5",
+					handler: (v) => toggleHeading(v, 5)
 				},
 				{
 					id: "heading6",
-					label: "标题 6",
-					icon: _ant_design_icons.FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "###### ")
+					label: "H6",
+					handler: (v) => toggleHeading(v, 6)
 				}
 			]
 		},
@@ -657,38 +749,44 @@ function createToolbarConfig(options) {
 			id: "bold",
 			label: "加粗",
 			icon: _ant_design_icons.BoldOutlined,
-			handler: (v) => wrapSelection(v, "**", "**")
+			handler: (v) => toggleWrap(v, "**", "**")
 		},
 		{
 			id: "italic",
 			label: "斜体",
 			icon: _ant_design_icons.ItalicOutlined,
-			handler: (v) => wrapSelection(v, "*", "*")
+			handler: (v) => toggleWrap(v, "*", "*")
 		},
 		{
 			id: "strikethrough",
 			label: "删除线",
 			icon: _ant_design_icons.StrikethroughOutlined,
-			handler: (v) => wrapSelection(v, "~~", "~~")
+			handler: (v) => toggleWrap(v, "~~", "~~")
 		},
 		{
 			id: "underline",
 			label: "下划线",
 			icon: _ant_design_icons.UnderlineOutlined,
-			handler: (v) => wrapSelection(v, "<u>", "</u>")
+			handler: (v) => toggleWrap(v, "<u>", "</u>")
 		},
 		{ separatorBefore: true },
 		{
 			id: "ul",
 			label: "无序列表",
 			icon: _ant_design_icons.UnorderedListOutlined,
-			handler: (v) => insertAtLineStart(v, "- ")
+			handler: (v) => toggleLinePrefix(v, /^(\s*)-(?!\s*\[)\s/, "- ")
 		},
 		{
 			id: "ol",
 			label: "有序列表",
 			icon: _ant_design_icons.OrderedListOutlined,
-			handler: (v) => insertAtLineStart(v, "1. ")
+			handler: (v) => toggleLinePrefix(v, /^(\s*)\d+\.\s/, "1. ")
+		},
+		{
+			id: "checkbox",
+			label: "待办",
+			icon: _ant_design_icons.CheckSquareOutlined,
+			handler: (v) => toggleTaskList(v)
 		},
 		{ separatorBefore: true },
 		{
@@ -1131,6 +1229,9 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 	const schema = componentRegistry.get(typeName);
 	const [formProps, setFormProps] = (0, react.useState)({});
 	const [form] = antd.Form.useForm();
+	const onSaveRef = (0, react.useRef)(onSave);
+	onSaveRef.current = onSave;
+	const dirtyRef = (0, react.useRef)(false);
 	const mergedProps = (0, react.useMemo)(() => {
 		if (!schema) return currentProps;
 		const defaults = {};
@@ -1168,18 +1269,28 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 				...formValues
 			};
 		} catch {}
-		onSave(finalProps);
+		onSaveRef.current(finalProps);
+		dirtyRef.current = false;
+		onClose();
 	};
 	const handleClose = () => {
 		setFormProps({});
+		dirtyRef.current = false;
 		onClose();
 	};
 	if (!schema) return null;
+	const contextSave = (props) => {
+		setFormProps((prev) => ({
+			...prev,
+			...props
+		}));
+		dirtyRef.current = true;
+	};
 	const context = {
 		props: mergedProps,
 		form,
 		onChange: handleDialogChange,
-		onSave
+		onSave: contextSave
 	};
 	const renderDialogContent = () => {
 		if (schema.renderDialog) return schema.renderDialog(context);
@@ -1371,7 +1482,6 @@ var MarkdownEditor_default = (0, react.forwardRef)(function MarkdownEditor({ def
 		setDialogVisible(true);
 	}, []);
 	const handleDialogSave = (0, react.useCallback)((newProps) => {
-		setDialogVisible(false);
 		if (editorView) updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
 	}, [editorView, dialogPropsRange]);
 	const handleDialogClose = (0, react.useCallback)(() => {