@univerjs/thread-comment-ui 0.24.0 → 0.25.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 (92) hide show
  1. package/lib/cjs/index.js +182 -124
  2. package/lib/cjs/locale/ar-SA.js +37 -0
  3. package/lib/cjs/locale/ca-ES.js +1 -1
  4. package/lib/cjs/locale/de-DE.js +37 -0
  5. package/lib/cjs/locale/en-US.js +1 -1
  6. package/lib/cjs/locale/es-ES.js +1 -1
  7. package/lib/cjs/locale/fa-IR.js +1 -1
  8. package/lib/cjs/locale/fr-FR.js +1 -1
  9. package/lib/cjs/locale/id-ID.js +37 -0
  10. package/lib/cjs/locale/it-IT.js +37 -0
  11. package/lib/cjs/locale/ja-JP.js +1 -1
  12. package/lib/cjs/locale/ko-KR.js +1 -1
  13. package/lib/cjs/locale/pl-PL.js +37 -0
  14. package/lib/cjs/locale/pt-BR.js +37 -0
  15. package/lib/cjs/locale/ru-RU.js +1 -1
  16. package/lib/cjs/locale/sk-SK.js +1 -1
  17. package/lib/cjs/locale/vi-VN.js +1 -1
  18. package/lib/cjs/locale/zh-CN.js +1 -1
  19. package/lib/cjs/locale/zh-HK.js +37 -0
  20. package/lib/cjs/locale/zh-TW.js +1 -1
  21. package/lib/es/index.js +182 -124
  22. package/lib/es/locale/ar-SA.js +36 -0
  23. package/lib/es/locale/ca-ES.js +1 -1
  24. package/lib/es/locale/de-DE.js +36 -0
  25. package/lib/es/locale/en-US.js +1 -1
  26. package/lib/es/locale/es-ES.js +1 -1
  27. package/lib/es/locale/fa-IR.js +1 -1
  28. package/lib/es/locale/fr-FR.js +1 -1
  29. package/lib/es/locale/id-ID.js +36 -0
  30. package/lib/es/locale/it-IT.js +36 -0
  31. package/lib/es/locale/ja-JP.js +1 -1
  32. package/lib/es/locale/ko-KR.js +1 -1
  33. package/lib/es/locale/pl-PL.js +36 -0
  34. package/lib/es/locale/pt-BR.js +36 -0
  35. package/lib/es/locale/ru-RU.js +1 -1
  36. package/lib/es/locale/sk-SK.js +1 -1
  37. package/lib/es/locale/vi-VN.js +1 -1
  38. package/lib/es/locale/zh-CN.js +1 -1
  39. package/lib/es/locale/zh-HK.js +36 -0
  40. package/lib/es/locale/zh-TW.js +1 -1
  41. package/lib/index.js +182 -124
  42. package/lib/locale/ar-SA.js +36 -0
  43. package/lib/locale/ca-ES.js +1 -1
  44. package/lib/locale/de-DE.js +36 -0
  45. package/lib/locale/en-US.js +1 -1
  46. package/lib/locale/es-ES.js +1 -1
  47. package/lib/locale/fa-IR.js +1 -1
  48. package/lib/locale/fr-FR.js +1 -1
  49. package/lib/locale/id-ID.js +36 -0
  50. package/lib/locale/it-IT.js +36 -0
  51. package/lib/locale/ja-JP.js +1 -1
  52. package/lib/locale/ko-KR.js +1 -1
  53. package/lib/locale/pl-PL.js +36 -0
  54. package/lib/locale/pt-BR.js +36 -0
  55. package/lib/locale/ru-RU.js +1 -1
  56. package/lib/locale/sk-SK.js +1 -1
  57. package/lib/locale/vi-VN.js +1 -1
  58. package/lib/locale/zh-CN.js +1 -1
  59. package/lib/locale/zh-HK.js +36 -0
  60. package/lib/locale/zh-TW.js +1 -1
  61. package/lib/types/locale/ar-SA.d.ts +18 -0
  62. package/lib/types/locale/de-DE.d.ts +18 -0
  63. package/lib/types/locale/en-US.d.ts +1 -1
  64. package/lib/types/locale/id-ID.d.ts +18 -0
  65. package/lib/types/locale/it-IT.d.ts +18 -0
  66. package/lib/types/locale/pl-PL.d.ts +18 -0
  67. package/lib/types/locale/pt-BR.d.ts +18 -0
  68. package/lib/types/locale/zh-HK.d.ts +18 -0
  69. package/lib/types/views/thread-comment-editor/util.d.ts +8 -0
  70. package/lib/types/views/thread-comment-panel/util.d.ts +18 -0
  71. package/lib/types/views/thread-comment-tree/util.d.ts +25 -0
  72. package/lib/umd/index.js +4 -4
  73. package/lib/umd/locale/ar-SA.js +1 -0
  74. package/lib/umd/locale/ca-ES.js +1 -1
  75. package/lib/umd/locale/de-DE.js +1 -0
  76. package/lib/umd/locale/en-US.js +1 -1
  77. package/lib/umd/locale/es-ES.js +1 -1
  78. package/lib/umd/locale/fa-IR.js +1 -1
  79. package/lib/umd/locale/fr-FR.js +1 -1
  80. package/lib/umd/locale/id-ID.js +1 -0
  81. package/lib/umd/locale/it-IT.js +1 -0
  82. package/lib/umd/locale/ja-JP.js +1 -1
  83. package/lib/umd/locale/ko-KR.js +1 -1
  84. package/lib/umd/locale/pl-PL.js +1 -0
  85. package/lib/umd/locale/pt-BR.js +1 -0
  86. package/lib/umd/locale/ru-RU.js +1 -1
  87. package/lib/umd/locale/sk-SK.js +1 -1
  88. package/lib/umd/locale/vi-VN.js +1 -1
  89. package/lib/umd/locale/zh-CN.js +1 -1
  90. package/lib/umd/locale/zh-HK.js +1 -0
  91. package/lib/umd/locale/zh-TW.js +1 -1
  92. package/package.json +9 -9
package/lib/cjs/index.js CHANGED
@@ -9,7 +9,7 @@ let react = require("react");
9
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.129.0/helpers/typeof.js
12
+ //#region \0@oxc-project+runtime@0.133.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.129.0/helpers/toPrimitive.js
23
+ //#region \0@oxc-project+runtime@0.133.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.129.0/helpers/toPropertyKey.js
36
+ //#region \0@oxc-project+runtime@0.133.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.129.0/helpers/defineProperty.js
43
+ //#region \0@oxc-project+runtime@0.133.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.129.0/helpers/decorateParam.js
54
+ //#region \0@oxc-project+runtime@0.133.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.129.0/helpers/decorate.js
62
+ //#region \0@oxc-project+runtime@0.133.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 = "0.24.0";
128
+ var version = "0.25.0";
129
129
 
130
130
  //#endregion
131
131
  //#region src/config/config.ts
@@ -186,6 +186,82 @@ UniverThreadCommentUIPlugin = __decorate([
186
186
  __decorateParam(3, _univerjs_core.IConfigService)
187
187
  ], UniverThreadCommentUIPlugin);
188
188
 
189
+ //#endregion
190
+ //#region src/views/thread-comment-editor/util.ts
191
+ const transformDocument2TextNodesInParagraph = (doc) => {
192
+ const { dataStream, customRanges } = doc;
193
+ const end = dataStream.endsWith("\r\n") ? dataStream.length - 2 : dataStream.length;
194
+ const textNodes = [];
195
+ let lastIndex = 0;
196
+ customRanges === null || customRanges === void 0 || customRanges.forEach((range) => {
197
+ if (lastIndex < range.startIndex) textNodes.push({
198
+ type: "text",
199
+ content: dataStream.slice(lastIndex, range.startIndex)
200
+ });
201
+ textNodes.push({
202
+ type: "mention",
203
+ content: {
204
+ label: dataStream.slice(range.startIndex, range.endIndex + 1),
205
+ id: range.rangeId
206
+ }
207
+ });
208
+ lastIndex = range.endIndex + 1;
209
+ });
210
+ textNodes.push({
211
+ type: "text",
212
+ content: dataStream.slice(lastIndex, end)
213
+ });
214
+ return textNodes;
215
+ };
216
+ const transformDocument2TextNodes = (doc) => {
217
+ if (!doc) return [];
218
+ const { paragraphs = [] } = doc;
219
+ return paragraphs.map((paragraph, index) => {
220
+ return transformDocument2TextNodesInParagraph((0, _univerjs_core.getBodySlice)(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex));
221
+ });
222
+ };
223
+ const transformTextNodes2Document = (nodes) => {
224
+ let str = "";
225
+ const customRanges = [];
226
+ nodes.forEach((node) => {
227
+ switch (node.type) {
228
+ case "text":
229
+ str += node.content;
230
+ break;
231
+ case "mention": {
232
+ const start = str.length;
233
+ str += node.content.label;
234
+ const end = str.length - 1;
235
+ customRanges.push({
236
+ rangeId: node.content.id,
237
+ rangeType: _univerjs_core.CustomRangeType.MENTION,
238
+ startIndex: start,
239
+ endIndex: end,
240
+ properties: {},
241
+ wholeEntity: true
242
+ });
243
+ break;
244
+ }
245
+ default: break;
246
+ }
247
+ });
248
+ str += "\r\n";
249
+ return {
250
+ textRuns: [],
251
+ paragraphs: [{
252
+ startIndex: str.length - 2,
253
+ paragraphStyle: {}
254
+ }],
255
+ sectionBreaks: [{ startIndex: str.length - 1 }],
256
+ dataStream: str,
257
+ customRanges
258
+ };
259
+ };
260
+ function focusThreadCommentEditor(editorService, editorId, editor) {
261
+ editorService.focus(editorId);
262
+ editor === null || editor === void 0 || editor.focus();
263
+ }
264
+
189
265
  //#endregion
190
266
  //#region src/views/thread-comment-editor/index.tsx
191
267
  function getSnapshot(body) {
@@ -224,142 +300,101 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
224
300
  }
225
301
  }), [commandService]);
226
302
  (0, react.useImperativeHandle)(ref, () => ({ reply(text) {
227
- var _getEditorId, _editor$current6;
303
+ var _editor$current6;
228
304
  if (!editor.current) return;
229
- editorService.focus((_getEditorId = editor.current.getEditorId()) !== null && _getEditorId !== void 0 ? _getEditorId : "");
305
+ focusThreadCommentEditor(editorService, editorId, editor.current);
230
306
  const documentData = getSnapshot(text);
231
307
  (_editor$current6 = editor.current) === null || _editor$current6 === void 0 || _editor$current6.setDocumentData(documentData, [{
232
308
  startOffset: documentData.body.dataStream.length - 2,
233
309
  endOffset: documentData.body.dataStream.length - 2,
234
310
  collapsed: true
235
311
  }]);
312
+ setCanSubmit(_univerjs_core.BuildTextUtils.transform.getPlainText(documentData.body.dataStream));
313
+ setEditing(true);
236
314
  } }));
237
315
  const handleSave = () => {
238
- if (editor.current) {
239
- const newText = _univerjs_core.Tools.deepClone(editor.current.getDocumentData().body);
316
+ const currentEditor = editor.current;
317
+ if (currentEditor) {
318
+ const newText = _univerjs_core.Tools.deepClone(currentEditor.getDocumentData().body);
319
+ currentEditor.blur();
320
+ currentEditor.replaceText("", false);
321
+ currentEditor.setSelectionRanges([], false);
322
+ setCanSubmit("");
240
323
  setEditing(false);
241
324
  onSave === null || onSave === void 0 || onSave({
242
325
  ...comment,
243
326
  text: newText
244
327
  });
245
- editor.current.replaceText("");
246
- setTimeout(() => {
247
- var _editor$current7, _editor$current8;
248
- (_editor$current7 = editor.current) === null || _editor$current7 === void 0 || _editor$current7.setSelectionRanges([]);
249
- (_editor$current8 = editor.current) === null || _editor$current8 === void 0 || _editor$current8.blur();
250
- }, 10);
251
328
  }
252
329
  };
330
+ const handleEditorMouseDown = () => {
331
+ focusThreadCommentEditor(editorService, editorId, editor.current);
332
+ setEditing(true);
333
+ };
334
+ (0, react.useEffect)(() => {
335
+ if (!autoFocus) return;
336
+ const timer = setTimeout(() => {
337
+ focusThreadCommentEditor(editorService, editorId, editor.current);
338
+ });
339
+ return () => clearTimeout(timer);
340
+ }, [
341
+ autoFocus,
342
+ editorId,
343
+ editorService
344
+ ]);
253
345
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
254
346
  onClick: (e) => e.preventDefault(),
255
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_docs_ui.RichTextEditor, {
256
- className: "univer-w-full",
257
- editorRef: editor,
258
- editorId,
259
- autoFocus,
260
- keyboardEventConfig,
261
- placeholder: localeService.t("threadCommentUI.editor.placeholder"),
262
- initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
263
- onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
264
- isSingle: false,
265
- maxHeight: 64,
266
- onClickOutside: () => {
267
- setTimeout(() => {
268
- editorService.focus(rootEditorId);
269
- }, 30);
270
- }
347
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
348
+ onMouseDown: handleEditorMouseDown,
349
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_docs_ui.RichTextEditor, {
350
+ className: "univer-w-full",
351
+ editorRef: editor,
352
+ editorId,
353
+ autoFocus,
354
+ keyboardEventConfig,
355
+ placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
356
+ initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
357
+ onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
358
+ isSingle: false,
359
+ maxHeight: 64,
360
+ onClickOutside: () => {
361
+ setTimeout(() => {
362
+ editorService.focus(rootEditorId);
363
+ }, 30);
364
+ }
365
+ })
271
366
  }), editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
272
367
  className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2",
273
368
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
369
+ type: "button",
274
370
  onClick: () => {
275
- var _editor$current9;
371
+ const currentEditor = editor.current;
372
+ currentEditor === null || currentEditor === void 0 || currentEditor.blur();
373
+ currentEditor === null || currentEditor === void 0 || currentEditor.replaceText("", false);
374
+ currentEditor === null || currentEditor === void 0 || currentEditor.setSelectionRanges([], false);
375
+ setCanSubmit("");
276
376
  onCancel === null || onCancel === void 0 || onCancel();
277
377
  setEditing(false);
278
- (_editor$current9 = editor.current) === null || _editor$current9 === void 0 || _editor$current9.replaceText("", true);
279
378
  commandService.executeCommand(SetActiveCommentOperation.id);
280
379
  },
281
- children: localeService.t("threadCommentUI.editor.cancel")
380
+ children: localeService.t("thread-comment-ui.editor.cancel")
282
381
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
382
+ type: "button",
283
383
  variant: "primary",
284
384
  disabled: !canSubmit,
285
385
  onClick: handleSave,
286
- children: localeService.t(id ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
386
+ children: localeService.t(id ? "thread-comment-ui.editor.save" : "thread-comment-ui.editor.reply")
287
387
  })]
288
388
  }) : null]
289
389
  });
290
390
  });
291
391
 
292
392
  //#endregion
293
- //#region src/views/thread-comment-editor/util.ts
294
- const transformDocument2TextNodesInParagraph = (doc) => {
295
- const { dataStream, customRanges } = doc;
296
- const end = dataStream.endsWith("\r\n") ? dataStream.length - 2 : dataStream.length;
297
- const textNodes = [];
298
- let lastIndex = 0;
299
- customRanges === null || customRanges === void 0 || customRanges.forEach((range) => {
300
- if (lastIndex < range.startIndex) textNodes.push({
301
- type: "text",
302
- content: dataStream.slice(lastIndex, range.startIndex)
303
- });
304
- textNodes.push({
305
- type: "mention",
306
- content: {
307
- label: dataStream.slice(range.startIndex, range.endIndex + 1),
308
- id: range.rangeId
309
- }
310
- });
311
- lastIndex = range.endIndex + 1;
312
- });
313
- textNodes.push({
314
- type: "text",
315
- content: dataStream.slice(lastIndex, end)
316
- });
317
- return textNodes;
318
- };
319
- const transformDocument2TextNodes = (doc) => {
320
- if (!doc) return [];
321
- const { paragraphs = [] } = doc;
322
- return paragraphs.map((paragraph, index) => {
323
- return transformDocument2TextNodesInParagraph((0, _univerjs_core.getBodySlice)(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex));
324
- });
325
- };
326
- const transformTextNodes2Document = (nodes) => {
327
- let str = "";
328
- const customRanges = [];
329
- nodes.forEach((node) => {
330
- switch (node.type) {
331
- case "text":
332
- str += node.content;
333
- break;
334
- case "mention": {
335
- const start = str.length;
336
- str += node.content.label;
337
- const end = str.length - 1;
338
- customRanges.push({
339
- rangeId: node.content.id,
340
- rangeType: _univerjs_core.CustomRangeType.MENTION,
341
- startIndex: start,
342
- endIndex: end,
343
- properties: {},
344
- wholeEntity: true
345
- });
346
- break;
347
- }
348
- default: break;
349
- }
350
- });
351
- str += "\r\n";
352
- return {
353
- textRuns: [],
354
- paragraphs: [{
355
- startIndex: str.length - 2,
356
- paragraphStyle: {}
357
- }],
358
- sectionBreaks: [{ startIndex: str.length - 1 }],
359
- dataStream: str,
360
- customRanges
361
- };
362
- };
393
+ //#region src/views/thread-comment-tree/util.ts
394
+ function getThreadCommentEditorId(params) {
395
+ const { location, unitId, subUnitId, commentId, fallbackId } = params;
396
+ return `${_univerjs_core.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${location}_${unitId}_${subUnitId}_${commentId || fallbackId}`;
397
+ }
363
398
 
364
399
  //#endregion
365
400
  //#region src/views/thread-comment-tree/index.tsx
@@ -416,11 +451,11 @@ const ThreadCommentItem = (props) => {
416
451
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
417
452
  className: "hover:univer-bg-gray-200",
418
453
  onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
419
- children: localeService.t("threadCommentUI.item.edit")
454
+ children: localeService.t("thread-comment-ui.item.edit")
420
455
  }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
421
456
  className: "hover:univer-bg-gray-200",
422
457
  onClick: handleDeleteItem,
423
- children: localeService.t("threadCommentUI.item.delete")
458
+ children: localeService.t("thread-comment-ui.item.delete")
424
459
  }) })]
425
460
  })
426
461
  }),
@@ -486,6 +521,7 @@ const ThreadCommentTree = (props) => {
486
521
  const resolved = comments === null || comments === void 0 ? void 0 : comments.root.resolved;
487
522
  const currentUser = (0, _univerjs_ui.useObservable)(userManagerService.currentUser$);
488
523
  const editorRef = (0, react.useRef)(null);
524
+ const fallbackEditorId = (0, react.useMemo)(() => (0, _univerjs_core.generateRandomId)(6), []);
489
525
  const renderComments = [...comments ? [comments.root] : [{
490
526
  id: MOCK_ID,
491
527
  text: { dataStream: "\n\r" },
@@ -530,7 +566,13 @@ const ThreadCommentTree = (props) => {
530
566
  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);
531
567
  const editorVisible = showEdit && !editingId && !resolved;
532
568
  const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
533
- const threadCommentEditorId = `${_univerjs_core.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${location}`;
569
+ const threadCommentEditorId = getThreadCommentEditorId({
570
+ location,
571
+ unitId,
572
+ subUnitId,
573
+ commentId: id,
574
+ fallbackId: fallbackEditorId
575
+ });
534
576
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
535
577
  id: `${location}-${unitId}-${subUnitId}-${id}`,
536
578
  className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderClassName, {
@@ -649,6 +691,22 @@ const ThreadCommentTree = (props) => {
649
691
  });
650
692
  };
651
693
 
694
+ //#endregion
695
+ //#region src/views/thread-comment-panel/util.ts
696
+ function getThreadCommentPanelItemKey(comment, index, section) {
697
+ if (comment.id) return comment.id;
698
+ return [
699
+ "thread-comment-panel-temp",
700
+ section,
701
+ comment.unitId,
702
+ comment.subUnitId,
703
+ comment.threadId,
704
+ comment.ref,
705
+ comment.dT,
706
+ index
707
+ ].join("-");
708
+ }
709
+
652
710
  //#endregion
653
711
  //#region src/views/thread-comment-panel/index.tsx
654
712
  const ThreadCommentPanel = (props) => {
@@ -732,7 +790,7 @@ const ThreadCommentPanel = (props) => {
732
790
  const id = `${location}-${unitId}-${subUnitId}-${commentId}`;
733
791
  (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({ block: "center" });
734
792
  }, [activeCommentId]);
735
- const renderComment = (comment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentTree, {
793
+ const renderComment = (section) => (comment, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentTree, {
736
794
  location,
737
795
  getSubUnitName,
738
796
  id: comment.id,
@@ -757,7 +815,7 @@ const ThreadCommentPanel = (props) => {
757
815
  onAddComment,
758
816
  onDeleteComment,
759
817
  onResolve: (resolved) => onResolve === null || onResolve === void 0 ? void 0 : onResolve(comment.id, resolved)
760
- }, comment.id);
818
+ }, getThreadCommentPanelItemKey(comment, index, section));
761
819
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
762
820
  className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3",
763
821
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -767,10 +825,10 @@ const ThreadCommentPanel = (props) => {
767
825
  value: unit,
768
826
  options: [{
769
827
  value: "current",
770
- label: localeService.t("threadCommentUI.filter.sheet.current")
828
+ label: localeService.t("thread-comment-ui.filter.sheet.current")
771
829
  }, {
772
830
  value: "all",
773
- label: localeService.t("threadCommentUI.filter.sheet.all")
831
+ label: localeService.t("thread-comment-ui.filter.sheet.all")
774
832
  }],
775
833
  onChange: setUnit
776
834
  }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
@@ -779,47 +837,47 @@ const ThreadCommentPanel = (props) => {
779
837
  options: [
780
838
  {
781
839
  value: "all",
782
- label: localeService.t("threadCommentUI.filter.status.all")
840
+ label: localeService.t("thread-comment-ui.filter.status.all")
783
841
  },
784
842
  {
785
843
  value: "resolved",
786
- label: localeService.t("threadCommentUI.filter.status.resolved")
844
+ label: localeService.t("thread-comment-ui.filter.status.resolved")
787
845
  },
788
846
  {
789
847
  value: "unsolved",
790
- label: localeService.t("threadCommentUI.filter.status.unsolved")
848
+ label: localeService.t("thread-comment-ui.filter.status.unsolved")
791
849
  },
792
850
  {
793
851
  value: "concern_me",
794
- label: localeService.t("threadCommentUI.filter.status.concernMe")
852
+ label: localeService.t("thread-comment-ui.filter.status.concernMe")
795
853
  }
796
854
  ],
797
855
  onChange: setStatus
798
856
  })]
799
857
  }), renderComments.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
800
858
  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",
801
- children: [localeService.t("threadCommentUI.panel.empty"), isFiltering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
859
+ children: [localeService.t("thread-comment-ui.panel.empty"), isFiltering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
802
860
  className: "univer-mt-2 univer-flex univer-flex-row",
803
861
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
804
862
  onClick: onReset,
805
- children: localeService.t("threadCommentUI.panel.reset")
863
+ children: localeService.t("thread-comment-ui.panel.reset")
806
864
  })
807
865
  }) : !disableAdd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
808
866
  className: "univer-mt-2 univer-flex univer-flex-row",
809
867
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
810
868
  onClick: onAdd,
811
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1.5" }), localeService.t("threadCommentUI.panel.addComment")]
869
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1.5" }), localeService.t("thread-comment-ui.panel.addComment")]
812
870
  })
813
871
  }) : null]
814
872
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
815
873
  className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3",
816
874
  children: [
817
- unSolvedComments.map(renderComment),
875
+ unSolvedComments.map(renderComment("unsolved")),
818
876
  solvedComments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
819
877
  className: "univer-text-xs",
820
- children: localeService.t("threadCommentUI.panel.solved")
878
+ children: localeService.t("thread-comment-ui.panel.solved")
821
879
  }),
822
- solvedComments.map(renderComment)
880
+ solvedComments.map(renderComment("solved"))
823
881
  ]
824
882
  })]
825
883
  });
@@ -0,0 +1,37 @@
1
+
2
+ //#region src/locale/ar-SA.ts
3
+ const locale = { "thread-comment-ui": {
4
+ panel: {
5
+ title: "إدارة التعليقات",
6
+ empty: "لا توجد تعليقات بعد",
7
+ filterEmpty: "لا توجد نتائج مطابقة",
8
+ reset: "إعادة ضبط التصفية",
9
+ addComment: "إضافة تعليق",
10
+ solved: "تم الحل"
11
+ },
12
+ editor: {
13
+ placeholder: "رد أو إشارة إلى آخرين باستخدام @",
14
+ reply: "تعليق",
15
+ cancel: "إلغاء",
16
+ save: "حفظ"
17
+ },
18
+ item: {
19
+ edit: "تحرير",
20
+ delete: "حذف هذا التعليق"
21
+ },
22
+ filter: {
23
+ sheet: {
24
+ all: "كل الأوراق",
25
+ current: "الورقة الحالية"
26
+ },
27
+ status: {
28
+ all: "كل التعليقات",
29
+ resolved: "تم الحل",
30
+ unsolved: "لم يتم الحل",
31
+ concernMe: "يتعلق بي"
32
+ }
33
+ }
34
+ } };
35
+
36
+ //#endregion
37
+ module.exports = locale;
@@ -1,6 +1,6 @@
1
1
 
2
2
  //#region src/locale/ca-ES.ts
3
- const locale = { threadCommentUI: {
3
+ const locale = { "thread-comment-ui": {
4
4
  panel: {
5
5
  title: "Gestió de comentaris",
6
6
  empty: "Encara no hi ha comentaris",
@@ -0,0 +1,37 @@
1
+
2
+ //#region src/locale/de-DE.ts
3
+ const locale = { "thread-comment-ui": {
4
+ panel: {
5
+ title: "Kommentarverwaltung",
6
+ empty: "Noch keine Kommentare",
7
+ filterEmpty: "Kein Treffer",
8
+ reset: "Filter zurücksetzen",
9
+ addComment: "Kommentar hinzufügen",
10
+ solved: "Gelöst"
11
+ },
12
+ editor: {
13
+ placeholder: "Antworten oder andere mit @ erwähnen",
14
+ reply: "Kommentar",
15
+ cancel: "Abbrechen",
16
+ save: "Speichern"
17
+ },
18
+ item: {
19
+ edit: "Bearbeiten",
20
+ delete: "Diesen Kommentar löschen"
21
+ },
22
+ filter: {
23
+ sheet: {
24
+ all: "Alle Blätter",
25
+ current: "Aktuelles Blatt"
26
+ },
27
+ status: {
28
+ all: "Alle Kommentare",
29
+ resolved: "Gelöst",
30
+ unsolved: "Ungelöst",
31
+ concernMe: "Betrifft mich"
32
+ }
33
+ }
34
+ } };
35
+
36
+ //#endregion
37
+ module.exports = locale;
@@ -15,7 +15,7 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- const locale = { threadCommentUI: {
18
+ const locale = { "thread-comment-ui": {
19
19
  panel: {
20
20
  title: "Comment Management",
21
21
  empty: "No comments yet",
@@ -1,6 +1,6 @@
1
1
 
2
2
  //#region src/locale/es-ES.ts
3
- const locale = { threadCommentUI: {
3
+ const locale = { "thread-comment-ui": {
4
4
  panel: {
5
5
  title: "Gestión de comentarios",
6
6
  empty: "Aún no hay comentarios",
@@ -1,6 +1,6 @@
1
1
 
2
2
  //#region src/locale/fa-IR.ts
3
- const locale = { threadCommentUI: {
3
+ const locale = { "thread-comment-ui": {
4
4
  panel: {
5
5
  title: "مدیریت نظرات",
6
6
  empty: "هنوز نظری وجود ندارد",
@@ -1,6 +1,6 @@
1
1
 
2
2
  //#region src/locale/fr-FR.ts
3
- const locale = { threadCommentUI: {
3
+ const locale = { "thread-comment-ui": {
4
4
  panel: {
5
5
  title: "Gestion des commentaires",
6
6
  empty: "Pas encore de commentaires",
@@ -0,0 +1,37 @@
1
+
2
+ //#region src/locale/id-ID.ts
3
+ const locale = { "thread-comment-ui": {
4
+ panel: {
5
+ title: "Manajemen Komentar",
6
+ empty: "Belum ada komentar",
7
+ filterEmpty: "Tidak ada hasil yang cocok",
8
+ reset: "Atur Ulang Filter",
9
+ addComment: "Tambah Komentar",
10
+ solved: "Terselesaikan"
11
+ },
12
+ editor: {
13
+ placeholder: "Balas atau tambahkan orang lain dengan @",
14
+ reply: "Komentar",
15
+ cancel: "Batal",
16
+ save: "Simpan"
17
+ },
18
+ item: {
19
+ edit: "Edit",
20
+ delete: "Hapus Komentar Ini"
21
+ },
22
+ filter: {
23
+ sheet: {
24
+ all: "Semua lembar",
25
+ current: "Lembar saat ini"
26
+ },
27
+ status: {
28
+ all: "Semua komentar",
29
+ resolved: "Terselesaikan",
30
+ unsolved: "Belum terselesaikan",
31
+ concernMe: "Yang menyangkut saya"
32
+ }
33
+ }
34
+ } };
35
+
36
+ //#endregion
37
+ module.exports = locale;