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

package/dist/index.js

@@ -6,10 +6,11 @@ import { Decoration, EditorView as EditorView$1, ViewPlugin, WidgetType, keymap
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { markdown } from "@codemirror/lang-markdown";
 import { oneDark } from "@codemirror/theme-one-dark";
+import { syntaxTree } from "@codemirror/language";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import RenderMarkdown, { initHighlighter, languagesCommon } from "remons-render-markdown";
 import "remons-render-markdown/dist/index.css";
-import { BlockOutlined, BoldOutlined, CodeOutlined, DownOutlined, FieldStringOutlined, FontSizeOutlined, FullscreenExitOutlined, FullscreenOutlined, ItalicOutlined, LinkOutlined, MinusOutlined, OrderedListOutlined, PictureOutlined, ReadOutlined, StrikethroughOutlined, TableOutlined, UnderlineOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import { BoldOutlined, CheckSquareOutlined, CodeOutlined, DownOutlined, FontSizeOutlined, FullscreenExitOutlined, FullscreenOutlined, ItalicOutlined, LinkOutlined, MinusOutlined, OrderedListOutlined, PictureOutlined, ReadOutlined, StrikethroughOutlined, TableOutlined, UnderlineOutlined, UnorderedListOutlined, createFromIconfontCN } from "@ant-design/icons";
 //#region src/utils/parseContainer.ts
 /**
 * 解析容器属性 JSON 字符串。
@@ -247,25 +248,36 @@ var containerWidgetPlugin = ViewPlugin.fromClass(class {
 	}
 }, {
 	decorations: (value) => value.decorations,
-	eventHandlers: { click: (event, view) => {
-		const target = event.target;
-		if (target.classList.contains("container-edit-btn")) {
-			if (target.__typeName) {
-				const containers = findContainers(view.state.doc.toString());
-				const buttonPos = view.posAtDOM(target);
-				for (const container of containers) {
-					const headerLine = view.state.doc.lineAt(container.startPos);
-					if (buttonPos >= headerLine.from - 5 && buttonPos <= headerLine.to + 5) {
-						const callback = view.state.facet(containerEditCallback);
-						if (callback) callback(view, container.typeName, container.propsLineFrom, container.propsLineTo, { ...container.props });
-						return true;
+	eventHandlers: {
+		mousedown: (event, view) => {
+			if (event.target.classList.contains("container-edit-btn")) {
+				event.preventDefault();
+				return true;
+			}
+			return false;
+		},
+		click: (event, view) => {
+			const target = event.target;
+			if (target.classList.contains("container-edit-btn")) {
+				event.preventDefault();
+				event.stopPropagation();
+				if (target.__typeName) {
+					const containers = findContainers(view.state.doc.toString());
+					const buttonPos = view.posAtDOM(target);
+					for (const container of containers) {
+						const headerLine = view.state.doc.lineAt(container.startPos);
+						if (buttonPos >= headerLine.from - 5 && buttonPos <= headerLine.to + 5) {
+							const callback = view.state.facet(containerEditCallback);
+							if (callback) callback(view, container.typeName, container.propsLineFrom, container.propsLineTo, { ...container.props });
+							return true;
+						}
 					}
 				}
+				return false;
 			}
 			return false;
 		}
-		return false;
-	} }
+	}
 });
 //#endregion
 //#region src/components/Toolbar/buttons.tsx
@@ -297,6 +309,214 @@ 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 });
+}
+/** Markdown 列表行：缩进 + 列表标记（无序/有序）+ 空白 */
+var LIST_LINE_RE = /^(\s*)([-*+]|\d+\.)([ \t]+)/;
+/** 列表缩进台阶：4 个空格，确保缩进后能被解析为子列表 */
+var LIST_INDENT_WIDTH = 4;
+/** 判断位置是否位于代码块内（代码块内不参与列表缩进逻辑） */
+function isInCodeBlock(state, pos) {
+	let node = syntaxTree(state).resolveInner(pos, 1);
+	while (node) {
+		if (node.name === "FencedCode" || node.name === "CodeBlock") return true;
+		node = node.parent;
+	}
+	return false;
+}
+/**
+* 向上查找同缩进的前一个列表项，返回其序号
+* - 跳过更深的子列表行和空行
+* - 遇到非列表内容或更浅层列表时结束
+*/
+function findPrevSiblingOrder(state, plans, lineNo, indent) {
+	const doc = state.doc;
+	for (let n = lineNo - 1; n >= 1; n--) {
+		const plan = plans.get(n);
+		if (plan) {
+			if (plan.nextIndent === indent) return plan.nextOrder;
+			if (plan.nextIndent < indent) return null;
+			continue;
+		}
+		const text = doc.line(n).text;
+		if (!text.trim()) continue;
+		const m = text.match(LIST_LINE_RE);
+		if (!m) return null;
+		const lineIndent = m[1].length;
+		if (lineIndent === indent) return /^\d+\.$/.test(m[2]) ? parseInt(m[2], 10) : null;
+		if (lineIndent < indent) return null;
+	}
+	return null;
+}
+/**
+* 计算列表行缩进/反缩进的变更
+* - 仅当所有选区行都是列表行时生效，否则返回 null 交给默认缩进行为
+* - 有序列表缩进后重新编号，保证新一级子列表从 1 开始
+*/
+function planListIndent(view, direction) {
+	const { state } = view;
+	const doc = state.doc;
+	const plans = /* @__PURE__ */ new Map();
+	for (const range of state.selection.ranges) {
+		const first = doc.lineAt(range.from).number;
+		const last = doc.lineAt(range.to).number;
+		for (let n = first; n <= last; n++) {
+			if (plans.has(n)) continue;
+			const line = doc.line(n);
+			if (isInCodeBlock(state, line.from)) return null;
+			const m = line.text.match(LIST_LINE_RE);
+			if (!m) return null;
+			const indent = m[1].length;
+			plans.set(n, {
+				indent,
+				nextIndent: direction === 1 ? indent + LIST_INDENT_WIDTH : Math.max(0, indent - LIST_INDENT_WIDTH),
+				order: /^\d+\.$/.test(m[2]) ? parseInt(m[2], 10) : null,
+				nextOrder: null
+			});
+		}
+	}
+	if (plans.size === 0) return null;
+	const ordered = [...plans.entries()].sort((a, b) => a[0] - b[0]);
+	for (const [lineNo, info] of ordered) {
+		if (info.order === null) continue;
+		const prevOrder = findPrevSiblingOrder(state, plans, lineNo, info.nextIndent);
+		info.nextOrder = prevOrder === null ? 1 : prevOrder + 1;
+	}
+	return ordered.map(([lineNo, info]) => {
+		const line = doc.line(lineNo);
+		const m = line.text.match(LIST_LINE_RE);
+		const useNextOrder = (direction === 1 || info.indent > 0) && info.order !== null && info.nextOrder !== null && info.order !== info.nextOrder;
+		return {
+			from: line.from,
+			to: line.from + m[0].length,
+			insert: " ".repeat(info.nextIndent) + (useNextOrder ? `${info.nextOrder}.` : m[2]) + m[3]
+		};
+	});
+}
+/**
+* Tab：列表行缩进一级（4 空格）
+* - 普通行返回 false，继续走默认缩进
+* - 有序列表缩进后重排序号，子列表从 1 开始
+*/
+function indentMarkdownList(view) {
+	const changes = planListIndent(view, 1);
+	if (!changes) return false;
+	view.dispatch({
+		changes,
+		userEvent: "input.indent"
+	});
+	return true;
+}
+/**
+* Shift-Tab：列表行反缩进一级
+* - 普通行返回 false，继续走默认缩进
+* - 有序列表反缩进后并入上一层并重排序号
+*/
+function dedentMarkdownList(view) {
+	const changes = planListIndent(view, -1);
+	if (!changes) return false;
+	view.dispatch({
+		changes,
+		userEvent: "delete.dedent"
+	});
+	return true;
+}
+/**
 * 上传图片
 * @param file - 要上传的文件
 * @param uploadConfig - 上传配置
@@ -443,7 +663,18 @@ var getCodeMirrorExtensions = (opts) => {
 	const extensions = [
 		markdown(),
 		oneDark,
-		keymap.of([...defaultKeymap, indentWithTab]),
+		keymap.of([
+			{
+				key: "Tab",
+				run: indentMarkdownList
+			},
+			{
+				key: "Shift-Tab",
+				run: dedentMarkdownList
+			},
+			...defaultKeymap,
+			indentWithTab
+		]),
 		EditorView$1.lineWrapping,
 		pasteHandler,
 		EditorView$1.baseTheme({
@@ -565,7 +796,24 @@ function SplitPanels({ leftPanel, rightPanel }) {
 	});
 }
 //#endregion
+//#region src/components/Icon/index.tsx
+var Icon = createFromIconfontCN({ scriptUrl: "https://at.alicdn.com/t/c/font_5241307_xoojyr52dqn.js" });
+function IconComponent(type, className) {
+	return /* @__PURE__ */ jsx(Icon, {
+		type: `icon-${type}`,
+		className
+	});
+}
+//#endregion
 //#region src/components/Toolbar/config.ts
+function Quote() {
+	return IconComponent("quote");
+}
+function InlineCode() {
+	return IconComponent("inlinecode");
+}
+/** 未配置图片上传时的提示文案 */
+var UPLOAD_CONFIG_MISSING_MESSAGE = "请先配置图片上传功能";
 /**
 * 创建工具栏配置
 * @param options - 配置选项
@@ -580,39 +828,33 @@ function createToolbarConfig(options) {
 			children: [
 				{
 					id: "heading1",
-					label: "标题 1",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "# ")
+					label: "H1",
+					handler: (v) => toggleHeading(v, 1)
 				},
 				{
 					id: "heading2",
-					label: "标题 2",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "## ")
+					label: "H2",
+					handler: (v) => toggleHeading(v, 2)
 				},
 				{
 					id: "heading3",
-					label: "标题 3",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "### ")
+					label: "H3",
+					handler: (v) => toggleHeading(v, 3)
 				},
 				{
 					id: "heading4",
-					label: "标题 4",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "#### ")
+					label: "H4",
+					handler: (v) => toggleHeading(v, 4)
 				},
 				{
 					id: "heading5",
-					label: "标题 5",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "##### ")
+					label: "H5",
+					handler: (v) => toggleHeading(v, 5)
 				},
 				{
 					id: "heading6",
-					label: "标题 6",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "###### ")
+					label: "H6",
+					handler: (v) => toggleHeading(v, 6)
 				}
 			]
 		},
@@ -621,38 +863,44 @@ function createToolbarConfig(options) {
 			id: "bold",
 			label: "加粗",
 			icon: BoldOutlined,
-			handler: (v) => wrapSelection(v, "**", "**")
+			handler: (v) => toggleWrap(v, "**", "**")
 		},
 		{
 			id: "italic",
 			label: "斜体",
 			icon: ItalicOutlined,
-			handler: (v) => wrapSelection(v, "*", "*")
+			handler: (v) => toggleWrap(v, "*", "*")
 		},
 		{
 			id: "strikethrough",
 			label: "删除线",
 			icon: StrikethroughOutlined,
-			handler: (v) => wrapSelection(v, "~~", "~~")
+			handler: (v) => toggleWrap(v, "~~", "~~")
 		},
 		{
 			id: "underline",
 			label: "下划线",
 			icon: UnderlineOutlined,
-			handler: (v) => wrapSelection(v, "<u>", "</u>")
+			handler: (v) => toggleWrap(v, "<u>", "</u>")
 		},
 		{ separatorBefore: true },
 		{
 			id: "ul",
 			label: "无序列表",
 			icon: UnorderedListOutlined,
-			handler: (v) => insertAtLineStart(v, "- ")
+			handler: (v) => toggleLinePrefix(v, /^(\s*)-(?!\s*\[)\s/, "- ")
 		},
 		{
 			id: "ol",
 			label: "有序列表",
 			icon: OrderedListOutlined,
-			handler: (v) => insertAtLineStart(v, "1. ")
+			handler: (v) => toggleLinePrefix(v, /^(\s*)\d+\.\s/, "1. ")
+		},
+		{
+			id: "checkbox",
+			label: "待办",
+			icon: CheckSquareOutlined,
+			handler: (v) => toggleTaskList(v)
 		},
 		{ separatorBefore: true },
 		{
@@ -663,19 +911,15 @@ function createToolbarConfig(options) {
 		},
 		{
 			id: "image",
-			label: hasUploadConfig ? "图片" : "请配置图片上传地址",
+			label: "图片",
 			icon: PictureOutlined,
-			disabled: !hasUploadConfig,
-			handler: hasUploadConfig ? (v) => uploadImage(v, {
-				uploadUrl: options?.uploadUrl,
-				onUploadImage: options?.onUploadImage
-			}) : void 0
+			handler: hasUploadConfig && options ? (v) => uploadImage(v, options) : () => message.warning(UPLOAD_CONFIG_MISSING_MESSAGE)
 		},
 		{ separatorBefore: true },
 		{
 			id: "code",
 			label: "行内代码",
-			icon: FieldStringOutlined,
+			icon: InlineCode,
 			handler: (v) => wrapSelection(v, "`", "`")
 		},
 		{
@@ -696,7 +940,7 @@ function createToolbarConfig(options) {
 		{
 			id: "quote",
 			label: "引用",
-			icon: BlockOutlined,
+			icon: Quote,
 			handler: (v) => insertAtLineStart(v, "> ")
 		},
 		{
@@ -767,10 +1011,7 @@ function ToolbarItemRenderer({ item, onClick }) {
 					className: "toolbar-button",
 					type: "text",
 					size: "small",
-					children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx(DownOutlined, { style: {
-						marginLeft: 2,
-						fontSize: 10
-					} })]
+					children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx(DownOutlined, { style: { fontSize: 10 } })]
 				})
 			})
 		})
@@ -1095,6 +1336,9 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 	const schema = componentRegistry.get(typeName);
 	const [formProps, setFormProps] = useState({});
 	const [form] = Form.useForm();
+	const onSaveRef = useRef(onSave);
+	onSaveRef.current = onSave;
+	const dirtyRef = useRef(false);
 	const mergedProps = useMemo(() => {
 		if (!schema) return currentProps;
 		const defaults = {};
@@ -1132,18 +1376,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);
@@ -1229,38 +1483,55 @@ function useFullscreen() {
 //#endregion
 //#region src/hooks/useScrollSync.ts
 /**
-* 滚动同步 Hook
-* 将源滚动容器的滚动位置同步到目标预览容器
+* 双向滚动同步 Hook
+* 编辑器与预览区互相同步滚动位置（基于比例）
+* 使用 síncing 锁防止双向循环触发
 */
 function useScrollSync(sourceRef, targetRef) {
 	const rafIdRef = useRef(null);
+	const syncingRef = useRef(null);
+	const syncScroll = (from, fromEl, toEl) => {
+		if (rafIdRef.current) return;
+		rafIdRef.current = requestAnimationFrame(() => {
+			const fromScrollHeight = fromEl.scrollHeight - fromEl.clientHeight;
+			if (fromScrollHeight <= 0) {
+				rafIdRef.current = null;
+				syncingRef.current = null;
+				return;
+			}
+			const ratio = fromEl.scrollTop / fromScrollHeight;
+			const toScrollHeight = toEl.scrollHeight - toEl.clientHeight;
+			if (toScrollHeight > 0) {
+				syncingRef.current = from;
+				toEl.scrollTop = ratio * toScrollHeight;
+				requestAnimationFrame(() => {
+					syncingRef.current = null;
+				});
+			}
+			rafIdRef.current = null;
+		});
+	};
 	useEffect(() => {
 		const source = sourceRef.current;
 		const target = targetRef.current;
 		if (!source || !target) return;
-		const listener = () => {
-			if (rafIdRef.current) return;
-			rafIdRef.current = requestAnimationFrame(() => {
-				const s = sourceRef.current;
-				const t = targetRef.current;
-				if (!s || !t) {
-					rafIdRef.current = null;
-					return;
-				}
-				const sourceScrollHeight = s.scrollHeight - s.clientHeight;
-				if (sourceScrollHeight <= 0) {
-					rafIdRef.current = null;
-					return;
-				}
-				const ratio = s.scrollTop / sourceScrollHeight;
-				const targetScrollHeight = t.scrollHeight - t.clientHeight;
-				if (targetScrollHeight > 0) t.scrollTop = ratio * targetScrollHeight;
-				rafIdRef.current = null;
-			});
+		const onSourceScroll = () => {
+			if (syncingRef.current !== null) return;
+			const s = sourceRef.current;
+			const t = targetRef.current;
+			syncScroll("source", s, t);
 		};
-		source.addEventListener("scroll", listener, { passive: true });
+		const onTargetScroll = () => {
+			if (syncingRef.current !== null) return;
+			const s = sourceRef.current;
+			const t = targetRef.current;
+			syncScroll("target", t, s);
+		};
+		source.addEventListener("scroll", onSourceScroll, { passive: true });
+		target.addEventListener("scroll", onTargetScroll, { passive: true });
 		return () => {
-			source.removeEventListener("scroll", listener);
+			source.removeEventListener("scroll", onSourceScroll);
+			target.removeEventListener("scroll", onTargetScroll);
 			if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
 		};
 	}, [sourceRef, targetRef]);
@@ -1318,7 +1589,6 @@ var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue =
 		setDialogVisible(true);
 	}, []);
 	const handleDialogSave = useCallback((newProps) => {
-		setDialogVisible(false);
 		if (editorView) updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
 	}, [editorView, dialogPropsRange]);
 	const handleDialogClose = useCallback(() => {