@box/threaded-annotations 1.94.9 → 1.94.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.js +17 -14
  2. package/dist/esm/lib/components/v2/message-editor/message-editor.js +110 -94
  3. package/dist/types/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.d.ts +1 -0
  4. package/package.json +11 -11
package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.js CHANGED
@@ -1,24 +1,27 @@
1
- import { useMemo as e, useState as t } from "react";
2
- var n = /* @__PURE__ */ function(e) {
1
+ import { useCallback as e, useMemo as t, useState as n } from "react";
2
+ var r = /* @__PURE__ */ function(e) {
3
3
  return e.ARROW_DOWN = "ArrowDown", e.ARROW_UP = "ArrowUp", e.ENTER = "Enter", e;
4
- }({}), r = (r) => {
5
- let [i, a] = t(!1), [o, s] = t(""), [c, l] = t(null);
4
+ }({}), i = (i) => {
5
+ let [a, o] = n(!1), [s, c] = n(""), [l, u] = n(null);
6
6
  return {
7
- isActive: i,
8
- query: o,
9
- command: c,
10
- suggestionCallbacks: e(() => ({
7
+ isActive: a,
8
+ query: s,
9
+ command: l,
10
+ suggestionCallbacks: t(() => ({
11
11
  onSuggestionStart: (e) => {
12
- a(!0), s(e.query), l(() => e.command);
12
+ o(!0), c(e.query), u(() => e.command);
13
13
  },
14
14
  onSuggestionUpdate: (e) => {
15
- s(e.query), l(() => e.command);
15
+ o(!0), c(e.query), u(() => e.command);
16
16
  },
17
- onSuggestionKeyDown: (e) => r.current ? e.event.key === n.ARROW_DOWN ? (r.current.selectNext(), !0) : e.event.key === n.ARROW_UP ? (r.current.selectPrevious(), !0) : e.event.key === n.ENTER ? (r.current.selectItem(), !0) : !1 : !1,
17
+ onSuggestionKeyDown: (e) => i.current ? e.event.key === r.ARROW_DOWN ? (i.current.selectNext(), !0) : e.event.key === r.ARROW_UP ? (i.current.selectPrevious(), !0) : e.event.key === r.ENTER ? (i.current.selectItem(), !0) : !1 : !1,
18
18
  onSuggestionExit: () => {
19
- a(!1);
19
+ o(!1);
20
20
  }
21
- }), [r])
21
+ }), [i]),
22
+ close: e(() => {
23
+ o(!1), c(""), u(null);
24
+ }, [])
22
25
  };
23
26
  };
24
- export { n as KeyEvents, r as useMentionState };
27
+ export { r as KeyEvents, i as useMentionState };
package/dist/esm/lib/components/v2/message-editor/message-editor.js CHANGED
@@ -2,161 +2,177 @@ import { THREADED_ANNOTATIONS_PORTAL as e } from "../../../v2/constants.js";
2
2
  import { useMentionContext as t } from "../../mention-component/mention-context.js";
3
3
  import { CustomMention as n } from "./editor-extensions/custom-mention/custom-mention.js";
4
4
  import { createSuggestionOptions as r } from "./editor-extensions/custom-mention/custom-mention-suggestions.js";
5
- import { MENTION_PLUGIN_KEY as i, normalizeMentionPastedText as a, normalizeMentionTextInput as o } from "./editor-extensions/custom-mention/mention-trigger-normalization.js";
6
- import { useMentionState as ee } from "./editor-extensions/custom-mention/useMentionState.js";
7
- import { CustomParagraph as s } from "./editor-extensions/custom-paragraph.js";
8
- import { useCharacterLimit as te } from "./hooks/useCharacterLimit.js";
9
- import { useEditorContainerState as ne } from "./hooks/useEditorContainerState.js";
10
- import { useMentionUserSelection as re } from "./hooks/useMentionUserSelection.js";
11
- import { MessageEditorProvider as c, useMessageEditorContext as l } from "./message-editor-context.js";
12
- import u from "./messages.js";
13
- import { t as d } from "../../../../../chunks/message-editor2.module.js";
14
- import { CharacterLimitCounter as f } from "./subcomponents/character-limit-counter.js";
15
- import { EditButtons as p } from "./subcomponents/edit-buttons.js";
16
- import { ErrorMessage as m } from "./subcomponents/error-message.js";
17
- import { PostButton as h } from "./subcomponents/post-button.js";
18
- import { MessageEditorVariant as g } from "./message-editor.types.js";
19
- import { VisuallyHidden as _ } from "@box/blueprint-web";
20
- import v from "clsx";
21
- import { useEffect as y, useMemo as b, useRef as x } from "react";
22
- import { useIntl as ie } from "react-intl";
23
- import { Fragment as ae, jsx as S, jsxs as C } from "react/jsx-runtime";
24
- import { UserSelectorHeadless as oe } from "@box/user-selector";
25
- import { EditorContent as se, useEditor as ce } from "@tiptap/react";
26
- import le from "@tiptap/extension-document";
27
- import w from "@tiptap/extension-text";
28
- import T from "@tiptap/extension-placeholder";
29
- var E = (c) => {
30
- let { disableComponent: E = !1, initialContent: D, isFirstAnnotation: O = !1, isReply: k = !1, maxCharacterCount: A, userSelectorProps: j } = c, M = x(null), N = x(null), P = x(null), F = ie(), { errorMessage: I, isLoading: L } = l(), { isActive: R, query: z, command: B, suggestionCallbacks: V } = ee(M), { closeAllPopovers: H } = t(), U = F.formatMessage(k ? u.placeholderReply : u.placeholderAddComment), W = c.variant === g.EDIT_MESSAGE, G = ce({
5
+ import { MENTION_PLUGIN_KEY as i, normalizeMentionPastedText as a, normalizeMentionTextInput as ee } from "./editor-extensions/custom-mention/mention-trigger-normalization.js";
6
+ import { useMentionState as o } from "./editor-extensions/custom-mention/useMentionState.js";
7
+ import { CustomParagraph as te } from "./editor-extensions/custom-paragraph.js";
8
+ import { useCharacterLimit as ne } from "./hooks/useCharacterLimit.js";
9
+ import { useEditorContainerState as re } 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 { MessageEditorVariant as m } from "./message-editor.types.js";
19
+ import { VisuallyHidden as oe } from "@box/blueprint-web";
20
+ import h from "clsx";
21
+ import { useEffect as g, useMemo as se, useRef as _ } from "react";
22
+ import { useIntl as v } from "react-intl";
23
+ import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
24
+ import { UserSelectorHeadless as S } from "@box/user-selector";
25
+ import { EditorContent as C, useEditor as w } from "@tiptap/react";
26
+ import T from "@tiptap/extension-document";
27
+ import ce from "@tiptap/extension-text";
28
+ import le from "@tiptap/extension-placeholder";
29
+ var E = (s) => {
30
+ let { disableComponent: E = !1, initialContent: D, isFirstAnnotation: O = !1, isReply: ue = !1, maxCharacterCount: k, userSelectorProps: A } = s, j = _(null), M = _(null), N = _(null), P = v(), { errorMessage: F, isLoading: I } = ae(), { close: L, isActive: R, query: z, command: B, suggestionCallbacks: V } = o(j), { closeAllPopovers: H } = t(), U = P.formatMessage(ue ? c.placeholderReply : c.placeholderAddComment), W = s.variant === m.EDIT_MESSAGE, G = w({
31
31
  extensions: [
32
- le,
33
- s,
34
- T.configure({
32
+ T,
33
+ te,
34
+ le.configure({
35
35
  placeholder: U,
36
36
  showOnlyWhenEditable: !1
37
37
  }),
38
- w,
38
+ ce,
39
39
  n.configure({ suggestion: r(i, "@", V) })
40
40
  ],
41
41
  autofocus: !0,
42
42
  content: D,
43
43
  editorProps: {
44
- attributes: { class: d.editor },
45
- handleTextInput: o,
44
+ attributes: { class: l.editor },
45
+ handleTextInput: ee,
46
46
  transformPastedText: a
47
47
  },
48
48
  onCreate: ({ editor: e }) => {
49
- P.current = e.view.dom, e.commands.focus("end");
49
+ N.current = e.view.dom, e.commands.focus("end");
50
50
  },
51
51
  onUpdate: () => {
52
52
  H?.();
53
53
  }
54
- }, [U]), { onUserSelected: ue } = re(b(() => B && G && !G.isDestroyed ? {
54
+ }, [U]), { onUserSelected: de } = ie(se(() => B && G && !G.isDestroyed ? {
55
55
  command: B,
56
56
  editor: G
57
- } : null, [B, G])), { exceedsSingleLine: de, hasScroll: K, isAtBottom: q } = ne(N, G), J = te(G, D, A), Y = W || !O || O && de, fe = !G || G?.isEmpty, X = E || L, Z = (J?.excess ?? 0) > 0, Q = fe || X || Z, $ = J && J.excess > 0 && Y;
58
- y(() => {
57
+ } : null, [B, G])), { exceedsSingleLine: fe, hasScroll: K, isAtBottom: q } = re(M, G), J = ne(G, D, k), Y = W || !O || O && fe, pe = !G || G?.isEmpty, X = E || I, Z = (J?.excess ?? 0) > 0, Q = pe || X || Z, $ = J && J.excess > 0 && Y;
58
+ g(() => {
59
59
  G && G.setEditable(!X);
60
- }, [G, X]), y(() => {
61
- if (!Z || !N.current || !D) return;
60
+ }, [G, X]), g(() => {
61
+ if (!Z || !M.current || !D) return;
62
62
  let e = 0, t = requestAnimationFrame(() => {
63
63
  e = requestAnimationFrame(() => {
64
- N.current?.scrollTo({ top: N.current.scrollHeight });
64
+ M.current?.scrollTo({ top: M.current.scrollHeight });
65
65
  });
66
66
  });
67
67
  return () => {
68
68
  cancelAnimationFrame(t), cancelAnimationFrame(e);
69
69
  };
70
- }, [Z]), y(() => {
70
+ }, [Z]), g(() => {
71
71
  !G || D === void 0 || queueMicrotask(() => {
72
72
  G.commands.setContent(D ?? "", !1), G.commands.focus("end");
73
73
  });
74
- }, [D]);
75
- let pe = /* @__PURE__ */ S("div", { className: d.anchorElement });
76
- return /* @__PURE__ */ S("div", {
74
+ }, [D]), g(() => {
75
+ if (!R) return;
76
+ let t = `[${Object.keys(e)[0]}]`, n = (e) => {
77
+ if (M.current?.contains(e)) return !0;
78
+ let n = document.querySelectorAll(t);
79
+ for (let t of n) if (t.contains(e)) return !0;
80
+ return !1;
81
+ }, r = (e) => {
82
+ let t = e.target;
83
+ !t || n(t) || L();
84
+ }, i = requestAnimationFrame(() => {
85
+ document.addEventListener("mousedown", r), document.addEventListener("focusin", r);
86
+ });
87
+ return () => {
88
+ cancelAnimationFrame(i), document.removeEventListener("mousedown", r), document.removeEventListener("focusin", r);
89
+ };
90
+ }, [L, R]);
91
+ let me = /* @__PURE__ */ b("div", { className: l.anchorElement });
92
+ return /* @__PURE__ */ b("div", {
77
93
  "data-no-expand": !0,
78
- className: d.messageEditorWrapper,
79
- children: /* @__PURE__ */ C("div", {
80
- className: v(d.messageEditor, {
81
- [d.editorHasScroll]: K,
82
- [d.editorEditMode]: W,
83
- [d.editorError]: I || Z,
84
- [d.editorFirstAnnotation]: !W && O,
85
- [d.editorCharacterLimitExceeded]: Z
94
+ className: l.messageEditorWrapper,
95
+ children: /* @__PURE__ */ x("div", {
96
+ className: h(l.messageEditor, {
97
+ [l.editorHasScroll]: K,
98
+ [l.editorEditMode]: W,
99
+ [l.editorError]: F || Z,
100
+ [l.editorFirstAnnotation]: !W && O,
101
+ [l.editorCharacterLimitExceeded]: Z
86
102
  }),
87
- children: [/* @__PURE__ */ C("div", {
88
- className: v(d.editorViewport, { [d.editorFullWidth]: Y }),
89
- children: [/* @__PURE__ */ C("div", {
90
- ref: N,
91
- className: d.editorContainer,
92
- "aria-label": F.formatMessage(u.scrollContainerAriaLabel),
93
- children: [/* @__PURE__ */ S(se, {
94
- "aria-label": F.formatMessage(u.editorContentAriaLabel),
103
+ children: [/* @__PURE__ */ x("div", {
104
+ className: h(l.editorViewport, { [l.editorFullWidth]: Y }),
105
+ children: [/* @__PURE__ */ x("div", {
106
+ ref: M,
107
+ className: l.editorContainer,
108
+ "aria-label": P.formatMessage(c.scrollContainerAriaLabel),
109
+ children: [/* @__PURE__ */ b(C, {
110
+ "aria-label": P.formatMessage(c.editorContentAriaLabel),
95
111
  editor: G
96
- }), /* @__PURE__ */ S(oe, {
97
- ref: M,
98
- inputElementRef: P,
99
- onSelectedUserChange: ue,
112
+ }), /* @__PURE__ */ b(S, {
113
+ ref: j,
114
+ inputElementRef: N,
115
+ onSelectedUserChange: de,
100
116
  open: R,
101
- rootElement: pe,
117
+ rootElement: me,
102
118
  value: z,
103
- ...j,
119
+ ...A,
104
120
  popoverContentContainerProps: {
105
- ...j.popoverContentContainerProps,
121
+ ...A.popoverContentContainerProps,
106
122
  ...e,
107
123
  avoidCollisions: !0
108
124
  }
109
125
  })]
110
- }), K && /* @__PURE__ */ S("div", {
111
- className: v(d.editorFade, { [d.editorFadeHidden]: q }),
126
+ }), K && /* @__PURE__ */ b("div", {
127
+ className: h(l.editorFade, { [l.editorFadeHidden]: q }),
112
128
  "aria-hidden": "true"
113
129
  })]
114
- }), /* @__PURE__ */ S("div", {
115
- className: v(d.actionsWrapper),
116
- children: /* @__PURE__ */ C("div", {
117
- className: v(d.actionsWrapperInner, {
118
- [d.scrolledToBottom]: q,
119
- [d.characterLimitExceeded]: Z
130
+ }), /* @__PURE__ */ b("div", {
131
+ className: h(l.actionsWrapper),
132
+ children: /* @__PURE__ */ x("div", {
133
+ className: h(l.actionsWrapperInner, {
134
+ [l.scrolledToBottom]: q,
135
+ [l.characterLimitExceeded]: Z
120
136
  }),
121
137
  children: [
122
- I && /* @__PURE__ */ S(m, { errorMessage: I }),
123
- J && J.excess > 0 && !Y && /* @__PURE__ */ S(_, {
138
+ F && /* @__PURE__ */ b(f, { errorMessage: F }),
139
+ J && J.excess > 0 && !Y && /* @__PURE__ */ b(oe, {
124
140
  role: "alert",
125
- children: F.formatMessage(u.characterLimitExceeded, { excess: J.excess })
141
+ children: P.formatMessage(c.characterLimitExceeded, { excess: J.excess })
126
142
  }),
127
- W ? /* @__PURE__ */ C("div", {
128
- className: d.editActionsColumn,
129
- children: [$ && /* @__PURE__ */ S(f, {
143
+ W ? /* @__PURE__ */ x("div", {
144
+ className: l.editActionsColumn,
145
+ children: [$ && /* @__PURE__ */ b(u, {
130
146
  count: J.count,
131
147
  excess: J.excess,
132
148
  maxCount: J.maxCount
133
- }), /* @__PURE__ */ S("div", {
134
- className: d.editActionsRow,
135
- children: /* @__PURE__ */ S(p, {
149
+ }), /* @__PURE__ */ b("div", {
150
+ className: l.editActionsRow,
151
+ children: /* @__PURE__ */ b(d, {
136
152
  disabled: Q,
137
153
  getEditorJsonContent: () => G?.getJSON(),
138
- onCancel: c.onEditCancel,
139
- onEditSuccess: c.onEditSuccess,
140
- onSave: c.onSave,
141
- onSaveError: c.onSaveError
154
+ onCancel: s.onEditCancel,
155
+ onEditSuccess: s.onEditSuccess,
156
+ onSave: s.onSave,
157
+ onSaveError: s.onSaveError
142
158
  })
143
159
  })]
144
- }) : /* @__PURE__ */ C(ae, { children: [$ && /* @__PURE__ */ S(f, {
160
+ }) : /* @__PURE__ */ x(y, { children: [$ && /* @__PURE__ */ b(u, {
145
161
  count: J.count,
146
162
  excess: J.excess,
147
163
  maxCount: J.maxCount
148
- }), /* @__PURE__ */ S(h, {
164
+ }), /* @__PURE__ */ b(p, {
149
165
  cleanEditor: () => G?.commands.setContent(""),
150
166
  disabled: Q,
151
167
  getEditorJsonContent: () => G?.getJSON(),
152
- onPost: c.onPost,
153
- onPostError: c.onPostError,
154
- onPostSuccess: c.onPostSuccess
168
+ onPost: s.onPost,
169
+ onPostError: s.onPostError,
170
+ onPostSuccess: s.onPostSuccess
155
171
  })] })
156
172
  ]
157
173
  })
158
174
  })]
159
175
  })
160
176
  });
161
- }, D = (e) => /* @__PURE__ */ S(c, { children: /* @__PURE__ */ S(E, { ...e }) });
162
- export { D as MessageEditor, g as MessageEditorVariant };
177
+ }, D = (e) => /* @__PURE__ */ b(s, { children: /* @__PURE__ */ b(E, { ...e }) });
178
+ export { D as MessageEditor, m as MessageEditorVariant };
package/dist/types/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.d.ts CHANGED
@@ -12,4 +12,5 @@ export declare const useMentionState: (userSelectorRef: MutableRefObject<Headles
12
12
  query: string;
13
13
  command: (props: EditorMentionAttributes) => void;
14
14
  suggestionCallbacks: SuggestionCallbacks;
15
+ close: () => void;
15
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/threaded-annotations",
3
- "version": "1.94.9",
3
+ "version": "1.94.11",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "dependencies": {
6
6
  "@tanstack/react-virtual": "^3.10.8",
@@ -16,23 +16,23 @@
16
16
  "uuid": "^9.0.1"
17
17
  },
18
18
  "peerDependencies": {
19
- "@box/blueprint-web": "^15.4.0",
20
- "@box/blueprint-web-assets": "^4.121.7",
21
- "@box/collaboration-popover": "^1.63.8",
22
- "@box/readable-time": "^1.42.8",
23
- "@box/user-selector": "^1.77.8",
19
+ "@box/blueprint-web": "^15.5.0",
20
+ "@box/blueprint-web-assets": "^4.121.8",
21
+ "@box/collaboration-popover": "^1.63.9",
22
+ "@box/readable-time": "^1.42.9",
23
+ "@box/user-selector": "^1.77.9",
24
24
  "clsx": "^1.2.1",
25
25
  "react": "^18.0.0",
26
26
  "react-dom": "^18.0.0",
27
27
  "react-intl": "^6.4.2"
28
28
  },
29
29
  "devDependencies": {
30
- "@box/blueprint-web": "^15.4.0",
31
- "@box/blueprint-web-assets": "^4.121.7",
30
+ "@box/blueprint-web": "^15.5.0",
31
+ "@box/blueprint-web-assets": "^4.121.8",
32
32
  "@box/eslint-plugin-blueprint": "1.2.4",
33
- "@box/readable-time": "^1.42.8",
34
- "@box/storybook-utils": "^0.20.7",
35
- "@box/user-selector": "^1.77.8",
33
+ "@box/readable-time": "^1.42.9",
34
+ "@box/storybook-utils": "^0.20.8",
35
+ "@box/user-selector": "^1.77.9",
36
36
  "react": "^18.0.0",
37
37
  "react-dom": "^18.0.0"
38
38
  },