@mce/comments 0.24.4

package/dist/CommentLayer.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.css

@@ -0,0 +1,185 @@
+.m-comments {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.m-comments__catcher {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13,16H20V4H4V16H10Z' fill='black' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 10 26, copy;
+}
+.m-comments__pin {
+  position: absolute;
+  z-index: 10;
+  transform: translate(0, -100%);
+  pointer-events: auto;
+  width: 28px;
+  height: 28px;
+  border: 2px solid #fff;
+  border-radius: 50% 50% 50% 2px;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+.m-comments__pin--active {
+  outline: 2px solid rgba(var(--m-theme-primary), 0.6);
+  outline-offset: 1px;
+}
+.m-comments__pin-count {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 3px;
+  border-radius: 8px;
+  background: rgb(var(--m-theme-primary));
+  color: rgb(var(--m-theme-on-primary));
+  font-size: 0.5625rem;
+  line-height: 15px;
+  text-align: center;
+}
+.m-comments__panel {
+  position: absolute;
+  z-index: 11;
+  pointer-events: auto;
+  width: 280px;
+  background: rgb(var(--m-theme-surface));
+  color: rgb(var(--m-theme-on-surface));
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(var(--m-theme-on-surface), 0.06);
+  overflow: hidden;
+}
+.m-comments__close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: rgba(var(--m-theme-on-surface), 0.45);
+  cursor: pointer;
+}
+.m-comments__close:hover {
+  background: rgba(var(--m-theme-on-surface), 0.08);
+  color: rgba(var(--m-theme-on-surface), 0.8);
+}
+.m-comments__list {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 14px 12px 4px;
+}
+.m-comments__item {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.m-comments__avatar {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-comments__bubble {
+  flex: 1;
+  min-width: 0;
+}
+.m-comments__meta {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.m-comments__name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.m-comments__time {
+  font-size: 0.6875rem;
+  color: rgba(var(--m-theme-on-surface), 0.45);
+}
+.m-comments__text {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.m-comments__reply {
+  padding: 4px 12px 8px;
+}
+.m-comments__input, .m-comments__textarea {
+  width: 100%;
+  border: 1px solid rgba(var(--m-theme-on-surface), 0.14);
+  border-radius: 8px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 8px 10px;
+  outline: none;
+  box-sizing: border-box;
+}
+.m-comments__input:focus, .m-comments__textarea:focus {
+  border-color: rgb(var(--m-theme-primary));
+}
+.m-comments__textarea {
+  resize: none;
+  height: 64px;
+}
+.m-comments__panel--draft {
+  padding: 30px 10px 10px;
+}
+.m-comments__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+.m-comments__panel--draft .m-comments__actions {
+  padding: 8px 0 0;
+}
+.m-comments__btn {
+  border: 1px solid rgba(var(--m-theme-on-surface), 0.14);
+  background: none;
+  color: inherit;
+  border-radius: 7px;
+  padding: 0 12px;
+  height: 30px;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.m-comments__btn:not(.m-comments__btn--primary):hover {
+  background: rgba(var(--m-theme-on-surface), 0.05);
+  border-color: rgba(var(--m-theme-on-surface), 0.24);
+}
+.m-comments__btn--primary {
+  border: none;
+  background: rgb(var(--m-theme-primary));
+  color: rgb(var(--m-theme-on-primary));
+  font-weight: 600;
+}
+.m-comments__btn--primary:hover {
+  filter: brightness(0.92);
+}
+.m-comments__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { plugin } from './plugin';
+export * from './plugin';
+export * from './useComments';
+export default plugin;

package/dist/index.js

@@ -0,0 +1,485 @@
+import { definePlugin, useEditor } from "mce";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, toDisplayString, unref, vModelText, watch, withDirectives, withKeys, withModifiers } from "vue";
+//#region src/useComments.ts
+function uid(prefix) {
+	return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+}
+/**
+* 评论数据层：评论作为元素能力存于 `element.comments`（idoc CommentThread[]），
+* 经 modern-canvas 的 Element2DComments + mce CRDT 逐线程同步。
+* - 读：遍历文档树聚合各节点的 comments → 扁平线程视图（含所属 node）。
+* - 写：按节点 per-thread `setProperty(threadId, thread)`，保留逐线程并发合并。
+* - 位置：线程 offset 为元素局部坐标，渲染时经元素世界矩阵还原。
+*/
+function createCommentsStore(editor) {
+	const { camera, root } = editor;
+	const tick = ref(0);
+	function bump() {
+		tick.value++;
+	}
+	let detachUpdate;
+	function bindUpdate() {
+		detachUpdate?.();
+		const ydoc = root.value._yDoc;
+		ydoc.on("update", bump);
+		detachUpdate = () => ydoc.off("update", bump);
+	}
+	bindUpdate();
+	editor.on("docSet", bindUpdate);
+	onScopeDispose(() => {
+		detachUpdate?.();
+		editor.off("docSet", bindUpdate);
+	});
+	function collect(node, out) {
+		const threads = node?.comments?.toJSON?.();
+		if (threads?.length) threads.forEach((t) => {
+			out.push({
+				node,
+				id: t.id,
+				offset: t.offset ?? {
+					x: 0,
+					y: 0
+				},
+				resolved: Boolean(t.resolved),
+				messages: t.messages ?? []
+			});
+		});
+		node?.children?.forEach((child) => collect(child, out));
+	}
+	const threads = computed(() => {
+		tick.value;
+		const out = [];
+		collect(root.value, out);
+		return out.sort((a, b) => (a.messages[0]?.createdAt ?? 0) - (b.messages[0]?.createdAt ?? 0));
+	});
+	function author() {
+		const u = editor.presence?.localUser?.value;
+		return {
+			name: u?.name || "我",
+			color: u?.color || "#1C7ED6",
+			id: u?.id
+		};
+	}
+	function threadsOf(node) {
+		return node?.comments?.toJSON?.() ?? [];
+	}
+	function addThread(node, offset, body) {
+		if (!node?.comments?.setProperty) return "";
+		const id = uid("t");
+		node.comments.setProperty(id, {
+			id,
+			offset,
+			resolved: false,
+			messages: [{
+				id: uid("m"),
+				author: author(),
+				body,
+				createdAt: Date.now()
+			}]
+		});
+		bump();
+		return id;
+	}
+	function reply(node, threadId, body) {
+		const t = threadsOf(node).find((x) => x.id === threadId);
+		if (!t || !node?.comments?.setProperty) return;
+		node.comments.setProperty(threadId, {
+			...t,
+			messages: [...t.messages ?? [], {
+				id: uid("m"),
+				author: author(),
+				body,
+				createdAt: Date.now()
+			}]
+		});
+		bump();
+	}
+	function resolve(node, threadId, resolved) {
+		const t = threadsOf(node).find((x) => x.id === threadId);
+		if (!t) return;
+		node.comments.setProperty(threadId, {
+			...t,
+			resolved
+		});
+		bump();
+	}
+	function remove(node, threadId) {
+		node.comments.setProperty(threadId, void 0);
+		bump();
+	}
+	function toScreen(p) {
+		const { zoom, position } = camera.value;
+		return {
+			x: p.x * zoom.x - position.x,
+			y: p.y * zoom.y - position.y
+		};
+	}
+	function toWorld(p) {
+		const { zoom, position } = camera.value;
+		return {
+			x: (p.x + position.x) / zoom.x,
+			y: (p.y + position.y) / zoom.y
+		};
+	}
+	return {
+		threads,
+		addThread,
+		reply,
+		resolve,
+		remove,
+		toScreen,
+		toWorld
+	};
+}
+/** 组件内读取评论数据层。 */
+function useComments() {
+	const api = useEditor().comments;
+	if (!api) throw new Error("[mce] comments plugin is not installed");
+	return api;
+}
+//#endregion
+//#region src/CommentLayer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-comments" };
+var _hoisted_2 = ["title", "onClick"];
+var _hoisted_3 = {
+	key: 0,
+	class: "m-comments__pin-count"
+};
+var _hoisted_4 = ["title"];
+var _hoisted_5 = { class: "m-comments__list" };
+var _hoisted_6 = { class: "m-comments__bubble" };
+var _hoisted_7 = { class: "m-comments__meta" };
+var _hoisted_8 = { class: "m-comments__name" };
+var _hoisted_9 = { class: "m-comments__time" };
+var _hoisted_10 = { class: "m-comments__text" };
+var _hoisted_11 = { class: "m-comments__reply" };
+var _hoisted_12 = ["placeholder"];
+var _hoisted_13 = { class: "m-comments__actions" };
+var _hoisted_14 = ["title"];
+var _hoisted_15 = ["placeholder", "onKeydown"];
+var _hoisted_16 = { class: "m-comments__actions" };
+var _hoisted_17 = ["disabled"];
+//#endregion
+//#region src/CommentLayer.vue
+var CommentLayer_default = /* @__PURE__ */ defineComponent({
+	__name: "CommentLayer",
+	setup(__props) {
+		const { activeTool, activateTool, drawboardAabb, getAabb, root, t } = useEditor();
+		const comments = useComments();
+		const isComment = computed(() => activeTool.value?.name === "comment");
+		const transformTick = ref(0);
+		let unsubs = [];
+		function resubscribe() {
+			unsubs.forEach((u) => u());
+			unsubs = [];
+			const seen = /* @__PURE__ */ new Set();
+			comments.threads.value.filter((th) => !th.resolved).forEach((th) => {
+				const node = th.node;
+				if (!node?.on || seen.has(node)) return;
+				seen.add(node);
+				const cb = () => {
+					transformTick.value++;
+				};
+				node.on("updateGlobalTransform", cb);
+				unsubs.push(() => node.off("updateGlobalTransform", cb));
+			});
+		}
+		watch(() => comments.threads.value.filter((th) => !th.resolved).map((th) => th.node?.id).join(","), () => nextTick(resubscribe), { immediate: true });
+		onBeforeUnmount(() => unsubs.forEach((u) => u()));
+		/** 线程 → 画板屏幕坐标：所属元素局部 offset 经世界矩阵还原。读 transformTick 建立变换依赖。 */
+		function anchorScreen(thread) {
+			transformTick.value;
+			const node = thread.node;
+			if (!node?.toGlobal) return null;
+			return comments.toScreen(node.toGlobal(thread.offset));
+		}
+		/** 命中：世界坐标落在哪个元素内（取最上层），无则归到根；返回所属节点 + 其局部 offset。 */
+		function ownerAt(world) {
+			let hit;
+			const visit = (node) => {
+				node.children?.forEach((child) => {
+					const ab = getAabb(child);
+					if (ab.width && ab.height && ab.contains(world)) hit = child;
+					visit(child);
+				});
+			};
+			visit(root.value);
+			const node = hit ?? root.value;
+			const local = node.toLocal ? node.toLocal(world) : world;
+			return {
+				node,
+				offset: {
+					x: local.x,
+					y: local.y
+				}
+			};
+		}
+		const pins = computed(() => comments.threads.value.filter((th) => !th.resolved).map((th) => ({
+			thread: th,
+			screen: anchorScreen(th)
+		})).filter((p) => Boolean(p.screen)));
+		const activeId = ref();
+		const activeThread = computed(() => comments.threads.value.find((th) => th.id === activeId.value));
+		const activePos = computed(() => activeThread.value ? anchorScreen(activeThread.value) : null);
+		const replyText = ref("");
+		const draft = ref();
+		const draftPos = computed(() => draft.value ? comments.toScreen(draft.value.world) : null);
+		const draftInput = ref();
+		function clientToDrawboard(e) {
+			return {
+				x: e.clientX - drawboardAabb.value.left,
+				y: e.clientY - drawboardAabb.value.top
+			};
+		}
+		function onCatcherDown(e) {
+			if (activeId.value) {
+				activeId.value = void 0;
+				return;
+			}
+			if (draft.value) {
+				draft.value = void 0;
+				return;
+			}
+			const world = comments.toWorld(clientToDrawboard(e));
+			const { node, offset } = ownerAt(world);
+			draft.value = {
+				node,
+				offset,
+				world,
+				text: ""
+			};
+			nextTick(() => draftInput.value?.focus());
+		}
+		function submitDraft() {
+			const d = draft.value;
+			if (!d || !d.text.trim()) return;
+			const id = comments.addThread(d.node, d.offset, d.text.trim());
+			draft.value = void 0;
+			if (id) activeId.value = id;
+		}
+		function openThread(id) {
+			draft.value = void 0;
+			activeId.value = activeId.value === id ? void 0 : id;
+			replyText.value = "";
+		}
+		function submitReply() {
+			const th = activeThread.value;
+			if (!th || !replyText.value.trim()) return;
+			comments.reply(th.node, th.id, replyText.value.trim());
+			replyText.value = "";
+		}
+		function toggleResolve() {
+			const th = activeThread.value;
+			if (!th) return;
+			comments.resolve(th.node, th.id, !th.resolved);
+			activeId.value = void 0;
+		}
+		function removeThread() {
+			const th = activeThread.value;
+			if (!th) return;
+			comments.remove(th.node, th.id);
+			activeId.value = void 0;
+		}
+		function initial(name) {
+			return (name || "?").trim().charAt(0).toUpperCase() || "?";
+		}
+		function fmtTime(ts) {
+			if (!ts) return "";
+			const d = new Date(ts);
+			const p = (n) => String(n).padStart(2, "0");
+			return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+		}
+		function onKeydown(e) {
+			if (e.key !== "Escape") return;
+			if (draft.value) draft.value = void 0;
+			else if (activeId.value) activeId.value = void 0;
+			else if (isComment.value) activateTool(void 0);
+			else return;
+			e.stopPropagation();
+		}
+		onMounted(() => window.addEventListener("keydown", onKeydown, true));
+		onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown, true));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				isComment.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "m-comments__catcher",
+					onPointerdown: withModifiers(onCatcherDown, ["self"])
+				}, null, 32)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(pins.value, (p) => {
+					return openBlock(), createElementBlock("button", {
+						key: p.thread.id,
+						type: "button",
+						class: normalizeClass(["m-comments__pin", { "m-comments__pin--active": p.thread.id === activeId.value }]),
+						style: normalizeStyle({
+							left: `${p.screen.x}px`,
+							top: `${p.screen.y}px`,
+							backgroundColor: p.thread.messages[0]?.author?.color ?? "#1C7ED6"
+						}),
+						title: p.thread.messages[0]?.author?.name,
+						onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+						onClick: withModifiers(($event) => openThread(p.thread.id), ["stop"])
+					}, [createTextVNode(toDisplayString(initial(p.thread.messages[0]?.author?.name)) + " ", 1), p.thread.messages.length > 1 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(p.thread.messages.length), 1)) : createCommentVNode("", true)], 46, _hoisted_2);
+				}), 128)),
+				activeThread.value && activePos.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "m-comments__panel",
+					style: normalizeStyle({
+						left: `${activePos.value.x + 16}px`,
+						top: `${activePos.value.y}px`
+					}),
+					onPointerdown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+				}, [
+					createElementVNode("button", {
+						type: "button",
+						class: "m-comments__close",
+						title: unref(t)("comment:close"),
+						onClick: _cache[1] || (_cache[1] = ($event) => activeId.value = void 0)
+					}, [..._cache[8] || (_cache[8] = [createElementVNode("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true"
+					}, [createElementVNode("path", {
+						d: "M6 6L18 18M18 6L6 18",
+						stroke: "currentColor",
+						"stroke-width": "2.2",
+						"stroke-linecap": "round"
+					})], -1)])], 8, _hoisted_4),
+					createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(activeThread.value.messages, (c) => {
+						return openBlock(), createElementBlock("div", {
+							key: c.id,
+							class: "m-comments__item"
+						}, [createElementVNode("span", {
+							class: "m-comments__avatar",
+							style: normalizeStyle({ backgroundColor: c.author?.color ?? "#1C7ED6" })
+						}, toDisplayString(initial(c.author?.name)), 5), createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createElementVNode("span", _hoisted_8, toDisplayString(c.author?.name), 1), createElementVNode("span", _hoisted_9, toDisplayString(fmtTime(c.createdAt)), 1)]), createElementVNode("div", _hoisted_10, toDisplayString(c.body), 1)])]);
+					}), 128))]),
+					createElementVNode("div", _hoisted_11, [withDirectives(createElementVNode("input", {
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => replyText.value = $event),
+						class: "m-comments__input",
+						placeholder: unref(t)("comment:reply"),
+						onKeydown: withKeys(submitReply, ["enter"]),
+						onPointerdown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+					}, null, 40, _hoisted_12), [[vModelText, replyText.value]])]),
+					createElementVNode("div", _hoisted_13, [createElementVNode("button", {
+						type: "button",
+						class: "m-comments__btn",
+						onClick: removeThread
+					}, toDisplayString(unref(t)("comment:delete")), 1), createElementVNode("button", {
+						type: "button",
+						class: "m-comments__btn m-comments__btn--primary",
+						onClick: toggleResolve
+					}, toDisplayString(activeThread.value.resolved ? unref(t)("comment:reopen") : unref(t)("comment:resolve")), 1)])
+				], 36)) : createCommentVNode("", true),
+				draft.value && draftPos.value ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: "m-comments__panel m-comments__panel--draft",
+					style: normalizeStyle({
+						left: `${draftPos.value.x + 16}px`,
+						top: `${draftPos.value.y}px`
+					}),
+					onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"]))
+				}, [
+					createElementVNode("button", {
+						type: "button",
+						class: "m-comments__close",
+						title: unref(t)("comment:close"),
+						onClick: _cache[5] || (_cache[5] = ($event) => draft.value = void 0)
+					}, [..._cache[9] || (_cache[9] = [createElementVNode("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true"
+					}, [createElementVNode("path", {
+						d: "M6 6L18 18M18 6L6 18",
+						stroke: "currentColor",
+						"stroke-width": "2.2",
+						"stroke-linecap": "round"
+					})], -1)])], 8, _hoisted_14),
+					withDirectives(createElementVNode("textarea", {
+						ref_key: "draftInput",
+						ref: draftInput,
+						"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => draft.value.text = $event),
+						class: "m-comments__textarea",
+						placeholder: unref(t)("comment:placeholder"),
+						onKeydown: withKeys(withModifiers(submitDraft, ["exact", "prevent"]), ["enter"])
+					}, null, 40, _hoisted_15), [[vModelText, draft.value.text]]),
+					createElementVNode("div", _hoisted_16, [createElementVNode("button", {
+						type: "button",
+						class: "m-comments__btn m-comments__btn--primary",
+						disabled: !draft.value.text.trim(),
+						onClick: submitDraft
+					}, toDisplayString(unref(t)("comment")), 9, _hoisted_17)])
+				], 36)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/plugin.ts
+function plugin() {
+	return definePlugin((editor) => {
+		const { activeTool, activateTool } = editor;
+		function isCommentActive() {
+			return activeTool.value?.name === "comment";
+		}
+		function toggleCommentMode() {
+			activateTool(isCommentActive() ? void 0 : "comment");
+		}
+		editor.registerIcon("comment", "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13,16H20V4H4V16H10Z");
+		editor.registerToolbeltItem({
+			key: "comment",
+			isActive: isCommentActive,
+			handle: toggleCommentMode
+		});
+		return {
+			name: "mce:comments",
+			tools: [{
+				name: "comment",
+				handle: () => ({})
+			}],
+			commands: [{
+				command: "toggleCommentMode",
+				handle: toggleCommentMode
+			}],
+			hotkeys: [{
+				command: "activateTool:comment",
+				key: "C"
+			}],
+			components: [{
+				type: "overlay",
+				component: CommentLayer_default,
+				order: "before"
+			}],
+			setup: () => {
+				editor.comments = createCommentsStore(editor);
+			},
+			messages: {
+				en: {
+					"comment": "Comment",
+					"comment:placeholder": "Add a comment",
+					"comment:reply": "Reply",
+					"comment:resolve": "Resolve",
+					"comment:reopen": "Reopen",
+					"comment:delete": "Delete",
+					"comment:close": "Close"
+				},
+				zhHans: {
+					"comment": "评论",
+					"comment:placeholder": "添加评论",
+					"comment:reply": "回复",
+					"comment:resolve": "解决",
+					"comment:reopen": "重新打开",
+					"comment:delete": "删除",
+					"comment:close": "关闭"
+				}
+			}
+		};
+	});
+}
+//#endregion
+//#region src/index.ts
+var src_default = plugin;
+//#endregion
+export { createCommentsStore, src_default as default, plugin, useComments };

package/dist/plugin.d.ts

@@ -0,0 +1,18 @@
+import type { CommentsApi } from './useComments';
+declare global {
+    namespace Mce {
+        interface Editor {
+            /** 评论数据层（线程读写 + 坐标换算）。 */
+            comments: CommentsApi;
+        }
+        interface Tools {
+            /** 评论工具（与移动 / 框架 / 形状等单选互斥；激活后点画布放置评论）。 */
+            comment: [];
+        }
+        interface Commands {
+            /** 切换评论工具（激活 ⇄ 取消）。 */
+            toggleCommentMode: () => void;
+        }
+    }
+}
+export declare function plugin(): import("mce").Plugin;

package/dist/useComments.d.ts

@@ -0,0 +1,70 @@
+import type { Editor } from 'mce';
+import type { ComputedRef } from 'vue';
+/** 评论作者。 */
+export interface CommentAuthor {
+    id?: string;
+    name?: string;
+    color?: string;
+    initials?: string;
+}
+/** 线程中的单条消息。 */
+export interface CommentMessage {
+    id: string;
+    author?: CommentAuthor;
+    body: string;
+    createdAt?: number;
+}
+/** 聚合后的线程视图：携带所属元素节点 + idoc 线程字段。 */
+export interface CommentThreadView {
+    /** 所属元素节点（运行时 Element2D）。 */
+    node: any;
+    id: string;
+    /** 相对所属元素原点的偏移。 */
+    offset: {
+        x: number;
+        y: number;
+    };
+    resolved: boolean;
+    messages: CommentMessage[];
+}
+export interface CommentsApi {
+    /** 全树聚合的线程（按创建时间升序）。 */
+    threads: ComputedRef<CommentThreadView[]>;
+    /** 在某元素上新建线程，offset 为相对该元素原点的局部坐标，返回线程 id。 */
+    addThread: (node: any, offset: {
+        x: number;
+        y: number;
+    }, body: string) => string;
+    /** 向线程追加回复。 */
+    reply: (node: any, threadId: string, body: string) => void;
+    /** 解决 / 取消解决。 */
+    resolve: (node: any, threadId: string, resolved: boolean) => void;
+    /** 删除线程。 */
+    remove: (node: any, threadId: string) => void;
+    /** 全局画布坐标 → 画板（屏幕）像素。 */
+    toScreen: (p: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    /** 画板（屏幕）像素 → 全局画布坐标。 */
+    toWorld: (p: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * 评论数据层：评论作为元素能力存于 `element.comments`（idoc CommentThread[]），
+ * 经 modern-canvas 的 Element2DComments + mce CRDT 逐线程同步。
+ * - 读：遍历文档树聚合各节点的 comments → 扁平线程视图（含所属 node）。
+ * - 写：按节点 per-thread `setProperty(threadId, thread)`，保留逐线程并发合并。
+ * - 位置：线程 offset 为元素局部坐标，渲染时经元素世界矩阵还原。
+ */
+export declare function createCommentsStore(editor: Editor): CommentsApi;
+/** 组件内读取评论数据层。 */
+export declare function useComments(): CommentsApi;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@mce/comments",
+  "type": "module",
+  "version": "0.24.4",
+  "description": "comments plugin for mce",
+  "author": "wxm",
+  "license": "MIT",
+  "homepage": "https://github.com/qq15725/mce",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qq15725/mce.git"
+  },
+  "bugs": {
+    "url": "https://github.com/qq15725/mce/issues"
+  },
+  "keywords": [
+    "mce",
+    "comments",
+    "plugin"
+  ],
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./*.mjs": "./*.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "browser": "./dist/index.js",
+  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "*",
+        "dist/*",
+        "dist/*.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "mce": "0.24.4"
+  },
+  "peerDependencies": {
+    "mce": "^0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build:code": "vite build",
+    "build:tsc": "NODE_ENV=production vue-tsc --emitDeclarationOnly --project tsconfig.json",
+    "build": "pnpm build:code && pnpm build:tsc",
+    "lint": "eslint src",
+    "typecheck": "vue-tsc --noEmit --project tsconfig.json"
+  }
+}