@univerjs/thread-comment-ui 0.2.5 → 0.2.7

package/lib/es/index.js

@@ -1,45 +1,47 @@
-var je = Object.defineProperty;
-var Be = (t, e, n) => e in t ? je(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var H = (t, e, n) => Be(t, typeof e != "symbol" ? e + "" : e, n);
-import We from "dayjs";
-import { UniverThreadCommentPlugin as Fe, ThreadCommentModel as Ee, AddCommentCommand as ze, UpdateCommentCommand as Ze, ResolveCommentCommand as Ye, DeleteCommentTreeCommand as ye, DeleteCommentCommand as Ge } from "@univerjs/thread-comment";
-import { Disposable as Ke, UniverInstanceType as he, Inject as xe, IUniverInstanceService as qe, CommandType as _e, createIdentifier as Je, Plugin as Qe, mergeOverrideWithDependencies as Xe, DependentOn as et, Injector as tt, ICommandService as X, CustomRangeType as nt, useDependency as S, LocaleService as Ce, UserManagerService as ve, Tools as rt } from "@univerjs/core";
-import { ISidebarService as Te, useObservable as V } from "@univerjs/ui";
-import { BehaviorSubject as ge, filter as ot } from "rxjs";
-import a, { forwardRef as A, useRef as me, createElement as B, useState as k, useImperativeHandle as at, useEffect as ue, useMemo as ce } from "react";
-import { Mentions as it, Mention as lt, Button as ie, Dropdown as st, Menu as mt, MenuItem as pe, Select as Ie } from "@univerjs/design";
-import dt from "clsx";
-import { ITextSelectionRenderManager as ct } from "@univerjs/engine-render";
-import { TextSelectionManagerService as ut } from "@univerjs/docs";
-function ht() {
-  return We().format("YYYY/MM/DD HH:mm");
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
+import dayjs from "dayjs";
+import { UniverThreadCommentPlugin, ThreadCommentModel, AddCommentCommand, UpdateCommentCommand, ResolveCommentCommand, DeleteCommentTreeCommand, DeleteCommentCommand } from "@univerjs/thread-comment";
+import { Disposable, UniverInstanceType, Inject, IUniverInstanceService, CommandType, createIdentifier, Plugin, mergeOverrideWithDependencies, DependentOn, Injector, ICommandService, CustomRangeType, useDependency, LocaleService, UserManagerService, Tools } from "@univerjs/core";
+import { ISidebarService, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, filter } from "rxjs";
+import React, { forwardRef, useRef, createElement, useState, useImperativeHandle, useEffect, useMemo } from "react";
+import { Mentions, Mention, Button, Dropdown, Menu, MenuItem, Select } from "@univerjs/design";
+import cs from "clsx";
+import { ITextSelectionRenderManager } from "@univerjs/engine-render";
+import { TextSelectionManagerService } from "@univerjs/docs";
+function getDT() {
+  return dayjs().format("YYYY/MM/DD HH:mm");
 }
-const Ct = "thread-comment-panel", vt = "THREAD_COMMENT_UI_PLUGIN";
-var ft = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, pt = (t, e, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? gt(e, n) : e, s = t.length - 1, m; s >= 0; s--)
-    (m = t[s]) && (o = (r ? m(e, n, o) : m(o)) || o);
-  return r && o && ft(e, n, o), o;
-}, be = (t, e) => (n, r) => e(n, r, t);
-let z = class extends Ke {
-  constructor(e, n) {
+__name(getDT, "getDT");
+const THREAD_COMMENT_PANEL = "thread-comment-panel", PLUGIN_NAME = "THREAD_COMMENT_UI_PLUGIN";
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a;
+let ThreadCommentPanelService = (_a = class extends Disposable {
+  constructor(_sidebarService, _univerInstanceService) {
     super();
-    H(this, "_panelVisible", !1);
-    H(this, "_panelVisible$", new ge(!1));
-    H(this, "_activeCommentId");
-    H(this, "_activeCommentId$", new ge(void 0));
-    H(this, "panelVisible$", this._panelVisible$.asObservable());
-    H(this, "activeCommentId$", this._activeCommentId$.asObservable());
-    this._sidebarService = e, this._univerInstanceService = n, this._init(), this.disposeWithMe(() => {
+    __publicField(this, "_panelVisible", !1);
+    __publicField(this, "_panelVisible$", new BehaviorSubject(!1));
+    __publicField(this, "_activeCommentId");
+    __publicField(this, "_activeCommentId$", new BehaviorSubject(void 0));
+    __publicField(this, "panelVisible$", this._panelVisible$.asObservable());
+    __publicField(this, "activeCommentId$", this._activeCommentId$.asObservable());
+    this._sidebarService = _sidebarService, this._univerInstanceService = _univerInstanceService, this._init(), this.disposeWithMe(() => {
       this._activeCommentId$.complete(), this._panelVisible$.complete();
     });
   }
   _init() {
     this.disposeWithMe(
-      this._sidebarService.sidebarOptions$.subscribe((e) => {
-        e.visible || this.setPanelVisible(!1);
+      this._sidebarService.sidebarOptions$.subscribe((opt) => {
+        opt.visible || this.setPanelVisible(!1);
       })
     ), this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(he.UNIVER_SHEET).pipe(ot((e) => !e)).subscribe(() => {
+      this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(filter((sheet) => !sheet)).subscribe(() => {
         this._sidebarService.close();
       })
     );
@@ -50,704 +52,709 @@ let z = class extends Ke {
   get activeCommentId() {
     return this._activeCommentId;
   }
-  setPanelVisible(e) {
-    this._panelVisible = e, this._panelVisible$.next(e);
+  setPanelVisible(visible) {
+    this._panelVisible = visible, this._panelVisible$.next(visible);
   }
-  setActiveComment(e) {
-    this._activeCommentId = e, this._activeCommentId$.next(e);
+  setActiveComment(commentInfo) {
+    this._activeCommentId = commentInfo, this._activeCommentId$.next(commentInfo);
   }
-};
-z = pt([
-  be(0, xe(Te)),
-  be(1, qe)
-], z);
-const It = {
+}, __name(_a, "ThreadCommentPanelService"), _a);
+ThreadCommentPanelService = __decorateClass$1([
+  __decorateParam$1(0, Inject(ISidebarService)),
+  __decorateParam$1(1, IUniverInstanceService)
+], ThreadCommentPanelService);
+const ToggleSheetCommentPanelOperation = {
   id: "thread-comment-ui.operation.toggle-panel",
-  type: _e.OPERATION,
-  handler(t) {
-    const e = t.get(Te), n = t.get(z);
-    return n.panelVisible ? (e.close(), n.setPanelVisible(!1)) : (e.open({
+  type: CommandType.OPERATION,
+  handler(accessor) {
+    const sidebarService = accessor.get(ISidebarService), panelService = accessor.get(ThreadCommentPanelService);
+    return panelService.panelVisible ? (sidebarService.close(), panelService.setPanelVisible(!1)) : (sidebarService.open({
       header: { title: "threadCommentUI.panel.title" },
-      children: { label: Ct },
+      children: { label: THREAD_COMMENT_PANEL },
       width: 320
-    }), n.setPanelVisible(!0)), !0;
+    }), panelService.setPanelVisible(!0)), !0;
   }
-}, j = {
+}, SetActiveCommentOperation = {
   id: "thread-comment-ui.operation.set-active-comment",
-  type: _e.OPERATION,
-  handler(t, e) {
-    return t.get(z).setActiveComment(e), !0;
+  type: CommandType.OPERATION,
+  handler(accessor, params) {
+    return accessor.get(ThreadCommentPanelService).setActiveComment(params), !0;
   }
-};
-class bt {
+}, _ThreadCommentMentionDataService = class _ThreadCommentMentionDataService {
   constructor() {
-    H(this, "dataSource");
-    H(this, "renderSuggestion");
-    H(this, "trigger", "@");
+    __publicField(this, "dataSource");
+    __publicField(this, "renderSuggestion");
+    __publicField(this, "trigger", "@");
   }
-  async getMentions(e, n, r) {
-    return this.dataSource ? this.dataSource.getMentions(e, n, r) : [];
+  async getMentions(search, unitId, subUnitId) {
+    return this.dataSource ? this.dataSource.getMentions(search, unitId, subUnitId) : [];
   }
-}
-const Ne = Je("thread-comment.mention-data.service");
-var Me = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Et = (t, e, n) => e in t ? Me(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, yt = (t, e, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? St(e, n) : e, s = t.length - 1, m; s >= 0; s--)
-    (m = t[s]) && (o = (r ? m(e, n, o) : m(o)) || o);
-  return r && o && Me(e, n, o), o;
-}, Se = (t, e) => (n, r) => e(n, r, t), Ue = (t, e, n) => Et(t, typeof e != "symbol" ? e + "" : e, n);
-let le = class extends Qe {
-  constructor(t, e, n) {
-    super(), this._config = t, this._injector = e, this._commandService = n;
+};
+__name(_ThreadCommentMentionDataService, "ThreadCommentMentionDataService");
+let ThreadCommentMentionDataService = _ThreadCommentMentionDataService;
+const IThreadCommentMentionDataService = createIdentifier("thread-comment.mention-data.service");
+var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp2(target, key, result), result;
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField"), _a2;
+let UniverThreadCommentUIPlugin = (_a2 = class extends Plugin {
+  constructor(_config, _injector, _commandService) {
+    super(), this._config = _config, this._injector = _injector, this._commandService = _commandService;
   }
-  onStarting(t) {
-    var e;
-    Xe([
-      [z],
-      [Ne, { useClass: bt }]
-    ], (e = this._config) == null ? void 0 : e.overrides).forEach((n) => {
-      t.add(n);
-    }), [It, j].forEach((n) => {
-      this._commandService.registerCommand(n);
+  onStarting() {
+    var _a3;
+    mergeOverrideWithDependencies([
+      [ThreadCommentPanelService],
+      [IThreadCommentMentionDataService, { useClass: ThreadCommentMentionDataService }]
+    ], (_a3 = this._config) == null ? void 0 : _a3.overrides).forEach((dep) => {
+      this._injector.add(dep);
+    }), [ToggleSheetCommentPanelOperation, SetActiveCommentOperation].forEach((command) => {
+      this._commandService.registerCommand(command);
     });
   }
-};
-Ue(le, "pluginName", vt);
-Ue(le, "type", he.UNIVER_UNKNOWN);
-le = yt([
-  et(Fe),
-  Se(1, xe(tt)),
-  Se(2, X)
-], le);
-var T = function() {
-  return T = Object.assign || function(t) {
-    for (var e, n = 1, r = arguments.length; n < r; n++) {
-      e = arguments[n];
-      for (var o in e) Object.prototype.hasOwnProperty.call(e, o) && (t[o] = e[o]);
+}, __name(_a2, "UniverThreadCommentUIPlugin"), _a2);
+__publicField2(UniverThreadCommentUIPlugin, "pluginName", PLUGIN_NAME);
+__publicField2(UniverThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
+UniverThreadCommentUIPlugin = __decorateClass([
+  DependentOn(UniverThreadCommentPlugin),
+  __decorateParam(1, Inject(Injector)),
+  __decorateParam(2, ICommandService)
+], UniverThreadCommentUIPlugin);
+var __assign = function() {
+  return __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
     }
     return t;
-  }, T.apply(this, arguments);
-}, xt = function(t, e) {
-  var n = {};
-  for (var r in t) Object.prototype.hasOwnProperty.call(t, r) && e.indexOf(r) < 0 && (n[r] = t[r]);
-  if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var o = 0, r = Object.getOwnPropertySymbols(t); o < r.length; o++)
-      e.indexOf(r[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, r[o]) && (n[r[o]] = t[r[o]]);
-  return n;
-}, W = A(function(t, e) {
-  var n = t.icon, r = t.id, o = t.className, s = t.extend, m = xt(t, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(r, " ").concat(o || "").trim(), f = me("_".concat(Nt()));
-  return Pe(n, "".concat(r), { defIds: n.defIds, idSuffix: f.current }, T({ ref: e, className: c }, m), s);
+  }, __assign.apply(this, arguments);
+}, __rest = function(s, e) {
+  var t = {};
+  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+  if (s != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
+      e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+  return t;
+}, IconBase = forwardRef(function(props, ref) {
+  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
+  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
 });
-function Pe(t, e, n, r, o) {
-  return B(t.tag, T(T({ key: e }, _t(t, n, o)), r), (Tt(t, n).children || []).map(function(s, m) {
-    return Pe(s, "".concat(e, "-").concat(t.tag, "-").concat(m), n, void 0, o);
+function render(node, id, runtimeProps, rootProps, extend) {
+  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
+    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
   }));
 }
-function _t(t, e, n) {
-  var r = T({}, t.attrs);
-  n != null && n.colorChannel1 && r.fill === "colorChannel1" && (r.fill = n.colorChannel1);
-  var o = e.defIds;
-  return !o || o.length === 0 || (t.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + e.idSuffix), Object.entries(r).forEach(function(s) {
-    var m = s[0], c = s[1];
-    typeof c == "string" && (r[m] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
-  })), r;
+__name(render, "render");
+function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
+  var attrs = __assign({}, node.attrs);
+  extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
+  var defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a3) {
+    var key = _a3[0], value = _a3[1];
+    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
+  })), attrs;
 }
-function Tt(t, e) {
-  var n, r = e.defIds;
-  return !r || r.length === 0 ? t : t.tag === "defs" && (!((n = t.children) === null || n === void 0) && n.length) ? T(T({}, t), { children: t.children.map(function(o) {
-    return typeof o.attrs.id == "string" && r && r.indexOf(o.attrs.id) > -1 ? T(T({}, o), { attrs: T(T({}, o.attrs), { id: o.attrs.id + e.idSuffix }) }) : o;
-  }) }) : t;
+__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
+function replaceRuntimeIdsInDefs(node, runtimeProps) {
+  var _a3, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a3 = node.children) === null || _a3 === void 0) && _a3.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+    return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
+  }) }) : node;
 }
-function Nt() {
+__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
+function generateShortUuid() {
   return Math.random().toString(36).substring(2, 8);
 }
-W.displayName = "UniverIcon";
-var Mt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.3313 1.4667C5.3313 1.13533 5.59993.866699 5.9313.866699H10.069C10.4004.866699 10.669 1.13533 10.669 1.4667 10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667zM1.09985 3.64443C1.09985 3.31306 1.36848 3.04443 1.69985 3.04443H14.2999C14.6312 3.04443 14.8999 3.31306 14.8999 3.64443 14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443zM6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928 9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171 10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778 9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539 9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263 6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539 5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778 6.12398 9.15024C5.88966 8.91593 5.88966 8.53603 6.12398 8.30171z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M4.75332 5.22217C3.86966 5.22217 3.15332 5.93851 3.15332 6.82217V12.5331C3.15332 13.9691 4.31738 15.1332 5.75332 15.1332H10.2465C11.6825 15.1332 12.8465 13.9691 12.8465 12.5331V6.82217C12.8465 5.93851 12.1302 5.22217 11.2465 5.22217H4.75332ZM4.35332 6.82217C4.35332 6.60125 4.53241 6.42217 4.75332 6.42217H11.2465C11.4674 6.42217 11.6465 6.60125 11.6465 6.82217V12.5331C11.6465 13.3063 11.0197 13.9332 10.2465 13.9332H5.75332C4.98012 13.9332 4.35332 13.3063 4.35332 12.5331V6.82217Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, $e = A(function(t, e) {
-  return B(W, Object.assign({}, t, {
+__name(generateShortUuid, "generateShortUuid");
+IconBase.displayName = "UniverIcon";
+var element$5 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.3313 1.4667C5.3313 1.13533 5.59993.866699 5.9313.866699H10.069C10.4004.866699 10.669 1.13533 10.669 1.4667 10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667zM1.09985 3.64443C1.09985 3.31306 1.36848 3.04443 1.69985 3.04443H14.2999C14.6312 3.04443 14.8999 3.31306 14.8999 3.64443 14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443zM6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928 9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171 10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778 9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539 9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263 6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539 5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778 6.12398 9.15024C5.88966 8.91593 5.88966 8.53603 6.12398 8.30171z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M4.75332 5.22217C3.86966 5.22217 3.15332 5.93851 3.15332 6.82217V12.5331C3.15332 13.9691 4.31738 15.1332 5.75332 15.1332H10.2465C11.6825 15.1332 12.8465 13.9691 12.8465 12.5331V6.82217C12.8465 5.93851 12.1302 5.22217 11.2465 5.22217H4.75332ZM4.35332 6.82217C4.35332 6.60125 4.53241 6.42217 4.75332 6.42217H11.2465C11.4674 6.42217 11.6465 6.60125 11.6465 6.82217V12.5331C11.6465 13.3063 11.0197 13.9332 10.2465 13.9332H5.75332C4.98012 13.9332 4.35332 13.3063 4.35332 12.5331V6.82217Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, DeleteSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "delete-single",
-    ref: e,
-    icon: Mt
+    ref,
+    icon: element$5
   }));
 });
-$e.displayName = "DeleteSingle";
-var Ut = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6 1.99991C8.60001 1.66854 8.33138 1.39991 8.00001 1.3999C7.66864 1.3999 7.40001 1.66853 7.4 1.9999L7.39996 7.3999H1.9999C1.66853 7.3999 1.3999 7.66853 1.3999 7.9999C1.3999 8.33127 1.66853 8.5999 1.9999 8.5999H7.39995L7.3999 13.9999C7.3999 14.3313 7.66853 14.5999 7.9999 14.5999C8.33127 14.5999 8.5999 14.3313 8.5999 13.9999L8.59995 8.5999H13.9999C14.3313 8.5999 14.5999 8.33127 14.5999 7.9999C14.5999 7.66853 14.3313 7.3999 13.9999 7.3999H8.59996L8.6 1.99991Z" } }] }, Oe = A(function(t, e) {
-  return B(W, Object.assign({}, t, {
+DeleteSingle.displayName = "DeleteSingle";
+var element$4 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6 1.99991C8.60001 1.66854 8.33138 1.39991 8.00001 1.3999C7.66864 1.3999 7.40001 1.66853 7.4 1.9999L7.39996 7.3999H1.9999C1.66853 7.3999 1.3999 7.66853 1.3999 7.9999C1.3999 8.33127 1.66853 8.5999 1.9999 8.5999H7.39995L7.3999 13.9999C7.3999 14.3313 7.66853 14.5999 7.9999 14.5999C8.33127 14.5999 8.5999 14.3313 8.5999 13.9999L8.59995 8.5999H13.9999C14.3313 8.5999 14.5999 8.33127 14.5999 7.9999C14.5999 7.66853 14.3313 7.3999 13.9999 7.3999H8.59996L8.6 1.99991Z" } }] }, IncreaseSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "increase-single",
-    ref: e,
-    icon: Ut
+    ref,
+    icon: element$4
   }));
 });
-Oe.displayName = "IncreaseSingle";
-var Pt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3 9C3.55228 9 4 8.55228 4 8 4 7.44772 3.55228 7 3 7 2.44772 7 2 7.44772 2 8 2 8.55228 2.44772 9 3 9zM8 9C8.55228 9 9 8.55228 9 8 9 7.44772 8.55228 7 8 7 7.44772 7 7 7.44772 7 8 7 8.55228 7.44772 9 8 9zM13 9C13.5523 9 14 8.55228 14 8 14 7.44772 13.5523 7 13 7 12.4477 7 12 7.44772 12 8 12 8.55228 12.4477 9 13 9z" } }] }, He = A(function(t, e) {
-  return B(W, Object.assign({}, t, {
+IncreaseSingle.displayName = "IncreaseSingle";
+var element$3 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3 9C3.55228 9 4 8.55228 4 8 4 7.44772 3.55228 7 3 7 2.44772 7 2 7.44772 2 8 2 8.55228 2.44772 9 3 9zM8 9C8.55228 9 9 8.55228 9 8 9 7.44772 8.55228 7 8 7 7.44772 7 7 7.44772 7 8 7 8.55228 7.44772 9 8 9zM13 9C13.5523 9 14 8.55228 14 8 14 7.44772 13.5523 7 13 7 12.4477 7 12 7.44772 12 8 12 8.55228 12.4477 9 13 9z" } }] }, MoreHorizontalSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "more-horizontal-single",
-    ref: e,
-    icon: Pt
+    ref,
+    icon: element$3
   }));
 });
-He.displayName = "MoreHorizontalSingle";
-var $t = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { stroke: "currentColor", d: "M7.48389 10.3267V12.1905C7.48389 12.7428 7.9316 13.1905 8.48389 13.1905H11.2216L12.2955 14.2644L13.3695 13.1905H14.1593C14.7116 13.1905 15.1593 12.7428 15.1593 12.1905V8.46289C15.1593 7.91061 14.7116 7.46289 14.1593 7.46289H12.2955", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M0.840332 3.73535C0.840332 2.63078 1.73576 1.73535 2.84033 1.73535H10.2955C11.4001 1.73535 12.2955 2.63078 12.2955 3.73535V8.32676C12.2955 9.43132 11.4001 10.3268 10.2955 10.3268H5.6014L4.1695 11.7587L3.05978 10.3268H2.84033C1.73576 10.3268 0.840332 9.43133 0.840332 8.32676V3.73535Z", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.41016 6.1311H6.76813M8.91626 6.1311H9.27424M3.90454 6.1311H4.26252", strokeLinecap: "round", strokeWidth: 1.2 } }] }, we = A(function(t, e) {
-  return B(W, Object.assign({}, t, {
+MoreHorizontalSingle.displayName = "MoreHorizontalSingle";
+var element$2 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { stroke: "currentColor", d: "M7.48389 10.3267V12.1905C7.48389 12.7428 7.9316 13.1905 8.48389 13.1905H11.2216L12.2955 14.2644L13.3695 13.1905H14.1593C14.7116 13.1905 15.1593 12.7428 15.1593 12.1905V8.46289C15.1593 7.91061 14.7116 7.46289 14.1593 7.46289H12.2955", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M0.840332 3.73535C0.840332 2.63078 1.73576 1.73535 2.84033 1.73535H10.2955C11.4001 1.73535 12.2955 2.63078 12.2955 3.73535V8.32676C12.2955 9.43132 11.4001 10.3268 10.2955 10.3268H5.6014L4.1695 11.7587L3.05978 10.3268H2.84033C1.73576 10.3268 0.840332 9.43133 0.840332 8.32676V3.73535Z", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.41016 6.1311H6.76813M8.91626 6.1311H9.27424M3.90454 6.1311H4.26252", strokeLinecap: "round", strokeWidth: 1.2 } }] }, ReplyToCommentSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "reply-to-comment-single",
-    ref: e,
-    icon: $t
+    ref,
+    icon: element$2
   }));
 });
-we.displayName = "ReplyToCommentSingle";
-var Ot = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6106 15.4036C12.4766 15.4036 15.6106 12.2696 15.6106 8.40356C15.6106 4.53757 12.4766 1.40356 8.6106 1.40356C4.7446 1.40356 1.6106 4.53757 1.6106 8.40356C1.6106 12.2696 4.7446 15.4036 8.6106 15.4036ZM12.3351 6.82773C12.5694 6.59342 12.5694 6.21352 12.3351 5.9792C12.1007 5.74489 11.7208 5.74489 11.4865 5.9792L7.91079 9.55494L6.33506 7.9792C6.10074 7.74489 5.72084 7.74489 5.48653 7.9792C5.25221 8.21352 5.25221 8.59342 5.48653 8.82773L7.48653 10.8277C7.72084 11.062 8.10074 11.062 8.33506 10.8277L12.3351 6.82773Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Re = A(function(t, e) {
-  return B(W, Object.assign({}, t, {
+ReplyToCommentSingle.displayName = "ReplyToCommentSingle";
+var element$1 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6106 15.4036C12.4766 15.4036 15.6106 12.2696 15.6106 8.40356C15.6106 4.53757 12.4766 1.40356 8.6106 1.40356C4.7446 1.40356 1.6106 4.53757 1.6106 8.40356C1.6106 12.2696 4.7446 15.4036 8.6106 15.4036ZM12.3351 6.82773C12.5694 6.59342 12.5694 6.21352 12.3351 5.9792C12.1007 5.74489 11.7208 5.74489 11.4865 5.9792L7.91079 9.55494L6.33506 7.9792C6.10074 7.74489 5.72084 7.74489 5.48653 7.9792C5.25221 8.21352 5.25221 8.59342 5.48653 8.82773L7.48653 10.8277C7.72084 11.062 8.10074 11.062 8.33506 10.8277L12.3351 6.82773Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, ResolvedSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "resolved-single",
-    ref: e,
-    icon: Ot
+    ref,
+    icon: element$1
   }));
 });
-Re.displayName = "ResolvedSingle";
-var Ht = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "circle", attrs: { cx: 8.73, cy: 8.4, r: 6.4, stroke: "currentColor", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.02637 8.40356L8.02637 10.4036L12.0264 6.40356", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }] }, De = A(function(t, e) {
-  return B(W, Object.assign({}, t, {
+ResolvedSingle.displayName = "ResolvedSingle";
+var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "circle", attrs: { cx: 8.73, cy: 8.4, r: 6.4, stroke: "currentColor", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.02637 8.40356L8.02637 10.4036L12.0264 6.40356", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }] }, SolveSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "solve-single",
-    ref: e,
-    icon: Ht
+    ref,
+    icon: element
   }));
 });
-De.displayName = "SolveSingle";
-const wt = "univer-thread-comment-editor-buttons", Rt = "univer-thread-comment-editor-suggestion", Dt = "univer-thread-comment-editor-suggestionActive", kt = "univer-thread-comment-editor-suggestion-icon", se = {
-  threadCommentEditorButtons: wt,
-  threadCommentEditorSuggestion: Rt,
-  threadCommentEditorSuggestionActive: Dt,
-  threadCommentEditorSuggestionIcon: kt
-}, At = (t) => {
-  const e = /@\[(.*?)\]\((.*?)\)|(\w+)/g;
-  let n, r = 0;
-  const o = [];
-  for (; (n = e.exec(t)) !== null; )
-    n.index > r && o.push({
+SolveSingle.displayName = "SolveSingle";
+const threadCommentEditorButtons = "univer-thread-comment-editor-buttons", threadCommentEditorSuggestion = "univer-thread-comment-editor-suggestion", threadCommentEditorSuggestionActive = "univer-thread-comment-editor-suggestionActive", threadCommentEditorSuggestionIcon = "univer-thread-comment-editor-suggestion-icon", styles$2 = {
+  threadCommentEditorButtons,
+  threadCommentEditorSuggestion,
+  threadCommentEditorSuggestionActive,
+  threadCommentEditorSuggestionIcon
+}, parseMentions = /* @__PURE__ */ __name((text) => {
+  const regex = /@\[(.*?)\]\((.*?)\)|(\w+)/g;
+  let match, lastIndex = 0;
+  const result = [];
+  for (; (match = regex.exec(text)) !== null; )
+    match.index > lastIndex && result.push({
       type: "text",
-      content: t.substring(r, n.index)
-    }), n[1] && n[2] ? o.push({
+      content: text.substring(lastIndex, match.index)
+    }), match[1] && match[2] ? result.push({
       type: "mention",
       content: {
-        label: n[1],
-        id: n[2]
+        label: match[1],
+        id: match[2]
       }
-    }) : n[3] && o.push({
+    }) : match[3] && result.push({
       type: "text",
-      content: n[3]
-    }), r = e.lastIndex;
-  return r < t.length && o.push({
+      content: match[3]
+    }), lastIndex = regex.lastIndex;
+  return lastIndex < text.length && result.push({
     type: "text",
-    content: t.substring(r)
-  }), o;
-}, Lt = (t) => t.map((e) => {
-  switch (e.type) {
+    content: text.substring(lastIndex)
+  }), result;
+}, "parseMentions"), transformTextNode2Text = /* @__PURE__ */ __name((nodes) => nodes.map((item) => {
+  switch (item.type) {
     case "mention":
-      return `@[${e.content.label}](${e.content.id})`;
+      return `@[${item.content.label}](${item.content.id})`;
     default:
-      return e.content;
+      return item.content;
   }
-}).join(""), ke = (t) => {
-  const { dataStream: e, customRanges: n } = t, r = e.length - 2, o = [];
-  let s = 0;
-  return n == null || n.forEach((m) => {
-    s < m.startIndex && o.push({
+}).join(""), "transformTextNode2Text"), transformDocument2TextNodes = /* @__PURE__ */ __name((doc) => {
+  const { dataStream, customRanges } = doc, end = dataStream.length - 2, textNodes = [];
+  let lastIndex = 0;
+  return customRanges == null || customRanges.forEach((range) => {
+    lastIndex < range.startIndex && textNodes.push({
       type: "text",
-      content: e.slice(s, m.startIndex)
-    }), o.push({
+      content: dataStream.slice(lastIndex, range.startIndex)
+    }), textNodes.push({
       type: "mention",
       content: {
-        label: e.slice(m.startIndex, m.endIndex).slice(1, -1),
-        id: m.rangeId
+        label: dataStream.slice(range.startIndex, range.endIndex).slice(1, -1),
+        id: range.rangeId
       }
-    }), s = m.endIndex;
-  }), o.push({
+    }), lastIndex = range.endIndex;
+  }), textNodes.push({
     type: "text",
-    content: e.slice(s, r)
-  }), o;
-}, Ae = (t) => {
-  let e = "";
-  const n = [];
-  return t.forEach((r) => {
-    switch (r.type) {
+    content: dataStream.slice(lastIndex, end)
+  }), textNodes;
+}, "transformDocument2TextNodes"), transformTextNodes2Document = /* @__PURE__ */ __name((nodes) => {
+  let str = "";
+  const customRanges = [];
+  return nodes.forEach((node) => {
+    switch (node.type) {
       case "text":
-        e += r.content;
+        str += node.content;
         break;
       case "mention": {
-        const o = e.length;
-        e += `${r.content.label}`;
-        const s = e.length;
-        n.push({
-          rangeId: r.content.id,
-          rangeType: nt.MENTION,
-          startIndex: o,
-          endIndex: s
+        const start = str.length;
+        str += `${node.content.label}`;
+        const end = str.length;
+        customRanges.push({
+          rangeId: node.content.id,
+          rangeType: CustomRangeType.MENTION,
+          startIndex: start,
+          endIndex: end
         });
         break;
       }
     }
-  }), e += `
+  }), str += `
 \r`, {
     textRuns: [],
     paragraphs: [
       {
-        startIndex: e.length - 2,
+        startIndex: str.length - 2,
         paragraphStyle: {}
       }
     ],
     sectionBreaks: [
       {
-        startIndex: e.length - 1
+        startIndex: str.length - 1
       }
     ],
-    dataStream: e,
-    customRanges: n
+    dataStream: str,
+    customRanges
   };
-}, Vt = (t) => ({
-  display: t.label,
-  id: `${t.id}`,
-  raw: t
-}), jt = (t, e, n, r, o) => {
-  var m, c;
-  const s = (m = t.raw) == null ? void 0 : m.icon;
-  return /* @__PURE__ */ a.createElement("div", { className: se.threadCommentEditorSuggestion }, s ? /* @__PURE__ */ a.createElement("img", { className: se.threadCommentEditorSuggestionIcon, src: s }) : null, /* @__PURE__ */ a.createElement("div", null, (c = t.display) != null ? c : t.id));
-}, Le = A((t, e) => {
-  var C;
-  const { comment: n, onSave: r, id: o, onCancel: s, autoFocus: m, unitId: c, subUnitId: f } = t, y = S(Ne), U = S(X), _ = S(Ce), [I, h] = k({ ...n }), [g, b] = k(!1), N = me(null), E = S(ct), w = S(ut);
-  return at(e, () => ({
-    reply(v) {
-      var d;
-      h({
-        ...n,
-        text: v,
+}, "transformTextNodes2Document"), transformMention = /* @__PURE__ */ __name((mention) => ({
+  display: mention.label,
+  id: `${mention.id}`,
+  raw: mention
+}), "transformMention"), defaultRenderSuggestion = /* @__PURE__ */ __name((mention, search, highlightedDisplay, index, focused) => {
+  var _a3, _b;
+  const icon = (_a3 = mention.raw) == null ? void 0 : _a3.icon;
+  return /* @__PURE__ */ React.createElement("div", { className: styles$2.threadCommentEditorSuggestion }, icon ? /* @__PURE__ */ React.createElement("img", { className: styles$2.threadCommentEditorSuggestionIcon, src: icon }) : null, /* @__PURE__ */ React.createElement("div", null, (_b = mention.display) != null ? _b : mention.id));
+}, "defaultRenderSuggestion"), ThreadCommentEditor = forwardRef((props, ref) => {
+  var _a3;
+  const { comment, onSave, id, onCancel, autoFocus, unitId, subUnitId } = props, mentionDataService = useDependency(IThreadCommentMentionDataService), commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), [localComment, setLocalComment] = useState({ ...comment }), [editing, setEditing] = useState(!1), inputRef = useRef(null), textSelectionRenderManager = useDependency(ITextSelectionRenderManager), textSelectionManagerService = useDependency(TextSelectionManagerService);
+  return useImperativeHandle(ref, () => ({
+    reply(text) {
+      var _a4;
+      setLocalComment({
+        ...comment,
+        text,
         attachments: []
-      }), (d = N.current) == null || d.inputElement.focus();
+      }), (_a4 = inputRef.current) == null || _a4.inputElement.focus();
     }
-  })), /* @__PURE__ */ a.createElement("div", { className: se.threadCommentEditor, onClick: (v) => v.preventDefault() }, /* @__PURE__ */ a.createElement(
-    it,
+  })), /* @__PURE__ */ React.createElement("div", { className: styles$2.threadCommentEditor, onClick: /* @__PURE__ */ __name((e) => e.preventDefault(), "onClick") }, /* @__PURE__ */ React.createElement(
+    Mentions,
     {
-      ref: N,
-      autoFocus: m,
+      ref: inputRef,
+      autoFocus,
       style: { width: "100%" },
-      placeholder: _.t("threadCommentUI.editor.placeholder"),
-      value: I != null && I.text ? Lt(ke(I.text)) : "",
-      onChange: (v) => {
-        v.target.value || h({ ...n, text: void 0 }), h == null || h({ ...n, text: Ae(At(v.target.value)) });
-      },
-      onFocus: () => {
-        const v = w.getActiveRange();
-        v && v.collapsed && E.removeAllTextRanges(), E.blur(), b(!0);
-      }
+      placeholder: localeService.t("threadCommentUI.editor.placeholder"),
+      value: localComment != null && localComment.text ? transformTextNode2Text(transformDocument2TextNodes(localComment.text)) : "",
+      onChange: /* @__PURE__ */ __name((e) => {
+        e.target.value || setLocalComment({ ...comment, text: void 0 }), setLocalComment == null || setLocalComment({ ...comment, text: transformTextNodes2Document(parseMentions(e.target.value)) });
+      }, "onChange"),
+      onFocus: /* @__PURE__ */ __name(() => {
+        const activeRange = textSelectionManagerService.getActiveTextRangeWithStyle();
+        activeRange && activeRange.collapsed && textSelectionRenderManager.removeAllRanges(), textSelectionRenderManager.blur(), setEditing(!0);
+      }, "onFocus")
     },
-    /* @__PURE__ */ a.createElement(
-      lt,
+    /* @__PURE__ */ React.createElement(
+      Mention,
       {
-        key: y.trigger,
-        trigger: y.trigger,
-        data: (v, d) => y.getMentions(v, c, f).then((i) => i.map(Vt)).then(d),
-        displayTransform: (v, d) => `@${d} `,
-        renderSuggestion: (C = y.renderSuggestion) != null ? C : jt
+        key: mentionDataService.trigger,
+        trigger: mentionDataService.trigger,
+        data: /* @__PURE__ */ __name((query, callback) => mentionDataService.getMentions(query, unitId, subUnitId).then((res) => res.map(transformMention)).then(callback), "data"),
+        displayTransform: /* @__PURE__ */ __name((id2, label) => `@${label} `, "displayTransform"),
+        renderSuggestion: (_a3 = mentionDataService.renderSuggestion) != null ? _a3 : defaultRenderSuggestion
       }
     )
-  ), g ? /* @__PURE__ */ a.createElement("div", { className: se.threadCommentEditorButtons }, /* @__PURE__ */ a.createElement(
-    ie,
+  ), editing ? /* @__PURE__ */ React.createElement("div", { className: styles$2.threadCommentEditorButtons }, /* @__PURE__ */ React.createElement(
+    Button,
     {
       style: { marginRight: 12 },
-      onClick: () => {
-        s == null || s(), b(!1), h({ text: void 0 }), U.executeCommand(j.id);
-      }
+      onClick: /* @__PURE__ */ __name(() => {
+        onCancel == null || onCancel(), setEditing(!1), setLocalComment({ text: void 0 }), commandService.executeCommand(SetActiveCommentOperation.id);
+      }, "onClick")
     },
-    _.t("threadCommentUI.editor.cancel")
-  ), /* @__PURE__ */ a.createElement(
-    ie,
+    localeService.t("threadCommentUI.editor.cancel")
+  ), /* @__PURE__ */ React.createElement(
+    Button,
     {
       type: "primary",
-      disabled: !I.text,
-      onClick: () => {
-        I.text && (r == null || r({
-          ...I,
-          text: I.text
-        }), b(!1), h({ text: void 0 }));
-      }
+      disabled: !localComment.text,
+      onClick: /* @__PURE__ */ __name(() => {
+        localComment.text && (onSave == null || onSave({
+          ...localComment,
+          text: localComment.text
+        }), setEditing(!1), setLocalComment({ text: void 0 }));
+      }, "onClick")
     },
-    _.t(o ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
+    localeService.t(id ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
   )) : null);
-}), Bt = "univer-thread-comment", Wt = "univer-thread-comment-active", Ft = "univer-thread-comment-content", zt = "univer-thread-comment-highlight", Zt = "univer-thread-comment-icon-container", Yt = "univer-thread-comment-icon", Gt = "univer-thread-comment-title", Kt = "univer-thread-comment-title-position", qt = "univer-thread-comment-title-highlight", Jt = "univer-thread-comment-title-position-text", Qt = "univer-thread-comment-username", Xt = "univer-thread-comment-item", en = "univer-thread-comment-item-head", tn = "univer-thread-comment-item-title", nn = "univer-thread-comment-item-title-position", rn = "univer-thread-comment-item-title-highlight", on = "univer-thread-comment-item-time", an = "univer-thread-comment-item-content", ln = "univer-thread-comment-item-at", u = {
-  threadComment: Bt,
-  threadCommentActive: Wt,
-  threadCommentContent: Ft,
-  threadCommentHighlight: zt,
-  threadCommentIconContainer: Zt,
-  threadCommentIcon: Yt,
-  threadCommentTitle: Gt,
-  threadCommentTitlePosition: Kt,
-  threadCommentTitleHighlight: qt,
-  threadCommentTitlePositionText: Jt,
-  threadCommentUsername: Qt,
-  threadCommentItem: Xt,
-  threadCommentItemHead: en,
-  threadCommentItemTitle: tn,
-  threadCommentItemTitlePosition: nn,
-  threadCommentItemTitleHighlight: rn,
-  threadCommentItemTime: on,
-  threadCommentItemContent: an,
-  threadCommentItemAt: ln
-}, Ve = "__mock__", sn = (t) => {
-  const { item: e, unitId: n, subUnitId: r, editing: o, onEditingChange: s, onReply: m, resolved: c, isRoot: f, onClose: y, onDeleteComment: U } = t, _ = S(X), I = S(Ce), h = S(ve), g = h.getUser(e.personId), b = V(h.currentUser$), N = (b == null ? void 0 : b.userID) === e.personId, E = e.id === Ve, [w, C] = k(!1), v = () => {
-    (U == null ? void 0 : U(e)) !== !1 && (_.executeCommand(
-      f ? ye.id : Ge.id,
+}), threadComment$1 = "univer-thread-comment", threadCommentActive = "univer-thread-comment-active", threadCommentContent = "univer-thread-comment-content", threadCommentHighlight = "univer-thread-comment-highlight", threadCommentIconContainer = "univer-thread-comment-icon-container", threadCommentIcon = "univer-thread-comment-icon", threadCommentTitle = "univer-thread-comment-title", threadCommentTitlePosition = "univer-thread-comment-title-position", threadCommentTitleHighlight = "univer-thread-comment-title-highlight", threadCommentTitlePositionText = "univer-thread-comment-title-position-text", threadCommentUsername = "univer-thread-comment-username", threadCommentItem = "univer-thread-comment-item", threadCommentItemHead = "univer-thread-comment-item-head", threadCommentItemTitle = "univer-thread-comment-item-title", threadCommentItemTitlePosition = "univer-thread-comment-item-title-position", threadCommentItemTitleHighlight = "univer-thread-comment-item-title-highlight", threadCommentItemTime = "univer-thread-comment-item-time", threadCommentItemContent = "univer-thread-comment-item-content", threadCommentItemAt = "univer-thread-comment-item-at", styles$1 = {
+  threadComment: threadComment$1,
+  threadCommentActive,
+  threadCommentContent,
+  threadCommentHighlight,
+  threadCommentIconContainer,
+  threadCommentIcon,
+  threadCommentTitle,
+  threadCommentTitlePosition,
+  threadCommentTitleHighlight,
+  threadCommentTitlePositionText,
+  threadCommentUsername,
+  threadCommentItem,
+  threadCommentItemHead,
+  threadCommentItemTitle,
+  threadCommentItemTitlePosition,
+  threadCommentItemTitleHighlight,
+  threadCommentItemTime,
+  threadCommentItemContent,
+  threadCommentItemAt
+}, MOCK_ID = "__mock__", ThreadCommentItem = /* @__PURE__ */ __name((props) => {
+  const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment } = props, commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), userManagerService = useDependency(UserManagerService), user = userManagerService.getUser(item.personId), currentUser = useObservable(userManagerService.currentUser$), isCommentBySelf = (currentUser == null ? void 0 : currentUser.userID) === item.personId, isMock = item.id === MOCK_ID, [showReply, setShowReply] = useState(!1), handleDeleteItem = /* @__PURE__ */ __name(() => {
+    (onDeleteComment == null ? void 0 : onDeleteComment(item)) !== !1 && (commandService.executeCommand(
+      isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id,
       {
-        unitId: n,
-        subUnitId: r,
-        commentId: e.id
+        unitId,
+        subUnitId,
+        commentId: item.id
       }
-    ), f && (y == null || y()));
-  };
-  return /* @__PURE__ */ a.createElement("div", { className: u.threadCommentItem, onMouseLeave: () => C(!1), onMouseEnter: () => C(!0) }, /* @__PURE__ */ a.createElement("img", { className: u.threadCommentItemHead, src: g == null ? void 0 : g.avatar }), /* @__PURE__ */ a.createElement("div", { className: u.threadCommentItemTitle }, /* @__PURE__ */ a.createElement("div", { className: u.threadCommentUsername }, (g == null ? void 0 : g.name) || " "), /* @__PURE__ */ a.createElement("div", null, E || c ? null : w ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIcon, onClick: () => m(g) }, /* @__PURE__ */ a.createElement(we, null)) : null, N && !E && !c ? /* @__PURE__ */ a.createElement(
-    st,
+    ), isRoot && (onClose == null || onClose()));
+  }, "handleDeleteItem");
+  return /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItem, onMouseLeave: /* @__PURE__ */ __name(() => setShowReply(!1), "onMouseLeave"), onMouseEnter: /* @__PURE__ */ __name(() => setShowReply(!0), "onMouseEnter") }, /* @__PURE__ */ React.createElement("img", { className: styles$1.threadCommentItemHead, src: user == null ? void 0 : user.avatar }), /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItemTitle }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentUsername }, (user == null ? void 0 : user.name) || " "), /* @__PURE__ */ React.createElement("div", null, isMock || resolved ? null : showReply ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIcon, onClick: /* @__PURE__ */ __name(() => onReply(user), "onClick") }, /* @__PURE__ */ React.createElement(ReplyToCommentSingle, null)) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ React.createElement(
+    Dropdown,
     {
-      overlay: /* @__PURE__ */ a.createElement(mt, null, /* @__PURE__ */ a.createElement(pe, { key: "edit", onClick: () => s == null ? void 0 : s(!0) }, I.t("threadCommentUI.item.edit")), /* @__PURE__ */ a.createElement(pe, { key: "delete", onClick: v }, I.t("threadCommentUI.item.delete")))
+      overlay: /* @__PURE__ */ React.createElement(Menu, null, /* @__PURE__ */ React.createElement(MenuItem, { key: "edit", onClick: /* @__PURE__ */ __name(() => onEditingChange == null ? void 0 : onEditingChange(!0), "onClick") }, localeService.t("threadCommentUI.item.edit")), /* @__PURE__ */ React.createElement(MenuItem, { key: "delete", onClick: handleDeleteItem }, localeService.t("threadCommentUI.item.delete")))
     },
-    /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIcon }, /* @__PURE__ */ a.createElement(He, null))
-  ) : null)), /* @__PURE__ */ a.createElement("div", { className: u.threadCommentItemTime }, e.dT), o ? /* @__PURE__ */ a.createElement(
-    Le,
+    /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIcon }, /* @__PURE__ */ React.createElement(MoreHorizontalSingle, null))
+  ) : null)), /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItemTime }, item.dT), editing ? /* @__PURE__ */ React.createElement(
+    ThreadCommentEditor,
     {
-      id: e.id,
-      comment: e,
-      onCancel: () => s == null ? void 0 : s(!1),
+      id: item.id,
+      comment: item,
+      onCancel: /* @__PURE__ */ __name(() => onEditingChange == null ? void 0 : onEditingChange(!1), "onCancel"),
       autoFocus: !0,
-      unitId: n,
-      subUnitId: r,
-      onSave: ({ text: d, attachments: i }) => {
-        s == null || s(!1), _.executeCommand(
-          Ze.id,
+      unitId,
+      subUnitId,
+      onSave: /* @__PURE__ */ __name(({ text, attachments }) => {
+        onEditingChange == null || onEditingChange(!1), commandService.executeCommand(
+          UpdateCommentCommand.id,
           {
-            unitId: n,
-            subUnitId: r,
+            unitId,
+            subUnitId,
             payload: {
-              commentId: e.id,
-              text: d,
-              attachments: i
+              commentId: item.id,
+              text,
+              attachments
             }
           }
         );
-      }
+      }, "onSave")
     }
-  ) : /* @__PURE__ */ a.createElement("div", { className: u.threadCommentItemContent }, ke(e.text).map((d, i) => {
-    switch (d.type) {
+  ) : /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItemContent }, transformDocument2TextNodes(item.text).map((item2, i) => {
+    switch (item2.type) {
       case "mention":
-        return /* @__PURE__ */ a.createElement("a", { className: u.threadCommentItemAt, key: i }, "@", d.content.label, " ");
+        return /* @__PURE__ */ React.createElement("a", { className: styles$1.threadCommentItemAt, key: i }, "@", item2.content.label, " ");
       default:
-        return d.content;
+        return item2.content;
     }
   })));
-}, mn = (t) => {
-  var K, F, ne;
+}, "ThreadCommentItem"), ThreadCommentTree = /* @__PURE__ */ __name((props) => {
+  var _a3, _b, _c;
   const {
-    id: e,
-    unitId: n,
-    subUnitId: r,
-    refStr: o,
-    showEdit: s = !0,
-    onClick: m,
-    showHighlight: c,
-    onClose: f,
-    getSubUnitName: y,
-    prefix: U,
-    autoFocus: _,
-    onMouseEnter: I,
-    onMouseLeave: h,
-    onAddComment: g,
-    onDeleteComment: b,
-    onResolve: N
-  } = t, E = S(Ee), [w, C] = k(!1), [v, d] = k("");
-  V(E.commentMap$);
-  const i = e ? E.getCommentWithChildren(n, r, e) : null, R = S(X), de = S(ve), p = i == null ? void 0 : i.root.resolved, M = V(de.currentUser$), Z = me(null), ee = [
-    ...i ? [i.root] : (
+    id,
+    unitId,
+    subUnitId,
+    refStr,
+    showEdit = !0,
+    onClick,
+    showHighlight,
+    onClose,
+    getSubUnitName,
+    prefix,
+    autoFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onAddComment,
+    onDeleteComment,
+    onResolve
+  } = props, threadCommentModel = useDependency(ThreadCommentModel), [isHover, setIsHover] = useState(!1), [editingId, setEditingId] = useState("");
+  useObservable(threadCommentModel.commentMap$);
+  const comments = id ? threadCommentModel.getCommentWithChildren(unitId, subUnitId, id) : null, commandService = useDependency(ICommandService), userManagerService = useDependency(UserManagerService), resolved = comments == null ? void 0 : comments.root.resolved, currentUser = useObservable(userManagerService.currentUser$), editorRef = useRef(null), renderComments = [
+    ...comments ? [comments.root] : (
       // mock empty comment
       [{
-        id: Ve,
+        id: MOCK_ID,
         text: {
           dataStream: `
 \r`
         },
-        personId: (K = M == null ? void 0 : M.userID) != null ? K : "",
-        ref: o != null ? o : "",
+        personId: (_a3 = currentUser == null ? void 0 : currentUser.userID) != null ? _a3 : "",
+        ref: refStr != null ? refStr : "",
         dT: "",
-        unitId: n,
-        subUnitId: r,
+        unitId,
+        subUnitId,
         threadId: ""
       }]
     ),
-    ...(F = i == null ? void 0 : i.children) != null ? F : []
-  ], Y = (x) => {
-    x.stopPropagation(), p ? R.executeCommand(j.id, {
-      unitId: n,
-      subUnitId: r,
-      commentId: e
-    }) : R.executeCommand(j.id), R.executeCommand(Ye.id, {
-      unitId: n,
-      subUnitId: r,
-      commentId: e,
-      resolved: !p
-    }), N == null || N(!p);
-  }, te = (x) => {
-    x.stopPropagation(), R.executeCommand(j.id), !(i != null && i.root && (b == null ? void 0 : b(i.root)) === !1) && (R.executeCommand(
-      ye.id,
+    ...(_b = comments == null ? void 0 : comments.children) != null ? _b : []
+  ], handleResolve = /* @__PURE__ */ __name((e) => {
+    e.stopPropagation(), resolved ? commandService.executeCommand(SetActiveCommentOperation.id, {
+      unitId,
+      subUnitId,
+      commentId: id
+    }) : commandService.executeCommand(SetActiveCommentOperation.id), commandService.executeCommand(ResolveCommentCommand.id, {
+      unitId,
+      subUnitId,
+      commentId: id,
+      resolved: !resolved
+    }), onResolve == null || onResolve(!resolved);
+  }, "handleResolve"), handleDeleteRoot = /* @__PURE__ */ __name((e) => {
+    e.stopPropagation(), commandService.executeCommand(SetActiveCommentOperation.id), !(comments != null && comments.root && (onDeleteComment == null ? void 0 : onDeleteComment(comments.root)) === !1) && (commandService.executeCommand(
+      DeleteCommentTreeCommand.id,
       {
-        unitId: n,
-        subUnitId: r,
-        commentId: e
+        unitId,
+        subUnitId,
+        commentId: id
       }
-    ), f == null || f());
-  };
-  ue(() => h == null ? void 0 : h(), []);
-  const P = y((ne = i == null ? void 0 : i.root.subUnitId) != null ? ne : r), G = s && !v && !p, D = `${o || (i == null ? void 0 : i.root.ref) || ""}${P ? " · " : ""}${P}`;
-  return /* @__PURE__ */ a.createElement(
+    ), onClose == null || onClose());
+  }, "handleDeleteRoot");
+  useEffect(() => onMouseLeave == null ? void 0 : onMouseLeave(), []);
+  const subUnitName = getSubUnitName((_c = comments == null ? void 0 : comments.root.subUnitId) != null ? _c : subUnitId), editorVisible = showEdit && !editingId && !resolved, title = `${refStr || (comments == null ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: dt(u.threadComment, {
-        [u.threadCommentActive]: !p && (c || w || U === "cell")
+      className: cs(styles$1.threadComment, {
+        [styles$1.threadCommentActive]: !resolved && (showHighlight || isHover || prefix === "cell")
       }),
-      onClick: m,
-      id: `${U}-${n}-${r}-${e}`,
-      onMouseEnter: () => {
-        I == null || I(), C(!0);
-      },
-      onMouseLeave: () => {
-        h == null || h(), C(!1);
-      }
+      onClick,
+      id: `${prefix}-${unitId}-${subUnitId}-${id}`,
+      onMouseEnter: /* @__PURE__ */ __name(() => {
+        onMouseEnter == null || onMouseEnter(), setIsHover(!0);
+      }, "onMouseEnter"),
+      onMouseLeave: /* @__PURE__ */ __name(() => {
+        onMouseLeave == null || onMouseLeave(), setIsHover(!1);
+      }, "onMouseLeave")
     },
-    !p && c ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentHighlight }) : null,
-    /* @__PURE__ */ a.createElement("div", { className: u.threadCommentTitle }, /* @__PURE__ */ a.createElement("div", { className: u.threadCommentTitlePosition }, /* @__PURE__ */ a.createElement("div", { className: u.threadCommentTitleHighlight }), /* @__PURE__ */ a.createElement("div", { className: u.threadCommentTitlePositionText }, D)), i ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIconContainer }, /* @__PURE__ */ a.createElement(
+    !resolved && showHighlight ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentHighlight }) : null,
+    /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitle }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitlePosition }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitleHighlight }), /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitlePositionText }, title)), comments ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIconContainer }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        onClick: Y,
-        className: u.threadCommentIcon,
-        style: { color: p ? "rgb(var(--green-500))" : "" }
+        onClick: handleResolve,
+        className: styles$1.threadCommentIcon,
+        style: { color: resolved ? "rgb(var(--green-500))" : "" }
       },
-      p ? /* @__PURE__ */ a.createElement(Re, null) : /* @__PURE__ */ a.createElement(De, null)
-    ), (M == null ? void 0 : M.userID) === i.root.personId ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIcon, onClick: te }, /* @__PURE__ */ a.createElement($e, null)) : null) : null),
-    /* @__PURE__ */ a.createElement("div", { className: u.threadCommentContent }, ee.map(
-      (x) => /* @__PURE__ */ a.createElement(
-        sn,
+      resolved ? /* @__PURE__ */ React.createElement(ResolvedSingle, null) : /* @__PURE__ */ React.createElement(SolveSingle, null)
+    ), (currentUser == null ? void 0 : currentUser.userID) === comments.root.personId ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIcon, onClick: handleDeleteRoot }, /* @__PURE__ */ React.createElement(DeleteSingle, null)) : null) : null),
+    /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentContent }, renderComments.map(
+      (item) => /* @__PURE__ */ React.createElement(
+        ThreadCommentItem,
         {
-          onClose: f,
-          unitId: n,
-          subUnitId: r,
-          item: x,
-          key: x.id,
-          isRoot: x.id === (i == null ? void 0 : i.root.id),
-          editing: v === x.id,
-          resolved: i == null ? void 0 : i.root.resolved,
-          onEditingChange: ($) => {
-            d($ ? x.id : "");
-          },
-          onReply: ($) => {
-            $ && requestAnimationFrame(() => {
-              var L;
-              (L = Z.current) == null || L.reply(Ae([{
+          onClose,
+          unitId,
+          subUnitId,
+          item,
+          key: item.id,
+          isRoot: item.id === (comments == null ? void 0 : comments.root.id),
+          editing: editingId === item.id,
+          resolved: comments == null ? void 0 : comments.root.resolved,
+          onEditingChange: /* @__PURE__ */ __name((editing) => {
+            setEditingId(editing ? item.id : "");
+          }, "onEditingChange"),
+          onReply: /* @__PURE__ */ __name((user) => {
+            user && requestAnimationFrame(() => {
+              var _a4;
+              (_a4 = editorRef.current) == null || _a4.reply(transformTextNodes2Document([{
                 type: "mention",
                 content: {
-                  id: $.userID,
-                  label: $.name
+                  id: user.userID,
+                  label: user.name
                 }
               }]));
             });
-          },
-          onAddComment: g,
-          onDeleteComment: b
+          }, "onReply"),
+          onAddComment,
+          onDeleteComment
         }
       )
     )),
-    G ? /* @__PURE__ */ a.createElement("div", null, /* @__PURE__ */ a.createElement(
-      Le,
+    editorVisible ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      ThreadCommentEditor,
       {
-        key: `${_}`,
-        ref: Z,
-        unitId: n,
-        subUnitId: r,
-        onSave: ({ text: x, attachments: $ }) => {
-          const L = {
-            text: x,
-            attachments: $,
-            dT: ht(),
-            id: rt.generateRandomId(),
-            ref: o,
-            personId: M == null ? void 0 : M.userID,
-            parentId: i == null ? void 0 : i.root.id,
-            unitId: n,
-            subUnitId: r,
-            threadId: i == null ? void 0 : i.root.threadId
+        key: `${autoFocus}`,
+        ref: editorRef,
+        unitId,
+        subUnitId,
+        onSave: /* @__PURE__ */ __name(({ text, attachments }) => {
+          const comment = {
+            text,
+            attachments,
+            dT: getDT(),
+            id: Tools.generateRandomId(),
+            ref: refStr,
+            personId: currentUser == null ? void 0 : currentUser.userID,
+            parentId: comments == null ? void 0 : comments.root.id,
+            unitId,
+            subUnitId,
+            threadId: comments == null ? void 0 : comments.root.threadId
           };
-          (g == null ? void 0 : g(L)) !== !1 && R.executeCommand(
-            ze.id,
+          (onAddComment == null ? void 0 : onAddComment(comment)) !== !1 && commandService.executeCommand(
+            AddCommentCommand.id,
             {
-              unitId: n,
-              subUnitId: r,
-              comment: L
+              unitId,
+              subUnitId,
+              comment
             }
           );
-        },
-        autoFocus: _ || !i,
-        onCancel: () => {
-          i || f == null || f();
-        }
+        }, "onSave"),
+        autoFocus: autoFocus || !comments,
+        onCancel: /* @__PURE__ */ __name(() => {
+          comments || onClose == null || onClose();
+        }, "onCancel")
       }
     )) : null
   );
-}, dn = "univer-thread-comment-panel", cn = "univer-thread-comment", un = "univer-thread-comment-panel-forms", hn = "univer-select", Cn = "univer-thread-comment-panel-empty", vn = "univer-thread-comment-panel-add", fn = "univer-thread-comment-panel-solved", Q = {
-  threadCommentPanel: dn,
-  threadComment: cn,
-  threadCommentPanelForms: un,
-  select: hn,
-  threadCommentPanelEmpty: Cn,
-  threadCommentPanelAdd: vn,
-  threadCommentPanelSolved: fn
-}, Mn = (t) => {
+}, "ThreadCommentTree"), threadCommentPanel = "univer-thread-comment-panel", threadComment = "univer-thread-comment", threadCommentPanelForms = "univer-thread-comment-panel-forms", select = "univer-select", threadCommentPanelEmpty = "univer-thread-comment-panel-empty", threadCommentPanelAdd = "univer-thread-comment-panel-add", threadCommentPanelSolved = "univer-thread-comment-panel-solved", styles = {
+  threadCommentPanel,
+  threadComment,
+  threadCommentPanelForms,
+  select,
+  threadCommentPanelEmpty,
+  threadCommentPanelAdd,
+  threadCommentPanelSolved
+}, ThreadCommentPanel = /* @__PURE__ */ __name((props) => {
   const {
-    unitId: e,
-    subUnitId$: n,
-    type: r,
-    onAdd: o,
-    getSubUnitName: s,
-    onResolve: m,
-    sortComments: c,
-    onItemLeave: f,
-    onItemEnter: y,
-    disableAdd: U,
-    tempComment: _,
-    onAddComment: I,
-    onDeleteComment: h,
-    showComments: g
-  } = t, [b, N] = k("all"), [E, w] = k("all"), C = S(Ce), v = S(ve), d = S(Ee), [i, R] = k(() => d.getUnit(e)), de = S(z), p = V(de.activeCommentId$), M = V(d.commentUpdate$), Z = S(X), ee = V(n), Y = me(!0), te = "panel", P = V(v.currentUser$), G = ce(() => {
-    var oe, J;
-    const l = (b === "all" ? i.map((O) => O[1]).flat() : (J = (oe = i.find((O) => O[0] === ee)) == null ? void 0 : oe[1]) != null ? J : []).filter((O) => !O.parentId), q = c != null ? c : (O) => O, re = l;
-    if (g) {
-      const O = /* @__PURE__ */ new Map();
-      return re.forEach((ae) => {
-        O.set(ae.id, ae);
-      }), [...g, ""].map((ae) => O.get(ae)).filter(Boolean);
+    unitId,
+    subUnitId$,
+    type,
+    onAdd,
+    getSubUnitName,
+    onResolve,
+    sortComments,
+    onItemLeave,
+    onItemEnter,
+    disableAdd,
+    tempComment,
+    onAddComment,
+    onDeleteComment,
+    showComments
+  } = props, [unit, setUnit] = useState("all"), [status, setStatus] = useState("all"), localeService = useDependency(LocaleService), userService = useDependency(UserManagerService), threadCommentModel = useDependency(ThreadCommentModel), [unitComments, setUnitComments] = useState(() => threadCommentModel.getUnit(unitId)), panelService = useDependency(ThreadCommentPanelService), activeCommentId = useObservable(panelService.activeCommentId$), update = useObservable(threadCommentModel.commentUpdate$), commandService = useDependency(ICommandService), subUnitId = useObservable(subUnitId$), shouldScroll = useRef(!0), prefix = "panel", currentUser = useObservable(userService.currentUser$), comments = useMemo(() => {
+    var _a3, _b;
+    const allComments = (unit === "all" ? unitComments.map((i) => i[1]).flat() : (_b = (_a3 = unitComments.find((i) => i[0] === subUnitId)) == null ? void 0 : _a3[1]) != null ? _b : []).filter((i) => !i.parentId), sort = sortComments != null ? sortComments : (a) => a, res = allComments;
+    if (showComments) {
+      const map = /* @__PURE__ */ new Map();
+      return res.forEach((comment) => {
+        map.set(comment.id, comment);
+      }), [...showComments, ""].map((id) => map.get(id)).filter(Boolean);
     } else
-      return q(re);
-  }, [g, b, i, c, ee]), D = ce(() => [
-    ...G.filter((l) => !l.resolved),
-    ...G.filter((l) => l.resolved)
-  ], [G]), K = ce(() => E === "resolved" ? D.filter((l) => l.resolved) : E === "unsolved" ? D.filter((l) => !l.resolved) : E === "concern_me" && P != null && P.userID ? D.map((l) => d.getCommentWithChildren(l.unitId, l.subUnitId, l.id)).map((l) => l != null && l.relativeUsers.has(P.userID) ? l.root : null).filter(Boolean) : D, [D, P == null ? void 0 : P.userID, E, d]), F = _ ? [_, ...K] : K, ne = F.filter((l) => !l.resolved), x = F.filter((l) => l.resolved), $ = E !== "all" || b !== "all", L = () => {
-    w("all"), N("all");
-  };
-  ue(() => {
-    e && R(
-      d.getUnit(e)
+      return sort(res);
+  }, [showComments, unit, unitComments, sortComments, subUnitId]), commentsSorted = useMemo(() => [
+    ...comments.filter((comment) => !comment.resolved),
+    ...comments.filter((comment) => comment.resolved)
+  ], [comments]), statuedComments = useMemo(() => status === "resolved" ? commentsSorted.filter((comment) => comment.resolved) : status === "unsolved" ? commentsSorted.filter((comment) => !comment.resolved) : status === "concern_me" && currentUser != null && currentUser.userID ? commentsSorted.map((comment) => threadCommentModel.getCommentWithChildren(comment.unitId, comment.subUnitId, comment.id)).map((comment) => comment != null && comment.relativeUsers.has(currentUser.userID) ? comment.root : null).filter(Boolean) : commentsSorted, [commentsSorted, currentUser == null ? void 0 : currentUser.userID, status, threadCommentModel]), renderComments = tempComment ? [tempComment, ...statuedComments] : statuedComments, unSolvedComments = renderComments.filter((comment) => !comment.resolved), solvedComments = renderComments.filter((comment) => comment.resolved), isFiltering = status !== "all" || unit !== "all", onReset = /* @__PURE__ */ __name(() => {
+    setStatus("all"), setUnit("all");
+  }, "onReset");
+  useEffect(() => {
+    unitId && setUnitComments(
+      threadCommentModel.getUnit(unitId)
     );
-  }, [e, d, M]), ue(() => {
-    var J;
-    if (!p)
+  }, [unitId, threadCommentModel, update]), useEffect(() => {
+    var _a3;
+    if (!activeCommentId)
       return;
-    if (!Y.current) {
-      Y.current = !0;
+    if (!shouldScroll.current) {
+      shouldScroll.current = !0;
       return;
     }
-    const { unitId: l, subUnitId: q, commentId: re } = p, oe = `${te}-${l}-${q}-${re}`;
-    (J = document.getElementById(oe)) == null || J.scrollIntoView({ block: "center" });
-  }, [p]);
-  const fe = (l) => /* @__PURE__ */ a.createElement(
-    mn,
+    const { unitId: unitId2, subUnitId: subUnitId2, commentId } = activeCommentId, id = `${prefix}-${unitId2}-${subUnitId2}-${commentId}`;
+    (_a3 = document.getElementById(id)) == null || _a3.scrollIntoView({ block: "center" });
+  }, [activeCommentId]);
+  const renderComment = /* @__PURE__ */ __name((comment) => /* @__PURE__ */ React.createElement(
+    ThreadCommentTree,
     {
-      prefix: te,
-      getSubUnitName: s,
-      key: l.id,
-      id: l.id,
-      unitId: l.unitId,
-      subUnitId: l.subUnitId,
-      refStr: l.ref,
-      type: r,
-      showEdit: (p == null ? void 0 : p.commentId) === l.id,
-      showHighlight: (p == null ? void 0 : p.commentId) === l.id,
-      onClick: () => {
-        Y.current = !1, l.resolved ? Z.executeCommand(j.id) : Z.executeCommand(
-          j.id,
+      prefix,
+      getSubUnitName,
+      key: comment.id,
+      id: comment.id,
+      unitId: comment.unitId,
+      subUnitId: comment.subUnitId,
+      refStr: comment.ref,
+      type,
+      showEdit: (activeCommentId == null ? void 0 : activeCommentId.commentId) === comment.id,
+      showHighlight: (activeCommentId == null ? void 0 : activeCommentId.commentId) === comment.id,
+      onClick: /* @__PURE__ */ __name(() => {
+        shouldScroll.current = !1, comment.resolved ? commandService.executeCommand(SetActiveCommentOperation.id) : commandService.executeCommand(
+          SetActiveCommentOperation.id,
           {
-            unitId: l.unitId,
-            subUnitId: l.subUnitId,
-            commentId: l.id,
+            unitId: comment.unitId,
+            subUnitId: comment.subUnitId,
+            commentId: comment.id,
             temp: !1
           }
         );
-      },
-      onMouseEnter: () => y == null ? void 0 : y(l),
-      onMouseLeave: () => f == null ? void 0 : f(l),
-      onAddComment: I,
-      onDeleteComment: h,
-      onResolve: (q) => m == null ? void 0 : m(l.id, q)
+      }, "onClick"),
+      onMouseEnter: /* @__PURE__ */ __name(() => onItemEnter == null ? void 0 : onItemEnter(comment), "onMouseEnter"),
+      onMouseLeave: /* @__PURE__ */ __name(() => onItemLeave == null ? void 0 : onItemLeave(comment), "onMouseLeave"),
+      onAddComment,
+      onDeleteComment,
+      onResolve: /* @__PURE__ */ __name((resolved) => onResolve == null ? void 0 : onResolve(comment.id, resolved), "onResolve")
     }
-  );
-  return /* @__PURE__ */ a.createElement("div", { className: Q.threadCommentPanel }, /* @__PURE__ */ a.createElement("div", { className: Q.threadCommentPanelForms }, r === he.UNIVER_SHEET ? /* @__PURE__ */ a.createElement(
-    Ie,
+  ), "renderComment");
+  return /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanel }, /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanelForms }, type === UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ React.createElement(
+    Select,
     {
       borderless: !0,
-      value: b,
-      onChange: (l) => N(l),
+      value: unit,
+      onChange: /* @__PURE__ */ __name((e) => setUnit(e), "onChange"),
       options: [
         {
           value: "current",
-          label: C.t("threadCommentUI.filter.sheet.current")
+          label: localeService.t("threadCommentUI.filter.sheet.current")
         },
         {
           value: "all",
-          label: C.t("threadCommentUI.filter.sheet.all")
+          label: localeService.t("threadCommentUI.filter.sheet.all")
         }
       ]
     }
-  ) : null, /* @__PURE__ */ a.createElement(
-    Ie,
+  ) : null, /* @__PURE__ */ React.createElement(
+    Select,
     {
       borderless: !0,
-      value: E,
-      onChange: (l) => w(l),
+      value: status,
+      onChange: /* @__PURE__ */ __name((e) => setStatus(e), "onChange"),
       options: [
         {
           value: "all",
-          label: C.t("threadCommentUI.filter.status.all")
+          label: localeService.t("threadCommentUI.filter.status.all")
         },
         {
           value: "resolved",
-          label: C.t("threadCommentUI.filter.status.resolved")
+          label: localeService.t("threadCommentUI.filter.status.resolved")
         },
         {
           value: "unsolved",
-          label: C.t("threadCommentUI.filter.status.unsolved")
+          label: localeService.t("threadCommentUI.filter.status.unsolved")
         },
         {
           value: "concern_me",
-          label: C.t("threadCommentUI.filter.status.concernMe")
+          label: localeService.t("threadCommentUI.filter.status.concernMe")
         }
       ]
     }
-  )), ne.map(fe), x.length ? /* @__PURE__ */ a.createElement("div", { className: Q.threadCommentPanelSolved }, "已解决") : null, x.map(fe), F.length ? null : /* @__PURE__ */ a.createElement("div", { className: Q.threadCommentPanelEmpty }, $ ? C.t("threadCommentUI.panel.filterEmpty") : C.t("threadCommentUI.panel.empty"), $ ? /* @__PURE__ */ a.createElement(
-    ie,
+  )), unSolvedComments.map(renderComment), solvedComments.length ? /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanelSolved }, "已解决") : null, solvedComments.map(renderComment), renderComments.length ? null : /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanelEmpty }, isFiltering ? localeService.t("threadCommentUI.panel.filterEmpty") : localeService.t("threadCommentUI.panel.empty"), isFiltering ? /* @__PURE__ */ React.createElement(
+    Button,
     {
-      onClick: L,
+      onClick: onReset,
       type: "link"
     },
-    C.t("threadCommentUI.panel.reset")
-  ) : /* @__PURE__ */ a.createElement(
-    ie,
+    localeService.t("threadCommentUI.panel.reset")
+  ) : /* @__PURE__ */ React.createElement(
+    Button,
     {
       id: "thread-comment-add",
-      className: Q.threadCommentPanelAdd,
+      className: styles.threadCommentPanelAdd,
       type: "primary",
-      onClick: o,
-      disabled: U
+      onClick: onAdd,
+      disabled: disableAdd
     },
-    /* @__PURE__ */ a.createElement(Oe, null),
-    C.t("threadCommentUI.panel.addComment")
+    /* @__PURE__ */ React.createElement(IncreaseSingle, null),
+    localeService.t("threadCommentUI.panel.addComment")
   )));
-};
+}, "ThreadCommentPanel");
 export {
-  Ne as IThreadCommentMentionDataService,
-  j as SetActiveCommentOperation,
-  Ct as THREAD_COMMENT_PANEL,
-  Mn as ThreadCommentPanel,
-  z as ThreadCommentPanelService,
-  mn as ThreadCommentTree,
-  It as ToggleSheetCommentPanelOperation,
-  le as UniverThreadCommentUIPlugin,
-  ht as getDT
+  IThreadCommentMentionDataService,
+  SetActiveCommentOperation,
+  THREAD_COMMENT_PANEL,
+  ThreadCommentPanel,
+  ThreadCommentPanelService,
+  ThreadCommentTree,
+  ToggleSheetCommentPanelOperation,
+  UniverThreadCommentUIPlugin,
+  getDT
 };