@blocklet/discuss-kit 2.4.1 → 2.4.2

package/lib/cjs/comments.js

@@ -1,4 +1,4 @@
-"use strict";const s=require("react/jsx-runtime"),x=require("react"),Q=require("@arcblock/ux/lib/Theme"),t=require("prop-types"),X=require("@arcblock/did-connect/lib/Session"),d=require("@mui/material"),E=require("@arcblock/ux/lib/Locale/context"),Y=require("react-error-boundary"),a=require("@blocklet/discuss-kit-ux"),Z=require("ahooks"),ee=require("./components/error-fallback.js"),te=require("./locales/index.js"),ne=require("./lib/utils.js"),r=require("./api.js"),oe=require("./hooks/topic-info-sync.js"),se=()=>{const e=o=>o.endsWith("/")?o:`${o}/`;return window.blocklet?.componentMountPoints?.find(o=>e(o.mountPoint)===e(window.blocklet?.prefix))?.title},u=e=>({...e,rootId:e.rootCommentId,createdAt:e.createdAt?new Date(e.createdAt):null,updatedAt:e.updatedAt?new Date(e.updatedAt):null,deletedAt:e.deletedAt?new Date(e.deletedAt):null,pinnedAt:e.pinnedAt?new Date(e.pinnedAt):null,replies:e.replies?.map(u)}),ie={fetchComments:async e=>{const n={...e,embed:e.rootId?"rating":"replies,rating",size:e.limit},{data:{data:o,nextCursor:c,total:f}}=await r.default.get("/comments",{params:n});return{data:o?.map(u),nextCursor:c,total:f}},fetchPinnedComments:async e=>{const{data:n}=await r.default.get("/comments/pinned",{params:{objectId:e}});return(n?.data||[]).map(u)},fetchCommentPosition:async({id:e,...n})=>{const{data:o}=await r.default.get(`/comments/${e}/position`,{params:n});return o},deleteComment:async({id:e})=>{const{data:n}=await r.default.delete(`/comments/${e}`);return n},updateComment:async({id:e,updatedAt:n},o)=>{const{data:c}=await r.default.put(`/comments/${e}`,{content:o,updatedAt:n});return u(c)},reply:async({id:e},n)=>{const{data:o}=await r.default.post("/comments/replies",{content:n,parentId:e,link:window.location.href});return u(o)},rate:async(e,n,o)=>{await r.default.post(`/topics/${e.topicId}/comments/${e.id}/ratings`,{ratingType:o,value:n})},unrate:async e=>{await r.default.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`)},fetchRatings:async e=>{const{data:n}=await r.default.get(`/ratings/${e}`);return n},togglePin:async({post:e,value:n})=>{n?await r.default.put(`/posts/${e.id}/pinned`):await r.default.delete(`/posts/${e.id}/pinned`)}},re=()=>{const[e,n]=x.useState(!0);return Z.useRequest(()=>r.default.get("/status",{muteError:!0}).then(()=>n(!0)).catch(()=>n(!1)),{cacheKey:"discuss-kit-status",staleTime:-1}),{available:e}};function F({ref:e=void 0,displayReaction:n=!0,object:o,onChange:c=()=>{},onSendComment:f=()=>{},commentInputPosition:C="top",autoFocus:w=!1,disabledSend:j=void 0,initialContent:A="",sendText:q="",sendIcon:v=null,showTopbar:I=!0,sendComment:h=null,reactionAppend:P=null,skeleton:S=null,placeholder:T="",onInput:$=()=>{},draftKey:b="",inputSx:g={},editorRef:y=null,disableCmdEnter:O=!1}){a.useDefaultApiErrorHandler({request:r.default});const{available:U}=re(),{session:k}=x.useContext(X.SessionContext)||{},{state:B,sort:W,add:M,updateCommentState:N,interactive:R,findById:z,renderInnerFooter:G}=a.useCommentsContext(),{total:D,order:_,initialized:H}=B,{t:p}=E.useLocaleContext();oe.useTopicInfoSync(o);const V={ADD_COMMENT:i=>{M(u(i)),c?.()},UPDATE_COMMENT:i=>{const l=z(i.id);l&&l.content!==i.content&&N(i.id,m=>(m.content=i.content,m.updatedAt=i.updatedAt,m.synced=Date.now(),m))},RATING_COMMENT:async({commentId:i})=>{const l=await r.fetchRatings(i);N(i,m=>({...m,rating:l}))}};if(a.useSubscription(o.id,({event:i,data:l})=>{V[i]?.(l)},[o.id,B]),!U)return s.jsxs(d.Alert,{severity:"info",children:[s.jsx(d.AlertTitle,{children:p("apiUnavailable.title")}),p("apiUnavailable.desc")]});if(!H)return S||s.jsx(d.Box,{sx:{width:"100%",display:"flex",justifyContent:"center"},children:s.jsx(d.CircularProgress,{})});const J=async i=>{const{data:l}=await(h?h({content:i,object:o}):r.default.post("/comments",{content:i,object:o}));M(u(l)),f?.(l)},K=()=>s.jsx(a.CommentInput,{editorRef:y,placeholder:T,send:J,draftKey:b||`object-${o.id}`,autoFocus:w,disabledSend:j,initialContent:A,sendText:q,sendIcon:v,renderInnerFooter:G,onChange:$,disableCmdEnter:O});return s.jsxs(ae,{ref:e,children:[s.jsxs(s.Fragment,{children:[s.jsx(d.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"end"},children:n&&s.jsxs(a.IconButtonGroup,{sx:{alignItems:"flex-end"},children:[s.jsx(a.GithubReactionContainer,{id:o.id,request:r.default,interactive:R}),P]})}),k.user&&R&&C==="top"&&s.jsx(d.Box,{className:"comment-editor",sx:{mt:2},children:K()})]}),!!D&&I&&s.jsxs(d.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mt:3},children:[s.jsxs(d.Box,{sx:{fontWeight:"medium"},children:[D>0?`${D} ${p("comments")}`:p("comment")," "]}),s.jsx(a.SegmentedControl,{value:_,options:[{value:"desc",label:p("newest")},{value:"asc",label:p("oldest")}],onChange:i=>W(i)})]}),s.jsx(a.CommentList,{className:"comment-list"}),k.user&&R&&C==="bottom"&&s.jsx(d.Box,{sx:{mt:6,...g},children:K()})]})}F.propTypes={ref:t.any,displayReaction:t.bool,object:t.object.isRequired,onChange:t.func,onSendComment:t.func,disabledSend:t.bool,autoFocus:t.bool,initialContent:t.string,sendText:t.string,sendIcon:t.node,commentInputPosition:t.oneOf(["top","bottom"]),showTopbar:t.bool,sendComment:t.func,reactionAppend:t.any,skeleton:t.node,placeholder:t.string,onInput:t.func,draftKey:t.string,editorRef:t.object,inputSx:t.object,disableCmdEnter:t.bool};function L({target:e,flatView:n=!1,autoCollapse:o=!1,autoLoadComments:c=!0,order:f=void 0,allowCopyLink:C=!1,showProfileCard:w=!1,interactive:j=!0,renderComments:A=null,renderDonation:q=null,renderActions:v=null,renderEditorPlugins:I=null,enableAutoTranslate:h=!1,renderInnerFooter:P=null,...S}){const T=Object.assign({},{displayReaction:!0,onChange:()=>{},onSendComment:()=>{},disabledSend:void 0,sendComment:null,reactionAppend:null},S);if(!e?.id)throw new Error("target is required.");const{locale:$="en"}=E.useLocaleContext()||{},b=x.useRef(),g=x.useMemo(()=>({link:window.location.href,blockletName:se(),...e}),[e]),y=a.getWsClient(ne.discussKitPrefix);return x.useEffect(()=>(y.connect(),()=>{y.isConnected()}),[]),s.jsx(Y.ErrorBoundary,{FallbackComponent:ee,children:s.jsx(E.LocaleProvider,{translations:te.translations,locale:$,children:s.jsx(a.UploaderProvider,{children:s.jsx(a.InternalThemeProvider,{children:s.jsx(a.ConfirmProvider,{children:s.jsx(a.DefaultEditorConfigProvider,{request:r.default,children:s.jsx(a.CommentsProvider,{target:g,api:ie,flatView:n,order:f,autoCollapse:o,autoLoadComments:c,allowCopyLink:C,showProfileCard:w,interactive:j,containerRef:b,renderDonation:q,renderActions:v,renderEditorPlugins:I,enableAutoTranslate:h,renderComments:A,renderInnerFooter:P,children:s.jsx(F,{...T,object:g,ref:b})})})})})})})})}L.propTypes={target:t.shape({id:t.string.isRequired,title:t.string,desc:t.string,owner:t.string}).isRequired,displayReaction:t.bool,onChange:t.func,flatView:t.bool,autoCollapse:t.bool,autoLoadComments:t.bool,allowCopyLink:t.bool,disabledSend:t.bool,showProfileCard:t.bool,order:t.oneOf(["asc","desc"]),interactive:t.bool,renderComments:t.func,renderDonation:t.any,renderActions:t.func,renderEditorPlugins:t.func,enableAutoTranslate:t.bool,renderInnerFooter:t.func,sendComment:t.func,reactionAppend:t.any};const ae=Q.styled("div")`
+"use strict";const n=require("react/jsx-runtime"),f=require("react"),Q=require("@arcblock/ux/lib/Theme"),t=require("prop-types"),X=require("@arcblock/did-connect/lib/Session"),l=require("@mui/material"),D=require("@arcblock/ux/lib/Locale/context"),Y=require("react-error-boundary"),a=require("@blocklet/discuss-kit-ux"),Z=require("ahooks"),ee=require("./components/error-fallback.js"),te=require("./locales/index.js"),ne=require("./lib/utils.js"),r=require("./api.js"),oe=require("./hooks/topic-info-sync.js"),se=()=>{const e=s=>s.endsWith("/")?s:`${s}/`;return window.blocklet?.componentMountPoints?.find(s=>e(s.mountPoint)===e(window.blocklet?.prefix))?.title},u=e=>({...e,rootId:e.rootCommentId,createdAt:e.createdAt?new Date(e.createdAt):null,updatedAt:e.updatedAt?new Date(e.updatedAt):null,deletedAt:e.deletedAt?new Date(e.deletedAt):null,pinnedAt:e.pinnedAt?new Date(e.pinnedAt):null,replies:e.replies?.map(u)}),ie={fetchComments:async e=>{const o={...e,embed:e.rootId?"rating":"replies,rating",size:e.limit},{data:{data:s,nextCursor:c,total:x}}=await r.default.get("/comments",{params:o});return{data:s?.map(u),nextCursor:c,total:x}},fetchPinnedComments:async e=>{const{data:o}=await r.default.get("/comments/pinned",{params:{objectId:e}});return(o?.data||[]).map(u)},fetchCommentPosition:async({id:e,...o})=>{const{data:s}=await r.default.get(`/comments/${e}/position`,{params:o});return s},deleteComment:async({id:e})=>{const{data:o}=await r.default.delete(`/comments/${e}`);return o},updateComment:async({id:e,updatedAt:o},s)=>{const{data:c}=await r.default.put(`/comments/${e}`,{content:s,updatedAt:o});return u(c)},reply:async({id:e},o)=>{const{data:s}=await r.default.post("/comments/replies",{content:o,parentId:e,link:window.location.href});return u(s)},rate:async(e,o,s)=>{await r.default.post(`/topics/${e.topicId}/comments/${e.id}/ratings`,{ratingType:s,value:o})},unrate:async e=>{await r.default.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`)},fetchRatings:async e=>{const{data:o}=await r.default.get(`/ratings/${e}`);return o},togglePin:async({post:e,value:o})=>{o?await r.default.put(`/posts/${e.id}/pinned`):await r.default.delete(`/posts/${e.id}/pinned`)}},re=()=>{const[e,o]=f.useState(!0);return Z.useRequest(()=>r.default.get("/status",{muteError:!0}).then(()=>o(!0)).catch(()=>o(!1)),{cacheKey:"discuss-kit-status",staleTime:-1}),{available:e}};function K({ref:e=void 0,displayReaction:o=!0,object:s,onChange:c=()=>{},onSendComment:x=()=>{},commentInputPosition:h="top",autoFocus:y=!1,disabledSend:j=void 0,initialContent:A="",sendText:q="",sendIcon:v=null,showTopbar:S=!0,sendComment:C=null,reactionAppend:I=null,skeleton:P=null,placeholder:k="",onInput:T=()=>{},draftKey:b="",inputSx:g={},editorRef:w=null,disableCmdEnter:O=!1}){a.useDefaultApiErrorHandler({request:r.default});const{available:U}=re(),{session:E}=f.useContext(X.SessionContext)||{},{state:B,sort:W,add:M,updateCommentState:N,interactive:$,findById:z,renderInnerFooter:G}=a.useCommentsContext(),{total:R,order:_,initialized:H}=B,{t:p}=D.useLocaleContext();oe.useTopicInfoSync(s);const V={ADD_COMMENT:i=>{M(u(i)),c?.()},UPDATE_COMMENT:i=>{const d=z(i.id);d&&d.content!==i.content&&N(i.id,m=>(m.content=i.content,m.updatedAt=i.updatedAt,m.synced=Date.now(),m))},RATING_COMMENT:async({commentId:i})=>{const d=await r.fetchRatings(i);N(i,m=>({...m,rating:d}))}};if(a.useSubscription(s.id,({event:i,data:d})=>{V[i]?.(d)},[s.id,B]),!U)return n.jsxs(l.Alert,{severity:"info",children:[n.jsx(l.AlertTitle,{children:p("apiUnavailable.title")}),p("apiUnavailable.desc")]});if(!H)return P||n.jsx(l.Box,{sx:{width:"100%",display:"flex",justifyContent:"center"},children:n.jsx(l.CircularProgress,{})});const J=async i=>{const{data:d}=await(C?C({content:i,object:s}):r.default.post("/comments",{content:i,object:s}));M(u(d)),x?.(d)},F=()=>n.jsx(f.Suspense,{fallback:n.jsxs(n.Fragment,{children:[n.jsx(l.Skeleton,{}),n.jsx(l.Skeleton,{width:"80%"}),n.jsx(l.Skeleton,{width:"60%"}),n.jsx(l.Skeleton,{width:"40%"})]}),children:n.jsx(a.CommentInput,{editorRef:w,placeholder:k,send:J,draftKey:b||`object-${s.id}`,autoFocus:y,disabledSend:j,initialContent:A,sendText:q,sendIcon:v,renderInnerFooter:G,onChange:T,disableCmdEnter:O})});return n.jsxs(ae,{ref:e,children:[n.jsxs(n.Fragment,{children:[n.jsx(l.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"end"},children:o&&n.jsxs(a.IconButtonGroup,{sx:{alignItems:"flex-end"},children:[n.jsx(a.GithubReactionContainer,{id:s.id,request:r.default,interactive:$}),I]})}),E.user&&$&&h==="top"&&n.jsx(l.Box,{className:"comment-editor",sx:{mt:2},children:F()})]}),!!R&&S&&n.jsxs(l.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mt:3},children:[n.jsxs(l.Box,{sx:{fontWeight:"medium"},children:[R>0?`${R} ${p("comments")}`:p("comment")," "]}),n.jsx(a.SegmentedControl,{value:_,options:[{value:"desc",label:p("newest")},{value:"asc",label:p("oldest")}],onChange:i=>W(i)})]}),n.jsx(a.CommentList,{className:"comment-list"}),E.user&&$&&h==="bottom"&&n.jsx(l.Box,{sx:{mt:6,...g},children:F()})]})}K.propTypes={ref:t.any,displayReaction:t.bool,object:t.object.isRequired,onChange:t.func,onSendComment:t.func,disabledSend:t.bool,autoFocus:t.bool,initialContent:t.string,sendText:t.string,sendIcon:t.node,commentInputPosition:t.oneOf(["top","bottom"]),showTopbar:t.bool,sendComment:t.func,reactionAppend:t.any,skeleton:t.node,placeholder:t.string,onInput:t.func,draftKey:t.string,editorRef:t.object,inputSx:t.object,disableCmdEnter:t.bool};function L({target:e,flatView:o=!1,autoCollapse:s=!1,autoLoadComments:c=!0,order:x=void 0,allowCopyLink:h=!1,showProfileCard:y=!1,interactive:j=!0,renderComments:A=null,renderDonation:q=null,renderActions:v=null,renderEditorPlugins:S=null,enableAutoTranslate:C=!1,renderInnerFooter:I=null,...P}){const k=Object.assign({},{displayReaction:!0,onChange:()=>{},onSendComment:()=>{},disabledSend:void 0,sendComment:null,reactionAppend:null},P);if(!e?.id)throw new Error("target is required.");const{locale:T="en"}=D.useLocaleContext()||{},b=f.useRef(),g=f.useMemo(()=>({link:window.location.href,blockletName:se(),...e}),[e]),w=a.getWsClient(ne.discussKitPrefix);return f.useEffect(()=>(w.connect(),()=>{w.isConnected()}),[]),n.jsx(Y.ErrorBoundary,{FallbackComponent:ee,children:n.jsx(D.LocaleProvider,{translations:te.translations,locale:T,children:n.jsx(a.UploaderProvider,{children:n.jsx(a.InternalThemeProvider,{children:n.jsx(a.ConfirmProvider,{children:n.jsx(a.DefaultEditorConfigProvider,{request:r.default,children:n.jsx(a.CommentsProvider,{target:g,api:ie,flatView:o,order:x,autoCollapse:s,autoLoadComments:c,allowCopyLink:h,showProfileCard:y,interactive:j,containerRef:b,renderDonation:q,renderActions:v,renderEditorPlugins:S,enableAutoTranslate:C,renderComments:A,renderInnerFooter:I,children:n.jsx(K,{...k,object:g,ref:b})})})})})})})})}L.propTypes={target:t.shape({id:t.string.isRequired,title:t.string,desc:t.string,owner:t.string}).isRequired,displayReaction:t.bool,onChange:t.func,flatView:t.bool,autoCollapse:t.bool,autoLoadComments:t.bool,allowCopyLink:t.bool,disabledSend:t.bool,showProfileCard:t.bool,order:t.oneOf(["asc","desc"]),interactive:t.bool,renderComments:t.func,renderDonation:t.any,renderActions:t.func,renderEditorPlugins:t.func,enableAutoTranslate:t.bool,renderInnerFooter:t.func,sendComment:t.func,reactionAppend:t.any};const ae=Q.styled("div")`
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;

package/lib/es/comments.js

@@ -1,32 +1,32 @@
-import { jsx as r, jsxs as m, Fragment as V } from "react/jsx-runtime";
-import { useRef as J, useMemo as Q, useEffect as X, useContext as Y, useState as Z } from "react";
-import { styled as ee } from "@arcblock/ux/lib/Theme";
+import { jsx as i, jsxs as d, Fragment as K } from "react/jsx-runtime";
+import { useRef as Q, useMemo as X, useEffect as Y, useContext as Z, useState as ee, Suspense as te } from "react";
+import { styled as ne } from "@arcblock/ux/lib/Theme";
 import t from "prop-types";
-import { SessionContext as te } from "@arcblock/did-connect/lib/Session";
-import { Alert as ne, AlertTitle as oe, Box as p, CircularProgress as re } from "@mui/material";
-import { useLocaleContext as F, LocaleProvider as ie } from "@arcblock/ux/lib/Locale/context";
-import { ErrorBoundary as se } from "react-error-boundary";
-import { getWsClient as ae, UploaderProvider as le, InternalThemeProvider as de, ConfirmProvider as ce, DefaultEditorConfigProvider as ue, CommentsProvider as me, useDefaultApiErrorHandler as pe, useCommentsContext as fe, useSubscription as Ce, IconButtonGroup as he, GithubReactionContainer as be, SegmentedControl as ge, CommentList as ye, CommentInput as we } from "@blocklet/discuss-kit-ux";
-import { useRequest as xe } from "ahooks";
-import Ae from "./components/error-fallback.js";
-import { translations as ve } from "./locales/index.js";
-import { discussKitPrefix as Ie } from "./lib/utils.js";
-import s, { fetchRatings as Pe } from "./api.js";
-import { useTopicInfoSync as Te } from "./hooks/topic-info-sync.js";
-const $e = () => {
+import { SessionContext as oe } from "@arcblock/did-connect/lib/Session";
+import { Alert as ie, AlertTitle as re, Box as p, CircularProgress as se, Skeleton as y } from "@mui/material";
+import { useLocaleContext as O, LocaleProvider as ae } from "@arcblock/ux/lib/Locale/context";
+import { ErrorBoundary as le } from "react-error-boundary";
+import { getWsClient as de, UploaderProvider as ce, InternalThemeProvider as ue, ConfirmProvider as me, DefaultEditorConfigProvider as pe, CommentsProvider as fe, useDefaultApiErrorHandler as he, useCommentsContext as Ce, useSubscription as be, IconButtonGroup as ge, GithubReactionContainer as we, SegmentedControl as ye, CommentList as xe, CommentInput as Ae } from "@blocklet/discuss-kit-ux";
+import { useRequest as ve } from "ahooks";
+import Ie from "./components/error-fallback.js";
+import { translations as Pe } from "./locales/index.js";
+import { discussKitPrefix as Se } from "./lib/utils.js";
+import s, { fetchRatings as Te } from "./api.js";
+import { useTopicInfoSync as $e } from "./hooks/topic-info-sync.js";
+const Re = () => {
   const e = (o) => o.endsWith("/") ? o : `${o}/`;
   return window.blocklet?.componentMountPoints?.find(
     (o) => e(o.mountPoint) === e(window.blocklet?.prefix)
   )?.title;
-}, d = (e) => ({
+}, c = (e) => ({
   ...e,
   rootId: e.rootCommentId,
   createdAt: e.createdAt ? new Date(e.createdAt) : null,
   updatedAt: e.updatedAt ? new Date(e.updatedAt) : null,
   deletedAt: e.deletedAt ? new Date(e.deletedAt) : null,
   pinnedAt: e.pinnedAt ? new Date(e.pinnedAt) : null,
-  replies: e.replies?.map(d)
-}), Se = {
+  replies: e.replies?.map(c)
+}), ke = {
   fetchComments: async (e) => {
     const n = {
       ...e,
@@ -35,11 +35,11 @@ const $e = () => {
     }, {
       data: { data: o, nextCursor: l, total: f }
     } = await s.get("/comments", { params: n });
-    return { data: o?.map(d), nextCursor: l, total: f };
+    return { data: o?.map(c), nextCursor: l, total: f };
   },
   fetchPinnedComments: async (e) => {
     const { data: n } = await s.get("/comments/pinned", { params: { objectId: e } });
-    return (n?.data || []).map(d);
+    return (n?.data || []).map(c);
   },
   fetchCommentPosition: async ({ id: e, ...n }) => {
     const { data: o } = await s.get(`/comments/${e}/position`, { params: n });
@@ -51,7 +51,7 @@ const $e = () => {
   },
   updateComment: async ({ id: e, updatedAt: n }, o) => {
     const { data: l } = await s.put(`/comments/${e}`, { content: o, updatedAt: n });
-    return d(l);
+    return c(l);
   },
   reply: async ({ id: e }, n) => {
     const { data: o } = await s.post("/comments/replies", {
@@ -59,7 +59,7 @@ const $e = () => {
       parentId: e,
       link: window.location.href
     });
-    return d(o);
+    return c(o);
   },
   rate: async (e, n, o) => {
     await s.post(`/topics/${e.topicId}/comments/${e.id}/ratings`, { ratingType: o, value: n });
@@ -74,14 +74,14 @@ const $e = () => {
   togglePin: async ({ post: e, value: n }) => {
     n ? await s.put(`/posts/${e.id}/pinned`) : await s.delete(`/posts/${e.id}/pinned`);
   }
-}, Re = () => {
-  const [e, n] = Z(!0);
-  return xe(
+}, De = () => {
+  const [e, n] = ee(!0);
+  return ve(
     () => s.get("/status", { muteError: !0 }).then(() => n(!0)).catch(() => n(!1)),
     { cacheKey: "discuss-kit-status", staleTime: -1 }
   ), { available: e };
 };
-function K({
+function B({
   ref: e = void 0,
   displayReaction: n = !0,
   object: o,
@@ -89,58 +89,58 @@ function K({
   },
   onSendComment: f = () => {
   },
-  commentInputPosition: C = "top",
-  autoFocus: w = !1,
-  disabledSend: x = void 0,
-  initialContent: A = "",
-  sendText: v = "",
-  sendIcon: I = null,
-  showTopbar: P = !0,
-  sendComment: h = null,
+  commentInputPosition: h = "top",
+  autoFocus: x = !1,
+  disabledSend: A = void 0,
+  initialContent: v = "",
+  sendText: I = "",
+  sendIcon: P = null,
+  showTopbar: S = !0,
+  sendComment: C = null,
   reactionAppend: T = null,
   skeleton: $ = null,
-  placeholder: S = "",
-  onInput: R = () => {
+  placeholder: R = "",
+  onInput: k = () => {
   },
   draftKey: b = "",
   inputSx: g = {},
-  editorRef: y = null,
-  disableCmdEnter: O = !1
+  editorRef: w = null,
+  disableCmdEnter: L = !1
 }) {
-  pe({
+  he({
     request: s
   });
-  const { available: B } = Re(), { session: k } = Y(te) || {}, { state: q, sort: L, add: M, updateCommentState: N, interactive: D, findById: U, renderInnerFooter: W } = fe(), { total: E, order: z, initialized: G } = q, { t: c } = F();
-  Te(o);
-  const _ = {
-    ADD_COMMENT: (i) => {
-      M(d(i)), l?.();
+  const { available: U } = De(), { session: q } = Z(oe) || {}, { state: M, sort: W, add: N, updateCommentState: j, interactive: D, findById: z, renderInnerFooter: G } = Ce(), { total: E, order: _, initialized: H } = M, { t: u } = O();
+  $e(o);
+  const V = {
+    ADD_COMMENT: (r) => {
+      N(c(r)), l?.();
     },
-    UPDATE_COMMENT: (i) => {
-      const a = U(i.id);
-      a && a.content !== i.content && N(i.id, (u) => (u.content = i.content, u.updatedAt = i.updatedAt, u.synced = Date.now(), u));
+    UPDATE_COMMENT: (r) => {
+      const a = z(r.id);
+      a && a.content !== r.content && j(r.id, (m) => (m.content = r.content, m.updatedAt = r.updatedAt, m.synced = Date.now(), m));
     },
-    RATING_COMMENT: async ({ commentId: i }) => {
-      const a = await Pe(i);
-      N(i, (u) => ({
-        ...u,
+    RATING_COMMENT: async ({ commentId: r }) => {
+      const a = await Te(r);
+      j(r, (m) => ({
+        ...m,
         rating: a
       }));
     }
   };
-  if (Ce(
+  if (be(
     o.id,
-    ({ event: i, data: a }) => {
-      _[i]?.(a);
+    ({ event: r, data: a }) => {
+      V[r]?.(a);
     },
-    [o.id, q]
-  ), !B)
-    return /* @__PURE__ */ m(ne, { severity: "info", children: [
-      /* @__PURE__ */ r(oe, { children: c("apiUnavailable.title") }),
-      c("apiUnavailable.desc")
+    [o.id, M]
+  ), !U)
+    return /* @__PURE__ */ d(ie, { severity: "info", children: [
+      /* @__PURE__ */ i(re, { children: u("apiUnavailable.title") }),
+      u("apiUnavailable.desc")
     ] });
-  if (!G)
-    return $ || /* @__PURE__ */ r(
+  if (!H)
+    return $ || /* @__PURE__ */ i(
       p,
       {
         sx: {
@@ -148,32 +148,43 @@ function K({
           display: "flex",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ r(re, {})
+        children: /* @__PURE__ */ i(se, {})
       }
     );
-  const H = async (i) => {
-    const { data: a } = await (h ? h({ content: i, object: o }) : s.post("/comments", { content: i, object: o }));
-    M(d(a)), f?.(a);
-  }, j = () => /* @__PURE__ */ r(
-    we,
+  const J = async (r) => {
+    const { data: a } = await (C ? C({ content: r, object: o }) : s.post("/comments", { content: r, object: o }));
+    N(c(a)), f?.(a);
+  }, F = () => /* @__PURE__ */ i(
+    te,
     {
-      editorRef: y,
-      placeholder: S,
-      send: H,
-      draftKey: b || `object-${o.id}`,
-      autoFocus: w,
-      disabledSend: x,
-      initialContent: A,
-      sendText: v,
-      sendIcon: I,
-      renderInnerFooter: W,
-      onChange: R,
-      disableCmdEnter: O
+      fallback: /* @__PURE__ */ d(K, { children: [
+        /* @__PURE__ */ i(y, {}),
+        /* @__PURE__ */ i(y, { width: "80%" }),
+        /* @__PURE__ */ i(y, { width: "60%" }),
+        /* @__PURE__ */ i(y, { width: "40%" })
+      ] }),
+      children: /* @__PURE__ */ i(
+        Ae,
+        {
+          editorRef: w,
+          placeholder: R,
+          send: J,
+          draftKey: b || `object-${o.id}`,
+          autoFocus: x,
+          disabledSend: A,
+          initialContent: v,
+          sendText: I,
+          sendIcon: P,
+          renderInnerFooter: G,
+          onChange: k,
+          disableCmdEnter: L
+        }
+      )
     }
   );
-  return /* @__PURE__ */ m(Ee, { ref: e, children: [
-    /* @__PURE__ */ m(V, { children: [
-      /* @__PURE__ */ r(
+  return /* @__PURE__ */ d(qe, { ref: e, children: [
+    /* @__PURE__ */ d(K, { children: [
+      /* @__PURE__ */ i(
         p,
         {
           sx: {
@@ -181,24 +192,24 @@ function K({
             justifyContent: "space-between",
             alignItems: "end"
           },
-          children: n && /* @__PURE__ */ m(he, { sx: { alignItems: "flex-end" }, children: [
-            /* @__PURE__ */ r(be, { id: o.id, request: s, interactive: D }),
+          children: n && /* @__PURE__ */ d(ge, { sx: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ i(we, { id: o.id, request: s, interactive: D }),
             T
           ] })
         }
       ),
-      k.user && D && C === "top" && /* @__PURE__ */ r(
+      q.user && D && h === "top" && /* @__PURE__ */ i(
         p,
         {
           className: "comment-editor",
           sx: {
             mt: 2
           },
-          children: j()
+          children: F()
         }
       )
     ] }),
-    !!E && P && /* @__PURE__ */ m(
+    !!E && S && /* @__PURE__ */ d(
       p,
       {
         sx: {
@@ -208,29 +219,29 @@ function K({
           mt: 3
         },
         children: [
-          /* @__PURE__ */ m(p, { sx: { fontWeight: "medium" }, children: [
-            E > 0 ? `${E} ${c("comments")}` : c("comment"),
+          /* @__PURE__ */ d(p, { sx: { fontWeight: "medium" }, children: [
+            E > 0 ? `${E} ${u("comments")}` : u("comment"),
             " "
           ] }),
-          /* @__PURE__ */ r(
-            ge,
+          /* @__PURE__ */ i(
+            ye,
             {
-              value: z,
+              value: _,
               options: [
-                { value: "desc", label: c("newest") },
-                { value: "asc", label: c("oldest") }
+                { value: "desc", label: u("newest") },
+                { value: "asc", label: u("oldest") }
               ],
-              onChange: (i) => L(i)
+              onChange: (r) => W(r)
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ r(ye, { className: "comment-list" }),
-    k.user && D && C === "bottom" && /* @__PURE__ */ r(p, { sx: { mt: 6, ...g }, children: j() })
+    /* @__PURE__ */ i(xe, { className: "comment-list" }),
+    q.user && D && h === "bottom" && /* @__PURE__ */ i(p, { sx: { mt: 6, ...g }, children: F() })
   ] });
 }
-K.propTypes = {
+B.propTypes = {
   ref: t.any,
   displayReaction: t.bool,
   object: t.object.isRequired,
@@ -253,24 +264,24 @@ K.propTypes = {
   inputSx: t.object,
   disableCmdEnter: t.bool
 };
-function De({
+function Ee({
   target: e,
   flatView: n = !1,
   autoCollapse: o = !1,
   autoLoadComments: l = !0,
   order: f = void 0,
-  allowCopyLink: C = !1,
-  showProfileCard: w = !1,
-  interactive: x = !0,
-  renderComments: A = null,
-  renderDonation: v = null,
-  renderActions: I = null,
-  renderEditorPlugins: P = null,
-  enableAutoTranslate: h = !1,
+  allowCopyLink: h = !1,
+  showProfileCard: x = !1,
+  interactive: A = !0,
+  renderComments: v = null,
+  renderDonation: I = null,
+  renderActions: P = null,
+  renderEditorPlugins: S = null,
+  enableAutoTranslate: C = !1,
   renderInnerFooter: T = null,
   ...$
 }) {
-  const S = Object.assign(
+  const R = Object.assign(
     {},
     {
       displayReaction: !0,
@@ -286,41 +297,41 @@ function De({
   );
   if (!e?.id)
     throw new Error("target is required.");
-  const { locale: R = "en" } = F() || {}, b = J(), g = Q(
+  const { locale: k = "en" } = O() || {}, b = Q(), g = X(
     () => ({
       link: window.location.href,
-      blockletName: $e(),
+      blockletName: Re(),
       ...e
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [e]
-  ), y = ae(Ie);
-  return X(() => (y.connect(), () => {
-    y.isConnected();
-  }), []), /* @__PURE__ */ r(se, { FallbackComponent: Ae, children: /* @__PURE__ */ r(ie, { translations: ve, locale: R, children: /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(ue, { request: s, children: /* @__PURE__ */ r(
-    me,
+  ), w = de(Se);
+  return Y(() => (w.connect(), () => {
+    w.isConnected();
+  }), []), /* @__PURE__ */ i(le, { FallbackComponent: Ie, children: /* @__PURE__ */ i(ae, { translations: Pe, locale: k, children: /* @__PURE__ */ i(ce, { children: /* @__PURE__ */ i(ue, { children: /* @__PURE__ */ i(me, { children: /* @__PURE__ */ i(pe, { request: s, children: /* @__PURE__ */ i(
+    fe,
     {
       target: g,
-      api: Se,
+      api: ke,
       flatView: n,
       order: f,
       autoCollapse: o,
       autoLoadComments: l,
-      allowCopyLink: C,
-      showProfileCard: w,
-      interactive: x,
+      allowCopyLink: h,
+      showProfileCard: x,
+      interactive: A,
       containerRef: b,
-      renderDonation: v,
-      renderActions: I,
-      renderEditorPlugins: P,
-      enableAutoTranslate: h,
-      renderComments: A,
+      renderDonation: I,
+      renderActions: P,
+      renderEditorPlugins: S,
+      enableAutoTranslate: C,
+      renderComments: v,
       renderInnerFooter: T,
-      children: /* @__PURE__ */ r(K, { ...S, object: g, ref: b })
+      children: /* @__PURE__ */ i(B, { ...R, object: g, ref: b })
     }
   ) }) }) }) }) }) });
 }
-De.propTypes = {
+Ee.propTypes = {
   target: t.shape({
     id: t.string.isRequired,
     title: t.string,
@@ -346,7 +357,7 @@ De.propTypes = {
   sendComment: t.func,
   reactionAppend: t.any
 };
-const Ee = ee("div")`
+const qe = ne("div")`
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
@@ -355,5 +366,5 @@ const Ee = ee("div")`
   border-radius: 6px;
 `;
 export {
-  De as default
+  Ee as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "A react component for Discuss Kit blocklet.",
   "main": "./lib/cjs/index.js",
   "module": "./lib/es/index.js",
@@ -49,8 +49,8 @@
     "rehype-sanitize": "^5.0.1",
     "timeago.js": "^4.0.2",
     "url-join": "^4.0.1",
-    "@blocklet/discuss-kit-ux": "^2.4.1",
-    "@blocklet/editor": "^2.4.1"
+    "@blocklet/editor": "^2.4.2",
+    "@blocklet/discuss-kit-ux": "^2.4.2"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^3.0.1",