@univerjs/thread-comment-ui 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/cjs/index.js

@@ -125,7 +125,7 @@ const SetActiveCommentOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/thread-comment-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -180,7 +180,7 @@ _defineProperty(UniverThreadCommentUIPlugin, "packageName", name);
 _defineProperty(UniverThreadCommentUIPlugin, "version", version);
 _defineProperty(UniverThreadCommentUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_UNKNOWN);
 UniverThreadCommentUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_thread_comment.UniverThreadCommentPlugin, _univerjs_ui.UniverUIPlugin, _univerjs_docs_ui.UniverDocsUIPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_thread_comment.UniverThreadCommentPlugin, _univerjs_docs_ui.UniverDocsUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, _univerjs_core.ICommandService),
 	__decorateParam(3, _univerjs_core.IConfigService)
@@ -308,8 +308,8 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
 	const editor = (0, react.useRef)(null);
 	const rootEditorId = type === _univerjs_core.UniverInstanceType.UNIVER_DOC ? _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
 	const [canSubmit, setCanSubmit] = (0, react.useState)(() => {
-		var _comment$text$dataStr, _comment$text;
-		return _univerjs_core.BuildTextUtils.transform.getPlainText((_comment$text$dataStr = comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) !== null && _comment$text$dataStr !== void 0 ? _comment$text$dataStr : "");
+		var _comment$text;
+		return _univerjs_core.BuildTextUtils.transform.getPlainText((comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) ?? "");
 	});
 	const keyboardEventConfig = (0, react.useMemo)(() => ({
 		keyCodes: [{ keyCode: _univerjs_ui.KeyCode.ENTER }],
@@ -368,13 +368,14 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
 				className: "univer-w-full",
 				editorRef: editor,
 				editorId,
+				preserveHostFocus: true,
 				autoFocus,
 				keyboardEventConfig,
 				placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
 				initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
 				onChange: (data) => {
-					var _data$body$dataStream, _data$body;
-					return setCanSubmit(_univerjs_core.BuildTextUtils.transform.getPlainText((_data$body$dataStream = (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) !== null && _data$body$dataStream !== void 0 ? _data$body$dataStream : ""));
+					var _data$body;
+					return setCanSubmit(_univerjs_core.BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
 				},
 				onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
 				isSingle: false,
@@ -428,7 +429,8 @@ function formatCommentDateTime(value, region) {
 		day: "numeric",
 		hour: "2-digit",
 		minute: "2-digit",
-		hour12: false
+		hour12: false,
+		numberingSystem: "latn"
 	});
 }
 const ThreadCommentItem = (props) => {
@@ -445,6 +447,7 @@ const ThreadCommentItem = (props) => {
 	const uiConfig = (0, _univerjs_ui.useConfigValue)(_univerjs_ui.UI_PLUGIN_CONFIG_KEY);
 	const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
 	const currentRegion = (0, _univerjs_ui.useObservable)(regionService.currentRegion$, regionService.getCurrentRegion());
+	const direction = (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection());
 	const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
 	const handleDeleteItem = () => {
 		if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
@@ -475,9 +478,10 @@ const ThreadCommentItem = (props) => {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ReplyToCommentIcon, {})
 				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 					overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						dir: direction,
 						className: "univer-rounded-lg",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
+							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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 								className: "hover:univer-bg-gray-200",
 								onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
@@ -497,7 +501,7 @@ const ThreadCommentItem = (props) => {
 			}) : null,
 			dateText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
 				dir: "ltr",
-				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
+				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
 			}),
 			editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentEditor, {
@@ -522,7 +526,7 @@ const ThreadCommentItem = (props) => {
 					});
 				}
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
+				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
 				children: transformDocument2TextNodes(item.text).map((paragraph, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-break-words",
 					children: paragraph.map((item, i) => {
@@ -540,7 +544,6 @@ const ThreadCommentItem = (props) => {
 	});
 };
 const ThreadCommentTree = (props) => {
-	var _currentUser$userID, _comments$children, _comments$root$subUni;
 	const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
 	const threadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment.ThreadCommentModel);
 	const [isHover, setIsHover] = (0, react.useState)(false);
@@ -562,13 +565,13 @@ const ThreadCommentTree = (props) => {
 	const renderComments = [...comments ? [comments.root] : [{
 		id: MOCK_ID,
 		text: { dataStream: "\n\r" },
-		personId: (_currentUser$userID = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID !== void 0 ? _currentUser$userID : "",
-		ref: refStr !== null && refStr !== void 0 ? refStr : "",
+		personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
+		ref: refStr ?? "",
 		dT: "",
 		unitId,
 		subUnitId,
 		threadId: ""
-	}], ...(_comments$children = comments === null || comments === void 0 ? void 0 : comments.children) !== null && _comments$children !== void 0 ? _comments$children : []];
+	}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
 	const scroller = (0, react.useRef)(null);
 	const handleResolve = (e) => {
 		e.stopPropagation();
@@ -600,7 +603,7 @@ const ThreadCommentTree = (props) => {
 	(0, react.useEffect)(() => {
 		return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
 	}, []);
-	const subUnitName = getSubUnitName((_comments$root$subUni = comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) !== null && _comments$root$subUni !== void 0 ? _comments$root$subUni : subUnitId);
+	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 threadCommentEditorId = getThreadCommentEditorId({
@@ -612,7 +615,7 @@ const ThreadCommentTree = (props) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		id: `${location}-${unitId}-${subUnitId}-${id}`,
-		className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderClassName, {
+		className: (0, _univerjs_design.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", _univerjs_design.borderClassName, {
 			"univer-w-[278px]": !full,
 			"univer-w-full": full,
 			"univer-shadow": !resolved && (showHighlight || isHover || location === "CELL")
@@ -656,7 +659,7 @@ const ThreadCommentTree = (props) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: scroller,
-				className: (0, _univerjs_design.clsx)("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", _univerjs_design.scrollbarClassName),
+				className: (0, _univerjs_design.clsx)("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", _univerjs_design.scrollbarClassName, location === "PANEL" && "-univer-mx-4 univer-px-4"),
 				children: renderComments.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentItem, {
 					unitId,
 					subUnitId,
@@ -698,18 +701,17 @@ const ThreadCommentTree = (props) => {
 				subUnitId,
 				editorId: threadCommentEditorId,
 				onSave: async ({ text, attachments }) => {
-					var _currentUser$userID2, _comments$root$thread;
 					const comment = {
 						text,
 						attachments,
 						dT: (0, _univerjs_thread_comment.getDT)(),
 						id: (0, _univerjs_core.generateRandomId)(),
 						ref: refStr,
-						personId: (_currentUser$userID2 = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID2 !== void 0 ? _currentUser$userID2 : "",
+						personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
 						parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
 						unitId,
 						subUnitId,
-						threadId: (_comments$root$thread = comments === null || comments === void 0 ? void 0 : comments.root.threadId) !== null && _comments$root$thread !== void 0 ? _comments$root$thread : ""
+						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(_univerjs_thread_comment.AddCommentCommand.id, {
@@ -746,17 +748,13 @@ const ThreadCommentPanel = (props) => {
 	const location = "PANEL";
 	const currentUser = (0, _univerjs_ui.useObservable)(userService.currentUser$);
 	const comments = (0, react.useMemo)(() => {
-		var _unitComments$filter;
-		const allComments = unit === "all" ? unitComments : (_unitComments$filter = unitComments.filter((i) => i.subUnitId === subUnitId)) !== null && _unitComments$filter !== void 0 ? _unitComments$filter : [];
-		const sort = sortComments !== null && sortComments !== void 0 ? sortComments : ((a) => a);
-		const res = allComments.map((i) => {
-			var _i$children;
-			return {
-				...i.root,
-				children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
-				users: i.relativeUsers
-			};
-		});
+		const allComments = unit === "all" ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId) ?? [];
+		const sort = sortComments ?? ((a) => a);
+		const res = allComments.map((i) => ({
+			...i.root,
+			children: i.children ?? [],
+			users: i.relativeUsers
+		}));
 		if (showComments) {
 			const map = /* @__PURE__ */ new Map();
 			res.forEach((comment) => {

package/lib/cjs/locale/ar-SA.js

@@ -2,9 +2,7 @@
 //#region src/locale/ar-SA.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "إدارة التعليقات",
 		empty: "لا توجد تعليقات بعد",
-		filterEmpty: "لا توجد نتائج مطابقة",
 		reset: "إعادة ضبط التصفية",
 		addComment: "إضافة تعليق",
 		solved: "تم الحل"

package/lib/cjs/locale/ca-ES.js

@@ -2,9 +2,7 @@
 //#region src/locale/ca-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestió de comentaris",
 		empty: "Encara no hi ha comentaris",
-		filterEmpty: "Cap resultat coincident",
 		reset: "Restableix el filtre",
 		addComment: "Afegeix un comentari",
 		solved: "Resolut"

package/lib/cjs/locale/de-DE.js

@@ -2,9 +2,7 @@
 //#region src/locale/de-DE.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Kommentarverwaltung",
 		empty: "Noch keine Kommentare",
-		filterEmpty: "Kein Treffer",
 		reset: "Filter zurücksetzen",
 		addComment: "Kommentar hinzufügen",
 		solved: "Gelöst"

package/lib/cjs/locale/en-US.js

@@ -17,9 +17,7 @@
 */
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Comment Management",
 		empty: "No comments yet",
-		filterEmpty: "No match result",
 		reset: "Reset Filter",
 		addComment: "Add Comment",
 		solved: "Solved"

package/lib/cjs/locale/es-ES.js

@@ -2,9 +2,7 @@
 //#region src/locale/es-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestión de comentarios",
 		empty: "Aún no hay comentarios",
-		filterEmpty: "Sin resultados coincidentes",
 		reset: "Restablecer filtro",
 		addComment: "Añadir comentario",
 		solved: "Resuelto"

package/lib/cjs/locale/fa-IR.js

@@ -2,9 +2,7 @@
 //#region src/locale/fa-IR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "مدیریت نظرات",
 		empty: "هنوز نظری وجود ندارد",
-		filterEmpty: "نتیجه ای یافت نشد",
 		reset: "بازنشانی فیلتر",
 		addComment: "افزودن نظر",
 		solved: "حل شده"

package/lib/cjs/locale/fr-FR.js

@@ -2,9 +2,7 @@
 //#region src/locale/fr-FR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestion des commentaires",
 		empty: "Pas encore de commentaires",
-		filterEmpty: "Aucun résultat correspondant",
 		reset: "Réinitialiser le filtre",
 		addComment: "Ajouter un commentaire",
 		solved: "Résolu"

package/lib/cjs/locale/id-ID.js

@@ -2,9 +2,7 @@
 //#region src/locale/id-ID.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Manajemen Komentar",
 		empty: "Belum ada komentar",
-		filterEmpty: "Tidak ada hasil yang cocok",
 		reset: "Atur Ulang Filter",
 		addComment: "Tambah Komentar",
 		solved: "Terselesaikan"

package/lib/cjs/locale/it-IT.js

@@ -2,9 +2,7 @@
 //#region src/locale/it-IT.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestione commenti",
 		empty: "Nessun commento",
-		filterEmpty: "Nessun risultato",
 		reset: "Reimposta filtro",
 		addComment: "Aggiungi commento",
 		solved: "Risolto"

package/lib/cjs/locale/ja-JP.js

@@ -2,9 +2,7 @@
 //#region src/locale/ja-JP.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "コメント管理",
 		empty: "まだコメントはありません",
-		filterEmpty: "一致する結果がありません",
 		reset: "フィルタをリセット",
 		addComment: "コメントを追加",
 		solved: "解決済み"

package/lib/cjs/locale/ko-KR.js

@@ -2,9 +2,7 @@
 //#region src/locale/ko-KR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "댓글 관리",
 		empty: "아직 댓글이 없습니다",
-		filterEmpty: "일치하는 결과가 없습니다",
 		reset: "필터 초기화",
 		addComment: "댓글 추가",
 		solved: "해결됨"

package/lib/cjs/locale/pl-PL.js

@@ -2,9 +2,7 @@
 //#region src/locale/pl-PL.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Zarządzanie komentarzami",
 		empty: "Brak komentarzy",
-		filterEmpty: "Brak wyników",
 		reset: "Resetuj filtr",
 		addComment: "Dodaj komentarz",
 		solved: "Rozwiązane"

package/lib/cjs/locale/pt-BR.js

@@ -2,9 +2,7 @@
 //#region src/locale/pt-BR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gerenciamento de Comentários",
 		empty: "Nenhum comentário ainda",
-		filterEmpty: "Nenhum resultado correspondente",
 		reset: "Redefinir Filtro",
 		addComment: "Adicionar Comentário",
 		solved: "Resolvido"

package/lib/cjs/locale/ru-RU.js

@@ -2,9 +2,7 @@
 //#region src/locale/ru-RU.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Управление комментариями",
 		empty: "Комментариев пока нет",
-		filterEmpty: "Нет совпадений",
 		reset: "Сбросить фильтр",
 		addComment: "Добавить комментарий",
 		solved: "Решено"

package/lib/cjs/locale/sk-SK.js

@@ -2,9 +2,7 @@
 //#region src/locale/sk-SK.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Správa komentárov",
 		empty: "Zatiaľ žiadne komentáre",
-		filterEmpty: "Žiadne zodpovedajúce výsledky",
 		reset: "Obnoviť filter",
 		addComment: "Pridať komentár",
 		solved: "Vyriešené"

package/lib/cjs/locale/vi-VN.js

@@ -2,9 +2,7 @@
 //#region src/locale/vi-VN.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Quản lý Bình luận",
 		empty: "Chưa có bình luận",
-		filterEmpty: "Không có kết quả phù hợp",
 		reset: "Đặt lại",
 		addComment: "Thêm bình luận",
 		solved: "Đã giải quyết"

package/lib/cjs/locale/zh-CN.js

@@ -2,9 +2,7 @@
 //#region src/locale/zh-CN.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "评论管理",
 		empty: "暂无评论",
-		filterEmpty: "没有匹配的结果",
 		reset: "重置",
 		addComment: "添加评论",
 		solved: "已解决"

package/lib/cjs/locale/zh-HK.js

@@ -2,9 +2,7 @@
 //#region src/locale/zh-HK.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "評論管理",
 		empty: "暫無評論",
-		filterEmpty: "沒有符合的結果",
 		reset: "重置",
 		addComment: "新增評論",
 		solved: "已解決"

package/lib/cjs/locale/zh-TW.js

@@ -2,9 +2,7 @@
 //#region src/locale/zh-TW.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "評論管理",
 		empty: "暫無評論",
-		filterEmpty: "沒有符合的結果",
 		reset: "重置",
 		addComment: "新增評論",
 		solved: "已解決"

package/lib/es/index.js

@@ -1,5 +1,5 @@
 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, UniverUIPlugin, useConfigValue, useDependency, useObservable } from "@univerjs/ui";
+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 { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
@@ -124,7 +124,7 @@ const SetActiveCommentOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/thread-comment-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -179,7 +179,7 @@ _defineProperty(UniverThreadCommentUIPlugin, "packageName", name);
 _defineProperty(UniverThreadCommentUIPlugin, "version", version);
 _defineProperty(UniverThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
 UniverThreadCommentUIPlugin = __decorate([
-	DependentOn(UniverThreadCommentPlugin, UniverUIPlugin, UniverDocsUIPlugin),
+	DependentOn(UniverThreadCommentPlugin, UniverDocsUIPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, ICommandService),
 	__decorateParam(3, IConfigService)
@@ -307,8 +307,8 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
 	const editor = useRef(null);
 	const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
 	const [canSubmit, setCanSubmit] = useState(() => {
-		var _comment$text$dataStr, _comment$text;
-		return BuildTextUtils.transform.getPlainText((_comment$text$dataStr = comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) !== null && _comment$text$dataStr !== void 0 ? _comment$text$dataStr : "");
+		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 }],
@@ -367,13 +367,14 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
 				className: "univer-w-full",
 				editorRef: editor,
 				editorId,
+				preserveHostFocus: true,
 				autoFocus,
 				keyboardEventConfig,
 				placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
 				initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
 				onChange: (data) => {
-					var _data$body$dataStream, _data$body;
-					return setCanSubmit(BuildTextUtils.transform.getPlainText((_data$body$dataStream = (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) !== null && _data$body$dataStream !== void 0 ? _data$body$dataStream : ""));
+					var _data$body;
+					return setCanSubmit(BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
 				},
 				onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
 				isSingle: false,
@@ -427,7 +428,8 @@ function formatCommentDateTime(value, region) {
 		day: "numeric",
 		hour: "2-digit",
 		minute: "2-digit",
-		hour12: false
+		hour12: false,
+		numberingSystem: "latn"
 	});
 }
 const ThreadCommentItem = (props) => {
@@ -444,6 +446,7 @@ const ThreadCommentItem = (props) => {
 	const uiConfig = useConfigValue(UI_PLUGIN_CONFIG_KEY);
 	const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
 	const currentRegion = useObservable(regionService.currentRegion$, regionService.getCurrentRegion());
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
 	const handleDeleteItem = () => {
 		if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
@@ -474,9 +477,10 @@ const ThreadCommentItem = (props) => {
 					children: /* @__PURE__ */ jsx(ReplyToCommentIcon, {})
 				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ jsx(Dropdown, {
 					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 [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
+							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: "hover:univer-bg-gray-200",
 								onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
@@ -496,7 +500,7 @@ const ThreadCommentItem = (props) => {
 			}) : null,
 			dateText && /* @__PURE__ */ jsx("time", {
 				dir: "ltr",
-				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
+				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
 			}),
 			editing ? /* @__PURE__ */ jsx(ThreadCommentEditor, {
@@ -521,7 +525,7 @@ const ThreadCommentItem = (props) => {
 					});
 				}
 			}) : /* @__PURE__ */ jsx("div", {
-				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
+				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
 				children: transformDocument2TextNodes(item.text).map((paragraph, i) => /* @__PURE__ */ jsx("div", {
 					className: "univer-break-words",
 					children: paragraph.map((item, i) => {
@@ -539,7 +543,6 @@ const ThreadCommentItem = (props) => {
 	});
 };
 const ThreadCommentTree = (props) => {
-	var _currentUser$userID, _comments$children, _comments$root$subUni;
 	const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
 	const threadCommentModel = useDependency(ThreadCommentModel);
 	const [isHover, setIsHover] = useState(false);
@@ -561,13 +564,13 @@ const ThreadCommentTree = (props) => {
 	const renderComments = [...comments ? [comments.root] : [{
 		id: MOCK_ID,
 		text: { dataStream: "\n\r" },
-		personId: (_currentUser$userID = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID !== void 0 ? _currentUser$userID : "",
-		ref: refStr !== null && refStr !== void 0 ? refStr : "",
+		personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
+		ref: refStr ?? "",
 		dT: "",
 		unitId,
 		subUnitId,
 		threadId: ""
-	}], ...(_comments$children = comments === null || comments === void 0 ? void 0 : comments.children) !== null && _comments$children !== void 0 ? _comments$children : []];
+	}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
 	const scroller = useRef(null);
 	const handleResolve = (e) => {
 		e.stopPropagation();
@@ -599,7 +602,7 @@ const ThreadCommentTree = (props) => {
 	useEffect(() => {
 		return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
 	}, []);
-	const subUnitName = getSubUnitName((_comments$root$subUni = comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) !== null && _comments$root$subUni !== void 0 ? _comments$root$subUni : subUnitId);
+	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 threadCommentEditorId = getThreadCommentEditorId({
@@ -611,7 +614,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")
@@ -655,7 +658,7 @@ const ThreadCommentTree = (props) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: scroller,
-				className: clsx("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
+				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,
 					subUnitId,
@@ -697,18 +700,17 @@ const ThreadCommentTree = (props) => {
 				subUnitId,
 				editorId: threadCommentEditorId,
 				onSave: async ({ text, attachments }) => {
-					var _currentUser$userID2, _comments$root$thread;
 					const comment = {
 						text,
 						attachments,
 						dT: getDT(),
 						id: generateRandomId(),
 						ref: refStr,
-						personId: (_currentUser$userID2 = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID2 !== void 0 ? _currentUser$userID2 : "",
+						personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
 						parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
 						unitId,
 						subUnitId,
-						threadId: (_comments$root$thread = comments === null || comments === void 0 ? void 0 : comments.root.threadId) !== null && _comments$root$thread !== void 0 ? _comments$root$thread : ""
+						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, {
@@ -745,17 +747,13 @@ const ThreadCommentPanel = (props) => {
 	const location = "PANEL";
 	const currentUser = useObservable(userService.currentUser$);
 	const comments = useMemo(() => {
-		var _unitComments$filter;
-		const allComments = unit === "all" ? unitComments : (_unitComments$filter = unitComments.filter((i) => i.subUnitId === subUnitId)) !== null && _unitComments$filter !== void 0 ? _unitComments$filter : [];
-		const sort = sortComments !== null && sortComments !== void 0 ? sortComments : ((a) => a);
-		const res = allComments.map((i) => {
-			var _i$children;
-			return {
-				...i.root,
-				children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
-				users: i.relativeUsers
-			};
-		});
+		const allComments = unit === "all" ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId) ?? [];
+		const sort = sortComments ?? ((a) => a);
+		const res = allComments.map((i) => ({
+			...i.root,
+			children: i.children ?? [],
+			users: i.relativeUsers
+		}));
 		if (showComments) {
 			const map = /* @__PURE__ */ new Map();
 			res.forEach((comment) => {

package/lib/es/locale/ar-SA.js

@@ -1,9 +1,7 @@
 //#region src/locale/ar-SA.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "إدارة التعليقات",
 		empty: "لا توجد تعليقات بعد",
-		filterEmpty: "لا توجد نتائج مطابقة",
 		reset: "إعادة ضبط التصفية",
 		addComment: "إضافة تعليق",
 		solved: "تم الحل"

package/lib/es/locale/ca-ES.js

@@ -1,9 +1,7 @@
 //#region src/locale/ca-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestió de comentaris",
 		empty: "Encara no hi ha comentaris",
-		filterEmpty: "Cap resultat coincident",
 		reset: "Restableix el filtre",
 		addComment: "Afegeix un comentari",
 		solved: "Resolut"

package/lib/es/locale/de-DE.js

@@ -1,9 +1,7 @@
 //#region src/locale/de-DE.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Kommentarverwaltung",
 		empty: "Noch keine Kommentare",
-		filterEmpty: "Kein Treffer",
 		reset: "Filter zurücksetzen",
 		addComment: "Kommentar hinzufügen",
 		solved: "Gelöst"

package/lib/es/locale/en-US.js

@@ -16,9 +16,7 @@
 */
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Comment Management",
 		empty: "No comments yet",
-		filterEmpty: "No match result",
 		reset: "Reset Filter",
 		addComment: "Add Comment",
 		solved: "Solved"