@univerjs/sheets-thread-comment-ui 0.25.1 → 1.0.0-alpha.1

package/lib/index.js

@@ -1,16 +1,16 @@
 import { CommandType, DependentOn, Disposable, DisposableCollection, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, Plugin, RANGE_TYPE, Range, Rectangle, Tools, UniverInstanceType, merge } from "@univerjs/core";
 import { INTERCEPTOR_POINT, RangeProtectionPermissionViewPoint, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, WorkbookCommentPermission, WorksheetViewPermission, getSheetCommandTarget } from "@univerjs/sheets";
 import { SheetsThreadCommentModel, UniverSheetsThreadCommentPlugin } from "@univerjs/sheets-thread-comment";
-import { SetActiveCommentOperation, ThreadCommentPanel, ThreadCommentPanelService, ThreadCommentTree, ThreadCommentTreeLocation, UniverThreadCommentUIPlugin, UniverThreadCommentUIPlugin as UniverThreadCommentUIPlugin$1 } from "@univerjs/thread-comment-ui";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IShortcutService, ISidebarService, IZenZoneService, KeyCode, MenuItemType, MetaKeys, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { SetActiveCommentOperation, ThreadCommentPanel, ThreadCommentPanelService, ThreadCommentTree, ThreadCommentTreeLocation, UniverThreadCommentUIPlugin } from "@univerjs/thread-comment-ui";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IShortcutService, ISidebarService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { COPY_TYPE, CellPopupManagerService, HoverManagerService, IEditorBridgeService, IMarkSelectionService, ISheetClipboardService, ScrollToRangeOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, getCurrentRangeDisable$, whenSheetEditorFocused } from "@univerjs/sheets-ui";
 import { BehaviorSubject, debounceTime, map } from "rxjs";
-import { IRenderManagerService } from "@univerjs/engine-render";
-import { serializeRange, singleReferenceToGrid } from "@univerjs/engine-formula";
-import { AddCommentCommand, AddCommentCommand as AddCommentCommand$1, AddCommentMutation, DeleteCommentCommand, DeleteCommentCommand as DeleteCommentCommand$1, DeleteCommentMutation, DeleteCommentTreeCommand, DeleteCommentTreeCommand as DeleteCommentTreeCommand$1, IThreadCommentDataSourceService, IThreadCommentDataSourceService as IThreadCommentDataSourceService$1, ResolveCommentCommand, ResolveCommentCommand as ResolveCommentCommand$1, UpdateCommentCommand, UpdateCommentCommand as UpdateCommentCommand$1 } from "@univerjs/thread-comment";
 import { CommentIcon } from "@univerjs/icons";
 import { jsx } from "react/jsx-runtime";
+import { serializeRange, singleReferenceToGrid } from "@univerjs/engine-formula";
 import { useCallback, useEffect, useMemo, useRef } from "react";
+import { IRenderManagerService } from "@univerjs/engine-render";
+import { AddCommentCommand, AddCommentMutation, DeleteCommentCommand, DeleteCommentMutation, DeleteCommentTreeCommand, IThreadCommentDataSourceService, ResolveCommentCommand, UpdateCommentCommand } from "@univerjs/thread-comment";
 
 //#region src/types/const.ts
 /**
@@ -33,7 +33,7 @@ const SHEETS_THREAD_COMMENT_PANEL = "univer.sheet.thread-comment-panel";
 const PLUGIN_NAME = "SHEET_THREAD_COMMENT_UI_PLUGIN";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -44,7 +44,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -57,14 +57,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -75,7 +75,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -83,7 +83,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.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);
@@ -97,25 +97,18 @@ let SheetsThreadCommentPopupService = class SheetsThreadCommentPopupService exte
 	get activePopup() {
 		return this._activePopup;
 	}
-	constructor(_canvasPopupManagerService, _zenZoneService, _cellPopupManagerService) {
+	constructor(_canvasPopupManagerService, _cellPopupManagerService) {
 		super();
 		this._canvasPopupManagerService = _canvasPopupManagerService;
-		this._zenZoneService = _zenZoneService;
 		this._cellPopupManagerService = _cellPopupManagerService;
 		_defineProperty(this, "_lastPopup", null);
 		_defineProperty(this, "_activePopup", void 0);
 		_defineProperty(this, "_activePopup$", new BehaviorSubject(null));
 		_defineProperty(this, "activePopup$", this._activePopup$.asObservable());
-		this._initZenVisible();
 		this.disposeWithMe(() => {
 			this._activePopup$.complete();
 		});
 	}
-	_initZenVisible() {
-		this.disposeWithMe(this._zenZoneService.visible$.subscribe((visible) => {
-			if (visible) this.hidePopup();
-		}));
-	}
 	dispose() {
 		super.dispose();
 		this.hidePopup();
@@ -129,7 +122,6 @@ let SheetsThreadCommentPopupService = class SheetsThreadCommentPopupService exte
 			return;
 		}
 		if (this._lastPopup) this._lastPopup.dispose();
-		if (this._zenZoneService.visible) return;
 		this._activePopup = location;
 		this._activePopup$.next(location);
 		const popupDisposable = this._cellPopupManagerService.showPopup({
@@ -170,11 +162,7 @@ let SheetsThreadCommentPopupService = class SheetsThreadCommentPopupService exte
 		this._activePopup$.next(this._activePopup);
 	}
 };
-SheetsThreadCommentPopupService = __decorate([
-	__decorateParam(0, Inject(SheetCanvasPopManagerService)),
-	__decorateParam(1, IZenZoneService),
-	__decorateParam(2, Inject(CellPopupManagerService))
-], SheetsThreadCommentPopupService);
+SheetsThreadCommentPopupService = __decorate([__decorateParam(0, Inject(SheetCanvasPopManagerService)), __decorateParam(1, Inject(CellPopupManagerService))], SheetsThreadCommentPopupService);
 
 //#endregion
 //#region src/commands/operations/comment.operation.ts
@@ -236,7 +224,7 @@ const ToggleSheetCommentPanelOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-thread-comment-ui";
-var version = "0.25.1";
+var version = "1.0.0-alpha.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -244,6 +232,197 @@ 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 = useDependency(IUniverInstanceService);
+	const sheetsThreadCommentPopupService = useDependency(SheetsThreadCommentPopupService);
+	const activePopup = useObservable(sheetsThreadCommentPopupService.activePopup$);
+	const sheetThreadCommentModel = useDependency(SheetsThreadCommentModel);
+	useObservable(sheetThreadCommentModel.commentUpdate$);
+	if (!activePopup) return null;
+	const { row, col, unitId, subUnitId, trigger } = activePopup;
+	const rootId = sheetThreadCommentModel.getByLocation(unitId, subUnitId, row, col);
+	const ref = `${Tools.chatAtABC(col)}${row + 1}`;
+	const onClose = () => {
+		sheetsThreadCommentPopupService.hidePopup();
+	};
+	const getSubUnitName = (id) => {
+		var _univerInstanceServic, _univerInstanceServic2;
+		return (_univerInstanceServic = (_univerInstanceServic2 = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic2 === void 0 || (_univerInstanceServic2 = _univerInstanceServic2.getSheetBySheetId(id)) === null || _univerInstanceServic2 === void 0 ? void 0 : _univerInstanceServic2.getName()) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : "";
+	};
+	return /* @__PURE__ */ jsx(ThreadCommentTree, {
+		onClick: () => {
+			sheetsThreadCommentPopupService.persistPopup();
+		},
+		location: ThreadCommentTreeLocation.CELL,
+		id: rootId,
+		unitId,
+		subUnitId,
+		type: UniverInstanceType.UNIVER_SHEET,
+		refStr: ref,
+		onClose,
+		getSubUnitName,
+		autoFocus: trigger === "context-menu"
+	});
+};
+
+//#endregion
+//#region src/views/SheetsThreadCommentPanel.tsx
+const SheetsThreadCommentPanel = () => {
+	var _workbook$getActiveSh;
+	const markSelectionService = useDependency(IMarkSelectionService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const sheetsThreadCommentPopupService = useDependency(SheetsThreadCommentPopupService);
+	const workbook = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
+	const unitId = workbook.getUnitId();
+	const commandService = useDependency(ICommandService);
+	const subUnitId$ = useMemo(() => workbook.activeSheet$.pipe(map((i) => i === null || i === void 0 ? void 0 : i.getSheetId())), [workbook.activeSheet$]);
+	const subUnitId = useObservable(subUnitId$, (_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId());
+	const hoverShapeId = useRef(null);
+	const panelService = useDependency(ThreadCommentPanelService);
+	const activeCommentId = useObservable(panelService.activeCommentId$);
+	const panelVisible = useObservable(panelService.panelVisible$, panelService.panelVisible);
+	const sortComments = useCallback((comments) => {
+		const worksheets = workbook.getSheets();
+		const sheetIndex = {};
+		worksheets.forEach((sheet, i) => {
+			sheetIndex[sheet.getSheetId()] = i;
+		});
+		const sort = (comments) => {
+			return comments.map((comment) => {
+				var _sheetIndex$comment$s;
+				const ref = singleReferenceToGrid(comment.ref);
+				const p = [
+					(_sheetIndex$comment$s = sheetIndex[comment.subUnitId]) !== null && _sheetIndex$comment$s !== void 0 ? _sheetIndex$comment$s : 0,
+					ref.row,
+					ref.column
+				];
+				return {
+					...comment,
+					p
+				};
+			}).sort((pre, aft) => {
+				if (pre.p[0] === aft.p[0]) {
+					if (pre.p[1] === aft.p[1]) return pre.p[2] - aft.p[2];
+					return pre.p[1] - aft.p[1];
+				}
+				return pre.p[0] - aft.p[0];
+			});
+		};
+		return [...sort(comments.filter((comment) => !comment.resolved)), ...sort(comments.filter((comment) => comment.resolved))];
+	}, [workbook]);
+	const showShape = useCallback((comment) => {
+		if (comment.unitId === unitId && comment.subUnitId === subUnitId && !comment.resolved) {
+			var _worksheet$getMergedC;
+			const { row, column } = singleReferenceToGrid(comment.ref);
+			const worksheet = workbook.getSheetBySheetId(comment.subUnitId);
+			const mergeInfo = (_worksheet$getMergedC = worksheet === null || worksheet === void 0 ? void 0 : worksheet.getMergedCell(row, column)) !== null && _worksheet$getMergedC !== void 0 ? _worksheet$getMergedC : {
+				startColumn: column,
+				endColumn: column,
+				startRow: row,
+				endRow: row
+			};
+			if (!Number.isNaN(row) && !Number.isNaN(column)) return markSelectionService.addShape({
+				range: mergeInfo,
+				style: {
+					fill: "rgb(255, 189, 55, 0.35)",
+					strokeWidth: 1,
+					stroke: "#FFBD37",
+					widgets: {}
+				},
+				primary: null
+			});
+		}
+		return null;
+	}, [
+		markSelectionService,
+		subUnitId,
+		unitId
+	]);
+	const getSubUnitName = (id) => {
+		var _workbook$getSheetByS, _workbook$getSheetByS2;
+		return (_workbook$getSheetByS = (_workbook$getSheetByS2 = workbook.getSheetBySheetId(id)) === null || _workbook$getSheetByS2 === void 0 ? void 0 : _workbook$getSheetByS2.getName()) !== null && _workbook$getSheetByS !== void 0 ? _workbook$getSheetByS : "";
+	};
+	const handleAdd = () => {
+		commandService.executeCommand(ShowAddSheetCommentModalOperation.id);
+	};
+	const handleHover = (comment) => {
+		if (hoverShapeId.current) {
+			markSelectionService.removeShape(hoverShapeId.current);
+			hoverShapeId.current = null;
+		}
+		if (activeCommentId && activeCommentId.unitId === comment.unitId && activeCommentId.subUnitId === comment.subUnitId && activeCommentId.commentId === comment.id) return;
+		hoverShapeId.current = showShape(comment);
+	};
+	const handleLeave = () => {
+		if (hoverShapeId.current) {
+			markSelectionService.removeShape(hoverShapeId.current);
+			hoverShapeId.current = null;
+		}
+	};
+	const handleResolve = (id, resolved) => {
+		if (resolved) sheetsThreadCommentPopupService.hidePopup();
+	};
+	useEffect(() => {
+		if (!panelVisible && hoverShapeId.current) {
+			markSelectionService.removeShape(hoverShapeId.current);
+			hoverShapeId.current = null;
+		}
+	}, [markSelectionService, panelVisible]);
+	return /* @__PURE__ */ jsx(ThreadCommentPanel, {
+		unitId,
+		subUnitId$,
+		type: UniverInstanceType.UNIVER_SHEET,
+		onAdd: handleAdd,
+		getSubUnitName,
+		onResolve: handleResolve,
+		sortComments,
+		onItemEnter: handleHover,
+		onItemLeave: handleLeave,
+		onDeleteComment: () => {
+			handleLeave();
+			return true;
+		}
+	});
+};
+
+//#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 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 }));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+
 //#endregion
 //#region src/controllers/render-controllers/render.controller.ts
 let SheetsThreadCommentRenderController = class SheetsThreadCommentRenderController extends Disposable {
@@ -418,7 +597,7 @@ let SheetsThreadCommentCopyPasteController = class SheetsThreadCommentCopyPasteC
 SheetsThreadCommentCopyPasteController = __decorate([
 	__decorateParam(0, Inject(ISheetClipboardService)),
 	__decorateParam(1, Inject(SheetsThreadCommentModel)),
-	__decorateParam(2, IThreadCommentDataSourceService$1)
+	__decorateParam(2, IThreadCommentDataSourceService)
 ], SheetsThreadCommentCopyPasteController);
 
 //#endregion
@@ -505,7 +684,7 @@ let SheetsThreadCommentPermissionController = class SheetsThreadCommentPermissio
 					workbookTypes: [WorkbookCommentPermission],
 					worksheetTypes: [WorksheetViewPermission]
 				})) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
-			} else if (id === AddCommentCommand$1.id) {
+			} else if (id === AddCommentCommand.id) {
 				const { unitId, subUnitId, comment } = command.params;
 				const { row, column } = singleReferenceToGrid(comment.ref);
 				if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
@@ -518,7 +697,7 @@ let SheetsThreadCommentPermissionController = class SheetsThreadCommentPermissio
 					endRow: row,
 					endColumn: column
 				}], unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
-			} else if (id === UpdateCommentCommand$1.id) {
+			} else if (id === UpdateCommentCommand.id) {
 				const { unitId, subUnitId, payload } = command.params;
 				const { commentId } = payload;
 				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
@@ -535,7 +714,7 @@ let SheetsThreadCommentPermissionController = class SheetsThreadCommentPermissio
 						endColumn: column
 					}], unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-thread-comment-ui.permission.commentErr"));
 				}
-			} else if (id === ResolveCommentCommand$1.id || id === DeleteCommentCommand$1.id || id === DeleteCommentTreeCommand$1.id) {
+			} else if (id === ResolveCommentCommand.id || id === DeleteCommentCommand.id || id === DeleteCommentTreeCommand.id) {
 				const { unitId, subUnitId, commentId } = command.params;
 				const comment = this._sheetsThreadCommentModel.getComment(unitId, subUnitId, commentId);
 				if (comment) {
@@ -787,158 +966,6 @@ const menuSchema = {
 	} } }
 };
 
-//#endregion
-//#region src/views/sheets-thread-comment-cell/index.tsx
-const SheetsThreadCommentCell = () => {
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const sheetsThreadCommentPopupService = useDependency(SheetsThreadCommentPopupService);
-	const activePopup = useObservable(sheetsThreadCommentPopupService.activePopup$);
-	const sheetThreadCommentModel = useDependency(SheetsThreadCommentModel);
-	useObservable(sheetThreadCommentModel.commentUpdate$);
-	if (!activePopup) return null;
-	const { row, col, unitId, subUnitId, trigger } = activePopup;
-	const rootId = sheetThreadCommentModel.getByLocation(unitId, subUnitId, row, col);
-	const ref = `${Tools.chatAtABC(col)}${row + 1}`;
-	const onClose = () => {
-		sheetsThreadCommentPopupService.hidePopup();
-	};
-	const getSubUnitName = (id) => {
-		var _univerInstanceServic, _univerInstanceServic2;
-		return (_univerInstanceServic = (_univerInstanceServic2 = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic2 === void 0 || (_univerInstanceServic2 = _univerInstanceServic2.getSheetBySheetId(id)) === null || _univerInstanceServic2 === void 0 ? void 0 : _univerInstanceServic2.getName()) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : "";
-	};
-	return /* @__PURE__ */ jsx(ThreadCommentTree, {
-		onClick: () => {
-			sheetsThreadCommentPopupService.persistPopup();
-		},
-		location: ThreadCommentTreeLocation.CELL,
-		id: rootId,
-		unitId,
-		subUnitId,
-		type: UniverInstanceType.UNIVER_SHEET,
-		refStr: ref,
-		onClose,
-		getSubUnitName,
-		autoFocus: trigger === "context-menu"
-	});
-};
-
-//#endregion
-//#region src/views/sheets-thread-comment-panel/index.tsx
-const SheetsThreadCommentPanel = () => {
-	var _workbook$getActiveSh;
-	const markSelectionService = useDependency(IMarkSelectionService);
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const sheetsThreadCommentPopupService = useDependency(SheetsThreadCommentPopupService);
-	const workbook = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
-	const unitId = workbook.getUnitId();
-	const commandService = useDependency(ICommandService);
-	const subUnitId$ = useMemo(() => workbook.activeSheet$.pipe(map((i) => i === null || i === void 0 ? void 0 : i.getSheetId())), [workbook.activeSheet$]);
-	const subUnitId = useObservable(subUnitId$, (_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId());
-	const hoverShapeId = useRef(null);
-	const panelService = useDependency(ThreadCommentPanelService);
-	const activeCommentId = useObservable(panelService.activeCommentId$);
-	const panelVisible = useObservable(panelService.panelVisible$, panelService.panelVisible);
-	const sortComments = useCallback((comments) => {
-		const worksheets = workbook.getSheets();
-		const sheetIndex = {};
-		worksheets.forEach((sheet, i) => {
-			sheetIndex[sheet.getSheetId()] = i;
-		});
-		const sort = (comments) => {
-			return comments.map((comment) => {
-				var _sheetIndex$comment$s;
-				const ref = singleReferenceToGrid(comment.ref);
-				const p = [
-					(_sheetIndex$comment$s = sheetIndex[comment.subUnitId]) !== null && _sheetIndex$comment$s !== void 0 ? _sheetIndex$comment$s : 0,
-					ref.row,
-					ref.column
-				];
-				return {
-					...comment,
-					p
-				};
-			}).sort((pre, aft) => {
-				if (pre.p[0] === aft.p[0]) {
-					if (pre.p[1] === aft.p[1]) return pre.p[2] - aft.p[2];
-					return pre.p[1] - aft.p[1];
-				}
-				return pre.p[0] - aft.p[0];
-			});
-		};
-		return [...sort(comments.filter((comment) => !comment.resolved)), ...sort(comments.filter((comment) => comment.resolved))];
-	}, [workbook]);
-	const showShape = useCallback((comment) => {
-		if (comment.unitId === unitId && comment.subUnitId === subUnitId && !comment.resolved) {
-			var _worksheet$getMergedC;
-			const { row, column } = singleReferenceToGrid(comment.ref);
-			const worksheet = workbook.getSheetBySheetId(comment.subUnitId);
-			const mergeInfo = (_worksheet$getMergedC = worksheet === null || worksheet === void 0 ? void 0 : worksheet.getMergedCell(row, column)) !== null && _worksheet$getMergedC !== void 0 ? _worksheet$getMergedC : {
-				startColumn: column,
-				endColumn: column,
-				startRow: row,
-				endRow: row
-			};
-			if (!Number.isNaN(row) && !Number.isNaN(column)) return markSelectionService.addShape({
-				range: mergeInfo,
-				style: {
-					fill: "rgb(255, 189, 55, 0.35)",
-					strokeWidth: 1,
-					stroke: "#FFBD37",
-					widgets: {}
-				},
-				primary: null
-			});
-		}
-		return null;
-	}, [
-		markSelectionService,
-		subUnitId,
-		unitId
-	]);
-	const getSubUnitName = (id) => {
-		var _workbook$getSheetByS, _workbook$getSheetByS2;
-		return (_workbook$getSheetByS = (_workbook$getSheetByS2 = workbook.getSheetBySheetId(id)) === null || _workbook$getSheetByS2 === void 0 ? void 0 : _workbook$getSheetByS2.getName()) !== null && _workbook$getSheetByS !== void 0 ? _workbook$getSheetByS : "";
-	};
-	const handleAdd = () => {
-		commandService.executeCommand(ShowAddSheetCommentModalOperation.id);
-	};
-	const handleHover = (comment) => {
-		if (activeCommentId && activeCommentId.unitId === comment.unitId && activeCommentId.subUnitId === comment.subUnitId && activeCommentId.commentId === comment.id) return;
-		if (hoverShapeId.current) {
-			markSelectionService.removeShape(hoverShapeId.current);
-			hoverShapeId.current = null;
-		}
-		hoverShapeId.current = showShape(comment);
-	};
-	const handleLeave = () => {
-		if (hoverShapeId.current) {
-			markSelectionService.removeShape(hoverShapeId.current);
-			hoverShapeId.current = null;
-		}
-	};
-	const handleResolve = (id, resolved) => {
-		if (resolved) sheetsThreadCommentPopupService.hidePopup();
-	};
-	useEffect(() => {
-		if (!panelVisible && hoverShapeId.current) markSelectionService.removeShape(hoverShapeId.current);
-	}, [markSelectionService, panelVisible]);
-	return /* @__PURE__ */ jsx(ThreadCommentPanel, {
-		unitId,
-		subUnitId$,
-		type: UniverInstanceType.UNIVER_SHEET,
-		onAdd: handleAdd,
-		getSubUnitName,
-		onResolve: handleResolve,
-		sortComments,
-		onItemEnter: handleHover,
-		onItemLeave: handleLeave,
-		onDeleteComment: () => {
-			handleLeave();
-			return true;
-		}
-	});
-};
-
 //#endregion
 //#region src/controllers/sheets-thread-comment.controller.ts
 /**
@@ -957,14 +984,12 @@ const SheetsThreadCommentPanel = () => {
 * limitations under the License.
 */
 let SheetsThreadCommentController = class SheetsThreadCommentController extends Disposable {
-	constructor(_menuManagerService, _componentManager, _shortcutService) {
+	constructor(_menuManagerService, _shortcutService) {
 		super();
 		this._menuManagerService = _menuManagerService;
-		this._componentManager = _componentManager;
 		this._shortcutService = _shortcutService;
 		this._initMenu();
 		this._initShortcut();
-		this._initComponent();
 	}
 	_initShortcut() {
 		this._shortcutService.registerShortcut(AddCommentShortcut);
@@ -972,21 +997,8 @@ let SheetsThreadCommentController = class SheetsThreadCommentController extends
 	_initMenu() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
-	_initComponent() {
-		[
-			[SHEETS_THREAD_COMMENT_MODAL, SheetsThreadCommentCell],
-			[SHEETS_THREAD_COMMENT_PANEL, SheetsThreadCommentPanel],
-			["CommentIcon", CommentIcon]
-		].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
 };
-SheetsThreadCommentController = __decorate([
-	__decorateParam(0, IMenuManagerService),
-	__decorateParam(1, Inject(ComponentManager)),
-	__decorateParam(2, IShortcutService)
-], SheetsThreadCommentController);
+SheetsThreadCommentController = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, IShortcutService)], SheetsThreadCommentController);
 
 //#endregion
 //#region src/plugin.ts
@@ -1002,6 +1014,8 @@ let UniverSheetsThreadCommentUIPlugin = class UniverSheetsThreadCommentUIPlugin
 		this._configService.setConfig(SHEETS_THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY, rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		[
 			[SheetsThreadCommentController],
 			[SheetsThreadCommentRenderController],
@@ -1033,11 +1047,11 @@ _defineProperty(UniverSheetsThreadCommentUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsThreadCommentUIPlugin, "version", version);
 _defineProperty(UniverSheetsThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 UniverSheetsThreadCommentUIPlugin = __decorate([
-	DependentOn(UniverThreadCommentUIPlugin$1, UniverSheetsThreadCommentPlugin),
+	DependentOn(UniverThreadCommentUIPlugin, UniverSheetsThreadCommentPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, Inject(ICommandService)),
 	__decorateParam(3, IConfigService)
 ], UniverSheetsThreadCommentUIPlugin);
 
 //#endregion
-export { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, IThreadCommentDataSourceService, ResolveCommentCommand, SheetsThreadCommentPopupService, ShowAddSheetCommentModalOperation, ToggleSheetCommentPanelOperation, UniverSheetsThreadCommentUIPlugin, UniverThreadCommentUIPlugin, UpdateCommentCommand };
+export { SheetsThreadCommentPopupService, ShowAddSheetCommentModalOperation, ToggleSheetCommentPanelOperation, UniverSheetsThreadCommentUIPlugin };

package/lib/locale/ar-SA.js

@@ -1,6 +1,7 @@
 //#region src/locale/ar-SA.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "إدارة التعليقات" },
+	permission: { commentErr: "ليس لديك إذن لاستخدام التعليقات." },
 	menu: {
 		addComment: "إضافة تعليق",
 		commentManagement: "إدارة التعليقات"

package/lib/locale/ca-ES.js

@@ -1,6 +1,7 @@
 //#region src/locale/ca-ES.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Gestió de comentaris" },
+	permission: { commentErr: "No teniu permís per utilitzar comentaris." },
 	menu: {
 		addComment: "Afegeix un comentari",
 		commentManagement: "Gestió de comentaris"

package/lib/locale/de-DE.js

@@ -1,6 +1,7 @@
 //#region src/locale/de-DE.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Kommentarverwaltung" },
+	permission: { commentErr: "Sie haben keine Berechtigung, Kommentare zu verwenden." },
 	menu: {
 		addComment: "Kommentar hinzufügen",
 		commentManagement: "Kommentarverwaltung"

package/lib/locale/en-US.js

@@ -16,6 +16,7 @@
 */
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Comment Management" },
+	permission: { commentErr: "You do not have permission to use comments." },
 	menu: {
 		addComment: "Add Comment",
 		commentManagement: "Comment Management"

package/lib/locale/es-ES.js

@@ -1,6 +1,7 @@
 //#region src/locale/es-ES.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Gestión de comentarios" },
+	permission: { commentErr: "No tiene permiso para usar comentarios." },
 	menu: {
 		addComment: "Añadir comentario",
 		commentManagement: "Gestión de comentarios"

package/lib/locale/fa-IR.js

@@ -1,6 +1,7 @@
 //#region src/locale/fa-IR.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "مدیریت نظر" },
+	permission: { commentErr: "شما مجوز استفاده از نظرات را ندارید." },
 	menu: {
 		addComment: "افزودن نظر",
 		commentManagement: "مدیریت نظر"

package/lib/locale/fr-FR.js

@@ -1,6 +1,7 @@
 //#region src/locale/fr-FR.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Gestion des commentaires" },
+	permission: { commentErr: "Vous n’avez pas l’autorisation d’utiliser les commentaires." },
 	menu: {
 		addComment: "Ajouter un commentaire",
 		commentManagement: "Gestion des commentaires"

package/lib/locale/id-ID.js

@@ -1,6 +1,7 @@
 //#region src/locale/id-ID.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Manajemen Komentar" },
+	permission: { commentErr: "Anda tidak memiliki izin untuk menggunakan komentar." },
 	menu: {
 		addComment: "Tambah Komentar",
 		commentManagement: "Manajemen Komentar"

package/lib/locale/it-IT.js

@@ -1,6 +1,7 @@
 //#region src/locale/it-IT.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "Gestione commenti" },
+	permission: { commentErr: "Non hai l’autorizzazione per usare i commenti." },
 	menu: {
 		addComment: "Aggiungi commento",
 		commentManagement: "Gestione commenti"

package/lib/locale/ja-JP.js

@@ -1,6 +1,7 @@
 //#region src/locale/ja-JP.ts
 const locale = { "sheets-thread-comment-ui": {
 	panel: { title: "コメント管理" },
+	permission: { commentErr: "コメントを使用する権限がありません。" },
 	menu: {
 		addComment: "コメントを追加",
 		commentManagement: "コメント管理"