@blocklet/discuss-kit-ux 2.1.66 → 2.1.68

package/dist/components/chat/unread-notification.d.ts

@@ -4,7 +4,7 @@ interface UnreadNotificationProviderProps {
     children: ReactNode;
 }
 interface UnreadNotificationContextType {
-    unread: boolean;
+    unread: boolean | undefined;
     markAsUnread: (value?: boolean) => void;
 }
 export declare const UnreadNotificationContext: import('react').Context<UnreadNotificationContextType>;

package/dist/components/input/comment-input.d.ts

@@ -1,8 +1,9 @@
-import { InputProps } from './input';
+import { InputProps, RenderProps } from './input';
 interface Props extends Omit<InputProps, 'render'> {
     sendText?: string;
     sendIcon?: React.ReactNode;
     disabledSend?: boolean;
+    renderInnerFooter?: (args: RenderProps) => React.ReactElement;
 }
-export default function CommentInput({ disabledSend, send, onSuccess, placeholder, sendText, sendIcon, draftKey, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function CommentInput({ disabledSend, send, onSuccess, placeholder, sendText, sendIcon, draftKey, renderInnerFooter, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input/input.d.ts

@@ -2,7 +2,7 @@ import { BoxProps } from '@mui/material';
 import { EditorState } from 'lexical';
 export declare const preloadInput: () => Promise<typeof import('@blocklet/editor').default>;
 export type Send = (content: string) => Promise<any>;
-interface RenderProps {
+export interface RenderProps {
     content: EditorState | null;
     submit: () => void;
     loading: boolean;
@@ -12,7 +12,6 @@ interface RenderProps {
 export interface InputProps extends Omit<BoxProps, 'onChange'> {
     initialContent?: string;
     send?: Send;
-    render?: (args: RenderProps) => React.ReactElement;
     placeholder?: string;
     onSuccess?: (result: any) => void;
     onChange?: (editorState: EditorState | null) => void;
@@ -20,7 +19,9 @@ export interface InputProps extends Omit<BoxProps, 'onChange'> {
     draftKey?: string;
     shortcut?: 'CMD_ENTER' | 'ENTER';
     children?: React.ReactNode;
+    renderInnerFooter?: (args: RenderProps) => React.ReactElement;
+    renderEditorFooter?: (args: RenderProps) => React.ReactElement;
 }
 export type Ref = HTMLDivElement;
-declare const Input: ({ initialContent, send, render, placeholder, onSuccess, onChange, autoFocus, draftKey, shortcut, children, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ initialContent, send, placeholder, onSuccess, onChange, autoFocus, draftKey, shortcut, children, renderInnerFooter, renderEditorFooter, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/dist/components/posts/comment-list/context.d.ts

@@ -22,6 +22,7 @@ interface CommentsProviderProps {
     renderDonation?: (post: Post) => React.ReactNode;
     renderActions?: (post: Post) => React.ReactNode;
     renderEditorPlugins?: (post: Post) => React.ReactNode;
+    renderInnerFooter?: (post: Post) => React.ReactElement;
 }
 interface State {
     comments: Post[];
@@ -62,8 +63,9 @@ interface CommentsContextValue {
     renderDonation?: (post: Post) => React.ReactNode;
     renderActions?: (post: Post) => React.ReactNode;
     renderEditorPlugins?: (post: Post) => React.ReactNode;
+    renderInnerFooter?: (post: Post) => React.ReactElement;
 }
 export declare const CommentsContext: React.Context<CommentsContextValue>;
 export declare const useCommentsContext: () => CommentsContextValue;
-export declare function CommentsProvider({ target, api, flatView, children, order, autoLoadComments, autoCollapse, allowCopyLink, showProfileCard, interactive, containerRef, renderComments, renderDonation, renderActions, renderEditorPlugins, }: CommentsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommentsProvider({ target, api, flatView, children, order, autoLoadComments, autoCollapse, allowCopyLink, showProfileCard, interactive, containerRef, renderComments, renderDonation, renderActions, renderEditorPlugins, renderInnerFooter, }: CommentsProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{editor-BgcgdiRw.mjs → editor-BnOuyZ7N.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DYbkj4x-.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-D3UlBThf.mjs";
 const BlockletEditor = lazy(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-DYbkj4x-.mjs → index-D3UlBThf.mjs}

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var _a, _b, _c, _d;
 import { Labels2, LabelPicker } from "@blocklet/labels";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useTheme, ThemeProvider, styled } from "@mui/material/styles";
-import { create as create$1, styled as styled$1 } from "@arcblock/ux/lib/Theme";
+import { useTheme, ThemeProvider, styled as styled$1 } from "@mui/material/styles";
+import { create as create$1, styled } from "@arcblock/ux/lib/Theme";
 import { useEffect, useRef, useState, createElement, useContext, useMemo, useCallback, isValidElement, lazy, Suspense, createContext, Fragment as Fragment$1, forwardRef, useImperativeHandle } from "react";
 import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$2, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import isNil from "lodash/isNil";
@@ -18,11 +18,11 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
 import { useSize, useInViewport, useSetState, useLocalStorageState, useRequest, useGetState, useReactive } from "ahooks";
-import Box$1 from "@mui/material/Box";
-import LoadingButton from "@mui/lab/LoadingButton";
-import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
 import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
+import LoadingButton from "@mui/lab/LoadingButton";
 import Alert from "@mui/material/Alert";
+import Box$1 from "@mui/material/Box";
 import isBoolean from "lodash/isBoolean";
 import Button from "@mui/material/Button";
 import DidAvatar from "@arcblock/did-connect/lib/Avatar";
@@ -558,7 +558,6 @@ const preloadInput = () => BlockletEditor$2.preload();
 const Input = ({
   initialContent = "",
   send,
-  render,
   placeholder,
   onSuccess,
   onChange,
@@ -566,6 +565,8 @@ const Input = ({
   draftKey = "",
   shortcut,
   children,
+  renderInnerFooter,
+  renderEditorFooter,
   ...rest
 }) => {
   var _a2;
@@ -671,23 +672,13 @@ const Input = ({
         /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
         /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
         /* @__PURE__ */ jsx(AutoClearPlugin$1, { value: content, isChanged: isChanged.current }),
-        children
+        children,
+        renderInnerFooter == null ? void 0 : renderInnerFooter({ submit, content, loading, error, inSmallView })
       ]
     }
-  ) }), render == null ? void 0 : render({ submit, content, loading, error, inSmallView }));
+  ) }), renderEditorFooter == null ? void 0 : renderEditorFooter({ submit, content, loading, error, inSmallView }));
 };
 const mdiLanguageMarkdown = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35l1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35l-1.92-2.35H4.89v6.38zM19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28z" }) });
-const StyledInput = styled(Input)`
-  .be-shell {
-    padding-bottom: 44px;
-  }
-  > .MuiAlert-root {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin-top: 4px;
-  }
-`;
 function CommentInput({
   disabledSend,
   send,
@@ -696,11 +687,60 @@ function CommentInput({
   sendText,
   sendIcon,
   draftKey = "",
+  renderInnerFooter,
   ...rest
 }) {
   const { t } = useContext(LocaleContext);
+  const renderFooter = ({ submit, content, loading, inSmallView }) => {
+    return /* @__PURE__ */ jsxs(Box$1, { p: 1, display: "flex", justifyContent: inSmallView ? "end" : "space-between", alignItems: "end", children: [
+      /* @__PURE__ */ jsx(
+        Box$1,
+        {
+          component: "a",
+          href: "https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax",
+          target: "_blank",
+          sx: {
+            display: inSmallView ? "none" : "flex",
+            alignItems: "center",
+            m: 0,
+            fontSize: 12,
+            color: "text.disabled",
+            textDecoration: "none",
+            "&:hover": { color: "text.secondary" }
+          },
+          children: /* @__PURE__ */ jsx(
+            Box$1,
+            {
+              component: "span",
+              sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 },
+              title: "Styling with Markdown is supported",
+              children: /* @__PURE__ */ jsx(mdiLanguageMarkdown, { style: { fontSize: 16 } })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Box$1, { display: "flex", gap: 1, alignItems: "center", children: /* @__PURE__ */ jsx(
+        LoadingButton,
+        {
+          disabled: isBoolean(disabledSend) ? disabledSend : !content,
+          loading,
+          loadingPosition: "start",
+          startIcon: sendIcon || /* @__PURE__ */ jsx(Send, { sx: { transform: "rotate(-45deg) translateX(3px)" } }),
+          variant: "contained",
+          color: "primary",
+          title: "⌘ Enter",
+          onClick: submit,
+          className: "editor-submit-button",
+          children: /* @__PURE__ */ jsxs(Box$1, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
+            /* @__PURE__ */ jsx("span", { children: sendText || t("sendComment") }),
+            /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(⌘ Enter)" })
+          ] })
+        }
+      ) })
+    ] });
+  };
   return /* @__PURE__ */ jsx(
-    StyledInput,
+    Input,
     {
       className: "editor-input-container",
       placeholder: placeholder || t("commentInputPlaceholder"),
@@ -708,70 +748,8 @@ function CommentInput({
       onSuccess,
       draftKey,
       ...rest,
-      render: ({ submit, content, loading, error, inSmallView }) => {
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            Box$1,
-            {
-              position: "absolute",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              p: 1,
-              display: "flex",
-              justifyContent: inSmallView ? "end" : "space-between",
-              alignItems: "end",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Box$1,
-                  {
-                    component: "a",
-                    href: "https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax",
-                    target: "_blank",
-                    sx: {
-                      display: inSmallView ? "none" : "flex",
-                      alignItems: "center",
-                      m: 0,
-                      fontSize: 12,
-                      color: "text.disabled",
-                      textDecoration: "none",
-                      "&:hover": { color: "text.secondary" }
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      Box$1,
-                      {
-                        component: "span",
-                        sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 },
-                        title: "Styling with Markdown is supported",
-                        children: /* @__PURE__ */ jsx(mdiLanguageMarkdown, { style: { fontSize: 16 } })
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box$1, { display: "flex", gap: 1, alignItems: "center", children: /* @__PURE__ */ jsx(
-                  LoadingButton,
-                  {
-                    disabled: isBoolean(disabledSend) ? disabledSend : !content,
-                    loading,
-                    loadingPosition: "start",
-                    startIcon: sendIcon || /* @__PURE__ */ jsx(Send, { sx: { transform: "rotate(-45deg) translateX(3px)" } }),
-                    variant: "contained",
-                    color: "primary",
-                    title: "⌘ Enter",
-                    onClick: submit,
-                    className: "editor-submit-button",
-                    children: /* @__PURE__ */ jsxs(Box$1, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
-                      /* @__PURE__ */ jsx("span", { children: sendText || t("sendComment") }),
-                      /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(⌘ Enter)" })
-                    ] })
-                  }
-                ) })
-              ]
-            }
-          ),
-          error && /* @__PURE__ */ jsx(Alert, { severity: "error", children: error })
-        ] });
-      }
+      renderInnerFooter: renderInnerFooter ?? renderFooter,
+      renderEditorFooter: ({ error }) => error && /* @__PURE__ */ jsx(Alert, { severity: "error", children: error })
     }
   );
 }
@@ -784,7 +762,7 @@ function PostEdit({ content, send, onCancel, onSuccess, ...rest }) {
       send,
       onSuccess,
       ...rest,
-      render: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxs(Box$1, { display: "flex", justifyContent: "end", alignItems: "end", gap: 1, mt: 1, children: [
+      renderEditorFooter: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxs(Box$1, { display: "flex", justifyContent: "end", alignItems: "end", gap: 1, mt: 1, children: [
         /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: onCancel, children: t("cancel") }),
         /* @__PURE__ */ jsx(
           LoadingButton,
@@ -804,7 +782,7 @@ function PostEdit({ content, send, onCancel, onSuccess, ...rest }) {
     }
   );
 }
-const Root$4 = styled$1(Box$1)`
+const Root$4 = styled(Box$1)`
   height: 100%;
   .be-editable {
     overflow-y: auto;
@@ -824,7 +802,7 @@ function Avatar({ src, ...rest }) {
   }
   return /* @__PURE__ */ jsx(DidAvatar, { src: src ? getResizedAvatar(src) : src, ...rest });
 }
-const Root$3 = styled$1(AvatarGroup)`
+const Root$3 = styled(AvatarGroup)`
   display: flex;
   align-items: center;
   position: relative;
@@ -1268,7 +1246,7 @@ const useChatInWallet = () => {
     chatInWallet
   };
 };
-const HtmlTooltip$1 = styled(({ className, ...props }) => /* @__PURE__ */ jsx(
+const HtmlTooltip$1 = styled$1(({ className, ...props }) => /* @__PURE__ */ jsx(
   Tooltip,
   {
     PopperProps: {
@@ -1505,7 +1483,7 @@ function SystemUser({
   ] });
 }
 const MAX_HEIGHT = 200;
-const Root$2 = styled$1("div")`
+const Root$2 = styled("div")`
   &.markdown-viewer-collapsed .markdown-viewer-md-wrapper {
     position: relative;
     max-height: ${MAX_HEIGHT}px;
@@ -1549,7 +1527,7 @@ function ViewMore({ children, ...rest }) {
   ] });
 }
 const BlockletEditor$1 = lazy(() => import("@blocklet/editor"));
-const StyledBlockletEditor = styled(BlockletEditor$1)`
+const StyledBlockletEditor = styled$1(BlockletEditor$1)`
   .editor-scroller {
     min-height: initial;
   }
@@ -1612,7 +1590,7 @@ function PostContent({
     }
   ) }) });
 }
-const StyledMuiMenu = styled$1(MuiMenu)`
+const StyledMuiMenu = styled(MuiMenu)`
   .MuiMenuItem-root {
     min-height: 32px;
     min-width: 120px;
@@ -1674,7 +1652,7 @@ function Menu({ items = [], ...rest }) {
   ] });
 }
 Menu.Item = MuiMenuItem;
-const Root$1 = styled(Box$1)`
+const Root$1 = styled$1(Box$1)`
   .post-highlighted {
     animation: highlighted-post-fade 3s;
     animation-timing-function: ease-out;
@@ -1976,7 +1954,7 @@ function BinaryThumb({ data = [], variant = "default", size = "sm", ...rest }) {
     }
   );
 }
-const Root = styled$1(Box$1)`
+const Root = styled(Box$1)`
   display: flex;
   .reaction-item {
     display: flex;
@@ -1993,7 +1971,7 @@ function IconButton({ icon, text, onClick, selected, variant, size, onTextClick,
     !!text && /* @__PURE__ */ jsx("span", { className: "reaction-btn-text", onClick: (e) => onTextClick == null ? void 0 : onTextClick(e), children: text })
   ] });
 }
-const IconButtonRoot = styled$1("div")`
+const IconButtonRoot = styled("div")`
   display: flex;
   align-items: center;
   &.reaction-btn-selected {
@@ -2596,7 +2574,8 @@ function CommentsProvider({
   renderComments,
   renderDonation,
   renderActions,
-  renderEditorPlugins
+  renderEditorPlugins,
+  renderInnerFooter
 }) {
   var _a2;
   const [state, setState] = useSetState(getInitialState(order ? { order } : {}));
@@ -2800,14 +2779,15 @@ function CommentsProvider({
       renderComments,
       renderDonation,
       renderActions,
-      renderEditorPlugins
+      renderEditorPlugins,
+      renderInnerFooter
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [target, state]
   );
   return /* @__PURE__ */ jsx(CommentsContext.Provider, { value, children });
 }
-const LoadMoreButtonWrapper = styled(Box$1)`
+const LoadMoreButtonWrapper = styled$1(Box$1)`
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11L8 5L16 11' stroke='%23e1e4e8' stroke-linecap='square' stroke-width='1.5' /%3E%3C/svg%3E");
   background-repeat: repeat-x;
   background-position: center;
@@ -3767,7 +3747,7 @@ const UnreadNotificationContext = createContext(
 const useUnreadNotification = () => useContext(UnreadNotificationContext);
 function UnreadNotificationProvider({ fetchUnreadState, children }) {
   const { session } = useSessionContext();
-  const [unread, setUnread] = useState(false);
+  const [unread, setUnread] = useState(void 0);
   const markAsUnread = useCallback((value2 = true) => setUnread(value2), []);
   const update = async () => {
     const unreadState = await fetchUnreadState();
@@ -4646,7 +4626,7 @@ const MessageList = forwardRef(({ chat, ...rest }, ref) => {
     !isAtBottom && /* @__PURE__ */ jsx(Box$1, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsx(ArrowDownward, {}) }) })
   ] });
 });
-const HtmlTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip$1, { ...props, classes: { popper: className } }))(() => ({
+const HtmlTooltip = styled$1(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip$1, { ...props, classes: { popper: className } }))(() => ({
   [`& .${tooltipClasses$1.tooltip}`]: {
     color: "inherit",
     backgroundColor: "#fff",
@@ -4734,7 +4714,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
 }
 const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
 const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
-const Editor = lazy(() => import("./editor-BgcgdiRw.mjs"));
+const Editor = lazy(() => import("./editor-BnOuyZ7N.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -5593,7 +5573,9 @@ function ChatListInWallet({ sx, ...rest }) {
   const { unread } = useUnreadNotification();
   const { navigateToChatList, updateUnreadState, isWebNavbar, isInArcSphere } = useChatInWallet();
   useEffect(() => {
-    updateUnreadState(unread);
+    if (unread !== void 0) {
+      updateUnreadState(unread);
+    }
   }, [unread, updateUnreadState]);
   if (!initialized) {
     return /* @__PURE__ */ jsx(Backdrop, { open: true, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, bgcolor: "transparent" }, children: /* @__PURE__ */ jsx(CircularProgress$1, {}) });

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, ar, N, am, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-DYbkj4x-.mjs";
+import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, ar, N, am, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-D3UlBThf.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@blocklet/editor/lib/ext/BusyPlugin"), require("@mui/icons-material/ArrowBackIos"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@blocklet/editor/lib/ext/BusyPlugin", "@mui/icons-material/ArrowBackIos", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.ArrowBackIosIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
-})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, ArrowBackIosIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@arcblock/ux/lib/Locale/context"), require("@mui/icons-material"), require("@mui/lab/LoadingButton"), require("@mui/material/Alert"), require("@mui/material/Box"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@blocklet/editor/lib/ext/BusyPlugin"), require("@mui/icons-material/ArrowBackIos"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@arcblock/ux/lib/Locale/context", "@mui/icons-material", "@mui/lab/LoadingButton", "@mui/material/Alert", "@mui/material/Box", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@blocklet/editor/lib/ext/BusyPlugin", "@mui/icons-material/ArrowBackIos", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.context, global.iconsMaterial, global.LoadingButton, global.Alert, global.Box, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.ArrowBackIosIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
+})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, context, iconsMaterial, LoadingButton, Alert, Box, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, ArrowBackIosIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -483,7 +483,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const Input = ({
     initialContent = "",
     send,
-    render,
     placeholder,
     onSuccess,
     onChange,
@@ -491,6 +490,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     draftKey = "",
     shortcut,
     children,
+    renderInnerFooter,
+    renderEditorFooter,
     ...rest
   }) => {
     var _a2;
@@ -596,23 +597,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           /* @__PURE__ */ jsxRuntime.jsx(ImagePathFixerPlugin, {}),
           /* @__PURE__ */ jsxRuntime.jsx(VideoPathFixerPlugin, {}),
           /* @__PURE__ */ jsxRuntime.jsx(AutoClearPlugin$1, { value: content, isChanged: isChanged.current }),
-          children
+          children,
+          renderInnerFooter == null ? void 0 : renderInnerFooter({ submit, content, loading, error, inSmallView })
         ]
       }
-    ) }), render == null ? void 0 : render({ submit, content, loading, error, inSmallView }));
+    ) }), renderEditorFooter == null ? void 0 : renderEditorFooter({ submit, content, loading, error, inSmallView }));
   };
   const mdiLanguageMarkdown = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35l1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35l-1.92-2.35H4.89v6.38zM19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28z" }) });
-  const StyledInput = styles.styled(Input)`
-  .be-shell {
-    padding-bottom: 44px;
-  }
-  > .MuiAlert-root {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin-top: 4px;
-  }
-`;
   function CommentInput({
     disabledSend,
     send,
@@ -621,11 +612,60 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     sendText,
     sendIcon,
     draftKey = "",
+    renderInnerFooter,
     ...rest
   }) {
     const { t } = react.useContext(context.LocaleContext);
+    const renderFooter = ({ submit, content, loading, inSmallView }) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(Box, { p: 1, display: "flex", justifyContent: inSmallView ? "end" : "space-between", alignItems: "end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            component: "a",
+            href: "https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax",
+            target: "_blank",
+            sx: {
+              display: inSmallView ? "none" : "flex",
+              alignItems: "center",
+              m: 0,
+              fontSize: 12,
+              color: "text.disabled",
+              textDecoration: "none",
+              "&:hover": { color: "text.secondary" }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
+              {
+                component: "span",
+                sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 },
+                title: "Styling with Markdown is supported",
+                children: /* @__PURE__ */ jsxRuntime.jsx(mdiLanguageMarkdown, { style: { fontSize: 16 } })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { display: "flex", gap: 1, alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          LoadingButton,
+          {
+            disabled: isBoolean(disabledSend) ? disabledSend : !content,
+            loading,
+            loadingPosition: "start",
+            startIcon: sendIcon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Send, { sx: { transform: "rotate(-45deg) translateX(3px)" } }),
+            variant: "contained",
+            color: "primary",
+            title: "⌘ Enter",
+            onClick: submit,
+            className: "editor-submit-button",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: sendText || t("sendComment") }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(⌘ Enter)" })
+            ] })
+          }
+        ) })
+      ] });
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledInput,
+      Input,
       {
         className: "editor-input-container",
         placeholder: placeholder || t("commentInputPlaceholder"),
@@ -633,70 +673,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         onSuccess,
         draftKey,
         ...rest,
-        render: ({ submit, content, loading, error, inSmallView }) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Box,
-              {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                p: 1,
-                display: "flex",
-                justifyContent: inSmallView ? "end" : "space-between",
-                alignItems: "end",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Box,
-                    {
-                      component: "a",
-                      href: "https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax",
-                      target: "_blank",
-                      sx: {
-                        display: inSmallView ? "none" : "flex",
-                        alignItems: "center",
-                        m: 0,
-                        fontSize: 12,
-                        color: "text.disabled",
-                        textDecoration: "none",
-                        "&:hover": { color: "text.secondary" }
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Box,
-                        {
-                          component: "span",
-                          sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 },
-                          title: "Styling with Markdown is supported",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(mdiLanguageMarkdown, { style: { fontSize: 16 } })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { display: "flex", gap: 1, alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LoadingButton,
-                    {
-                      disabled: isBoolean(disabledSend) ? disabledSend : !content,
-                      loading,
-                      loadingPosition: "start",
-                      startIcon: sendIcon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Send, { sx: { transform: "rotate(-45deg) translateX(3px)" } }),
-                      variant: "contained",
-                      color: "primary",
-                      title: "⌘ Enter",
-                      onClick: submit,
-                      className: "editor-submit-button",
-                      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: sendText || t("sendComment") }),
-                        /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(⌘ Enter)" })
-                      ] })
-                    }
-                  ) })
-                ]
-              }
-            ),
-            error && /* @__PURE__ */ jsxRuntime.jsx(Alert, { severity: "error", children: error })
-          ] });
-        }
+        renderInnerFooter: renderInnerFooter ?? renderFooter,
+        renderEditorFooter: ({ error }) => error && /* @__PURE__ */ jsxRuntime.jsx(Alert, { severity: "error", children: error })
       }
     );
   }
@@ -709,7 +687,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         send,
         onSuccess,
         ...rest,
-        render: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "end", alignItems: "end", gap: 1, mt: 1, children: [
+        renderEditorFooter: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "end", alignItems: "end", gap: 1, mt: 1, children: [
           /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "text", color: "primary", onClick: onCancel, children: t("cancel") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             LoadingButton,
@@ -2521,7 +2499,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     renderComments,
     renderDonation,
     renderActions,
-    renderEditorPlugins
+    renderEditorPlugins,
+    renderInnerFooter
   }) {
     var _a2;
     const [state, setState] = ahooks.useSetState(getInitialState(order ? { order } : {}));
@@ -2725,7 +2704,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         renderComments,
         renderDonation,
         renderActions,
-        renderEditorPlugins
+        renderEditorPlugins,
+        renderInnerFooter
       }),
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [target, state]
@@ -3692,7 +3672,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const useUnreadNotification = () => react.useContext(UnreadNotificationContext);
   function UnreadNotificationProvider({ fetchUnreadState, children }) {
     const { session } = useSessionContext();
-    const [unread, setUnread] = react.useState(false);
+    const [unread, setUnread] = react.useState(void 0);
     const markAsUnread = react.useCallback((value2 = true) => setUnread(value2), []);
     const update = async () => {
       const unreadState = await fetchUnreadState();
@@ -5518,7 +5498,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const { unread } = useUnreadNotification();
     const { navigateToChatList, updateUnreadState, isWebNavbar, isInArcSphere } = useChatInWallet();
     react.useEffect(() => {
-      updateUnreadState(unread);
+      if (unread !== void 0) {
+        updateUnreadState(unread);
+      }
     }, [unread, updateUnreadState]);
     if (!initialized) {
       return /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open: true, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, bgcolor: "transparent" }, children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.1.66",
+  "version": "2.1.68",
   "files": [
     "dist"
   ],
@@ -44,8 +44,8 @@
     "ufo": "^1.5.4",
     "unstated-next": "^1.1.0",
     "url-join": "^4.0.1",
-    "@blocklet/editor": "^2.1.66",
-    "@blocklet/labels": "^2.1.66"
+    "@blocklet/editor": "^2.1.68",
+    "@blocklet/labels": "^2.1.68"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",