@univerjs/sheets-thread-comment-ui 1.0.0-insiders.20260813-7c9aa50 → 1.0.0

package/lib/cjs/index.js

@@ -1,17 +1,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 let _univerjs_core = require("@univerjs/core");
+let _univerjs_drawing = require("@univerjs/drawing");
 let _univerjs_sheets = require("@univerjs/sheets");
 let _univerjs_sheets_thread_comment = require("@univerjs/sheets-thread-comment");
+let _univerjs_thread_comment = require("@univerjs/thread-comment");
 let _univerjs_thread_comment_ui = require("@univerjs/thread-comment-ui");
 let _univerjs_ui = require("@univerjs/ui");
 let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
 let rxjs = require("rxjs");
 let _univerjs_engine_render = require("@univerjs/engine-render");
-let _univerjs_thread_comment = require("@univerjs/thread-comment");
 let _univerjs_icons = require("@univerjs/icons");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _univerjs_engine_formula = require("@univerjs/engine-formula");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/types/const.ts
 /**
@@ -31,10 +32,11 @@ let react = require("react");
 */
 const SHEETS_THREAD_COMMENT_MODAL = "univer.sheet.thread-comment-modal";
 const SHEETS_THREAD_COMMENT_PANEL = "univer.sheet.thread-comment-panel";
+const SHOW_ADD_SHEET_COMMENT_OPERATION_ID = "sheet.operation.show-comment-modal";
 const PLUGIN_NAME = "SHEET_THREAD_COMMENT_UI_PLUGIN";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -45,7 +47,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -58,14 +60,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -76,7 +78,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -84,7 +86,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -169,7 +171,7 @@ SheetsThreadCommentPopupService = __decorate([__decorateParam(0, (0, _univerjs_c
 //#region src/commands/operations/comment.operation.ts
 const ShowAddSheetCommentModalOperation = {
 	type: _univerjs_core.CommandType.OPERATION,
-	id: "sheet.operation.show-comment-modal",
+	id: SHOW_ADD_SHEET_COMMENT_OPERATION_ID,
 	handler(accessor) {
 		var _selectionManagerServ;
 		const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
@@ -210,26 +212,84 @@ const ToggleSheetCommentPanelOperation = {
 		if (panelService.panelVisible) {
 			sidebarService.close();
 			panelService.setPanelVisible(false);
-		} else {
-			sidebarService.open({
-				header: { title: "sheets-thread-comment-ui.panel.title" },
-				children: { label: SHEETS_THREAD_COMMENT_PANEL },
-				width: 360
-			});
-			panelService.setPanelVisible(true);
-		}
+		} else openSheetCommentPanel(sidebarService, panelService);
+		return true;
+	}
+};
+const OpenSheetCommentPanelOperation = {
+	id: "sheet.operation.open-comment-panel",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler(accessor) {
+		openSheetCommentPanel(accessor.get(_univerjs_ui.ISidebarService), accessor.get(_univerjs_thread_comment_ui.ThreadCommentPanelService));
+		return true;
+	}
+};
+function openSheetCommentPanel(sidebarService, panelService) {
+	var _sidebarService$optio;
+	if (!panelService.panelVisible || ((_sidebarService$optio = sidebarService.options.children) === null || _sidebarService$optio === void 0 ? void 0 : _sidebarService$optio.label) !== "univer.sheet.thread-comment-panel") sidebarService.open({
+		header: { title: "sheets-thread-comment-ui.panel.title" },
+		children: { label: SHEETS_THREAD_COMMENT_PANEL },
+		width: 360,
+		onClose: () => panelService.setPanelVisible(false)
+	});
+	panelService.setPanelVisible(true);
+}
+const AddSheetDrawingCommentOperation = {
+	id: "sheet.operation.add-drawing-comment",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler(accessor) {
+		var _workbook$getActiveSh;
+		const drawing = accessor.get(_univerjs_drawing.IDrawingManagerService).getFocusDrawings()[0];
+		const workbook = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		if (!drawing || !workbook || drawing.unitId !== workbook.getUnitId() || drawing.subUnitId !== ((_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId())) return false;
+		accessor.get(_univerjs_thread_comment_ui.ThreadCommentDraftService).place({
+			unitId: drawing.unitId,
+			subUnitId: drawing.subUnitId,
+			anchor: {
+				kind: _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING,
+				pageId: drawing.subUnitId,
+				elementId: drawing.drawingId
+			}
+		});
+		const panelService = accessor.get(_univerjs_thread_comment_ui.ThreadCommentPanelService);
+		accessor.get(_univerjs_ui.ISidebarService).open({
+			header: { title: "sheets-thread-comment-ui.panel.title" },
+			children: { label: SHEETS_THREAD_COMMENT_PANEL },
+			width: 360,
+			onClose: () => panelService.setPanelVisible(false)
+		});
+		panelService.setPanelVisible(true);
 		return true;
 	}
 };
 
 //#endregion
 //#region src/menu/menu.ts
+function getDrawingCommentDisable$(accessor) {
+	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	const permissionService = accessor.get(_univerjs_core.IPermissionService);
+	return (0, _univerjs_sheets_ui.deriveStateFromActiveSheet$)(univerInstanceService, true, ({ workbook, worksheet }) => {
+		const unitId = workbook.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		return permissionService.composePermission$([new _univerjs_sheets.WorkbookCommentPermission(unitId).id, new _univerjs_sheets.WorksheetViewPermission(unitId, subUnitId).id]).pipe((0, rxjs.map)((permissions) => permissions.some((permission) => permission.value === false)));
+	});
+}
+const drawingCommentMenuFactory = (accessor) => ({
+	id: AddSheetDrawingCommentOperation.id,
+	type: _univerjs_ui.MenuItemType.BUTTON,
+	icon: "InsertCommentDoubleIcon",
+	title: "sheets-thread-comment-ui.menu.addComment",
+	tooltip: "sheets-thread-comment-ui.menu.addComment",
+	hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+	disabled$: getDrawingCommentDisable$(accessor)
+});
 const threadCommentMenuFactory = (accessor) => {
 	return {
 		id: ShowAddSheetCommentModalOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		icon: "CommentIcon",
+		icon: "InsertCommentDoubleIcon",
 		title: "sheets-thread-comment-ui.menu.addComment",
+		tooltip: "sheets-thread-comment-ui.menu.addComment",
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
 		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
@@ -243,7 +303,8 @@ const threadPanelMenuFactory = (accessor) => {
 		id: ToggleSheetCommentPanelOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "CommentIcon",
-		tooltip: "sheets-thread-comment-ui.menu.commentManagement",
+		title: "sheets-thread-comment-ui.menu.openComments",
+		tooltip: "sheets-thread-comment-ui.menu.openComments",
 		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
 			worksheetTypes: [_univerjs_sheets.WorksheetViewPermission],
@@ -261,26 +322,103 @@ const AddCommentShortcut = {
 //#endregion
 //#region src/menu/schema.ts
 const menuSchema = {
-	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [ToggleSheetCommentPanelOperation.id]: {
-		order: 2,
-		gridLayout: {
-			row: 1,
-			column: 3,
-			rowSpan: 2,
-			showLabel: true
+	[_univerjs_ui.RibbonInsertGroup.MEDIA]: {
+		[ToggleSheetCommentPanelOperation.id]: {
+			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 3,
+				showLabel: true
+			},
+			menuItemFactory: threadPanelMenuFactory
 		},
-		menuItemFactory: threadPanelMenuFactory
-	} },
+		[ShowAddSheetCommentModalOperation.id]: {
+			order: 2.1,
+			gridLayout: {
+				row: 2,
+				column: 3,
+				showLabel: true
+			},
+			menuItemFactory: threadCommentMenuFactory
+		}
+	},
 	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: { [_univerjs_ui.ContextMenuGroup.OTHERS]: { [ShowAddSheetCommentModalOperation.id]: {
 		order: 0,
 		menuItemFactory: threadCommentMenuFactory
+	} } },
+	[_univerjs_ui.FloatingObjectToolbarPosition.SHEET]: { [AddSheetDrawingCommentOperation.id]: {
+		order: 10,
+		menuItemFactory: drawingCommentMenuFactory
+	} },
+	[_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui.ContextMenuGroup.OTHERS]: { [AddSheetDrawingCommentOperation.id]: {
+		order: 0,
+		menuItemFactory: drawingCommentMenuFactory
 	} } }
 };
 
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-thread-comment-ui";
-var version = "1.0.0-insiders.20260813-7c9aa50";
+var version = "1.0.0";
+
+//#endregion
+//#region src/services/mobile/mobile-sheet-comment-draft.service.ts
+var MobileSheetCommentDraftService = class extends _univerjs_core.Disposable {
+	constructor() {
+		super();
+		_defineProperty(this, "_draft$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "draft$", this._draft$.asObservable());
+		this.disposeWithMe(() => this._draft$.complete());
+	}
+	get draft() {
+		return this._draft$.getValue();
+	}
+	place(draft) {
+		this._draft$.next(draft);
+	}
+	cancel() {
+		this._draft$.next(null);
+	}
+};
+
+//#endregion
+//#region src/commands/operations/mobile/show-add-sheet-comment.operation.ts
+const ShowAddSheetCommentMobileOperation = {
+	type: _univerjs_core.CommandType.OPERATION,
+	id: SHOW_ADD_SHEET_COMMENT_OPERATION_ID,
+	handler(accessor) {
+		var _accessor$get$getCurr;
+		const activeCell = (_accessor$get$getCurr = accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentLastSelection()) === null || _accessor$get$getCurr === void 0 ? void 0 : _accessor$get$getCurr.primary;
+		if (!activeCell) return false;
+		const target = (0, _univerjs_sheets.getSheetCommandTarget)(accessor.get(_univerjs_core.IUniverInstanceService));
+		if (!target) return false;
+		const { unitId, subUnitId } = target;
+		const row = activeCell.startRow;
+		const column = activeCell.startColumn;
+		const panelService = accessor.get(_univerjs_thread_comment_ui.ThreadCommentPanelService);
+		const mobileDraftService = accessor.get(MobileSheetCommentDraftService);
+		const rootId = accessor.get(_univerjs_sheets_thread_comment.SheetsThreadCommentModel).getByLocation(unitId, subUnitId, row, column);
+		accessor.get(_univerjs_thread_comment_ui.ThreadCommentDraftService).cancel();
+		if (rootId) {
+			mobileDraftService.cancel();
+			panelService.setActiveComment({
+				unitId,
+				subUnitId,
+				commentId: rootId
+			});
+		} else {
+			panelService.setActiveComment(void 0);
+			mobileDraftService.place({
+				unitId,
+				subUnitId,
+				row,
+				column
+			});
+		}
+		openSheetCommentPanel(accessor.get(_univerjs_ui.ISidebarService), panelService);
+		return true;
+	}
+};
 
 //#endregion
 //#region src/config/config.ts
@@ -288,43 +426,9 @@ const SHEETS_THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY = "sheets-thread-comment.config
 const configSymbol = Symbol(SHEETS_THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
-//#endregion
-//#region src/views/SheetsThreadCommentCell.tsx
-const SheetsThreadCommentCell = () => {
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const sheetsThreadCommentPopupService = (0, _univerjs_ui.useDependency)(SheetsThreadCommentPopupService);
-	const activePopup = (0, _univerjs_ui.useObservable)(sheetsThreadCommentPopupService.activePopup$);
-	const sheetThreadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets_thread_comment.SheetsThreadCommentModel);
-	const rootId = (0, _univerjs_ui.useObservable)(activePopup ? () => sheetThreadCommentModel.commentUpdate$.pipe((0, rxjs.map)(() => sheetThreadCommentModel.getByLocation(activePopup.unitId, activePopup.subUnitId, activePopup.row, activePopup.col)), (0, rxjs.startWith)(sheetThreadCommentModel.getByLocation(activePopup.unitId, activePopup.subUnitId, activePopup.row, activePopup.col))) : null, void 0, false, [activePopup, sheetThreadCommentModel]);
-	if (!activePopup) return null;
-	const { row, col, unitId, subUnitId, trigger } = activePopup;
-	const ref = `${_univerjs_core.Tools.chatAtABC(col)}${row + 1}`;
-	const onClose = () => {
-		sheetsThreadCommentPopupService.hidePopup();
-	};
-	const getSubUnitName = (id) => {
-		var _univerInstanceServic;
-		return ((_univerInstanceServic = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic === void 0 || (_univerInstanceServic = _univerInstanceServic.getSheetBySheetId(id)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getName()) ?? "";
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_thread_comment_ui.ThreadCommentTree, {
-		onClick: () => {
-			sheetsThreadCommentPopupService.persistPopup();
-		},
-		location: _univerjs_thread_comment_ui.ThreadCommentTreeLocation.CELL,
-		id: rootId,
-		unitId,
-		subUnitId,
-		type: _univerjs_core.UniverInstanceType.UNIVER_SHEET,
-		refStr: ref,
-		onClose,
-		getSubUnitName,
-		autoFocus: trigger === "context-menu"
-	});
-};
-
 //#endregion
 //#region src/views/SheetsThreadCommentPanel.tsx
-const SheetsThreadCommentPanel = () => {
+const SheetsThreadCommentPanel = ({ ThreadCommentPanelComponent = _univerjs_thread_comment_ui.ThreadCommentPanel } = {}) => {
 	var _workbook$getActiveSh;
 	const markSelectionService = (0, _univerjs_ui.useDependency)(_univerjs_sheets_ui.IMarkSelectionService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -332,6 +436,19 @@ const SheetsThreadCommentPanel = () => {
 	const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
 	const unitId = workbook.getUnitId();
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const draftService = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment_ui.ThreadCommentDraftService);
+	const userManagerService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	const draft = (0, _univerjs_ui.useObservable)(draftService.draft$, draftService.draft);
+	const tempDrawingComment = (draft === null || draft === void 0 ? void 0 : draft.anchor.kind) === _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING && draft.unitId === unitId ? {
+		id: "",
+		threadId: "",
+		unitId: draft.unitId,
+		subUnitId: draft.subUnitId,
+		ref: (0, _univerjs_thread_comment.serializeThreadCommentAnchor)(draft.anchor),
+		dT: "",
+		personId: userManagerService.getCurrentUser().userID,
+		text: { dataStream: "\r\n" }
+	} : null;
 	const subUnitId$ = (0, react.useMemo)(() => workbook.activeSheet$.pipe((0, rxjs.map)((i) => i === null || i === void 0 ? void 0 : i.getSheetId())), [workbook.activeSheet$]);
 	const subUnitId = (0, _univerjs_ui.useObservable)(subUnitId$, (_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId());
 	const hoverShapeId = (0, react.useRef)(null);
@@ -346,6 +463,15 @@ const SheetsThreadCommentPanel = () => {
 		});
 		const sort = (comments) => {
 			return comments.map((comment) => {
+				const anchor = (0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(comment.ref);
+				if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) === _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING) return {
+					...comment,
+					p: [
+						sheetIndex[comment.subUnitId] ?? 0,
+						Number.MAX_SAFE_INTEGER,
+						0
+					]
+				};
 				const ref = (0, _univerjs_engine_formula.singleReferenceToGrid)(comment.ref);
 				const p = [
 					sheetIndex[comment.subUnitId] ?? 0,
@@ -367,6 +493,7 @@ const SheetsThreadCommentPanel = () => {
 		return [...sort(comments.filter((comment) => !comment.resolved)), ...sort(comments.filter((comment) => comment.resolved))];
 	}, [workbook]);
 	const showShape = (0, react.useCallback)((comment) => {
+		if ((0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(comment.ref)) return null;
 		if (comment.unitId === unitId && comment.subUnitId === subUnitId && !comment.resolved) {
 			const { row, column } = (0, _univerjs_engine_formula.singleReferenceToGrid)(comment.ref);
 			const worksheet = workbook.getSheetBySheetId(comment.subUnitId);
@@ -423,7 +550,7 @@ const SheetsThreadCommentPanel = () => {
 			hoverShapeId.current = null;
 		}
 	}, [markSelectionService, panelVisible]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_thread_comment_ui.ThreadCommentPanel, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentPanelComponent, {
 		unitId,
 		subUnitId$,
 		type: _univerjs_core.UniverInstanceType.UNIVER_SHEET,
@@ -436,12 +563,50 @@ const SheetsThreadCommentPanel = () => {
 		onDeleteComment: () => {
 			handleLeave();
 			return true;
+		},
+		tempComment: tempDrawingComment,
+		onTempCommentClose: () => draftService.cancel(),
+		formatRef: (comment) => {
+			const anchor = (0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(comment.ref);
+			return (anchor === null || anchor === void 0 ? void 0 : anchor.kind) === _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING ? `#${anchor.elementId}` : comment.ref;
 		}
 	});
 };
 
 //#endregion
-//#region src/controllers/components.controller.ts
+//#region src/views/mobile/MobileSheetsThreadCommentPanel.tsx
+function MobileSheetsThreadCommentPanelContent(props) {
+	const draftService = (0, _univerjs_ui.useDependency)(MobileSheetCommentDraftService);
+	const userManagerService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	const draft = (0, _univerjs_ui.useObservable)(draftService.draft$, draftService.draft);
+	const tempCellComment = (draft === null || draft === void 0 ? void 0 : draft.unitId) === props.unitId ? {
+		id: "",
+		threadId: "",
+		unitId: draft.unitId,
+		subUnitId: draft.subUnitId,
+		ref: `${_univerjs_core.Tools.chatAtABC(draft.column)}${draft.row + 1}`,
+		dT: "",
+		personId: userManagerService.getCurrentUser().userID,
+		text: { dataStream: "\r\n" }
+	} : null;
+	const handleTempCommentClose = () => {
+		var _props$onTempCommentC;
+		draftService.cancel();
+		(_props$onTempCommentC = props.onTempCommentClose) === null || _props$onTempCommentC === void 0 || _props$onTempCommentC.call(props);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_thread_comment_ui.MobileThreadCommentPanel, {
+		...props,
+		tempComment: props.tempComment ?? tempCellComment,
+		onTempCommentClose: handleTempCommentClose,
+		autoFocusActiveComment: true
+	});
+}
+function MobileSheetsThreadCommentPanel() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetsThreadCommentPanel, { ThreadCommentPanelComponent: MobileSheetsThreadCommentPanelContent });
+}
+
+//#endregion
+//#region src/controllers/mobile/components.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -457,24 +622,108 @@ const SheetsThreadCommentPanel = () => {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-let ComponentsController = class ComponentsController extends _univerjs_core.Disposable {
+let MobileComponentsController = class MobileComponentsController extends _univerjs_core.Disposable {
 	constructor(_componentManager, _iconManager) {
 		super();
 		this._componentManager = _componentManager;
 		this._iconManager = _iconManager;
-		this._registerComponents();
-		this._registerIcons();
-	}
-	_registerComponents() {
-		[[SHEETS_THREAD_COMMENT_MODAL, SheetsThreadCommentCell], [SHEETS_THREAD_COMMENT_PANEL, SheetsThreadCommentPanel]].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
+		this.disposeWithMe(this._componentManager.register(SHEETS_THREAD_COMMENT_PANEL, MobileSheetsThreadCommentPanel));
+		this.disposeWithMe(this._iconManager.register({
+			CommentIcon: _univerjs_icons.CommentIcon,
+			InsertCommentDoubleIcon: _univerjs_icons.InsertCommentDoubleIcon
+		}));
 	}
-	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ CommentIcon: _univerjs_icons.CommentIcon }));
+};
+MobileComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], MobileComponentsController);
+
+//#endregion
+//#region src/menu/mobile-menu.ts
+function getMobileThreadCommentMenuTitle(accessor) {
+	var _selectionService$get;
+	const selectionService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
+	const selection = (_selectionService$get = selectionService.getCurrentLastSelection()) === null || _selectionService$get === void 0 ? void 0 : _selectionService$get.primary;
+	const selectionParam = selectionService.currentSelectionParam;
+	if (!selection || !selectionParam) return "sheets-thread-comment-ui.menu.addComment";
+	return accessor.get(_univerjs_sheets_thread_comment.SheetsThreadCommentModel).getByLocation(selectionParam.unitId, selectionParam.sheetId, selection.startRow, selection.startColumn) ? "sheets-thread-comment-ui.menu.openComments" : "sheets-thread-comment-ui.menu.addComment";
+}
+const mobileThreadCommentMenuFactory = (accessor) => ({
+	id: ShowAddSheetCommentMobileOperation.id,
+	type: _univerjs_ui.MenuItemType.BUTTON,
+	icon: "InsertCommentDoubleIcon",
+	title: "sheets-thread-comment-ui.menu.addComment",
+	hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+	disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+		workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
+		worksheetTypes: [_univerjs_sheets.WorksheetViewPermission],
+		rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
+	})
+});
+const mobileContextThreadCommentMenuFactory = (accessor) => ({
+	...mobileThreadCommentMenuFactory(accessor),
+	title: getMobileThreadCommentMenuTitle(accessor)
+});
+
+//#endregion
+//#region src/menu/mobile-schema.ts
+const mobileMenuSchema = {
+	[_univerjs_ui.RibbonInsertGroup.MEDIA]: {
+		[ToggleSheetCommentPanelOperation.id]: {
+			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 3,
+				showLabel: true
+			},
+			menuItemFactory: threadPanelMenuFactory
+		},
+		[ShowAddSheetCommentMobileOperation.id]: {
+			order: 2.1,
+			gridLayout: {
+				row: 2,
+				column: 3,
+				showLabel: true
+			},
+			menuItemFactory: mobileThreadCommentMenuFactory
+		}
+	},
+	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: { [_univerjs_ui.ContextMenuGroup.OTHERS]: { [ShowAddSheetCommentMobileOperation.id]: {
+		order: 0,
+		menuItemFactory: mobileContextThreadCommentMenuFactory
+	} } },
+	[_univerjs_ui.FloatingObjectToolbarPosition.SHEET]: { [AddSheetDrawingCommentOperation.id]: {
+		order: 10,
+		menuItemFactory: drawingCommentMenuFactory
+	} },
+	[_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui.ContextMenuGroup.OTHERS]: { [AddSheetDrawingCommentOperation.id]: {
+		order: 0,
+		menuItemFactory: drawingCommentMenuFactory
+	} } }
+};
+
+//#endregion
+//#region src/controllers/mobile/sheets-thread-comment.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let SheetsThreadCommentMobileController = class SheetsThreadCommentMobileController extends _univerjs_core.Disposable {
+	constructor(menuManagerService) {
+		super();
+		menuManagerService.mergeMenu(mobileMenuSchema);
 	}
 };
-ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], ComponentsController);
+SheetsThreadCommentMobileController = __decorate([__decorateParam(0, _univerjs_ui.IMenuManagerService)], SheetsThreadCommentMobileController);
 
 //#endregion
 //#region src/controllers/render-controllers/render.controller.ts
@@ -536,12 +785,13 @@ const transformRef = (ref, source, target) => {
 	const refObj = (0, _univerjs_engine_formula.singleReferenceToGrid)(ref);
 	const offsetRow = target.row - source.row;
 	const offsetCol = target.column - source.column;
-	return (0, _univerjs_engine_formula.serializeRange)({
+	const targetRange = {
 		startColumn: refObj.column + offsetCol,
 		startRow: refObj.row + offsetRow,
 		endColumn: refObj.column + offsetCol,
 		endRow: refObj.row + offsetRow
-	});
+	};
+	return (0, _univerjs_engine_formula.serializeRange)(targetRange);
 };
 let SheetsThreadCommentCopyPasteController = class SheetsThreadCommentCopyPasteController extends _univerjs_core.Disposable {
 	constructor(_sheetClipboardService, _sheetsThreadCommentModel, _threadCommentDataSourceService) {
@@ -653,6 +903,331 @@ SheetsThreadCommentCopyPasteController = __decorate([
 	__decorateParam(2, _univerjs_thread_comment.IThreadCommentDataSourceService)
 ], SheetsThreadCommentCopyPasteController);
 
+//#endregion
+//#region src/controllers/sheets-thread-comment-permission.controller.ts
+let SheetsThreadCommentPermissionController = class SheetsThreadCommentPermissionController extends _univerjs_core.Disposable {
+	constructor(_localeService, _commandService, _sheetPermissionCheckController, _sheetsThreadCommentModel) {
+		super();
+		this._localeService = _localeService;
+		this._commandService = _commandService;
+		this._sheetPermissionCheckController = _sheetPermissionCheckController;
+		this._sheetsThreadCommentModel = _sheetsThreadCommentModel;
+		this._commandExecutedListener();
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			const { id } = command;
+			if (id === AddSheetDrawingCommentOperation.id || id === ShowAddSheetCommentModalOperation.id || id === ToggleSheetCommentPanelOperation.id) {
+				if (!this._sheetPermissionCheckController.permissionCheckWithoutRange({
+					workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
+					worksheetTypes: [_univerjs_sheets.WorksheetViewPermission]
+				})) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
+			} else if (id === _univerjs_thread_comment.AddCommentCommand.id) {
+				const { unitId, subUnitId, comment } = command.params;
+				if (!this._hasCommentPermission(unitId, subUnitId, comment.ref)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
+			} else if (id === _univerjs_thread_comment.UpdateCommentCommand.id) {
+				const { unitId, subUnitId, payload } = command.params;
+				const { commentId } = payload;
+				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
+				if (comment && !this._hasCommentPermission(unitId, subUnitId, comment.ref)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
+			} else if (id === _univerjs_thread_comment.ResolveCommentCommand.id || id === _univerjs_thread_comment.DeleteCommentCommand.id || id === _univerjs_thread_comment.DeleteCommentTreeCommand.id) {
+				const { unitId, subUnitId, commentId } = command.params;
+				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
+				if (comment && !this._hasCommentPermission(unitId, subUnitId, comment.ref)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
+			}
+		}));
+	}
+	_hasCommentPermission(unitId, subUnitId, ref) {
+		const permissionTypes = {
+			workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetViewPermission]
+		};
+		const anchor = (0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(ref);
+		if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) === _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING) return this._sheetPermissionCheckController.permissionCheckWithoutRange(permissionTypes, unitId, subUnitId);
+		const { row, column } = (0, _univerjs_engine_formula.singleReferenceToGrid)(ref);
+		if (!Number.isFinite(row) || !Number.isFinite(column)) return false;
+		return this._sheetPermissionCheckController.permissionCheckWithRanges({
+			...permissionTypes,
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
+		}, [{
+			startRow: row,
+			startColumn: column,
+			endRow: row,
+			endColumn: column
+		}], unitId, subUnitId);
+	}
+};
+SheetsThreadCommentPermissionController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetPermissionCheckController)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_thread_comment.SheetsThreadCommentModel))
+], SheetsThreadCommentPermissionController);
+
+//#endregion
+//#region src/mobile-plugin.ts
+let UniverSheetsThreadCommentMobileUIPlugin = class UniverSheetsThreadCommentMobileUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._commandService = _commandService;
+		this._configService = _configService;
+		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(SHEETS_THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		[
+			[MobileComponentsController],
+			[SheetsThreadCommentMobileController],
+			[SheetsThreadCommentRenderController],
+			[SheetsThreadCommentCopyPasteController],
+			[SheetsThreadCommentPopupService],
+			[SheetsThreadCommentPermissionController],
+			[MobileSheetCommentDraftService]
+		].forEach((dependency) => this._injector.add(dependency));
+		this._injector.get(MobileComponentsController);
+		[
+			AddSheetDrawingCommentOperation,
+			OpenSheetCommentPanelOperation,
+			ShowAddSheetCommentMobileOperation,
+			ToggleSheetCommentPanelOperation
+		].forEach((command) => this._commandService.registerCommand(command));
+		this._injector.get(SheetsThreadCommentMobileController);
+	}
+	onReady() {
+		this._injector.get(SheetsThreadCommentRenderController);
+	}
+	onRendered() {
+		this._injector.get(SheetsThreadCommentCopyPasteController);
+		this._injector.get(SheetsThreadCommentPermissionController);
+	}
+};
+_defineProperty(UniverSheetsThreadCommentMobileUIPlugin, "pluginName", PLUGIN_NAME);
+_defineProperty(UniverSheetsThreadCommentMobileUIPlugin, "packageName", name);
+_defineProperty(UniverSheetsThreadCommentMobileUIPlugin, "version", version);
+_defineProperty(UniverSheetsThreadCommentMobileUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
+UniverSheetsThreadCommentMobileUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_thread_comment.UniverThreadCommentPlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_thread_comment_ui.UniverThreadCommentMobileUIPlugin, _univerjs_sheets_thread_comment.UniverSheetsThreadCommentPlugin, _univerjs_ui.UniverMobileUIPlugin, _univerjs_sheets_ui.UniverSheetsMobileUIPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
+	__decorateParam(3, _univerjs_core.IConfigService)
+], UniverSheetsThreadCommentMobileUIPlugin);
+
+//#endregion
+//#region src/views/SheetsThreadCommentCell.tsx
+const SheetsThreadCommentCell = () => {
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const sheetsThreadCommentPopupService = (0, _univerjs_ui.useDependency)(SheetsThreadCommentPopupService);
+	const activePopup = (0, _univerjs_ui.useObservable)(sheetsThreadCommentPopupService.activePopup$);
+	const sheetThreadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets_thread_comment.SheetsThreadCommentModel);
+	const getRootId = () => {
+		if (!activePopup) return;
+		const { unitId, subUnitId, row, col, commentId } = activePopup;
+		const activeComment = commentId ? sheetThreadCommentModel.getAllByLocation(unitId, subUnitId, row, col).find((comment) => comment.id === commentId) : void 0;
+		return activeComment && !activeComment.resolved ? activeComment.id : sheetThreadCommentModel.getByLocation(unitId, subUnitId, row, col);
+	};
+	const rootId = (0, _univerjs_ui.useObservable)(activePopup ? () => sheetThreadCommentModel.commentUpdate$.pipe((0, rxjs.map)(() => getRootId()), (0, rxjs.startWith)(getRootId())) : null, void 0, false, [activePopup, sheetThreadCommentModel]);
+	if (!activePopup) return null;
+	const { row, col, unitId, subUnitId, trigger } = activePopup;
+	const ref = `${_univerjs_core.Tools.chatAtABC(col)}${row + 1}`;
+	const onClose = () => {
+		sheetsThreadCommentPopupService.hidePopup();
+	};
+	const getSubUnitName = (id) => {
+		var _univerInstanceServic;
+		return ((_univerInstanceServic = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic === void 0 || (_univerInstanceServic = _univerInstanceServic.getSheetBySheetId(id)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getName()) ?? "";
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_thread_comment_ui.ThreadCommentTree, {
+		onClick: () => {
+			sheetsThreadCommentPopupService.persistPopup();
+		},
+		location: _univerjs_thread_comment_ui.ThreadCommentTreeLocation.CELL,
+		id: rootId,
+		unitId,
+		subUnitId,
+		type: _univerjs_core.UniverInstanceType.UNIVER_SHEET,
+		refStr: ref,
+		onClose,
+		getSubUnitName,
+		autoFocus: trigger === "context-menu"
+	});
+};
+
+//#endregion
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let ComponentsController = class ComponentsController extends _univerjs_core.Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
+	}
+	_registerComponents() {
+		[[SHEETS_THREAD_COMMENT_MODAL, SheetsThreadCommentCell], [SHEETS_THREAD_COMMENT_PANEL, SheetsThreadCommentPanel]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			CommentIcon: _univerjs_icons.CommentIcon,
+			InsertCommentDoubleIcon: _univerjs_icons.InsertCommentDoubleIcon
+		}));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], ComponentsController);
+
+//#endregion
+//#region src/controllers/render-controllers/drawing.render-controller.ts
+const SHEET_COMMENT_DRAWING_OVERLAY_KEY = "sheet-thread-comment-drawing-overlay";
+const SHEET_COMMENT_DRAWING_OVERLAY_LAYER_INDEX = 10100;
+let SheetsThreadCommentDrawingRenderController = class SheetsThreadCommentDrawingRenderController extends _univerjs_core.RxDisposable {
+	constructor(_context, _commandService, _drawingManagerService, _commentModel, _panelService, _themeService) {
+		super();
+		this._context = _context;
+		this._commandService = _commandService;
+		this._drawingManagerService = _drawingManagerService;
+		this._commentModel = _commentModel;
+		this._panelService = _panelService;
+		this._themeService = _themeService;
+		_defineProperty(this, "_overlay", void 0);
+		this._overlay = new _univerjs_thread_comment_ui.ThreadCommentCanvasOverlay(SHEET_COMMENT_DRAWING_OVERLAY_KEY, {
+			...this._getColors(),
+			zoomRatio: 1,
+			markers: [],
+			underlines: []
+		});
+		this._context.scene.addObject(this._overlay, SHEET_COMMENT_DRAWING_OVERLAY_LAYER_INDEX);
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._overlay.onPointerDown$.subscribeEvent((_event, state) => this._onOverlayPointerDown(state))));
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._context.engine.onTransformChange$.subscribeEvent(() => this._syncOverlay())));
+		this.disposeWithMe(this._context.unit.activeSheet$.subscribe(() => this._syncOverlay()));
+		this.disposeWithMe(this._commentModel.commentUpdate$.subscribe((update) => {
+			if (update.unitId === this._context.unitId) this._syncOverlay();
+		}));
+		[this._panelService.activeCommentId$, this._panelService.hoveredCommentId$].forEach((observable) => this.disposeWithMe(observable.subscribe(() => this._syncOverlay())));
+		[
+			this._drawingManagerService.add$,
+			this._drawingManagerService.update$,
+			this._drawingManagerService.remove$
+		].forEach((observable) => this.disposeWithMe(observable.subscribe((drawings) => {
+			if (drawings.some((drawing) => drawing.unitId === this._context.unitId)) this._syncOverlay();
+		})));
+		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => this._syncOverlay()));
+		this._syncOverlay();
+	}
+	_onOverlayPointerDown(state) {
+		var _this$_context$unit$g;
+		const commentId = this._overlay.hitCommentId;
+		const subUnitId = (_this$_context$unit$g = this._context.unit.getActiveSheet()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getSheetId();
+		if (!commentId || !subUnitId) return;
+		state.stopPropagation();
+		this._panelService.setActiveComment({
+			unitId: this._context.unitId,
+			subUnitId,
+			commentId,
+			trigger: "sheet-canvas"
+		});
+		this._commandService.executeCommand(OpenSheetCommentPanelOperation.id).catch(() => void 0);
+	}
+	_syncOverlay() {
+		const worksheet = this._context.unit.getActiveSheet();
+		const subUnitId = worksheet === null || worksheet === void 0 ? void 0 : worksheet.getSheetId();
+		if (!worksheet || !subUnitId) {
+			this._overlay.updateState({
+				markers: [],
+				underlines: [],
+				focusedCommentIds: [],
+				focusOutlines: []
+			});
+			return;
+		}
+		const underlines = /* @__PURE__ */ new Map();
+		this._commentModel.query({
+			unitIds: [this._context.unitId],
+			subUnitIds: [subUnitId],
+			anchorKinds: [_univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING],
+			resolved: false
+		}).forEach(({ root }) => {
+			const anchor = (0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(root.ref);
+			if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) !== _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING) return;
+			const outline = this._getDrawingOutline(subUnitId, anchor.elementId);
+			if (outline) underlines.set(anchor.elementId, {
+				commentId: root.id,
+				left: outline.left,
+				top: outline.top + outline.height + 2 / worksheet.getZoomRatio(),
+				width: outline.width
+			});
+		});
+		const focusedCommentIds = [];
+		const focusOutlines = /* @__PURE__ */ new Map();
+		[this._panelService.activeCommentId, this._panelService.hoveredCommentId].forEach((target) => {
+			if (!target || target.unitId !== this._context.unitId || target.subUnitId !== subUnitId) return;
+			const comment = this._commentModel.getComment(target.unitId, target.subUnitId, target.commentId);
+			const anchor = comment && (0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(comment.ref);
+			if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) !== _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING) return;
+			focusedCommentIds.push(target.commentId);
+			const outline = this._getDrawingOutline(subUnitId, anchor.elementId);
+			if (outline) focusOutlines.set(anchor.elementId, outline);
+		});
+		this._overlay.updateState({
+			...this._getColors(),
+			zoomRatio: worksheet.getZoomRatio(),
+			markers: [],
+			underlines: Array.from(underlines.values()),
+			focusedCommentIds,
+			focusOutlines: Array.from(focusOutlines.values())
+		});
+	}
+	_getDrawingOutline(subUnitId, drawingId) {
+		var _this$_context$scene$, _this$_context$scene;
+		const objectKey = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+			unitId: this._context.unitId,
+			subUnitId,
+			drawingId
+		});
+		const object = ((_this$_context$scene$ = (_this$_context$scene = this._context.scene).getObjectIncludeInGroup) === null || _this$_context$scene$ === void 0 ? void 0 : _this$_context$scene$.call(_this$_context$scene, objectKey)) ?? this._context.scene.getObject(objectKey);
+		if (!object) return null;
+		const bounds = object.getRealBound();
+		return {
+			left: bounds.left,
+			top: bounds.top,
+			width: bounds.width,
+			height: bounds.height
+		};
+	}
+	_getColors() {
+		return {
+			accentColor: this._themeService.getColorFromTheme("yellow.400"),
+			foregroundColor: this._themeService.getColorFromTheme("gray.900"),
+			outlineColor: this._themeService.getColorFromTheme("white")
+		};
+	}
+};
+SheetsThreadCommentDrawingRenderController = __decorate([
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_thread_comment.ThreadCommentModel)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_thread_comment_ui.ThreadCommentPanelService)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
+], SheetsThreadCommentDrawingRenderController);
+
 //#endregion
 //#region src/controllers/sheets-thread-comment-hover.controller.ts
 /**
@@ -718,84 +1293,11 @@ SheetsThreadCommentHoverController = __decorate([
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetPermissionCheckController))
 ], SheetsThreadCommentHoverController);
 
-//#endregion
-//#region src/controllers/sheets-thread-comment-permission.controller.ts
-let SheetsThreadCommentPermissionController = class SheetsThreadCommentPermissionController extends _univerjs_core.Disposable {
-	constructor(_localeService, _commandService, _sheetPermissionCheckController, _sheetsThreadCommentModel) {
-		super();
-		this._localeService = _localeService;
-		this._commandService = _commandService;
-		this._sheetPermissionCheckController = _sheetPermissionCheckController;
-		this._sheetsThreadCommentModel = _sheetsThreadCommentModel;
-		this._commandExecutedListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			const { id } = command;
-			if (id === ShowAddSheetCommentModalOperation.id || id === ToggleSheetCommentPanelOperation.id) {
-				if (!this._sheetPermissionCheckController.permissionCheckWithoutRange({
-					workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
-					worksheetTypes: [_univerjs_sheets.WorksheetViewPermission]
-				})) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
-			} else if (id === _univerjs_thread_comment.AddCommentCommand.id) {
-				const { unitId, subUnitId, comment } = command.params;
-				const { row, column } = (0, _univerjs_engine_formula.singleReferenceToGrid)(comment.ref);
-				if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
-					workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
-					worksheetTypes: [_univerjs_sheets.WorksheetViewPermission],
-					rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
-				}, [{
-					startRow: row,
-					startColumn: column,
-					endRow: row,
-					endColumn: column
-				}], unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
-			} else if (id === _univerjs_thread_comment.UpdateCommentCommand.id) {
-				const { unitId, subUnitId, payload } = command.params;
-				const { commentId } = payload;
-				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
-				if (comment) {
-					const { row, column } = (0, _univerjs_engine_formula.singleReferenceToGrid)(comment.ref);
-					if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
-						workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
-						worksheetTypes: [_univerjs_sheets.WorksheetViewPermission],
-						rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
-					}, [{
-						startRow: row,
-						startColumn: column,
-						endRow: row,
-						endColumn: column
-					}], unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
-				}
-			} else if (id === _univerjs_thread_comment.ResolveCommentCommand.id || id === _univerjs_thread_comment.DeleteCommentCommand.id || id === _univerjs_thread_comment.DeleteCommentTreeCommand.id) {
-				const { unitId, subUnitId, commentId } = command.params;
-				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
-				if (comment) {
-					const { row, column } = (0, _univerjs_engine_formula.singleReferenceToGrid)(comment.ref);
-					if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
-						workbookTypes: [_univerjs_sheets.WorkbookCommentPermission],
-						worksheetTypes: [_univerjs_sheets.WorksheetViewPermission],
-						rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
-					}, [{
-						startRow: row,
-						startColumn: column,
-						endRow: row,
-						endColumn: column
-					}], unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
-				}
-			}
-		}));
-	}
-};
-SheetsThreadCommentPermissionController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(1, _univerjs_core.ICommandService),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetPermissionCheckController)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_thread_comment.SheetsThreadCommentModel))
-], SheetsThreadCommentPermissionController);
-
 //#endregion
 //#region src/controllers/sheets-thread-comment-popup.controller.ts
+function resolveFocusedSheetComment(activeComment, hoveredComment, unitId, subUnitId) {
+	for (const comment of [hoveredComment, activeComment]) if (comment && comment.unitId === unitId && comment.subUnitId === subUnitId) return comment;
+}
 let SheetsThreadCommentPopupController = class SheetsThreadCommentPopupController extends _univerjs_core.Disposable {
 	constructor(_commandService, _sheetsThreadCommentPopupService, _sheetsThreadCommentModel, _threadCommentPanelService, _univerInstanceService, _sheetPermissionCheckController, _markSelectionService, _sheetSelectionService, _editorBridgeService, _renderManagerService) {
 		super();
@@ -873,6 +1375,8 @@ let SheetsThreadCommentPopupController = class SheetsThreadCommentPopupControlle
 				const { unitId, subUnitId, commentId, trigger } = commentInfo;
 				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
 				if (!comment || comment.resolved) return;
+				const anchor = (0, _univerjs_thread_comment.deserializeThreadCommentAnchor)(comment.ref);
+				if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) === _univerjs_thread_comment.ThreadCommentAnchorKind.SHEET_DRAWING) return;
 				const currentUnit = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
 				if (!currentUnit) return;
 				if (currentUnit.getUnitId() !== unitId) return;
@@ -914,16 +1418,18 @@ let SheetsThreadCommentPopupController = class SheetsThreadCommentPopupControlle
 		}));
 	}
 	_initMarkSelection() {
-		this.disposeWithMe(this._threadCommentPanelService.activeCommentId$.pipe((0, rxjs.debounceTime)(100)).subscribe((activeComment) => {
-			var _this$_univerInstance;
-			if (!activeComment) {
+		this.disposeWithMe((0, rxjs.combineLatest)([this._threadCommentPanelService.activeCommentId$, this._threadCommentPanelService.hoveredCommentId$]).pipe((0, rxjs.debounceTime)(100)).subscribe(([activeComment, hoveredComment]) => {
+			var _currentUnit$getActiv2, _this$_univerInstance;
+			const currentUnit = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+			const focusedComment = resolveFocusedSheetComment(activeComment, hoveredComment, currentUnit === null || currentUnit === void 0 ? void 0 : currentUnit.getUnitId(), currentUnit === null || currentUnit === void 0 || (_currentUnit$getActiv2 = currentUnit.getActiveSheet()) === null || _currentUnit$getActiv2 === void 0 ? void 0 : _currentUnit$getActiv2.getSheetId());
+			if (!focusedComment) {
 				if (this._selectionShapeInfo) {
 					this._markSelectionService.removeShape(this._selectionShapeInfo.shapeId);
 					this._selectionShapeInfo = null;
 				}
 				return;
 			}
-			const { unitId, subUnitId, commentId } = activeComment;
+			const { unitId, subUnitId, commentId } = focusedComment;
 			if (this._selectionShapeInfo) {
 				this._markSelectionService.removeShape(this._selectionShapeInfo.shapeId);
 				this._selectionShapeInfo = null;
@@ -951,7 +1457,7 @@ let SheetsThreadCommentPopupController = class SheetsThreadCommentPopupControlle
 			}, [], -1);
 			if (!shapeId) return;
 			this._selectionShapeInfo = {
-				...activeComment,
+				...focusedComment,
 				shapeId
 			};
 		}));
@@ -1007,11 +1513,12 @@ SheetsThreadCommentController = __decorate([__decorateParam(0, _univerjs_ui.IMen
 //#endregion
 //#region src/plugin.ts
 let UniverSheetsThreadCommentUIPlugin = class UniverSheetsThreadCommentUIPlugin extends _univerjs_core.Plugin {
-	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _renderManagerService, _configService) {
 		super();
 		this._config = _config;
 		this._injector = _injector;
 		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
 		this._configService = _configService;
 		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
 		if (menu) this._configService.setConfig("menu", menu, { merge: true });
@@ -1031,7 +1538,12 @@ let UniverSheetsThreadCommentUIPlugin = class UniverSheetsThreadCommentUIPlugin
 		].forEach((dep) => {
 			this._injector.add(dep);
 		});
-		[ShowAddSheetCommentModalOperation, ToggleSheetCommentPanelOperation].forEach((command) => {
+		[
+			AddSheetDrawingCommentOperation,
+			OpenSheetCommentPanelOperation,
+			ShowAddSheetCommentModalOperation,
+			ToggleSheetCommentPanelOperation
+		].forEach((command) => {
 			this._commandService.registerCommand(command);
 		});
 		this._injector.get(SheetsThreadCommentController);
@@ -1040,6 +1552,7 @@ let UniverSheetsThreadCommentUIPlugin = class UniverSheetsThreadCommentUIPlugin
 		this._injector.get(SheetsThreadCommentRenderController);
 	}
 	onRendered() {
+		this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, [SheetsThreadCommentDrawingRenderController]);
 		this._injector.get(SheetsThreadCommentCopyPasteController);
 		this._injector.get(SheetsThreadCommentHoverController);
 		this._injector.get(SheetsThreadCommentPopupController);
@@ -1051,10 +1564,11 @@ _defineProperty(UniverSheetsThreadCommentUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsThreadCommentUIPlugin, "version", version);
 _defineProperty(UniverSheetsThreadCommentUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
 UniverSheetsThreadCommentUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_thread_comment.UniverThreadCommentPlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_thread_comment_ui.UniverThreadCommentUIPlugin, _univerjs_sheets_thread_comment.UniverSheetsThreadCommentPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_thread_comment.UniverThreadCommentPlugin, _univerjs_drawing.UniverDrawingPlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_thread_comment_ui.UniverThreadCommentUIPlugin, _univerjs_sheets_thread_comment.UniverSheetsThreadCommentPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
-	__decorateParam(3, _univerjs_core.IConfigService)
+	__decorateParam(3, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(4, _univerjs_core.IConfigService)
 ], UniverSheetsThreadCommentUIPlugin);
 
 //#endregion
@@ -1067,6 +1581,12 @@ Object.defineProperty(exports, 'SheetsThreadCommentPopupService', {
 exports.SheetsThreadCommentUIMenuSchema = menuSchema;
 exports.ShowAddSheetCommentModalOperation = ShowAddSheetCommentModalOperation;
 exports.ToggleSheetCommentPanelOperation = ToggleSheetCommentPanelOperation;
+Object.defineProperty(exports, 'UniverSheetsThreadCommentMobileUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverSheetsThreadCommentMobileUIPlugin;
+  }
+});
 Object.defineProperty(exports, 'UniverSheetsThreadCommentUIPlugin', {
   enumerable: true,
   get: function () {