@box/threaded-annotations 4.1.9 → 4.1.10
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/dist/chunks/annotation-badge.js +1 -64
- package/dist/chunks/custom-placeholder.js +1 -72
- package/dist/chunks/delete-annotations-message-popover.js +1 -46
- package/dist/chunks/delete-confirmation-popover.js +1 -67
- package/dist/chunks/dist.js +2 -1757
- package/dist/chunks/mention-component.js +1 -106
- package/dist/chunks/message-editor.module.js +1 -12
- package/dist/chunks/message-editor2.module.js +1 -29
- package/dist/chunks/message-header.js +1 -49
- package/dist/chunks/messages-view.js +1 -99
- package/dist/chunks/resolved-state.js +1 -55
- package/dist/chunks/show-replies-button.js +1 -60
- package/dist/chunks/text-message.js +1 -21
- package/dist/chunks/text-message.module.js +1 -14
- package/dist/chunks/threaded-annotations.js +1 -71
- package/dist/chunks/threaded-annotations2.js +1 -87
- package/dist/chunks/timestamp-toggle.js +1 -36
- package/dist/chunks/virtualized-messages.js +1 -30
- package/dist/esm/index.js +1 -8
- package/dist/esm/lib/components/mention-component/mention-component.js +1 -2
- package/dist/esm/lib/components/mention-component/mention-context.js +1 -26
- package/dist/esm/lib/components/message-editor/editor-extensions/custom-mention/custom-mention-suggestions.js +1 -23
- package/dist/esm/lib/components/message-editor/editor-extensions/custom-mention/custom-mention.js +1 -59
- package/dist/esm/lib/components/message-editor/editor-extensions/custom-mention/useMentionState.js +1 -24
- package/dist/esm/lib/components/message-editor/editor-extensions/custom-paragraph.js +1 -13
- package/dist/esm/lib/components/message-editor/editor-extensions/custom-placeholder/custom-placeholder-utils.js +1 -26
- package/dist/esm/lib/components/message-editor/editor-extensions/custom-placeholder/custom-placeholder.js +1 -2
- package/dist/esm/lib/components/message-editor/error-message.js +1 -17
- package/dist/esm/lib/components/message-editor/hooks/useMessageEditor.js +1 -69
- package/dist/esm/lib/components/message-editor/hooks/useMessagePost.js +1 -35
- package/dist/esm/lib/components/message-editor/message-editor-actions.js +1 -29
- package/dist/esm/lib/components/message-editor/message-editor-context.js +1 -7
- package/dist/esm/lib/components/message-editor/message-editor.js +1 -74
- package/dist/esm/lib/components/message-editor/messages.js +1 -44
- package/dist/esm/lib/components/message-editor/utils/getMessageEditorState.js +1 -9
- package/dist/esm/lib/components/message-header/delete-annotations-message-popover.js +1 -2
- package/dist/esm/lib/components/message-header/message-header.js +1 -2
- package/dist/esm/lib/components/message-header/messages.js +1 -32
- package/dist/esm/lib/components/messages-view/consts.js +1 -2
- package/dist/esm/lib/components/messages-view/hooks/useAutoScroll.js +1 -43
- package/dist/esm/lib/components/messages-view/hooks/useShowMoreReplies.js +1 -26
- package/dist/esm/lib/components/messages-view/hooks/useVirtualizedMessages.js +1 -17
- package/dist/esm/lib/components/messages-view/messages-view.js +1 -61
- package/dist/esm/lib/components/messages-view/messages.js +1 -12
- package/dist/esm/lib/components/messages-view/virtualized-messages.js +1 -2
- package/dist/esm/lib/components/text-message/message-renderer.js +1 -58
- package/dist/esm/lib/components/text-message/text-message.js +1 -2
- package/dist/esm/lib/components/user-avatar/getInitials.js +1 -5
- package/dist/esm/lib/components/user-avatar/messages.js +1 -12
- package/dist/esm/lib/components/user-avatar/user-avatar.js +1 -31
- package/dist/esm/lib/components/v2/annotation-badge/annotation-badge.js +1 -2
- package/dist/esm/lib/components/v2/annotation-badge/index.js +1 -2
- package/dist/esm/lib/components/v2/annotation-badge/messages.js +1 -12
- package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/custom-mention-suggestions.js +1 -23
- package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/custom-mention.js +1 -59
- package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/mention-trigger-normalization.js +1 -2
- package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.js +1 -27
- package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-paragraph.js +1 -13
- package/dist/esm/lib/components/v2/message-editor/hooks/useCharacterLimit.js +1 -24
- package/dist/esm/lib/components/v2/message-editor/hooks/useEditorContainerState.js +1 -21
- package/dist/esm/lib/components/v2/message-editor/hooks/useMentionUserSelection.js +1 -21
- package/dist/esm/lib/components/v2/message-editor/hooks/useMessageSubmit.js +1 -24
- package/dist/esm/lib/components/v2/message-editor/message-editor-context.js +1 -19
- package/dist/esm/lib/components/v2/message-editor/message-editor.js +1 -187
- package/dist/esm/lib/components/v2/message-editor/message-editor.types.js +1 -4
- package/dist/esm/lib/components/v2/message-editor/messages.js +1 -52
- package/dist/esm/lib/components/v2/message-editor/subcomponents/character-limit-counter.js +1 -26
- package/dist/esm/lib/components/v2/message-editor/subcomponents/edit-buttons.js +1 -32
- package/dist/esm/lib/components/v2/message-editor/subcomponents/error-message.js +1 -22
- package/dist/esm/lib/components/v2/message-editor/subcomponents/post-button.js +1 -29
- package/dist/esm/lib/components/v2/message-editor/subcomponents/timestamp-toggle.js +1 -2
- package/dist/esm/lib/components/v2/message-header/delete-confirmation-popover.js +1 -2
- package/dist/esm/lib/components/v2/message-header/message-header.js +1 -90
- package/dist/esm/lib/components/v2/message-header/message-options-menu.js +1 -49
- package/dist/esm/lib/components/v2/message-header/messages.js +2 -48
- package/dist/esm/lib/components/v2/messages-view/hooks/useAutoScroll.js +1 -69
- package/dist/esm/lib/components/v2/messages-view/messages-view.js +1 -2
- package/dist/esm/lib/components/v2/resolved-state/messages.js +1 -12
- package/dist/esm/lib/components/v2/resolved-state/resolved-state.js +1 -2
- package/dist/esm/lib/components/v2/show-replies-button/messages.js +1 -12
- package/dist/esm/lib/components/v2/show-replies-button/show-replies-button.js +1 -2
- package/dist/esm/lib/components/v2/text-message/constants.js +1 -2
- package/dist/esm/lib/components/v2/text-message/messages.js +1 -32
- package/dist/esm/lib/components/v2/text-message/subcomponents/message-footer.js +1 -64
- package/dist/esm/lib/components/v2/text-message/subcomponents/message-renderer.js +1 -87
- package/dist/esm/lib/components/v2/text-message/subcomponents/truncate-document.js +1 -113
- package/dist/esm/lib/components/v2/text-message/subcomponents/url-segments.js +1 -38
- package/dist/esm/lib/components/v2/text-message/text-message.js +1 -79
- package/dist/esm/lib/components/v2/user-avatar/getInitials.js +1 -5
- package/dist/esm/lib/components/v2/user-avatar/messages.js +1 -12
- package/dist/esm/lib/components/v2/user-avatar/user-avatar.js +1 -37
- package/dist/esm/lib/messages.js +1 -24
- package/dist/esm/lib/threaded-annotations.js +1 -2
- package/dist/esm/lib/utils/getErrorMessage.js +1 -2
- package/dist/esm/lib/v2/constants.js +1 -2
- package/dist/esm/lib/v2/messages.js +1 -6
- package/dist/esm/lib/v2/resin-targets.js +1 -25
- package/dist/esm/lib/v2/threaded-annotations-context.js +1 -61
- package/dist/esm/lib/v2/threaded-annotations.js +1 -2
- package/dist/esm/lib/v2/types/annotation-badge-types.js +1 -4
- package/dist/esm/lib/v2/types/index.js +1 -2
- package/dist/esm/lib/v2/utils/build-mention-content.js +1 -20
- package/dist/esm/lib/v2/utils/serialize-mention-markup.js +2 -12
- package/package.json +12 -12
|
@@ -1,21 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useCallback as t } from "react";
|
|
3
|
-
import { v4 as n } from "uuid";
|
|
4
|
-
var r = (r) => {
|
|
5
|
-
let { openPopoverForMentionId: i, fetchCollaboratorState: a } = e();
|
|
6
|
-
return { onUserSelected: t(async (e) => {
|
|
7
|
-
if (!r || r.editor.isDestroyed) return;
|
|
8
|
-
let { command: t, editor: o } = r, s = n();
|
|
9
|
-
t({
|
|
10
|
-
mentionedUserName: e.name,
|
|
11
|
-
mentionedUserId: e.id.toString(),
|
|
12
|
-
mentionedUserEmail: e.email,
|
|
13
|
-
mentionId: s
|
|
14
|
-
}), o.commands.focus(), (await a?.(e) ?? !1) || i?.(s, e);
|
|
15
|
-
}, [
|
|
16
|
-
r,
|
|
17
|
-
i,
|
|
18
|
-
a
|
|
19
|
-
]) };
|
|
20
|
-
};
|
|
21
|
-
export { r as useMentionUserSelection };
|
|
1
|
+
import{useMentionContext}from"../../../mention-component/mention-context.js";import{useCallback}from"react";import{v4}from"uuid";var useMentionUserSelection=target=>{let{openPopoverForMentionId,fetchCollaboratorState}=useMentionContext();return{onUserSelected:useCallback(async user=>{if(!target||target.editor.isDestroyed)return;let{command,editor}=target,mentionId=v4();command({mentionedUserName:user.name,mentionedUserId:user.id.toString(),mentionedUserEmail:user.email,mentionId}),editor.commands.focus(),(await fetchCollaboratorState?.(user)??!1)||openPopoverForMentionId?.(mentionId,user)},[target,openPopoverForMentionId,fetchCollaboratorState])}};export{useMentionUserSelection};
|
|
@@ -1,24 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getErrorMessage as t } from "../../../../utils/getErrorMessage.js";
|
|
3
|
-
import { useMessageEditorContext as n } from "../message-editor-context.js";
|
|
4
|
-
var r = ({ onSubmit: r, onSubmitError: i, onSuccess: a, cleanEditor: o, getEditorJsonContent: s }) => {
|
|
5
|
-
let { setErrorMessage: c, setIsLoading: l } = n(), { closeAllPopovers: u } = e();
|
|
6
|
-
return { handleSubmit: async () => {
|
|
7
|
-
let e = s();
|
|
8
|
-
try {
|
|
9
|
-
l(!0), c(null);
|
|
10
|
-
let t = r(e);
|
|
11
|
-
await (t instanceof Promise ? t : Promise.resolve()), o?.(), a?.();
|
|
12
|
-
} catch (e) {
|
|
13
|
-
let n = i?.(e);
|
|
14
|
-
if (n) {
|
|
15
|
-
c(n);
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
c(t(e));
|
|
19
|
-
} finally {
|
|
20
|
-
l(!1), u?.();
|
|
21
|
-
}
|
|
22
|
-
} };
|
|
23
|
-
};
|
|
24
|
-
export { r as useMessageSubmit };
|
|
1
|
+
import{useMentionContext}from"../../../mention-component/mention-context.js";import{getErrorMessage}from"../../../../utils/getErrorMessage.js";import{useMessageEditorContext}from"../message-editor-context.js";var useMessageSubmit=({onSubmit,onSubmitError,onSuccess,cleanEditor,getEditorJsonContent})=>{let{setErrorMessage,setIsLoading}=useMessageEditorContext(),{closeAllPopovers}=useMentionContext();return{handleSubmit:async()=>{let content=getEditorJsonContent();try{setIsLoading(!0),setErrorMessage(null);let result=onSubmit(content);await(result instanceof Promise?result:Promise.resolve()),cleanEditor?.(),onSuccess?.()}catch(error){let callbackErrorMessage=onSubmitError?.(error);if(callbackErrorMessage){setErrorMessage(callbackErrorMessage);return}setErrorMessage(getErrorMessage(error))}finally{setIsLoading(!1),closeAllPopovers?.()}}}};export{useMessageSubmit};
|
|
@@ -1,19 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
-
var i = /*#__PURE__*/ e(void 0), a = ({ children: e }) => {
|
|
4
|
-
let [t, a] = n(null), [o, s] = n(!1);
|
|
5
|
-
return /* @__PURE__ */ r(i.Provider, {
|
|
6
|
-
value: {
|
|
7
|
-
errorMessage: t,
|
|
8
|
-
setErrorMessage: a,
|
|
9
|
-
isLoading: o,
|
|
10
|
-
setIsLoading: s
|
|
11
|
-
},
|
|
12
|
-
children: e
|
|
13
|
-
});
|
|
14
|
-
}, o = () => {
|
|
15
|
-
let e = t(i);
|
|
16
|
-
if (e === void 0) throw Error("useMessageEditorContext must be used within a MessageEditorProvider");
|
|
17
|
-
return e;
|
|
18
|
-
};
|
|
19
|
-
export { a as MessageEditorProvider, o as useMessageEditorContext };
|
|
1
|
+
import{createContext,useContext,useState}from"react";import{jsx}from"react/jsx-runtime";var MessageEditorContext=createContext(void 0),MessageEditorProvider=({children})=>{let[errorMessage,setErrorMessage]=useState(null),[isLoading,setIsLoading]=useState(!1);return jsx(MessageEditorContext.Provider,{value:{errorMessage,setErrorMessage,isLoading,setIsLoading},children})},useMessageEditorContext=()=>{let context=useContext(MessageEditorContext);if(context===void 0)throw Error(`useMessageEditorContext must be used within a MessageEditorProvider`);return context};export{MessageEditorProvider,useMessageEditorContext};
|
|
@@ -1,187 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useMentionContext as t } from "../../mention-component/mention-context.js";
|
|
3
|
-
import { CustomMention as n } from "./editor-extensions/custom-mention/custom-mention.js";
|
|
4
|
-
import { createSuggestionOptions as r } from "./editor-extensions/custom-mention/custom-mention-suggestions.js";
|
|
5
|
-
import { MENTION_PLUGIN_KEY as i, normalizeMentionPastedText as ee, normalizeMentionTextInput as a } from "./editor-extensions/custom-mention/mention-trigger-normalization.js";
|
|
6
|
-
import { useMentionState as te } from "./editor-extensions/custom-mention/useMentionState.js";
|
|
7
|
-
import { CustomParagraph as ne } from "./editor-extensions/custom-paragraph.js";
|
|
8
|
-
import { useCharacterLimit as re } from "./hooks/useCharacterLimit.js";
|
|
9
|
-
import { useEditorContainerState as o } from "./hooks/useEditorContainerState.js";
|
|
10
|
-
import { useMentionUserSelection as ie } from "./hooks/useMentionUserSelection.js";
|
|
11
|
-
import { MessageEditorProvider as s, useMessageEditorContext as ae } from "./message-editor-context.js";
|
|
12
|
-
import c from "./messages.js";
|
|
13
|
-
import { t as l } from "../../../../../chunks/message-editor2.module.js";
|
|
14
|
-
import { CharacterLimitCounter as u } from "./subcomponents/character-limit-counter.js";
|
|
15
|
-
import { EditButtons as d } from "./subcomponents/edit-buttons.js";
|
|
16
|
-
import { ErrorMessage as f } from "./subcomponents/error-message.js";
|
|
17
|
-
import { PostButton as p } from "./subcomponents/post-button.js";
|
|
18
|
-
import { t as m } from "../../../../../chunks/timestamp-toggle.js";
|
|
19
|
-
import { MessageEditorVariant as h } from "./message-editor.types.js";
|
|
20
|
-
import { VisuallyHidden as oe } from "@box/blueprint-web";
|
|
21
|
-
import g from "clsx";
|
|
22
|
-
import { useEffect as _, useMemo as se, useRef as v } from "react";
|
|
23
|
-
import { useIntl as ce } from "react-intl";
|
|
24
|
-
import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
|
|
25
|
-
import { UserSelectorHeadless as le } from "@box/user-selector";
|
|
26
|
-
import { EditorContent as S, useEditor as C } from "@tiptap/react";
|
|
27
|
-
import w from "@tiptap/extension-document";
|
|
28
|
-
import T from "@tiptap/extension-text";
|
|
29
|
-
import { Placeholder as ue } from "@tiptap/extensions";
|
|
30
|
-
var E = (s) => {
|
|
31
|
-
let { autoFocus: E = !0, disableComponent: D = !1, initialContent: O, isFirstAnnotation: k = !1, isReply: de = !1, maxCharacterCount: A, userSelectorProps: j, videoTimestamp: M } = s, N = v(null), P = v(null), F = v(null), I = ce(), { errorMessage: L, isLoading: R } = ae(), { close: z, isActive: B, query: V, command: H, suggestionCallbacks: fe } = te(N), { closeAllPopovers: pe } = t(), U = I.formatMessage(de ? c.placeholderReply : c.placeholderAddComment), W = s.variant === h.EDIT_MESSAGE, G = C({
|
|
32
|
-
shouldRerenderOnTransaction: !0,
|
|
33
|
-
extensions: [
|
|
34
|
-
w,
|
|
35
|
-
ne,
|
|
36
|
-
ue.configure({
|
|
37
|
-
placeholder: U,
|
|
38
|
-
showOnlyWhenEditable: !1
|
|
39
|
-
}),
|
|
40
|
-
T,
|
|
41
|
-
n.configure({ suggestion: r(i, "@", fe) })
|
|
42
|
-
],
|
|
43
|
-
autofocus: E,
|
|
44
|
-
content: O,
|
|
45
|
-
editorProps: {
|
|
46
|
-
attributes: { class: l.editor },
|
|
47
|
-
handleTextInput: a,
|
|
48
|
-
transformPastedText: ee
|
|
49
|
-
},
|
|
50
|
-
onCreate: ({ editor: e }) => {
|
|
51
|
-
F.current = e.view.dom, E && e.commands.focus("end");
|
|
52
|
-
},
|
|
53
|
-
onUpdate: () => {
|
|
54
|
-
pe?.();
|
|
55
|
-
}
|
|
56
|
-
}, [U]), { onUserSelected: me } = ie(se(() => H && G && !G.isDestroyed ? {
|
|
57
|
-
command: H,
|
|
58
|
-
editor: G
|
|
59
|
-
} : null, [H, G])), { exceedsSingleLine: he, hasScroll: K, isAtBottom: q } = o(P, G), J = re(G, O, A), Y = W || !k || k && he, ge = !G || G?.isEmpty, X = D || R, Z = (J?.excess ?? 0) > 0, Q = ge || X || Z, $ = J && J.excess > 0 && Y;
|
|
60
|
-
_(() => {
|
|
61
|
-
G && G.setEditable(!X);
|
|
62
|
-
}, [G, X]), _(() => {
|
|
63
|
-
if (!Z || !P.current || !O) return;
|
|
64
|
-
let e = 0, t = requestAnimationFrame(() => {
|
|
65
|
-
e = requestAnimationFrame(() => {
|
|
66
|
-
P.current?.scrollTo({ top: P.current.scrollHeight });
|
|
67
|
-
});
|
|
68
|
-
});
|
|
69
|
-
return () => {
|
|
70
|
-
cancelAnimationFrame(t), cancelAnimationFrame(e);
|
|
71
|
-
};
|
|
72
|
-
}, [Z]), _(() => {
|
|
73
|
-
!G || O === void 0 || queueMicrotask(() => {
|
|
74
|
-
G.isDestroyed || (G.commands.setContent(O ?? "", { emitUpdate: !1 }), E && G.commands.focus("end"));
|
|
75
|
-
});
|
|
76
|
-
}, [O]), _(() => {
|
|
77
|
-
if (!B) return;
|
|
78
|
-
let t = `[${Object.keys(e)[0]}]`, n = (e) => {
|
|
79
|
-
if (P.current?.contains(e)) return !0;
|
|
80
|
-
let n = document.querySelectorAll(t);
|
|
81
|
-
for (let t of n) if (t.contains(e)) return !0;
|
|
82
|
-
return !1;
|
|
83
|
-
}, r = (e) => {
|
|
84
|
-
let t = e.target;
|
|
85
|
-
!t || n(t) || z();
|
|
86
|
-
}, i = requestAnimationFrame(() => {
|
|
87
|
-
document.addEventListener("mousedown", r), document.addEventListener("focusin", r);
|
|
88
|
-
});
|
|
89
|
-
return () => {
|
|
90
|
-
cancelAnimationFrame(i), document.removeEventListener("mousedown", r), document.removeEventListener("focusin", r);
|
|
91
|
-
};
|
|
92
|
-
}, [z, B]);
|
|
93
|
-
let _e = /* @__PURE__ */ b("div", { className: l.anchorElement });
|
|
94
|
-
return /* @__PURE__ */ b("div", {
|
|
95
|
-
"data-no-expand": !0,
|
|
96
|
-
className: l.messageEditorWrapper,
|
|
97
|
-
children: /* @__PURE__ */ x("div", {
|
|
98
|
-
className: g(l.messageEditor, {
|
|
99
|
-
[l.editorHasScroll]: K,
|
|
100
|
-
[l.editorEditMode]: W,
|
|
101
|
-
[l.editorError]: L || Z,
|
|
102
|
-
[l.editorFirstAnnotation]: !W && k,
|
|
103
|
-
[l.editorCharacterLimitExceeded]: Z
|
|
104
|
-
}),
|
|
105
|
-
children: [/* @__PURE__ */ x("div", {
|
|
106
|
-
className: g(l.editorViewport, { [l.editorFullWidth]: Y }),
|
|
107
|
-
children: [/* @__PURE__ */ x("div", {
|
|
108
|
-
ref: P,
|
|
109
|
-
className: l.editorContainer,
|
|
110
|
-
"aria-label": I.formatMessage(c.scrollContainerAriaLabel),
|
|
111
|
-
children: [/* @__PURE__ */ b(S, {
|
|
112
|
-
"aria-label": I.formatMessage(c.editorContentAriaLabel),
|
|
113
|
-
editor: G
|
|
114
|
-
}), /* @__PURE__ */ b(le, {
|
|
115
|
-
ref: N,
|
|
116
|
-
inputElementRef: F,
|
|
117
|
-
onSelectedUserChange: me,
|
|
118
|
-
open: B,
|
|
119
|
-
rootElement: _e,
|
|
120
|
-
value: V,
|
|
121
|
-
...j,
|
|
122
|
-
popoverContentContainerProps: {
|
|
123
|
-
...j.popoverContentContainerProps,
|
|
124
|
-
...e,
|
|
125
|
-
avoidCollisions: !0
|
|
126
|
-
}
|
|
127
|
-
})]
|
|
128
|
-
}), K && /* @__PURE__ */ b("div", {
|
|
129
|
-
className: g(l.editorFade, { [l.editorFadeHidden]: q }),
|
|
130
|
-
"aria-hidden": "true"
|
|
131
|
-
})]
|
|
132
|
-
}), /* @__PURE__ */ b("div", {
|
|
133
|
-
className: g(l.actionsWrapper, { [l.withTimestampToggle]: !!M }),
|
|
134
|
-
children: /* @__PURE__ */ x("div", {
|
|
135
|
-
className: g(l.actionsWrapperInner, {
|
|
136
|
-
[l.scrolledToBottom]: q,
|
|
137
|
-
[l.characterLimitExceeded]: Z
|
|
138
|
-
}),
|
|
139
|
-
children: [
|
|
140
|
-
L && /* @__PURE__ */ b(f, { errorMessage: L }),
|
|
141
|
-
J && J.excess > 0 && !Y && /* @__PURE__ */ b(oe, {
|
|
142
|
-
role: "alert",
|
|
143
|
-
children: I.formatMessage(c.characterLimitExceeded, { excess: J.excess })
|
|
144
|
-
}),
|
|
145
|
-
M && /* @__PURE__ */ b(m, {
|
|
146
|
-
className: l.timestampToggle,
|
|
147
|
-
disabled: X,
|
|
148
|
-
formattedTimestamp: M.formattedTimestamp,
|
|
149
|
-
isPressed: M.isPressed,
|
|
150
|
-
onChange: M.onPressedChange
|
|
151
|
-
}),
|
|
152
|
-
W ? /* @__PURE__ */ x("div", {
|
|
153
|
-
className: l.editActionsColumn,
|
|
154
|
-
children: [$ && /* @__PURE__ */ b(u, {
|
|
155
|
-
count: J.count,
|
|
156
|
-
excess: J.excess,
|
|
157
|
-
maxCount: J.maxCount
|
|
158
|
-
}), /* @__PURE__ */ b("div", {
|
|
159
|
-
className: l.editActionsRow,
|
|
160
|
-
children: /* @__PURE__ */ b(d, {
|
|
161
|
-
disabled: Q,
|
|
162
|
-
getEditorJsonContent: () => G?.getJSON(),
|
|
163
|
-
onCancel: s.onEditCancel,
|
|
164
|
-
onEditSuccess: s.onEditSuccess,
|
|
165
|
-
onSave: s.onSave,
|
|
166
|
-
onSaveError: s.onSaveError
|
|
167
|
-
})
|
|
168
|
-
})]
|
|
169
|
-
}) : /* @__PURE__ */ x(y, { children: [$ && /* @__PURE__ */ b(u, {
|
|
170
|
-
count: J.count,
|
|
171
|
-
excess: J.excess,
|
|
172
|
-
maxCount: J.maxCount
|
|
173
|
-
}), /* @__PURE__ */ b(p, {
|
|
174
|
-
cleanEditor: () => G?.commands.setContent("", { emitUpdate: !1 }),
|
|
175
|
-
disabled: Q,
|
|
176
|
-
getEditorJsonContent: () => G?.getJSON(),
|
|
177
|
-
onPost: s.onPost,
|
|
178
|
-
onPostError: s.onPostError,
|
|
179
|
-
onPostSuccess: s.onPostSuccess
|
|
180
|
-
})] })
|
|
181
|
-
]
|
|
182
|
-
})
|
|
183
|
-
})]
|
|
184
|
-
})
|
|
185
|
-
});
|
|
186
|
-
}, D = (e) => /* @__PURE__ */ b(s, { children: /* @__PURE__ */ b(E, { ...e }) });
|
|
187
|
-
export { D as MessageEditor, h as MessageEditorVariant };
|
|
1
|
+
import{THREADED_ANNOTATIONS_PORTAL}from"../../../v2/constants.js";import{useMentionContext}from"../../mention-component/mention-context.js";import{CustomMention}from"./editor-extensions/custom-mention/custom-mention.js";import{createSuggestionOptions}from"./editor-extensions/custom-mention/custom-mention-suggestions.js";import{MENTION_PLUGIN_KEY,normalizeMentionPastedText,normalizeMentionTextInput}from"./editor-extensions/custom-mention/mention-trigger-normalization.js";import{useMentionState}from"./editor-extensions/custom-mention/useMentionState.js";import{CustomParagraph}from"./editor-extensions/custom-paragraph.js";import{useCharacterLimit}from"./hooks/useCharacterLimit.js";import{useEditorContainerState}from"./hooks/useEditorContainerState.js";import{useMentionUserSelection}from"./hooks/useMentionUserSelection.js";import{MessageEditorProvider,useMessageEditorContext}from"./message-editor-context.js";import messages from"./messages.js";import{t as message_editor_module_default}from"../../../../../chunks/message-editor2.module.js";import{CharacterLimitCounter}from"./subcomponents/character-limit-counter.js";import{EditButtons}from"./subcomponents/edit-buttons.js";import{ErrorMessage}from"./subcomponents/error-message.js";import{PostButton}from"./subcomponents/post-button.js";import{t as TimestampToggle}from"../../../../../chunks/timestamp-toggle.js";import{MessageEditorVariant}from"./message-editor.types.js";import{VisuallyHidden}from"@box/blueprint-web";import clsx from"clsx";import{useEffect,useMemo,useRef}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{UserSelectorHeadless}from"@box/user-selector";import{EditorContent,useEditor}from"@tiptap/react";import Document from"@tiptap/extension-document";import Text$1 from"@tiptap/extension-text";import{Placeholder}from"@tiptap/extensions";var MessageEditorContent=props=>{let{autoFocus=!0,disableComponent=!1,initialContent,isFirstAnnotation=!1,isReply=!1,maxCharacterCount,userSelectorProps,videoTimestamp}=props,userSelectorRef=useRef(null),editorContainerRef=useRef(null),editorRef=useRef(null),intl=useIntl(),{errorMessage,isLoading}=useMessageEditorContext(),{close:closeMentionDropdown,isActive,query,command,suggestionCallbacks}=useMentionState(userSelectorRef),{closeAllPopovers}=useMentionContext(),placeholderText=intl.formatMessage(isReply?messages.placeholderReply:messages.placeholderAddComment),isEditVariant=props.variant===MessageEditorVariant.EDIT_MESSAGE,editor=useEditor({shouldRerenderOnTransaction:!0,extensions:[Document,CustomParagraph,Placeholder.configure({placeholder:placeholderText,showOnlyWhenEditable:!1}),Text$1,CustomMention.configure({suggestion:createSuggestionOptions(MENTION_PLUGIN_KEY,`@`,suggestionCallbacks)})],autofocus:autoFocus,content:initialContent,editorProps:{attributes:{class:message_editor_module_default.editor},handleTextInput:normalizeMentionTextInput,transformPastedText:normalizeMentionPastedText},onCreate:({editor:editorInstance})=>{editorRef.current=editorInstance.view.dom,autoFocus&&editorInstance.commands.focus(`end`)},onUpdate:()=>{closeAllPopovers?.()}},[placeholderText]),{onUserSelected}=useMentionUserSelection(useMemo(()=>command&&editor&&!editor.isDestroyed?{command,editor}:null,[command,editor])),{exceedsSingleLine,hasScroll,isAtBottom}=useEditorContainerState(editorContainerRef,editor),characterLimitState=useCharacterLimit(editor,initialContent,maxCharacterCount),shouldApplyEditorFullWidth=isEditVariant||!isFirstAnnotation||isFirstAnnotation&&exceedsSingleLine,isEditorEmpty=!editor||editor?.isEmpty,disableEditor=disableComponent||isLoading,isCharacterLimitExceeded=(characterLimitState?.excess??0)>0,isPostDisabled=isEditorEmpty||disableEditor||isCharacterLimitExceeded,showCharacterLimitCounter=characterLimitState&&characterLimitState.excess>0&&shouldApplyEditorFullWidth;useEffect(()=>{editor&&editor.setEditable(!disableEditor)},[editor,disableEditor]),useEffect(()=>{if(!isCharacterLimitExceeded||!editorContainerRef.current||!initialContent)return;let innerFrameId=0,outerFrameId=requestAnimationFrame(()=>{innerFrameId=requestAnimationFrame(()=>{editorContainerRef.current?.scrollTo({top:editorContainerRef.current.scrollHeight})})});return()=>{cancelAnimationFrame(outerFrameId),cancelAnimationFrame(innerFrameId)}},[isCharacterLimitExceeded]),useEffect(()=>{!editor||initialContent===void 0||queueMicrotask(()=>{editor.isDestroyed||(editor.commands.setContent(initialContent??``,{emitUpdate:!1}),autoFocus&&editor.commands.focus(`end`))})},[initialContent]),useEffect(()=>{if(!isActive)return;let portalSelector=`[${Object.keys(THREADED_ANNOTATIONS_PORTAL)[0]}]`,isInsideEditorOrPortal=target=>{if(editorContainerRef.current?.contains(target))return!0;let portals=document.querySelectorAll(portalSelector);for(let portal of portals)if(portal.contains(target))return!0;return!1},handleClose=e=>{let target=e.target;!target||isInsideEditorOrPortal(target)||closeMentionDropdown()},frameId=requestAnimationFrame(()=>{document.addEventListener(`mousedown`,handleClose),document.addEventListener(`focusin`,handleClose)});return()=>{cancelAnimationFrame(frameId),document.removeEventListener(`mousedown`,handleClose),document.removeEventListener(`focusin`,handleClose)}},[closeMentionDropdown,isActive]);let anchorElement=jsx(`div`,{className:message_editor_module_default.anchorElement});return jsx(`div`,{"data-no-expand":!0,className:message_editor_module_default.messageEditorWrapper,children:jsxs(`div`,{className:clsx(message_editor_module_default.messageEditor,{[message_editor_module_default.editorHasScroll]:hasScroll,[message_editor_module_default.editorEditMode]:isEditVariant,[message_editor_module_default.editorError]:errorMessage||isCharacterLimitExceeded,[message_editor_module_default.editorFirstAnnotation]:!isEditVariant&&isFirstAnnotation,[message_editor_module_default.editorCharacterLimitExceeded]:isCharacterLimitExceeded}),children:[jsxs(`div`,{className:clsx(message_editor_module_default.editorViewport,{[message_editor_module_default.editorFullWidth]:shouldApplyEditorFullWidth}),children:[jsxs(`div`,{ref:editorContainerRef,className:message_editor_module_default.editorContainer,"aria-label":intl.formatMessage(messages.scrollContainerAriaLabel),children:[jsx(EditorContent,{"aria-label":intl.formatMessage(messages.editorContentAriaLabel),editor}),jsx(UserSelectorHeadless,{ref:userSelectorRef,inputElementRef:editorRef,onSelectedUserChange:onUserSelected,open:isActive,rootElement:anchorElement,value:query,...userSelectorProps,popoverContentContainerProps:{...userSelectorProps.popoverContentContainerProps,...THREADED_ANNOTATIONS_PORTAL,avoidCollisions:!0}})]}),hasScroll&&jsx(`div`,{className:clsx(message_editor_module_default.editorFade,{[message_editor_module_default.editorFadeHidden]:isAtBottom}),"aria-hidden":`true`})]}),jsx(`div`,{className:clsx(message_editor_module_default.actionsWrapper,{[message_editor_module_default.withTimestampToggle]:!!videoTimestamp}),children:jsxs(`div`,{className:clsx(message_editor_module_default.actionsWrapperInner,{[message_editor_module_default.scrolledToBottom]:isAtBottom,[message_editor_module_default.characterLimitExceeded]:isCharacterLimitExceeded}),children:[errorMessage&&jsx(ErrorMessage,{errorMessage}),characterLimitState&&characterLimitState.excess>0&&!shouldApplyEditorFullWidth&&jsx(VisuallyHidden,{role:`alert`,children:intl.formatMessage(messages.characterLimitExceeded,{excess:characterLimitState.excess})}),videoTimestamp&&jsx(TimestampToggle,{className:message_editor_module_default.timestampToggle,disabled:disableEditor,formattedTimestamp:videoTimestamp.formattedTimestamp,isPressed:videoTimestamp.isPressed,onChange:videoTimestamp.onPressedChange}),isEditVariant?jsxs(`div`,{className:message_editor_module_default.editActionsColumn,children:[showCharacterLimitCounter&&jsx(CharacterLimitCounter,{count:characterLimitState.count,excess:characterLimitState.excess,maxCount:characterLimitState.maxCount}),jsx(`div`,{className:message_editor_module_default.editActionsRow,children:jsx(EditButtons,{disabled:isPostDisabled,getEditorJsonContent:()=>editor?.getJSON(),onCancel:props.onEditCancel,onEditSuccess:props.onEditSuccess,onSave:props.onSave,onSaveError:props.onSaveError})})]}):jsxs(Fragment,{children:[showCharacterLimitCounter&&jsx(CharacterLimitCounter,{count:characterLimitState.count,excess:characterLimitState.excess,maxCount:characterLimitState.maxCount}),jsx(PostButton,{cleanEditor:()=>editor?.commands.setContent(``,{emitUpdate:!1}),disabled:isPostDisabled,getEditorJsonContent:()=>editor?.getJSON(),onPost:props.onPost,onPostError:props.onPostError,onPostSuccess:props.onPostSuccess})]})]})})]})})},MessageEditor=props=>jsx(MessageEditorProvider,{children:jsx(MessageEditorContent,{...props})});export{MessageEditor,MessageEditorVariant};
|
|
@@ -1,4 +1 @@
|
|
|
1
|
-
var
|
|
2
|
-
return e.CREATE_MESSAGE = "CREATE_MESSAGE", e.EDIT_MESSAGE = "EDIT_MESSAGE", e;
|
|
3
|
-
}({});
|
|
4
|
-
export { e as MessageEditorVariant };
|
|
1
|
+
var MessageEditorVariant=function(MessageEditorVariant){return MessageEditorVariant.CREATE_MESSAGE=`CREATE_MESSAGE`,MessageEditorVariant.EDIT_MESSAGE=`EDIT_MESSAGE`,MessageEditorVariant}({});export{MessageEditorVariant};
|
|
@@ -1,52 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
var t = e({
|
|
3
|
-
cancel: {
|
|
4
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.cancel",
|
|
5
|
-
defaultMessage: "Cancel"
|
|
6
|
-
},
|
|
7
|
-
characterCount: {
|
|
8
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.characterCount",
|
|
9
|
-
defaultMessage: "{count}/{maxCount}"
|
|
10
|
-
},
|
|
11
|
-
characterLimitExceeded: {
|
|
12
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.characterLimitExceeded",
|
|
13
|
-
defaultMessage: "Your comment is {excess, plural, one {# character} other {# characters}} too long"
|
|
14
|
-
},
|
|
15
|
-
editorContentAriaLabel: {
|
|
16
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.editorContentAriaLabel",
|
|
17
|
-
defaultMessage: "Message editor"
|
|
18
|
-
},
|
|
19
|
-
placeholderAddComment: {
|
|
20
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.placeholderAddComment",
|
|
21
|
-
defaultMessage: "Add a comment, @ to mention"
|
|
22
|
-
},
|
|
23
|
-
placeholderReply: {
|
|
24
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.placeholderReply",
|
|
25
|
-
defaultMessage: "Reply, @ to mention"
|
|
26
|
-
},
|
|
27
|
-
post: {
|
|
28
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.post",
|
|
29
|
-
defaultMessage: "Post"
|
|
30
|
-
},
|
|
31
|
-
postLoading: {
|
|
32
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.postLoading",
|
|
33
|
-
defaultMessage: "Loading..."
|
|
34
|
-
},
|
|
35
|
-
save: {
|
|
36
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.save",
|
|
37
|
-
defaultMessage: "Save"
|
|
38
|
-
},
|
|
39
|
-
saveLoading: {
|
|
40
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.saveLoading",
|
|
41
|
-
defaultMessage: "Saving..."
|
|
42
|
-
},
|
|
43
|
-
scrollContainerAriaLabel: {
|
|
44
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.scrollContainerAriaLabel",
|
|
45
|
-
defaultMessage: "Message editor scroll container"
|
|
46
|
-
},
|
|
47
|
-
timestampToggleLabel: {
|
|
48
|
-
id: "groupSharedFeatures.threadedAnnotations.messageEditor.timestampToggleLabel",
|
|
49
|
-
defaultMessage: "Comment with timestamp"
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
export { t as default };
|
|
1
|
+
import{defineMessages}from"react-intl";var messages=defineMessages({cancel:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.cancel`,defaultMessage:`Cancel`},characterCount:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.characterCount`,defaultMessage:`{count}/{maxCount}`},characterLimitExceeded:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.characterLimitExceeded`,defaultMessage:`Your comment is {excess, plural, one {# character} other {# characters}} too long`},editorContentAriaLabel:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.editorContentAriaLabel`,defaultMessage:`Message editor`},placeholderAddComment:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.placeholderAddComment`,defaultMessage:`Add a comment, @ to mention`},placeholderReply:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.placeholderReply`,defaultMessage:`Reply, @ to mention`},post:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.post`,defaultMessage:`Post`},postLoading:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.postLoading`,defaultMessage:`Loading...`},save:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.save`,defaultMessage:`Save`},saveLoading:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.saveLoading`,defaultMessage:`Saving...`},scrollContainerAriaLabel:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.scrollContainerAriaLabel`,defaultMessage:`Message editor scroll container`},timestampToggleLabel:{id:`groupSharedFeatures.threadedAnnotations.messageEditor.timestampToggleLabel`,defaultMessage:`Comment with timestamp`}});export{messages as default};
|
|
@@ -1,26 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t } from "../../../../../../chunks/message-editor2.module.js";
|
|
3
|
-
import { Focusable as n, Text as r, Tooltip as i, VisuallyHidden as a } from "@box/blueprint-web";
|
|
4
|
-
import o from "clsx";
|
|
5
|
-
import { useIntl as s } from "react-intl";
|
|
6
|
-
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
7
|
-
var d = ({ count: d, excess: f, maxCount: p }) => {
|
|
8
|
-
let { formatMessage: m } = s(), h = m(e.characterLimitExceeded, { excess: f });
|
|
9
|
-
return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(a, {
|
|
10
|
-
role: "alert",
|
|
11
|
-
children: h
|
|
12
|
-
}), /* @__PURE__ */ l(i, {
|
|
13
|
-
content: h,
|
|
14
|
-
children: /* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(r, {
|
|
15
|
-
as: "span",
|
|
16
|
-
className: o(t.characterLimitCounter, t.characterLimitCounterExceeded),
|
|
17
|
-
color: "textOnLightError",
|
|
18
|
-
variant: "bodyDefault",
|
|
19
|
-
children: m(e.characterCount, {
|
|
20
|
-
count: d,
|
|
21
|
-
maxCount: p
|
|
22
|
-
})
|
|
23
|
-
}) })
|
|
24
|
-
})] });
|
|
25
|
-
};
|
|
26
|
-
export { d as CharacterLimitCounter };
|
|
1
|
+
import messages from"../messages.js";import{t as message_editor_module_default}from"../../../../../../chunks/message-editor2.module.js";import{Focusable,Text,Tooltip,VisuallyHidden}from"@box/blueprint-web";import clsx from"clsx";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";var CharacterLimitCounter=({count,excess,maxCount})=>{let{formatMessage}=useIntl(),tooltipText=formatMessage(messages.characterLimitExceeded,{excess});return jsxs(Fragment,{children:[jsx(VisuallyHidden,{role:`alert`,children:tooltipText}),jsx(Tooltip,{content:tooltipText,children:jsx(Focusable,{children:jsx(Text,{as:`span`,className:clsx(message_editor_module_default.characterLimitCounter,message_editor_module_default.characterLimitCounterExceeded),color:`textOnLightError`,variant:`bodyDefault`,children:formatMessage(messages.characterCount,{count,maxCount})})})})]})};export{CharacterLimitCounter};
|
|
@@ -1,32 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import t from "../messages.js";
|
|
3
|
-
import { useMessageSubmit as n } from "../hooks/useMessageSubmit.js";
|
|
4
|
-
import { Button as r } from "@box/blueprint-web";
|
|
5
|
-
import { useIntl as i } from "react-intl";
|
|
6
|
-
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
|
-
var c = ({ onSave: c, onSaveError: l, onEditSuccess: u, onCancel: d, getEditorJsonContent: f, disabled: p = !1 }) => {
|
|
8
|
-
let m = i(), { isLoading: h } = e(), { handleSubmit: g } = n({
|
|
9
|
-
onSubmit: c,
|
|
10
|
-
onSubmitError: l,
|
|
11
|
-
onSuccess: u,
|
|
12
|
-
getEditorJsonContent: f
|
|
13
|
-
});
|
|
14
|
-
return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, {
|
|
15
|
-
"aria-label": m.formatMessage(t.cancel),
|
|
16
|
-
onClick: () => d?.(),
|
|
17
|
-
disabled: h,
|
|
18
|
-
size: "small",
|
|
19
|
-
variant: "quaternary",
|
|
20
|
-
children: m.formatMessage(t.cancel)
|
|
21
|
-
}), /* @__PURE__ */ o(r, {
|
|
22
|
-
"aria-label": m.formatMessage(t.save),
|
|
23
|
-
disabled: p,
|
|
24
|
-
loading: h,
|
|
25
|
-
loadingAriaLabel: m.formatMessage(t.saveLoading),
|
|
26
|
-
onClick: g,
|
|
27
|
-
size: "small",
|
|
28
|
-
variant: "primary",
|
|
29
|
-
children: m.formatMessage(t.save)
|
|
30
|
-
})] });
|
|
31
|
-
};
|
|
32
|
-
export { c as EditButtons };
|
|
1
|
+
import{useMessageEditorContext}from"../message-editor-context.js";import messages from"../messages.js";import{useMessageSubmit}from"../hooks/useMessageSubmit.js";import{Button}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";var EditButtons=({onSave,onSaveError,onEditSuccess,onCancel,getEditorJsonContent,disabled=!1})=>{let intl=useIntl(),{isLoading}=useMessageEditorContext(),{handleSubmit}=useMessageSubmit({onSubmit:onSave,onSubmitError:onSaveError,onSuccess:onEditSuccess,getEditorJsonContent});return jsxs(Fragment,{children:[jsx(Button,{"aria-label":intl.formatMessage(messages.cancel),onClick:()=>onCancel?.(),disabled:isLoading,size:`small`,variant:`quaternary`,children:intl.formatMessage(messages.cancel)}),jsx(Button,{"aria-label":intl.formatMessage(messages.save),disabled,loading:isLoading,loadingAriaLabel:intl.formatMessage(messages.saveLoading),onClick:handleSubmit,size:`small`,variant:`primary`,children:intl.formatMessage(messages.save)})]})};export{EditButtons};
|
|
@@ -1,22 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Focusable as t, Text as n, Tooltip as r } from "@box/blueprint-web";
|
|
3
|
-
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
4
|
-
import { AlertCircle as o } from "@box/blueprint-web-assets/icons/Medium";
|
|
5
|
-
import { bpIconIconDestructiveOnLight as s } from "@box/blueprint-web-assets/tokens/tokens";
|
|
6
|
-
var c = ({ errorMessage: c }) => /* @__PURE__ */ i(r, {
|
|
7
|
-
content: c,
|
|
8
|
-
children: /* @__PURE__ */ i(t, { children: /* @__PURE__ */ a("div", {
|
|
9
|
-
className: e.errorMessage,
|
|
10
|
-
children: [/* @__PURE__ */ i(o, {
|
|
11
|
-
color: s,
|
|
12
|
-
height: 20,
|
|
13
|
-
width: 20
|
|
14
|
-
}), /* @__PURE__ */ i(n, {
|
|
15
|
-
as: "span",
|
|
16
|
-
className: e.errorText,
|
|
17
|
-
variant: "bodyDefault",
|
|
18
|
-
children: c
|
|
19
|
-
})]
|
|
20
|
-
}) })
|
|
21
|
-
});
|
|
22
|
-
export { c as ErrorMessage };
|
|
1
|
+
import{t as message_editor_module_default}from"../../../../../../chunks/message-editor2.module.js";import{Focusable,Text,Tooltip}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";import{AlertCircle}from"@box/blueprint-web-assets/icons/Medium";import{bpIconIconDestructiveOnLight}from"@box/blueprint-web-assets/tokens/tokens";var ErrorMessage=({errorMessage})=>jsx(Tooltip,{content:errorMessage,children:jsx(Focusable,{children:jsxs(`div`,{className:message_editor_module_default.errorMessage,children:[jsx(AlertCircle,{color:bpIconIconDestructiveOnLight,height:20,width:20}),jsx(Text,{as:`span`,className:message_editor_module_default.errorText,variant:`bodyDefault`,children:errorMessage})]})})});export{ErrorMessage};
|
|
@@ -1,29 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useMessageEditorContext as t } from "../message-editor-context.js";
|
|
3
|
-
import n from "../messages.js";
|
|
4
|
-
import { useMessageSubmit as r } from "../hooks/useMessageSubmit.js";
|
|
5
|
-
import { Button as i } from "@box/blueprint-web";
|
|
6
|
-
import { useIntl as a } from "react-intl";
|
|
7
|
-
import { jsx as o } from "react/jsx-runtime";
|
|
8
|
-
import { ArrowUp as s } from "@box/blueprint-web-assets/icons/Medium";
|
|
9
|
-
var c = ({ disabled: c, onPost: l, onPostError: u, onPostSuccess: d, cleanEditor: f, getEditorJsonContent: p }) => {
|
|
10
|
-
let { isLoading: m } = t(), { handleSubmit: h } = r({
|
|
11
|
-
onSubmit: l,
|
|
12
|
-
onSubmitError: u,
|
|
13
|
-
onSuccess: d,
|
|
14
|
-
cleanEditor: f,
|
|
15
|
-
getEditorJsonContent: p
|
|
16
|
-
}), g = a();
|
|
17
|
-
return /* @__PURE__ */ o(i, {
|
|
18
|
-
"aria-label": g.formatMessage(n.post),
|
|
19
|
-
"data-resin-target": e.COMMENT_POST,
|
|
20
|
-
disabled: c,
|
|
21
|
-
endIcon: s,
|
|
22
|
-
loading: m,
|
|
23
|
-
loadingAriaLabel: g.formatMessage(n.postLoading),
|
|
24
|
-
onClick: h,
|
|
25
|
-
size: "small",
|
|
26
|
-
variant: "primary"
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
export { c as PostButton };
|
|
1
|
+
import{THREADED_ANNOTATIONS_RESIN_TARGETS}from"../../../../v2/resin-targets.js";import{useMessageEditorContext}from"../message-editor-context.js";import messages from"../messages.js";import{useMessageSubmit}from"../hooks/useMessageSubmit.js";import{Button}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx}from"react/jsx-runtime";import{ArrowUp}from"@box/blueprint-web-assets/icons/Medium";var PostButton=({disabled,onPost,onPostError,onPostSuccess,cleanEditor,getEditorJsonContent})=>{let{isLoading}=useMessageEditorContext(),{handleSubmit}=useMessageSubmit({onSubmit:onPost,onSubmitError:onPostError,onSuccess:onPostSuccess,cleanEditor,getEditorJsonContent}),intl=useIntl();return jsx(Button,{"aria-label":intl.formatMessage(messages.post),"data-resin-target":THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_POST,disabled,endIcon:ArrowUp,loading:isLoading,loadingAriaLabel:intl.formatMessage(messages.postLoading),onClick:handleSubmit,size:`small`,variant:`primary`})};export{PostButton};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as TimestampToggle };
|
|
1
|
+
import{t as TimestampToggle}from"../../../../../../chunks/timestamp-toggle.js";export{TimestampToggle};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as DeleteConfirmationPopover };
|
|
1
|
+
import{t as DeleteConfirmationPopover}from"../../../../../chunks/delete-confirmation-popover.js";export{DeleteConfirmationPopover};
|
|
@@ -1,90 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useThreadedAnnotationsContext as t } from "../../../v2/threaded-annotations-context.js";
|
|
3
|
-
import { UserAvatarButton as n } from "../user-avatar/user-avatar.js";
|
|
4
|
-
import { n as r, t as i } from "../../../../../chunks/delete-confirmation-popover.js";
|
|
5
|
-
import a from "./messages.js";
|
|
6
|
-
import { MessageOptionsMenu as o } from "./message-options-menu.js";
|
|
7
|
-
import { IconButton as s, Text as c, Tooltip as l } from "@box/blueprint-web";
|
|
8
|
-
import { useState as u } from "react";
|
|
9
|
-
import { useIntl as d } from "react-intl";
|
|
10
|
-
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
11
|
-
import { CheckmarkCircle as m } from "@box/blueprint-web-assets/icons/Medium";
|
|
12
|
-
import { CheckmarkCircle as h } from "@box/blueprint-web-assets/icons/MediumFilled";
|
|
13
|
-
var g = ({ author: g, canResolve: _ = !1, isResolved: v = !1, canEdit: y = !0, canDelete: b = !0, hasReplies: x = !1, isFirstMessage: S = !1, onAvatarClick: C, onCopyLink: w, onDelete: T, onEdit: E, onResolve: D, onThreadDelete: O, onUnresolve: k }) => {
|
|
14
|
-
let A = d(), { isAnnotations: j } = t(), [M, N] = u(!1), [P, F] = u(!1);
|
|
15
|
-
return /* @__PURE__ */ p("div", {
|
|
16
|
-
className: r.headerContainer,
|
|
17
|
-
children: [/* @__PURE__ */ p("div", {
|
|
18
|
-
className: r.information,
|
|
19
|
-
children: [/* @__PURE__ */ f(n, {
|
|
20
|
-
onClick: C,
|
|
21
|
-
user: g
|
|
22
|
-
}), /* @__PURE__ */ f("div", {
|
|
23
|
-
className: r.textContainer,
|
|
24
|
-
"data-message-author": !0,
|
|
25
|
-
children: /* @__PURE__ */ f(c, {
|
|
26
|
-
as: "p",
|
|
27
|
-
className: r.author,
|
|
28
|
-
color: "textOnLightDefault",
|
|
29
|
-
variant: "bodyDefaultBold",
|
|
30
|
-
children: g.name
|
|
31
|
-
})
|
|
32
|
-
})]
|
|
33
|
-
}), /* @__PURE__ */ p("div", {
|
|
34
|
-
className: r.optionsMenu,
|
|
35
|
-
"data-state": M || P ? "open" : "closed",
|
|
36
|
-
children: [
|
|
37
|
-
_ && !v && /* @__PURE__ */ f(l, {
|
|
38
|
-
content: A.formatMessage(a.resolveButtonAriaLabel),
|
|
39
|
-
children: /* @__PURE__ */ f(s, {
|
|
40
|
-
"aria-label": A.formatMessage(a.resolveButtonAriaLabel),
|
|
41
|
-
"data-no-expand": !0,
|
|
42
|
-
"data-resin-target": j ? e.ANNOTATION_RESOLVE : e.COMMENT_RESOLVE,
|
|
43
|
-
disabled: P,
|
|
44
|
-
icon: m,
|
|
45
|
-
onClick: () => D?.(),
|
|
46
|
-
size: "small"
|
|
47
|
-
})
|
|
48
|
-
}),
|
|
49
|
-
_ && v && /* @__PURE__ */ f(l, {
|
|
50
|
-
content: A.formatMessage(a.unresolveButtonAriaLabel),
|
|
51
|
-
children: /* @__PURE__ */ f(s, {
|
|
52
|
-
"aria-label": A.formatMessage(a.unresolveButtonAriaLabel),
|
|
53
|
-
"data-no-expand": !0,
|
|
54
|
-
"data-resin-target": j ? e.ANNOTATION_UNRESOLVE : e.COMMENT_UNRESOLVE,
|
|
55
|
-
disabled: P,
|
|
56
|
-
icon: h,
|
|
57
|
-
onClick: () => k?.(),
|
|
58
|
-
size: "small",
|
|
59
|
-
variant: "icon-logo"
|
|
60
|
-
})
|
|
61
|
-
}),
|
|
62
|
-
/* @__PURE__ */ f(o, {
|
|
63
|
-
canDelete: b,
|
|
64
|
-
canEdit: y,
|
|
65
|
-
disabled: P,
|
|
66
|
-
isAnnotations: j,
|
|
67
|
-
onCopyLink: w,
|
|
68
|
-
onDelete: () => {
|
|
69
|
-
S ? (N(!1), F(!0)) : (N(!1), T?.());
|
|
70
|
-
},
|
|
71
|
-
onEdit: E,
|
|
72
|
-
onOpenChange: N
|
|
73
|
-
}),
|
|
74
|
-
/* @__PURE__ */ f(i, {
|
|
75
|
-
hasReplies: x,
|
|
76
|
-
isAnnotation: j,
|
|
77
|
-
onCancel: () => {
|
|
78
|
-
F(!1), N(!1);
|
|
79
|
-
},
|
|
80
|
-
onConfirm: () => {
|
|
81
|
-
O?.(), F(!1), N(!1);
|
|
82
|
-
},
|
|
83
|
-
onOpenChange: F,
|
|
84
|
-
open: P
|
|
85
|
-
})
|
|
86
|
-
]
|
|
87
|
-
})]
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
export { g as MessageHeader };
|
|
1
|
+
import{THREADED_ANNOTATIONS_RESIN_TARGETS}from"../../../v2/resin-targets.js";import{useThreadedAnnotationsContext}from"../../../v2/threaded-annotations-context.js";import{UserAvatarButton}from"../user-avatar/user-avatar.js";import{n as message_header_module_default,t as DeleteConfirmationPopover}from"../../../../../chunks/delete-confirmation-popover.js";import messages from"./messages.js";import{MessageOptionsMenu}from"./message-options-menu.js";import{IconButton,Text,Tooltip}from"@box/blueprint-web";import{useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{CheckmarkCircle}from"@box/blueprint-web-assets/icons/Medium";import{CheckmarkCircle as CheckmarkCircle$1}from"@box/blueprint-web-assets/icons/MediumFilled";var MessageHeader=({author,canResolve=!1,isResolved=!1,canEdit=!0,canDelete=!0,hasReplies=!1,isFirstMessage=!1,onAvatarClick,onCopyLink,onDelete,onEdit,onResolve,onThreadDelete,onUnresolve})=>{let intl=useIntl(),{isAnnotations}=useThreadedAnnotationsContext(),[isMenuOpen,setIsMenuOpen]=useState(!1),[isDeletePopoverOpen,setIsDeletePopoverOpen]=useState(!1);return jsxs(`div`,{className:message_header_module_default.headerContainer,children:[jsxs(`div`,{className:message_header_module_default.information,children:[jsx(UserAvatarButton,{onClick:onAvatarClick,user:author}),jsx(`div`,{className:message_header_module_default.textContainer,"data-message-author":!0,children:jsx(Text,{as:`p`,className:message_header_module_default.author,color:`textOnLightDefault`,variant:`bodyDefaultBold`,children:author.name})})]}),jsxs(`div`,{className:message_header_module_default.optionsMenu,"data-state":isMenuOpen||isDeletePopoverOpen?`open`:`closed`,children:[canResolve&&!isResolved&&jsx(Tooltip,{content:intl.formatMessage(messages.resolveButtonAriaLabel),children:jsx(IconButton,{"aria-label":intl.formatMessage(messages.resolveButtonAriaLabel),"data-no-expand":!0,"data-resin-target":isAnnotations?THREADED_ANNOTATIONS_RESIN_TARGETS.ANNOTATION_RESOLVE:THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_RESOLVE,disabled:isDeletePopoverOpen,icon:CheckmarkCircle,onClick:()=>onResolve?.(),size:`small`})}),canResolve&&isResolved&&jsx(Tooltip,{content:intl.formatMessage(messages.unresolveButtonAriaLabel),children:jsx(IconButton,{"aria-label":intl.formatMessage(messages.unresolveButtonAriaLabel),"data-no-expand":!0,"data-resin-target":isAnnotations?THREADED_ANNOTATIONS_RESIN_TARGETS.ANNOTATION_UNRESOLVE:THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_UNRESOLVE,disabled:isDeletePopoverOpen,icon:CheckmarkCircle$1,onClick:()=>onUnresolve?.(),size:`small`,variant:`icon-logo`})}),jsx(MessageOptionsMenu,{canDelete,canEdit,disabled:isDeletePopoverOpen,isAnnotations,onCopyLink,onDelete:()=>{isFirstMessage?(setIsMenuOpen(!1),setIsDeletePopoverOpen(!0)):(setIsMenuOpen(!1),onDelete?.())},onEdit,onOpenChange:setIsMenuOpen}),jsx(DeleteConfirmationPopover,{hasReplies,isAnnotation:isAnnotations,onCancel:()=>{setIsDeletePopoverOpen(!1),setIsMenuOpen(!1)},onConfirm:()=>{onThreadDelete?.(),setIsDeletePopoverOpen(!1),setIsMenuOpen(!1)},onOpenChange:setIsDeletePopoverOpen,open:isDeletePopoverOpen})]})]})};export{MessageHeader};
|
|
@@ -1,49 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { THREADED_ANNOTATIONS_RESIN_COMPONENTS as t, THREADED_ANNOTATIONS_RESIN_FEATURE as n, THREADED_ANNOTATIONS_RESIN_TARGETS as r } from "../../../v2/resin-targets.js";
|
|
3
|
-
import i from "./messages.js";
|
|
4
|
-
import { DropdownMenu as a, IconButton as o } from "@box/blueprint-web";
|
|
5
|
-
import { useIntl as s } from "react-intl";
|
|
6
|
-
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
7
|
-
import { Ellipsis as u, Link as d, Pencil as f, Trash as p } from "@box/blueprint-web-assets/icons/Medium";
|
|
8
|
-
var m = ({ canDelete: m = !0, canEdit: h = !0, disabled: g, isAnnotations: _ = !1, onCopyLink: v, onDelete: y, onEdit: b, onOpenChange: x }) => {
|
|
9
|
-
let { formatMessage: S } = s(), C = h || !!v;
|
|
10
|
-
if (!(C || m)) return null;
|
|
11
|
-
let w = _ ? t.ANNOTATION_MENU : t.COMMENT_MENU, T = _ ? r.ANNOTATION_MENU : r.COMMENT_MENU, E = _ ? r.ANNOTATION_EDIT : r.COMMENT_EDIT, D = _ ? r.ANNOTATION_COPY_LINK : r.COMMENT_COPY_LINK, O = _ ? r.ANNOTATION_DELETE : r.COMMENT_DELETE;
|
|
12
|
-
return /* @__PURE__ */ l(a.Root, {
|
|
13
|
-
modal: !1,
|
|
14
|
-
onOpenChange: x,
|
|
15
|
-
children: [/* @__PURE__ */ c(a.Trigger, { children: /* @__PURE__ */ c(o, {
|
|
16
|
-
"aria-label": S(i.moreOptionsAriaLabel),
|
|
17
|
-
"data-no-expand": !0,
|
|
18
|
-
"data-resin-target": T,
|
|
19
|
-
disabled: g,
|
|
20
|
-
icon: u,
|
|
21
|
-
size: "small"
|
|
22
|
-
}) }), /* @__PURE__ */ l(a.Content, {
|
|
23
|
-
...e,
|
|
24
|
-
align: "end",
|
|
25
|
-
"data-resin-component": w,
|
|
26
|
-
"data-resin-feature": n,
|
|
27
|
-
children: [
|
|
28
|
-
h && /* @__PURE__ */ l(a.Item, {
|
|
29
|
-
"data-resin-target": E,
|
|
30
|
-
onSelect: () => b?.(),
|
|
31
|
-
children: [/* @__PURE__ */ c(a.Item.StartElement, { icon: f }), /* @__PURE__ */ c(a.Item.MainContent, { label: S(i.edit) })]
|
|
32
|
-
}),
|
|
33
|
-
v && /* @__PURE__ */ l(a.Item, {
|
|
34
|
-
"data-resin-target": D,
|
|
35
|
-
onSelect: () => v(),
|
|
36
|
-
children: [/* @__PURE__ */ c(a.Item.StartElement, { icon: d }), /* @__PURE__ */ c(a.Item.MainContent, { label: S(i.copyLink) })]
|
|
37
|
-
}),
|
|
38
|
-
m && C && /* @__PURE__ */ c(a.Separator, {}),
|
|
39
|
-
m && /* @__PURE__ */ l(a.Item, {
|
|
40
|
-
"data-resin-target": O,
|
|
41
|
-
onSelect: () => y?.(),
|
|
42
|
-
variant: "destructive",
|
|
43
|
-
children: [/* @__PURE__ */ c(a.Item.StartElement, { icon: p }), /* @__PURE__ */ c(a.Item.MainContent, { label: S(i.delete) })]
|
|
44
|
-
})
|
|
45
|
-
]
|
|
46
|
-
})]
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
export { m as MessageOptionsMenu };
|
|
1
|
+
import{THREADED_ANNOTATIONS_PORTAL}from"../../../v2/constants.js";import{THREADED_ANNOTATIONS_RESIN_COMPONENTS,THREADED_ANNOTATIONS_RESIN_FEATURE,THREADED_ANNOTATIONS_RESIN_TARGETS}from"../../../v2/resin-targets.js";import messages from"./messages.js";import{DropdownMenu,IconButton}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{Ellipsis,Link as Link$1,Pencil,Trash}from"@box/blueprint-web-assets/icons/Medium";var MessageOptionsMenu=({canDelete=!0,canEdit=!0,disabled,isAnnotations=!1,onCopyLink,onDelete,onEdit,onOpenChange})=>{let{formatMessage}=useIntl(),hasNonDestructiveItem=canEdit||!!onCopyLink;if(!(hasNonDestructiveItem||canDelete))return null;let menuComponent=isAnnotations?THREADED_ANNOTATIONS_RESIN_COMPONENTS.ANNOTATION_MENU:THREADED_ANNOTATIONS_RESIN_COMPONENTS.COMMENT_MENU,menuTarget=isAnnotations?THREADED_ANNOTATIONS_RESIN_TARGETS.ANNOTATION_MENU:THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_MENU,editTarget=isAnnotations?THREADED_ANNOTATIONS_RESIN_TARGETS.ANNOTATION_EDIT:THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_EDIT,copyLinkTarget=isAnnotations?THREADED_ANNOTATIONS_RESIN_TARGETS.ANNOTATION_COPY_LINK:THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_COPY_LINK,deleteTarget=isAnnotations?THREADED_ANNOTATIONS_RESIN_TARGETS.ANNOTATION_DELETE:THREADED_ANNOTATIONS_RESIN_TARGETS.COMMENT_DELETE;return jsxs(DropdownMenu.Root,{modal:!1,onOpenChange,children:[jsx(DropdownMenu.Trigger,{children:jsx(IconButton,{"aria-label":formatMessage(messages.moreOptionsAriaLabel),"data-no-expand":!0,"data-resin-target":menuTarget,disabled,icon:Ellipsis,size:`small`})}),jsxs(DropdownMenu.Content,{...THREADED_ANNOTATIONS_PORTAL,align:`end`,"data-resin-component":menuComponent,"data-resin-feature":THREADED_ANNOTATIONS_RESIN_FEATURE,children:[canEdit&&jsxs(DropdownMenu.Item,{"data-resin-target":editTarget,onSelect:()=>onEdit?.(),children:[jsx(DropdownMenu.Item.StartElement,{icon:Pencil}),jsx(DropdownMenu.Item.MainContent,{label:formatMessage(messages.edit)})]}),onCopyLink&&jsxs(DropdownMenu.Item,{"data-resin-target":copyLinkTarget,onSelect:()=>onCopyLink(),children:[jsx(DropdownMenu.Item.StartElement,{icon:Link$1}),jsx(DropdownMenu.Item.MainContent,{label:formatMessage(messages.copyLink)})]}),canDelete&&hasNonDestructiveItem&&jsx(DropdownMenu.Separator,{}),canDelete&&jsxs(DropdownMenu.Item,{"data-resin-target":deleteTarget,onSelect:()=>onDelete?.(),variant:`destructive`,children:[jsx(DropdownMenu.Item.StartElement,{icon:Trash}),jsx(DropdownMenu.Item.MainContent,{label:formatMessage(messages.delete)})]})]})]})};export{MessageOptionsMenu};
|