@univerjs/thread-comment-ui 1.0.0-alpha.8 → 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.
- package/lib/cjs/index.js +20 -25
- package/lib/es/index.js +21 -26
- package/lib/index.js +21 -26
- package/lib/umd/index.js +3 -3
- package/package.json +10 -10
package/lib/cjs/index.js
CHANGED
|
@@ -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-
|
|
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)
|
|
@@ -308,8 +308,8 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
|
|
|
308
308
|
const editor = (0, react.useRef)(null);
|
|
309
309
|
const rootEditorId = type === _univerjs_core.UniverInstanceType.UNIVER_DOC ? _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
|
|
310
310
|
const [canSubmit, setCanSubmit] = (0, react.useState)(() => {
|
|
311
|
-
var _comment$text
|
|
312
|
-
return _univerjs_core.BuildTextUtils.transform.getPlainText((
|
|
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) ?? "");
|
|
313
313
|
});
|
|
314
314
|
const keyboardEventConfig = (0, react.useMemo)(() => ({
|
|
315
315
|
keyCodes: [{ keyCode: _univerjs_ui.KeyCode.ENTER }],
|
|
@@ -368,13 +368,14 @@ const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
|
|
|
368
368
|
className: "univer-w-full",
|
|
369
369
|
editorRef: editor,
|
|
370
370
|
editorId,
|
|
371
|
+
preserveHostFocus: true,
|
|
371
372
|
autoFocus,
|
|
372
373
|
keyboardEventConfig,
|
|
373
374
|
placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
|
|
374
375
|
initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
|
|
375
376
|
onChange: (data) => {
|
|
376
|
-
var _data$body
|
|
377
|
-
return setCanSubmit(_univerjs_core.BuildTextUtils.transform.getPlainText((
|
|
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) ?? ""));
|
|
378
379
|
},
|
|
379
380
|
onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
|
|
380
381
|
isSingle: false,
|
|
@@ -540,7 +541,6 @@ const ThreadCommentItem = (props) => {
|
|
|
540
541
|
});
|
|
541
542
|
};
|
|
542
543
|
const ThreadCommentTree = (props) => {
|
|
543
|
-
var _currentUser$userID, _comments$children, _comments$root$subUni;
|
|
544
544
|
const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
|
|
545
545
|
const threadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment.ThreadCommentModel);
|
|
546
546
|
const [isHover, setIsHover] = (0, react.useState)(false);
|
|
@@ -562,13 +562,13 @@ const ThreadCommentTree = (props) => {
|
|
|
562
562
|
const renderComments = [...comments ? [comments.root] : [{
|
|
563
563
|
id: MOCK_ID,
|
|
564
564
|
text: { dataStream: "\n\r" },
|
|
565
|
-
personId: (
|
|
566
|
-
ref: refStr
|
|
565
|
+
personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
|
|
566
|
+
ref: refStr ?? "",
|
|
567
567
|
dT: "",
|
|
568
568
|
unitId,
|
|
569
569
|
subUnitId,
|
|
570
570
|
threadId: ""
|
|
571
|
-
}], ...(
|
|
571
|
+
}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
|
|
572
572
|
const scroller = (0, react.useRef)(null);
|
|
573
573
|
const handleResolve = (e) => {
|
|
574
574
|
e.stopPropagation();
|
|
@@ -600,7 +600,7 @@ const ThreadCommentTree = (props) => {
|
|
|
600
600
|
(0, react.useEffect)(() => {
|
|
601
601
|
return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
602
602
|
}, []);
|
|
603
|
-
const subUnitName = getSubUnitName((
|
|
603
|
+
const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
|
|
604
604
|
const editorVisible = showEdit && !editingId && !resolved;
|
|
605
605
|
const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
|
|
606
606
|
const threadCommentEditorId = getThreadCommentEditorId({
|
|
@@ -698,18 +698,17 @@ const ThreadCommentTree = (props) => {
|
|
|
698
698
|
subUnitId,
|
|
699
699
|
editorId: threadCommentEditorId,
|
|
700
700
|
onSave: async ({ text, attachments }) => {
|
|
701
|
-
var _currentUser$userID2, _comments$root$thread;
|
|
702
701
|
const comment = {
|
|
703
702
|
text,
|
|
704
703
|
attachments,
|
|
705
704
|
dT: (0, _univerjs_thread_comment.getDT)(),
|
|
706
705
|
id: (0, _univerjs_core.generateRandomId)(),
|
|
707
706
|
ref: refStr,
|
|
708
|
-
personId: (
|
|
707
|
+
personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
|
|
709
708
|
parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
|
|
710
709
|
unitId,
|
|
711
710
|
subUnitId,
|
|
712
|
-
threadId: (
|
|
711
|
+
threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
|
|
713
712
|
};
|
|
714
713
|
if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
|
|
715
714
|
await commandService.executeCommand(_univerjs_thread_comment.AddCommentCommand.id, {
|
|
@@ -746,17 +745,13 @@ const ThreadCommentPanel = (props) => {
|
|
|
746
745
|
const location = "PANEL";
|
|
747
746
|
const currentUser = (0, _univerjs_ui.useObservable)(userService.currentUser$);
|
|
748
747
|
const comments = (0, react.useMemo)(() => {
|
|
749
|
-
|
|
750
|
-
const
|
|
751
|
-
const
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
|
|
757
|
-
users: i.relativeUsers
|
|
758
|
-
};
|
|
759
|
-
});
|
|
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
|
+
}));
|
|
760
755
|
if (showComments) {
|
|
761
756
|
const map = /* @__PURE__ */ new Map();
|
|
762
757
|
res.forEach((comment) => {
|
package/lib/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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
|
-
import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY,
|
|
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
4
|
import { BreakLineCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
|
|
5
5
|
import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
|
|
@@ -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-
|
|
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)
|
|
@@ -307,8 +307,8 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
|
|
|
307
307
|
const editor = useRef(null);
|
|
308
308
|
const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
|
|
309
309
|
const [canSubmit, setCanSubmit] = useState(() => {
|
|
310
|
-
var _comment$text
|
|
311
|
-
return BuildTextUtils.transform.getPlainText((
|
|
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) ?? "");
|
|
312
312
|
});
|
|
313
313
|
const keyboardEventConfig = useMemo(() => ({
|
|
314
314
|
keyCodes: [{ keyCode: KeyCode.ENTER }],
|
|
@@ -367,13 +367,14 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
|
|
|
367
367
|
className: "univer-w-full",
|
|
368
368
|
editorRef: editor,
|
|
369
369
|
editorId,
|
|
370
|
+
preserveHostFocus: true,
|
|
370
371
|
autoFocus,
|
|
371
372
|
keyboardEventConfig,
|
|
372
373
|
placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
|
|
373
374
|
initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
|
|
374
375
|
onChange: (data) => {
|
|
375
|
-
var _data$body
|
|
376
|
-
return setCanSubmit(BuildTextUtils.transform.getPlainText((
|
|
376
|
+
var _data$body;
|
|
377
|
+
return setCanSubmit(BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
|
|
377
378
|
},
|
|
378
379
|
onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
|
|
379
380
|
isSingle: false,
|
|
@@ -539,7 +540,6 @@ const ThreadCommentItem = (props) => {
|
|
|
539
540
|
});
|
|
540
541
|
};
|
|
541
542
|
const ThreadCommentTree = (props) => {
|
|
542
|
-
var _currentUser$userID, _comments$children, _comments$root$subUni;
|
|
543
543
|
const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
|
|
544
544
|
const threadCommentModel = useDependency(ThreadCommentModel);
|
|
545
545
|
const [isHover, setIsHover] = useState(false);
|
|
@@ -561,13 +561,13 @@ const ThreadCommentTree = (props) => {
|
|
|
561
561
|
const renderComments = [...comments ? [comments.root] : [{
|
|
562
562
|
id: MOCK_ID,
|
|
563
563
|
text: { dataStream: "\n\r" },
|
|
564
|
-
personId: (
|
|
565
|
-
ref: refStr
|
|
564
|
+
personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
|
|
565
|
+
ref: refStr ?? "",
|
|
566
566
|
dT: "",
|
|
567
567
|
unitId,
|
|
568
568
|
subUnitId,
|
|
569
569
|
threadId: ""
|
|
570
|
-
}], ...(
|
|
570
|
+
}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
|
|
571
571
|
const scroller = useRef(null);
|
|
572
572
|
const handleResolve = (e) => {
|
|
573
573
|
e.stopPropagation();
|
|
@@ -599,7 +599,7 @@ const ThreadCommentTree = (props) => {
|
|
|
599
599
|
useEffect(() => {
|
|
600
600
|
return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
601
601
|
}, []);
|
|
602
|
-
const subUnitName = getSubUnitName((
|
|
602
|
+
const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
|
|
603
603
|
const editorVisible = showEdit && !editingId && !resolved;
|
|
604
604
|
const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
|
|
605
605
|
const threadCommentEditorId = getThreadCommentEditorId({
|
|
@@ -697,18 +697,17 @@ const ThreadCommentTree = (props) => {
|
|
|
697
697
|
subUnitId,
|
|
698
698
|
editorId: threadCommentEditorId,
|
|
699
699
|
onSave: async ({ text, attachments }) => {
|
|
700
|
-
var _currentUser$userID2, _comments$root$thread;
|
|
701
700
|
const comment = {
|
|
702
701
|
text,
|
|
703
702
|
attachments,
|
|
704
703
|
dT: getDT(),
|
|
705
704
|
id: generateRandomId(),
|
|
706
705
|
ref: refStr,
|
|
707
|
-
personId: (
|
|
706
|
+
personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
|
|
708
707
|
parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
|
|
709
708
|
unitId,
|
|
710
709
|
subUnitId,
|
|
711
|
-
threadId: (
|
|
710
|
+
threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
|
|
712
711
|
};
|
|
713
712
|
if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
|
|
714
713
|
await commandService.executeCommand(AddCommentCommand.id, {
|
|
@@ -745,17 +744,13 @@ const ThreadCommentPanel = (props) => {
|
|
|
745
744
|
const location = "PANEL";
|
|
746
745
|
const currentUser = useObservable(userService.currentUser$);
|
|
747
746
|
const comments = useMemo(() => {
|
|
748
|
-
|
|
749
|
-
const
|
|
750
|
-
const
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
|
|
756
|
-
users: i.relativeUsers
|
|
757
|
-
};
|
|
758
|
-
});
|
|
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
|
+
}));
|
|
759
754
|
if (showComments) {
|
|
760
755
|
const map = /* @__PURE__ */ new Map();
|
|
761
756
|
res.forEach((comment) => {
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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
|
-
import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY,
|
|
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
4
|
import { BreakLineCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
|
|
5
5
|
import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
|
|
@@ -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-
|
|
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)
|
|
@@ -307,8 +307,8 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
|
|
|
307
307
|
const editor = useRef(null);
|
|
308
308
|
const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
|
|
309
309
|
const [canSubmit, setCanSubmit] = useState(() => {
|
|
310
|
-
var _comment$text
|
|
311
|
-
return BuildTextUtils.transform.getPlainText((
|
|
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) ?? "");
|
|
312
312
|
});
|
|
313
313
|
const keyboardEventConfig = useMemo(() => ({
|
|
314
314
|
keyCodes: [{ keyCode: KeyCode.ENTER }],
|
|
@@ -367,13 +367,14 @@ const ThreadCommentEditor = forwardRef((props, ref) => {
|
|
|
367
367
|
className: "univer-w-full",
|
|
368
368
|
editorRef: editor,
|
|
369
369
|
editorId,
|
|
370
|
+
preserveHostFocus: true,
|
|
370
371
|
autoFocus,
|
|
371
372
|
keyboardEventConfig,
|
|
372
373
|
placeholder: localeService.t("thread-comment-ui.editor.placeholder"),
|
|
373
374
|
initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
|
|
374
375
|
onChange: (data) => {
|
|
375
|
-
var _data$body
|
|
376
|
-
return setCanSubmit(BuildTextUtils.transform.getPlainText((
|
|
376
|
+
var _data$body;
|
|
377
|
+
return setCanSubmit(BuildTextUtils.transform.getPlainText(((_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) ?? ""));
|
|
377
378
|
},
|
|
378
379
|
onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
|
|
379
380
|
isSingle: false,
|
|
@@ -539,7 +540,6 @@ const ThreadCommentItem = (props) => {
|
|
|
539
540
|
});
|
|
540
541
|
};
|
|
541
542
|
const ThreadCommentTree = (props) => {
|
|
542
|
-
var _currentUser$userID, _comments$children, _comments$root$subUni;
|
|
543
543
|
const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
|
|
544
544
|
const threadCommentModel = useDependency(ThreadCommentModel);
|
|
545
545
|
const [isHover, setIsHover] = useState(false);
|
|
@@ -561,13 +561,13 @@ const ThreadCommentTree = (props) => {
|
|
|
561
561
|
const renderComments = [...comments ? [comments.root] : [{
|
|
562
562
|
id: MOCK_ID,
|
|
563
563
|
text: { dataStream: "\n\r" },
|
|
564
|
-
personId: (
|
|
565
|
-
ref: refStr
|
|
564
|
+
personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
|
|
565
|
+
ref: refStr ?? "",
|
|
566
566
|
dT: "",
|
|
567
567
|
unitId,
|
|
568
568
|
subUnitId,
|
|
569
569
|
threadId: ""
|
|
570
|
-
}], ...(
|
|
570
|
+
}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
|
|
571
571
|
const scroller = useRef(null);
|
|
572
572
|
const handleResolve = (e) => {
|
|
573
573
|
e.stopPropagation();
|
|
@@ -599,7 +599,7 @@ const ThreadCommentTree = (props) => {
|
|
|
599
599
|
useEffect(() => {
|
|
600
600
|
return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
601
601
|
}, []);
|
|
602
|
-
const subUnitName = getSubUnitName((
|
|
602
|
+
const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
|
|
603
603
|
const editorVisible = showEdit && !editingId && !resolved;
|
|
604
604
|
const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
|
|
605
605
|
const threadCommentEditorId = getThreadCommentEditorId({
|
|
@@ -697,18 +697,17 @@ const ThreadCommentTree = (props) => {
|
|
|
697
697
|
subUnitId,
|
|
698
698
|
editorId: threadCommentEditorId,
|
|
699
699
|
onSave: async ({ text, attachments }) => {
|
|
700
|
-
var _currentUser$userID2, _comments$root$thread;
|
|
701
700
|
const comment = {
|
|
702
701
|
text,
|
|
703
702
|
attachments,
|
|
704
703
|
dT: getDT(),
|
|
705
704
|
id: generateRandomId(),
|
|
706
705
|
ref: refStr,
|
|
707
|
-
personId: (
|
|
706
|
+
personId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) ?? "",
|
|
708
707
|
parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
|
|
709
708
|
unitId,
|
|
710
709
|
subUnitId,
|
|
711
|
-
threadId: (
|
|
710
|
+
threadId: (comments === null || comments === void 0 ? void 0 : comments.root.threadId) ?? ""
|
|
712
711
|
};
|
|
713
712
|
if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
|
|
714
713
|
await commandService.executeCommand(AddCommentCommand.id, {
|
|
@@ -745,17 +744,13 @@ const ThreadCommentPanel = (props) => {
|
|
|
745
744
|
const location = "PANEL";
|
|
746
745
|
const currentUser = useObservable(userService.currentUser$);
|
|
747
746
|
const comments = useMemo(() => {
|
|
748
|
-
|
|
749
|
-
const
|
|
750
|
-
const
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
|
|
756
|
-
users: i.relativeUsers
|
|
757
|
-
};
|
|
758
|
-
});
|
|
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
|
+
}));
|
|
759
754
|
if (showComments) {
|
|
760
755
|
const map = /* @__PURE__ */ new Map();
|
|
761
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/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-alpha.8`;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,n.UniverUIPlugin,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
|
|
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
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
|
|
4
|
-
\r`},personId:(
|
|
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-
|
|
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.
|
|
62
|
-
"@univerjs/core": "1.0.0-
|
|
63
|
-
"@univerjs/design": "1.0.0-
|
|
64
|
-
"@univerjs/docs-ui": "1.0.0-
|
|
65
|
-
"@univerjs/thread-comment": "1.0.0-
|
|
66
|
-
"@univerjs/ui": "1.0.0-
|
|
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.
|
|
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-
|
|
76
|
-
"@univerjs/engine-render": "1.0.0-
|
|
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",
|