@univerjs/thread-comment-ui 1.0.0-alpha.7 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/cjs/index.js +36 -39
  2. package/lib/es/index.js +37 -40
  3. package/lib/index.js +37 -40
  4. package/lib/umd/index.js +4 -4
  5. package/package.json +10 -10
package/lib/cjs/index.js CHANGED
@@ -2,14 +2,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
2
  let _univerjs_core = require("@univerjs/core");
3
3
  let _univerjs_ui = require("@univerjs/ui");
4
4
  let rxjs = require("rxjs");
5
+ let _univerjs_docs_ui = require("@univerjs/docs-ui");
5
6
  let _univerjs_thread_comment = require("@univerjs/thread-comment");
6
7
  let _univerjs_design = require("@univerjs/design");
7
8
  let _univerjs_icons = require("@univerjs/icons");
8
9
  let react = require("react");
9
- let _univerjs_docs_ui = require("@univerjs/docs-ui");
10
10
  let react_jsx_runtime = require("react/jsx-runtime");
11
11
 
12
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
12
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
13
13
  function _typeof(o) {
14
14
  "@babel/helpers - typeof";
15
15
  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -20,7 +20,7 @@ function _typeof(o) {
20
20
  }
21
21
 
22
22
  //#endregion
23
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
23
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
24
24
  function toPrimitive(t, r) {
25
25
  if ("object" != _typeof(t) || !t) return t;
26
26
  var e = t[Symbol.toPrimitive];
@@ -33,14 +33,14 @@ function toPrimitive(t, r) {
33
33
  }
34
34
 
35
35
  //#endregion
36
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
36
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
37
37
  function toPropertyKey(t) {
38
38
  var i = toPrimitive(t, "string");
39
39
  return "symbol" == _typeof(i) ? i : i + "";
40
40
  }
41
41
 
42
42
  //#endregion
43
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
43
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
44
44
  function _defineProperty(e, r, t) {
45
45
  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
46
46
  value: t,
@@ -51,7 +51,7 @@ function _defineProperty(e, r, t) {
51
51
  }
52
52
 
53
53
  //#endregion
54
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
54
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
55
55
  function __decorateParam(paramIndex, decorator) {
56
56
  return function(target, key) {
57
57
  decorator(target, key, paramIndex);
@@ -59,7 +59,7 @@ function __decorateParam(paramIndex, decorator) {
59
59
  }
60
60
 
61
61
  //#endregion
62
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
62
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
63
63
  function __decorate(decorators, target, key, desc) {
64
64
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
65
65
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -125,7 +125,7 @@ const SetActiveCommentOperation = {
125
125
  //#endregion
126
126
  //#region package.json
127
127
  var name = "@univerjs/thread-comment-ui";
128
- var version = "1.0.0-alpha.7";
128
+ var version = "1.0.0-beta.0";
129
129
 
130
130
  //#endregion
131
131
  //#region src/config/config.ts
@@ -180,7 +180,7 @@ _defineProperty(UniverThreadCommentUIPlugin, "packageName", name);
180
180
  _defineProperty(UniverThreadCommentUIPlugin, "version", version);
181
181
  _defineProperty(UniverThreadCommentUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_UNKNOWN);
182
182
  UniverThreadCommentUIPlugin = __decorate([
183
- (0, _univerjs_core.DependentOn)(_univerjs_thread_comment.UniverThreadCommentPlugin),
183
+ (0, _univerjs_core.DependentOn)(_univerjs_thread_comment.UniverThreadCommentPlugin, _univerjs_docs_ui.UniverDocsUIPlugin),
184
184
  __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
185
185
  __decorateParam(2, _univerjs_core.ICommandService),
186
186
  __decorateParam(3, _univerjs_core.IConfigService)
@@ -233,7 +233,8 @@ const transformDocument2TextNodes = (doc) => {
233
233
  if (!doc) return [];
234
234
  const { paragraphs = [] } = doc;
235
235
  return paragraphs.map((paragraph, index) => {
236
- return transformDocument2TextNodesInParagraph((0, _univerjs_core.getBodySlice)(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex));
236
+ const body = (0, _univerjs_core.getBodySlice)(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex);
237
+ return transformDocument2TextNodesInParagraph(body);
237
238
  });
238
239
  };
239
240
  const transformTextNodes2Document = (nodes) => {
@@ -307,8 +308,8 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
307
308
  const editor = (0, react.useRef)(null);
308
309
  const rootEditorId = type === _univerjs_core.UniverInstanceType.UNIVER_DOC ? _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
309
310
  const [canSubmit, setCanSubmit] = (0, react.useState)(() => {
310
- var _comment$text$dataStr, _comment$text;
311
- return _univerjs_core.BuildTextUtils.transform.getPlainText((_comment$text$dataStr = comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) !== null && _comment$text$dataStr !== void 0 ? _comment$text$dataStr : "");
311
+ var _comment$text;
312
+ return _univerjs_core.BuildTextUtils.transform.getPlainText((comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) ?? "");
312
313
  });
313
314
  const keyboardEventConfig = (0, react.useMemo)(() => ({
314
315
  keyCodes: [{ keyCode: _univerjs_ui.KeyCode.ENTER }],
@@ -367,13 +368,14 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
367
368
  className: "univer-w-full",
368
369
  editorRef: editor,
369
370
  editorId,
371
+ preserveHostFocus: true,
370
372
  autoFocus,
371
373
  keyboardEventConfig,
372
374
  placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
373
375
  initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
374
376
  onChange: (data) => {
375
- var _data$body$dataStream, _data$body;
376
- return setCanSubmit(_univerjs_core.BuildTextUtils.transform.getPlainText((_data$body$dataStream = (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) !== null && _data$body$dataStream !== void 0 ? _data$body$dataStream : ""));
377
+ var _data$body;
378
+ return setCanSubmit(_univerjs_core.BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
377
379
  },
378
380
  onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
379
381
  isSingle: false,
@@ -418,10 +420,10 @@ let ThreadCommentTreeLocation = /* @__PURE__ */ function(ThreadCommentTreeLocati
418
420
  return ThreadCommentTreeLocation;
419
421
  }({});
420
422
  const MOCK_ID = "__mock__";
421
- function formatCommentDateTime(value, locale) {
423
+ function formatCommentDateTime(value, region) {
422
424
  const date = (0, _univerjs_core.dateKit)(value);
423
- const localeTag = _univerjs_core.LOCALE_META[locale].tag;
424
- return date.formatIntl(localeTag, {
425
+ const regionTag = _univerjs_core.LOCALE_META[region].tag;
426
+ return date.formatIntl(regionTag, {
425
427
  year: "numeric",
426
428
  month: "numeric",
427
429
  day: "numeric",
@@ -434,6 +436,7 @@ const ThreadCommentItem = (props) => {
434
436
  const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment, type, threadCommentEditorId } = props;
435
437
  const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
436
438
  const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
439
+ const regionService = (0, _univerjs_ui.useDependency)(_univerjs_core.RegionService);
437
440
  const userManagerService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
438
441
  const user = userManagerService.getUser(item.personId);
439
442
  const currentUser = (0, _univerjs_ui.useObservable)(userManagerService.currentUser$);
@@ -442,8 +445,8 @@ const ThreadCommentItem = (props) => {
442
445
  const [showReply, setShowReply] = (0, react.useState)(false);
443
446
  const uiConfig = (0, _univerjs_ui.useConfigValue)(_univerjs_ui.UI_PLUGIN_CONFIG_KEY);
444
447
  const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
445
- const currentLocale = (0, _univerjs_ui.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
446
- const dateText = formatCommentDateTime(item.dT, currentLocale);
448
+ const currentRegion = (0, _univerjs_ui.useObservable)(regionService.currentRegion$, regionService.getCurrentRegion());
449
+ const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
447
450
  const handleDeleteItem = () => {
448
451
  if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
449
452
  commandService.executeCommand(isRoot ? _univerjs_thread_comment.DeleteCommentTreeCommand.id : _univerjs_thread_comment.DeleteCommentCommand.id, {
@@ -493,7 +496,7 @@ const ThreadCommentItem = (props) => {
493
496
  })
494
497
  }) : null] })]
495
498
  }) : null,
496
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
499
+ dateText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
497
500
  dir: "ltr",
498
501
  className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
499
502
  children: dateText
@@ -538,7 +541,6 @@ const ThreadCommentItem = (props) => {
538
541
  });
539
542
  };
540
543
  const ThreadCommentTree = (props) => {
541
- var _currentUser$userID, _comments$children, _comments$root$subUni;
542
544
  const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
543
545
  const threadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment.ThreadCommentModel);
544
546
  const [isHover, setIsHover] = (0, react.useState)(false);
@@ -560,13 +562,13 @@ const ThreadCommentTree = (props) => {
560
562
  const renderComments = [...comments ? [comments.root] : [{
561
563
  id: MOCK_ID,
562
564
  text: { dataStream: "\n\r" },
563
- personId: (_currentUser$userID = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID !== void 0 ? _currentUser$userID : "",
564
- ref: refStr !== null && refStr !== void 0 ? refStr : "",
565
+ personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
566
+ ref: refStr ?? "",
565
567
  dT: "",
566
568
  unitId,
567
569
  subUnitId,
568
570
  threadId: ""
569
- }], ...(_comments$children = comments === null || comments === void 0 ? void 0 : comments.children) !== null && _comments$children !== void 0 ? _comments$children : []];
571
+ }], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
570
572
  const scroller = (0, react.useRef)(null);
571
573
  const handleResolve = (e) => {
572
574
  e.stopPropagation();
@@ -598,7 +600,7 @@ const ThreadCommentTree = (props) => {
598
600
  (0, react.useEffect)(() => {
599
601
  return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
600
602
  }, []);
601
- const subUnitName = getSubUnitName((_comments$root$subUni = comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) !== null && _comments$root$subUni !== void 0 ? _comments$root$subUni : subUnitId);
603
+ const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
602
604
  const editorVisible = showEdit && !editingId && !resolved;
603
605
  const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
604
606
  const threadCommentEditorId = getThreadCommentEditorId({
@@ -696,18 +698,17 @@ const ThreadCommentTree = (props) => {
696
698
  subUnitId,
697
699
  editorId: threadCommentEditorId,
698
700
  onSave: async ({ text, attachments }) => {
699
- var _currentUser$userID2, _comments$root$thread;
700
701
  const comment = {
701
702
  text,
702
703
  attachments,
703
704
  dT: (0, _univerjs_thread_comment.getDT)(),
704
705
  id: (0, _univerjs_core.generateRandomId)(),
705
706
  ref: refStr,
706
- personId: (_currentUser$userID2 = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID2 !== void 0 ? _currentUser$userID2 : "",
707
+ personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
707
708
  parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
708
709
  unitId,
709
710
  subUnitId,
710
- threadId: (_comments$root$thread = comments === null || comments === void 0 ? void 0 : comments.root.threadId) !== null && _comments$root$thread !== void 0 ? _comments$root$thread : ""
711
+ threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
711
712
  };
712
713
  if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
713
714
  await commandService.executeCommand(_univerjs_thread_comment.AddCommentCommand.id, {
@@ -744,17 +745,13 @@ const ThreadCommentPanel = (props) => {
744
745
  const location = "PANEL";
745
746
  const currentUser = (0, _univerjs_ui.useObservable)(userService.currentUser$);
746
747
  const comments = (0, react.useMemo)(() => {
747
- var _unitComments$filter;
748
- const allComments = unit === "all" ? unitComments : (_unitComments$filter = unitComments.filter((i) => i.subUnitId === subUnitId)) !== null && _unitComments$filter !== void 0 ? _unitComments$filter : [];
749
- const sort = sortComments !== null && sortComments !== void 0 ? sortComments : ((a) => a);
750
- const res = allComments.map((i) => {
751
- var _i$children;
752
- return {
753
- ...i.root,
754
- children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
755
- users: i.relativeUsers
756
- };
757
- });
748
+ const allComments = unit === "all" ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId) ?? [];
749
+ const sort = sortComments ?? ((a) => a);
750
+ const res = allComments.map((i) => ({
751
+ ...i.root,
752
+ children: i.children ?? [],
753
+ users: i.relativeUsers
754
+ }));
758
755
  if (showComments) {
759
756
  const map = /* @__PURE__ */ new Map();
760
757
  res.forEach((comment) => {
package/lib/es/index.js CHANGED
@@ -1,14 +1,14 @@
1
- import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
1
+ import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, RegionService, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
2
2
  import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useObservable } from "@univerjs/ui";
3
3
  import { BehaviorSubject, debounceTime, filter, map, of, startWith } from "rxjs";
4
+ import { BreakLineCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
4
5
  import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
5
6
  import { Button, Dropdown, Select, Tooltip, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
6
7
  import { DeleteIcon, IncreaseIcon, MoreHorizontalIcon, ReplyToCommentIcon, SuccessIcon, SuccessOutlineIcon } from "@univerjs/icons";
7
8
  import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
8
- import { BreakLineCommand, IEditorService, RichTextEditor } from "@univerjs/docs-ui";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
11
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
12
12
  function _typeof(o) {
13
13
  "@babel/helpers - typeof";
14
14
  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -19,7 +19,7 @@ function _typeof(o) {
19
19
  }
20
20
 
21
21
  //#endregion
22
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
22
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
23
23
  function toPrimitive(t, r) {
24
24
  if ("object" != _typeof(t) || !t) return t;
25
25
  var e = t[Symbol.toPrimitive];
@@ -32,14 +32,14 @@ function toPrimitive(t, r) {
32
32
  }
33
33
 
34
34
  //#endregion
35
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
35
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
36
36
  function toPropertyKey(t) {
37
37
  var i = toPrimitive(t, "string");
38
38
  return "symbol" == _typeof(i) ? i : i + "";
39
39
  }
40
40
 
41
41
  //#endregion
42
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
42
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
43
43
  function _defineProperty(e, r, t) {
44
44
  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
45
45
  value: t,
@@ -50,7 +50,7 @@ function _defineProperty(e, r, t) {
50
50
  }
51
51
 
52
52
  //#endregion
53
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
53
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
54
54
  function __decorateParam(paramIndex, decorator) {
55
55
  return function(target, key) {
56
56
  decorator(target, key, paramIndex);
@@ -58,7 +58,7 @@ function __decorateParam(paramIndex, decorator) {
58
58
  }
59
59
 
60
60
  //#endregion
61
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
61
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
62
62
  function __decorate(decorators, target, key, desc) {
63
63
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
64
64
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -124,7 +124,7 @@ const SetActiveCommentOperation = {
124
124
  //#endregion
125
125
  //#region package.json
126
126
  var name = "@univerjs/thread-comment-ui";
127
- var version = "1.0.0-alpha.7";
127
+ var version = "1.0.0-beta.0";
128
128
 
129
129
  //#endregion
130
130
  //#region src/config/config.ts
@@ -179,7 +179,7 @@ _defineProperty(UniverThreadCommentUIPlugin, "packageName", name);
179
179
  _defineProperty(UniverThreadCommentUIPlugin, "version", version);
180
180
  _defineProperty(UniverThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
181
181
  UniverThreadCommentUIPlugin = __decorate([
182
- DependentOn(UniverThreadCommentPlugin),
182
+ DependentOn(UniverThreadCommentPlugin, UniverDocsUIPlugin),
183
183
  __decorateParam(1, Inject(Injector)),
184
184
  __decorateParam(2, ICommandService),
185
185
  __decorateParam(3, IConfigService)
@@ -232,7 +232,8 @@ const transformDocument2TextNodes = (doc) => {
232
232
  if (!doc) return [];
233
233
  const { paragraphs = [] } = doc;
234
234
  return paragraphs.map((paragraph, index) => {
235
- return transformDocument2TextNodesInParagraph(getBodySlice(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex));
235
+ const body = getBodySlice(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex);
236
+ return transformDocument2TextNodesInParagraph(body);
236
237
  });
237
238
  };
238
239
  const transformTextNodes2Document = (nodes) => {
@@ -306,8 +307,8 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
306
307
  const editor = useRef(null);
307
308
  const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
308
309
  const [canSubmit, setCanSubmit] = useState(() => {
309
- var _comment$text$dataStr, _comment$text;
310
- return BuildTextUtils.transform.getPlainText((_comment$text$dataStr = comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) !== null && _comment$text$dataStr !== void 0 ? _comment$text$dataStr : "");
310
+ var _comment$text;
311
+ return BuildTextUtils.transform.getPlainText((comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) ?? "");
311
312
  });
312
313
  const keyboardEventConfig = useMemo(() => ({
313
314
  keyCodes: [{ keyCode: KeyCode.ENTER }],
@@ -366,13 +367,14 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
366
367
  className: "univer-w-full",
367
368
  editorRef: editor,
368
369
  editorId,
370
+ preserveHostFocus: true,
369
371
  autoFocus,
370
372
  keyboardEventConfig,
371
373
  placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
372
374
  initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
373
375
  onChange: (data) => {
374
- var _data$body$dataStream, _data$body;
375
- return setCanSubmit(BuildTextUtils.transform.getPlainText((_data$body$dataStream = (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) !== null && _data$body$dataStream !== void 0 ? _data$body$dataStream : ""));
376
+ var _data$body;
377
+ return setCanSubmit(BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
376
378
  },
377
379
  onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
378
380
  isSingle: false,
@@ -417,10 +419,10 @@ let ThreadCommentTreeLocation = /* @__PURE__ */ function(ThreadCommentTreeLocati
417
419
  return ThreadCommentTreeLocation;
418
420
  }({});
419
421
  const MOCK_ID = "__mock__";
420
- function formatCommentDateTime(value, locale) {
422
+ function formatCommentDateTime(value, region) {
421
423
  const date = dateKit(value);
422
- const localeTag = LOCALE_META[locale].tag;
423
- return date.formatIntl(localeTag, {
424
+ const regionTag = LOCALE_META[region].tag;
425
+ return date.formatIntl(regionTag, {
424
426
  year: "numeric",
425
427
  month: "numeric",
426
428
  day: "numeric",
@@ -433,6 +435,7 @@ const ThreadCommentItem = (props) => {
433
435
  const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment, type, threadCommentEditorId } = props;
434
436
  const commandService = useDependency(ICommandService);
435
437
  const localeService = useDependency(LocaleService);
438
+ const regionService = useDependency(RegionService);
436
439
  const userManagerService = useDependency(UserManagerService);
437
440
  const user = userManagerService.getUser(item.personId);
438
441
  const currentUser = useObservable(userManagerService.currentUser$);
@@ -441,8 +444,8 @@ const ThreadCommentItem = (props) => {
441
444
  const [showReply, setShowReply] = useState(false);
442
445
  const uiConfig = useConfigValue(UI_PLUGIN_CONFIG_KEY);
443
446
  const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
444
- const currentLocale = useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
445
- const dateText = formatCommentDateTime(item.dT, currentLocale);
447
+ const currentRegion = useObservable(regionService.currentRegion$, regionService.getCurrentRegion());
448
+ const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
446
449
  const handleDeleteItem = () => {
447
450
  if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
448
451
  commandService.executeCommand(isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id, {
@@ -492,7 +495,7 @@ const ThreadCommentItem = (props) => {
492
495
  })
493
496
  }) : null] })]
494
497
  }) : null,
495
- /* @__PURE__ */ jsx("time", {
498
+ dateText && /* @__PURE__ */ jsx("time", {
496
499
  dir: "ltr",
497
500
  className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
498
501
  children: dateText
@@ -537,7 +540,6 @@ const ThreadCommentItem = (props) => {
537
540
  });
538
541
  };
539
542
  const ThreadCommentTree = (props) => {
540
- var _currentUser$userID, _comments$children, _comments$root$subUni;
541
543
  const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
542
544
  const threadCommentModel = useDependency(ThreadCommentModel);
543
545
  const [isHover, setIsHover] = useState(false);
@@ -559,13 +561,13 @@ const ThreadCommentTree = (props) => {
559
561
  const renderComments = [...comments ? [comments.root] : [{
560
562
  id: MOCK_ID,
561
563
  text: { dataStream: "\n\r" },
562
- personId: (_currentUser$userID = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID !== void 0 ? _currentUser$userID : "",
563
- ref: refStr !== null && refStr !== void 0 ? refStr : "",
564
+ personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
565
+ ref: refStr ?? "",
564
566
  dT: "",
565
567
  unitId,
566
568
  subUnitId,
567
569
  threadId: ""
568
- }], ...(_comments$children = comments === null || comments === void 0 ? void 0 : comments.children) !== null && _comments$children !== void 0 ? _comments$children : []];
570
+ }], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
569
571
  const scroller = useRef(null);
570
572
  const handleResolve = (e) => {
571
573
  e.stopPropagation();
@@ -597,7 +599,7 @@ const ThreadCommentTree = (props) => {
597
599
  useEffect(() => {
598
600
  return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
599
601
  }, []);
600
- const subUnitName = getSubUnitName((_comments$root$subUni = comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) !== null && _comments$root$subUni !== void 0 ? _comments$root$subUni : subUnitId);
602
+ const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
601
603
  const editorVisible = showEdit && !editingId && !resolved;
602
604
  const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
603
605
  const threadCommentEditorId = getThreadCommentEditorId({
@@ -695,18 +697,17 @@ const ThreadCommentTree = (props) => {
695
697
  subUnitId,
696
698
  editorId: threadCommentEditorId,
697
699
  onSave: async ({ text, attachments }) => {
698
- var _currentUser$userID2, _comments$root$thread;
699
700
  const comment = {
700
701
  text,
701
702
  attachments,
702
703
  dT: getDT(),
703
704
  id: generateRandomId(),
704
705
  ref: refStr,
705
- personId: (_currentUser$userID2 = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID2 !== void 0 ? _currentUser$userID2 : "",
706
+ personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
706
707
  parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
707
708
  unitId,
708
709
  subUnitId,
709
- threadId: (_comments$root$thread = comments === null || comments === void 0 ? void 0 : comments.root.threadId) !== null && _comments$root$thread !== void 0 ? _comments$root$thread : ""
710
+ threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
710
711
  };
711
712
  if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
712
713
  await commandService.executeCommand(AddCommentCommand.id, {
@@ -743,17 +744,13 @@ const ThreadCommentPanel = (props) => {
743
744
  const location = "PANEL";
744
745
  const currentUser = useObservable(userService.currentUser$);
745
746
  const comments = useMemo(() => {
746
- var _unitComments$filter;
747
- const allComments = unit === "all" ? unitComments : (_unitComments$filter = unitComments.filter((i) => i.subUnitId === subUnitId)) !== null && _unitComments$filter !== void 0 ? _unitComments$filter : [];
748
- const sort = sortComments !== null && sortComments !== void 0 ? sortComments : ((a) => a);
749
- const res = allComments.map((i) => {
750
- var _i$children;
751
- return {
752
- ...i.root,
753
- children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
754
- users: i.relativeUsers
755
- };
756
- });
747
+ const allComments = unit === "all" ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId) ?? [];
748
+ const sort = sortComments ?? ((a) => a);
749
+ const res = allComments.map((i) => ({
750
+ ...i.root,
751
+ children: i.children ?? [],
752
+ users: i.relativeUsers
753
+ }));
757
754
  if (showComments) {
758
755
  const map = /* @__PURE__ */ new Map();
759
756
  res.forEach((comment) => {
package/lib/index.js CHANGED
@@ -1,14 +1,14 @@
1
- import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
1
+ import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, RegionService, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
2
2
  import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useObservable } from "@univerjs/ui";
3
3
  import { BehaviorSubject, debounceTime, filter, map, of, startWith } from "rxjs";
4
+ import { BreakLineCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
4
5
  import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
5
6
  import { Button, Dropdown, Select, Tooltip, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
6
7
  import { DeleteIcon, IncreaseIcon, MoreHorizontalIcon, ReplyToCommentIcon, SuccessIcon, SuccessOutlineIcon } from "@univerjs/icons";
7
8
  import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
8
- import { BreakLineCommand, IEditorService, RichTextEditor } from "@univerjs/docs-ui";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
11
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
12
12
  function _typeof(o) {
13
13
  "@babel/helpers - typeof";
14
14
  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -19,7 +19,7 @@ function _typeof(o) {
19
19
  }
20
20
 
21
21
  //#endregion
22
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
22
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
23
23
  function toPrimitive(t, r) {
24
24
  if ("object" != _typeof(t) || !t) return t;
25
25
  var e = t[Symbol.toPrimitive];
@@ -32,14 +32,14 @@ function toPrimitive(t, r) {
32
32
  }
33
33
 
34
34
  //#endregion
35
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
35
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
36
36
  function toPropertyKey(t) {
37
37
  var i = toPrimitive(t, "string");
38
38
  return "symbol" == _typeof(i) ? i : i + "";
39
39
  }
40
40
 
41
41
  //#endregion
42
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
42
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
43
43
  function _defineProperty(e, r, t) {
44
44
  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
45
45
  value: t,
@@ -50,7 +50,7 @@ function _defineProperty(e, r, t) {
50
50
  }
51
51
 
52
52
  //#endregion
53
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
53
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
54
54
  function __decorateParam(paramIndex, decorator) {
55
55
  return function(target, key) {
56
56
  decorator(target, key, paramIndex);
@@ -58,7 +58,7 @@ function __decorateParam(paramIndex, decorator) {
58
58
  }
59
59
 
60
60
  //#endregion
61
- //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
61
+ //#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
62
62
  function __decorate(decorators, target, key, desc) {
63
63
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
64
64
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -124,7 +124,7 @@ const SetActiveCommentOperation = {
124
124
  //#endregion
125
125
  //#region package.json
126
126
  var name = "@univerjs/thread-comment-ui";
127
- var version = "1.0.0-alpha.7";
127
+ var version = "1.0.0-beta.0";
128
128
 
129
129
  //#endregion
130
130
  //#region src/config/config.ts
@@ -179,7 +179,7 @@ _defineProperty(UniverThreadCommentUIPlugin, "packageName", name);
179
179
  _defineProperty(UniverThreadCommentUIPlugin, "version", version);
180
180
  _defineProperty(UniverThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
181
181
  UniverThreadCommentUIPlugin = __decorate([
182
- DependentOn(UniverThreadCommentPlugin),
182
+ DependentOn(UniverThreadCommentPlugin, UniverDocsUIPlugin),
183
183
  __decorateParam(1, Inject(Injector)),
184
184
  __decorateParam(2, ICommandService),
185
185
  __decorateParam(3, IConfigService)
@@ -232,7 +232,8 @@ const transformDocument2TextNodes = (doc) => {
232
232
  if (!doc) return [];
233
233
  const { paragraphs = [] } = doc;
234
234
  return paragraphs.map((paragraph, index) => {
235
- return transformDocument2TextNodesInParagraph(getBodySlice(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex));
235
+ const body = getBodySlice(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex);
236
+ return transformDocument2TextNodesInParagraph(body);
236
237
  });
237
238
  };
238
239
  const transformTextNodes2Document = (nodes) => {
@@ -306,8 +307,8 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
306
307
  const editor = useRef(null);
307
308
  const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
308
309
  const [canSubmit, setCanSubmit] = useState(() => {
309
- var _comment$text$dataStr, _comment$text;
310
- return BuildTextUtils.transform.getPlainText((_comment$text$dataStr = comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) !== null && _comment$text$dataStr !== void 0 ? _comment$text$dataStr : "");
310
+ var _comment$text;
311
+ return BuildTextUtils.transform.getPlainText((comment === null || comment === void 0 || (_comment$text = comment.text) === null || _comment$text === void 0 ? void 0 : _comment$text.dataStream) ?? "");
311
312
  });
312
313
  const keyboardEventConfig = useMemo(() => ({
313
314
  keyCodes: [{ keyCode: KeyCode.ENTER }],
@@ -366,13 +367,14 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
366
367
  className: "univer-w-full",
367
368
  editorRef: editor,
368
369
  editorId,
370
+ preserveHostFocus: true,
369
371
  autoFocus,
370
372
  keyboardEventConfig,
371
373
  placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
372
374
  initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
373
375
  onChange: (data) => {
374
- var _data$body$dataStream, _data$body;
375
- return setCanSubmit(BuildTextUtils.transform.getPlainText((_data$body$dataStream = (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) !== null && _data$body$dataStream !== void 0 ? _data$body$dataStream : ""));
376
+ var _data$body;
377
+ return setCanSubmit(BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
376
378
  },
377
379
  onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
378
380
  isSingle: false,
@@ -417,10 +419,10 @@ let ThreadCommentTreeLocation = /* @__PURE__ */ function(ThreadCommentTreeLocati
417
419
  return ThreadCommentTreeLocation;
418
420
  }({});
419
421
  const MOCK_ID = "__mock__";
420
- function formatCommentDateTime(value, locale) {
422
+ function formatCommentDateTime(value, region) {
421
423
  const date = dateKit(value);
422
- const localeTag = LOCALE_META[locale].tag;
423
- return date.formatIntl(localeTag, {
424
+ const regionTag = LOCALE_META[region].tag;
425
+ return date.formatIntl(regionTag, {
424
426
  year: "numeric",
425
427
  month: "numeric",
426
428
  day: "numeric",
@@ -433,6 +435,7 @@ const ThreadCommentItem = (props) => {
433
435
  const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment, type, threadCommentEditorId } = props;
434
436
  const commandService = useDependency(ICommandService);
435
437
  const localeService = useDependency(LocaleService);
438
+ const regionService = useDependency(RegionService);
436
439
  const userManagerService = useDependency(UserManagerService);
437
440
  const user = userManagerService.getUser(item.personId);
438
441
  const currentUser = useObservable(userManagerService.currentUser$);
@@ -441,8 +444,8 @@ const ThreadCommentItem = (props) => {
441
444
  const [showReply, setShowReply] = useState(false);
442
445
  const uiConfig = useConfigValue(UI_PLUGIN_CONFIG_KEY);
443
446
  const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
444
- const currentLocale = useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
445
- const dateText = formatCommentDateTime(item.dT, currentLocale);
447
+ const currentRegion = useObservable(regionService.currentRegion$, regionService.getCurrentRegion());
448
+ const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
446
449
  const handleDeleteItem = () => {
447
450
  if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
448
451
  commandService.executeCommand(isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id, {
@@ -492,7 +495,7 @@ const ThreadCommentItem = (props) => {
492
495
  })
493
496
  }) : null] })]
494
497
  }) : null,
495
- /* @__PURE__ */ jsx("time", {
498
+ dateText && /* @__PURE__ */ jsx("time", {
496
499
  dir: "ltr",
497
500
  className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
498
501
  children: dateText
@@ -537,7 +540,6 @@ const ThreadCommentItem = (props) => {
537
540
  });
538
541
  };
539
542
  const ThreadCommentTree = (props) => {
540
- var _currentUser$userID, _comments$children, _comments$root$subUni;
541
543
  const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
542
544
  const threadCommentModel = useDependency(ThreadCommentModel);
543
545
  const [isHover, setIsHover] = useState(false);
@@ -559,13 +561,13 @@ const ThreadCommentTree = (props) => {
559
561
  const renderComments = [...comments ? [comments.root] : [{
560
562
  id: MOCK_ID,
561
563
  text: { dataStream: "\n\r" },
562
- personId: (_currentUser$userID = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID !== void 0 ? _currentUser$userID : "",
563
- ref: refStr !== null && refStr !== void 0 ? refStr : "",
564
+ personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
565
+ ref: refStr ?? "",
564
566
  dT: "",
565
567
  unitId,
566
568
  subUnitId,
567
569
  threadId: ""
568
- }], ...(_comments$children = comments === null || comments === void 0 ? void 0 : comments.children) !== null && _comments$children !== void 0 ? _comments$children : []];
570
+ }], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
569
571
  const scroller = useRef(null);
570
572
  const handleResolve = (e) => {
571
573
  e.stopPropagation();
@@ -597,7 +599,7 @@ const ThreadCommentTree = (props) => {
597
599
  useEffect(() => {
598
600
  return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
599
601
  }, []);
600
- const subUnitName = getSubUnitName((_comments$root$subUni = comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) !== null && _comments$root$subUni !== void 0 ? _comments$root$subUni : subUnitId);
602
+ const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
601
603
  const editorVisible = showEdit && !editingId && !resolved;
602
604
  const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
603
605
  const threadCommentEditorId = getThreadCommentEditorId({
@@ -695,18 +697,17 @@ const ThreadCommentTree = (props) => {
695
697
  subUnitId,
696
698
  editorId: threadCommentEditorId,
697
699
  onSave: async ({ text, attachments }) => {
698
- var _currentUser$userID2, _comments$root$thread;
699
700
  const comment = {
700
701
  text,
701
702
  attachments,
702
703
  dT: getDT(),
703
704
  id: generateRandomId(),
704
705
  ref: refStr,
705
- personId: (_currentUser$userID2 = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID2 !== void 0 ? _currentUser$userID2 : "",
706
+ personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
706
707
  parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
707
708
  unitId,
708
709
  subUnitId,
709
- threadId: (_comments$root$thread = comments === null || comments === void 0 ? void 0 : comments.root.threadId) !== null && _comments$root$thread !== void 0 ? _comments$root$thread : ""
710
+ threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
710
711
  };
711
712
  if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
712
713
  await commandService.executeCommand(AddCommentCommand.id, {
@@ -743,17 +744,13 @@ const ThreadCommentPanel = (props) => {
743
744
  const location = "PANEL";
744
745
  const currentUser = useObservable(userService.currentUser$);
745
746
  const comments = useMemo(() => {
746
- var _unitComments$filter;
747
- const allComments = unit === "all" ? unitComments : (_unitComments$filter = unitComments.filter((i) => i.subUnitId === subUnitId)) !== null && _unitComments$filter !== void 0 ? _unitComments$filter : [];
748
- const sort = sortComments !== null && sortComments !== void 0 ? sortComments : ((a) => a);
749
- const res = allComments.map((i) => {
750
- var _i$children;
751
- return {
752
- ...i.root,
753
- children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
754
- users: i.relativeUsers
755
- };
756
- });
747
+ const allComments = unit === "all" ? unitComments : unitComments.filter((i) => i.subUnitId === subUnitId) ?? [];
748
+ const sort = sortComments ?? ((a) => a);
749
+ const res = allComments.map((i) => ({
750
+ ...i.root,
751
+ children: i.children ?? [],
752
+ users: i.relativeUsers
753
+ }));
757
754
  if (showComments) {
758
755
  const map = /* @__PURE__ */ new Map();
759
756
  res.forEach((comment) => {
package/lib/umd/index.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@univerjs/core"),require("@univerjs/ui"),require("rxjs"),require("@univerjs/thread-comment"),require("@univerjs/design"),require("react"),require("@univerjs/docs-ui"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`@univerjs/core`,`@univerjs/ui`,`rxjs`,`@univerjs/thread-comment`,`@univerjs/design`,`react`,`@univerjs/docs-ui`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UniverThreadCommentUi={},e.UniverCore,e.UniverUi,e.rxjs,e.UniverThreadComment,e.UniverDesign,e.React,e.UniverDocsUi,e.React))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function l(e){"@babel/helpers - typeof";return l=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let h=class extends t.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new r.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new r.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(this,`activeCommentId$`,this._activeCommentId$.asObservable()),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$(t.UniverInstanceType.UNIVER_SHEET).pipe((0,r.filter)(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)}};h=m([p(0,(0,t.Inject)(n.ISidebarService)),p(1,t.IUniverInstanceService)],h);let g={id:`thread-comment-ui.operation.set-active-comment`,type:t.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`1.0.0-alpha.7`;let y={},b=class extends t.Plugin{constructor(e=y,n,r,i){super(),this._config=e,this._injector=n,this._commandService=r,this._configService=i;let{menu:a,...o}=(0,t.merge)({},y,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(`thread-comment-ui.config`,o)}onStarting(){var e;(0,t.mergeOverrideWithDependencies)([[h]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[g].forEach(e=>{this._commandService.registerCommand(e)})}};f(b,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),f(b,`packageName`,_),f(b,`version`,v),f(b,`type`,t.UniverInstanceType.UNIVER_UNKNOWN),b=m([(0,t.DependentOn)(i.UniverThreadCommentPlugin),p(1,(0,t.Inject)(t.Injector)),p(2,t.ICommandService),p(3,t.IConfigService)],b);function x({ref:e,...t}){let{icon:n,id:r,className:i,extend:a,...s}=t,c=`univerjs-icon univerjs-icon-${r} ${i||``}`.trim(),l=(0,o.useRef)(`_${T()}`);return S(n,`${r}`,{defIds:n.defIds,idSuffix:l.current},{ref:e,className:c,...s},a)}function S(e,t,n,r,i){return(0,o.createElement)(e.tag,{key:t,...C(e,n,i),...r},(w(e,n).children||[]).map((r,a)=>S(r,`${t}-${e.tag}-${a}`,n,void 0,i)))}function C(e,t,n){let r={...e.attrs};n!=null&&n.colorChannel1&&r.fill===`colorChannel1`&&(r.fill=n.colorChannel1),n!=null&&n.colorChannel1&&r.stroke===`colorChannel1`&&(r.stroke=n.colorChannel1),e.tag===`mask`&&r.id&&(r.id+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{e===`mask`&&typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))});let{defIds:i}=t;return!i||i.length===0?r:(e.tag===`use`&&r[`xlink:href`]&&(r[`xlink:href`]+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))}),r)}function w(e,t){var n;let{defIds:r}=t;return!r||r.length===0?e:e.tag===`defs`&&(n=e.children)!=null&&n.length?{...e,children:e.children.map(e=>typeof e.attrs.id==`string`&&r&&r.includes(e.attrs.id)?{...e,attrs:{...e.attrs,id:e.attrs.id+t.idSuffix}}:e)}:e}function T(){return Math.random().toString(36).substring(2,8)}x.displayName=`UniverIcon`;let E={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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 0.866699 5.9313 0.866699H10.069C10.4004 0.866699 10.669 1.13533 10.669 1.4667C10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M1.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.64443C14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928L9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171C10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778L9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539C9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263L6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539C5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778L6.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`}}]},D=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(x,Object.assign({},e,{id:`delete-icon`,ref:t,icon:E}))});D.displayName=`DeleteIcon`;let O={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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`}}]},k=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(x,Object.assign({},e,{id:`increase-icon`,ref:t,icon:O}))});k.displayName=`IncreaseIcon`;let A={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9Z`}}]},j=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(x,Object.assign({},e,{id:`more-horizontal-icon`,ref:t,icon:A}))});j.displayName=`MoreHorizontalIcon`;let M={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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.76813`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M8.91626 6.1311H9.27424`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M3.90454 6.1311H4.26252`,strokeLinecap:`round`,strokeWidth:1.2}}]},N=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(x,Object.assign({},e,{id:`reply-to-comment-icon`,ref:t,icon:M}))});N.displayName=`ReplyToCommentIcon`;let P={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.7245 6.42417C11.9588 6.18985 11.9588 5.80995 11.7245 5.57564C11.4901 5.34132 11.1102 5.34132 10.8759 5.57564L7.3002 9.15137L5.72446 7.57564C5.49014 7.34132 5.11025 7.34132 4.87593 7.57564C4.64162 7.80995 4.64162 8.18985 4.87593 8.42417L6.87593 10.4242C7.11025 10.6585 7.49014 10.6585 7.72446 10.4242L11.7245 6.42417Z`,fillRule:`evenodd`,clipRule:`evenodd`}}]},F=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(x,Object.assign({},e,{id:`success-icon`,ref:t,icon:P}))});F.displayName=`SuccessIcon`;let I={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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}}]},L=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(x,Object.assign({},e,{id:`success-outline-icon`,ref:t,icon:I}))});L.displayName=`SuccessOutlineIcon`;function R(e,t,n){return e.id?e.id:[`thread-comment-panel-temp`,n,e.unitId,e.subUnitId,e.threadId,e.ref,e.dT,t].join(`-`)}let z=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
2
- `)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},B=e=>{if(!e)return[];let{paragraphs:n=[]}=e;return n.map((r,i)=>z((0,t.getBodySlice)(e,i===0?0:n[i-1].startIndex+1,r.startIndex)))},V=e=>{let n=``,r=[];return e.forEach(e=>{switch(e.type){case`text`:n+=e.content;break;case`mention`:{let i=n.length;n+=e.content.label;let a=n.length-1;r.push({rangeId:e.content.id,rangeType:t.CustomRangeType.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),n+=`\r
3
- `,{textRuns:[],paragraphs:[{startIndex:n.length-2,paragraphId:(0,t.createParagraphId)(new Set),paragraphStyle:{}}],sectionBreaks:[{sectionId:(0,t.createSectionId)(new Set),startIndex:n.length-1}],dataStream:n,customRanges:r}};function H(e,t,n){e.focus(t),n==null||n.focus()}function U(e){let{location:n,unitId:r,subUnitId:i,commentId:a,fallbackId:o}=e;return`${t.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${n}_${r}_${i}_${a||o}`}function W(e){return{id:`d`,body:e,documentStyle:{}}}let G=(0,o.forwardRef)((e,r)=>{let{comment:i,onSave:l,id:u,onCancel:d,autoFocus:f,unitId:p,type:m,editorId:h}=e,_=(0,n.useDependency)(t.ICommandService),v=(0,n.useDependency)(t.LocaleService),[y,b]=(0,o.useState)(!1),x=(0,n.useDependency)(s.IEditorService),S=(0,o.useRef)(null),C=m===t.UniverInstanceType.UNIVER_DOC?t.DOCS_NORMAL_EDITOR_UNIT_ID_KEY:p,[w,T]=(0,o.useState)(()=>{var e,n;return t.BuildTextUtils.transform.getPlainText((e=i==null||(n=i.text)==null?void 0:n.dataStream)==null?``:e)}),E=(0,o.useMemo)(()=>({keyCodes:[{keyCode:n.KeyCode.ENTER}],handler:e=>{e===n.KeyCode.ENTER&&_.executeCommand(s.BreakLineCommand.id)}}),[_]);return(0,o.useImperativeHandle)(r,()=>({reply(e){var n;if(!S.current)return;H(x,h,S.current);let r=W(e);(n=S.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}]),T(t.BuildTextUtils.transform.getPlainText(r.body.dataStream)),b(!0)}})),(0,o.useEffect)(()=>{if(!f)return;let e=setTimeout(()=>{H(x,h,S.current)});return()=>clearTimeout(e)},[f,h,x]),(0,c.jsxs)(`div`,{onClick:e=>e.preventDefault(),children:[(0,c.jsx)(`div`,{onMouseDown:()=>{H(x,h,S.current),b(!0)},children:(0,c.jsx)(s.RichTextEditor,{className:`univer-w-full`,editorRef:S,editorId:h,autoFocus:f,keyboardEventConfig:E,placeholder:v.t(`thread-comment-ui.editor.placeholder`),initialValue:(i==null?void 0:i.text)&&W(i.text),onChange:e=>{var n,r;return T(t.BuildTextUtils.transform.getPlainText((n=(r=e.body)==null?void 0:r.dataStream)==null?``:n))},onFocusChange:e=>e&&b(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{x.focus(C)},30)}})}),y?(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[(0,c.jsx)(a.Button,{type:`button`,onClick:()=>{let e=S.current;e==null||e.blur(),e==null||e.replaceText(``,!1),e==null||e.setSelectionRanges([],!1),T(``),d==null||d(),b(!1),_.executeCommand(g.id)},children:v.t(`thread-comment-ui.editor.cancel`)}),(0,c.jsx)(a.Button,{type:`button`,variant:`primary`,disabled:!w,onClick:()=>{let e=S.current;if(e){let n=t.Tools.deepClone(e.getDocumentData().body);e.blur(),e.replaceText(``,!1),e.setSelectionRanges([],!1),T(``),b(!1),l==null||l({...i,text:n})}},children:v.t(u?`thread-comment-ui.editor.save`:`thread-comment-ui.editor.reply`)})]}):null]})}),K=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({}),q=`__mock__`;function J(e,n){let r=(0,t.dateKit)(e),i=t.LOCALE_META[n].tag;return r.formatIntl(i,{year:`numeric`,month:`numeric`,day:`numeric`,hour:`2-digit`,minute:`2-digit`,hour12:!1})}let Y=e=>{let{item:r,unitId:s,subUnitId:l,editing:u,onEditingChange:d,onReply:f,resolved:p,isRoot:m,onClose:h,onDeleteComment:g,type:_,threadCommentEditorId:v}=e,y=(0,n.useDependency)(t.ICommandService),b=(0,n.useDependency)(t.LocaleService),x=(0,n.useDependency)(t.UserManagerService),S=x.getUser(r.personId),C=(0,n.useObservable)(x.currentUser$),w=(C==null?void 0:C.userID)===r.personId,T=r.id===q,[E,D]=(0,o.useState)(!1),O=(0,n.useConfigValue)(n.UI_PLUGIN_CONFIG_KEY),k=O==null?void 0:O.avatarFallback,A=(0,n.useObservable)(b.currentLocale$,b.getCurrentLocale()),M=J(r.dT,A);return(0,c.jsxs)(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px] rtl:univer-pl-0 rtl:univer-pr-[30px]`,onMouseLeave:()=>D(!1),onMouseEnter:()=>D(!0),children:[(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat rtl:univer-left-auto rtl:univer-right-0`,style:{backgroundImage:`url(${(S==null?void 0:S.avatar)||k})`}}),S?(0,c.jsxs)(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[(0,c.jsx)(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(S==null?void 0:S.name)||` `}),(0,c.jsxs)(`div`,{children:[T||p?null:E&&S?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,onClick:()=>f(S),children:(0,c.jsx)(N,{})}):null,w&&!T&&!p?(0,c.jsx)(a.Dropdown,{overlay:(0,c.jsx)(`div`,{className:`univer-rounded-lg`,children:(0,c.jsxs)(`ul`,{className:`univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors`,children:[(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>d==null?void 0:d(!0),children:b.t(`thread-comment-ui.item.edit`)})}),(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(g==null?void 0:g(r))!==!1&&(y.executeCommand(m?i.DeleteCommentTreeCommand.id:i.DeleteCommentCommand.id,{unitId:s,subUnitId:l,commentId:r.id}),m&&(h==null||h()))},children:b.t(`thread-comment-ui.item.delete`)})})]})}),children:(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,children:(0,c.jsx)(j,{})})}):null]})]}):null,(0,c.jsx)(`time`,{dir:`ltr`,className:`univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:M}),u?(0,c.jsx)(G,{type:_,id:r.id,comment:r,onCancel:()=>d==null?void 0:d(!1),autoFocus:!0,unitId:s,subUnitId:l,editorId:v,onSave:({text:e,attachments:t})=>{d==null||d(!1),y.executeCommand(i.UpdateCommentCommand.id,{unitId:s,subUnitId:l,payload:{commentId:r.id,text:e,attachments:t}})}}):(0,c.jsx)(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:B(r.text).map((e,t)=>(0,c.jsx)(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return(0,c.jsxs)(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},X=e=>{var s,l,u;let{id:d,unitId:f,subUnitId:p,refStr:m,showEdit:h=!0,onClick:_,showHighlight:v,onClose:y,getSubUnitName:b,location:x,autoFocus:S,onMouseEnter:C,onMouseLeave:w,onAddComment:T,onDeleteComment:E,onResolve:O,type:k,style:A,full:j}=e,M=(0,n.useDependency)(i.ThreadCommentModel),[N,P]=(0,o.useState)(!1),[I,R]=(0,o.useState)(``),z=(0,o.useMemo)(()=>M.commentUpdate$.pipe((0,r.debounceTime)(16)),[M]),B=(0,n.useObservable)(()=>d?z.pipe((0,r.map)(()=>M.getCommentWithChildren(f,p,d)),(0,r.startWith)(M.getCommentWithChildren(f,p,d))):(0,r.of)(null),null,!1,[d,p,M,f,z]),H=(0,n.useDependency)(t.ICommandService),W=(0,n.useDependency)(t.UserManagerService),K=B==null?void 0:B.root.resolved,J=(0,n.useObservable)(W.currentUser$),X=(0,o.useRef)(null),ee=(0,o.useMemo)(()=>(0,t.generateRandomId)(6),[]),te=[...B?[B.root]:[{id:q,text:{dataStream:`
4
- \r`},personId:(s=J==null?void 0:J.userID)==null?``:s,ref:m==null?``:m,dT:``,unitId:f,subUnitId:p,threadId:``}],...(l=B==null?void 0:B.children)==null?[]:l],Z=(0,o.useRef)(null),ne=e=>{e.stopPropagation(),K?H.executeCommand(g.id,{unitId:f,subUnitId:p,commentId:d}):H.executeCommand(g.id),H.executeCommand(i.ResolveCommentCommand.id,{unitId:f,subUnitId:p,commentId:d,resolved:!K}),O==null||O(!K)},re=e=>{e.stopPropagation(),H.executeCommand(g.id),!(B!=null&&B.root&&(E==null?void 0:E(B.root))===!1)&&(H.executeCommand(i.DeleteCommentTreeCommand.id,{unitId:f,subUnitId:p,commentId:d}),y==null||y())};(0,o.useEffect)(()=>w==null?void 0:w(),[]);let Q=b((u=B==null?void 0:B.root.subUnitId)==null?p:u),ie=h&&!I&&!K,$=`${m||(B==null?void 0:B.root.ref)||``}${Q?` · `:``}${Q}`,ae=U({location:x,unitId:f,subUnitId:p,commentId:d,fallbackId:ee});return(0,c.jsxs)(`div`,{id:`${x}-${f}-${p}-${d}`,className:(0,a.clsx)(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,a.borderClassName,{"univer-w-[278px]":!j,"univer-w-full":j,"univer-shadow":!K&&(v||N||x===`CELL`)}),style:A,onClick:_,onMouseEnter:()=>{C==null||C(),P(!0)},onMouseLeave:()=>{w==null||w(),P(!1)},children:[!K&&v&&(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),(0,c.jsxs)(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[(0,c.jsx)(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500 rtl:univer-ml-2 rtl:univer-mr-0`}),(0,c.jsx)(a.Tooltip,{showIfEllipsis:!0,title:$,children:(0,c.jsx)(`span`,{className:`univer-flex-1 univer-truncate`,children:$})})]}),!!B&&(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[(0,c.jsx)(`div`,{className:(0,a.clsx)(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":K}),onClick:ne,children:K?(0,c.jsx)(F,{}):(0,c.jsx)(L,{})}),(J==null?void 0:J.userID)===B.root.personId?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,onClick:re,children:(0,c.jsx)(D,{})}):null]})]}),(0,c.jsx)(`div`,{ref:Z,className:(0,a.clsx)(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,a.scrollbarClassName),children:te.map(e=>(0,c.jsx)(Y,{unitId:f,subUnitId:p,item:e,isRoot:e.id===(B==null?void 0:B.root.id),editing:I===e.id,resolved:B==null?void 0:B.root.resolved,type:k,threadCommentEditorId:ae,onClose:y,onEditingChange:t=>{R(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=X.current)==null||t.reply(V([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:T,onDeleteComment:E},e.id))}),ie&&(0,c.jsx)(`div`,{children:(0,c.jsx)(G,{ref:X,type:k,unitId:f,subUnitId:p,editorId:ae,onSave:async({text:e,attachments:n})=>{var r,a;let o={text:e,attachments:n,dT:(0,i.getDT)(),id:(0,t.generateRandomId)(),ref:m,personId:(r=J==null?void 0:J.userID)==null?``:r,parentId:B==null?void 0:B.root.id,unitId:f,subUnitId:p,threadId:(a=B==null?void 0:B.root.threadId)==null?``:a};(T==null?void 0:T(o))!==!1&&(await H.executeCommand(i.AddCommentCommand.id,{unitId:f,subUnitId:p,comment:o}),Z.current&&(Z.current.scrollTop=Z.current.scrollHeight))},autoFocus:S||!B,onCancel:()=>{B||y==null||y()}},`${S}`)})]})};e.SetActiveCommentOperation=g,e.ThreadCommentPanel=e=>{let{unitId:r,subUnitId$:s,type:l,onAdd:u,getSubUnitName:d,onResolve:f,sortComments:p,onItemLeave:m,onItemEnter:_,disableAdd:v,tempComment:y,onAddComment:b,onDeleteComment:x,showComments:S}=e,[C,w]=(0,o.useState)(`all`),[T,E]=(0,o.useState)(`all`),D=(0,n.useDependency)(t.LocaleService),O=(0,n.useDependency)(t.UserManagerService),A=(0,n.useDependency)(i.ThreadCommentModel),[j,M]=(0,o.useState)(()=>A.getUnit(r)),N=(0,n.useObservable)((0,n.useDependency)(h).activeCommentId$),P=(0,n.useObservable)(A.commentUpdate$),F=(0,n.useDependency)(t.ICommandService),I=(0,n.useObservable)(s),L=(0,o.useRef)(!0),z=`PANEL`,B=(0,n.useObservable)(O.currentUser$),V=(0,o.useMemo)(()=>{var e;let t=C===`all`?j:(e=j.filter(e=>e.subUnitId===I))==null?[]:e,n=p==null?(e=>e):p,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(S){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...S,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[S,C,j,p,I]),H=(0,o.useMemo)(()=>[...V.filter(e=>!e.resolved),...V.filter(e=>e.resolved)],[V]),U=(0,o.useMemo)(()=>T===`resolved`?H.filter(e=>e.resolved):T===`unsolved`?H.filter(e=>!e.resolved):T===`concern_me`&&B!=null&&B.userID?H.filter(e=>e==null?void 0:e.users.has(B.userID)):H,[H,B==null?void 0:B.userID,T]),W=y?[y,...U]:U,G=W.filter(e=>!e.resolved),K=W.filter(e=>e.resolved),q=T!==`all`||C!==`all`,J=()=>{E(`all`),w(`all`)};(0,o.useEffect)(()=>{r&&M(A.getUnit(r))},[r,A,P]),(0,o.useEffect)(()=>{var e;if(!N)return;if(!L.current){L.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=N,i=`${z}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[N]);let Y=e=>(t,n)=>(0,c.jsx)(X,{full:!0,location:z,getSubUnitName:d,id:t.id,unitId:t.unitId,subUnitId:t.subUnitId,refStr:t.ref,type:l,showEdit:(N==null?void 0:N.commentId)===t.id,showHighlight:(N==null?void 0:N.commentId)===t.id,onClick:()=>{L.current=!1,t.resolved?F.executeCommand(g.id):F.executeCommand(g.id,{unitId:t.unitId,subUnitId:t.subUnitId,commentId:t.id,temp:!1})},onMouseEnter:()=>_==null?void 0:_(t),onMouseLeave:()=>m==null?void 0:m(t),onAddComment:b,onDeleteComment:x,onResolve:e=>f==null?void 0:f(t.id,e)},R(t,n,e));return(0,c.jsxs)(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[l===t.UniverInstanceType.UNIVER_SHEET?(0,c.jsx)(a.Select,{borderless:!0,value:C,options:[{value:`current`,label:D.t(`thread-comment-ui.filter.sheet.current`)},{value:`all`,label:D.t(`thread-comment-ui.filter.sheet.all`)}],onChange:w}):null,(0,c.jsx)(a.Select,{borderless:!0,value:T,options:[{value:`all`,label:D.t(`thread-comment-ui.filter.status.all`)},{value:`resolved`,label:D.t(`thread-comment-ui.filter.status.resolved`)},{value:`unsolved`,label:D.t(`thread-comment-ui.filter.status.unsolved`)},{value:`concern_me`,label:D.t(`thread-comment-ui.filter.status.concernMe`)}],onChange:E})]}),W.length===0?(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[D.t(`thread-comment-ui.panel.empty`),q?(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsx)(a.Button,{onClick:J,children:D.t(`thread-comment-ui.panel.reset`)})}):v?null:(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsxs)(a.Button,{onClick:u,children:[(0,c.jsx)(k,{className:`univer-mr-1.5`}),D.t(`thread-comment-ui.panel.addComment`)]})})]}):(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[G.map(Y(`unsolved`)),K.length>0&&(0,c.jsx)(`div`,{className:`univer-text-xs`,children:D.t(`thread-comment-ui.panel.solved`)}),K.map(Y(`solved`))]})]})},Object.defineProperty(e,"ThreadCommentPanelService",{enumerable:!0,get:function(){return h}}),e.ThreadCommentTree=X,e.ThreadCommentTreeLocation=K,Object.defineProperty(e,"UniverThreadCommentUIPlugin",{enumerable:!0,get:function(){return b}})});
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@univerjs/core"),require("@univerjs/ui"),require("rxjs"),require("@univerjs/docs-ui"),require("@univerjs/thread-comment"),require("@univerjs/design"),require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`@univerjs/core`,`@univerjs/ui`,`rxjs`,`@univerjs/docs-ui`,`@univerjs/thread-comment`,`@univerjs/design`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UniverThreadCommentUi={},e.UniverCore,e.UniverUi,e.rxjs,e.UniverDocsUi,e.UniverThreadComment,e.UniverDesign,e.React,e.React))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function l(e){"@babel/helpers - typeof";return l=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let h=class extends t.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new r.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new r.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(this,`activeCommentId$`,this._activeCommentId$.asObservable()),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$(t.UniverInstanceType.UNIVER_SHEET).pipe((0,r.filter)(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)}};h=m([p(0,(0,t.Inject)(n.ISidebarService)),p(1,t.IUniverInstanceService)],h);let g={id:`thread-comment-ui.operation.set-active-comment`,type:t.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`1.0.0-beta.0`;let y={},b=class extends t.Plugin{constructor(e=y,n,r,i){super(),this._config=e,this._injector=n,this._commandService=r,this._configService=i;let{menu:a,...o}=(0,t.merge)({},y,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(`thread-comment-ui.config`,o)}onStarting(){var e;(0,t.mergeOverrideWithDependencies)([[h]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[g].forEach(e=>{this._commandService.registerCommand(e)})}};f(b,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),f(b,`packageName`,_),f(b,`version`,v),f(b,`type`,t.UniverInstanceType.UNIVER_UNKNOWN),b=m([(0,t.DependentOn)(a.UniverThreadCommentPlugin,i.UniverDocsUIPlugin),p(1,(0,t.Inject)(t.Injector)),p(2,t.ICommandService),p(3,t.IConfigService)],b);function x({ref:e,...t}){let{icon:n,id:r,className:i,extend:a,...o}=t,c=`univerjs-icon univerjs-icon-${r} ${i||``}`.trim(),l=(0,s.useRef)(`_${T()}`);return S(n,`${r}`,{defIds:n.defIds,idSuffix:l.current},{ref:e,className:c,...o},a)}function S(e,t,n,r,i){return(0,s.createElement)(e.tag,{key:t,...C(e,n,i),...r},(w(e,n).children||[]).map((r,a)=>S(r,`${t}-${e.tag}-${a}`,n,void 0,i)))}function C(e,t,n){let r={...e.attrs};n!=null&&n.colorChannel1&&r.fill===`colorChannel1`&&(r.fill=n.colorChannel1),n!=null&&n.colorChannel1&&r.stroke===`colorChannel1`&&(r.stroke=n.colorChannel1),e.tag===`mask`&&r.id&&(r.id+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{e===`mask`&&typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))});let{defIds:i}=t;return!i||i.length===0?r:(e.tag===`use`&&r[`xlink:href`]&&(r[`xlink:href`]+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))}),r)}function w(e,t){var n;let{defIds:r}=t;return!r||r.length===0?e:e.tag===`defs`&&(n=e.children)!=null&&n.length?{...e,children:e.children.map(e=>typeof e.attrs.id==`string`&&r&&r.includes(e.attrs.id)?{...e,attrs:{...e.attrs,id:e.attrs.id+t.idSuffix}}:e)}:e}function T(){return Math.random().toString(36).substring(2,8)}x.displayName=`UniverIcon`;let E={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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 0.866699 5.9313 0.866699H10.069C10.4004 0.866699 10.669 1.13533 10.669 1.4667C10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M1.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.64443C14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928L9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171C10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778L9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539C9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263L6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539C5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778L6.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`}}]},D=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(x,Object.assign({},e,{id:`delete-icon`,ref:t,icon:E}))});D.displayName=`DeleteIcon`;let O={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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`}}]},k=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(x,Object.assign({},e,{id:`increase-icon`,ref:t,icon:O}))});k.displayName=`IncreaseIcon`;let A={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9Z`}}]},j=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(x,Object.assign({},e,{id:`more-horizontal-icon`,ref:t,icon:A}))});j.displayName=`MoreHorizontalIcon`;let M={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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.76813`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M8.91626 6.1311H9.27424`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M3.90454 6.1311H4.26252`,strokeLinecap:`round`,strokeWidth:1.2}}]},N=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(x,Object.assign({},e,{id:`reply-to-comment-icon`,ref:t,icon:M}))});N.displayName=`ReplyToCommentIcon`;let P={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.7245 6.42417C11.9588 6.18985 11.9588 5.80995 11.7245 5.57564C11.4901 5.34132 11.1102 5.34132 10.8759 5.57564L7.3002 9.15137L5.72446 7.57564C5.49014 7.34132 5.11025 7.34132 4.87593 7.57564C4.64162 7.80995 4.64162 8.18985 4.87593 8.42417L6.87593 10.4242C7.11025 10.6585 7.49014 10.6585 7.72446 10.4242L11.7245 6.42417Z`,fillRule:`evenodd`,clipRule:`evenodd`}}]},F=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(x,Object.assign({},e,{id:`success-icon`,ref:t,icon:P}))});F.displayName=`SuccessIcon`;let I={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,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}}]},L=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(x,Object.assign({},e,{id:`success-outline-icon`,ref:t,icon:I}))});L.displayName=`SuccessOutlineIcon`;function R(e,t,n){return e.id?e.id:[`thread-comment-panel-temp`,n,e.unitId,e.subUnitId,e.threadId,e.ref,e.dT,t].join(`-`)}let z=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
2
+ `)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},B=e=>{if(!e)return[];let{paragraphs:n=[]}=e;return n.map((r,i)=>{let a=(0,t.getBodySlice)(e,i===0?0:n[i-1].startIndex+1,r.startIndex);return z(a)})},V=e=>{let n=``,r=[];return e.forEach(e=>{switch(e.type){case`text`:n+=e.content;break;case`mention`:{let i=n.length;n+=e.content.label;let a=n.length-1;r.push({rangeId:e.content.id,rangeType:t.CustomRangeType.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),n+=`\r
3
+ `,{textRuns:[],paragraphs:[{startIndex:n.length-2,paragraphId:(0,t.createParagraphId)(new Set),paragraphStyle:{}}],sectionBreaks:[{sectionId:(0,t.createSectionId)(new Set),startIndex:n.length-1}],dataStream:n,customRanges:r}};function H(e,t,n){e.focus(t),n==null||n.focus()}function U(e){let{location:n,unitId:r,subUnitId:i,commentId:a,fallbackId:o}=e;return`${t.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${n}_${r}_${i}_${a||o}`}function W(e){return{id:`d`,body:e,documentStyle:{}}}let G=(0,s.forwardRef)((e,r)=>{let{comment:a,onSave:l,id:u,onCancel:d,autoFocus:f,unitId:p,type:m,editorId:h}=e,_=(0,n.useDependency)(t.ICommandService),v=(0,n.useDependency)(t.LocaleService),[y,b]=(0,s.useState)(!1),x=(0,n.useDependency)(i.IEditorService),S=(0,s.useRef)(null),C=m===t.UniverInstanceType.UNIVER_DOC?t.DOCS_NORMAL_EDITOR_UNIT_ID_KEY:p,[w,T]=(0,s.useState)(()=>{var e;return t.BuildTextUtils.transform.getPlainText((a==null||(e=a.text)==null?void 0:e.dataStream)??``)}),E=(0,s.useMemo)(()=>({keyCodes:[{keyCode:n.KeyCode.ENTER}],handler:e=>{e===n.KeyCode.ENTER&&_.executeCommand(i.BreakLineCommand.id)}}),[_]);return(0,s.useImperativeHandle)(r,()=>({reply(e){var n;if(!S.current)return;H(x,h,S.current);let r=W(e);(n=S.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}]),T(t.BuildTextUtils.transform.getPlainText(r.body.dataStream)),b(!0)}})),(0,s.useEffect)(()=>{if(!f)return;let e=setTimeout(()=>{H(x,h,S.current)});return()=>clearTimeout(e)},[f,h,x]),(0,c.jsxs)(`div`,{onClick:e=>e.preventDefault(),children:[(0,c.jsx)(`div`,{onMouseDown:()=>{H(x,h,S.current),b(!0)},children:(0,c.jsx)(i.RichTextEditor,{className:`univer-w-full`,editorRef:S,editorId:h,preserveHostFocus:!0,autoFocus:f,keyboardEventConfig:E,placeholder:v.t(`thread-comment-ui.editor.placeholder`),initialValue:(a==null?void 0:a.text)&&W(a.text),onChange:e=>{var n;return T(t.BuildTextUtils.transform.getPlainText(((n=e.body)==null?void 0:n.dataStream)??``))},onFocusChange:e=>e&&b(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{x.focus(C)},30)}})}),y?(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[(0,c.jsx)(o.Button,{type:`button`,onClick:()=>{let e=S.current;e==null||e.blur(),e==null||e.replaceText(``,!1),e==null||e.setSelectionRanges([],!1),T(``),d==null||d(),b(!1),_.executeCommand(g.id)},children:v.t(`thread-comment-ui.editor.cancel`)}),(0,c.jsx)(o.Button,{type:`button`,variant:`primary`,disabled:!w,onClick:()=>{let e=S.current;if(e){let n=t.Tools.deepClone(e.getDocumentData().body);e.blur(),e.replaceText(``,!1),e.setSelectionRanges([],!1),T(``),b(!1),l==null||l({...a,text:n})}},children:v.t(u?`thread-comment-ui.editor.save`:`thread-comment-ui.editor.reply`)})]}):null]})}),K=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({}),q=`__mock__`;function J(e,n){let r=(0,t.dateKit)(e),i=t.LOCALE_META[n].tag;return r.formatIntl(i,{year:`numeric`,month:`numeric`,day:`numeric`,hour:`2-digit`,minute:`2-digit`,hour12:!1})}let Y=e=>{let{item:r,unitId:i,subUnitId:l,editing:u,onEditingChange:d,onReply:f,resolved:p,isRoot:m,onClose:h,onDeleteComment:g,type:_,threadCommentEditorId:v}=e,y=(0,n.useDependency)(t.ICommandService),b=(0,n.useDependency)(t.LocaleService),x=(0,n.useDependency)(t.RegionService),S=(0,n.useDependency)(t.UserManagerService),C=S.getUser(r.personId),w=(0,n.useObservable)(S.currentUser$),T=(w==null?void 0:w.userID)===r.personId,E=r.id===q,[D,O]=(0,s.useState)(!1),k=(0,n.useConfigValue)(n.UI_PLUGIN_CONFIG_KEY),A=k==null?void 0:k.avatarFallback,M=(0,n.useObservable)(x.currentRegion$,x.getCurrentRegion()),P=E?null:J(r.dT,M);return(0,c.jsxs)(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px] rtl:univer-pl-0 rtl:univer-pr-[30px]`,onMouseLeave:()=>O(!1),onMouseEnter:()=>O(!0),children:[(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat rtl:univer-left-auto rtl:univer-right-0`,style:{backgroundImage:`url(${(C==null?void 0:C.avatar)||A})`}}),C?(0,c.jsxs)(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[(0,c.jsx)(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(C==null?void 0:C.name)||` `}),(0,c.jsxs)(`div`,{children:[E||p?null:D&&C?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,onClick:()=>f(C),children:(0,c.jsx)(N,{})}):null,T&&!E&&!p?(0,c.jsx)(o.Dropdown,{overlay:(0,c.jsx)(`div`,{className:`univer-rounded-lg`,children:(0,c.jsxs)(`ul`,{className:`univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors`,children:[(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>d==null?void 0:d(!0),children:b.t(`thread-comment-ui.item.edit`)})}),(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(g==null?void 0:g(r))!==!1&&(y.executeCommand(m?a.DeleteCommentTreeCommand.id:a.DeleteCommentCommand.id,{unitId:i,subUnitId:l,commentId:r.id}),m&&(h==null||h()))},children:b.t(`thread-comment-ui.item.delete`)})})]})}),children:(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,children:(0,c.jsx)(j,{})})}):null]})]}):null,P&&(0,c.jsx)(`time`,{dir:`ltr`,className:`univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:P}),u?(0,c.jsx)(G,{type:_,id:r.id,comment:r,onCancel:()=>d==null?void 0:d(!1),autoFocus:!0,unitId:i,subUnitId:l,editorId:v,onSave:({text:e,attachments:t})=>{d==null||d(!1),y.executeCommand(a.UpdateCommentCommand.id,{unitId:i,subUnitId:l,payload:{commentId:r.id,text:e,attachments:t}})}}):(0,c.jsx)(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:B(r.text).map((e,t)=>(0,c.jsx)(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return(0,c.jsxs)(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},X=e=>{let{id:i,unitId:l,subUnitId:u,refStr:d,showEdit:f=!0,onClick:p,showHighlight:m,onClose:h,getSubUnitName:_,location:v,autoFocus:y,onMouseEnter:b,onMouseLeave:x,onAddComment:S,onDeleteComment:C,onResolve:w,type:T,style:E,full:O}=e,k=(0,n.useDependency)(a.ThreadCommentModel),[A,j]=(0,s.useState)(!1),[M,N]=(0,s.useState)(``),P=(0,s.useMemo)(()=>k.commentUpdate$.pipe((0,r.debounceTime)(16)),[k]),I=(0,n.useObservable)(()=>i?P.pipe((0,r.map)(()=>k.getCommentWithChildren(l,u,i)),(0,r.startWith)(k.getCommentWithChildren(l,u,i))):(0,r.of)(null),null,!1,[i,u,k,l,P]),R=(0,n.useDependency)(t.ICommandService),z=(0,n.useDependency)(t.UserManagerService),B=I==null?void 0:I.root.resolved,H=(0,n.useObservable)(z.currentUser$),W=(0,s.useRef)(null),K=(0,s.useMemo)(()=>(0,t.generateRandomId)(6),[]),J=[...I?[I.root]:[{id:q,text:{dataStream:`
4
+ \r`},personId:(H==null?void 0:H.userID)??``,ref:d??``,dT:``,unitId:l,subUnitId:u,threadId:``}],...(I==null?void 0:I.children)??[]],X=(0,s.useRef)(null),ee=e=>{e.stopPropagation(),B?R.executeCommand(g.id,{unitId:l,subUnitId:u,commentId:i}):R.executeCommand(g.id),R.executeCommand(a.ResolveCommentCommand.id,{unitId:l,subUnitId:u,commentId:i,resolved:!B}),w==null||w(!B)},te=e=>{e.stopPropagation(),R.executeCommand(g.id),!(I!=null&&I.root&&(C==null?void 0:C(I.root))===!1)&&(R.executeCommand(a.DeleteCommentTreeCommand.id,{unitId:l,subUnitId:u,commentId:i}),h==null||h())};(0,s.useEffect)(()=>x==null?void 0:x(),[]);let Z=_((I==null?void 0:I.root.subUnitId)??u),ne=f&&!M&&!B,Q=`${d||(I==null?void 0:I.root.ref)||``}${Z?` · `:``}${Z}`,$=U({location:v,unitId:l,subUnitId:u,commentId:i,fallbackId:K});return(0,c.jsxs)(`div`,{id:`${v}-${l}-${u}-${i}`,className:(0,o.clsx)(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,o.borderClassName,{"univer-w-[278px]":!O,"univer-w-full":O,"univer-shadow":!B&&(m||A||v===`CELL`)}),style:E,onClick:p,onMouseEnter:()=>{b==null||b(),j(!0)},onMouseLeave:()=>{x==null||x(),j(!1)},children:[!B&&m&&(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),(0,c.jsxs)(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[(0,c.jsx)(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500 rtl:univer-ml-2 rtl:univer-mr-0`}),(0,c.jsx)(o.Tooltip,{showIfEllipsis:!0,title:Q,children:(0,c.jsx)(`span`,{className:`univer-flex-1 univer-truncate`,children:Q})})]}),!!I&&(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[(0,c.jsx)(`div`,{className:(0,o.clsx)(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":B}),onClick:ee,children:B?(0,c.jsx)(F,{}):(0,c.jsx)(L,{})}),(H==null?void 0:H.userID)===I.root.personId?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 rtl:univer-ml-0 rtl:univer-mr-1 dark:hover:!univer-bg-gray-800`,onClick:te,children:(0,c.jsx)(D,{})}):null]})]}),(0,c.jsx)(`div`,{ref:X,className:(0,o.clsx)(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,o.scrollbarClassName),children:J.map(e=>(0,c.jsx)(Y,{unitId:l,subUnitId:u,item:e,isRoot:e.id===(I==null?void 0:I.root.id),editing:M===e.id,resolved:I==null?void 0:I.root.resolved,type:T,threadCommentEditorId:$,onClose:h,onEditingChange:t=>{N(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=W.current)==null||t.reply(V([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:S,onDeleteComment:C},e.id))}),ne&&(0,c.jsx)(`div`,{children:(0,c.jsx)(G,{ref:W,type:T,unitId:l,subUnitId:u,editorId:$,onSave:async({text:e,attachments:n})=>{let r={text:e,attachments:n,dT:(0,a.getDT)(),id:(0,t.generateRandomId)(),ref:d,personId:(H==null?void 0:H.userID)??``,parentId:I==null?void 0:I.root.id,unitId:l,subUnitId:u,threadId:(I==null?void 0:I.root.threadId)??``};(S==null?void 0:S(r))!==!1&&(await R.executeCommand(a.AddCommentCommand.id,{unitId:l,subUnitId:u,comment:r}),X.current&&(X.current.scrollTop=X.current.scrollHeight))},autoFocus:y||!I,onCancel:()=>{I||h==null||h()}},`${y}`)})]})};e.SetActiveCommentOperation=g,e.ThreadCommentPanel=e=>{let{unitId:r,subUnitId$:i,type:l,onAdd:u,getSubUnitName:d,onResolve:f,sortComments:p,onItemLeave:m,onItemEnter:_,disableAdd:v,tempComment:y,onAddComment:b,onDeleteComment:x,showComments:S}=e,[C,w]=(0,s.useState)(`all`),[T,E]=(0,s.useState)(`all`),D=(0,n.useDependency)(t.LocaleService),O=(0,n.useDependency)(t.UserManagerService),A=(0,n.useDependency)(a.ThreadCommentModel),[j,M]=(0,s.useState)(()=>A.getUnit(r)),N=(0,n.useObservable)((0,n.useDependency)(h).activeCommentId$),P=(0,n.useObservable)(A.commentUpdate$),F=(0,n.useDependency)(t.ICommandService),I=(0,n.useObservable)(i),L=(0,s.useRef)(!0),z=`PANEL`,B=(0,n.useObservable)(O.currentUser$),V=(0,s.useMemo)(()=>{let e=C===`all`?j:j.filter(e=>e.subUnitId===I)??[],t=p??(e=>e),n=e.map(e=>({...e.root,children:e.children??[],users:e.relativeUsers}));if(S){let e=new Map;return n.forEach(t=>{e.set(t.id,t)}),[...S,``].map(t=>e.get(t)).filter(Boolean)}else return t(n)},[S,C,j,p,I]),H=(0,s.useMemo)(()=>[...V.filter(e=>!e.resolved),...V.filter(e=>e.resolved)],[V]),U=(0,s.useMemo)(()=>T===`resolved`?H.filter(e=>e.resolved):T===`unsolved`?H.filter(e=>!e.resolved):T===`concern_me`&&B!=null&&B.userID?H.filter(e=>e==null?void 0:e.users.has(B.userID)):H,[H,B==null?void 0:B.userID,T]),W=y?[y,...U]:U,G=W.filter(e=>!e.resolved),K=W.filter(e=>e.resolved),q=T!==`all`||C!==`all`,J=()=>{E(`all`),w(`all`)};(0,s.useEffect)(()=>{r&&M(A.getUnit(r))},[r,A,P]),(0,s.useEffect)(()=>{var e;if(!N)return;if(!L.current){L.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=N,i=`${z}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[N]);let Y=e=>(t,n)=>(0,c.jsx)(X,{full:!0,location:z,getSubUnitName:d,id:t.id,unitId:t.unitId,subUnitId:t.subUnitId,refStr:t.ref,type:l,showEdit:(N==null?void 0:N.commentId)===t.id,showHighlight:(N==null?void 0:N.commentId)===t.id,onClick:()=>{L.current=!1,t.resolved?F.executeCommand(g.id):F.executeCommand(g.id,{unitId:t.unitId,subUnitId:t.subUnitId,commentId:t.id,temp:!1})},onMouseEnter:()=>_==null?void 0:_(t),onMouseLeave:()=>m==null?void 0:m(t),onAddComment:b,onDeleteComment:x,onResolve:e=>f==null?void 0:f(t.id,e)},R(t,n,e));return(0,c.jsxs)(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[l===t.UniverInstanceType.UNIVER_SHEET?(0,c.jsx)(o.Select,{borderless:!0,value:C,options:[{value:`current`,label:D.t(`thread-comment-ui.filter.sheet.current`)},{value:`all`,label:D.t(`thread-comment-ui.filter.sheet.all`)}],onChange:w}):null,(0,c.jsx)(o.Select,{borderless:!0,value:T,options:[{value:`all`,label:D.t(`thread-comment-ui.filter.status.all`)},{value:`resolved`,label:D.t(`thread-comment-ui.filter.status.resolved`)},{value:`unsolved`,label:D.t(`thread-comment-ui.filter.status.unsolved`)},{value:`concern_me`,label:D.t(`thread-comment-ui.filter.status.concernMe`)}],onChange:E})]}),W.length===0?(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[D.t(`thread-comment-ui.panel.empty`),q?(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsx)(o.Button,{onClick:J,children:D.t(`thread-comment-ui.panel.reset`)})}):v?null:(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsxs)(o.Button,{onClick:u,children:[(0,c.jsx)(k,{className:`univer-mr-1.5`}),D.t(`thread-comment-ui.panel.addComment`)]})})]}):(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[G.map(Y(`unsolved`)),K.length>0&&(0,c.jsx)(`div`,{className:`univer-text-xs`,children:D.t(`thread-comment-ui.panel.solved`)}),K.map(Y(`solved`))]})]})},Object.defineProperty(e,"ThreadCommentPanelService",{enumerable:!0,get:function(){return h}}),e.ThreadCommentTree=X,e.ThreadCommentTreeLocation=K,Object.defineProperty(e,"UniverThreadCommentUIPlugin",{enumerable:!0,get:function(){return b}})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@univerjs/thread-comment-ui",
3
- "version": "1.0.0-alpha.7",
3
+ "version": "1.0.0-beta.0",
4
4
  "private": false,
5
5
  "description": "Shared thread comment UI components and services for Univer.",
6
6
  "author": "DreamNum Co., Ltd. <developer@univer.ai>",
@@ -58,22 +58,22 @@
58
58
  "rxjs": ">=7.0.0"
59
59
  },
60
60
  "dependencies": {
61
- "@univerjs/icons": "1.34.0",
62
- "@univerjs/core": "1.0.0-alpha.7",
63
- "@univerjs/design": "1.0.0-alpha.7",
64
- "@univerjs/ui": "1.0.0-alpha.7",
65
- "@univerjs/thread-comment": "1.0.0-alpha.7",
66
- "@univerjs/docs-ui": "1.0.0-alpha.7"
61
+ "@univerjs/icons": "1.35.0",
62
+ "@univerjs/core": "1.0.0-beta.0",
63
+ "@univerjs/design": "1.0.0-beta.0",
64
+ "@univerjs/docs-ui": "1.0.0-beta.0",
65
+ "@univerjs/thread-comment": "1.0.0-beta.0",
66
+ "@univerjs/ui": "1.0.0-beta.0"
67
67
  },
68
68
  "devDependencies": {
69
- "postcss": "^8.5.19",
69
+ "postcss": "^8.5.25",
70
70
  "react": "18.3.1",
71
71
  "rxjs": "^7.8.2",
72
72
  "tailwindcss": "3.4.18",
73
73
  "typescript": "^6.0.3",
74
74
  "vitest": "^4.1.10",
75
- "@univerjs-infra/shared": "1.0.0-alpha.7",
76
- "@univerjs/engine-render": "1.0.0-alpha.7"
75
+ "@univerjs-infra/shared": "1.0.0-beta.0",
76
+ "@univerjs/engine-render": "1.0.0-beta.0"
77
77
  },
78
78
  "scripts": {
79
79
  "test": "vitest run",