@univerjs/thread-comment-ui 0.14.0 → 0.15.0-insiders.20251227-dafc157

package/lib/index.js

@@ -1,19 +1,19 @@
 var He = Object.defineProperty;
-var Ve = (n, e, t) => e in n ? He(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var W = (n, e, t) => Ve(n, typeof e != "symbol" ? e + "" : e, t);
+var Ve = (r, e, t) => e in r ? He(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var W = (r, e, t) => Ve(r, typeof e != "symbol" ? e + "" : e, t);
 import { Inject as ye, IUniverInstanceService as je, Disposable as Pe, UniverInstanceType as de, CommandType as we, DependentOn as Ae, Injector as Be, ICommandService as te, IConfigService as We, Plugin as Ze, merge as Fe, mergeOverrideWithDependencies as Ke, LocaleService as he, DOCS_NORMAL_EDITOR_UNIT_ID_KEY as Ge, BuildTextUtils as ue, DOCS_COMMENT_EDITOR_UNIT_ID_KEY as ze, Tools as Ye, CustomRangeType as qe, getBodySlice as Je, UserManagerService as fe, generateRandomId as Qe } from "@univerjs/core";
 import { ISidebarService as _e, useDependency as N, KeyCode as pe, useObservable as Z, useConfigValue as Xe, UI_PLUGIN_CONFIG_KEY as et } from "@univerjs/ui";
-import { BehaviorSubject as Ce, filter as tt, debounceTime as nt } from "rxjs";
-import { UniverThreadCommentPlugin as rt, ThreadCommentModel as Ne, getDT as it, AddCommentCommand as ot, ResolveCommentCommand as st, DeleteCommentTreeCommand as Se, UpdateCommentCommand as lt, DeleteCommentCommand as at } from "@univerjs/thread-comment";
-import { jsxs as I, jsx as l } from "react/jsx-runtime";
-import { Button as le, clsx as ve, Tooltip as ct, scrollbarClassName as dt, borderClassName as ut, Dropdown as vt, Select as ge } from "@univerjs/design";
-import { useRef as ee, createElement as K, forwardRef as G, useState as P, useEffect as ae, useMemo as X, useImperativeHandle as mt } from "react";
+import { BehaviorSubject as Ce, filter as tt, debounceTime as rt } from "rxjs";
+import { UniverThreadCommentPlugin as nt, ThreadCommentModel as Ne, getDT as it, AddCommentCommand as ot, ResolveCommentCommand as st, DeleteCommentTreeCommand as Se, UpdateCommentCommand as at, DeleteCommentCommand as lt } from "@univerjs/thread-comment";
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import { Button as ae, clsx as ve, Tooltip as ct, scrollbarClassName as dt, borderClassName as ut, Dropdown as vt, Select as ge } from "@univerjs/design";
+import { useRef as ee, createElement as K, forwardRef as G, useState as P, useEffect as le, useMemo as X, useImperativeHandle as mt } from "react";
 import { IEditorService as ht, BreakLineCommand as ft, RichTextEditor as pt } from "@univerjs/docs-ui";
-var Ct = Object.getOwnPropertyDescriptor, gt = (n, e, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ct(e, t) : e, o = n.length - 1, c; o >= 0; o--)
-    (c = n[o]) && (i = c(i) || i);
+var Ct = Object.getOwnPropertyDescriptor, gt = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ct(e, t) : e, o = r.length - 1, c; o >= 0; o--)
+    (c = r[o]) && (i = c(i) || i);
   return i;
-}, Ie = (n, e) => (t, r) => e(t, r, n);
+}, Ie = (r, e) => (t, n) => e(t, n, r);
 let Y = class extends Pe {
   constructor(e, t) {
     super();
@@ -58,29 +58,29 @@ Y = gt([
 const It = "thread-comment-panel", xt = "UNIVER_THREAD_COMMENT_UI_PLUGIN", bt = {
   id: "thread-comment-ui.operation.toggle-panel",
   type: we.OPERATION,
-  handler(n) {
-    const e = n.get(_e), t = n.get(Y);
+  handler(r) {
+    const e = r.get(_e), t = r.get(Y);
     return t.panelVisible ? (e.close(), t.setPanelVisible(!1)) : (e.open({
       header: { title: "threadCommentUI.panel.title" },
       children: { label: It },
-      width: 330
+      width: 360
     }), t.setPanelVisible(!0)), !0;
   }
 }, F = {
   id: "thread-comment-ui.operation.set-active-comment",
   type: we.OPERATION,
-  handler(n, e) {
-    return n.get(Y).setActiveComment(e), !0;
+  handler(r, e) {
+    return r.get(Y).setActiveComment(e), !0;
   }
 }, yt = "thread-comment-ui.config", xe = {};
-var wt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, Nt = (n, e, t) => e in n ? wt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, St = (n, e, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? _t(e, t) : e, o = n.length - 1, c; o >= 0; o--)
-    (c = n[o]) && (i = c(i) || i);
+var wt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, Nt = (r, e, t) => e in r ? wt(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, St = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? _t(e, t) : e, o = r.length - 1, c; o >= 0; o--)
+    (c = r[o]) && (i = c(i) || i);
   return i;
-}, me = (n, e) => (t, r) => e(t, r, n), $e = (n, e, t) => Nt(n, typeof e != "symbol" ? e + "" : e, t);
+}, me = (r, e) => (t, n) => e(t, n, r), $e = (r, e, t) => Nt(r, typeof e != "symbol" ? e + "" : e, t);
 let ce = class extends Ze {
-  constructor(n = xe, e, t, r) {
-    super(), this._config = n, this._injector = e, this._commandService = t, this._configService = r;
+  constructor(r = xe, e, t, n) {
+    super(), this._config = r, this._injector = e, this._commandService = t, this._configService = n;
     const { menu: i, ...o } = Fe(
       {},
       xe,
@@ -89,10 +89,10 @@ let ce = class extends Ze {
     i && this._configService.setConfig("menu", i, { merge: !0 }), this._configService.setConfig(yt, o);
   }
   onStarting() {
-    var n;
+    var r;
     Ke([
       [Y]
-    ], (n = this._config) == null ? void 0 : n.overrides).forEach((e) => {
+    ], (r = this._config) == null ? void 0 : r.overrides).forEach((e) => {
       this._injector.add(e);
     }), [bt, F].forEach((e) => {
       this._commandService.registerCommand(e);
@@ -102,52 +102,52 @@ let ce = class extends Ze {
 $e(ce, "pluginName", xt);
 $e(ce, "type", de.UNIVER_UNKNOWN);
 ce = St([
-  Ae(rt),
+  Ae(nt),
   me(1, ye(Be)),
   me(2, te),
   me(3, We)
 ], ce);
-function z({ ref: n, ...e }) {
-  const { icon: t, id: r, className: i, extend: o, ...c } = e, x = `univerjs-icon univerjs-icon-${r} ${i || ""}`.trim(), h = ee(`_${kt()}`);
-  return Ue(t, `${r}`, {
+function z({ ref: r, ...e }) {
+  const { icon: t, id: n, className: i, extend: o, ...c } = e, x = `univerjs-icon univerjs-icon-${n} ${i || ""}`.trim(), h = ee(`_${kt()}`);
+  return Ue(t, `${n}`, {
     defIds: t.defIds,
     idSuffix: h.current
   }, {
-    ref: n,
+    ref: r,
     className: x,
     ...c
   }, o);
 }
-function Ue(n, e, t, r, i) {
-  return K(n.tag, {
+function Ue(r, e, t, n, i) {
+  return K(r.tag, {
     key: e,
-    ...$t(n, t, i),
-    ...r
-  }, (Ut(n, t).children || []).map((o, c) => Ue(o, `${e}-${n.tag}-${c}`, t, void 0, i)));
+    ...$t(r, t, i),
+    ...n
+  }, (Ut(r, t).children || []).map((o, c) => Ue(o, `${e}-${r.tag}-${c}`, t, void 0, i)));
 }
-function $t(n, e, t) {
-  const r = { ...n.attrs };
-  t != null && t.colorChannel1 && r.fill === "colorChannel1" && (r.fill = t.colorChannel1), n.tag === "mask" && r.id && (r.id = r.id + e.idSuffix), Object.entries(r).forEach(([o, c]) => {
-    o === "mask" && typeof c == "string" && (r[o] = c.replace(/url\(#(.*)\)/, `url(#$1${e.idSuffix})`));
+function $t(r, e, t) {
+  const n = { ...r.attrs };
+  t != null && t.colorChannel1 && n.fill === "colorChannel1" && (n.fill = t.colorChannel1), r.tag === "mask" && n.id && (n.id = n.id + e.idSuffix), Object.entries(n).forEach(([o, c]) => {
+    o === "mask" && typeof c == "string" && (n[o] = c.replace(/url\(#(.*)\)/, `url(#$1${e.idSuffix})`));
   });
   const { defIds: i } = e;
-  return !i || i.length === 0 || (n.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + e.idSuffix), Object.entries(r).forEach(([o, c]) => {
-    typeof c == "string" && (r[o] = c.replace(/url\(#(.*)\)/, `url(#$1${e.idSuffix})`));
-  })), r;
+  return !i || i.length === 0 || (r.tag === "use" && n["xlink:href"] && (n["xlink:href"] = n["xlink:href"] + e.idSuffix), Object.entries(n).forEach(([o, c]) => {
+    typeof c == "string" && (n[o] = c.replace(/url\(#(.*)\)/, `url(#$1${e.idSuffix})`));
+  })), n;
 }
-function Ut(n, e) {
-  var r;
+function Ut(r, e) {
+  var n;
   const { defIds: t } = e;
-  return !t || t.length === 0 ? n : n.tag === "defs" && ((r = n.children) != null && r.length) ? {
-    ...n,
-    children: n.children.map((i) => typeof i.attrs.id == "string" && t && t.includes(i.attrs.id) ? {
+  return !t || t.length === 0 ? r : r.tag === "defs" && ((n = r.children) != null && n.length) ? {
+    ...r,
+    children: r.children.map((i) => typeof i.attrs.id == "string" && t && t.includes(i.attrs.id) ? {
       ...i,
       attrs: {
         ...i.attrs,
         id: i.attrs.id + e.idSuffix
       }
     } : i)
-  } : n;
+  } : r;
 }
 function kt() {
   return Math.random().toString(36).substring(2, 8);
@@ -394,20 +394,20 @@ const Rt = {
   }));
 });
 Oe.displayName = "SolveIcon";
-function be(n) {
+function be(r) {
   return {
     id: "d",
-    body: n,
+    body: r,
     documentStyle: {}
   };
 }
-const Re = G((n, e) => {
+const Re = G((r, e) => {
   var O;
-  const { comment: t, onSave: r, id: i, onCancel: o, autoFocus: c, unitId: x, type: h } = n, S = N(te), U = N(he), [V, k] = P(!1), b = N(ht), u = ee(null), v = h === de.UNIVER_DOC ? Ge : x, [T, y] = P(() => {
+  const { comment: t, onSave: n, id: i, onCancel: o, autoFocus: c, unitId: x, type: h } = r, S = N(te), U = N(he), [V, k] = P(!1), b = N(ht), u = ee(null), v = h === de.UNIVER_DOC ? Ge : x, [T, y] = P(() => {
     var d, m, f;
     return ue.transform.getPlainText((f = (m = (d = u.current) == null ? void 0 : d.getDocumentData().body) == null ? void 0 : m.dataStream) != null ? f : "");
   });
-  ae(() => {
+  le(() => {
     var m, f, w, p;
     y(ue.transform.getPlainText((w = (f = (m = u.current) == null ? void 0 : m.getDocumentData().body) == null ? void 0 : f.dataStream) != null ? w : ""));
     const d = (p = u.current) == null ? void 0 : p.selectionChange$.subscribe(() => {
@@ -441,7 +441,7 @@ const Re = G((n, e) => {
   const C = () => {
     if (u.current) {
       const d = Ye.deepClone(u.current.getDocumentData().body);
-      k(!1), r == null || r({
+      k(!1), n == null || n({
         ...t,
         text: d
       }), u.current.replaceText(""), setTimeout(() => {
@@ -451,7 +451,7 @@ const Re = G((n, e) => {
     }
   };
   return /* @__PURE__ */ I("div", { onClick: (d) => d.preventDefault(), children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ a(
       pt,
       {
         className: "univer-w-full",
@@ -472,8 +472,8 @@ const Re = G((n, e) => {
       }
     ),
     V ? /* @__PURE__ */ I("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2", children: [
-      /* @__PURE__ */ l(
-        le,
+      /* @__PURE__ */ a(
+        ae,
         {
           onClick: () => {
             var d;
@@ -482,8 +482,8 @@ const Re = G((n, e) => {
           children: U.t("threadCommentUI.editor.cancel")
         }
       ),
-      /* @__PURE__ */ l(
-        le,
+      /* @__PURE__ */ a(
+        ae,
         {
           variant: "primary",
           disabled: !T,
@@ -493,8 +493,8 @@ const Re = G((n, e) => {
       )
     ] }) : null
   ] });
-}), Lt = (n) => {
-  const { dataStream: e, customRanges: t } = n, r = e.endsWith(`\r
+}), Lt = (r) => {
+  const { dataStream: e, customRanges: t } = r, n = e.endsWith(`\r
 `) ? e.length - 2 : e.length, i = [];
   let o = 0;
   return t == null || t.forEach((c) => {
@@ -510,29 +510,30 @@ const Re = G((n, e) => {
     }), o = c.endIndex + 1;
   }), i.push({
     type: "text",
-    content: e.slice(o, r)
+    content: e.slice(o, n)
   }), i;
-}, Ht = (n) => {
-  const { paragraphs: e = [] } = n;
-  let t = 0;
-  return e.map((r) => {
-    const i = Je(n, t, r.startIndex);
-    return t = r.startIndex + 1, Lt(i);
+}, Ht = (r) => {
+  if (!r)
+    return [];
+  const { paragraphs: e = [] } = r;
+  return e.map((t, n) => {
+    const i = n === 0 ? 0 : e[n - 1].startIndex + 1, o = Je(r, i, t.startIndex);
+    return Lt(o);
   });
-}, Vt = (n) => {
+}, Vt = (r) => {
   let e = "";
   const t = [];
-  return n.forEach((r) => {
-    switch (r.type) {
+  return r.forEach((n) => {
+    switch (n.type) {
       case "text":
-        e += r.content;
+        e += n.content;
         break;
       case "mention": {
         const i = e.length;
-        e += r.content.label;
+        e += n.content.label;
         const o = e.length - 1;
         t.push({
-          rangeId: r.content.id,
+          rangeId: n.content.id,
           rangeType: qe.MENTION,
           startIndex: i,
           endIndex: o,
@@ -559,19 +560,19 @@ const Re = G((n, e) => {
     dataStream: e,
     customRanges: t
   };
-}, Le = "__mock__", jt = (n) => {
-  const { item: e, unitId: t, subUnitId: r, editing: i, onEditingChange: o, onReply: c, resolved: x, isRoot: h, onClose: S, onDeleteComment: U, type: V } = n, k = N(te), b = N(he), u = N(fe), v = u.getUser(e.personId), T = Z(u.currentUser$), y = (T == null ? void 0 : T.userID) === e.personId, j = e.id === Le, [C, O] = P(!1), d = Xe(et), m = d == null ? void 0 : d.avatarFallback, f = () => {
+}, Le = "__mock__", jt = (r) => {
+  const { item: e, unitId: t, subUnitId: n, editing: i, onEditingChange: o, onReply: c, resolved: x, isRoot: h, onClose: S, onDeleteComment: U, type: V } = r, k = N(te), b = N(he), u = N(fe), v = u.getUser(e.personId), T = Z(u.currentUser$), y = (T == null ? void 0 : T.userID) === e.personId, j = e.id === Le, [C, O] = P(!1), d = Xe(et), m = d == null ? void 0 : d.avatarFallback, f = () => {
     (U == null ? void 0 : U(e)) !== !1 && (k.executeCommand(
-      h ? Se.id : at.id,
+      h ? Se.id : lt.id,
       {
         unitId: t,
-        subUnitId: r,
+        subUnitId: n,
         commentId: e.id
       }
     ), h && (S == null || S()));
   };
   return /* @__PURE__ */ I("div", { className: "univer-relative univer-mb-3 univer-pl-[30px]", onMouseLeave: () => O(!1), onMouseEnter: () => O(!0), children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ a(
       "div",
       {
         className: "univer-absolute univer-left-0 univer-top-0 univer-h-6 univer-w-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat",
@@ -581,25 +582,25 @@ const Re = G((n, e) => {
       }
     ),
     v ? /* @__PURE__ */ I("div", { className: "univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between", children: [
-      /* @__PURE__ */ l("div", { className: "univer-text-sm univer-font-medium univer-leading-5", children: (v == null ? void 0 : v.name) || " " }),
+      /* @__PURE__ */ a("div", { className: "univer-text-sm univer-font-medium univer-leading-5", children: (v == null ? void 0 : v.name) || " " }),
       /* @__PURE__ */ I("div", { children: [
-        j || x ? null : C && v ? /* @__PURE__ */ l(
+        j || x ? null : C && v ? /* @__PURE__ */ a(
           "div",
           {
             className: "univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50",
             onClick: () => c(v),
-            children: /* @__PURE__ */ l(Ee, {})
+            children: /* @__PURE__ */ a(Ee, {})
           }
         ) : null,
-        y && !j && !x ? /* @__PURE__ */ l(
+        y && !j && !x ? /* @__PURE__ */ a(
           vt,
           {
-            overlay: /* @__PURE__ */ l("div", { className: "univer-rounded-lg", children: /* @__PURE__ */ I(
+            overlay: /* @__PURE__ */ a("div", { className: "univer-rounded-lg", children: /* @__PURE__ */ I(
               "ul",
               {
                 className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
                 children: [
-                  /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+                  /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
                     "a",
                     {
                       className: "hover:univer-bg-gray-200",
@@ -607,7 +608,7 @@ const Re = G((n, e) => {
                       children: b.t("threadCommentUI.item.edit")
                     }
                   ) }),
-                  /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+                  /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
                     "a",
                     {
                       className: "hover:univer-bg-gray-200",
@@ -618,25 +619,25 @@ const Re = G((n, e) => {
                 ]
               }
             ) }),
-            children: /* @__PURE__ */ l(
+            children: /* @__PURE__ */ a(
               "div",
               {
                 className: "univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50",
-                children: /* @__PURE__ */ l(De, {})
+                children: /* @__PURE__ */ a(De, {})
               }
             )
           }
         ) : null
       ] })
     ] }) : null,
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ a(
       "time",
       {
         className: "univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
         children: e.dT
       }
     ),
-    i ? /* @__PURE__ */ l(
+    i ? /* @__PURE__ */ a(
       Re,
       {
         type: V,
@@ -645,13 +646,13 @@ const Re = G((n, e) => {
         onCancel: () => o == null ? void 0 : o(!1),
         autoFocus: !0,
         unitId: t,
-        subUnitId: r,
+        subUnitId: n,
         onSave: ({ text: w, attachments: p }) => {
           o == null || o(!1), k.executeCommand(
-            lt.id,
+            at.id,
             {
               unitId: t,
-              subUnitId: r,
+              subUnitId: n,
               payload: {
                 commentId: e.id,
                 text: w,
@@ -661,30 +662,23 @@ const Re = G((n, e) => {
           );
         }
       }
-    ) : /* @__PURE__ */ l(
+    ) : /* @__PURE__ */ a(
       "div",
       {
         className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
-        children: Ht(e.text).map((w, p) => /* @__PURE__ */ l("div", { className: "univer-break-words", children: w.map((s, _) => {
-          switch (s.type) {
-            case "mention":
-              return /* @__PURE__ */ I("a", { className: "univer-text-primary-600", children: [
-                s.content.label,
-                " "
-              ] }, _);
-            default:
-              return s.content;
-          }
-        }) }, p))
+        children: Ht(e.text).map((w, p) => /* @__PURE__ */ a("div", { className: "univer-break-words", children: w.map((s, _) => s.type === "mention" ? /* @__PURE__ */ I("a", { className: "univer-text-primary-600", children: [
+          s.content.label,
+          " "
+        ] }, _) : s.content) }, p))
       }
     )
   ] });
-}, Pt = (n) => {
-  var se, Q, a;
+}, Pt = (r) => {
+  var se, Q, l;
   const {
     id: e,
     unitId: t,
-    subUnitId: r,
+    subUnitId: n,
     refStr: i,
     showEdit: o = !0,
     onClick: c,
@@ -701,9 +695,9 @@ const Re = G((n, e) => {
     type: y,
     style: j,
     full: C
-  } = n, O = N(Ne), [d, m] = P(!1), [f, w] = P(""), p = X(() => O.commentUpdate$.pipe(nt(16)), [O]);
+  } = r, O = N(Ne), [d, m] = P(!1), [f, w] = P(""), p = X(() => O.commentUpdate$.pipe(rt(16)), [O]);
   Z(p);
-  const s = e ? O.getCommentWithChildren(t, r, e) : null, _ = N(te), A = N(fe), D = s == null ? void 0 : s.root.resolved, E = Z(A.currentUser$), L = ee(null), q = [
+  const s = e ? O.getCommentWithChildren(t, n, e) : null, _ = N(te), A = N(fe), D = s == null ? void 0 : s.root.resolved, E = Z(A.currentUser$), L = ee(null), q = [
     ...s ? [s.root] : (
       // mock empty comment
       [{
@@ -716,19 +710,19 @@ const Re = G((n, e) => {
         ref: i != null ? i : "",
         dT: "",
         unitId: t,
-        subUnitId: r,
+        subUnitId: n,
         threadId: ""
       }]
     ),
     ...(Q = s == null ? void 0 : s.children) != null ? Q : []
-  ], R = ee(null), ne = (g) => {
+  ], R = ee(null), re = (g) => {
     g.stopPropagation(), D ? _.executeCommand(F.id, {
       unitId: t,
-      subUnitId: r,
+      subUnitId: n,
       commentId: e
     }) : _.executeCommand(F.id), _.executeCommand(st.id, {
       unitId: t,
-      subUnitId: r,
+      subUnitId: n,
       commentId: e,
       resolved: !D
     }), T == null || T(!D);
@@ -737,17 +731,17 @@ const Re = G((n, e) => {
       Se.id,
       {
         unitId: t,
-        subUnitId: r,
+        subUnitId: n,
         commentId: e
       }
     ), h == null || h());
   };
-  ae(() => b == null ? void 0 : b(), []);
-  const re = S((a = s == null ? void 0 : s.root.subUnitId) != null ? a : r), ie = o && !f && !D, oe = `${i || (s == null ? void 0 : s.root.ref) || ""}${re ? " · " : ""}${re}`;
+  le(() => b == null ? void 0 : b(), []);
+  const ne = S((l = s == null ? void 0 : s.root.subUnitId) != null ? l : n), ie = o && !f && !D, oe = `${i || (s == null ? void 0 : s.root.ref) || ""}${ne ? " · " : ""}${ne}`;
   return /* @__PURE__ */ I(
     "div",
     {
-      id: `${U}-${t}-${r}-${e}`,
+      id: `${U}-${t}-${n}-${e}`,
       className: ve("univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white", ut, {
         "univer-w-[278px]": !C,
         "univer-w-full": C,
@@ -762,7 +756,7 @@ const Re = G((n, e) => {
         b == null || b(), m(!1);
       },
       children: [
-        !D && x && /* @__PURE__ */ l(
+        !D && x && /* @__PURE__ */ a(
           "div",
           {
             className: "univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400"
@@ -774,13 +768,13 @@ const Re = G((n, e) => {
             className: "univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5",
             children: [
               /* @__PURE__ */ I("div", { className: "univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden", children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ a(
                   "div",
                   {
                     className: "univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500"
                   }
                 ),
-                /* @__PURE__ */ l(ct, { showIfEllipsis: !0, title: oe, children: /* @__PURE__ */ l(
+                /* @__PURE__ */ a(ct, { showIfEllipsis: !0, title: oe, children: /* @__PURE__ */ a(
                   "span",
                   {
                     className: "univer-flex-1 univer-truncate",
@@ -789,39 +783,39 @@ const Re = G((n, e) => {
                 ) })
               ] }),
               !!s && /* @__PURE__ */ I("div", { className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row", children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ a(
                   "div",
                   {
                     className: ve("univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800", {
                       "univer-text-green-500": D
                     }),
-                    onClick: ne,
-                    children: D ? /* @__PURE__ */ l(Me, {}) : /* @__PURE__ */ l(Oe, {})
+                    onClick: re,
+                    children: D ? /* @__PURE__ */ a(Me, {}) : /* @__PURE__ */ a(Oe, {})
                   }
                 ),
-                (E == null ? void 0 : E.userID) === s.root.personId ? /* @__PURE__ */ l(
+                (E == null ? void 0 : E.userID) === s.root.personId ? /* @__PURE__ */ a(
                   "div",
                   {
                     className: "univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800",
                     onClick: J,
-                    children: /* @__PURE__ */ l(ke, {})
+                    children: /* @__PURE__ */ a(ke, {})
                   }
                 ) : null
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ a(
           "div",
           {
             ref: R,
             className: ve("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", dt),
             children: q.map(
-              (g) => /* @__PURE__ */ l(
+              (g) => /* @__PURE__ */ a(
                 jt,
                 {
                   unitId: t,
-                  subUnitId: r,
+                  subUnitId: n,
                   item: g,
                   isRoot: g.id === (s == null ? void 0 : s.root.id),
                   editing: f === g.id,
@@ -857,13 +851,13 @@ const Re = G((n, e) => {
             )
           }
         ),
-        ie && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
+        ie && /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
           Re,
           {
             ref: L,
             type: y,
             unitId: t,
-            subUnitId: r,
+            subUnitId: n,
             onSave: async ({ text: g, attachments: M }) => {
               const H = {
                 text: g,
@@ -874,14 +868,14 @@ const Re = G((n, e) => {
                 personId: E == null ? void 0 : E.userID,
                 parentId: s == null ? void 0 : s.root.id,
                 unitId: t,
-                subUnitId: r,
+                subUnitId: n,
                 threadId: s == null ? void 0 : s.root.threadId
               };
               (u == null ? void 0 : u(H)) !== !1 && (await _.executeCommand(
                 ot.id,
                 {
                   unitId: t,
-                  subUnitId: r,
+                  subUnitId: n,
                   comment: H
                 }
               ), R.current && (R.current.scrollTop = R.current.scrollHeight));
@@ -896,11 +890,11 @@ const Re = G((n, e) => {
       ]
     }
   );
-}, qt = (n) => {
+}, qt = (r) => {
   const {
     unitId: e,
     subUnitId$: t,
-    type: r,
+    type: n,
     onAdd: i,
     getSubUnitName: o,
     onResolve: c,
@@ -912,9 +906,9 @@ const Re = G((n, e) => {
     onAddComment: k,
     onDeleteComment: b,
     showComments: u
-  } = n, [v, T] = P("all"), [y, j] = P("all"), C = N(he), O = N(fe), d = N(Ne), [m, f] = P(() => d.getUnit(e)), w = N(Y), p = Z(w.activeCommentId$), s = Z(d.commentUpdate$), _ = N(te), A = Z(t), D = ee(!0), E = "panel", L = Z(O.currentUser$), q = X(() => {
+  } = r, [v, T] = P("all"), [y, j] = P("all"), C = N(he), O = N(fe), d = N(Ne), [m, f] = P(() => d.getUnit(e)), w = N(Y), p = Z(w.activeCommentId$), s = Z(d.commentUpdate$), _ = N(te), A = Z(t), D = ee(!0), E = "panel", L = Z(O.currentUser$), q = X(() => {
     var H;
-    const a = v === "all" ? m : (H = m.filter(($) => $.subUnitId === A)) != null ? H : [], g = x != null ? x : (($) => $), M = a.map(($) => {
+    const l = v === "all" ? m : (H = m.filter(($) => $.subUnitId === A)) != null ? H : [], g = x != null ? x : (($) => $), M = l.map(($) => {
       var B;
       return { ...$.root, children: (B = $.children) != null ? B : [], users: $.relativeUsers };
     });
@@ -926,16 +920,16 @@ const Re = G((n, e) => {
     } else
       return g(M);
   }, [u, v, m, x, A]), R = X(() => [
-    ...q.filter((a) => !a.resolved),
-    ...q.filter((a) => a.resolved)
-  ], [q]), ne = X(() => y === "resolved" ? R.filter((a) => a.resolved) : y === "unsolved" ? R.filter((a) => !a.resolved) : y === "concern_me" && L != null && L.userID ? R.filter((a) => a == null ? void 0 : a.users.has(L.userID)) : R, [R, L == null ? void 0 : L.userID, y]), J = V ? [V, ...ne] : ne, re = J.filter((a) => !a.resolved), ie = J.filter((a) => a.resolved), oe = y !== "all" || v !== "all", se = () => {
+    ...q.filter((l) => !l.resolved),
+    ...q.filter((l) => l.resolved)
+  ], [q]), re = X(() => y === "resolved" ? R.filter((l) => l.resolved) : y === "unsolved" ? R.filter((l) => !l.resolved) : y === "concern_me" && L != null && L.userID ? R.filter((l) => l == null ? void 0 : l.users.has(L.userID)) : R, [R, L == null ? void 0 : L.userID, y]), J = V ? [V, ...re] : re, ne = J.filter((l) => !l.resolved), ie = J.filter((l) => l.resolved), oe = y !== "all" || v !== "all", se = () => {
     j("all"), T("all");
   };
-  ae(() => {
+  le(() => {
     e && f(
       d.getUnit(e)
     );
-  }, [e, d, s]), ae(() => {
+  }, [e, d, s]), le(() => {
     var $;
     if (!p)
       return;
@@ -943,43 +937,43 @@ const Re = G((n, e) => {
       D.current = !0;
       return;
     }
-    const { unitId: a, subUnitId: g, commentId: M } = p, H = `${E}-${a}-${g}-${M}`;
+    const { unitId: l, subUnitId: g, commentId: M } = p, H = `${E}-${l}-${g}-${M}`;
     ($ = document.getElementById(H)) == null || $.scrollIntoView({ block: "center" });
   }, [p]);
-  const Q = (a) => /* @__PURE__ */ l(
+  const Q = (l) => /* @__PURE__ */ a(
     Pt,
     {
       prefix: E,
       getSubUnitName: o,
-      id: a.id,
-      unitId: a.unitId,
-      subUnitId: a.subUnitId,
-      refStr: a.ref,
-      type: r,
-      showEdit: (p == null ? void 0 : p.commentId) === a.id,
-      showHighlight: (p == null ? void 0 : p.commentId) === a.id,
+      id: l.id,
+      unitId: l.unitId,
+      subUnitId: l.subUnitId,
+      refStr: l.ref,
+      type: n,
+      showEdit: (p == null ? void 0 : p.commentId) === l.id,
+      showHighlight: (p == null ? void 0 : p.commentId) === l.id,
       onClick: () => {
-        D.current = !1, a.resolved ? _.executeCommand(F.id) : _.executeCommand(
+        D.current = !1, l.resolved ? _.executeCommand(F.id) : _.executeCommand(
           F.id,
           {
-            unitId: a.unitId,
-            subUnitId: a.subUnitId,
-            commentId: a.id,
+            unitId: l.unitId,
+            subUnitId: l.subUnitId,
+            commentId: l.id,
             temp: !1
           }
         );
       },
-      onMouseEnter: () => S == null ? void 0 : S(a),
-      onMouseLeave: () => h == null ? void 0 : h(a),
+      onMouseEnter: () => S == null ? void 0 : S(l),
+      onMouseLeave: () => h == null ? void 0 : h(l),
       onAddComment: k,
       onDeleteComment: b,
-      onResolve: (g) => c == null ? void 0 : c(a.id, g)
+      onResolve: (g) => c == null ? void 0 : c(l.id, g)
     },
-    a.id
+    l.id
   );
   return /* @__PURE__ */ I("div", { className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3", children: [
     /* @__PURE__ */ I("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between", children: [
-      r === de.UNIVER_SHEET ? /* @__PURE__ */ l(
+      n === de.UNIVER_SHEET ? /* @__PURE__ */ a(
         ge,
         {
           borderless: !0,
@@ -997,7 +991,7 @@ const Re = G((n, e) => {
           onChange: T
         }
       ) : null,
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ a(
         ge,
         {
           borderless: !0,
@@ -1030,15 +1024,15 @@ const Re = G((n, e) => {
         className: "univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: [
           C.t("threadCommentUI.panel.empty"),
-          oe ? /* @__PURE__ */ l("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ l(le, { onClick: se, children: C.t("threadCommentUI.panel.reset") }) }) : U ? null : /* @__PURE__ */ l("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ I(le, { onClick: i, children: [
-            /* @__PURE__ */ l(Te, { className: "univer-mr-1.5" }),
+          oe ? /* @__PURE__ */ a("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ a(ae, { onClick: se, children: C.t("threadCommentUI.panel.reset") }) }) : U ? null : /* @__PURE__ */ a("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ I(ae, { onClick: i, children: [
+            /* @__PURE__ */ a(Te, { className: "univer-mr-1.5" }),
             C.t("threadCommentUI.panel.addComment")
           ] }) })
         ]
       }
     ) : /* @__PURE__ */ I("div", { className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3", children: [
-      re.map(Q),
-      ie.length > 0 && /* @__PURE__ */ l("div", { className: "univer-text-xs", children: C.t("threadCommentUI.panel.solved") }),
+      ne.map(Q),
+      ie.length > 0 && /* @__PURE__ */ a("div", { className: "univer-text-xs", children: C.t("threadCommentUI.panel.solved") }),
       ie.map(Q)
     ] })
   ] });