@univerjs/thread-comment-ui 0.1.17 → 0.2.0

package/lib/es/index.js

@@ -1,31 +1,36 @@
-var Pe = Object.defineProperty;
-var $e = (t, e, n) => e in t ? Pe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var P = (t, e, n) => $e(t, typeof e != "symbol" ? e + "" : e, n);
-import { UniverThreadCommentPlugin as He, ThreadCommentModel as de, AddCommentCommand as we, UpdateCommentCommand as De, ResolveCommentCommand as Re, DeleteCommentTreeCommand as ce, DeleteCommentCommand as Le } from "@univerjs/thread-comment";
-import { Disposable as ue, UniverInstanceType as he, IUniverInstanceService as ke, CommandType as Ce, OnLifecycle as je, LifecycleStages as Ae, LocaleService as J, Plugin as Ve, mergeOverrideWithDependencies as Be, DependentOn as We, ICommandService as Q, CustomRangeType as Fe, UserManagerService as ee, Tools as ze } from "@univerjs/core";
-import { Inject as te, createIdentifier as Ze, Injector as Ye } from "@wendellhu/redi";
-import { ISidebarService as ve, useObservable as j } from "@univerjs/ui";
-import { BehaviorSubject as re, filter as Ge } from "rxjs";
-import o, { forwardRef as H, useRef as X, createElement as L, useState as $, useImperativeHandle as Ke, useMemo as ae, useEffect as oe } from "react";
-import { useDependency as E } from "@wendellhu/redi/react-bindings";
-import { Mentions as qe, Mention as Je, Button as G, Dropdown as Qe, Menu as Xe, MenuItem as ie, Select as le } from "@univerjs/design";
-import et from "dayjs";
-import tt from "clsx";
-const nt = "thread-comment-panel", rt = "THREAD_COMMENT_UI_PLUGIN";
-var at = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, it = (t, e, n, r) => {
-  for (var a = r > 1 ? void 0 : r ? ot(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (r ? s(e, n, a) : s(a)) || a);
-  return r && a && at(e, n, a), a;
-}, se = (t, e) => (n, r) => e(n, r, t);
-let A = class extends ue {
+var je = Object.defineProperty;
+var Ve = (t, e, n) => e in t ? je(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var w = (t, e, n) => Ve(t, typeof e != "symbol" ? e + "" : e, n);
+import Be from "dayjs";
+import { UniverThreadCommentPlugin as Fe, ThreadCommentModel as Se, AddCommentCommand as We, UpdateCommentCommand as ze, ResolveCommentCommand as Ze, DeleteCommentTreeCommand as Ee, DeleteCommentCommand as Ye } from "@univerjs/thread-comment";
+import { Disposable as ye, UniverInstanceType as he, IUniverInstanceService as Ge, CommandType as xe, OnLifecycle as Ke, LifecycleStages as qe, LocaleService as se, Plugin as Je, mergeOverrideWithDependencies as Qe, DependentOn as Xe, ICommandService as J, CustomRangeType as et, UserManagerService as Ce, Tools as tt } from "@univerjs/core";
+import { Inject as ve, createIdentifier as nt, Injector as rt } from "@wendellhu/redi";
+import { ISidebarService as _e, useObservable as L } from "@univerjs/ui";
+import { BehaviorSubject as fe, filter as ot } from "rxjs";
+import a, { forwardRef as A, useRef as me, createElement as V, useState as k, useImperativeHandle as at, useEffect as ue, useMemo as ce } from "react";
+import { useDependency as S } from "@wendellhu/redi/react-bindings";
+import { Mentions as it, Mention as lt, Button as ae, Dropdown as st, Menu as mt, MenuItem as ge, Select as pe } 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 Be().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, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (o = (r ? m(e, n, o) : m(o)) || o);
+  return r && o && ft(e, n, o), o;
+}, Ie = (t, e) => (n, r) => e(n, r, t);
+let F = class extends ye {
   constructor(e, n) {
     super();
-    P(this, "_panelVisible", !1);
-    P(this, "_panelVisible$", new re(!1));
-    P(this, "_activeCommentId");
-    P(this, "_activeCommentId$", new re(void 0));
-    P(this, "panelVisible$", this._panelVisible$.asObservable());
-    P(this, "activeCommentId$", this._activeCommentId$.asObservable());
+    w(this, "_panelVisible", !1);
+    w(this, "_panelVisible$", new fe(!1));
+    w(this, "_activeCommentId");
+    w(this, "_activeCommentId$", new fe(void 0));
+    w(this, "panelVisible$", this._panelVisible$.asObservable());
+    w(this, "activeCommentId$", this._activeCommentId$.asObservable());
     this._sidebarService = e, this._univerInstanceService = n, this._init();
   }
   _init() {
@@ -34,7 +39,7 @@ let A = class extends ue {
         e.visible || this.setPanelVisible(!1);
       })
     ), this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(he.UNIVER_SHEET).pipe(Ge((e) => !e)).subscribe(() => {
+      this._univerInstanceService.getCurrentTypeOfUnit$(he.UNIVER_SHEET).pipe(ot((e) => !e)).subscribe(() => {
         this._sidebarService.close();
       })
     );
@@ -52,224 +57,226 @@ let A = class extends ue {
     this._activeCommentId = e, this._activeCommentId$.next(e);
   }
 };
-A = it([
-  se(0, te(ve)),
-  se(1, ke)
-], A);
-const lt = {
+F = pt([
+  Ie(0, ve(_e)),
+  Ie(1, Ge)
+], F);
+const It = {
   id: "thread-comment-ui.operation.toggle-panel",
-  type: Ce.OPERATION,
+  type: xe.OPERATION,
   handler(t) {
-    const e = t.get(ve), n = t.get(A);
+    const e = t.get(_e), n = t.get(F);
     return n.panelVisible ? (e.close(), n.setPanelVisible(!1)) : (e.open({
       header: { title: "threadCommentUI.panel.title" },
-      children: { label: nt },
+      children: { label: Ct },
       width: 320
     }), n.setPanelVisible(!0)), !0;
   }
-}, fe = {
+}, j = {
   id: "thread-comment-ui.operation.set-active-comment",
-  type: Ce.OPERATION,
+  type: xe.OPERATION,
   handler(t, e) {
-    return t.get(A).setActiveComment(e), !0;
+    return t.get(F).setActiveComment(e), !0;
   }
 };
-var st = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, dt = (t, e, n, r) => {
-  for (var a = r > 1 ? void 0 : r ? mt(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (r ? s(e, n, a) : s(a)) || a);
-  return r && a && st(e, n, a), a;
-}, ct = (t, e) => (n, r) => e(n, r, t);
-let Y = class extends ue {
+var bt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Et = (t, e, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? St(e, n) : e, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (o = (r ? m(e, n, o) : m(o)) || o);
+  return r && o && bt(e, n, o), o;
+}, yt = (t, e) => (n, r) => e(n, r, t);
+let oe = class extends ye {
   constructor(t) {
     super(), this._localeService = t;
   }
 };
-Y = dt([
-  je(Ae.Starting, Y),
-  ct(0, te(J))
-], Y);
-class ut {
+oe = Et([
+  Ke(qe.Starting, oe),
+  yt(0, ve(se))
+], oe);
+class xt {
   constructor() {
-    P(this, "trigger", "@");
+    w(this, "dataSource");
+    w(this, "renderSuggestion");
+    w(this, "trigger", "@");
   }
-  async getMentions(e) {
-    return [];
+  async getMentions(e, n, r) {
+    return this.dataSource ? this.dataSource.getMentions(e, n, r) : [];
   }
 }
-const ge = Ze("thread-comment.mention-data.service");
-var pe = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, Ct = (t, e, n) => e in t ? pe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, vt = (t, e, n, r) => {
-  for (var a = r > 1 ? void 0 : r ? ht(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (r ? s(e, n, a) : s(a)) || a);
-  return r && a && pe(e, n, a), a;
-}, me = (t, e) => (n, r) => e(n, r, t), Ie = (t, e, n) => Ct(t, typeof e != "symbol" ? e + "" : e, n);
-let K = class extends Ve {
+const Te = nt("thread-comment.mention-data.service");
+var Ne = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, Tt = (t, e, n) => e in t ? Ne(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, Nt = (t, e, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? _t(e, n) : e, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (o = (r ? m(e, n, o) : m(o)) || o);
+  return r && o && Ne(e, n, o), o;
+}, be = (t, e) => (n, r) => e(n, r, t), Me = (t, e, n) => Tt(t, typeof e != "symbol" ? e + "" : e, n);
+let ie = class extends Je {
   constructor(t, e, n) {
     super(), this._config = t, this._injector = e, this._commandService = n;
   }
   onStarting(t) {
     var e;
-    Be([
-      [Y],
-      [A],
-      [ge, { useClass: ut }]
+    Qe([
+      [oe],
+      [F],
+      [Te, { useClass: xt }]
     ], (e = this._config) == null ? void 0 : e.overrides).forEach((n) => {
       t.add(n);
-    }), [lt, fe].forEach((n) => {
+    }), [It, j].forEach((n) => {
       this._commandService.registerCommand(n);
     });
   }
 };
-Ie(K, "pluginName", rt);
-Ie(K, "type", he.UNIVER_UNKNOWN);
-K = vt([
-  We(He),
-  me(1, te(Ye)),
-  me(2, Q)
-], K);
-var _ = function() {
-  return _ = Object.assign || function(t) {
+Me(ie, "pluginName", vt);
+Me(ie, "type", he.UNIVER_UNKNOWN);
+ie = Nt([
+  Xe(Fe),
+  be(1, ve(rt)),
+  be(2, J)
+], ie);
+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 a in e) Object.prototype.hasOwnProperty.call(e, a) && (t[a] = e[a]);
+      for (var o in e) Object.prototype.hasOwnProperty.call(e, o) && (t[o] = e[o]);
     }
     return t;
-  }, _.apply(this, arguments);
-}, ft = function(t, e) {
+  }, T.apply(this, arguments);
+}, Mt = 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 a = 0, r = Object.getOwnPropertySymbols(t); a < r.length; a++)
-      e.indexOf(r[a]) < 0 && Object.prototype.propertyIsEnumerable.call(t, r[a]) && (n[r[a]] = t[r[a]]);
+    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;
-}, k = H(function(t, e) {
-  var n = t.icon, r = t.id, a = t.className, i = t.extend, s = ft(t, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(r, " ").concat(a || "").trim(), d = X("_".concat(It()));
-  return be(n, "".concat(r), { defIds: n.defIds, idSuffix: d.current }, _({ ref: e, className: c }, s), i);
+}, B = A(function(t, e) {
+  var n = t.icon, r = t.id, o = t.className, l = t.extend, m = Mt(t, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(r, " ").concat(o || "").trim(), f = me("_".concat(Ot()));
+  return Ue(n, "".concat(r), { defIds: n.defIds, idSuffix: f.current }, T({ ref: e, className: c }, m), l);
 });
-function be(t, e, n, r, a) {
-  return L(t.tag, _(_({ key: e }, gt(t, n, a)), r), (pt(t, n).children || []).map(function(i, s) {
-    return be(i, "".concat(e, "-").concat(t.tag, "-").concat(s), n, void 0, a);
+function Ue(t, e, n, r, o) {
+  return V(t.tag, T(T({ key: e }, Ut(t, n, o)), r), (Pt(t, n).children || []).map(function(l, m) {
+    return Ue(l, "".concat(e, "-").concat(t.tag, "-").concat(m), n, void 0, o);
   }));
 }
-function gt(t, e, n) {
-  var r = _({}, t.attrs);
+function Ut(t, e, n) {
+  var r = T({}, t.attrs);
   n != null && n.colorChannel1 && r.fill === "colorChannel1" && (r.fill = n.colorChannel1);
-  var a = e.defIds;
-  return !a || a.length === 0 || (t.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + e.idSuffix), Object.entries(r).forEach(function(i) {
-    var s = i[0], c = i[1];
-    typeof c == "string" && (r[s] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  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(l) {
+    var m = l[0], c = l[1];
+    typeof c == "string" && (r[m] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
   })), r;
 }
-function pt(t, e) {
+function Pt(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), { children: t.children.map(function(a) {
-    return typeof a.attrs.id == "string" && r && r.indexOf(a.attrs.id) > -1 ? _(_({}, a), { attrs: _(_({}, a.attrs), { id: a.attrs.id + e.idSuffix }) }) : a;
+  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;
 }
-function It() {
+function Ot() {
   return Math.random().toString(36).substring(2, 8);
 }
-k.displayName = "UniverIcon";
-var bt = { 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" } }] }, Ee = H(function(t, e) {
-  return L(k, Object.assign({}, t, {
+B.displayName = "UniverIcon";
+var $t = { 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" } }] }, Pe = A(function(t, e) {
+  return V(B, Object.assign({}, t, {
     id: "delete-single",
     ref: e,
-    icon: bt
+    icon: $t
   }));
 });
-Ee.displayName = "DeleteSingle";
-var Et = { 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" } }] }, ye = H(function(t, e) {
-  return L(k, Object.assign({}, t, {
+Pe.displayName = "DeleteSingle";
+var wt = { 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 V(B, Object.assign({}, t, {
     id: "increase-single",
     ref: e,
-    icon: Et
+    icon: wt
   }));
 });
-ye.displayName = "IncreaseSingle";
-var yt = { 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" } }] }, Se = H(function(t, e) {
-  return L(k, Object.assign({}, t, {
+Oe.displayName = "IncreaseSingle";
+var Ht = { 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" } }] }, $e = A(function(t, e) {
+  return V(B, Object.assign({}, t, {
     id: "more-horizontal-single",
     ref: e,
-    icon: yt
+    icon: Ht
   }));
 });
-Se.displayName = "MoreHorizontalSingle";
-var St = { 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 } }] }, _e = H(function(t, e) {
-  return L(k, Object.assign({}, t, {
+$e.displayName = "MoreHorizontalSingle";
+var Rt = { 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 V(B, Object.assign({}, t, {
     id: "reply-to-comment-single",
     ref: e,
-    icon: St
+    icon: Rt
   }));
 });
-_e.displayName = "ReplyToCommentSingle";
-var _t = { 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" } }] }, xe = H(function(t, e) {
-  return L(k, Object.assign({}, t, {
+we.displayName = "ReplyToCommentSingle";
+var Dt = { 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" } }] }, He = A(function(t, e) {
+  return V(B, Object.assign({}, t, {
     id: "resolved-single",
     ref: e,
-    icon: _t
+    icon: Dt
   }));
 });
-xe.displayName = "ResolvedSingle";
-var xt = { 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 } }] }, Ne = H(function(t, e) {
-  return L(k, Object.assign({}, t, {
+He.displayName = "ResolvedSingle";
+var kt = { 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 } }] }, Re = A(function(t, e) {
+  return V(B, Object.assign({}, t, {
     id: "solve-single",
     ref: e,
-    icon: xt
+    icon: kt
   }));
 });
-Ne.displayName = "SolveSingle";
-const Nt = "univer-thread-comment-editor-buttons", Tt = "univer-thread-comment-editor-suggestion", Mt = "univer-thread-comment-editor-suggestionActive", Ut = "univer-thread-comment-editor-suggestion-icon", q = {
-  threadCommentEditorButtons: Nt,
-  threadCommentEditorSuggestion: Tt,
-  threadCommentEditorSuggestionActive: Mt,
-  threadCommentEditorSuggestionIcon: Ut
-}, Ot = (t) => {
+Re.displayName = "SolveSingle";
+const At = "univer-thread-comment-editor-buttons", Lt = "univer-thread-comment-editor-suggestion", jt = "univer-thread-comment-editor-suggestionActive", Vt = "univer-thread-comment-editor-suggestion-icon", le = {
+  threadCommentEditorButtons: At,
+  threadCommentEditorSuggestion: Lt,
+  threadCommentEditorSuggestionActive: jt,
+  threadCommentEditorSuggestionIcon: Vt
+}, Bt = (t) => {
   const e = /@\[(.*?)\]\((.*?)\)|(\w+)/g;
   let n, r = 0;
-  const a = [];
+  const o = [];
   for (; (n = e.exec(t)) !== null; )
-    n.index > r && a.push({
+    n.index > r && o.push({
       type: "text",
       content: t.substring(r, n.index)
-    }), n[1] && n[2] ? a.push({
+    }), n[1] && n[2] ? o.push({
       type: "mention",
       content: {
         label: n[1],
         id: n[2]
       }
-    }) : n[3] && a.push({
+    }) : n[3] && o.push({
       type: "text",
       content: n[3]
     }), r = e.lastIndex;
-  return r < t.length && a.push({
+  return r < t.length && o.push({
     type: "text",
     content: t.substring(r)
-  }), a;
-}, Pt = (t) => t.map((e) => {
+  }), o;
+}, Ft = (t) => t.map((e) => {
   switch (e.type) {
     case "mention":
       return `@[${e.content.label}](${e.content.id})`;
     default:
       return e.content;
   }
-}).join(""), Te = (t) => {
-  const { dataStream: e, customRanges: n } = t, r = e.length - 2, a = [];
-  let i = 0;
-  return n == null || n.forEach((s) => {
-    i < s.startIndex && a.push({
+}).join(""), De = (t) => {
+  const { dataStream: e, customRanges: n } = t, r = e.length - 2, o = [];
+  let l = 0;
+  return n == null || n.forEach((m) => {
+    l < m.startIndex && o.push({
       type: "text",
-      content: e.slice(i, s.startIndex)
-    }), a.push({
+      content: e.slice(l, m.startIndex)
+    }), o.push({
       type: "mention",
       content: {
-        label: e.slice(s.startIndex, s.endIndex).slice(1, -1),
-        id: s.rangeId
+        label: e.slice(m.startIndex, m.endIndex).slice(1, -1),
+        id: m.rangeId
       }
-    }), i = s.endIndex;
-  }), a.push({
+    }), l = m.endIndex;
+  }), o.push({
     type: "text",
-    content: e.slice(i, r)
-  }), a;
-}, Me = (t) => {
+    content: e.slice(l, r)
+  }), o;
+}, ke = (t) => {
   let e = "";
   const n = [];
   return t.forEach((r) => {
@@ -278,14 +285,14 @@ const Nt = "univer-thread-comment-editor-buttons", Tt = "univer-thread-comment-e
         e += r.content;
         break;
       case "mention": {
-        const a = e.length;
+        const o = e.length;
         e += `${r.content.label}`;
-        const i = e.length;
+        const l = e.length;
         n.push({
           rangeId: r.content.id,
-          rangeType: Fe.MENTION,
-          startIndex: a,
-          endIndex: i
+          rangeType: et.MENTION,
+          startIndex: o,
+          endIndex: l
         });
         break;
       }
@@ -307,401 +314,452 @@ const Nt = "univer-thread-comment-editor-buttons", Tt = "univer-thread-comment-e
     dataStream: e,
     customRanges: n
   };
-}, $t = (t) => ({
+}, Wt = (t) => ({
   display: t.label,
   id: `${t.id}`,
   raw: t
-}), Ht = (t, e, n, r, a) => {
-  var s, c;
-  const i = (s = t.raw) == null ? void 0 : s.icon;
-  return /* @__PURE__ */ o.createElement("div", { className: q.threadCommentEditorSuggestion }, i ? /* @__PURE__ */ o.createElement("img", { className: q.threadCommentEditorSuggestionIcon, src: i }) : null, /* @__PURE__ */ o.createElement("div", null, (c = t.display) != null ? c : t.id));
-}, Ue = H((t, e) => {
-  var u;
-  const { comment: n, onSave: r, id: a, onCancel: i, autoFocus: s } = t, c = E(ge), d = E(J), [f, g] = $({ ...n }), [x, p] = $(!1), I = X(null);
-  return Ke(e, () => ({
-    reply(b) {
-      var h;
-      g({
+}), zt = (t, e, n, r, o) => {
+  var m, c;
+  const l = (m = t.raw) == null ? void 0 : m.icon;
+  return /* @__PURE__ */ a.createElement("div", { className: le.threadCommentEditorSuggestion }, l ? /* @__PURE__ */ a.createElement("img", { className: le.threadCommentEditorSuggestionIcon, src: l }) : null, /* @__PURE__ */ a.createElement("div", null, (c = t.display) != null ? c : t.id));
+}, Ae = A((t, e) => {
+  var C;
+  const { comment: n, onSave: r, id: o, onCancel: l, autoFocus: m, unitId: c, subUnitId: f } = t, y = S(Te), P = S(J), _ = S(se), [I, h] = k({ ...n }), [g, b] = k(!1), N = me(null), E = S(ct), H = S(ut);
+  return at(e, () => ({
+    reply(v) {
+      var d;
+      h({
         ...n,
-        text: b,
+        text: v,
         attachments: []
-      }), (h = I.current) == null || h.inputElement.focus();
+      }), (d = N.current) == null || d.inputElement.focus();
     }
-  })), /* @__PURE__ */ o.createElement("div", { className: q.threadCommentEditor, onClick: (b) => b.preventDefault() }, /* @__PURE__ */ o.createElement(
-    qe,
+  })), /* @__PURE__ */ a.createElement("div", { className: le.threadCommentEditor, onClick: (v) => v.preventDefault() }, /* @__PURE__ */ a.createElement(
+    it,
     {
-      ref: I,
-      autoFocus: s,
+      ref: N,
+      autoFocus: m,
       style: { width: "100%" },
-      placeholder: d.t("threadCommentUI.editor.placeholder"),
-      value: f != null && f.text ? Pt(Te(f.text)) : "",
-      onChange: (b) => {
-        b.target.value || g({ ...n, text: void 0 }), g == null || g({ ...n, text: Me(Ot(b.target.value)) });
+      placeholder: _.t("threadCommentUI.editor.placeholder"),
+      value: I != null && I.text ? Ft(De(I.text)) : "",
+      onChange: (v) => {
+        v.target.value || h({ ...n, text: void 0 }), h == null || h({ ...n, text: ke(Bt(v.target.value)) });
       },
       onFocus: () => {
-        p(!0);
+        const v = H.getActiveRange();
+        v && v.collapsed && E.removeAllTextRanges(), E.blur(), b(!0);
       }
     },
-    /* @__PURE__ */ o.createElement(
-      Je,
+    /* @__PURE__ */ a.createElement(
+      lt,
       {
-        key: c.trigger,
-        trigger: c.trigger,
-        data: (b, h) => c.getMentions(b).then((N) => N.map($t)).then(h),
-        displayTransform: (b, h) => `@${h} `,
-        renderSuggestion: (u = c.renderSuggestion) != null ? u : Ht
+        key: y.trigger,
+        trigger: y.trigger,
+        data: (v, d) => y.getMentions(v, c, f).then((s) => s.map(Wt)).then(d),
+        displayTransform: (v, d) => `@${d} `,
+        renderSuggestion: (C = y.renderSuggestion) != null ? C : zt
       }
     )
-  ), x ? /* @__PURE__ */ o.createElement("div", { className: q.threadCommentEditorButtons }, /* @__PURE__ */ o.createElement(
-    G,
+  ), g ? /* @__PURE__ */ a.createElement("div", { className: le.threadCommentEditorButtons }, /* @__PURE__ */ a.createElement(
+    ae,
     {
       style: { marginRight: 12 },
       onClick: () => {
-        i == null || i(), p(!1), g({ text: void 0 });
+        l == null || l(), b(!1), h({ text: void 0 }), P.executeCommand(j.id);
       }
     },
-    d.t("threadCommentUI.editor.cancel")
-  ), /* @__PURE__ */ o.createElement(
-    G,
+    _.t("threadCommentUI.editor.cancel")
+  ), /* @__PURE__ */ a.createElement(
+    ae,
     {
       type: "primary",
-      disabled: !f.text,
+      disabled: !I.text,
       onClick: () => {
-        f.text && (r == null || r({
-          ...f,
-          text: f.text
-        }), p(!1), g({ text: void 0 }));
+        I.text && (r == null || r({
+          ...I,
+          text: I.text
+        }), b(!1), h({ text: void 0 }));
       }
     },
-    d.t(a ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
+    _.t(o ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
   )) : null);
-}), wt = "univer-thread-comment", Dt = "univer-thread-comment-active", Rt = "univer-thread-comment-content", Lt = "univer-thread-comment-highlight", kt = "univer-thread-comment-icon-container", jt = "univer-thread-comment-icon", At = "univer-thread-comment-title", Vt = "univer-thread-comment-title-position", Bt = "univer-thread-comment-title-highlight", Wt = "univer-thread-comment-username", Ft = "univer-thread-comment-item", zt = "univer-thread-comment-item-head", Zt = "univer-thread-comment-item-title", Yt = "univer-thread-comment-item-title-position", Gt = "univer-thread-comment-item-title-highlight", Kt = "univer-thread-comment-item-time", qt = "univer-thread-comment-item-content", Jt = "univer-thread-comment-item-at", v = {
-  threadComment: wt,
-  threadCommentActive: Dt,
-  threadCommentContent: Rt,
-  threadCommentHighlight: Lt,
-  threadCommentIconContainer: kt,
-  threadCommentIcon: jt,
-  threadCommentTitle: At,
-  threadCommentTitlePosition: Vt,
-  threadCommentTitleHighlight: Bt,
-  threadCommentUsername: Wt,
-  threadCommentItem: Ft,
-  threadCommentItemHead: zt,
-  threadCommentItemTitle: Zt,
-  threadCommentItemTitlePosition: Yt,
-  threadCommentItemTitleHighlight: Gt,
-  threadCommentItemTime: Kt,
-  threadCommentItemContent: qt,
-  threadCommentItemAt: Jt
-}, Oe = "__mock__", Qt = (t) => {
-  const { item: e, unitId: n, subUnitId: r, editing: a, onEditingChange: i, onReply: s, resolved: c, isRoot: d, onClose: f } = t, g = E(Q), x = E(J), p = E(ee), I = p.getUser(e.personId), u = j(p.currentUser$), b = (u == null ? void 0 : u.userID) === e.personId, h = e.id === Oe, [N, w] = $(!1), m = () => {
-    g.executeCommand(
-      d ? ce.id : Le.id,
+}), Zt = "univer-thread-comment", Yt = "univer-thread-comment-active", Gt = "univer-thread-comment-content", Kt = "univer-thread-comment-highlight", qt = "univer-thread-comment-icon-container", Jt = "univer-thread-comment-icon", Qt = "univer-thread-comment-title", Xt = "univer-thread-comment-title-position", en = "univer-thread-comment-title-highlight", tn = "univer-thread-comment-title-position-text", nn = "univer-thread-comment-username", rn = "univer-thread-comment-item", on = "univer-thread-comment-item-head", an = "univer-thread-comment-item-title", ln = "univer-thread-comment-item-title-position", sn = "univer-thread-comment-item-title-highlight", mn = "univer-thread-comment-item-time", dn = "univer-thread-comment-item-content", cn = "univer-thread-comment-item-at", u = {
+  threadComment: Zt,
+  threadCommentActive: Yt,
+  threadCommentContent: Gt,
+  threadCommentHighlight: Kt,
+  threadCommentIconContainer: qt,
+  threadCommentIcon: Jt,
+  threadCommentTitle: Qt,
+  threadCommentTitlePosition: Xt,
+  threadCommentTitleHighlight: en,
+  threadCommentTitlePositionText: tn,
+  threadCommentUsername: nn,
+  threadCommentItem: rn,
+  threadCommentItemHead: on,
+  threadCommentItemTitle: an,
+  threadCommentItemTitlePosition: ln,
+  threadCommentItemTitleHighlight: sn,
+  threadCommentItemTime: mn,
+  threadCommentItemContent: dn,
+  threadCommentItemAt: cn
+}, Le = "__mock__", un = (t) => {
+  const { item: e, unitId: n, subUnitId: r, editing: o, onEditingChange: l, onReply: m, resolved: c, isRoot: f, onClose: y, onDeleteComment: P } = t, _ = S(J), I = S(se), h = S(Ce), g = h.getUser(e.personId), b = L(h.currentUser$), N = (b == null ? void 0 : b.userID) === e.personId, E = e.id === Le, [H, C] = k(!1), v = () => {
+    (P == null ? void 0 : P(e)) !== !1 && (_.executeCommand(
+      f ? Ee.id : Ye.id,
       {
         unitId: n,
         subUnitId: r,
         commentId: e.id
       }
-    ), d && (f == null || f());
+    ), f && (y == null || y()));
   };
-  return /* @__PURE__ */ o.createElement("div", { className: v.threadCommentItem, onMouseLeave: () => w(!1), onMouseEnter: () => w(!0) }, /* @__PURE__ */ o.createElement("img", { className: v.threadCommentItemHead, src: I == null ? void 0 : I.avatar }), /* @__PURE__ */ o.createElement("div", { className: v.threadCommentItemTitle }, /* @__PURE__ */ o.createElement("div", { className: v.threadCommentUsername }, (I == null ? void 0 : I.name) || " "), /* @__PURE__ */ o.createElement("div", null, h || c ? null : N ? /* @__PURE__ */ o.createElement("div", { className: v.threadCommentIcon, onClick: () => s(I) }, /* @__PURE__ */ o.createElement(_e, null)) : null, b && !h && !c ? /* @__PURE__ */ o.createElement(
-    Qe,
+  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 : H ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIcon, onClick: () => m(g) }, /* @__PURE__ */ a.createElement(we, null)) : null, N && !E && !c ? /* @__PURE__ */ a.createElement(
+    st,
     {
-      overlay: /* @__PURE__ */ o.createElement(Xe, null, /* @__PURE__ */ o.createElement(ie, { key: "edit", onClick: () => i == null ? void 0 : i(!0) }, x.t("threadCommentUI.item.edit")), /* @__PURE__ */ o.createElement(ie, { key: "delete", onClick: m }, x.t("threadCommentUI.item.delete")))
+      overlay: /* @__PURE__ */ a.createElement(mt, null, /* @__PURE__ */ a.createElement(ge, { key: "edit", onClick: () => l == null ? void 0 : l(!0) }, I.t("threadCommentUI.item.edit")), /* @__PURE__ */ a.createElement(ge, { key: "delete", onClick: v }, I.t("threadCommentUI.item.delete")))
     },
-    /* @__PURE__ */ o.createElement("div", { className: v.threadCommentIcon }, /* @__PURE__ */ o.createElement(Se, null))
-  ) : null)), /* @__PURE__ */ o.createElement("div", { className: v.threadCommentItemTime }, e.dT), a ? /* @__PURE__ */ o.createElement(
-    Ue,
+    /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIcon }, /* @__PURE__ */ a.createElement($e, null))
+  ) : null)), /* @__PURE__ */ a.createElement("div", { className: u.threadCommentItemTime }, e.dT), o ? /* @__PURE__ */ a.createElement(
+    Ae,
     {
       id: e.id,
       comment: e,
-      onCancel: () => i == null ? void 0 : i(!1),
+      onCancel: () => l == null ? void 0 : l(!1),
       autoFocus: !0,
-      onSave: ({ text: C, attachments: D }) => {
-        i == null || i(!1), g.executeCommand(
-          De.id,
+      unitId: n,
+      subUnitId: r,
+      onSave: ({ text: d, attachments: s }) => {
+        l == null || l(!1), _.executeCommand(
+          ze.id,
           {
             unitId: n,
             subUnitId: r,
             payload: {
               commentId: e.id,
-              text: C,
-              attachments: D
+              text: d,
+              attachments: s
             }
           }
         );
       }
     }
-  ) : /* @__PURE__ */ o.createElement("div", { className: v.threadCommentItemContent }, Te(e.text).map((C, D) => {
-    switch (C.type) {
+  ) : /* @__PURE__ */ a.createElement("div", { className: u.threadCommentItemContent }, De(e.text).map((d, s) => {
+    switch (d.type) {
       case "mention":
-        return /* @__PURE__ */ o.createElement("a", { className: v.threadCommentItemAt, key: D }, "@", C.content.label, " ");
+        return /* @__PURE__ */ a.createElement("a", { className: u.threadCommentItemAt, key: s }, "@", d.content.label, " ");
       default:
-        return C.content;
+        return d.content;
     }
   })));
-}, Xt = (t) => {
-  var R, B, z;
+}, hn = (t) => {
+  var Y, G, K;
   const {
     id: e,
     unitId: n,
     subUnitId: r,
-    refStr: a,
-    showEdit: i = !0,
-    onClick: s,
+    refStr: o,
+    showEdit: l = !0,
+    onClick: m,
     showHighlight: c,
-    onClose: d,
-    getSubUnitName: f,
-    prefix: g,
-    autoFocus: x,
-    onMouseEnter: p,
-    onMouseLeave: I
-  } = t, u = E(de), [b, h] = $(!1), [N, w] = $("");
-  j(u.commentMap$);
-  const m = e ? u.getCommentWithChildren(n, r, e) : null, C = E(Q), D = E(ee), U = m == null ? void 0 : m.root.resolved, y = j(D.currentUser$), T = X(null), V = [
-    ...m ? [m.root] : (
+    onClose: f,
+    getSubUnitName: y,
+    prefix: P,
+    autoFocus: _,
+    onMouseEnter: I,
+    onMouseLeave: h,
+    onAddComment: g,
+    onDeleteComment: b,
+    onResolve: N
+  } = t, E = S(Se), [H, C] = k(!1), [v, d] = k("");
+  L(E.commentMap$);
+  const s = e ? E.getCommentWithChildren(n, r, e) : null, R = S(J), de = S(Ce), p = s == null ? void 0 : s.root.resolved, M = L(de.currentUser$), W = me(null), Q = [
+    ...s ? [s.root] : (
       // mock empty comment
       [{
-        id: Oe,
+        id: Le,
         text: {
           dataStream: `
 \r`
         },
-        personId: (R = y == null ? void 0 : y.userID) != null ? R : "",
-        ref: a != null ? a : "",
+        personId: (Y = M == null ? void 0 : M.userID) != null ? Y : "",
+        ref: o != null ? o : "",
         dT: "",
         unitId: n,
-        subUnitId: r
+        subUnitId: r,
+        threadId: ""
       }]
     ),
-    ...(B = m == null ? void 0 : m.children) != null ? B : []
-  ], F = () => {
-    C.executeCommand(Re.id, {
+    ...(G = s == null ? void 0 : s.children) != null ? G : []
+  ], z = (x) => {
+    x.stopPropagation(), p ? R.executeCommand(j.id, {
+      unitId: n,
+      subUnitId: r,
+      commentId: e
+    }) : R.executeCommand(j.id), R.executeCommand(Ze.id, {
       unitId: n,
       subUnitId: r,
       commentId: e,
-      resolved: !U
-    }), d == null || d();
-  }, O = () => {
-    C.executeCommand(
-      ce.id,
+      resolved: !p
+    }), N == null || N(!p);
+  }, X = (x) => {
+    x.stopPropagation(), R.executeCommand(j.id), !(s != null && s.root && (b == null ? void 0 : b(s.root)) === !1) && (R.executeCommand(
+      Ee.id,
       {
         unitId: n,
         subUnitId: r,
         commentId: e
       }
-    ), d == null || d();
+    ), f == null || f());
   };
-  return /* @__PURE__ */ o.createElement(
+  ue(() => h == null ? void 0 : h(), []);
+  const O = y((K = s == null ? void 0 : s.root.subUnitId) != null ? K : r), Z = l && !v && !p, D = `${o || (s == null ? void 0 : s.root.ref)}${O ? " · " : ""}${O}`;
+  return /* @__PURE__ */ a.createElement(
     "div",
     {
-      className: tt(v.threadComment, {
-        [v.threadCommentActive]: !U && (c || b || g === "cell")
+      className: dt(u.threadComment, {
+        [u.threadCommentActive]: !p && (c || H || P === "cell")
       }),
-      onClick: s,
-      id: `${g}-${n}-${r}-${e}`,
+      onClick: m,
+      id: `${P}-${n}-${r}-${e}`,
       onMouseEnter: () => {
-        p == null || p(), h(!0);
+        I == null || I(), C(!0);
       },
       onMouseLeave: () => {
-        I == null || I(), h(!1);
+        h == null || h(), C(!1);
       }
     },
-    !U && c ? /* @__PURE__ */ o.createElement("div", { className: v.threadCommentHighlight }) : null,
-    /* @__PURE__ */ o.createElement("div", { className: v.threadCommentTitle }, /* @__PURE__ */ o.createElement("div", { className: v.threadCommentTitlePosition }, /* @__PURE__ */ o.createElement("div", { className: v.threadCommentTitleHighlight }), a || (m == null ? void 0 : m.root.ref), " · ", f((z = m == null ? void 0 : m.root.subUnitId) != null ? z : r)), m ? /* @__PURE__ */ o.createElement("div", { className: v.threadCommentIconContainer }, /* @__PURE__ */ o.createElement(
+    !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)), s ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIconContainer }, /* @__PURE__ */ a.createElement(
       "div",
       {
-        onClick: F,
-        className: v.threadCommentIcon,
-        style: { color: U ? "rgb(var(--green-500))" : "" }
+        onClick: z,
+        className: u.threadCommentIcon,
+        style: { color: p ? "rgb(var(--green-500))" : "" }
       },
-      U ? /* @__PURE__ */ o.createElement(xe, null) : /* @__PURE__ */ o.createElement(Ne, null)
-    ), (y == null ? void 0 : y.userID) === m.root.personId ? /* @__PURE__ */ o.createElement("div", { className: v.threadCommentIcon, onClick: O }, /* @__PURE__ */ o.createElement(Ee, null)) : null) : null),
-    /* @__PURE__ */ o.createElement("div", { className: v.threadCommentContent }, V.map(
-      (l) => /* @__PURE__ */ o.createElement(
-        Qt,
+      p ? /* @__PURE__ */ a.createElement(He, null) : /* @__PURE__ */ a.createElement(Re, null)
+    ), (M == null ? void 0 : M.userID) === s.root.personId ? /* @__PURE__ */ a.createElement("div", { className: u.threadCommentIcon, onClick: X }, /* @__PURE__ */ a.createElement(Pe, null)) : null) : null),
+    /* @__PURE__ */ a.createElement("div", { className: u.threadCommentContent }, Q.map(
+      (x) => /* @__PURE__ */ a.createElement(
+        un,
         {
-          onClose: d,
+          onClose: f,
           unitId: n,
           subUnitId: r,
-          item: l,
-          key: l.id,
-          isRoot: l.id === (m == null ? void 0 : m.root.id),
-          editing: N === l.id,
-          resolved: m == null ? void 0 : m.root.resolved,
-          onEditingChange: (S) => {
-            w(S ? l.id : "");
+          item: x,
+          key: x.id,
+          isRoot: x.id === (s == null ? void 0 : s.root.id),
+          editing: v === x.id,
+          resolved: s == null ? void 0 : s.root.resolved,
+          onEditingChange: (i) => {
+            d(i ? x.id : "");
           },
-          onReply: (S) => {
-            var M;
-            S && ((M = T.current) == null || M.reply(Me([{
-              type: "mention",
-              content: {
-                id: S.userID,
-                label: S.name
-              }
-            }])));
-          }
+          onReply: (i) => {
+            i && requestAnimationFrame(() => {
+              var U;
+              (U = W.current) == null || U.reply(ke([{
+                type: "mention",
+                content: {
+                  id: i.userID,
+                  label: i.name
+                }
+              }]));
+            });
+          },
+          onAddComment: g,
+          onDeleteComment: b
         }
       )
     )),
-    i && !N && !U ? /* @__PURE__ */ o.createElement("div", null, /* @__PURE__ */ o.createElement(
-      Ue,
+    Z ? /* @__PURE__ */ a.createElement("div", null, /* @__PURE__ */ a.createElement(
+      Ae,
       {
-        key: `${x}`,
-        ref: T,
-        onSave: ({ text: l, attachments: S }) => {
-          C.executeCommand(
-            we.id,
+        key: `${_}`,
+        ref: W,
+        unitId: n,
+        subUnitId: r,
+        onSave: ({ text: x, attachments: i }) => {
+          const U = {
+            text: x,
+            attachments: i,
+            dT: ht(),
+            id: tt.generateRandomId(),
+            ref: o,
+            personId: M == null ? void 0 : M.userID,
+            parentId: s == null ? void 0 : s.root.id,
+            unitId: n,
+            subUnitId: r,
+            threadId: s == null ? void 0 : s.root.threadId
+          };
+          (g == null ? void 0 : g(U)) !== !1 && R.executeCommand(
+            We.id,
             {
               unitId: n,
               subUnitId: r,
-              comment: {
-                text: l,
-                attachments: S,
-                dT: et().format("YYYY/MM/DD HH:mm"),
-                id: ze.generateRandomId(),
-                ref: a,
-                personId: y == null ? void 0 : y.userID,
-                parentId: m == null ? void 0 : m.root.id,
-                unitId: n,
-                subUnitId: r
-              }
+              comment: U
             }
           );
         },
-        autoFocus: x || !m,
+        autoFocus: _ || !s,
         onCancel: () => {
-          m || d == null || d();
+          s || f == null || f();
         }
       }
     )) : null
   );
-}, en = "univer-thread-comment-panel", tn = "univer-thread-comment", nn = "univer-thread-comment-panel-forms", rn = "univer-select", an = "univer-thread-comment-panel-empty", on = "univer-thread-comment-panel-add", Z = {
-  threadCommentPanel: en,
-  threadComment: tn,
-  threadCommentPanelForms: nn,
-  select: rn,
-  threadCommentPanelEmpty: an,
-  threadCommentPanelAdd: on
-}, pn = (t) => {
-  const { unitId: e, subUnitId$: n, type: r, onAdd: a, getSubUnitName: i, onResolve: s, sortComments: c, onItemLeave: d, onItemEnter: f } = t, [g, x] = $("all"), [p, I] = $("all"), u = E(J), b = E(ee), h = E(de), [N, w] = $(() => h.getUnit(e)), m = E(A), C = j(m.activeCommentId$), D = j(h.commentUpdate$), U = E(Q), y = j(n), T = b.getCurrentUser(), V = X(!0), F = "panel", O = ae(() => {
-    var l, S;
-    if (g === "all") {
-      const M = N.map((W) => W[1]).flat().filter((W) => !W.parentId);
-      return c ? c(M) : M;
+}, Cn = "univer-thread-comment-panel", vn = "univer-thread-comment", fn = "univer-thread-comment-panel-forms", gn = "univer-select", pn = "univer-thread-comment-panel-empty", In = "univer-thread-comment-panel-add", re = {
+  threadCommentPanel: Cn,
+  threadComment: vn,
+  threadCommentPanelForms: fn,
+  select: gn,
+  threadCommentPanelEmpty: pn,
+  threadCommentPanelAdd: In
+}, wn = (t) => {
+  const {
+    unitId: e,
+    subUnitId$: n,
+    type: r,
+    onAdd: o,
+    getSubUnitName: l,
+    onResolve: m,
+    sortComments: c,
+    onItemLeave: f,
+    onItemEnter: y,
+    disableAdd: P,
+    tempComment: _,
+    onAddComment: I,
+    onDeleteComment: h,
+    showComments: g
+  } = t, [b, N] = k("all"), [E, H] = k("all"), C = S(se), v = S(Ce), d = S(Se), [s, R] = k(() => d.getUnit(e)), de = S(F), p = L(de.activeCommentId$), M = L(d.commentUpdate$), W = S(J), Q = L(n), z = me(!0), X = "panel", O = L(v.currentUser$), Z = ce(() => {
+    var te, q;
+    const i = (b === "all" ? s.map(($) => $[1]).flat() : (q = (te = s.find(($) => $[0] === Q)) == null ? void 0 : te[1]) != null ? q : []).filter(($) => !$.parentId), U = c != null ? c : ($) => $, ee = i;
+    if (g) {
+      const $ = /* @__PURE__ */ new Map();
+      return ee.forEach((ne) => {
+        $.set(ne.id, ne);
+      }), [...g, ""].map((ne) => $.get(ne)).filter(Boolean);
     } else
-      return (S = (l = N.find((M) => M[0] === y)) == null ? void 0 : l[1]) != null ? S : [];
-  }, [g, N, y, c]), R = ae(() => p === "resolved" ? O.filter((l) => l.resolved) : p === "unsolved" ? O.filter((l) => !l.resolved) : p === "concern_me" && T != null && T.userID ? O.map((l) => h.getCommentWithChildren(l.unitId, l.subUnitId, l.id)).map((l) => l != null && l.relativeUsers.has(T.userID) ? l.root : null).filter(Boolean) : O, [O, T == null ? void 0 : T.userID, p, h]), B = p !== "all" || g !== "all", z = () => {
-    I("all"), x("all");
+      return U(ee);
+  }, [g, b, s, c, Q]), D = ce(() => [
+    ...Z.filter((i) => !i.resolved),
+    ...Z.filter((i) => i.resolved)
+  ], [Z]), Y = ce(() => E === "resolved" ? D.filter((i) => i.resolved) : E === "unsolved" ? D.filter((i) => !i.resolved) : E === "concern_me" && O != null && O.userID ? D.map((i) => d.getCommentWithChildren(i.unitId, i.subUnitId, i.id)).map((i) => i != null && i.relativeUsers.has(O.userID) ? i.root : null).filter(Boolean) : D, [D, O == null ? void 0 : O.userID, E, d]), G = _ ? [_, ...Y] : Y, K = E !== "all" || b !== "all", x = () => {
+    H("all"), N("all");
   };
-  return oe(() => {
-    e && w(
-      h.getUnit(e)
+  return ue(() => {
+    e && R(
+      d.getUnit(e)
     );
-  }, [e, h, D]), oe(() => {
-    var ne;
-    if (!C)
+  }, [e, d, M]), ue(() => {
+    var q;
+    if (!p)
       return;
-    if (!V.current) {
-      V.current = !0;
+    if (!z.current) {
+      z.current = !0;
       return;
     }
-    const { unitId: l, subUnitId: S, commentId: M } = C, W = `${F}-${l}-${S}-${M}`;
-    (ne = document.getElementById(W)) == null || ne.scrollIntoView({ block: "center" });
-  }, [C]), /* @__PURE__ */ o.createElement("div", { className: Z.threadCommentPanel }, /* @__PURE__ */ o.createElement("div", { className: Z.threadCommentPanelForms }, /* @__PURE__ */ o.createElement(
-    le,
+    const { unitId: i, subUnitId: U, commentId: ee } = p, te = `${X}-${i}-${U}-${ee}`;
+    (q = document.getElementById(te)) == null || q.scrollIntoView({ block: "center" });
+  }, [p]), /* @__PURE__ */ a.createElement("div", { className: re.threadCommentPanel }, /* @__PURE__ */ a.createElement("div", { className: re.threadCommentPanelForms }, r === he.UNIVER_SHEET ? /* @__PURE__ */ a.createElement(
+    pe,
     {
       borderless: !0,
-      value: g,
-      onChange: (l) => x(l),
+      value: b,
+      onChange: (i) => N(i),
       options: [
         {
           value: "current",
-          label: u.t("threadCommentUI.filter.sheet.current")
+          label: C.t("threadCommentUI.filter.sheet.current")
         },
         {
           value: "all",
-          label: u.t("threadCommentUI.filter.sheet.all")
+          label: C.t("threadCommentUI.filter.sheet.all")
         }
       ]
     }
-  ), /* @__PURE__ */ o.createElement(
-    le,
+  ) : null, /* @__PURE__ */ a.createElement(
+    pe,
     {
       borderless: !0,
-      value: p,
-      onChange: (l) => I(l),
+      value: E,
+      onChange: (i) => H(i),
       options: [
         {
           value: "all",
-          label: u.t("threadCommentUI.filter.status.all")
+          label: C.t("threadCommentUI.filter.status.all")
         },
         {
           value: "resolved",
-          label: u.t("threadCommentUI.filter.status.resolved")
+          label: C.t("threadCommentUI.filter.status.resolved")
         },
         {
           value: "unsolved",
-          label: u.t("threadCommentUI.filter.status.unsolved")
+          label: C.t("threadCommentUI.filter.status.unsolved")
         },
         {
           value: "concern_me",
-          label: u.t("threadCommentUI.filter.status.concernMe")
+          label: C.t("threadCommentUI.filter.status.concernMe")
         }
       ]
     }
-  )), R == null ? void 0 : R.map((l) => /* @__PURE__ */ o.createElement(
-    Xt,
+  )), G.map((i) => /* @__PURE__ */ a.createElement(
+    hn,
     {
-      prefix: F,
-      getSubUnitName: i,
-      key: l.id,
-      id: l.id,
-      unitId: l.unitId,
-      subUnitId: l.subUnitId,
+      prefix: X,
+      getSubUnitName: l,
+      key: i.id,
+      id: i.id,
+      unitId: i.unitId,
+      subUnitId: i.subUnitId,
+      refStr: i.ref,
       type: r,
-      showEdit: (C == null ? void 0 : C.commentId) === l.id,
-      showHighlight: (C == null ? void 0 : C.commentId) === l.id,
+      showEdit: (p == null ? void 0 : p.commentId) === i.id,
+      showHighlight: (p == null ? void 0 : p.commentId) === i.id,
       onClick: () => {
-        V.current = !1, U.executeCommand(fe.id, {
-          unitId: l.unitId,
-          subUnitId: l.subUnitId,
-          commentId: l.id,
-          temp: !0
-        });
+        z.current = !1, i.resolved ? W.executeCommand(j.id) : W.executeCommand(
+          j.id,
+          {
+            unitId: i.unitId,
+            subUnitId: i.subUnitId,
+            commentId: i.id,
+            temp: !1
+          }
+        );
       },
-      onClose: () => s == null ? void 0 : s(l.id),
-      onMouseEnter: () => f == null ? void 0 : f(l),
-      onMouseLeave: () => d == null ? void 0 : d(l)
+      onMouseEnter: () => y == null ? void 0 : y(i),
+      onMouseLeave: () => f == null ? void 0 : f(i),
+      onAddComment: I,
+      onDeleteComment: h,
+      onResolve: (U) => m == null ? void 0 : m(i.id, U)
     }
-  )), R.length ? null : /* @__PURE__ */ o.createElement("div", { className: Z.threadCommentPanelEmpty }, B ? u.t("threadCommentUI.panel.filterEmpty") : u.t("threadCommentUI.panel.empty"), B ? /* @__PURE__ */ o.createElement(
-    G,
+  )), G.length ? null : /* @__PURE__ */ a.createElement("div", { className: re.threadCommentPanelEmpty }, K ? C.t("threadCommentUI.panel.filterEmpty") : C.t("threadCommentUI.panel.empty"), K ? /* @__PURE__ */ a.createElement(
+    ae,
     {
-      onClick: z,
+      onClick: x,
       type: "link"
     },
-    u.t("threadCommentUI.panel.reset")
-  ) : /* @__PURE__ */ o.createElement(
-    G,
+    C.t("threadCommentUI.panel.reset")
+  ) : /* @__PURE__ */ a.createElement(
+    ae,
     {
       id: "thread-comment-add",
-      className: Z.threadCommentPanelAdd,
+      className: re.threadCommentPanelAdd,
       type: "primary",
-      onClick: a
+      onClick: o,
+      disabled: P
     },
-    /* @__PURE__ */ o.createElement(ye, null),
-    u.t("threadCommentUI.panel.addComment")
+    /* @__PURE__ */ a.createElement(Oe, null),
+    C.t("threadCommentUI.panel.addComment")
   )));
 };
 export {
-  ge as IThreadCommentMentionDataService,
-  fe as SetActiveCommentOperation,
-  nt as THREAD_COMMENT_PANEL,
-  pn as ThreadCommentPanel,
-  A as ThreadCommentPanelService,
-  Xt as ThreadCommentTree,
-  lt as ToggleSheetCommentPanelOperation,
-  K as UniverThreadCommentUIPlugin
+  Te as IThreadCommentMentionDataService,
+  j as SetActiveCommentOperation,
+  Ct as THREAD_COMMENT_PANEL,
+  wn as ThreadCommentPanel,
+  F as ThreadCommentPanelService,
+  hn as ThreadCommentTree,
+  It as ToggleSheetCommentPanelOperation,
+  ie as UniverThreadCommentUIPlugin,
+  ht as getDT
 };