remons-markdown-editor 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { App, 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 { EditorState, Facet, StateEffect } from "@codemirror/state";
 import { Decoration, EditorView as EditorView$1, ViewPlugin, WidgetType, keymap } from "@codemirror/view";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { markdown } from "@codemirror/lang-markdown";
@@ -1274,8 +1274,25 @@ function parseContainerProps(line) {
 	}
 }
 /**
+* 解析行首的引用（blockquote）嵌套前缀。
+* markdown-it 解析引用内部内容时会剥掉一层 "> "，因此 "> :::badge" 在渲染侧
+* 等同于 ":::badge"；编辑器侧需同样识别，否则嵌套引用的容器匹配不到标签。
+* 返回 [前缀文本（含 "> " 及尾随空格）, 去掉前缀后的内容]，无前缀时返回 ['', 原文本]。
+*/
+function splitQuotePrefix(line) {
+	const m = line.match(/^((?:>\s*)+)(\S.*)$/);
+	if (!m) return ["", line];
+	return [m[1], m[2]];
+}
+/** 引用嵌套深度（"> > x" 为 2，无前缀为 0） */
+function quoteDepth(prefix) {
+	return (prefix.match(/>/g) ?? []).length;
+}
+/**
 * 在编辑器文档中查找容器块。
 * 单次遍历 + 预累计行偏移，复杂度 O(行数)。
+* 支持整体嵌套在引用中的容器：头行、属性行、闭合行需具有相同的 "> " 前缀深度，
+* 避免跨引用层级错误配对。闭合 ::: 改为按栈配对，嵌套容器不会被内层闭合误截断。
 */
 function findContainers(docText) {
 	const containers = [];
@@ -1286,34 +1303,53 @@ function findContainers(docText) {
 		offsets[i] = pos;
 		pos += lines[i].length + 1;
 	}
+	const stack = [];
 	for (let i = 0; i < lines.length; i++) {
-		const match = lines[i].match(/^:::(\w+)$/);
+		const [prefix, body] = splitQuotePrefix(lines[i]);
+		const depth = quoteDepth(prefix);
+		if (/^:::$/.test(body)) {
+			let top = stack.length - 1;
+			while (top >= 0 && stack[top].depth !== depth) top--;
+			if (top >= 0) {
+				stack[top].block.endPos = offsets[i];
+				stack.length = top;
+			}
+			continue;
+		}
+		const match = body.match(/^:::(\w+)$/);
 		if (!match) continue;
 		const typeName = match[1];
 		const headerPos = offsets[i];
 		let props = {};
 		let propsLineFrom = 0;
 		let propsLineTo = 0;
-		const propsLine = lines[i + 1];
-		if (propsLine && propsLine.trim().startsWith("{") && propsLine.trim().endsWith("}")) {
-			props = parseContainerProps(propsLine);
-			propsLineFrom = offsets[i + 1];
-			propsLineTo = propsLineFrom + propsLine.length;
-		}
-		let endPos = 0;
-		for (let j = i + 1; j < lines.length; j++) if (lines[j].trim() === ":::") {
-			endPos = offsets[j];
-			i = j;
-			break;
+		let propsQuotePrefix = "";
+		const nextLine = lines[i + 1];
+		if (nextLine) {
+			const [nextPrefix, nextBody] = splitQuotePrefix(nextLine);
+			if ((quoteDepth(nextPrefix) === depth || nextPrefix === "") && nextBody.trimStart().startsWith("{") && nextBody.trimEnd().endsWith("}")) {
+				props = parseContainerProps(nextBody);
+				propsLineFrom = offsets[i + 1];
+				propsLineTo = propsLineFrom + nextLine.length;
+				propsQuotePrefix = nextPrefix;
+				i += 1;
+			}
 		}
-		containers.push({
+		const block = {
 			startPos: headerPos,
 			typeName,
 			propsLineFrom,
 			propsLineTo,
 			props,
-			endPos,
-			registered: componentRegistry.has(typeName)
+			endPos: 0,
+			registered: componentRegistry.has(typeName),
+			quotePrefix: prefix,
+			propsQuotePrefix
+		};
+		containers.push(block);
+		stack.push({
+			block,
+			depth
 		});
 	}
 	return containers;
@@ -1321,6 +1357,14 @@ function findContainers(docText) {
 //#endregion
 //#region src/components/Editor/containerWidget.ts
 /**
+* 唤醒容器装饰重建的状态 effect（不改变文档）。
+* 编辑按钮是否展示取决于容器类型是否已注册，而宿主常在编辑器挂载之后才
+* 通过 useRegisterToolbar 异步注册 schema；注册不是 CodeMirror 事务，默认不会触发
+* ViewPlugin.update，导致初始化时烘焙的 registered=false 无法刷新（需手动改一个字才出现）。
+* 宿主在注册中心版本变化时 dispatch 本 effect，驱动插件重新求值 registered。
+*/
+var refreshContainers = StateEffect.define();
+/**
 * 自定义 facet 用于传递编辑回调
 */
 var containerEditCallback = Facet.define({ combine: (values) => values.length ? values[values.length - 1] : null });
@@ -1333,18 +1377,20 @@ var ContainerHeaderWidget = class extends WidgetType {
 	typeName;
 	containerIndex;
 	registered;
-	constructor(typeName, containerIndex, registered) {
+	quotePrefix;
+	constructor(typeName, containerIndex, registered, quotePrefix) {
 		super();
 		this.typeName = typeName;
 		this.containerIndex = containerIndex;
 		this.registered = registered;
+		this.quotePrefix = quotePrefix;
 	}
 	toDOM() {
 		const container = document.createElement("span");
 		container.className = "container-widget-header";
 		const text = document.createElement("span");
 		text.className = "container-widget-text";
-		text.textContent = `:::${this.typeName}`;
+		text.textContent = `${this.quotePrefix}:::${this.typeName}`;
 		container.appendChild(text);
 		if (this.registered) {
 			const button = document.createElement("button");
@@ -1358,7 +1404,7 @@ var ContainerHeaderWidget = class extends WidgetType {
 		return container;
 	}
 	eq(other) {
-		return this.typeName === other.typeName && this.containerIndex === other.containerIndex && this.registered === other.registered;
+		return this.typeName === other.typeName && this.containerIndex === other.containerIndex && this.registered === other.registered && this.quotePrefix === other.quotePrefix;
 	}
 	ignoreEvent() {
 		return false;
@@ -1366,38 +1412,46 @@ var ContainerHeaderWidget = class extends WidgetType {
 };
 /**
 * 只读的容器属性行 Widget（显示 { key: value, ... }）
+* 嵌套在引用中时原始行带 "> " 前缀，展示时剔除，与头行 widget 风格一致
 */
 var ContainerPropsWidget = class extends WidgetType {
 	propsText;
-	constructor(propsText) {
+	quotePrefix;
+	constructor(propsText, quotePrefix) {
 		super();
 		this.propsText = propsText;
+		this.quotePrefix = quotePrefix;
 	}
 	toDOM() {
 		const span = document.createElement("span");
 		span.className = "container-widget-props";
-		span.textContent = this.propsText;
+		span.textContent = this.propsText.startsWith(this.quotePrefix) ? this.propsText.slice(this.quotePrefix.length) : this.propsText;
 		return span;
 	}
 	eq(other) {
-		return this.propsText === other.propsText;
+		return this.propsText === other.propsText && this.quotePrefix === other.quotePrefix;
 	}
 	ignoreEvent() {
 		return false;
 	}
 };
 /**
-* 只读的容器结束行 Widget（显示 :::）
+* 只读的容器结束行 Widget（显示 :::，嵌套引用时保留 "> " 前缀）
 */
 var ContainerCloseWidget = class extends WidgetType {
+	text;
+	constructor(text) {
+		super();
+		this.text = text;
+	}
 	toDOM() {
 		const span = document.createElement("span");
 		span.className = "container-widget-text";
-		span.textContent = ":::";
+		span.textContent = this.text;
 		return span;
 	}
-	eq() {
-		return true;
+	eq(other) {
+		return this.text === other.text;
 	}
 	ignoreEvent() {
 		return false;
@@ -1415,14 +1469,14 @@ function findContainerDecorations(state) {
 		decorations.push({
 			from: headerLine.from,
 			to: headerLine.to,
-			value: Decoration.replace({ widget: new ContainerHeaderWidget(container.typeName, index, container.registered) })
+			value: Decoration.replace({ widget: new ContainerHeaderWidget(container.typeName, index, container.registered, container.quotePrefix ?? "") })
 		});
 		if (container.propsLineFrom > 0 && container.propsLineTo > 0) {
 			const propsLine = state.doc.lineAt(container.propsLineFrom);
 			decorations.push({
 				from: propsLine.from,
 				to: propsLine.to,
-				value: Decoration.replace({ widget: new ContainerPropsWidget(propsLine.text) })
+				value: Decoration.replace({ widget: new ContainerPropsWidget(propsLine.text, container.quotePrefix ?? "") })
 			});
 		}
 		if (container.endPos > 0) {
@@ -1430,10 +1484,11 @@ function findContainerDecorations(state) {
 			decorations.push({
 				from: endLine.from,
 				to: endLine.to,
-				value: Decoration.replace({ widget: new ContainerCloseWidget() })
+				value: Decoration.replace({ widget: new ContainerCloseWidget(endLine.text) })
 			});
 		}
 	});
+	decorations.sort((a, b) => a.from - b.from || b.to - a.to);
 	return decorations;
 }
 /**
@@ -1462,11 +1517,19 @@ function handleEditButtonClick(event, view) {
 */
 var containerWidgetPlugin = ViewPlugin.fromClass(class {
 	decorations;
+	/** 上次构建装饰时的注册中心版本，用于感知异步注册（不能标 private，否则导出匿名类的 dts 报 TS4094） */
+	registryVersion;
 	constructor(view) {
+		this.registryVersion = componentRegistry.getVersion();
 		this.decorations = Decoration.set(findContainerDecorations(view.state), true);
 	}
 	update(update) {
-		if (update.docChanged) this.decorations = Decoration.set(findContainerDecorations(update.state), true);
+		const registryChanged = componentRegistry.getVersion() !== this.registryVersion;
+		const woken = update.transactions.some((tr) => tr.effects.some((e) => e.is(refreshContainers)));
+		if (update.docChanged || registryChanged || woken) {
+			this.registryVersion = componentRegistry.getVersion();
+			this.decorations = Decoration.set(findContainerDecorations(update.state), true);
+		}
 	}
 }, {
 	decorations: (value) => value.decorations,
@@ -2857,13 +2920,17 @@ function renderFormItemComponent(field) {
 }
 /**
 * 根据 fields 自动生成 Form.Item 列表
+* 初始值走 <Form initialValues> + 按次打开的 key：
+* initialValues 在字段实体注册时消费，天然避开“Modal 首次挂载前 setFieldsValue 落空”的时序竞态；
+* key 每次打开变化触发 Form 重挂载，确保切换到不同容器时重新取值。
 */
-function renderAutoForm(form, fields) {
+function renderAutoForm(form, fields, initialValues, initKey) {
 	if (!fields || fields.length === 0) return null;
 	return /* @__PURE__ */ jsx(Form, {
 		form,
 		layout: "vertical",
 		preserve: false,
+		initialValues,
 		children: fields.map((field) => {
 			if (!field.componentType) return null;
 			const formItemProps = {
@@ -2877,7 +2944,7 @@ function renderAutoForm(form, fields) {
 				children: renderFormItemComponent(field)
 			}, field.key);
 		})
-	});
+	}, initKey);
 }
 /** 字符串形式的历史属性值（'true'/'false'）还原为布尔，供 Switch 初始化 */
 function toFormInitialValue(field, value) {
@@ -2916,7 +2983,7 @@ function normalizeValue(field, value) {
 * 属性编辑弹窗组件
 * 根据组件 schema 的 renderDialog 函数渲染弹窗内容
 */
-function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
+function EditDialog({ visible, typeName, currentProps, initKey, onSave, onClose }) {
 	const schema = componentRegistry.get(typeName);
 	const [formProps, setFormProps] = useState({});
 	const [form] = Form.useForm();
@@ -2932,16 +2999,19 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 			...currentProps
 		};
 	}, [schema, currentProps]);
+	const initialValues = useMemo(() => {
+		const initial = {};
+		for (const [key, value] of Object.entries(mergedProps)) {
+			const field = schema?.fields?.find((f) => f.key === key);
+			const formValue = toFormInitialValue(field ?? { key }, value);
+			if (formValue !== void 0) initial[key] = formValue;
+		}
+		return initial;
+	}, [mergedProps, schema]);
 	useEffect(() => {
 		if (visible) {
 			setFormProps({});
-			const initial = {};
-			for (const [key, value] of Object.entries(mergedProps)) {
-				const field = schema?.fields?.find((f) => f.key === key);
-				const formValue = toFormInitialValue(field ?? { key }, value);
-				if (formValue !== void 0) initial[key] = formValue;
-			}
-			form.setFieldsValue(initial);
+			form.setFieldsValue(initialValues);
 			dirtyRef.current = false;
 		}
 	}, [visible, form]);
@@ -2996,7 +3066,7 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
 	};
 	const renderDialogContent = () => {
 		if (schema.renderDialog) return schema.renderDialog(context);
-		if (schema.fields?.some((f) => f.componentType) && schema.fields) return renderAutoForm(form, schema.fields);
+		if (schema.fields?.some((f) => f.componentType) && schema.fields) return renderAutoForm(form, schema.fields, initialValues, initKey);
 		return null;
 	};
 	return /* @__PURE__ */ jsx(Modal, {
@@ -3023,19 +3093,20 @@ function writeContainerProps(props) {
 * 更新编辑器文档中的容器属性。
 * 已有属性行则整行替换；没有属性行则在容器头行后插入一行。
 * @param headerPos 容器头行（:::type）任意位置，用于无属性行时定位插入点
+* @param quotePrefix 容器所处的引用前缀（如 "> "），嵌套在引用中时插入的属性行需保持一致
 */
-function updateContainerProps(view, headerPos, propsLineFrom, propsLineTo, newProps) {
+function updateContainerProps(view, headerPos, propsLineFrom, propsLineTo, newProps, quotePrefix = "") {
 	const newPropsLine = writeContainerProps(newProps);
 	if (propsLineTo > propsLineFrom) view.dispatch({ changes: {
 		from: propsLineFrom,
 		to: propsLineTo,
-		insert: newPropsLine
+		insert: `${quotePrefix}${newPropsLine}`
 	} });
 	else {
 		const headerLine = view.state.doc.lineAt(headerPos);
 		view.dispatch({ changes: {
 			from: headerLine.to,
-			insert: `\n${newPropsLine}`
+			insert: `\n${quotePrefix}${newPropsLine}`
 		} });
 	}
 }
@@ -3160,6 +3231,7 @@ var MarkdownEditorInner = ({ defaultValue = "", value, onChange, showPreview = t
 	const [dialogVisible, setDialogVisible] = useState(false);
 	const [dialogTypeName, setDialogTypeName] = useState("");
 	const [dialogContainer, setDialogContainer] = useState(null);
+	const [dialogSeq, setDialogSeq] = useState(0);
 	const app = App.useApp();
 	const notify = useCallback((type, text) => {
 		if (onNotify) {
@@ -3179,6 +3251,9 @@ var MarkdownEditorInner = ({ defaultValue = "", value, onChange, showPreview = t
 	}, [onChange]);
 	useImperativeHandle(ref, () => ({ getContent: () => content }), [content]);
 	const registryVersion = useRegistryVersion();
+	useEffect(() => {
+		editorView?.dispatch({ effects: refreshContainers.of(null) });
+	}, [registryVersion, editorView]);
 	const extraToolbarItems = useMemo(() => {
 		const merged = /* @__PURE__ */ new Map();
 		for (const schema of componentRegistry.getAll()) merged.set(schema.name, schema);
@@ -3212,10 +3287,11 @@ var MarkdownEditorInner = ({ defaultValue = "", value, onChange, showPreview = t
 	const handleEditContainer = useCallback((_view, container) => {
 		setDialogTypeName(container.typeName);
 		setDialogContainer(container);
+		setDialogSeq((seq) => seq + 1);
 		setDialogVisible(true);
 	}, []);
 	const handleDialogSave = useCallback((newProps) => {
-		if (editorView && dialogContainer) updateContainerProps(editorView, dialogContainer.startPos, dialogContainer.propsLineFrom, dialogContainer.propsLineTo, newProps);
+		if (editorView && dialogContainer) updateContainerProps(editorView, dialogContainer.startPos, dialogContainer.propsLineFrom, dialogContainer.propsLineTo, newProps, dialogContainer.quotePrefix);
 	}, [editorView, dialogContainer]);
 	const handleDialogClose = useCallback(() => {
 		setDialogVisible(false);
@@ -3252,6 +3328,7 @@ var MarkdownEditorInner = ({ defaultValue = "", value, onChange, showPreview = t
 				visible: dialogVisible,
 				typeName: dialogTypeName,
 				currentProps: dialogContainer?.props ?? {},
+				initKey: dialogSeq,
 				onSave: handleDialogSave,
 				onClose: handleDialogClose
 			})