@univerjs/thread-comment-ui 1.0.0-insiders.20260809-70eefdd → 1.0.0-rc.0

package/lib/es/index.js

@@ -1,9 +1,10 @@
-import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, RegionService, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
-import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, debounceTime, filter, map, of, startWith } from "rxjs";
-import { BreakLineCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
+import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, RegionService, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies, toDisposable } from "@univerjs/core";
+import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, UniverMobileUIPlugin, useConfigValue, useDependency, useEvent, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, debounceTime, map, of, startWith } from "rxjs";
+import { BreakLineCommand, DeleteLeftCommand, DeleteRightCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
 import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
-import { Button, Dropdown, Select, Tooltip, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { BaseObject, DEFAULT_FONTFACE_PLANE } from "@univerjs/engine-render";
+import { ActionRow, Button, Dropdown, MobileActionRowGroup, MobileDropdown, MobileSelect, Select, Tooltip, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
 import { DeleteIcon, IncreaseIcon, MoreHorizontalIcon, ReplyToCommentIcon, SuccessIcon, SuccessOutlineIcon } from "@univerjs/icons";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -69,19 +70,22 @@ function __decorate(decorators, target, key, desc) {
 //#endregion
 //#region src/services/thread-comment-panel.service.ts
 let ThreadCommentPanelService = class ThreadCommentPanelService extends Disposable {
-	constructor(_sidebarService, _univerInstanceService) {
+	constructor(_sidebarService) {
 		super();
 		this._sidebarService = _sidebarService;
-		this._univerInstanceService = _univerInstanceService;
 		_defineProperty(this, "_panelVisible", false);
 		_defineProperty(this, "_panelVisible$", new BehaviorSubject(false));
 		_defineProperty(this, "_activeCommentId", void 0);
 		_defineProperty(this, "_activeCommentId$", new BehaviorSubject(void 0));
+		_defineProperty(this, "_hoveredCommentId", void 0);
+		_defineProperty(this, "_hoveredCommentId$", new BehaviorSubject(void 0));
 		_defineProperty(this, "panelVisible$", this._panelVisible$.asObservable());
 		_defineProperty(this, "activeCommentId$", this._activeCommentId$.asObservable());
+		_defineProperty(this, "hoveredCommentId$", this._hoveredCommentId$.asObservable());
 		this._init();
 		this.disposeWithMe(() => {
 			this._activeCommentId$.complete();
+			this._hoveredCommentId$.complete();
 			this._panelVisible$.complete();
 		});
 	}
@@ -89,9 +93,6 @@ let ThreadCommentPanelService = class ThreadCommentPanelService extends Disposab
 		this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe((opt) => {
 			if (!opt.visible) this.setPanelVisible(false);
 		}));
-		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(filter((sheet) => !sheet)).subscribe(() => {
-			this._sidebarService.close();
-		}));
 	}
 	get panelVisible() {
 		return this._panelVisible;
@@ -99,16 +100,24 @@ let ThreadCommentPanelService = class ThreadCommentPanelService extends Disposab
 	get activeCommentId() {
 		return this._activeCommentId;
 	}
+	get hoveredCommentId() {
+		return this._hoveredCommentId;
+	}
 	setPanelVisible(visible) {
 		this._panelVisible = visible;
 		this._panelVisible$.next(visible);
+		if (!visible) this.setHoveredComment(void 0);
 	}
 	setActiveComment(commentInfo) {
 		this._activeCommentId = commentInfo;
 		this._activeCommentId$.next(commentInfo);
 	}
+	setHoveredComment(commentInfo) {
+		this._hoveredCommentId = commentInfo;
+		this._hoveredCommentId$.next(commentInfo);
+	}
 };
-ThreadCommentPanelService = __decorate([__decorateParam(0, Inject(ISidebarService)), __decorateParam(1, IUniverInstanceService)], ThreadCommentPanelService);
+ThreadCommentPanelService = __decorate([__decorateParam(0, Inject(ISidebarService))], ThreadCommentPanelService);
 
 //#endregion
 //#region src/commands/operations/comment.operations.ts
@@ -124,7 +133,7 @@ const SetActiveCommentOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/thread-comment-ui";
-var version = "1.0.0-insiders.20260809-70eefdd";
+var version = "1.0.0-rc.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -132,6 +141,72 @@ const THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY = "thread-comment-ui.config";
 const configSymbol = Symbol(THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
+//#endregion
+//#region src/services/thread-comment-draft.service.ts
+let ThreadCommentDraftService = class ThreadCommentDraftService extends Disposable {
+	constructor(instanceService, _userManagerService) {
+		super();
+		this._userManagerService = _userManagerService;
+		_defineProperty(this, "_placementType$", new BehaviorSubject(null));
+		_defineProperty(this, "_draft$", new BehaviorSubject(null));
+		_defineProperty(this, "_placementUnitId", void 0);
+		_defineProperty(this, "_ownerUserId", void 0);
+		_defineProperty(this, "placementType$", this._placementType$.asObservable());
+		_defineProperty(this, "draft$", this._draft$.asObservable());
+		this.disposeWithMe(instanceService.unitDisposed$.subscribe((unit) => {
+			var _this$draft;
+			if (((_this$draft = this.draft) === null || _this$draft === void 0 ? void 0 : _this$draft.unitId) === unit.getUnitId() || this._placementUnitId === unit.getUnitId()) this.cancel();
+		}));
+		this.disposeWithMe(instanceService.focused$.subscribe((unitId) => {
+			if (unitId && this._placementUnitId && unitId !== this._placementUnitId) this.cancel();
+		}));
+		this.disposeWithMe(this._userManagerService.currentUser$.subscribe((user) => {
+			if (this._ownerUserId && (user === null || user === void 0 ? void 0 : user.userID) !== this._ownerUserId) this.cancel();
+		}));
+		if (typeof window !== "undefined") {
+			const cancelPlacement = (event) => {
+				if (event.key === "Escape" && (this.placementType || this.draft)) this.cancel();
+			};
+			window.addEventListener("keydown", cancelPlacement);
+			this.disposeWithMe(toDisposable(() => window.removeEventListener("keydown", cancelPlacement)));
+		}
+	}
+	get placementType() {
+		return this._placementType$.value;
+	}
+	get draft() {
+		return this._draft$.value;
+	}
+	startPlacement(type, unitId) {
+		if (this.placementType === type && this._placementUnitId === unitId) {
+			this.cancel();
+			return;
+		}
+		this._ownerUserId = this._userManagerService.getCurrentUser().userID;
+		this._placementUnitId = unitId;
+		this._draft$.next(null);
+		this._placementType$.next(type);
+	}
+	place(draft) {
+		this._ownerUserId = this._userManagerService.getCurrentUser().userID;
+		this._placementUnitId = void 0;
+		this._placementType$.next(null);
+		this._draft$.next(draft);
+	}
+	cancel() {
+		this._ownerUserId = void 0;
+		this._placementUnitId = void 0;
+		this._placementType$.next(null);
+		this._draft$.next(null);
+	}
+	dispose() {
+		this._placementType$.complete();
+		this._draft$.complete();
+		super.dispose();
+	}
+};
+ThreadCommentDraftService = __decorate([__decorateParam(0, IUniverInstanceService), __decorateParam(1, Inject(UserManagerService))], ThreadCommentDraftService);
+
 //#endregion
 //#region src/types/const.ts
 /**
@@ -151,6 +226,38 @@ const defaultPluginConfig = {};
 */
 const PLUGIN_NAME = "UNIVER_THREAD_COMMENT_UI_PLUGIN";
 
+//#endregion
+//#region src/mobile-plugin.ts
+let UniverThreadCommentMobileUIPlugin = class UniverThreadCommentMobileUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._commandService = _commandService;
+		this._configService = _configService;
+		const { menu, ...rest } = merge({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		var _this$_config;
+		mergeOverrideWithDependencies([[ThreadCommentDraftService], [ThreadCommentPanelService]], (_this$_config = this._config) === null || _this$_config === void 0 ? void 0 : _this$_config.overrides).forEach((dependency) => {
+			this._injector.add(dependency);
+		});
+		this._commandService.registerCommand(SetActiveCommentOperation);
+	}
+};
+_defineProperty(UniverThreadCommentMobileUIPlugin, "pluginName", PLUGIN_NAME);
+_defineProperty(UniverThreadCommentMobileUIPlugin, "packageName", name);
+_defineProperty(UniverThreadCommentMobileUIPlugin, "version", version);
+_defineProperty(UniverThreadCommentMobileUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
+UniverThreadCommentMobileUIPlugin = __decorate([
+	DependentOn(UniverThreadCommentPlugin, UniverDocsUIPlugin, UniverMobileUIPlugin),
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, ICommandService),
+	__decorateParam(3, IConfigService)
+], UniverThreadCommentMobileUIPlugin);
+
 //#endregion
 //#region src/plugin.ts
 let UniverThreadCommentUIPlugin = class UniverThreadCommentUIPlugin extends Plugin {
@@ -166,7 +273,7 @@ let UniverThreadCommentUIPlugin = class UniverThreadCommentUIPlugin extends Plug
 	}
 	onStarting() {
 		var _this$_config;
-		mergeOverrideWithDependencies([[ThreadCommentPanelService]], (_this$_config = this._config) === null || _this$_config === void 0 ? void 0 : _this$_config.overrides).forEach((dep) => {
+		mergeOverrideWithDependencies([[ThreadCommentDraftService], [ThreadCommentPanelService]], (_this$_config = this._config) === null || _this$_config === void 0 ? void 0 : _this$_config.overrides).forEach((dep) => {
 			this._injector.add(dep);
 		});
 		[SetActiveCommentOperation].forEach((command) => {
@@ -185,8 +292,175 @@ UniverThreadCommentUIPlugin = __decorate([
 	__decorateParam(3, IConfigService)
 ], UniverThreadCommentUIPlugin);
 
+//#endregion
+//#region src/render-objects/thread-comment-canvas-overlay.ts
+const MARKER_SIZE = 24;
+const MARKER_IDLE_OPACITY = .58;
+const MARKER_PREVIEW_OPACITY = .42;
+const UNDERLINE_WIDTH = 2;
+const UNDERLINE_HIT_PADDING = 4;
+const OUTLINE_PADDING = 2;
+var ThreadCommentCanvasOverlay = class extends BaseObject {
+	constructor(key, state) {
+		super(key);
+		_defineProperty(this, "_state", void 0);
+		_defineProperty(this, "_hoveredCommentId", null);
+		_defineProperty(this, "_hitCommentId", null);
+		this.evented = true;
+		this._state = state;
+		this.show();
+	}
+	get hitCommentId() {
+		return this._hitCommentId;
+	}
+	updateState(state) {
+		this._state = {
+			...this._state,
+			...state
+		};
+		if (this._hitCommentId && !this._containsComment(this._hitCommentId)) this._hitCommentId = null;
+		if (this._hoveredCommentId && !this._containsComment(this._hoveredCommentId)) this._hoveredCommentId = null;
+		if ("previewMarker" in state || "previewUnderline" in state) this.makeDirtyNoDebounce(true);
+		else this.makeDirty(true);
+	}
+	clearHover() {
+		if (this._hoveredCommentId) {
+			this._hoveredCommentId = null;
+			this.makeDirty(true);
+		}
+		this._hitCommentId = null;
+	}
+	isHit(coord) {
+		const zoomRatio = this._getZoomRatio();
+		const halfSize = MARKER_SIZE / zoomRatio / 2;
+		let marker;
+		for (let index = this._state.markers.length - 1; index >= 0; index -= 1) {
+			const item = this._state.markers[index];
+			if (!item) continue;
+			if (coord.x >= item.x - halfSize && coord.x <= item.x + halfSize && coord.y >= item.y - halfSize && coord.y <= item.y + halfSize) {
+				marker = item;
+				break;
+			}
+		}
+		let underline;
+		if (!marker) for (let index = this._state.underlines.length - 1; index >= 0; index -= 1) {
+			const item = this._state.underlines[index];
+			if (!item) continue;
+			if (coord.x >= item.left && coord.x <= item.left + item.width && Math.abs(coord.y - item.top) <= UNDERLINE_HIT_PADDING / zoomRatio) {
+				underline = item;
+				break;
+			}
+		}
+		const commentId = (marker === null || marker === void 0 ? void 0 : marker.commentId) ?? (underline === null || underline === void 0 ? void 0 : underline.commentId) ?? null;
+		this._hitCommentId = commentId;
+		if (commentId !== this._hoveredCommentId) {
+			this._hoveredCommentId = commentId;
+			this.makeDirty(true);
+		}
+		return commentId !== null;
+	}
+	render(ctx, _bounds) {
+		var _this$_state$focusOut;
+		const zoomRatio = this._getZoomRatio();
+		this._state.underlines.forEach((underline) => this._renderUnderline(ctx, underline, zoomRatio, 1));
+		(_this$_state$focusOut = this._state.focusOutlines) === null || _this$_state$focusOut === void 0 || _this$_state$focusOut.forEach((outline) => this._renderOutline(ctx, outline, zoomRatio));
+		if (this._state.previewUnderline) this._renderUnderline(ctx, this._state.previewUnderline, zoomRatio, MARKER_PREVIEW_OPACITY);
+		this._state.markers.forEach((marker) => {
+			var _this$_state$focusedC;
+			return this._renderMarker(ctx, marker, zoomRatio, this._markerContainsComment(marker, this._hoveredCommentId) || ((_this$_state$focusedC = this._state.focusedCommentIds) === null || _this$_state$focusedC === void 0 ? void 0 : _this$_state$focusedC.some((commentId) => this._markerContainsComment(marker, commentId))) ? 1 : MARKER_IDLE_OPACITY);
+		});
+		if (this._state.previewMarker) this._renderMarker(ctx, this._state.previewMarker, zoomRatio, MARKER_PREVIEW_OPACITY);
+		this.makeDirty(false);
+		return this;
+	}
+	_getZoomRatio() {
+		return Number.isFinite(this._state.zoomRatio) && this._state.zoomRatio > 0 ? this._state.zoomRatio : 1;
+	}
+	_containsComment(commentId) {
+		return this._state.markers.some((marker) => this._markerContainsComment(marker, commentId)) || this._state.underlines.some((underline) => underline.commentId === commentId);
+	}
+	_markerContainsComment(marker, commentId) {
+		var _marker$commentIds;
+		return commentId != null && (marker.commentId === commentId || ((_marker$commentIds = marker.commentIds) === null || _marker$commentIds === void 0 ? void 0 : _marker$commentIds.includes(commentId)) === true);
+	}
+	_renderUnderline(ctx, underline, zoomRatio, opacity) {
+		ctx.save();
+		ctx.globalAlpha = opacity;
+		ctx.strokeStyle = this._state.accentColor;
+		ctx.lineWidth = UNDERLINE_WIDTH / zoomRatio;
+		ctx.beginPath();
+		ctx.moveTo(underline.left, underline.top);
+		ctx.lineTo(underline.left + underline.width, underline.top);
+		ctx.stroke();
+		ctx.restore();
+	}
+	_renderOutline(ctx, outline, zoomRatio) {
+		const padding = OUTLINE_PADDING / zoomRatio;
+		ctx.save();
+		ctx.strokeStyle = this._state.accentColor;
+		ctx.lineWidth = UNDERLINE_WIDTH / zoomRatio;
+		ctx.strokeRect(outline.left - padding, outline.top - padding, outline.width + padding * 2, outline.height + padding * 2);
+		ctx.restore();
+	}
+	_renderMarker(ctx, marker, zoomRatio, opacity) {
+		const size = MARKER_SIZE / zoomRatio;
+		const left = marker.x - size / 2;
+		const top = marker.y - size / 2;
+		const radius = 4 / zoomRatio;
+		const tail = 4 / zoomRatio;
+		ctx.save();
+		ctx.globalAlpha = opacity;
+		ctx.fillStyle = this._state.accentColor;
+		ctx.strokeStyle = this._state.outlineColor;
+		ctx.lineWidth = 1.5 / zoomRatio;
+		ctx.beginPath();
+		ctx.moveTo(left + radius, top);
+		ctx.lineTo(left + size - radius, top);
+		ctx.quadraticCurveTo(left + size, top, left + size, top + radius);
+		ctx.lineTo(left + size, top + size - tail - radius);
+		ctx.quadraticCurveTo(left + size, top + size - tail, left + size - radius, top + size - tail);
+		ctx.lineTo(left + size / 2 + tail, top + size - tail);
+		ctx.lineTo(left + size / 2, top + size);
+		ctx.lineTo(left + size / 2 - tail, top + size - tail);
+		ctx.lineTo(left + radius, top + size - tail);
+		ctx.quadraticCurveTo(left, top + size - tail, left, top + size - tail - radius);
+		ctx.lineTo(left, top + radius);
+		ctx.quadraticCurveTo(left, top, left + radius, top);
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+		ctx.fillStyle = this._state.foregroundColor;
+		if ((marker.count ?? 1) > 1) {
+			ctx.font = `600 ${11 / zoomRatio}px ${DEFAULT_FONTFACE_PLANE}`;
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillText(String(marker.count), marker.x, top + size * .42);
+		} else {
+			const dotRadius = 1.2 / zoomRatio;
+			const dotY = top + size * .43;
+			[
+				.32,
+				.5,
+				.68
+			].forEach((ratio) => {
+				ctx.beginPath();
+				ctx.arc(left + size * ratio, dotY, dotRadius, 0, Math.PI * 2);
+				ctx.fill();
+			});
+		}
+		ctx.restore();
+	}
+};
+
 //#endregion
 //#region src/views/thread-comment-panel/util.ts
+function isSameThreadCommentTarget(active, comment) {
+	return (active === null || active === void 0 ? void 0 : active.unitId) === comment.unitId && active.subUnitId === comment.subUnitId && active.commentId === comment.id;
+}
+function shouldClearThreadCommentTarget(active, currentUnitId, commentExists) {
+	if (!active) return false;
+	return active.unitId !== currentUnitId || !commentExists;
+}
 function getThreadCommentPanelItemKey(comment, index, section) {
 	if (comment.id) return comment.id;
 	return [
@@ -299,29 +573,60 @@ function getSnapshot(body) {
 	};
 }
 const ThreadCommentEditor = forwardRef((props, ref) => {
-	const { comment, onSave, id, onCancel, autoFocus, unitId, type, editorId } = props;
+	const { comment, onSave, id, onCancel, autoFocus, unitId, type, editorId, ActionRowComponent = ActionRow } = props;
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const [editing, setEditing] = useState(false);
+	const [submitting, setSubmitting] = useState(false);
+	const submittingRef = useRef(false);
+	const mountedRef = useRef(true);
 	const editorService = useDependency(IEditorService);
-	const editor = useRef(null);
+	const editorRef = useRef(null);
 	const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
 	const [canSubmit, setCanSubmit] = useState(() => {
 		var _comment$text;
 		return BuildTextUtils.transform.getPlainText((comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) ?? "");
 	});
 	const keyboardEventConfig = useMemo(() => ({
-		keyCodes: [{ keyCode: KeyCode.ENTER }],
+		keyCodes: [
+			{ keyCode: KeyCode.ENTER },
+			{ keyCode: KeyCode.BACKSPACE },
+			{ keyCode: KeyCode.DELETE }
+		],
 		handler: (keyCode) => {
-			if (keyCode === KeyCode.ENTER) commandService.executeCommand(BreakLineCommand.id);
+			let commandId;
+			switch (keyCode) {
+				case KeyCode.ENTER:
+					commandId = BreakLineCommand.id;
+					break;
+				case KeyCode.BACKSPACE:
+					commandId = DeleteLeftCommand.id;
+					break;
+				case KeyCode.DELETE:
+					commandId = DeleteRightCommand.id;
+					break;
+				default: return;
+			}
+			focusThreadCommentEditor(editorService, editorId, editorRef.current);
+			commandService.executeCommand(commandId).then(() => {
+				if (keyCode !== KeyCode.ENTER && mountedRef.current) {
+					var _editorRef$current;
+					const dataStream = ((_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.getDocumentData().body) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.dataStream) ?? "";
+					setCanSubmit(BuildTextUtils.transform.getPlainText(dataStream));
+				}
+			});
 		}
-	}), [commandService]);
+	}), [
+		commandService,
+		editorId,
+		editorService
+	]);
 	useImperativeHandle(ref, () => ({ reply(text) {
-		var _editor$current;
-		if (!editor.current) return;
-		focusThreadCommentEditor(editorService, editorId, editor.current);
+		var _editorRef$current2;
+		if (!editorRef.current) return;
+		focusThreadCommentEditor(editorService, editorId, editorRef.current);
 		const documentData = getSnapshot(text);
-		(_editor$current = editor.current) === null || _editor$current === void 0 || _editor$current.setDocumentData(documentData, [{
+		(_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 || _editorRef$current2.setDocumentData(documentData, [{
 			startOffset: documentData.body.dataStream.length - 2,
 			endOffset: documentData.body.dataStream.length - 2,
 			collapsed: true
@@ -329,29 +634,44 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
 		setCanSubmit(BuildTextUtils.transform.getPlainText(documentData.body.dataStream));
 		setEditing(true);
 	} }));
-	const handleSave = () => {
-		const currentEditor = editor.current;
-		if (currentEditor) {
-			const newText = Tools.deepClone(currentEditor.getDocumentData().body);
+	const handleSave = async () => {
+		const currentEditor = editorRef.current;
+		if (!currentEditor || submittingRef.current) return;
+		const newText = Tools.deepClone(currentEditor.getDocumentData().body);
+		submittingRef.current = true;
+		setSubmitting(true);
+		try {
+			if (await (onSave === null || onSave === void 0 ? void 0 : onSave({
+				...comment,
+				text: newText
+			})) === false) return;
+			if (!mountedRef.current) return;
 			currentEditor.blur();
 			currentEditor.replaceText("", false);
 			currentEditor.setSelectionRanges([], false);
 			setCanSubmit("");
 			setEditing(false);
-			onSave === null || onSave === void 0 || onSave({
-				...comment,
-				text: newText
-			});
+		} catch {
+			return;
+		} finally {
+			submittingRef.current = false;
+			if (mountedRef.current) setSubmitting(false);
 		}
 	};
 	const handleEditorMouseDown = () => {
-		focusThreadCommentEditor(editorService, editorId, editor.current);
+		focusThreadCommentEditor(editorService, editorId, editorRef.current);
 		setEditing(true);
 	};
+	useEffect(() => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+		};
+	}, []);
 	useEffect(() => {
 		if (!autoFocus) return;
 		const timer = setTimeout(() => {
-			focusThreadCommentEditor(editorService, editorId, editor.current);
+			focusThreadCommentEditor(editorService, editorId, editorRef.current);
 		});
 		return () => clearTimeout(timer);
 	}, [
@@ -365,7 +685,7 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
 			onMouseDown: handleEditorMouseDown,
 			children: /* @__PURE__ */ jsx(RichTextEditor, {
 				className: "univer-w-full",
-				editorRef: editor,
+				editorRef,
 				editorId,
 				preserveHostFocus: true,
 				autoFocus,
@@ -385,12 +705,12 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
 					}, 30);
 				}
 			})
-		}), editing ? /* @__PURE__ */ jsxs("div", {
+		}), editing ? /* @__PURE__ */ jsxs(ActionRowComponent, {
 			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2",
 			children: [/* @__PURE__ */ jsx(Button, {
 				type: "button",
 				onClick: () => {
-					const currentEditor = editor.current;
+					const currentEditor = editorRef.current;
 					currentEditor === null || currentEditor === void 0 || currentEditor.blur();
 					currentEditor === null || currentEditor === void 0 || currentEditor.replaceText("", false);
 					currentEditor === null || currentEditor === void 0 || currentEditor.setSelectionRanges([], false);
@@ -403,7 +723,7 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
 			}), /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				variant: "primary",
-				disabled: !canSubmit,
+				disabled: !canSubmit || submitting,
 				onClick: handleSave,
 				children: localeService.t(id ? "thread-comment-ui.editor.save" : "thread-comment-ui.editor.reply")
 			})]
@@ -433,7 +753,7 @@ function formatCommentDateTime(value, region) {
 	});
 }
 const ThreadCommentItem = (props) => {
-	const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment, type, threadCommentEditorId } = props;
+	const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment, onAfterDeleteComment, type, threadCommentEditorId, DropdownComponent, EditorComponent } = props;
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const regionService = useDependency(RegionService);
@@ -448,14 +768,20 @@ const ThreadCommentItem = (props) => {
 	const currentRegion = useObservable(regionService.currentRegion$, regionService.getCurrentRegion());
 	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
-	const handleDeleteItem = () => {
+	const handleDeleteItem = async () => {
 		if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
-		commandService.executeCommand(isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id, {
-			unitId,
-			subUnitId,
-			commentId: item.id
-		});
-		if (isRoot) onClose === null || onClose === void 0 || onClose();
+		try {
+			if (await commandService.executeCommand(isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id, {
+				unitId,
+				subUnitId,
+				commentId: item.id
+			})) {
+				try {
+					await (onAfterDeleteComment === null || onAfterDeleteComment === void 0 ? void 0 : onAfterDeleteComment(item));
+				} catch {}
+				if (isRoot) onClose === null || onClose === void 0 || onClose();
+			}
+		} catch {}
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-relative univer-mb-3 univer-pl-[30px] rtl:univer-pl-0 rtl:univer-pr-[30px]",
@@ -471,39 +797,47 @@ const ThreadCommentItem = (props) => {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "univer-text-sm univer-font-medium univer-leading-5",
 					children: (user === null || user === void 0 ? void 0 : user.name) || " "
-				}), /* @__PURE__ */ jsxs("div", { children: [isMock || resolved ? null : showReply && user ? /* @__PURE__ */ jsx("div", {
-					className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800",
+				}), /* @__PURE__ */ jsxs("div", { children: [isMock || resolved ? null : showReply && user ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": localeService.t("thread-comment-ui.editor.reply"),
+					className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-border-0 univer-bg-transparent univer-p-0 univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800",
 					onClick: () => onReply(user),
 					children: /* @__PURE__ */ jsx(ReplyToCommentIcon, {})
-				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ jsx(Dropdown, {
+				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ jsx(DropdownComponent, {
 					overlay: /* @__PURE__ */ jsx("div", {
 						dir: direction,
 						className: "univer-rounded-lg",
 						children: /* @__PURE__ */ jsxs("ul", {
-							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm rtl:univer-text-right [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
-							children: [/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm rtl:univer-text-right [&_button]:univer-block [&_button]:univer-w-full [&_button]:univer-cursor-pointer [&_button]:univer-rounded [&_button]:univer-border-0 [&_button]:univer-bg-transparent [&_button]:univer-px-2 [&_button]:univer-py-1.5 [&_button]:univer-text-left [&_button]:univer-transition-colors rtl:[&_button]:univer-text-right",
+							children: [/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+								type: "button",
 								className: "hover:univer-bg-gray-200",
 								onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
 								children: localeService.t("thread-comment-ui.item.edit")
-							}) }), /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+							}) }), /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+								type: "button",
 								className: "hover:univer-bg-gray-200",
 								onClick: handleDeleteItem,
 								children: localeService.t("thread-comment-ui.item.delete")
 							}) })]
 						})
 					}),
-					children: /* @__PURE__ */ jsx("div", {
-						className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": localeService.t("thread-comment-ui.item.more"),
+						className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-border-0 univer-bg-transparent univer-p-0 univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800",
 						children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
 					})
 				}) : null] })]
 			}) : null,
 			dateText && /* @__PURE__ */ jsx("time", {
-				dir: "ltr",
 				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 rtl:univer-text-right dark:!univer-text-gray-200",
-				children: dateText
+				children: /* @__PURE__ */ jsx("bdo", {
+					dir: "ltr",
+					children: dateText
+				})
 			}),
-			editing ? /* @__PURE__ */ jsx(ThreadCommentEditor, {
+			editing ? /* @__PURE__ */ jsx(EditorComponent, {
 				type,
 				id: item.id,
 				comment: item,
@@ -512,9 +846,8 @@ const ThreadCommentItem = (props) => {
 				unitId,
 				subUnitId,
 				editorId: threadCommentEditorId,
-				onSave: ({ text, attachments }) => {
-					onEditingChange === null || onEditingChange === void 0 || onEditingChange(false);
-					commandService.executeCommand(UpdateCommentCommand.id, {
+				onSave: async ({ text, attachments }) => {
+					const success = await commandService.executeCommand(UpdateCommentCommand.id, {
 						unitId,
 						subUnitId,
 						payload: {
@@ -523,27 +856,35 @@ const ThreadCommentItem = (props) => {
 							attachments
 						}
 					});
+					if (success) onEditingChange === null || onEditingChange === void 0 || onEditingChange(false);
+					return success;
 				}
 			}) : /* @__PURE__ */ jsx("div", {
-				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
-				children: transformDocument2TextNodes(item.text).map((paragraph, i) => /* @__PURE__ */ jsx("div", {
-					className: "univer-break-words",
-					children: paragraph.map((item, i) => {
-						switch (item.type) {
-							case "mention": return /* @__PURE__ */ jsxs("a", {
-								className: "univer-text-primary-600",
-								children: [item.content.label, " "]
-							}, i);
-							default: return item.content;
-						}
-					})
-				}, i))
+				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
+				children: transformDocument2TextNodes(item.text).map((paragraph, paragraphIndex) => {
+					var _item$text$paragraphs;
+					let offset = 0;
+					return /* @__PURE__ */ jsx("div", {
+						className: "univer-break-words",
+						children: paragraph.map((node) => {
+							const key = offset;
+							offset += node.type === "mention" ? node.content.label.length : node.content.length;
+							switch (node.type) {
+								case "mention": return /* @__PURE__ */ jsxs("a", {
+									className: "univer-text-primary-600",
+									children: [node.content.label, " "]
+								}, key);
+								default: return node.content;
+							}
+						})
+					}, (_item$text$paragraphs = item.text.paragraphs) === null || _item$text$paragraphs === void 0 || (_item$text$paragraphs = _item$text$paragraphs[paragraphIndex]) === null || _item$text$paragraphs === void 0 ? void 0 : _item$text$paragraphs.paragraphId);
+				})
 			})
 		]
 	});
 };
 const ThreadCommentTree = (props) => {
-	const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
+	const { id, unitId, subUnitId, refStr, displayRef, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onAfterDeleteComment, onResolve, type, style, full, DropdownComponent = Dropdown, EditorComponent = ThreadCommentEditor } = props;
 	const threadCommentModel = useDependency(ThreadCommentModel);
 	const [isHover, setIsHover] = useState(false);
 	const [editingId, setEditingId] = useState("");
@@ -556,6 +897,7 @@ const ThreadCommentTree = (props) => {
 		updte$
 	]);
 	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
 	const userManagerService = useDependency(UserManagerService);
 	const resolved = comments === null || comments === void 0 ? void 0 : comments.root.resolved;
 	const currentUser = useObservable(userManagerService.currentUser$);
@@ -571,40 +913,49 @@ const ThreadCommentTree = (props) => {
 		subUnitId,
 		threadId: ""
 	}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
-	const scroller = useRef(null);
-	const handleResolve = (e) => {
+	const scrollerRef = useRef(null);
+	const handleMouseLeave = useEvent(onMouseLeave);
+	const handleResolve = async (e) => {
 		e.stopPropagation();
-		if (!resolved) commandService.executeCommand(SetActiveCommentOperation.id);
-		else commandService.executeCommand(SetActiveCommentOperation.id, {
-			unitId,
-			subUnitId,
-			commentId: id
-		});
-		commandService.executeCommand(ResolveCommentCommand.id, {
-			unitId,
-			subUnitId,
-			commentId: id,
-			resolved: !resolved
-		});
-		onResolve === null || onResolve === void 0 || onResolve(!resolved);
+		try {
+			if (!await commandService.executeCommand(ResolveCommentCommand.id, {
+				unitId,
+				subUnitId,
+				commentId: id,
+				resolved: !resolved
+			})) return;
+			await commandService.executeCommand(SetActiveCommentOperation.id, resolved ? {
+				unitId,
+				subUnitId,
+				commentId: id
+			} : void 0);
+			onResolve === null || onResolve === void 0 || onResolve(!resolved);
+		} catch {}
 	};
-	const handleDeleteRoot = (e) => {
+	const handleDeleteRoot = async (e) => {
 		e.stopPropagation();
-		commandService.executeCommand(SetActiveCommentOperation.id);
-		if ((comments === null || comments === void 0 ? void 0 : comments.root) && (onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(comments.root)) === false) return;
-		commandService.executeCommand(DeleteCommentTreeCommand.id, {
-			unitId,
-			subUnitId,
-			commentId: id
-		});
-		onClose === null || onClose === void 0 || onClose();
+		const root = comments === null || comments === void 0 ? void 0 : comments.root;
+		if (!root || (onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(root)) === false) return;
+		try {
+			if (await commandService.executeCommand(DeleteCommentTreeCommand.id, {
+				unitId,
+				subUnitId,
+				commentId: id
+			})) {
+				try {
+					await (onAfterDeleteComment === null || onAfterDeleteComment === void 0 ? void 0 : onAfterDeleteComment(root));
+				} catch {}
+				await commandService.executeCommand(SetActiveCommentOperation.id);
+				onClose === null || onClose === void 0 || onClose();
+			}
+		} catch {}
 	};
 	useEffect(() => {
-		return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-	}, []);
+		return handleMouseLeave;
+	}, [handleMouseLeave]);
 	const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
 	const editorVisible = showEdit && !editingId && !resolved;
-	const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
+	const title = `${displayRef ?? refStr ?? (comments === null || comments === void 0 ? void 0 : comments.root.ref) ?? ""}${subUnitName ? " · " : ""}${subUnitName}`;
 	const threadCommentEditorId = getThreadCommentEditorId({
 		location,
 		unitId,
@@ -614,7 +965,7 @@ const ThreadCommentTree = (props) => {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		id: `${location}-${unitId}-${subUnitId}-${id}`,
-		className: clsx("univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white", borderClassName, {
+		className: clsx("univer-relative univer-box-border univer-rounded-md univer-bg-gray-0 univer-p-4 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-0", borderClassName, {
 			"univer-w-[278px]": !full,
 			"univer-w-full": full,
 			"univer-shadow": !resolved && (showHighlight || isHover || location === "CELL")
@@ -645,19 +996,23 @@ const ThreadCommentTree = (props) => {
 					})]
 				}), !!comments && /* @__PURE__ */ jsxs("div", {
 					className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: clsx("univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800", { "univer-text-green-500": resolved }),
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": localeService.t(resolved ? "thread-comment-ui.filter.status.unsolved" : "thread-comment-ui.filter.status.resolved"),
+						className: clsx("univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-border-0 univer-bg-transparent univer-p-0 univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800", { "univer-text-green-500": resolved }),
 						onClick: handleResolve,
 						children: resolved ? /* @__PURE__ */ jsx(SuccessIcon, {}) : /* @__PURE__ */ jsx(SuccessOutlineIcon, {})
-					}), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) === comments.root.personId ? /* @__PURE__ */ jsx("div", {
-						className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800",
+					}), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) === comments.root.personId ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": localeService.t("thread-comment-ui.item.delete"),
+						className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-border-0 univer-bg-transparent univer-p-0 univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800",
 						onClick: handleDeleteRoot,
 						children: /* @__PURE__ */ jsx(DeleteIcon, {})
 					}) : null]
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				ref: scroller,
+				ref: scrollerRef,
 				className: clsx("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName, location === "PANEL" && "-univer-mx-4 univer-px-4"),
 				children: renderComments.map((item) => /* @__PURE__ */ jsx(ThreadCommentItem, {
 					unitId,
@@ -668,6 +1023,8 @@ const ThreadCommentTree = (props) => {
 					resolved: comments === null || comments === void 0 ? void 0 : comments.root.resolved,
 					type,
 					threadCommentEditorId,
+					DropdownComponent,
+					EditorComponent,
 					onClose,
 					onEditingChange: (editing) => {
 						if (editing) setEditingId(item.id);
@@ -689,11 +1046,11 @@ const ThreadCommentTree = (props) => {
 							}]));
 						});
 					},
-					onAddComment,
-					onDeleteComment
+					onDeleteComment,
+					onAfterDeleteComment
 				}, item.id))
 			}),
-			editorVisible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ThreadCommentEditor, {
+			editorVisible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(EditorComponent, {
 				ref: editorRef,
 				type,
 				unitId,
@@ -712,13 +1069,18 @@ const ThreadCommentTree = (props) => {
 						subUnitId,
 						threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
 					};
-					if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
-					await commandService.executeCommand(AddCommentCommand.id, {
+					if (await (onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) {
+						if (!comments) onClose === null || onClose === void 0 || onClose();
+						return true;
+					}
+					const success = await commandService.executeCommand(AddCommentCommand.id, {
 						unitId,
 						subUnitId,
 						comment
 					});
-					if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight;
+					if (success && scrollerRef.current) scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+					if (success && !comments) onClose === null || onClose === void 0 || onClose();
+					return success;
 				},
 				autoFocus: autoFocus || !comments,
 				onCancel: () => {
@@ -732,22 +1094,25 @@ const ThreadCommentTree = (props) => {
 //#endregion
 //#region src/views/ThreadCommentPanel.tsx
 const ThreadCommentPanel = (props) => {
-	const { unitId, subUnitId$, type, onAdd, getSubUnitName, onResolve, sortComments, onItemLeave, onItemEnter, disableAdd, tempComment, onAddComment, onDeleteComment, showComments } = props;
+	const { unitId, subUnitId$, type, onAdd, getSubUnitName, onResolve, sortComments, onItemLeave, onItemEnter, disableAdd, tempComment, onAddComment, onDeleteComment, onAfterDeleteComment, showComments, formatRef, onTempCommentClose, autoFocusActiveComment = false, ActionRowComponent = ActionRow, SelectComponent = Select, ThreadCommentTreeComponent = ThreadCommentTree } = props;
 	const [unit, setUnit] = useState("all");
 	const [status, setStatus] = useState("all");
 	const localeService = useDependency(LocaleService);
 	const userService = useDependency(UserManagerService);
 	const threadCommentModel = useDependency(ThreadCommentModel);
-	const [unitComments, setUnitComments] = useState(() => threadCommentModel.getUnit(unitId));
-	const activeCommentId = useObservable(useDependency(ThreadCommentPanelService).activeCommentId$);
-	const update = useObservable(threadCommentModel.commentUpdate$);
+	const panelService = useDependency(ThreadCommentPanelService);
+	const activeCommentId = useObservable(panelService.activeCommentId$);
+	useObservable(threadCommentModel.commentUpdate$);
+	const unitComments = threadCommentModel.getUnit(unitId);
+	const scopedTempComment = (tempComment === null || tempComment === void 0 ? void 0 : tempComment.unitId) === unitId ? tempComment : null;
+	const shouldClearActiveTarget = shouldClearThreadCommentTarget(activeCommentId, unitId, activeCommentId ? Boolean(threadCommentModel.getComment(activeCommentId.unitId, activeCommentId.subUnitId, activeCommentId.commentId) || scopedTempComment && isSameThreadCommentTarget(activeCommentId, scopedTempComment)) : false);
 	const commandService = useDependency(ICommandService);
 	const subUnitId = useObservable(subUnitId$);
-	const shouldScroll = useRef(true);
+	const shouldScrollRef = useRef(true);
 	const location = "PANEL";
 	const currentUser = useObservable(userService.currentUser$);
 	const comments = useMemo(() => {
-		const allComments = unit === "all" ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId) ?? [];
+		const allComments = unit === "all" && type !== UniverInstanceType.UNIVER_SLIDE ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId);
 		const sort = sortComments ?? ((a) => a);
 		const res = allComments.map((i) => ({
 			...i.root,
@@ -766,7 +1131,8 @@ const ThreadCommentPanel = (props) => {
 		unit,
 		unitComments,
 		sortComments,
-		subUnitId
+		subUnitId,
+		type
 	]);
 	const commentsSorted = useMemo(() => [...comments.filter((comment) => !comment.resolved), ...comments.filter((comment) => comment.resolved)], [comments]);
 	const statuedComments = useMemo(() => {
@@ -782,7 +1148,7 @@ const ThreadCommentPanel = (props) => {
 		currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID,
 		status
 	]);
-	const renderComments = tempComment ? [tempComment, ...statuedComments] : statuedComments;
+	const renderComments = scopedTempComment ? [scopedTempComment, ...statuedComments] : statuedComments;
 	const unSolvedComments = renderComments.filter((comment) => !comment.resolved);
 	const solvedComments = renderComments.filter((comment) => comment.resolved);
 	const isFiltering = status !== "all" || unit !== "all";
@@ -791,24 +1157,49 @@ const ThreadCommentPanel = (props) => {
 		setUnit("all");
 	};
 	useEffect(() => {
-		if (unitId) setUnitComments(threadCommentModel.getUnit(unitId));
+		if (shouldClearActiveTarget) panelService.setActiveComment(void 0);
+	}, [panelService, shouldClearActiveTarget]);
+	useEffect(() => {
+		if (tempComment && (tempComment.unitId !== unitId || subUnitId && tempComment.subUnitId !== subUnitId)) onTempCommentClose === null || onTempCommentClose === void 0 || onTempCommentClose();
 	}, [
-		unitId,
-		threadCommentModel,
-		update
+		onTempCommentClose,
+		subUnitId,
+		tempComment,
+		unitId
+	]);
+	useEffect(() => {
+		if (!activeCommentId) return;
+		const handlePointerDown = (event) => {
+			const activeComment = panelService.activeCommentId;
+			const target = event.target;
+			if (event.button !== 0 || !activeComment || !(target instanceof Element)) return;
+			const activeElement = document.getElementById(`${location}-${activeComment.unitId}-${activeComment.subUnitId}-${activeComment.commentId}`);
+			if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.contains(target)) || target.closest("button, input, textarea, select, a, [contenteditable=\"true\"], [role=\"menu\"], [role=\"menuitem\"], [role=\"option\"], [role=\"listbox\"], [role=\"combobox\"], [role=\"separator\"]")) return;
+			commandService.executeCommand(SetActiveCommentOperation.id);
+			if (scopedTempComment && isSameThreadCommentTarget(activeComment, scopedTempComment)) onTempCommentClose === null || onTempCommentClose === void 0 || onTempCommentClose();
+		};
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+	}, [
+		activeCommentId,
+		commandService,
+		location,
+		onTempCommentClose,
+		panelService,
+		scopedTempComment
 	]);
 	useEffect(() => {
 		var _document$getElementB;
 		if (!activeCommentId) return;
-		if (!shouldScroll.current) {
-			shouldScroll.current = true;
+		if (!shouldScrollRef.current) {
+			shouldScrollRef.current = true;
 			return;
 		}
 		const { unitId, subUnitId, commentId } = activeCommentId;
 		const id = `${location}-${unitId}-${subUnitId}-${commentId}`;
 		(_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({ block: "center" });
-	}, [activeCommentId]);
-	const renderComment = (section) => (comment, index) => /* @__PURE__ */ jsx(ThreadCommentTree, {
+	}, [activeCommentId, location]);
+	const renderComment = (section) => (comment, index) => /* @__PURE__ */ jsx(ThreadCommentTreeComponent, {
 		full: true,
 		location,
 		getSubUnitName,
@@ -816,11 +1207,13 @@ const ThreadCommentPanel = (props) => {
 		unitId: comment.unitId,
 		subUnitId: comment.subUnitId,
 		refStr: comment.ref,
+		displayRef: formatRef === null || formatRef === void 0 ? void 0 : formatRef(comment),
 		type,
-		showEdit: (activeCommentId === null || activeCommentId === void 0 ? void 0 : activeCommentId.commentId) === comment.id,
-		showHighlight: (activeCommentId === null || activeCommentId === void 0 ? void 0 : activeCommentId.commentId) === comment.id,
+		showEdit: !comment.id || isSameThreadCommentTarget(activeCommentId, comment),
+		showHighlight: isSameThreadCommentTarget(activeCommentId, comment),
+		autoFocus: autoFocusActiveComment && isSameThreadCommentTarget(activeCommentId, comment),
 		onClick: () => {
-			shouldScroll.current = false;
+			shouldScrollRef.current = false;
 			if (!comment.resolved) commandService.executeCommand(SetActiveCommentOperation.id, {
 				unitId: comment.unitId,
 				subUnitId: comment.subUnitId,
@@ -829,17 +1222,30 @@ const ThreadCommentPanel = (props) => {
 			});
 			else commandService.executeCommand(SetActiveCommentOperation.id);
 		},
-		onMouseEnter: () => onItemEnter === null || onItemEnter === void 0 ? void 0 : onItemEnter(comment),
-		onMouseLeave: () => onItemLeave === null || onItemLeave === void 0 ? void 0 : onItemLeave(comment),
+		onMouseEnter: () => {
+			panelService.setHoveredComment({
+				unitId: comment.unitId,
+				subUnitId: comment.subUnitId,
+				commentId: comment.id,
+				trigger: "panel-hover"
+			});
+			onItemEnter === null || onItemEnter === void 0 || onItemEnter(comment);
+		},
+		onMouseLeave: () => {
+			if (isSameThreadCommentTarget(panelService.hoveredCommentId, comment)) panelService.setHoveredComment(void 0);
+			onItemLeave === null || onItemLeave === void 0 || onItemLeave(comment);
+		},
 		onAddComment,
 		onDeleteComment,
-		onResolve: (resolved) => onResolve === null || onResolve === void 0 ? void 0 : onResolve(comment.id, resolved)
+		onAfterDeleteComment,
+		onResolve: (resolved) => onResolve === null || onResolve === void 0 ? void 0 : onResolve(comment.id, resolved),
+		onClose: !comment.id ? onTempCommentClose : void 0
 	}, getThreadCommentPanelItemKey(comment, index, section));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between",
-			children: [type === UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ jsx(Select, {
+			children: [type === UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ jsx(SelectComponent, {
 				borderless: true,
 				value: unit,
 				options: [{
@@ -850,7 +1256,7 @@ const ThreadCommentPanel = (props) => {
 					label: localeService.t("thread-comment-ui.filter.sheet.all")
 				}],
 				onChange: setUnit
-			}) : null, /* @__PURE__ */ jsx(Select, {
+			}) : null, /* @__PURE__ */ jsx(SelectComponent, {
 				borderless: true,
 				value: status,
 				options: [
@@ -875,13 +1281,13 @@ const ThreadCommentPanel = (props) => {
 			})]
 		}), renderComments.length === 0 ? /* @__PURE__ */ jsxs("div", {
 			className: "univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
-			children: [localeService.t("thread-comment-ui.panel.empty"), isFiltering ? /* @__PURE__ */ jsx("div", {
+			children: [localeService.t("thread-comment-ui.panel.empty"), isFiltering ? /* @__PURE__ */ jsx(ActionRowComponent, {
 				className: "univer-mt-2 univer-flex univer-flex-row",
 				children: /* @__PURE__ */ jsx(Button, {
 					onClick: onReset,
 					children: localeService.t("thread-comment-ui.panel.reset")
 				})
-			}) : !disableAdd ? /* @__PURE__ */ jsx("div", {
+			}) : !disableAdd ? /* @__PURE__ */ jsx(ActionRowComponent, {
 				className: "univer-mt-2 univer-flex univer-flex-row",
 				children: /* @__PURE__ */ jsxs(Button, {
 					onClick: onAdd,
@@ -903,4 +1309,33 @@ const ThreadCommentPanel = (props) => {
 };
 
 //#endregion
-export { SetActiveCommentOperation, ThreadCommentPanel, ThreadCommentPanelService, ThreadCommentTree, ThreadCommentTreeLocation, UniverThreadCommentUIPlugin };
+//#region src/views/mobile/MobileThreadCommentEditor.tsx
+const MobileThreadCommentEditor = forwardRef((props, ref) => /* @__PURE__ */ jsx(ThreadCommentEditor, {
+	...props,
+	ref,
+	ActionRowComponent: MobileActionRowGroup
+}));
+
+//#endregion
+//#region src/views/mobile/MobileThreadCommentTree.tsx
+function MobileThreadCommentTree(props) {
+	return /* @__PURE__ */ jsx(ThreadCommentTree, {
+		...props,
+		DropdownComponent: MobileDropdown,
+		EditorComponent: MobileThreadCommentEditor
+	});
+}
+
+//#endregion
+//#region src/views/mobile/MobileThreadCommentPanel.tsx
+function MobileThreadCommentPanel(props) {
+	return /* @__PURE__ */ jsx(ThreadCommentPanel, {
+		...props,
+		ActionRowComponent: MobileActionRowGroup,
+		SelectComponent: MobileSelect,
+		ThreadCommentTreeComponent: MobileThreadCommentTree
+	});
+}
+
+//#endregion
+export { MobileThreadCommentPanel, MobileThreadCommentTree, SetActiveCommentOperation, ThreadCommentCanvasOverlay, ThreadCommentDraftService, ThreadCommentPanel, ThreadCommentPanelService, ThreadCommentTree, ThreadCommentTreeLocation, UniverThreadCommentMobileUIPlugin, UniverThreadCommentUIPlugin };