@univerjs/thread-comment-ui 0.5.4 → 0.5.5-experimental.20250122-3362a4a

package/lib/es/index.js

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