superdoc 2.6.0-next.7 → 2.6.0-next.8

package/dist/superdoc.cjs

@@ -5694,7 +5694,7 @@ function useComment(params) {
 	const fileType = params.fileType;
 	const createdAtVersionNumber = params.createdAtVersionNumber;
 	const isInternal = (0, vue.ref)(params.isInternal !== void 0 ? params.isInternal : true);
-	const mentions = (0, vue.ref)([]);
+	const mentions = (0, vue.ref)(Array.isArray(params.mentions) ? params.mentions : []);
 	const commentElement = (0, vue.ref)(null);
 	const isFocused = (0, vue.ref)(params.isFocused || false);
 	const creatorId = (0, vue.ref)(params.creatorId ?? null);
@@ -7254,6 +7254,7 @@ var useCommentsStore = defineStore("comments", () => {
 	const overlappedIds = /* @__PURE__ */ new Set([]);
 	const suppressInternalExternal = (0, vue.ref)(true);
 	const currentCommentText = (0, vue.ref)("");
+	const currentCommentMentions = (0, vue.ref)([]);
 	const commentsList = (0, vue.ref)([]);
 	const reviewDirectoryList = (0, vue.shallowRef)([]);
 	let priorTrackedChangeThreadIndex = /* @__PURE__ */ new Map();
@@ -8336,6 +8337,7 @@ var useCommentsStore = defineStore("comments", () => {
 	const removePendingComment = (superdoc) => {
 		const hadPending = !!pendingComment.value;
 		currentCommentText.value = "";
+		currentCommentMentions.value = [];
 		pendingComment.value = null;
 		pendingV2CommentTarget.value = null;
 		superdocStore.selectionPosition = null;
@@ -8355,16 +8357,19 @@ var useCommentsStore = defineStore("comments", () => {
 		const v2Adapter = !skipEditorUpdate && !isHydration ? getV2CommentsAdapter(superdoc) : null;
 		if (v2Adapter && !comment.trackedChange) {
 			const text = normalizeV2CommentDraftText(pendingComment.value ? currentCommentText.value : comment.commentText);
+			const mentions = pendingComment.value ? currentCommentMentions.value : comment.mentions ?? [];
 			const target = pendingComment.value ? pendingV2CommentTarget.value : null;
 			const parentCommentId = comment.parentCommentId ? String(comment.parentCommentId) : pendingComment.value ? null : null;
 			return (async () => {
 				try {
 					return await (parentCommentId ? v2Adapter.reply({
 						parentCommentId,
-						text
+						text,
+						...mentions.length ? { mentions } : {}
 					}) : v2Adapter.commitPendingComment({
 						text,
-						target
+						target,
+						...mentions.length ? { mentions } : {}
 					}));
 				} catch (err) {
 					return {
@@ -8825,7 +8830,7 @@ var useCommentsStore = defineStore("comments", () => {
 	*   - rejection preserves rows and emits a rejected `comments-update` event
 	*   - committed-but-refresh-failed surfaces honestly (no reconcile with `[]`)
 	*/
-	const replyCommentV2 = async ({ superdoc, parentCommentId, text } = {}) => {
+	const replyCommentV2 = async ({ superdoc, parentCommentId, text, mentions = [] } = {}) => {
 		if (commentsAreReadOnly()) return readOnlyMutationOutcome();
 		const v2Adapter = getV2CommentsAdapter(superdoc);
 		if (!v2Adapter) return {
@@ -8850,7 +8855,8 @@ var useCommentsStore = defineStore("comments", () => {
 			fileId,
 			operation: () => v2Adapter.reply({
 				parentCommentId: normalizedParent,
-				text: plainText
+				text: plainText,
+				...mentions.length ? { mentions } : {}
 			}),
 			eventType: COMMENT_EVENTS.ADD,
 			rejectionFallbackReason: "v2-reply-failed",
@@ -9306,6 +9312,7 @@ var useCommentsStore = defineStore("comments", () => {
 		};
 		const applyUpdate = (existing, input) => {
 			existing.commentText = input.commentText ?? existing.commentText;
+			existing.mentions = Array.isArray(input.mentions) ? input.mentions : [];
 			existing.isInternal = typeof input.isInternal === "boolean" ? input.isInternal : existing.isInternal;
 			if (typeof input.resolvedTime === "number") {
 				existing.resolvedTime = input.resolvedTimeWasSynthesized === true && typeof existing.resolvedTime === "number" ? existing.resolvedTime : input.resolvedTime;
@@ -9355,6 +9362,58 @@ var useCommentsStore = defineStore("comments", () => {
 		return { added: addedComments[addedComments.length - 1] ?? null };
 	});
 	/**
+	* Reconcile and publish a root comment created by the private V2 context menu.
+	* That path owns selection capture, while this store remains the sole owner
+	* of shared comment rows and public comments-update events.
+	*/
+	const announceV2CommentCreated = async ({ superdoc, commentId } = {}) => {
+		const id = normalizeCommentId(commentId);
+		const adapter = getV2CommentsAdapter(superdoc);
+		const commentsApi = superdoc?.activeEditor?.doc?.comments;
+		if (!id) return {
+			ok: false,
+			reason: "comment-id-missing"
+		};
+		if (!adapter || !isCurrentV2CommentsAdapter(adapter)) return {
+			ok: false,
+			reason: "comments-adapter-stale"
+		};
+		if (typeof commentsApi?.get !== "function") return {
+			ok: false,
+			reason: "document-api-unavailable"
+		};
+		let item;
+		try {
+			item = await commentsApi.get({ commentId: id });
+		} catch (err) {
+			return {
+				ok: false,
+				reason: "comment-read-failed",
+				detail: err?.message ?? String(err)
+			};
+		}
+		if (!isCurrentV2CommentsAdapter(adapter)) return {
+			ok: false,
+			reason: "comments-adapter-stale"
+		};
+		const comment = reconcileCommentsFromV2({
+			superdoc,
+			adapter,
+			documentId: adapter.documentId,
+			items: [item],
+			pruneStale: false
+		})?.added ?? commentsList.value.find((candidate) => String(candidate?.commentId ?? "") === id || String(candidate?.importedId ?? "") === id) ?? null;
+		const event = {
+			type: COMMENT_EVENTS.ADD,
+			comment: comment?.getValues?.() ?? null
+		};
+		superdoc?.emit?.("comments-update", event);
+		return {
+			ok: true,
+			comment
+		};
+	};
+	/**
 	* Cancel the pending comment
 	*
 	* @returns {void}
@@ -9555,7 +9614,7 @@ var useCommentsStore = defineStore("comments", () => {
 		});
 		commentsList.value = commentsList.value.filter((comment) => !removedComments.includes(comment));
 		if (removedAliasIds.size) {
-			const nextPositions = { ...editorCommentPositions.value || {} };
+			const nextPositions = { ...editorCommentPositions.value };
 			removedAliasIds.forEach((id) => {
 				delete nextPositions[id];
 			});
@@ -11076,6 +11135,7 @@ var useCommentsStore = defineStore("comments", () => {
 		suppressInternalExternal,
 		pendingComment,
 		currentCommentText,
+		currentCommentMentions,
 		commentsList,
 		reviewDirectoryList,
 		isCommentsListVisible,
@@ -11151,6 +11211,7 @@ var useCommentsStore = defineStore("comments", () => {
 		getV2CommentsAdapter,
 		applyReviewWindowFromV2,
 		reconcileCommentsFromV2,
+		announceV2CommentCreated,
 		isV2EditorActive,
 		replyCommentV2,
 		editCommentV2,
@@ -11299,13 +11360,13 @@ function useUiFontFamily() {
 //#endregion
 //#region src/components/CommentsLayer/CommentsDropdown.vue
 var _hoisted_1$31 = { class: "comments-dropdown" };
-var _hoisted_2$24 = ["onClick"];
-var _hoisted_3$20 = {
+var _hoisted_2$25 = ["onClick"];
+var _hoisted_3$21 = {
 	key: 0,
 	class: "comments-dropdown__option-icon"
 };
-var _hoisted_4$12 = ["innerHTML"];
-var _hoisted_5$8 = { class: "comments-dropdown__option-label" };
+var _hoisted_4$13 = ["innerHTML"];
+var _hoisted_5$9 = { class: "comments-dropdown__option-label" };
 var _sfc_main$38 = {
 	__name: "CommentsDropdown",
 	props: {
@@ -11445,13 +11506,13 @@ var _sfc_main$38 = {
 					key: option.key,
 					class: (0, vue.normalizeClass)(["comments-dropdown__option", { "sd-disabled": option.disabled }]),
 					onClick: ($event) => onOptionClick(option)
-				}, [hasIcon(option) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$20, [option.iconString ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				}, [hasIcon(option) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$21, [option.iconString ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					innerHTML: option.iconString
-				}, null, 8, _hoisted_4$12)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(OptionIcon), {
+				}, null, 8, _hoisted_4$13)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(OptionIcon), {
 					key: 1,
 					option
-				}, null, 8, ["option"]))])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", _hoisted_5$8, (0, vue.toDisplayString)(option.label), 1)], 10, _hoisted_2$24);
+				}, null, 8, ["option"]))])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", _hoisted_5$9, (0, vue.toDisplayString)(option.label), 1)], 10, _hoisted_2$25);
 			}), 128))], 4)) : (0, vue.createCommentVNode)("", true)]))]);
 		};
 	}
@@ -11460,9 +11521,9 @@ var CommentsDropdown_default = /*#__PURE__*/ require__plugin_vue_export_helper._
 //#endregion
 //#region src/components/CommentsLayer/InternalDropdown.vue
 var _hoisted_1$30 = { class: "sd-comment-option" };
-var _hoisted_2$23 = ["innerHTML"];
-var _hoisted_3$19 = { class: "sd-option-state" };
-var _hoisted_4$11 = ["innerHTML"];
+var _hoisted_2$24 = ["innerHTML"];
+var _hoisted_3$20 = { class: "sd-option-state" };
+var _hoisted_4$12 = ["innerHTML"];
 var _sfc_main$37 = {
 	__name: "InternalDropdown",
 	props: {
@@ -11534,12 +11595,12 @@ var _sfc_main$37 = {
 					(0, vue.createElementVNode)("div", {
 						class: "sd-active-icon",
 						innerHTML: activeIcon.value
-					}, null, 8, _hoisted_2$23),
-					(0, vue.createElementVNode)("div", _hoisted_3$19, (0, vue.toDisplayString)(getState.value), 1),
+					}, null, 8, _hoisted_2$24),
+					(0, vue.createElementVNode)("div", _hoisted_3$20, (0, vue.toDisplayString)(getState.value), 1),
 					(0, vue.createElementVNode)("div", {
 						class: "sd-dropdown-caret",
 						innerHTML: (0, vue.unref)(superdocIcons).caretDown
-					}, null, 8, _hoisted_4$11)
+					}, null, 8, _hoisted_4$12)
 				])]),
 				_: 1
 			}, 8, ["disabled", "content-style"])], 4);
@@ -11690,8 +11751,8 @@ var isAllowed = (permission, role, isInternal, context = {}) => {
 //#endregion
 //#region src/components/general/Avatar.vue
 var _hoisted_1$29 = { class: "user-container" };
-var _hoisted_2$22 = ["src"];
-var _hoisted_3$18 = {
+var _hoisted_2$23 = ["src"];
+var _hoisted_3$19 = {
 	key: 1,
 	class: "user-bg"
 };
@@ -11716,7 +11777,7 @@ var _sfc_main$36 = {
 				key: 0,
 				class: "user-bg",
 				src: __props.user.image.startsWith("http") ? __props.user.image : `data:image/png;base64,${__props.user.image}`
-			}, null, 8, _hoisted_2$22)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, (0, vue.toDisplayString)(getInitials(__props.user.name, __props.user.email)), 1))]);
+			}, null, 8, _hoisted_2$23)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, (0, vue.toDisplayString)(getInitials(__props.user.name, __props.user.email)), 1))]);
 		};
 	}
 };
@@ -11724,14 +11785,14 @@ var Avatar_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue
 //#endregion
 //#region src/components/CommentsLayer/CommentHeader.vue
 var _hoisted_1$28 = { class: "card-section comment-header" };
-var _hoisted_2$21 = { class: "comment-header-left" };
-var _hoisted_3$17 = { class: "user-info" };
-var _hoisted_4$10 = { class: "user-name" };
-var _hoisted_5$7 = {
+var _hoisted_2$22 = { class: "comment-header-left" };
+var _hoisted_3$18 = { class: "user-info" };
+var _hoisted_4$11 = { class: "user-name" };
+var _hoisted_5$8 = {
 	key: 0,
 	class: "imported-tag"
 };
-var _hoisted_6$6 = {
+var _hoisted_6$7 = {
 	key: 0,
 	class: "user-timestamp"
 };
@@ -11956,10 +12017,10 @@ var _sfc_main$35 = {
 			return user;
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$28, [(0, vue.createElementVNode)("div", _hoisted_2$21, [(0, vue.createVNode)(Avatar_default, {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$28, [(0, vue.createElementVNode)("div", _hoisted_2$22, [(0, vue.createVNode)(Avatar_default, {
 				user: getCurrentUser.value,
 				class: "avatar"
-			}, null, 8, ["user"]), (0, vue.createElementVNode)("div", _hoisted_3$17, [(0, vue.createElementVNode)("div", _hoisted_4$10, [(0, vue.createTextVNode)((0, vue.toDisplayString)(getCurrentUser.value.name), 1), isImported.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$7, "IMPORTED")) : (0, vue.createCommentVNode)("", true)]), props.comment.createdTime ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$6, (0, vue.toDisplayString)((0, vue.unref)(formatDate)(props.comment.createdTime)), 1)) : (0, vue.createCommentVNode)("", true)])]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["overflow-menu", { "is-visible": props.isActive }]) }, [
+			}, null, 8, ["user"]), (0, vue.createElementVNode)("div", _hoisted_3$18, [(0, vue.createElementVNode)("div", _hoisted_4$11, [(0, vue.createTextVNode)((0, vue.toDisplayString)(getCurrentUser.value.name), 1), isImported.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$8, "IMPORTED")) : (0, vue.createCommentVNode)("", true)]), props.comment.createdTime ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$7, (0, vue.toDisplayString)((0, vue.unref)(formatDate)(props.comment.createdTime)), 1)) : (0, vue.createCommentVNode)("", true)])]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["overflow-menu", { "is-visible": props.isActive }]) }, [
 				allowResolve.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: 0,
 					class: (0, vue.normalizeClass)(["overflow-menu__icon", { "sd-is-disabled": Boolean(__props.resolveDisabledReason) }]),
@@ -12009,8 +12070,24 @@ var CommentHeader_default = /*#__PURE__*/ require__plugin_vue_export_helper._plu
 //#endregion
 //#region src/components/CommentsLayer/CommentInput.vue
 var _hoisted_1$27 = { class: "input-section" };
-var TEXTAREA_MIN_HEIGHT = 28;
-var TEXTAREA_MAX_HEIGHT = 132;
+var _hoisted_2$21 = { class: "comment-composer" };
+var _hoisted_3$17 = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_4$10 = [
+	"id",
+	"aria-selected",
+	"data-sd-comment-mention-option",
+	"onMousedown"
+];
+var _hoisted_5$7 = { class: "comment-mention-option__name" };
+var _hoisted_6$6 = {
+	key: 0,
+	class: "comment-mention-option__email"
+};
+var commentInputSequence = 0;
 var _sfc_main$34 = {
 	__name: "CommentInput",
 	props: {
@@ -12038,15 +12115,23 @@ var _sfc_main$34 = {
 	},
 	emits: ["focus"],
 	setup(__props, { expose: __expose, emit: __emit }) {
+		const TEXTAREA_MIN_HEIGHT = 28;
+		const TEXTAREA_MAX_HEIGHT = 132;
 		const emit = __emit;
-		const { currentCommentText } = storeToRefs(useCommentsStore());
+		const props = __props;
+		const { currentCommentText, currentCommentMentions } = storeToRefs(useCommentsStore());
 		const inputRef = (0, vue.ref)(null);
+		const mentionStart = (0, vue.ref)(null);
+		const mentionQuery = (0, vue.ref)("");
+		const highlightedMentionIndex = (0, vue.ref)(0);
+		const mentionListId = `sd-comment-mention-list-${++commentInputSequence}`;
 		const handleFocusChange = (focused) => emit("focus", focused);
+		const getInputElement = () => inputRef.value;
 		const focus = (options) => {
-			inputRef.value?.focus?.(options);
+			getInputElement()?.focus?.(options);
 		};
 		const syncInputHeight = () => {
-			const input = inputRef.value;
+			const input = getInputElement();
 			if (!input) return;
 			input.style.height = `${TEXTAREA_MIN_HEIGHT}px`;
 			const scrollHeight = input.scrollHeight || TEXTAREA_MIN_HEIGHT;
@@ -12077,6 +12162,79 @@ var _sfc_main$34 = {
 				currentCommentText.value = textToHtml(value);
 			}
 		});
+		const displayName = (user) => user?.name?.trim() || user?.email?.trim() || "";
+		const userKey = (user) => String(user?.id ?? user?.email ?? user?.name ?? "");
+		const isViewer = (user) => user?.role === "viewer" || user?.access === "viewer" || typeof user?.access === "object" && user.access?.role === "viewer";
+		const mentionIdentity = (user) => ({
+			...user?.id != null ? { id: user.id } : {},
+			...user?.name != null ? { name: user.name } : {},
+			...user?.email != null ? { email: user.email } : {}
+		});
+		const mentionSuggestions = (0, vue.computed)(() => {
+			if (mentionStart.value == null) return [];
+			const needle = mentionQuery.value.toLocaleLowerCase();
+			return props.users.filter((user) => !isViewer(user) && displayName(user)).filter((user) => {
+				const name = displayName(user).toLocaleLowerCase();
+				const email = user?.email?.toLocaleLowerCase() ?? "";
+				return !needle || name.startsWith(needle) || email.startsWith(needle);
+			}).slice(0, 8);
+		});
+		const mentionListOpen = (0, vue.computed)(() => mentionSuggestions.value.length > 0);
+		const activeMentionOptionId = (0, vue.computed)(() => {
+			const user = mentionSuggestions.value[highlightedMentionIndex.value];
+			return user ? `${mentionListId}-${userKey(user)}` : void 0;
+		});
+		const updateMentionQuery = (caret) => {
+			const beforeCaret = commentDraft.value.slice(0, caret);
+			const match = /(?:^|\s)@([^\s@]{0,40})$/.exec(beforeCaret);
+			mentionStart.value = match ? caret - match[1].length - 1 : null;
+			mentionQuery.value = match?.[1] ?? "";
+			highlightedMentionIndex.value = 0;
+		};
+		const onInput = (event) => {
+			currentCommentMentions.value = currentCommentMentions.value.filter((user) => commentDraft.value.includes(`@${displayName(user)}`));
+			updateMentionQuery(event.target.selectionStart ?? commentDraft.value.length);
+			syncInputHeight();
+		};
+		const selectMention = (user) => {
+			if (mentionStart.value == null) return;
+			const start = mentionStart.value;
+			const caret = inputRef.value?.selectionStart ?? commentDraft.value.length;
+			const token = `@${displayName(user)}`;
+			const identity = mentionIdentity(user);
+			commentDraft.value = `${commentDraft.value.slice(0, start)}${token}${commentDraft.value.slice(caret)}`;
+			if (!currentCommentMentions.value.some((selected) => userKey(selected) === userKey(identity))) currentCommentMentions.value = [...currentCommentMentions.value, identity];
+			mentionStart.value = null;
+			mentionQuery.value = "";
+			(0, vue.nextTick)(() => {
+				const nextCaret = start + token.length;
+				inputRef.value?.focus();
+				inputRef.value?.setSelectionRange(nextCaret, nextCaret);
+				syncInputHeight();
+			});
+		};
+		const onKeydown = (event) => {
+			if (!mentionListOpen.value) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				const direction = event.key === "ArrowDown" ? 1 : -1;
+				highlightedMentionIndex.value = (highlightedMentionIndex.value + direction + mentionSuggestions.value.length) % mentionSuggestions.value.length;
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				event.stopPropagation();
+				const user = mentionSuggestions.value[highlightedMentionIndex.value];
+				if (user) selectMention(user);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				mentionStart.value = null;
+			}
+		};
 		(0, vue.onMounted)(scheduleInputHeightSync);
 		(0, vue.watch)(currentCommentText, scheduleInputHeightSync);
 		__expose({ focus });
@@ -12086,21 +12244,46 @@ var _sfc_main$34 = {
 				config: __props.config,
 				comment: __props.comment,
 				"is-pending-input": true
-			}, null, 8, ["config", "comment"])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["comment-entry", { "sd-input-active": __props.isFocused }]) }, [(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", {
+			}, null, 8, ["config", "comment"])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["comment-entry", { "sd-input-active": __props.isFocused }]) }, [(0, vue.createElementVNode)("div", _hoisted_2$21, [(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", {
 				ref_key: "inputRef",
 				ref: inputRef,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => commentDraft.value = $event),
 				class: "superdoc-field",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": mentionListOpen.value,
+				"aria-controls": mentionListOpen.value ? mentionListId : void 0,
+				"aria-activedescendant": activeMentionOptionId.value,
+				"data-sd-comment-mention-input": "",
+				"data-sd-comment-text": "",
 				placeholder: "Add a comment",
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => commentDraft.value = $event),
 				rows: "1",
-				onInput: syncInputHeight,
+				onInput,
+				onKeydown,
 				onFocus: _cache[1] || (_cache[1] = ($event) => handleFocusChange(true)),
 				onBlur: _cache[2] || (_cache[2] = ($event) => handleFocusChange(false))
-			}, null, 544), [[vue.vModelText, commentDraft.value]])], 2)]);
+			}, null, 40, _hoisted_3$17), [[vue.vModelText, commentDraft.value]]), mentionListOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				id: mentionListId,
+				class: "comment-mention-list",
+				role: "listbox",
+				"data-sd-comment-mention-list": ""
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(mentionSuggestions.value, (user, index) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					id: `${mentionListId}-${userKey(user)}`,
+					key: userKey(user),
+					type: "button",
+					class: (0, vue.normalizeClass)(["comment-mention-option", { "comment-mention-option--active": index === highlightedMentionIndex.value }]),
+					role: "option",
+					"aria-selected": index === highlightedMentionIndex.value,
+					"data-sd-comment-mention-option": userKey(user),
+					onMousedown: (0, vue.withModifiers)(($event) => selectMention(user), ["prevent"])
+				}, [(0, vue.createElementVNode)("span", _hoisted_5$7, (0, vue.toDisplayString)(displayName(user)), 1), user.email ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$6, (0, vue.toDisplayString)(user.email), 1)) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_4$10);
+			}), 128))])) : (0, vue.createCommentVNode)("", true)])], 2)]);
 		};
 	}
 };
-var CommentInput_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(_sfc_main$34, [["__scopeId", "data-v-e281414b"]]);
+var CommentInput_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(_sfc_main$34, [["__scopeId", "data-v-87953125"]]);
 //#endregion
 //#region src/components/CommentsLayer/CommentDialog.vue
 var _hoisted_1$26 = [
@@ -12255,7 +12438,7 @@ var _sfc_main$33 = {
 		const superdocStore = useSuperdocStore();
 		const commentsStore = useCommentsStore();
 		const { addComment, cancelComment, deleteComment, getCommentAliasIds, removePendingComment, getCommentDocumentId, requestInstantSidebarAlignment, resolveCommentPositionEntry, clearInstantSidebarAlignment, setActiveFloatingCommentInstance } = commentsStore;
-		const { suppressInternalExternal, getConfig, activeComment, activeFloatingCommentInstanceId, floatingCommentsOffset, pendingComment, currentCommentText, isDebugging, editingCommentId, editorCommentPositions, isCommentHighlighted } = storeToRefs(commentsStore);
+		const { suppressInternalExternal, getConfig, activeComment, activeFloatingCommentInstanceId, floatingCommentsOffset, pendingComment, currentCommentText, currentCommentMentions, isDebugging, editingCommentId, editorCommentPositions, isCommentHighlighted } = storeToRefs(commentsStore);
 		const isInternal = (0, vue.ref)(true);
 		const commentInput = (0, vue.ref)(null);
 		const editCommentInputs = (0, vue.ref)(/* @__PURE__ */ new Map());
@@ -12499,6 +12682,7 @@ var _sfc_main$33 = {
 			if (!active) {
 				if (isReplying.value || isEditingCommentInThisThread()) {
 					currentCommentText.value = "";
+					currentCommentMentions.value = [];
 					editingCommentId.value = null;
 				}
 				textExpanded.value = false;
@@ -12679,7 +12863,8 @@ var _sfc_main$33 = {
 					const outcome = await commentsStore.replyCommentV2({
 						superdoc: proxy.$superdoc,
 						parentCommentId,
-						text: currentCommentText.value
+						text: currentCommentText.value,
+						...currentCommentMentions.value.length ? { mentions: currentCommentMentions.value } : {}
 					});
 					if (!outcome?.ok) {
 						(0, vue.nextTick)(() => emit("resize"));
@@ -12687,6 +12872,7 @@ var _sfc_main$33 = {
 					}
 					isReplying.value = false;
 					currentCommentText.value = "";
+					currentCommentMentions.value = [];
 					(0, vue.nextTick)(() => emit("resize"));
 					return outcome;
 				} finally {
@@ -12958,6 +13144,7 @@ var _sfc_main$33 = {
 			switch (value) {
 				case "edit":
 					currentCommentText.value = comment?.commentText?.value ?? comment?.commentText ?? "";
+					currentCommentMentions.value = Array.isArray(comment?.mentions) ? [...comment.mentions] : [];
 					activeComment.value = props.comment.commentId;
 					if (props.floatingInstanceId) setActiveFloatingCommentInstance(props.floatingInstanceId);
 					editingCommentId.value = comment.commentId;
@@ -13017,7 +13204,7 @@ var _sfc_main$33 = {
 		};
 		const usersFiltered = (0, vue.computed)(() => {
 			const users = proxy.$superdoc.users;
-			if (props.comment.isInternal === true) return users.filter((user) => user.access?.role === "internal");
+			if (props.comment.isInternal === true) return users.filter((user) => user.access === "internal" || user.access?.role === "internal");
 			return users;
 		});
 		(0, vue.onMounted)(() => {
@@ -13208,15 +13395,11 @@ var _sfc_main$33 = {
 							}, null, 10, _hoisted_36)) : (0, vue.unref)(isDebugging) && !isEditingThisComment.value(comment) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_37, (0, vue.toDisplayString)((0, vue.unref)(editorCommentPositions)[comment.importedId !== void 0 ? comment.importedId : comment.commentId]?.bounds), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_38, [(0, vue.createElementVNode)("div", _hoisted_39, [(0, vue.createVNode)(CommentInput_default, {
 								ref_for: true,
 								ref: setEditCommentInputRef(comment.commentId),
-								users: usersFiltered.value,
+								users: [],
 								config: (0, vue.unref)(getConfig),
 								"include-header": false,
 								comment
-							}, null, 8, [
-								"users",
-								"config",
-								"comment"
-							])]), (0, vue.createElementVNode)("div", _hoisted_40, [(0, vue.createElementVNode)("button", {
+							}, null, 8, ["config", "comment"])]), (0, vue.createElementVNode)("div", _hoisted_40, [(0, vue.createElementVNode)("button", {
 								class: "sd-button reply-btn-cancel",
 								onClick: (0, vue.withModifiers)(($event) => handleCancel(comment), ["stop", "prevent"])
 							}, "Cancel", 8, _hoisted_41), (0, vue.createElementVNode)("button", {
@@ -13285,7 +13468,7 @@ var _sfc_main$33 = {
 		};
 	}
 };
-var CommentDialog_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(_sfc_main$33, [["__scopeId", "data-v-969c9a8f"]]);
+var CommentDialog_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(_sfc_main$33, [["__scopeId", "data-v-f4c743f2"]]);
 //#endregion
 //#region src/components/CommentsLayer/commentsList/ReviewDirectoryListItem.vue
 var _hoisted_1$25 = [
@@ -21630,6 +21813,16 @@ var SuperDoc_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_v
 		const onV2LinkClick = (payload) => {
 			linkPopover.handleLinkClick(payload);
 		};
+		const onV2CommentCreated = async (payload) => {
+			try {
+				await commentsStore.announceV2CommentCreated?.({
+					superdoc: proxy.$superdoc,
+					commentId: payload?.commentId
+				});
+			} catch (err) {
+				console.warn("[SuperDoc][v2] context-menu comment reconciliation failed", err);
+			}
+		};
 		const recollectV2GeometryIfActive = (options = void 0) => {
 			if (!isV2Mode.value) return;
 			if (!v2GeometryPublisher.getLastPayload()) return;
@@ -22732,6 +22925,7 @@ var SuperDoc_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_v
 								onV2SelectionChanged,
 								onV2HostEvent: (event) => onV2HostEvent(doc, event),
 								onV2LinkClick,
+								onV2CommentCreated,
 								onV2PageMetrics
 							}, null, 8, [
 								"file-source",
@@ -22796,7 +22990,7 @@ var SuperDoc_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_v
 			], 38);
 		};
 	}
-}, [["__scopeId", "data-v-af3574db"]]);
+}, [["__scopeId", "data-v-85324013"]]);
 //#endregion
 //#region src/core/create-app.js
 var PINIA_DEVTOOLS_SETUP_EVENT = "devtools-plugin:setup";
@@ -43283,7 +43477,7 @@ var SuperDoc = class extends require_eventemitter3.import_eventemitter3.default
 		this.config.colors = shuffleArray(this.config.colors);
 		this.userColorMap = /* @__PURE__ */ new Map();
 		this.colorIndex = 0;
-		this.version = "2.6.0-next.7";
+		this.version = "2.6.0-next.8";
 		this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
 		this.superdocId = config.superdocId || require_uuid.v4();
 		this.colors = this.config.colors ?? [];