@blocklet/discuss-kit 1.6.63 → 1.6.64

package/lib/cjs/comments.js

@@ -91,101 +91,146 @@ const commentAPI = {
     return data;
   }
 };
-function DiscussKitComments({
-  displayConnectButton,
-  displayReaction,
-  object,
-  onChange,
-  onSendComment,
-  commentInputPosition,
-  autoFocus,
-  disabledSend,
-  initialContent,
-  sendText,
-  sendIcon,
-  showTopbar
-}) {
-  discussKitUx.useDefaultApiErrorHandler({ request: api });
-  const { session } = react.useContext(Session.SessionContext) || {};
-  const { state, sort, add, updateCommentState, interactive, findById } = discussKitUx.useCommentsContext();
-  const { total, order, initialized } = state;
-  const { t } = context.useLocaleContext();
-  const objectRatingState = useAsyncRetry(() => api.fetchRatings(object.id));
-  const handlers = {
-    ADD_COMMENT: (data) => {
-      add(formatComment(data));
-      onChange == null ? void 0 : onChange();
-    },
-    UPDATE_COMMENT: (data) => {
-      const comment = findById(data.id);
-      if (comment && comment.content !== data.content) {
-        updateCommentState(data.id, (current) => {
-          current.content = data.content;
-          current.updatedAt = data.updatedAt;
-          current.synced = Date.now();
-          return current;
-        });
+const DiscussKitComments = react.forwardRef(
+  ({
+    displayConnectButton,
+    displayReaction,
+    object,
+    onChange,
+    onSendComment,
+    commentInputPosition,
+    autoFocus,
+    disabledSend,
+    initialContent,
+    sendText,
+    sendIcon,
+    showTopbar
+  }, ref) => {
+    discussKitUx.useDefaultApiErrorHandler({ request: api });
+    const { session } = react.useContext(Session.SessionContext) || {};
+    const { state, sort, add, updateCommentState, interactive, findById } = discussKitUx.useCommentsContext();
+    const { total, order, initialized } = state;
+    const { t } = context.useLocaleContext();
+    const objectRatingState = useAsyncRetry(() => api.fetchRatings(object.id));
+    const handlers = {
+      ADD_COMMENT: (data) => {
+        add(formatComment(data));
+        onChange == null ? void 0 : onChange();
+      },
+      UPDATE_COMMENT: (data) => {
+        const comment = findById(data.id);
+        if (comment && comment.content !== data.content) {
+          updateCommentState(data.id, (current) => {
+            current.content = data.content;
+            current.updatedAt = data.updatedAt;
+            current.synced = Date.now();
+            return current;
+          });
+        }
+      },
+      RATING: () => objectRatingState.retry(),
+      RATING_COMMENT: async ({ commentId }) => {
+        const rating = await api.fetchRatings(commentId);
+        updateCommentState(commentId, (current) => ({
+          ...current,
+          rating
+        }));
       }
-    },
-    RATING: () => objectRatingState.retry(),
-    RATING_COMMENT: async ({ commentId }) => {
-      const rating = await api.fetchRatings(commentId);
-      updateCommentState(commentId, (current) => ({
-        ...current,
-        rating
-      }));
-    }
-  };
-  discussKitUx.useSubscription(
-    object.id,
-    ({ event, data }) => {
-      var _a;
-      (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
-    },
-    [object.id, state]
-  );
-  if (!initialized) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
-  }
-  const sendComment = async (content) => {
-    const { data } = await api.post("/comments", { content, object });
-    add(formatComment(data));
-    onSendComment == null ? void 0 : onSendComment(data);
-  };
-  const handleOnRate = async ({ ratingType, value }) => {
-    if (!session.user) {
-      session.login();
-      throw new Error("Unauthenticated.");
-    }
-    await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
-  };
-  const handleOnUnrate = async () => {
-    if (!session.user) {
-      session.login();
-      throw new Error("Unauthenticated.");
+    };
+    discussKitUx.useSubscription(
+      object.id,
+      ({ event, data }) => {
+        var _a;
+        (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
+      },
+      [object.id, state]
+    );
+    if (!initialized) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
     }
-    await api.delete(`/topics/${object.id}/ratings`);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
-        displayReaction && objectRatingState.value && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          discussKitUx.GithubReaction,
+    const sendComment = async (content) => {
+      const { data } = await api.post("/comments", { content, object });
+      add(formatComment(data));
+      onSendComment == null ? void 0 : onSendComment(data);
+    };
+    const handleOnRate = async ({ ratingType, value }) => {
+      if (!session.user) {
+        session.login();
+        throw new Error("Unauthenticated.");
+      }
+      await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
+    };
+    const handleOnUnrate = async () => {
+      if (!session.user) {
+        session.login();
+        throw new Error("Unauthenticated.");
+      }
+      await api.delete(`/topics/${object.id}/ratings`);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
+          displayReaction && objectRatingState.value && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            discussKitUx.GithubReaction,
+            {
+              data: objectRatingState.value,
+              onRate: handleOnRate,
+              onUnrate: handleOnUnrate,
+              interactive
+            }
+          ) }),
+          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") }))
+        ] }),
+        displayConnectButton && !session.user && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "connect-tip", children: [
+          t("connectDIDWallet"),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
+        ] }) }),
+        session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsxRuntime.jsx(
+          discussKitUx.CommentInput,
           {
-            data: objectRatingState.value,
-            onRate: handleOnRate,
-            onUnrate: handleOnUnrate,
-            interactive
+            send: sendComment,
+            draftKey: `object-${object.id}`,
+            autoFocus,
+            disabledSend,
+            initialContent,
+            sendText,
+            sendIcon
           }
-        ) }),
-        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") }))
+        ) })
       ] }),
-      displayConnectButton && !session.user && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "connect-tip", children: [
-        t("connectDIDWallet"),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
-      ] }) }),
-      session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsxRuntime.jsx(
+      !!total && showTopbar && /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          total > 0 ? `${total} ${t("comments")}` : t("comment"),
+          " "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "contained",
+              color: order !== "desc" ? "primary" : "inherit",
+              size: "small",
+              onClick: () => sort("asc"),
+              className: order !== "desc" ? "" : "unselected-button",
+              children: t("oldest")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "contained",
+              color: order === "desc" ? "primary" : "inherit",
+              size: "small",
+              onClick: () => sort("desc"),
+              className: order === "desc" ? "" : "unselected-button",
+              children: t("newest")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.CommentList, { className: "comment-list" }),
+      session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
         discussKitUx.CommentInput,
         {
           send: sendComment,
@@ -197,52 +242,9 @@ function DiscussKitComments({
           sendIcon
         }
       ) })
-    ] }),
-    !!total && showTopbar && /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        total > 0 ? `${total} ${t("comments")}` : t("comment"),
-        " "
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "contained",
-            color: order !== "desc" ? "primary" : "inherit",
-            size: "small",
-            onClick: () => sort("asc"),
-            className: order !== "desc" ? "" : "unselected-button",
-            children: t("oldest")
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "contained",
-            color: order === "desc" ? "primary" : "inherit",
-            size: "small",
-            onClick: () => sort("desc"),
-            className: order === "desc" ? "" : "unselected-button",
-            children: t("newest")
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.CommentList, { className: "comment-list" }),
-    session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-      discussKitUx.CommentInput,
-      {
-        send: sendComment,
-        draftKey: `object-${object.id}`,
-        autoFocus,
-        disabledSend,
-        initialContent,
-        sendText,
-        sendIcon
-      }
-    ) })
-  ] });
-}
+    ] });
+  }
+);
 DiscussKitComments.propTypes = {
   displayConnectButton: PropTypes.bool,
   displayReaction: PropTypes.bool,
@@ -288,6 +290,7 @@ function Wrapper({
     throw new Error("target is required.");
   }
   const { locale = "en" } = context.useLocaleContext() || {};
+  const containerRef = react.useRef();
   const object = react.useMemo(
     () => ({
       link: window.location.href,
@@ -322,7 +325,8 @@ function Wrapper({
       allowCopyLink,
       showProfileCard,
       interactive,
-      children: /* @__PURE__ */ jsxRuntime.jsx(DiscussKitComments, { ...rest, object })
+      containerRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(DiscussKitComments, { ...rest, object, ref: containerRef })
     }
   ) }) }) }) }) }) });
 }

package/lib/es/comments.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useEffect, useContext } from "react";
+import { forwardRef, useContext, useRef, useMemo, useEffect } from "react";
 import { styled } from "@arcblock/ux/lib/Theme";
 import joinUrl from "url-join";
 import PropTypes from "prop-types";
@@ -11,7 +11,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import { useLocaleContext, LocaleProvider } from "@arcblock/ux/lib/Locale/context";
 import { ErrorBoundary } from "react-error-boundary";
-import { getWsClient, UploaderProvider, InternalThemeProvider, ConfirmProvider, DefaultEditorConfigProvider, CommentsProvider, useDefaultApiErrorHandler, useCommentsContext, useSubscription, GithubReaction, CommentInput, CommentList } from "@blocklet/discuss-kit-ux";
+import { useDefaultApiErrorHandler, useCommentsContext, useSubscription, GithubReaction, CommentInput, CommentList, getWsClient, UploaderProvider, InternalThemeProvider, ConfirmProvider, DefaultEditorConfigProvider, CommentsProvider } from "@blocklet/discuss-kit-ux";
 import { useRequest } from "ahooks";
 import ErrorFallback from "./components/error-fallback";
 import { translations } from "./locales";
@@ -90,101 +90,146 @@ const commentAPI = {
     return data;
   }
 };
-function DiscussKitComments({
-  displayConnectButton,
-  displayReaction,
-  object,
-  onChange,
-  onSendComment,
-  commentInputPosition,
-  autoFocus,
-  disabledSend,
-  initialContent,
-  sendText,
-  sendIcon,
-  showTopbar
-}) {
-  useDefaultApiErrorHandler({ request: api });
-  const { session } = useContext(SessionContext) || {};
-  const { state, sort, add, updateCommentState, interactive, findById } = useCommentsContext();
-  const { total, order, initialized } = state;
-  const { t } = useLocaleContext();
-  const objectRatingState = useAsyncRetry(() => fetchRatings(object.id));
-  const handlers = {
-    ADD_COMMENT: (data) => {
-      add(formatComment(data));
-      onChange == null ? void 0 : onChange();
-    },
-    UPDATE_COMMENT: (data) => {
-      const comment = findById(data.id);
-      if (comment && comment.content !== data.content) {
-        updateCommentState(data.id, (current) => {
-          current.content = data.content;
-          current.updatedAt = data.updatedAt;
-          current.synced = Date.now();
-          return current;
-        });
+const DiscussKitComments = forwardRef(
+  ({
+    displayConnectButton,
+    displayReaction,
+    object,
+    onChange,
+    onSendComment,
+    commentInputPosition,
+    autoFocus,
+    disabledSend,
+    initialContent,
+    sendText,
+    sendIcon,
+    showTopbar
+  }, ref) => {
+    useDefaultApiErrorHandler({ request: api });
+    const { session } = useContext(SessionContext) || {};
+    const { state, sort, add, updateCommentState, interactive, findById } = useCommentsContext();
+    const { total, order, initialized } = state;
+    const { t } = useLocaleContext();
+    const objectRatingState = useAsyncRetry(() => fetchRatings(object.id));
+    const handlers = {
+      ADD_COMMENT: (data) => {
+        add(formatComment(data));
+        onChange == null ? void 0 : onChange();
+      },
+      UPDATE_COMMENT: (data) => {
+        const comment = findById(data.id);
+        if (comment && comment.content !== data.content) {
+          updateCommentState(data.id, (current) => {
+            current.content = data.content;
+            current.updatedAt = data.updatedAt;
+            current.synced = Date.now();
+            return current;
+          });
+        }
+      },
+      RATING: () => objectRatingState.retry(),
+      RATING_COMMENT: async ({ commentId }) => {
+        const rating = await fetchRatings(commentId);
+        updateCommentState(commentId, (current) => ({
+          ...current,
+          rating
+        }));
       }
-    },
-    RATING: () => objectRatingState.retry(),
-    RATING_COMMENT: async ({ commentId }) => {
-      const rating = await fetchRatings(commentId);
-      updateCommentState(commentId, (current) => ({
-        ...current,
-        rating
-      }));
-    }
-  };
-  useSubscription(
-    object.id,
-    ({ event, data }) => {
-      var _a;
-      (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
-    },
-    [object.id, state]
-  );
-  if (!initialized) {
-    return /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
-  }
-  const sendComment = async (content) => {
-    const { data } = await api.post("/comments", { content, object });
-    add(formatComment(data));
-    onSendComment == null ? void 0 : onSendComment(data);
-  };
-  const handleOnRate = async ({ ratingType, value }) => {
-    if (!session.user) {
-      session.login();
-      throw new Error("Unauthenticated.");
-    }
-    await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
-  };
-  const handleOnUnrate = async () => {
-    if (!session.user) {
-      session.login();
-      throw new Error("Unauthenticated.");
+    };
+    useSubscription(
+      object.id,
+      ({ event, data }) => {
+        var _a;
+        (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
+      },
+      [object.id, state]
+    );
+    if (!initialized) {
+      return /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
     }
-    await api.delete(`/topics/${object.id}/ratings`);
-  };
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
-        displayReaction && objectRatingState.value && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-          GithubReaction,
+    const sendComment = async (content) => {
+      const { data } = await api.post("/comments", { content, object });
+      add(formatComment(data));
+      onSendComment == null ? void 0 : onSendComment(data);
+    };
+    const handleOnRate = async ({ ratingType, value }) => {
+      if (!session.user) {
+        session.login();
+        throw new Error("Unauthenticated.");
+      }
+      await api.post(`/topics/${object.id}/ratings`, { ratingType, value });
+    };
+    const handleOnUnrate = async () => {
+      if (!session.user) {
+        session.login();
+        throw new Error("Unauthenticated.");
+      }
+      await api.delete(`/topics/${object.id}/ratings`);
+    };
+    return /* @__PURE__ */ jsxs(Container, { ref, children: [
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: [
+          displayReaction && objectRatingState.value && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            GithubReaction,
+            {
+              data: objectRatingState.value,
+              onRate: handleOnRate,
+              onUnrate: handleOnUnrate,
+              interactive
+            }
+          ) }),
+          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") }))
+        ] }),
+        displayConnectButton && !session.user && /* @__PURE__ */ jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxs("span", { className: "connect-tip", children: [
+          t("connectDIDWallet"),
+          " ",
+          /* @__PURE__ */ jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
+        ] }) }),
+        session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsx(
+          CommentInput,
           {
-            data: objectRatingState.value,
-            onRate: handleOnRate,
-            onUnrate: handleOnUnrate,
-            interactive
+            send: sendComment,
+            draftKey: `object-${object.id}`,
+            autoFocus,
+            disabledSend,
+            initialContent,
+            sendText,
+            sendIcon
           }
-        ) }),
-        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") }))
+        ) })
       ] }),
-      displayConnectButton && !session.user && /* @__PURE__ */ jsx("div", { className: "input-no-connect", children: /* @__PURE__ */ jsxs("span", { className: "connect-tip", children: [
-        t("connectDIDWallet"),
-        " ",
-        /* @__PURE__ */ jsx("a", { className: "down-load-wallet", href: "https://www.didwallet.io/", target: "_blank", rel: "noreferrer", children: t("installDIDWallet") })
-      ] }) }),
-      session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsx(Box, { mt: 2, className: "comment-editor", children: /* @__PURE__ */ jsx(
+      !!total && showTopbar && /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          total > 0 ? `${total} ${t("comments")}` : t("comment"),
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              color: order !== "desc" ? "primary" : "inherit",
+              size: "small",
+              onClick: () => sort("asc"),
+              className: order !== "desc" ? "" : "unselected-button",
+              children: t("oldest")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              color: order === "desc" ? "primary" : "inherit",
+              size: "small",
+              onClick: () => sort("desc"),
+              className: order === "desc" ? "" : "unselected-button",
+              children: t("newest")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CommentList, { className: "comment-list" }),
+      session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsx(Box, { mt: 6, children: /* @__PURE__ */ jsx(
         CommentInput,
         {
           send: sendComment,
@@ -196,52 +241,9 @@ function DiscussKitComments({
           sendIcon
         }
       ) })
-    ] }),
-    !!total && showTopbar && /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        total > 0 ? `${total} ${t("comments")}` : t("comment"),
-        " "
-      ] }),
-      /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "contained",
-            color: order !== "desc" ? "primary" : "inherit",
-            size: "small",
-            onClick: () => sort("asc"),
-            className: order !== "desc" ? "" : "unselected-button",
-            children: t("oldest")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "contained",
-            color: order === "desc" ? "primary" : "inherit",
-            size: "small",
-            onClick: () => sort("desc"),
-            className: order === "desc" ? "" : "unselected-button",
-            children: t("newest")
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CommentList, { className: "comment-list" }),
-    session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsx(Box, { mt: 6, children: /* @__PURE__ */ jsx(
-      CommentInput,
-      {
-        send: sendComment,
-        draftKey: `object-${object.id}`,
-        autoFocus,
-        disabledSend,
-        initialContent,
-        sendText,
-        sendIcon
-      }
-    ) })
-  ] });
-}
+    ] });
+  }
+);
 DiscussKitComments.propTypes = {
   displayConnectButton: PropTypes.bool,
   displayReaction: PropTypes.bool,
@@ -287,6 +289,7 @@ function Wrapper({
     throw new Error("target is required.");
   }
   const { locale = "en" } = useLocaleContext() || {};
+  const containerRef = useRef();
   const object = useMemo(
     () => ({
       link: window.location.href,
@@ -321,7 +324,8 @@ function Wrapper({
       allowCopyLink,
       showProfileCard,
       interactive,
-      children: /* @__PURE__ */ jsx(DiscussKitComments, { ...rest, object })
+      containerRef,
+      children: /* @__PURE__ */ jsx(DiscussKitComments, { ...rest, object, ref: containerRef })
     }
   ) }) }) }) }) }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit",
-  "version": "1.6.63",
+  "version": "1.6.64",
   "description": "A react component for Discuss Kit blocklet.",
   "main": "./lib/cjs/index.js",
   "module": "./lib/es/index.js",
@@ -37,8 +37,8 @@
     "@arcblock/did-connect": "^2.9.6",
     "@arcblock/ux": "^2.9.6",
     "@arcblock/ws": "^1.18.108",
-    "@blocklet/discuss-kit-ux": "1.6.63",
-    "@blocklet/editor": "1.6.63",
+    "@blocklet/discuss-kit-ux": "1.6.64",
+    "@blocklet/editor": "1.6.64",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.14.9",
@@ -76,5 +76,5 @@
     "vite-plugin-build": "^0.10.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "6654a90b799b661e5f9ffb543a67d831208ba415"
+  "gitHead": "455036419d403c12937a586732caff277ea399c9"
 }