@blocklet/discuss-kit 1.6.63 → 1.6.64

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 (3) hide show
  1. package/lib/cjs/comments.js +141 -137
  2. package/lib/es/comments.js +143 -139
  3. package/package.json +4 -4
package/lib/cjs/comments.js CHANGED
@@ -91,101 +91,146 @@ const commentAPI = {
91
91
  return data;
92
92
  }
93
93
  };
94
- function DiscussKitComments({
95
- displayConnectButton,
96
- displayReaction,
97
- object,
98
- onChange,
99
- onSendComment,
100
- commentInputPosition,
101
- autoFocus,
102
- disabledSend,
103
- initialContent,
104
- sendText,
105
- sendIcon,
106
- showTopbar
107
- }) {
108
- discussKitUx.useDefaultApiErrorHandler({ request: api });
109
- const { session } = react.useContext(Session.SessionContext) || {};
110
- const { state, sort, add, updateCommentState, interactive, findById } = discussKitUx.useCommentsContext();
111
- const { total, order, initialized } = state;
112
- const { t } = context.useLocaleContext();
113
- const objectRatingState = useAsyncRetry(() => api.fetchRatings(object.id));
114
- const handlers = {
115
- ADD_COMMENT: (data) => {
116
- add(formatComment(data));
117
- onChange == null ? void 0 : onChange();
118
- },
119
- UPDATE_COMMENT: (data) => {
120
- const comment = findById(data.id);
121
- if (comment && comment.content !== data.content) {
122
- updateCommentState(data.id, (current) => {
123
- current.content = data.content;
124
- current.updatedAt = data.updatedAt;
125
- current.synced = Date.now();
126
- return current;
127
- });
94
+ const DiscussKitComments = react.forwardRef(
95
+ ({
96
+ displayConnectButton,
97
+ displayReaction,
98
+ object,
99
+ onChange,
100
+ onSendComment,
101
+ commentInputPosition,
102
+ autoFocus,
103
+ disabledSend,
104
+ initialContent,
105
+ sendText,
106
+ sendIcon,
107
+ showTopbar
108
+ }, ref) => {
109
+ discussKitUx.useDefaultApiErrorHandler({ request: api });
110
+ const { session } = react.useContext(Session.SessionContext) || {};
111
+ const { state, sort, add, updateCommentState, interactive, findById } = discussKitUx.useCommentsContext();
112
+ const { total, order, initialized } = state;
113
+ const { t } = context.useLocaleContext();
114
+ const objectRatingState = useAsyncRetry(() => api.fetchRatings(object.id));
115
+ const handlers = {
116
+ ADD_COMMENT: (data) => {
117
+ add(formatComment(data));
118
+ onChange == null ? void 0 : onChange();
119
+ },
120
+ UPDATE_COMMENT: (data) => {
121
+ const comment = findById(data.id);
122
+ if (comment && comment.content !== data.content) {
123
+ updateCommentState(data.id, (current) => {
124
+ current.content = data.content;
125
+ current.updatedAt = data.updatedAt;
126
+ current.synced = Date.now();
127
+ return current;
128
+ });
129
+ }
130
+ },
131
+ RATING: () => objectRatingState.retry(),
132
+ RATING_COMMENT: async ({ commentId }) => {
133
+ const rating = await api.fetchRatings(commentId);
134
+ updateCommentState(commentId, (current) => ({
135
+ ...current,
136
+ rating
137
+ }));
128
138
  }
129
- },
130
- RATING: () => objectRatingState.retry(),
131
- RATING_COMMENT: async ({ commentId }) => {
132
- const rating = await api.fetchRatings(commentId);
133
- updateCommentState(commentId, (current) => ({
134
- ...current,
135
- rating
136
- }));
137
- }
138
- };
139
- discussKitUx.useSubscription(
140
- object.id,
141
- ({ event, data }) => {
142
- var _a;
143
- (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
144
- },
145
- [object.id, state]
146
- );
147
- if (!initialized) {
148
- return /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
149
- }
150
- const sendComment = async (content) => {
151
- const { data } = await api.post("/comments", { content, object });
152
- add(formatComment(data));
153
- onSendComment == null ? void 0 : onSendComment(data);
154
- };
155
- const handleOnRate = async ({ ratingType, value }) => {
156
- if (!session.user) {
157
- session.login();
158
- throw new Error("Unauthenticated.");
159
- }
160
- await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
161
- };
162
- const handleOnUnrate = async () => {
163
- if (!session.user) {
164
- session.login();
165
- throw new Error("Unauthenticated.");
139
+ };
140
+ discussKitUx.useSubscription(
141
+ object.id,
142
+ ({ event, data }) => {
143
+ var _a;
144
+ (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
145
+ },
146
+ [object.id, state]
147
+ );
148
+ if (!initialized) {
149
+ return /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
166
150
  }
167
- await api.delete(`/topics/${object.id}/ratings`);
168
- };
169
- return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
170
- /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
171
- /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
172
- displayReaction && objectRatingState.value && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
173
- discussKitUx.GithubReaction,
151
+ const sendComment = async (content) => {
152
+ const { data } = await api.post("/comments", { content, object });
153
+ add(formatComment(data));
154
+ onSendComment == null ? void 0 : onSendComment(data);
155
+ };
156
+ const handleOnRate = async ({ ratingType, value }) => {
157
+ if (!session.user) {
158
+ session.login();
159
+ throw new Error("Unauthenticated.");
160
+ }
161
+ await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
162
+ };
163
+ const handleOnUnrate = async () => {
164
+ if (!session.user) {
165
+ session.login();
166
+ throw new Error("Unauthenticated.");
167
+ }
168
+ await api.delete(`/topics/${object.id}/ratings`);
169
+ };
170
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, children: [
171
+ /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
172
+ /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
173
+ displayReaction && objectRatingState.value && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
174
+ discussKitUx.GithubReaction,
175
+ {
176
+ data: objectRatingState.value,
177
+ onRate: handleOnRate,
178
+ onUnrate: handleOnUnrate,
179
+ interactive
180
+ }
181
+ ) }),
182
+ displayConnectButton && (session.user ? /* @__PURE__ */ jsxRuntime.jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "medium", variant: "contained", color: "primary", onClick: () => session.login(), children: t("connect") }))
183
+ ] }),
184
+ displayConnectButton && !session.user && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "connect-tip", children: [
185
+ t("connectDIDWallet"),
186
+ " ",
187
+ /* @__PURE__ */ jsxRuntime.jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
188
+ ] }) }),
189
+ session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsxRuntime.jsx(
190
+ discussKitUx.CommentInput,
174
191
  {
175
- data: objectRatingState.value,
176
- onRate: handleOnRate,
177
- onUnrate: handleOnUnrate,
178
- interactive
192
+ send: sendComment,
193
+ draftKey: `object-${object.id}`,
194
+ autoFocus,
195
+ disabledSend,
196
+ initialContent,
197
+ sendText,
198
+ sendIcon
179
199
  }
180
- ) }),
181
- displayConnectButton && (session.user ? /* @__PURE__ */ jsxRuntime.jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "medium", variant: "contained", color: "primary", onClick: () => session.login(), children: t("connect") }))
200
+ ) })
182
201
  ] }),
183
- displayConnectButton && !session.user && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "connect-tip", children: [
184
- t("connectDIDWallet"),
185
- " ",
186
- /* @__PURE__ */ jsxRuntime.jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
187
- ] }) }),
188
- session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsxRuntime.jsx(
202
+ !!total && showTopbar && /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
203
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
204
+ total > 0 ? `${total} ${t("comments")}` : t("comment"),
205
+ " "
206
+ ] }),
207
+ /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
208
+ /* @__PURE__ */ jsxRuntime.jsx(
209
+ Button,
210
+ {
211
+ variant: "contained",
212
+ color: order !== "desc" ? "primary" : "inherit",
213
+ size: "small",
214
+ onClick: () => sort("asc"),
215
+ className: order !== "desc" ? "" : "unselected-button",
216
+ children: t("oldest")
217
+ }
218
+ ),
219
+ /* @__PURE__ */ jsxRuntime.jsx(
220
+ Button,
221
+ {
222
+ variant: "contained",
223
+ color: order === "desc" ? "primary" : "inherit",
224
+ size: "small",
225
+ onClick: () => sort("desc"),
226
+ className: order === "desc" ? "" : "unselected-button",
227
+ children: t("newest")
228
+ }
229
+ )
230
+ ] })
231
+ ] }),
232
+ /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.CommentList, { className: "comment-list" }),
233
+ session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
189
234
  discussKitUx.CommentInput,
190
235
  {
191
236
  send: sendComment,
@@ -197,52 +242,9 @@ function DiscussKitComments({
197
242
  sendIcon
198
243
  }
199
244
  ) })
200
- ] }),
201
- !!total && showTopbar && /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
202
- /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
203
- total > 0 ? `${total} ${t("comments")}` : t("comment"),
204
- " "
205
- ] }),
206
- /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
207
- /* @__PURE__ */ jsxRuntime.jsx(
208
- Button,
209
- {
210
- variant: "contained",
211
- color: order !== "desc" ? "primary" : "inherit",
212
- size: "small",
213
- onClick: () => sort("asc"),
214
- className: order !== "desc" ? "" : "unselected-button",
215
- children: t("oldest")
216
- }
217
- ),
218
- /* @__PURE__ */ jsxRuntime.jsx(
219
- Button,
220
- {
221
- variant: "contained",
222
- color: order === "desc" ? "primary" : "inherit",
223
- size: "small",
224
- onClick: () => sort("desc"),
225
- className: order === "desc" ? "" : "unselected-button",
226
- children: t("newest")
227
- }
228
- )
229
- ] })
230
- ] }),
231
- /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.CommentList, { className: "comment-list" }),
232
- session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
233
- discussKitUx.CommentInput,
234
- {
235
- send: sendComment,
236
- draftKey: `object-${object.id}`,
237
- autoFocus,
238
- disabledSend,
239
- initialContent,
240
- sendText,
241
- sendIcon
242
- }
243
- ) })
244
- ] });
245
- }
245
+ ] });
246
+ }
247
+ );
246
248
  DiscussKitComments.propTypes = {
247
249
  displayConnectButton: PropTypes.bool,
248
250
  displayReaction: PropTypes.bool,
@@ -288,6 +290,7 @@ function Wrapper({
288
290
  throw new Error("target is required.");
289
291
  }
290
292
  const { locale = "en" } = context.useLocaleContext() || {};
293
+ const containerRef = react.useRef();
291
294
  const object = react.useMemo(
292
295
  () => ({
293
296
  link: window.location.href,
@@ -322,7 +325,8 @@ function Wrapper({
322
325
  allowCopyLink,
323
326
  showProfileCard,
324
327
  interactive,
325
- children: /* @__PURE__ */ jsxRuntime.jsx(DiscussKitComments, { ...rest, object })
328
+ containerRef,
329
+ children: /* @__PURE__ */ jsxRuntime.jsx(DiscussKitComments, { ...rest, object, ref: containerRef })
326
330
  }
327
331
  ) }) }) }) }) }) });
328
332
  }
package/lib/es/comments.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useMemo, useEffect, useContext } from "react";
2
+ import { forwardRef, useContext, useRef, useMemo, useEffect } from "react";
3
3
  import { styled } from "@arcblock/ux/lib/Theme";
4
4
  import joinUrl from "url-join";
5
5
  import PropTypes from "prop-types";
@@ -11,7 +11,7 @@ import CircularProgress from "@mui/material/CircularProgress";
11
11
  import ButtonGroup from "@mui/material/ButtonGroup";
12
12
  import { useLocaleContext, LocaleProvider } from "@arcblock/ux/lib/Locale/context";
13
13
  import { ErrorBoundary } from "react-error-boundary";
14
- import { getWsClient, UploaderProvider, InternalThemeProvider, ConfirmProvider, DefaultEditorConfigProvider, CommentsProvider, useDefaultApiErrorHandler, useCommentsContext, useSubscription, GithubReaction, CommentInput, CommentList } from "@blocklet/discuss-kit-ux";
14
+ import { useDefaultApiErrorHandler, useCommentsContext, useSubscription, GithubReaction, CommentInput, CommentList, getWsClient, UploaderProvider, InternalThemeProvider, ConfirmProvider, DefaultEditorConfigProvider, CommentsProvider } from "@blocklet/discuss-kit-ux";
15
15
  import { useRequest } from "ahooks";
16
16
  import ErrorFallback from "./components/error-fallback";
17
17
  import { translations } from "./locales";
@@ -90,101 +90,146 @@ const commentAPI = {
90
90
  return data;
91
91
  }
92
92
  };
93
- function DiscussKitComments({
94
- displayConnectButton,
95
- displayReaction,
96
- object,
97
- onChange,
98
- onSendComment,
99
- commentInputPosition,
100
- autoFocus,
101
- disabledSend,
102
- initialContent,
103
- sendText,
104
- sendIcon,
105
- showTopbar
106
- }) {
107
- useDefaultApiErrorHandler({ request: api });
108
- const { session } = useContext(SessionContext) || {};
109
- const { state, sort, add, updateCommentState, interactive, findById } = useCommentsContext();
110
- const { total, order, initialized } = state;
111
- const { t } = useLocaleContext();
112
- const objectRatingState = useAsyncRetry(() => fetchRatings(object.id));
113
- const handlers = {
114
- ADD_COMMENT: (data) => {
115
- add(formatComment(data));
116
- onChange == null ? void 0 : onChange();
117
- },
118
- UPDATE_COMMENT: (data) => {
119
- const comment = findById(data.id);
120
- if (comment && comment.content !== data.content) {
121
- updateCommentState(data.id, (current) => {
122
- current.content = data.content;
123
- current.updatedAt = data.updatedAt;
124
- current.synced = Date.now();
125
- return current;
126
- });
93
+ const DiscussKitComments = forwardRef(
94
+ ({
95
+ displayConnectButton,
96
+ displayReaction,
97
+ object,
98
+ onChange,
99
+ onSendComment,
100
+ commentInputPosition,
101
+ autoFocus,
102
+ disabledSend,
103
+ initialContent,
104
+ sendText,
105
+ sendIcon,
106
+ showTopbar
107
+ }, ref) => {
108
+ useDefaultApiErrorHandler({ request: api });
109
+ const { session } = useContext(SessionContext) || {};
110
+ const { state, sort, add, updateCommentState, interactive, findById } = useCommentsContext();
111
+ const { total, order, initialized } = state;
112
+ const { t } = useLocaleContext();
113
+ const objectRatingState = useAsyncRetry(() => fetchRatings(object.id));
114
+ const handlers = {
115
+ ADD_COMMENT: (data) => {
116
+ add(formatComment(data));
117
+ onChange == null ? void 0 : onChange();
118
+ },
119
+ UPDATE_COMMENT: (data) => {
120
+ const comment = findById(data.id);
121
+ if (comment && comment.content !== data.content) {
122
+ updateCommentState(data.id, (current) => {
123
+ current.content = data.content;
124
+ current.updatedAt = data.updatedAt;
125
+ current.synced = Date.now();
126
+ return current;
127
+ });
128
+ }
129
+ },
130
+ RATING: () => objectRatingState.retry(),
131
+ RATING_COMMENT: async ({ commentId }) => {
132
+ const rating = await fetchRatings(commentId);
133
+ updateCommentState(commentId, (current) => ({
134
+ ...current,
135
+ rating
136
+ }));
127
137
  }
128
- },
129
- RATING: () => objectRatingState.retry(),
130
- RATING_COMMENT: async ({ commentId }) => {
131
- const rating = await fetchRatings(commentId);
132
- updateCommentState(commentId, (current) => ({
133
- ...current,
134
- rating
135
- }));
136
- }
137
- };
138
- useSubscription(
139
- object.id,
140
- ({ event, data }) => {
141
- var _a;
142
- (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
143
- },
144
- [object.id, state]
145
- );
146
- if (!initialized) {
147
- return /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
148
- }
149
- const sendComment = async (content) => {
150
- const { data } = await api.post("/comments", { content, object });
151
- add(formatComment(data));
152
- onSendComment == null ? void 0 : onSendComment(data);
153
- };
154
- const handleOnRate = async ({ ratingType, value }) => {
155
- if (!session.user) {
156
- session.login();
157
- throw new Error("Unauthenticated.");
158
- }
159
- await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
160
- };
161
- const handleOnUnrate = async () => {
162
- if (!session.user) {
163
- session.login();
164
- throw new Error("Unauthenticated.");
138
+ };
139
+ useSubscription(
140
+ object.id,
141
+ ({ event, data }) => {
142
+ var _a;
143
+ (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
144
+ },
145
+ [object.id, state]
146
+ );
147
+ if (!initialized) {
148
+ return /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
165
149
  }
166
- await api.delete(`/topics/${object.id}/ratings`);
167
- };
168
- return /* @__PURE__ */ jsxs(Container, { children: [
169
- /* @__PURE__ */ jsxs(Fragment, { children: [
170
- /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
171
- displayReaction && objectRatingState.value && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
172
- GithubReaction,
150
+ const sendComment = async (content) => {
151
+ const { data } = await api.post("/comments", { content, object });
152
+ add(formatComment(data));
153
+ onSendComment == null ? void 0 : onSendComment(data);
154
+ };
155
+ const handleOnRate = async ({ ratingType, value }) => {
156
+ if (!session.user) {
157
+ session.login();
158
+ throw new Error("Unauthenticated.");
159
+ }
160
+ await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
161
+ };
162
+ const handleOnUnrate = async () => {
163
+ if (!session.user) {
164
+ session.login();
165
+ throw new Error("Unauthenticated.");
166
+ }
167
+ await api.delete(`/topics/${object.id}/ratings`);
168
+ };
169
+ return /* @__PURE__ */ jsxs(Container, { ref, children: [
170
+ /* @__PURE__ */ jsxs(Fragment, { children: [
171
+ /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
172
+ displayReaction && objectRatingState.value && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
173
+ GithubReaction,
174
+ {
175
+ data: objectRatingState.value,
176
+ onRate: handleOnRate,
177
+ onUnrate: handleOnUnrate,
178
+ interactive
179
+ }
180
+ ) }),
181
+ displayConnectButton && (session.user ? /* @__PURE__ */ jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session }) : /* @__PURE__ */ jsx(Button, { size: "medium", variant: "contained", color: "primary", onClick: () => session.login(), children: t("connect") }))
182
+ ] }),
183
+ displayConnectButton && !session.user && /* @__PURE__ */ jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxs("span", { className: "connect-tip", children: [
184
+ t("connectDIDWallet"),
185
+ " ",
186
+ /* @__PURE__ */ jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
187
+ ] }) }),
188
+ session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsx(
189
+ CommentInput,
173
190
  {
174
- data: objectRatingState.value,
175
- onRate: handleOnRate,
176
- onUnrate: handleOnUnrate,
177
- interactive
191
+ send: sendComment,
192
+ draftKey: `object-${object.id}`,
193
+ autoFocus,
194
+ disabledSend,
195
+ initialContent,
196
+ sendText,
197
+ sendIcon
178
198
  }
179
- ) }),
180
- displayConnectButton && (session.user ? /* @__PURE__ */ jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session }) : /* @__PURE__ */ jsx(Button, { size: "medium", variant: "contained", color: "primary", onClick: () => session.login(), children: t("connect") }))
199
+ ) })
181
200
  ] }),
182
- displayConnectButton && !session.user && /* @__PURE__ */ jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxs("span", { className: "connect-tip", children: [
183
- t("connectDIDWallet"),
184
- " ",
185
- /* @__PURE__ */ jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
186
- ] }) }),
187
- session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsx(
201
+ !!total && showTopbar && /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
202
+ /* @__PURE__ */ jsxs("span", { children: [
203
+ total > 0 ? `${total} ${t("comments")}` : t("comment"),
204
+ " "
205
+ ] }),
206
+ /* @__PURE__ */ jsxs(ButtonGroup, { children: [
207
+ /* @__PURE__ */ jsx(
208
+ Button,
209
+ {
210
+ variant: "contained",
211
+ color: order !== "desc" ? "primary" : "inherit",
212
+ size: "small",
213
+ onClick: () => sort("asc"),
214
+ className: order !== "desc" ? "" : "unselected-button",
215
+ children: t("oldest")
216
+ }
217
+ ),
218
+ /* @__PURE__ */ jsx(
219
+ Button,
220
+ {
221
+ variant: "contained",
222
+ color: order === "desc" ? "primary" : "inherit",
223
+ size: "small",
224
+ onClick: () => sort("desc"),
225
+ className: order === "desc" ? "" : "unselected-button",
226
+ children: t("newest")
227
+ }
228
+ )
229
+ ] })
230
+ ] }),
231
+ /* @__PURE__ */ jsx(CommentList, { className: "comment-list" }),
232
+ session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsx(Box, { mt: 6, children: /* @__PURE__ */ jsx(
188
233
  CommentInput,
189
234
  {
190
235
  send: sendComment,
@@ -196,52 +241,9 @@ function DiscussKitComments({
196
241
  sendIcon
197
242
  }
198
243
  ) })
199
- ] }),
200
- !!total && showTopbar && /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
201
- /* @__PURE__ */ jsxs("span", { children: [
202
- total > 0 ? `${total} ${t("comments")}` : t("comment"),
203
- " "
204
- ] }),
205
- /* @__PURE__ */ jsxs(ButtonGroup, { children: [
206
- /* @__PURE__ */ jsx(
207
- Button,
208
- {
209
- variant: "contained",
210
- color: order !== "desc" ? "primary" : "inherit",
211
- size: "small",
212
- onClick: () => sort("asc"),
213
- className: order !== "desc" ? "" : "unselected-button",
214
- children: t("oldest")
215
- }
216
- ),
217
- /* @__PURE__ */ jsx(
218
- Button,
219
- {
220
- variant: "contained",
221
- color: order === "desc" ? "primary" : "inherit",
222
- size: "small",
223
- onClick: () => sort("desc"),
224
- className: order === "desc" ? "" : "unselected-button",
225
- children: t("newest")
226
- }
227
- )
228
- ] })
229
- ] }),
230
- /* @__PURE__ */ jsx(CommentList, { className: "comment-list" }),
231
- session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsx(Box, { mt: 6, children: /* @__PURE__ */ jsx(
232
- CommentInput,
233
- {
234
- send: sendComment,
235
- draftKey: `object-${object.id}`,
236
- autoFocus,
237
- disabledSend,
238
- initialContent,
239
- sendText,
240
- sendIcon
241
- }
242
- ) })
243
- ] });
244
- }
244
+ ] });
245
+ }
246
+ );
245
247
  DiscussKitComments.propTypes = {
246
248
  displayConnectButton: PropTypes.bool,
247
249
  displayReaction: PropTypes.bool,
@@ -287,6 +289,7 @@ function Wrapper({
287
289
  throw new Error("target is required.");
288
290
  }
289
291
  const { locale = "en" } = useLocaleContext() || {};
292
+ const containerRef = useRef();
290
293
  const object = useMemo(
291
294
  () => ({
292
295
  link: window.location.href,
@@ -321,7 +324,8 @@ function Wrapper({
321
324
  allowCopyLink,
322
325
  showProfileCard,
323
326
  interactive,
324
- children: /* @__PURE__ */ jsx(DiscussKitComments, { ...rest, object })
327
+ containerRef,
328
+ children: /* @__PURE__ */ jsx(DiscussKitComments, { ...rest, object, ref: containerRef })
325
329
  }
326
330
  ) }) }) }) }) }) });
327
331
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/discuss-kit",
3
- "version": "1.6.63",
3
+ "version": "1.6.64",
4
4
  "description": "A react component for Discuss Kit blocklet.",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "module": "./lib/es/index.js",
@@ -37,8 +37,8 @@
37
37
  "@arcblock/did-connect": "^2.9.6",
38
38
  "@arcblock/ux": "^2.9.6",
39
39
  "@arcblock/ws": "^1.18.108",
40
- "@blocklet/discuss-kit-ux": "1.6.63",
41
- "@blocklet/editor": "1.6.63",
40
+ "@blocklet/discuss-kit-ux": "1.6.64",
41
+ "@blocklet/editor": "1.6.64",
42
42
  "@emotion/react": "^11.10.5",
43
43
  "@emotion/styled": "^11.10.5",
44
44
  "@mui/icons-material": "^5.14.9",
@@ -76,5 +76,5 @@
76
76
  "vite-plugin-build": "^0.10.0",
77
77
  "vite-plugin-svgr": "^4.2.0"
78
78
  },
79
- "gitHead": "6654a90b799b661e5f9ffb543a67d831208ba415"
79
+ "gitHead": "455036419d403c12937a586732caff277ea399c9"
80
80
  }