@univerjs/thread-comment-ui 0.6.7 → 0.6.8

package/lib/index.js

@@ -0,0 +1,812 @@
+var je = Object.defineProperty;
+var Ae = (t, e, n) => e in t ? je(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var B = (t, e, n) => Ae(t, typeof e != "symbol" ? e + "" : e, n);
+import { Inject as Ne, IUniverInstanceService as Be, Disposable as We, UniverInstanceType as he, CommandType as Te, DependentOn as Fe, Injector as ze, ICommandService as ie, IConfigService as Ze, Plugin as Ke, merge as Ge, mergeOverrideWithDependencies as Ye, LocaleService as fe, DOCS_NORMAL_EDITOR_UNIT_ID_KEY as qe, BuildTextUtils as Ce, Tools as Je, CustomRangeType as Qe, getBodySlice as Xe, UserManagerService as pe, generateRandomId as et } from "@univerjs/core";
+import { UniverThreadCommentPlugin as tt, ThreadCommentModel as Ue, getDT as nt, AddCommentCommand as rt, ResolveCommentCommand as it, DeleteCommentTreeCommand as Ee, UpdateCommentCommand as ot, DeleteCommentCommand as at } from "@univerjs/thread-comment";
+import { ISidebarService as Oe, useDependency as N, KeyCode as ge, useObservable as W } from "@univerjs/ui";
+import { BehaviorSubject as Ie, filter as st, debounceTime as lt } from "rxjs";
+import { jsxs as S, jsx as l } from "react/jsx-runtime";
+import { Button as ce, clsx as dt, Tooltip as ct, Dropdown as mt, Select as be } from "@univerjs/design";
+import { forwardRef as j, useRef as re, createElement as z, useState as V, useEffect as me, useMemo as ne, useImperativeHandle as ut } from "react";
+import { IEditorService as ht, BreakLineCommand as Ct, RichTextEditor as vt } from "@univerjs/docs-ui";
+var ft = Object.getOwnPropertyDescriptor, pt = (t, e, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? ft(e, n) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (i = d(i) || i);
+  return i;
+}, Se = (t, e) => (n, r) => e(n, r, t);
+let Y = class extends We {
+  constructor(e, n) {
+    super();
+    B(this, "_panelVisible", !1);
+    B(this, "_panelVisible$", new Ie(!1));
+    B(this, "_activeCommentId");
+    B(this, "_activeCommentId$", new Ie(void 0));
+    B(this, "panelVisible$", this._panelVisible$.asObservable());
+    B(this, "activeCommentId$", this._activeCommentId$.asObservable());
+    this._sidebarService = e, this._univerInstanceService = n, this._init(), this.disposeWithMe(() => {
+      this._activeCommentId$.complete(), this._panelVisible$.complete();
+    });
+  }
+  _init() {
+    this.disposeWithMe(
+      this._sidebarService.sidebarOptions$.subscribe((e) => {
+        e.visible || this.setPanelVisible(!1);
+      })
+    ), this.disposeWithMe(
+      this._univerInstanceService.getCurrentTypeOfUnit$(he.UNIVER_SHEET).pipe(st((e) => !e)).subscribe(() => {
+        this._sidebarService.close();
+      })
+    );
+  }
+  get panelVisible() {
+    return this._panelVisible;
+  }
+  get activeCommentId() {
+    return this._activeCommentId;
+  }
+  setPanelVisible(e) {
+    this._panelVisible = e, this._panelVisible$.next(e);
+  }
+  setActiveComment(e) {
+    this._activeCommentId = e, this._activeCommentId$.next(e);
+  }
+};
+Y = pt([
+  Se(0, Ne(Oe)),
+  Se(1, Be)
+], Y);
+const gt = "thread-comment-panel", It = "UNIVER_THREAD_COMMENT_UI_PLUGIN", bt = {
+  id: "thread-comment-ui.operation.toggle-panel",
+  type: Te.OPERATION,
+  handler(t) {
+    const e = t.get(Oe), n = t.get(Y);
+    return n.panelVisible ? (e.close(), n.setPanelVisible(!1)) : (e.open({
+      header: { title: "threadCommentUI.panel.title" },
+      children: { label: gt },
+      width: 330
+    }), n.setPanelVisible(!0)), !0;
+  }
+}, F = {
+  id: "thread-comment-ui.operation.set-active-comment",
+  type: Te.OPERATION,
+  handler(t, e) {
+    return t.get(Y).setActiveComment(e), !0;
+  }
+}, St = "thread-comment-ui.config", ye = {};
+var yt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, xt = (t, e, n) => e in t ? yt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, Nt = (t, e, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? _t(e, n) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (i = d(i) || i);
+  return i;
+}, ve = (t, e) => (n, r) => e(n, r, t), Pe = (t, e, n) => xt(t, typeof e != "symbol" ? e + "" : e, n);
+let ue = class extends Ke {
+  constructor(t = ye, e, n, r) {
+    super(), this._config = t, this._injector = e, this._commandService = n, this._configService = r;
+    const { menu: i, ...a } = Ge(
+      {},
+      ye,
+      this._config
+    );
+    i && this._configService.setConfig("menu", i, { merge: !0 }), this._configService.setConfig(St, a);
+  }
+  onStarting() {
+    var t;
+    Ye([
+      [Y]
+    ], (t = this._config) == null ? void 0 : t.overrides).forEach((e) => {
+      this._injector.add(e);
+    }), [bt, F].forEach((e) => {
+      this._commandService.registerCommand(e);
+    });
+  }
+};
+Pe(ue, "pluginName", It);
+Pe(ue, "type", he.UNIVER_UNKNOWN);
+ue = Nt([
+  Fe(tt),
+  ve(1, Ne(ze)),
+  ve(2, ie),
+  ve(3, Ze)
+], ue);
+var H = function() {
+  return H = Object.assign || function(t) {
+    for (var e, n = 1, r = arguments.length; n < r; n++) {
+      e = arguments[n];
+      for (var i in e) Object.prototype.hasOwnProperty.call(e, i) && (t[i] = e[i]);
+    }
+    return t;
+  }, H.apply(this, arguments);
+}, Tt = 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 i = 0, r = Object.getOwnPropertySymbols(t); i < r.length; i++)
+      e.indexOf(r[i]) < 0 && Object.prototype.propertyIsEnumerable.call(t, r[i]) && (n[r[i]] = t[r[i]]);
+  return n;
+}, Z = j(function(t, e) {
+  var n = t.icon, r = t.id, i = t.className, a = t.extend, d = Tt(t, ["icon", "id", "className", "extend"]), C = "univerjs-icon univerjs-icon-".concat(r, " ").concat(i || "").trim(), g = re("_".concat(Ot()));
+  return $e(n, "".concat(r), { defIds: n.defIds, idSuffix: g.current }, H({ ref: e, className: C }, d), a);
+});
+function $e(t, e, n, r, i) {
+  return z(t.tag, H(H({ key: e }, Ut(t, n, i)), r), (Et(t, n).children || []).map(function(a, d) {
+    return $e(a, "".concat(e, "-").concat(t.tag, "-").concat(d), n, void 0, i);
+  }));
+}
+function Ut(t, e, n) {
+  var r = H({}, t.attrs);
+  n != null && n.colorChannel1 && r.fill === "colorChannel1" && (r.fill = n.colorChannel1), t.tag === "mask" && r.id && (r.id = r.id + e.idSuffix), Object.entries(r).forEach(function(a) {
+    var d = a[0], C = a[1];
+    d === "mask" && typeof C == "string" && (r[d] = C.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  });
+  var i = e.defIds;
+  return !i || i.length === 0 || (t.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + e.idSuffix), Object.entries(r).forEach(function(a) {
+    var d = a[0], C = a[1];
+    typeof C == "string" && (r[d] = C.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  })), r;
+}
+function Et(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) ? H(H({}, t), { children: t.children.map(function(i) {
+    return typeof i.attrs.id == "string" && r && r.indexOf(i.attrs.id) > -1 ? H(H({}, i), { attrs: H(H({}, i.attrs), { id: i.attrs.id + e.idSuffix }) }) : i;
+  }) }) : t;
+}
+function Ot() {
+  return Math.random().toString(36).substring(2, 8);
+}
+Z.displayName = "UniverIcon";
+var Pt = { 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" } }] }, De = j(function(t, e) {
+  return z(Z, Object.assign({}, t, {
+    id: "delete-single",
+    ref: e,
+    icon: Pt
+  }));
+});
+De.displayName = "DeleteSingle";
+var $t = { 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" } }] }, He = j(function(t, e) {
+  return z(Z, Object.assign({}, t, {
+    id: "increase-single",
+    ref: e,
+    icon: $t
+  }));
+});
+He.displayName = "IncreaseSingle";
+var Dt = { 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" } }] }, Me = j(function(t, e) {
+  return z(Z, Object.assign({}, t, {
+    id: "more-horizontal-single",
+    ref: e,
+    icon: Dt
+  }));
+});
+Me.displayName = "MoreHorizontalSingle";
+var Ht = { 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 } }] }, ke = j(function(t, e) {
+  return z(Z, Object.assign({}, t, {
+    id: "reply-to-comment-single",
+    ref: e,
+    icon: Ht
+  }));
+});
+ke.displayName = "ReplyToCommentSingle";
+var Mt = { 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 = j(function(t, e) {
+  return z(Z, Object.assign({}, t, {
+    id: "resolved-single",
+    ref: e,
+    icon: Mt
+  }));
+});
+Re.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 } }] }, we = j(function(t, e) {
+  return z(Z, Object.assign({}, t, {
+    id: "solve-single",
+    ref: e,
+    icon: kt
+  }));
+});
+we.displayName = "SolveSingle";
+const Rt = "univer-thread-comment-editor-buttons", _e = {
+  threadCommentEditorButtons: Rt
+};
+function xe(t) {
+  return {
+    id: "d",
+    body: t,
+    documentStyle: {}
+  };
+}
+const Le = j((t, e) => {
+  var R;
+  const { comment: n, onSave: r, id: i, onCancel: a, autoFocus: d, unitId: C, type: g } = t, T = N(ie), O = N(fe), [w, P] = V(!1), U = N(ht), m = re(null), f = g === he.UNIVER_SHEET ? qe : C, [$, y] = V(() => {
+    var c, u, p;
+    return Ce.transform.getPlainText((p = (u = (c = m.current) == null ? void 0 : c.getDocumentData().body) == null ? void 0 : u.dataStream) != null ? p : "");
+  });
+  me(() => {
+    var u, p, s, h;
+    y(Ce.transform.getPlainText((s = (p = (u = m.current) == null ? void 0 : u.getDocumentData().body) == null ? void 0 : p.dataStream) != null ? s : ""));
+    const c = (h = m.current) == null ? void 0 : h.selectionChange$.subscribe(() => {
+      var K, _, b;
+      y(Ce.transform.getPlainText((b = (_ = (K = m.current) == null ? void 0 : K.getDocumentData().body) == null ? void 0 : _.dataStream) != null ? b : ""));
+    });
+    return () => c == null ? void 0 : c.unsubscribe();
+  }, [(R = m.current) == null ? void 0 : R.selectionChange$]);
+  const M = ne(() => ({
+    keyCodes: [{ keyCode: ge.ENTER }],
+    handler: (c) => {
+      c === ge.ENTER && T.executeCommand(
+        Ct.id
+      );
+    }
+  }), [T]);
+  ut(e, () => ({
+    reply(c) {
+      var u, p;
+      (u = m.current) == null || u.focus(), (p = m.current) == null || p.setDocumentData(xe(c));
+    }
+  }));
+  const I = () => {
+    if (m.current) {
+      const c = Je.deepClone(m.current.getDocumentData().body);
+      P(!1), r == null || r({
+        ...n,
+        text: c
+      }), m.current.replaceText(""), setTimeout(() => {
+        var u, p;
+        (u = m.current) == null || u.setSelectionRanges([]), (p = m.current) == null || p.blur();
+      }, 10);
+    }
+  };
+  return /* @__PURE__ */ S("div", { className: _e.threadCommentEditor, onClick: (c) => c.preventDefault(), children: [
+    /* @__PURE__ */ l(
+      vt,
+      {
+        editorRef: m,
+        autoFocus: d,
+        style: { width: "100%" },
+        keyboardEventConfig: M,
+        placeholder: O.t("threadCommentUI.editor.placeholder"),
+        initialValue: (n == null ? void 0 : n.text) && xe(n.text),
+        onFocusChange: (c) => c && P(c),
+        isSingle: !1,
+        maxHeight: 64,
+        onClickOutside: () => {
+          setTimeout(() => {
+            U.focus(f);
+          }, 30);
+        }
+      }
+    ),
+    w ? /* @__PURE__ */ S("div", { className: _e.threadCommentEditorButtons, children: [
+      /* @__PURE__ */ l(
+        ce,
+        {
+          style: { marginRight: 12 },
+          onClick: () => {
+            var c;
+            a == null || a(), P(!1), (c = m.current) == null || c.replaceText("", !0), T.executeCommand(F.id);
+          },
+          children: O.t("threadCommentUI.editor.cancel")
+        }
+      ),
+      /* @__PURE__ */ l(
+        ce,
+        {
+          type: "primary",
+          disabled: !$,
+          onClick: I,
+          children: O.t(i ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
+        }
+      )
+    ] }) : null
+  ] });
+}), wt = (t) => {
+  const { dataStream: e, customRanges: n } = t, r = e.endsWith(`\r
+`) ? e.length - 2 : e.length, i = [];
+  let a = 0;
+  return n == null || n.forEach((d) => {
+    a < d.startIndex && i.push({
+      type: "text",
+      content: e.slice(a, d.startIndex)
+    }), i.push({
+      type: "mention",
+      content: {
+        label: e.slice(d.startIndex, d.endIndex + 1),
+        id: d.rangeId
+      }
+    }), a = d.endIndex + 1;
+  }), i.push({
+    type: "text",
+    content: e.slice(a, r)
+  }), i;
+}, Lt = (t) => {
+  const { paragraphs: e = [] } = t;
+  let n = 0;
+  return e.map((r) => {
+    const i = Xe(t, n, r.startIndex);
+    return n = r.startIndex + 1, wt(i);
+  });
+}, Vt = (t) => {
+  let e = "";
+  const n = [];
+  return t.forEach((r) => {
+    switch (r.type) {
+      case "text":
+        e += r.content;
+        break;
+      case "mention": {
+        const i = e.length;
+        e += r.content.label;
+        const a = e.length - 1;
+        n.push({
+          rangeId: r.content.id,
+          rangeType: Qe.MENTION,
+          startIndex: i,
+          endIndex: a,
+          properties: {}
+        });
+        break;
+      }
+    }
+  }), e += `
+\r`, {
+    textRuns: [],
+    paragraphs: [
+      {
+        startIndex: e.length - 2,
+        paragraphStyle: {}
+      }
+    ],
+    sectionBreaks: [
+      {
+        startIndex: e.length - 1
+      }
+    ],
+    dataStream: e,
+    customRanges: n
+  };
+}, jt = "univer-thread-comment", At = "univer-thread-comment-active", Bt = "univer-thread-comment-content", Wt = "univer-thread-comment-highlight", Ft = "univer-thread-comment-icon-container", zt = "univer-thread-comment-icon", Zt = "univer-thread-comment-title", Kt = "univer-thread-comment-title-position", Gt = "univer-thread-comment-title-highlight", Yt = "univer-thread-comment-title-position-text", qt = "univer-thread-comment-username", Jt = "univer-thread-comment-item", Qt = "univer-thread-comment-item-head", Xt = "univer-thread-comment-item-title", en = "univer-thread-comment-item-time", tn = "univer-thread-comment-item-content", nn = "univer-thread-comment-item-at", v = {
+  threadComment: jt,
+  threadCommentActive: At,
+  threadCommentContent: Bt,
+  threadCommentHighlight: Wt,
+  threadCommentIconContainer: Ft,
+  threadCommentIcon: zt,
+  threadCommentTitle: Zt,
+  threadCommentTitlePosition: Kt,
+  threadCommentTitleHighlight: Gt,
+  threadCommentTitlePositionText: Yt,
+  threadCommentUsername: qt,
+  threadCommentItem: Jt,
+  threadCommentItemHead: Qt,
+  threadCommentItemTitle: Xt,
+  threadCommentItemTime: en,
+  threadCommentItemContent: tn,
+  threadCommentItemAt: nn
+}, Ve = "__mock__", rn = (t) => {
+  const { item: e, unitId: n, subUnitId: r, editing: i, onEditingChange: a, onReply: d, resolved: C, isRoot: g, onClose: T, onDeleteComment: O, type: w } = t, P = N(ie), U = N(fe), m = N(pe), f = m.getUser(e.personId), $ = W(m.currentUser$), y = ($ == null ? void 0 : $.userID) === e.personId, M = e.id === Ve, [I, R] = V(!1), c = () => {
+    (O == null ? void 0 : O(e)) !== !1 && (P.executeCommand(
+      g ? Ee.id : at.id,
+      {
+        unitId: n,
+        subUnitId: r,
+        commentId: e.id
+      }
+    ), g && (T == null || T()));
+  };
+  return /* @__PURE__ */ S("div", { className: v.threadCommentItem, onMouseLeave: () => R(!1), onMouseEnter: () => R(!0), children: [
+    /* @__PURE__ */ l("img", { className: v.threadCommentItemHead, src: f == null ? void 0 : f.avatar }),
+    /* @__PURE__ */ S("div", { className: v.threadCommentItemTitle, children: [
+      /* @__PURE__ */ l("div", { className: v.threadCommentUsername, children: (f == null ? void 0 : f.name) || " " }),
+      /* @__PURE__ */ S("div", { children: [
+        M || C ? null : I ? /* @__PURE__ */ l("div", { className: v.threadCommentIcon, onClick: () => d(f), children: /* @__PURE__ */ l(ke, {}) }) : null,
+        y && !M && !C ? /* @__PURE__ */ l(
+          mt,
+          {
+            overlay: /* @__PURE__ */ l("div", { className: "univer-rounded-lg univer-p-4 univer-theme", children: /* @__PURE__ */ S(
+              "ul",
+              {
+                className: `
+                                              univer-m-0 univer-grid univer-list-none univer-gap-2 univer-p-0
+                                              univer-text-sm
+                                              [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-p-1
+                                            `,
+                children: [
+                  /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+                    "a",
+                    {
+                      className: "hover:univer-bg-gray-200",
+                      onClick: () => a == null ? void 0 : a(!0),
+                      children: U.t("threadCommentUI.item.edit")
+                    }
+                  ) }),
+                  /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+                    "a",
+                    {
+                      className: "hover:univer-bg-gray-200",
+                      onClick: c,
+                      children: U.t("threadCommentUI.item.delete")
+                    }
+                  ) })
+                ]
+              }
+            ) }),
+            children: /* @__PURE__ */ l("div", { className: v.threadCommentIcon, children: /* @__PURE__ */ l(Me, {}) })
+          }
+        ) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ l("div", { className: v.threadCommentItemTime, children: e.dT }),
+    i ? /* @__PURE__ */ l(
+      Le,
+      {
+        type: w,
+        id: e.id,
+        comment: e,
+        onCancel: () => a == null ? void 0 : a(!1),
+        autoFocus: !0,
+        unitId: n,
+        subUnitId: r,
+        onSave: ({ text: u, attachments: p }) => {
+          a == null || a(!1), P.executeCommand(
+            ot.id,
+            {
+              unitId: n,
+              subUnitId: r,
+              payload: {
+                commentId: e.id,
+                text: u,
+                attachments: p
+              }
+            }
+          );
+        }
+      }
+    ) : /* @__PURE__ */ l("div", { className: v.threadCommentItemContent, children: Lt(e.text).map((u, p) => /* @__PURE__ */ l("div", { className: "univer-break-words", children: u.map((s, h) => {
+      switch (s.type) {
+        case "mention":
+          return /* @__PURE__ */ S("a", { className: v.threadCommentItemAt, children: [
+            s.content.label,
+            " "
+          ] }, h);
+        default:
+          return s.content;
+      }
+    }) }, p)) })
+  ] });
+}, on = (t) => {
+  var X, ee, se;
+  const {
+    id: e,
+    unitId: n,
+    subUnitId: r,
+    refStr: i,
+    showEdit: a = !0,
+    onClick: d,
+    showHighlight: C,
+    onClose: g,
+    getSubUnitName: T,
+    prefix: O,
+    autoFocus: w,
+    onMouseEnter: P,
+    onMouseLeave: U,
+    onAddComment: m,
+    onDeleteComment: f,
+    onResolve: $,
+    type: y
+  } = t, M = N(Ue), [I, R] = V(!1), [c, u] = V(""), p = ne(() => M.commentUpdate$.pipe(lt(16)), [M]);
+  W(p);
+  const s = e ? M.getCommentWithChildren(n, r, e) : null, h = N(ie), K = N(pe), _ = s == null ? void 0 : s.root.resolved, b = W(K.currentUser$), G = re(null), oe = [
+    ...s ? [s.root] : (
+      // mock empty comment
+      [{
+        id: Ve,
+        text: {
+          dataStream: `
+\r`
+        },
+        personId: (X = b == null ? void 0 : b.userID) != null ? X : "",
+        ref: i != null ? i : "",
+        dT: "",
+        unitId: n,
+        subUnitId: r,
+        threadId: ""
+      }]
+    ),
+    ...(ee = s == null ? void 0 : s.children) != null ? ee : []
+  ], D = re(null), q = (x) => {
+    x.stopPropagation(), _ ? h.executeCommand(F.id, {
+      unitId: n,
+      subUnitId: r,
+      commentId: e
+    }) : h.executeCommand(F.id), h.executeCommand(it.id, {
+      unitId: n,
+      subUnitId: r,
+      commentId: e,
+      resolved: !_
+    }), $ == null || $(!_);
+  }, L = (x) => {
+    x.stopPropagation(), h.executeCommand(F.id), !(s != null && s.root && (f == null ? void 0 : f(s.root)) === !1) && (h.executeCommand(
+      Ee.id,
+      {
+        unitId: n,
+        subUnitId: r,
+        commentId: e
+      }
+    ), g == null || g());
+  };
+  me(() => U == null ? void 0 : U(), []);
+  const J = T((se = s == null ? void 0 : s.root.subUnitId) != null ? se : r), Q = a && !c && !_, ae = `${i || (s == null ? void 0 : s.root.ref) || ""}${J ? " · " : ""}${J}`;
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: dt(v.threadComment, {
+        [v.threadCommentActive]: !_ && (C || I || O === "cell")
+      }),
+      onClick: d,
+      id: `${O}-${n}-${r}-${e}`,
+      onMouseEnter: () => {
+        P == null || P(), R(!0);
+      },
+      onMouseLeave: () => {
+        U == null || U(), R(!1);
+      },
+      children: [
+        !_ && C ? /* @__PURE__ */ l("div", { className: v.threadCommentHighlight }) : null,
+        /* @__PURE__ */ S("div", { className: v.threadCommentTitle, children: [
+          /* @__PURE__ */ S("div", { className: v.threadCommentTitlePosition, children: [
+            /* @__PURE__ */ l("div", { className: v.threadCommentTitleHighlight }),
+            /* @__PURE__ */ l(ct, { showIfEllipsis: !0, title: ae, children: /* @__PURE__ */ l("div", { className: v.threadCommentTitlePositionText, children: ae }) })
+          ] }),
+          s ? /* @__PURE__ */ S("div", { className: v.threadCommentIconContainer, children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                onClick: q,
+                className: v.threadCommentIcon,
+                style: { color: _ ? "rgb(var(--green-500))" : "" },
+                children: _ ? /* @__PURE__ */ l(Re, {}) : /* @__PURE__ */ l(we, {})
+              }
+            ),
+            (b == null ? void 0 : b.userID) === s.root.personId ? /* @__PURE__ */ l("div", { className: v.threadCommentIcon, onClick: L, children: /* @__PURE__ */ l(De, {}) }) : null
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ l("div", { className: v.threadCommentContent, ref: D, children: oe.map(
+          (x) => /* @__PURE__ */ l(
+            rn,
+            {
+              onClose: g,
+              unitId: n,
+              subUnitId: r,
+              item: x,
+              isRoot: x.id === (s == null ? void 0 : s.root.id),
+              editing: c === x.id,
+              resolved: s == null ? void 0 : s.root.resolved,
+              type: y,
+              onEditingChange: (o) => {
+                u(o ? x.id : "");
+              },
+              onReply: (o) => {
+                o && requestAnimationFrame(() => {
+                  var k;
+                  (k = G.current) == null || k.reply(Vt([{
+                    type: "mention",
+                    content: {
+                      id: o.userID,
+                      label: o.name
+                    }
+                  }]));
+                });
+              },
+              onAddComment: m,
+              onDeleteComment: f
+            },
+            x.id
+          )
+        ) }),
+        Q ? /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
+          Le,
+          {
+            ref: G,
+            type: y,
+            unitId: n,
+            subUnitId: r,
+            onSave: async ({ text: x, attachments: o }) => {
+              const k = {
+                text: x,
+                attachments: o,
+                dT: nt(),
+                id: et(),
+                ref: i,
+                personId: b == null ? void 0 : b.userID,
+                parentId: s == null ? void 0 : s.root.id,
+                unitId: n,
+                subUnitId: r,
+                threadId: s == null ? void 0 : s.root.threadId
+              };
+              (m == null ? void 0 : m(k)) !== !1 && (await h.executeCommand(
+                rt.id,
+                {
+                  unitId: n,
+                  subUnitId: r,
+                  comment: k
+                }
+              ), D.current && (D.current.scrollTop = D.current.scrollHeight));
+            },
+            autoFocus: w || !s,
+            onCancel: () => {
+              s || g == null || g();
+            }
+          },
+          `${w}`
+        ) }) : null
+      ]
+    }
+  );
+}, an = "univer-thread-comment-panel", sn = "univer-thread-comment-panel-forms", ln = "univer-thread-comment-panel-empty", dn = "univer-thread-comment-panel-add", cn = "univer-thread-comment-panel-solved", te = {
+  threadCommentPanel: an,
+  threadCommentPanelForms: sn,
+  threadCommentPanelEmpty: ln,
+  threadCommentPanelAdd: dn,
+  threadCommentPanelSolved: cn
+}, bn = (t) => {
+  const {
+    unitId: e,
+    subUnitId$: n,
+    type: r,
+    onAdd: i,
+    getSubUnitName: a,
+    onResolve: d,
+    sortComments: C,
+    onItemLeave: g,
+    onItemEnter: T,
+    disableAdd: O,
+    tempComment: w,
+    onAddComment: P,
+    onDeleteComment: U,
+    showComments: m
+  } = t, [f, $] = V("all"), [y, M] = V("all"), I = N(fe), R = N(pe), c = N(Ue), [u, p] = V(() => c.getUnit(e)), s = N(Y), h = W(s.activeCommentId$), K = W(c.commentUpdate$), _ = N(ie), b = W(n), G = re(!0), oe = "panel", D = W(R.currentUser$), q = ne(() => {
+    var de;
+    const o = f === "all" ? u : (de = u.filter((E) => E.subUnitId === b)) != null ? de : [], k = C != null ? C : (E) => E, le = o.map((E) => {
+      var A;
+      return { ...E.root, children: (A = E.children) != null ? A : [], users: E.relativeUsers };
+    });
+    if (m) {
+      const E = /* @__PURE__ */ new Map();
+      return le.forEach((A) => {
+        E.set(A.id, A);
+      }), [...m, ""].map((A) => E.get(A)).filter(Boolean);
+    } else
+      return k(le);
+  }, [m, f, u, C, b]), L = ne(() => [
+    ...q.filter((o) => !o.resolved),
+    ...q.filter((o) => o.resolved)
+  ], [q]), J = ne(() => y === "resolved" ? L.filter((o) => o.resolved) : y === "unsolved" ? L.filter((o) => !o.resolved) : y === "concern_me" && D != null && D.userID ? L.filter((o) => o == null ? void 0 : o.users.has(D.userID)) : L, [L, D == null ? void 0 : D.userID, y]), Q = w ? [w, ...J] : J, ae = Q.filter((o) => !o.resolved), X = Q.filter((o) => o.resolved), ee = y !== "all" || f !== "all", se = () => {
+    M("all"), $("all");
+  };
+  me(() => {
+    e && p(
+      c.getUnit(e)
+    );
+  }, [e, c, K]), me(() => {
+    var E;
+    if (!h)
+      return;
+    if (!G.current) {
+      G.current = !0;
+      return;
+    }
+    const { unitId: o, subUnitId: k, commentId: le } = h, de = `${oe}-${o}-${k}-${le}`;
+    (E = document.getElementById(de)) == null || E.scrollIntoView({ block: "center" });
+  }, [h]);
+  const x = (o) => /* @__PURE__ */ l(
+    on,
+    {
+      prefix: oe,
+      getSubUnitName: a,
+      id: o.id,
+      unitId: o.unitId,
+      subUnitId: o.subUnitId,
+      refStr: o.ref,
+      type: r,
+      showEdit: (h == null ? void 0 : h.commentId) === o.id,
+      showHighlight: (h == null ? void 0 : h.commentId) === o.id,
+      onClick: () => {
+        G.current = !1, o.resolved ? _.executeCommand(F.id) : _.executeCommand(
+          F.id,
+          {
+            unitId: o.unitId,
+            subUnitId: o.subUnitId,
+            commentId: o.id,
+            temp: !1
+          }
+        );
+      },
+      onMouseEnter: () => T == null ? void 0 : T(o),
+      onMouseLeave: () => g == null ? void 0 : g(o),
+      onAddComment: P,
+      onDeleteComment: U,
+      onResolve: (k) => d == null ? void 0 : d(o.id, k)
+    },
+    o.id
+  );
+  return /* @__PURE__ */ S("div", { className: te.threadCommentPanel, children: [
+    /* @__PURE__ */ S("div", { className: te.threadCommentPanelForms, children: [
+      r === he.UNIVER_SHEET ? /* @__PURE__ */ l(
+        be,
+        {
+          borderless: !0,
+          value: f,
+          onChange: (o) => $(o),
+          options: [
+            {
+              value: "current",
+              label: I.t("threadCommentUI.filter.sheet.current")
+            },
+            {
+              value: "all",
+              label: I.t("threadCommentUI.filter.sheet.all")
+            }
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ l(
+        be,
+        {
+          borderless: !0,
+          value: y,
+          onChange: (o) => M(o),
+          options: [
+            {
+              value: "all",
+              label: I.t("threadCommentUI.filter.status.all")
+            },
+            {
+              value: "resolved",
+              label: I.t("threadCommentUI.filter.status.resolved")
+            },
+            {
+              value: "unsolved",
+              label: I.t("threadCommentUI.filter.status.unsolved")
+            },
+            {
+              value: "concern_me",
+              label: I.t("threadCommentUI.filter.status.concernMe")
+            }
+          ]
+        }
+      )
+    ] }),
+    ae.map(x),
+    X.length ? /* @__PURE__ */ l("div", { className: te.threadCommentPanelSolved, children: "已解决" }) : null,
+    X.map(x),
+    Q.length ? null : /* @__PURE__ */ S("div", { className: te.threadCommentPanelEmpty, children: [
+      ee ? I.t("threadCommentUI.panel.filterEmpty") : I.t("threadCommentUI.panel.empty"),
+      ee ? /* @__PURE__ */ l(
+        ce,
+        {
+          onClick: se,
+          type: "link",
+          children: I.t("threadCommentUI.panel.reset")
+        }
+      ) : /* @__PURE__ */ S(
+        ce,
+        {
+          id: "thread-comment-add",
+          className: te.threadCommentPanelAdd,
+          type: "primary",
+          onClick: i,
+          disabled: O,
+          children: [
+            /* @__PURE__ */ l(He, {}),
+            I.t("threadCommentUI.panel.addComment")
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  F as SetActiveCommentOperation,
+  gt as THREAD_COMMENT_PANEL,
+  bn as ThreadCommentPanel,
+  Y as ThreadCommentPanelService,
+  on as ThreadCommentTree,
+  bt as ToggleSheetCommentPanelOperation,
+  ue as UniverThreadCommentUIPlugin
+};

package/lib/locale/en-US.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "Comment Management",
+      empty: "No comments yet",
+      filterEmpty: "No match result",
+      reset: "Reset Filter",
+      addComment: "Add Comment"
+    },
+    editor: {
+      placeholder: "Reply or add others with @",
+      reply: "Comment",
+      cancel: "Cancel",
+      save: "Save"
+    },
+    item: {
+      edit: "Edit",
+      delete: "Delete This Comment"
+    },
+    filter: {
+      sheet: {
+        all: "All sheet",
+        current: "Current sheet"
+      },
+      status: {
+        all: "All comments",
+        resolved: "Resolved",
+        unsolved: "Not resolved",
+        concernMe: "Concern me"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/fa-IR.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "مدیریت نظرات",
+      empty: "هنوز نظری وجود ندارد",
+      filterEmpty: "نتیجه ای یافت نشد",
+      reset: "بازنشانی فیلتر",
+      addComment: "افزودن نظر"
+    },
+    editor: {
+      placeholder: "پاسخ یا اضافه کردن دیگران با @",
+      reply: "نظر",
+      cancel: "انصراف",
+      save: "ذخیره"
+    },
+    item: {
+      edit: "ویرایش",
+      delete: "حذف این نظر"
+    },
+    filter: {
+      sheet: {
+        all: "همه برگه‌ها",
+        current: "برگه فعلی"
+      },
+      status: {
+        all: "همه نظرات",
+        resolved: "حل شده",
+        unsolved: "حل نشده",
+        concernMe: "موضوع مربوط به من"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/fr-FR.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "Gestion des commentaires",
+      empty: "Pas encore de commentaires",
+      filterEmpty: "Aucun résultat correspondant",
+      reset: "Réinitialiser le filtre",
+      addComment: "Ajouter un commentaire"
+    },
+    editor: {
+      placeholder: "Répondre ou ajouter d'autres avec @",
+      reply: "Commenter",
+      cancel: "Annuler",
+      save: "Enregistrer"
+    },
+    item: {
+      edit: "Modifier",
+      delete: "Supprimer ce commentaire"
+    },
+    filter: {
+      sheet: {
+        all: "Toutes les feuilles",
+        current: "Feuille actuelle"
+      },
+      status: {
+        all: "Tous les commentaires",
+        resolved: "Résolu",
+        unsolved: "Non résolu",
+        concernMe: "Me concerne"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/ru-RU.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "Comment Management",
+      empty: "No comments yet",
+      filterEmpty: "No match result",
+      reset: "Reset Filter",
+      addComment: "Add Comment"
+    },
+    editor: {
+      placeholder: "Reply or add others with @",
+      reply: "Comment",
+      cancel: "Cancel",
+      save: "Save"
+    },
+    item: {
+      edit: "Edit",
+      delete: "Delete This Comment"
+    },
+    filter: {
+      sheet: {
+        all: "All sheet",
+        current: "Current sheet"
+      },
+      status: {
+        all: "All comments",
+        resolved: "Resolved",
+        unsolved: "Not resolved",
+        concernMe: "Concern me"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/vi-VN.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "Quản lý Bình luận",
+      empty: "Chưa có bình luận",
+      filterEmpty: "Không có kết quả phù hợp",
+      reset: "Đặt lại",
+      addComment: "Thêm bình luận"
+    },
+    editor: {
+      placeholder: "Phản hồi",
+      reply: "Phản hồi",
+      cancel: "Hủy",
+      save: "Lưu"
+    },
+    item: {
+      edit: "Chỉnh sửa",
+      delete: "Xóa"
+    },
+    filter: {
+      sheet: {
+        all: "Tất cả bảng",
+        current: "Bảng hiện tại"
+      },
+      status: {
+        all: "Tất cả bình luận",
+        resolved: "Đã giải quyết",
+        unsolved: "Chưa giải quyết",
+        concernMe: "Liên quan đến tôi"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/zh-CN.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "评论管理",
+      empty: "暂无评论",
+      filterEmpty: "没有匹配的结果",
+      reset: "重置",
+      addComment: "添加评论"
+    },
+    editor: {
+      placeholder: "回复",
+      reply: "回复",
+      cancel: "取消",
+      save: "保存"
+    },
+    item: {
+      edit: "编辑",
+      delete: "删除"
+    },
+    filter: {
+      sheet: {
+        all: "所有表格",
+        current: "当前表格"
+      },
+      status: {
+        all: "所有评论",
+        resolved: "已解决",
+        unsolved: "未解决",
+        concernMe: "与我有关"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/zh-TW.js

@@ -0,0 +1,36 @@
+const e = {
+  threadCommentUI: {
+    panel: {
+      title: "評論管理",
+      empty: "暫無評論",
+      filterEmpty: "沒有符合的結果",
+      reset: "重置",
+      addComment: "新增評論"
+    },
+    editor: {
+      placeholder: "回覆",
+      reply: "回覆",
+      cancel: "取消",
+      save: "儲存"
+    },
+    item: {
+      edit: "編輯",
+      delete: "刪除"
+    },
+    filter: {
+      sheet: {
+        all: "所有表格",
+        current: "當前表格"
+      },
+      status: {
+        all: "所有評論",
+        resolved: "已解決",
+        unsolved: "未解決",
+        concernMe: "與我有關"
+      }
+    }
+  }
+};
+export {
+  e as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@univerjs/thread-comment-ui",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "private": false,
   "description": "Univer common thread comment UI plugin",
   "author": "DreamNum <developer@univer.ai>",
@@ -48,16 +48,16 @@
     "lib"
   ],
   "peerDependencies": {
-    "react": ">=16.9.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "rxjs": ">=7.0.0"
   },
   "dependencies": {
-    "@univerjs/icons": "^0.2.28",
-    "@univerjs/core": "0.6.7",
-    "@univerjs/docs-ui": "0.6.7",
-    "@univerjs/thread-comment": "0.6.7",
-    "@univerjs/design": "0.6.7",
-    "@univerjs/ui": "0.6.7"
+    "@univerjs/icons": "^0.2.31",
+    "@univerjs/core": "0.6.8",
+    "@univerjs/design": "0.6.8",
+    "@univerjs/docs-ui": "0.6.8",
+    "@univerjs/thread-comment": "0.6.8",
+    "@univerjs/ui": "0.6.8"
   },
   "devDependencies": {
     "less": "^4.2.2",
@@ -68,7 +68,7 @@
     "typescript": "^5.8.2",
     "vite": "^6.2.3",
     "vitest": "^3.0.9",
-    "@univerjs-infra/shared": "0.6.7"
+    "@univerjs-infra/shared": "0.6.8"
   },
   "scripts": {
     "test": "vitest run",