@blocklet/discuss-kit-ux 1.6.188 → 1.6.189

package/dist/components/hooks/session.d.ts

@@ -10,10 +10,15 @@ export interface SessionContextUser {
     permissions: string[];
     role: string;
 }
+interface Session {
+    initialized: boolean;
+    user: SessionContextUser;
+    login: (...args: any[]) => void;
+}
 export declare const useSessionContext: () => {
     isAdmin: boolean;
     hasAnyPassport: (passports: string | string[]) => boolean;
-    session: {
-        user: SessionContextUser;
-    };
+    hasAnyPermission: (perms: string | string[]) => boolean;
+    session: Session;
 };
+export {};

package/dist/components/posts/post-content.d.ts

@@ -3,11 +3,10 @@ interface Props {
     content: string;
     editing?: boolean;
     onExitEditing?: () => void;
-    onCancel?: () => void;
     onSubmit?: Send;
     autoCollapse?: boolean;
     enableHeadingsIdPlugin?: boolean;
     onReady?: () => void;
 }
-export default function PostContent({ content, editing, onExitEditing, onCancel, onSubmit, autoCollapse, enableHeadingsIdPlugin, onReady, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function PostContent({ content, editing, onExitEditing, onSubmit, autoCollapse, enableHeadingsIdPlugin, onReady, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{editor-1S0suIcX.mjs → editor-2xtEiiWT.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-q1fCyaqz.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-XoHU_Puz.mjs";
 import "@blocklet/labels";
 import "@mui/material/styles";
 import "@mui/material/Box";

package/dist/{index-q1fCyaqz.mjs → index-XoHU_Puz.mjs}

@@ -8,7 +8,7 @@ var _a, _b;
 import { Labels2, LabelPicker } from "@blocklet/labels";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled } from "@mui/material/styles";
-import { useEffect, useRef, lazy, useState, createElement, useContext, isValidElement, Suspense, useMemo, createContext, Fragment as Fragment$1, forwardRef, useCallback } from "react";
+import { useEffect, useRef, lazy, useState, createElement, useContext, useMemo, isValidElement, Suspense, createContext, Fragment as Fragment$1, forwardRef, useCallback } from "react";
 import Box from "@mui/material/Box";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
@@ -20,7 +20,7 @@ import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
 import { useSize, useInViewport, useSetState, useGetState, useReactive } from "ahooks";
 import LoadingButton from "@mui/lab/LoadingButton";
-import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, AddReactionOutlined, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
+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 Alert from "@mui/material/Alert";
 import isBoolean from "lodash/isBoolean";
@@ -45,7 +45,7 @@ import BrokenImageIcon from "@mui/icons-material/BrokenImage";
 import { Icon } from "@iconify/react";
 import Empty$1 from "@arcblock/ux/lib/Empty";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, 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, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
 import DIDAddress from "@arcblock/did-connect/lib/Address";
@@ -916,9 +916,13 @@ function Badge({
   ] }) : null;
 }
 const useSessionContext = () => {
-  var _a2, _b2;
+  var _a2, _b2, _c, _d;
   const ctx = useContext(SessionContext) || {};
   const loginRole = (_b2 = (_a2 = ctx == null ? void 0 : ctx.session) == null ? void 0 : _a2.user) == null ? void 0 : _b2.role;
+  const permissionSet = useMemo(() => {
+    var _a3, _b3;
+    return new Set(((_b3 = (_a3 = ctx.session) == null ? void 0 : _a3.user) == null ? void 0 : _b3.permissions) || []);
+  }, [(_d = (_c = ctx.session) == null ? void 0 : _c.user) == null ? void 0 : _d.permissions]);
   return {
     ...ctx,
     isAdmin: ["admin", "owner"].includes(loginRole),
@@ -928,6 +932,13 @@ const useSessionContext = () => {
       }
       const passportsArr = Array.isArray(passports) ? passports : [passports];
       return passportsArr.includes(loginRole);
+    },
+    hasAnyPermission: (perms) => {
+      if (!perms || perms.length === 0) {
+        return true;
+      }
+      const permsArr = Array.isArray(perms) ? perms : [perms];
+      return permsArr.some((item) => permissionSet.has(item));
     }
   };
 };
@@ -1303,7 +1314,6 @@ function PostContent({
   content,
   editing = false,
   onExitEditing,
-  onCancel,
   onSubmit,
   autoCollapse,
   enableHeadingsIdPlugin,
@@ -1317,7 +1327,7 @@ function PostContent({
         sx: {
           ".be-editable": { maxHeight: 768, overflow: "auto", minHeight: `${Math.max(innerHeight, 200)}px !important` }
         },
-        children: /* @__PURE__ */ jsx(PostEdit, { content, onCancel, send: onSubmit, onSuccess: onExitEditing })
+        children: /* @__PURE__ */ jsx(PostEdit, { content, onCancel: onExitEditing, send: onSubmit, onSuccess: onExitEditing })
       }
     );
   }
@@ -1499,7 +1509,7 @@ function PostComponent({
   return /* @__PURE__ */ jsxs(Root$1, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
     /* @__PURE__ */ jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
       /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
-        /* @__PURE__ */ jsx(AuthorInfo, { user: post.author, createdAt: renderTime(), showProfileCard }),
+        /* @__PURE__ */ jsx(AuthorInfo, { size: "sm", user: post.author, createdAt: renderTime(), showProfileCard }),
         /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
       ] }),
       /* @__PURE__ */ jsxs(Box, { sx: { ml: 5.5 }, children: [
@@ -1551,6 +1561,7 @@ function PostComponent({
     renderExtraContent && renderExtraContent(postContext)
   ] });
 }
+const tablerMessageCircle = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c3.255 2.777 3.695 7.266 1.029 10.501C16.608 19.942 11.659 20.922 7.7 19z" }) });
 const iconoirThumbsUp = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.5, children: [
   /* @__PURE__ */ jsx("path", { d: "M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z" }),
   /* @__PURE__ */ jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
@@ -1783,6 +1794,10 @@ const IconButtonRoot = styled$1("div")`
     }
   }
 `;
+const tablerMoodPlus = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsx("path", { d: "M20.985 12.528a9 9 0 1 0-8.45 8.456M16 19h6m-3-3v6M9 10h.01M15 10h.01" }),
+  /* @__PURE__ */ jsx("path", { d: "M9.5 15c.658.64 1.56 1 2.5 1s1.842-.36 2.5-1" })
+] }) });
 const emojiFont = {
   fontFamily: '"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color"'
 };
@@ -1890,10 +1905,11 @@ function GithubReaction({
           sx: {
             lineHeight: "24px",
             fontSize: 13,
+            border: 1,
+            borderColor: "divider",
             borderRadius: 1,
             cursor: "pointer",
             ...selected && {
-              border: 1,
               borderColor: "primary.light",
               bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2)
             }
@@ -1913,14 +1929,21 @@ function GithubReaction({
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
-            width: 28,
-            height: 28,
-            ml: -0.5,
-            cursor: "pointer"
-            // ':hover': { bgcolor: 'grey.100' },
+            gap: 0.75,
+            ml: -0.25,
+            cursor: "pointer",
+            fontWeight: "medium",
+            ".github-reaction-text": {
+              color: "text.secondary"
+            },
+            "&:hover .github-reaction-text": {
+              color: "secondary.main"
+            }
           },
+          onClick: handleOpen,
           children: [
-            /* @__PURE__ */ jsx(AddReactionOutlined, { sx: { fontSize: 20, color: "grey.600" }, onClick: handleOpen }),
+            /* @__PURE__ */ jsx(Box$1, { className: "github-reaction-text", component: tablerMoodPlus, sx: { fontSize: 18 } }),
+            /* @__PURE__ */ jsx(Box$1, { className: "github-reaction-text", component: "span", sx: { fontSize: 13 }, children: "Sticker" }),
             open && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx(
               Box$1,
               {
@@ -2104,23 +2127,36 @@ function Comment({
   };
   const render = ({ post, interactive }) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mt: 1, children: /* @__PURE__ */ jsx(
-        GithubReaction,
-        {
-          data: (post == null ? void 0 : post.rating) || [],
-          onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
-          onUnrate: () => onUnrate(post),
-          append: /* @__PURE__ */ jsx(Fragment, { children: (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsx(
-            Box,
-            {
-              onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
-              sx: { display: "flex", lineHeight: 1, "&:hover": { cursor: "pointer" } },
-              children: /* @__PURE__ */ jsx(ChatBubbleOutlineOutlined, { sx: { fontSize: 18, color: "grey.600" } })
-            }
-          ) }),
-          interactive
-        }
-      ) }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 3, mt: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          GithubReaction,
+          {
+            data: (post == null ? void 0 : post.rating) || [],
+            onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
+            onUnrate: () => onUnrate(post),
+            interactive
+          }
+        ),
+        (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.75,
+              fontSize: 13,
+              color: "text.secondary",
+              lineHeight: 1,
+              "&:hover": { cursor: "pointer" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: tablerMessageCircle, sx: { fontSize: 18, color: "text.secondary" } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", children: "Reply" })
+            ]
+          }
+        )
+      ] }),
       inputVisible && /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(
         CommentInput,
         {
@@ -2128,7 +2164,8 @@ function Comment({
           onSuccess: () => setInputVisible(false),
           draftKey: `post-${post.id}`
         }
-      ) })
+      ) }),
+      /* @__PURE__ */ jsx(Divider, { sx: { mt: 3 } })
     ] });
   };
   const renderExtraContent = ({ post }) => {
@@ -2708,7 +2745,7 @@ function CoverImage({
           pt: `${100 / aspectRatio}%`,
           overflow: "hidden",
           position: "relative",
-          borderRadius: 2,
+          borderRadius: 1,
           ...shadow && { boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px" },
           // https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari
           transform: "translateZ(0)"
@@ -2789,7 +2826,7 @@ function CoverImageUpload({ url, onChange, ...rest }) {
               height: 0,
               pt: "56%",
               overflow: "hidden",
-              borderRadius: 2,
+              borderRadius: 1,
               bgcolor: "grey.300",
               cursor: "pointer"
             },
@@ -3276,7 +3313,7 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
         alignItems: "center",
         border: "1px solid #bbb",
         borderRadius: 1,
-        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+        overflow: "hidden"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -3285,10 +3322,10 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
             sx: {
               display: "flex",
               alignItems: "center",
-              width: 240,
+              width: 180,
               alignSelf: "stretch",
-              px: 2,
-              bgcolor: "grey.300"
+              px: 1.25,
+              bgcolor: "grey.200"
             },
             children: /* @__PURE__ */ jsx(
               Box$1,
@@ -3300,10 +3337,11 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
                   width: 1,
                   overflow: "hidden",
                   whiteSpace: "nowrap",
-                  fontSize: 14,
                   border: 0,
                   bgcolor: "inherit",
-                  outline: "none"
+                  outline: "none",
+                  fontSize: 14,
+                  color: "text.secondary"
                 }
               }
             )
@@ -3312,20 +3350,19 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
         /* @__PURE__ */ jsx(
           InputBase,
           {
-            className: "blog-link",
             value: slug,
             onChange: (e) => onChange(e.target.value),
-            sx: { ml: 1, flex: 1 }
+            sx: { ml: 0.5, flex: 1, bgcolor: "transparent", input: { py: 1, fontSize: 14 } }
           }
         ),
         /* @__PURE__ */ jsx(
           IconButton$2,
           {
-            sx: { py: 1.25, px: 2 },
+            sx: { px: 1 },
             onClick: () => {
               copy(joinUrl(prefix, slug));
             },
-            children: /* @__PURE__ */ jsx(ContentCopy, { sx: { fontSize: 20 } })
+            children: /* @__PURE__ */ jsx(ContentCopy, { sx: { fontSize: 18 } })
           }
         )
       ]
@@ -4366,7 +4403,7 @@ const PreviousLocationRecorder = () => {
 };
 function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
   const navigate = useNavigate();
-  const mergedSx = [{ color: "grey.600" }, ...Array.isArray(sx) ? sx : [sx]];
+  const mergedSx = [{}, ...Array.isArray(sx) ? sx : [sx]];
   const handleClick = () => {
     if (url) {
       navigate(url, { replace: true });
@@ -4385,8 +4422,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
     {
       onClick: handleClick,
       variant: "outlined",
-      color: "inherit",
-      size: "small",
+      color: "primary",
       startIcon: /* @__PURE__ */ jsx(ArrowBackIos, { style: { fontSize: 13 } }),
       sx: mergedSx,
       ...rest,
@@ -5093,7 +5129,7 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-1S0suIcX.mjs"));
+const Editor = lazy(() => import("./editor-2xtEiiWT.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -11259,83 +11295,84 @@ function SegmentedControl({ value, options, onChange, sx, ...rest }) {
   ) });
 }
 export {
-  UnreadNotificationProvider as $,
+  useUnreadNotification as $,
   Avatar as A,
   Badge as B,
   CommentInput as C,
   DefaultEditorConfigProvider as D,
   EmptyStatus as E,
-  BlogCard as F,
+  BlogListWrapper as F,
   GithubReaction as G,
-  BlogPermaLink as H,
+  BlogCard as H,
   ImagePathFixerPlugin as I,
-  getBlogLink as J,
-  CoverImage as K,
-  CoverImageUpload as L,
+  BlogPermaLink as J,
+  getBlogLink as K,
+  CoverImage as L,
   Menu as M,
-  AccessControl as N,
-  useAuthzContext as O,
+  CoverImageUpload as N,
+  AccessControl as O,
   Pagination as P,
-  AuthzProvider as Q,
+  useAuthzContext as Q,
   RelativeTime as R,
   ScrollableEditorWrapper as S,
-  ChatClient as T,
-  Chat as U,
+  AuthzProvider as T,
+  ChatClient as U,
   VideoPathFixerPlugin as V,
-  ChatHeaderAddon as W,
-  useChatContext as X,
-  ChatProvider as Y,
-  UnreadNotificationContext as Z,
-  useUnreadNotification as _,
+  Chat as W,
+  ChatHeaderAddon as X,
+  useChatContext as Y,
+  ChatProvider as Z,
+  UnreadNotificationContext as _,
   isEmptyContent as a,
-  Confirm as a0,
-  ConfirmContext as a1,
-  useConfirm as a2,
-  ConfirmProvider as a3,
-  SecureLabelPicker as a4,
-  useApiErrorHandler as a5,
-  useDefaultApiErrorHandler as a6,
-  PreviousLocationRecorder as a7,
-  Back as a8,
-  LazyEditor as a9,
-  EditorPreview as aa,
-  DirtyPromptContainer as ab,
-  ConfirmNavigation as ac,
-  UploaderContext as ad,
-  useUploader as ae,
-  UploaderTrigger as af,
-  UploaderProvider as ag,
-  composeImageUrl as ah,
-  usePointUpContext as ai,
-  PointUpProvider as aj,
-  ButtonGroup as ak,
-  SegmentedControl as al,
-  create as am,
-  getWsClient as an,
-  useSubscription as ao,
+  UnreadNotificationProvider as a0,
+  Confirm as a1,
+  ConfirmContext as a2,
+  useConfirm as a3,
+  ConfirmProvider as a4,
+  SecureLabelPicker as a5,
+  useApiErrorHandler as a6,
+  useDefaultApiErrorHandler as a7,
+  PreviousLocationRecorder as a8,
+  Back as a9,
+  LazyEditor as aa,
+  EditorPreview as ab,
+  DirtyPromptContainer as ac,
+  ConfirmNavigation as ad,
+  UploaderContext as ae,
+  useUploader as af,
+  UploaderTrigger as ag,
+  UploaderProvider as ah,
+  composeImageUrl as ai,
+  usePointUpContext as aj,
+  PointUpProvider as ak,
+  ButtonGroup as al,
+  SegmentedControl as am,
+  create as an,
+  getWsClient as ao,
+  useSubscription as ap,
   Input as b,
   useChanged as c,
-  utils as d,
-  themeOverrides as e,
-  InternalThemeProvider as f,
+  useSessionContext as d,
+  utils as e,
+  themeOverrides as f,
   getExcerptSync as g,
-  Avatars as h,
+  InternalThemeProvider as h,
   inferInitialEditorState as i,
-  AuthorInfo as j,
-  SystemUser as k,
+  Avatars as j,
+  AuthorInfo as k,
   lexical as l,
-  PostContent as m,
-  PostComponent as n,
-  Comment as o,
+  SystemUser as m,
+  PostContent as n,
+  PostComponent as o,
   preferences as p,
-  CommentList as q,
+  Comment as q,
   routes as r,
   stringify as s,
   translations as t,
   useNow as u,
-  CommentsContext as v,
-  useCommentsContext as w,
-  CommentsProvider as x,
-  BinaryThumb as y,
-  BlogListWrapper as z
+  CommentList as v,
+  CommentsContext as w,
+  useCommentsContext as x,
+  CommentsProvider as y,
+  BinaryThumb as z
 };

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export * from './components/editor';
 export * as lexicalUtils from './components/lexical';
 export * from './components/dirty-prompt';
 export { translations } from './components/locale';
-export { useNow, useChanged } from './components/hooks';
+export { useNow, useChanged, useSessionContext } from './components/hooks';
 export * as utils from './components/utils';
 export * as routes from './components/routes';
 export { default as preferences } from './preferences';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { N, j, Q, A, h, a8, B, y, F, z, H, ak, U, T, W, Y, o, C, q, v, x, a0, a1, ac, a3, K, L, D, ab, aa, E, G, b, f, a9, M, P, aj, n, m, a7, R, S, a4, al, k, Z, $, ad, ag, af, ah, am, J, an, l, p, r, e, t, a5, O, c, X, w, a2, a6, u, ai, ao, _, ae, d } from "./index-q1fCyaqz.mjs";
+import { O, k, T, A, j, a9, B, z, H, F, J, al, W, U, X, Z, q, C, v, w, y, a1, a2, ad, a4, L, N, D, ac, ab, E, G, b, h, aa, M, P, ak, o, n, a8, R, S, a5, am, m, _, a0, ae, ah, ag, ai, an, K, ao, l, p, r, f, t, a6, Q, c, Y, x, a3, a7, u, aj, d, ap, $, af, e } from "./index-XoHU_Puz.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";
@@ -7,7 +7,6 @@ import "@mui/material/Button";
 import "@mui/lab/LoadingButton";
 import "@mui/icons-material";
 import "@arcblock/ux/lib/Locale/context";
-import "@arcblock/did-connect/lib/Session";
 import "@mui/material";
 import "@mui/material/styles";
 import "lodash/isNil";
@@ -40,6 +39,7 @@ import "@mui/material/Avatar";
 import "@mui/icons-material/BrokenImage";
 import "@iconify/react";
 import "@arcblock/ux/lib/Empty";
+import "@arcblock/did-connect/lib/Session";
 import "@mui/icons-material/NotificationsActiveOutlined";
 import "@blocklet/editor/lib/ext/CheckboxPlugin";
 import "@arcblock/did-connect/lib/Address";
@@ -71,77 +71,78 @@ import "js-cookie";
 import "@arcblock/ws";
 import "@emotion/css";
 export {
-  N as AccessControl,
-  j as AuthorInfo,
-  Q as AuthzProvider,
+  O as AccessControl,
+  k as AuthorInfo,
+  T as AuthzProvider,
   A as Avatar,
-  h as Avatars,
-  a8 as Back,
+  j as Avatars,
+  a9 as Back,
   B as Badge,
-  y as BinaryThumb,
-  F as BlogCard,
-  z as BlogList,
-  H as BlogPermaLink,
-  ak as ButtonGroup,
-  U as Chat,
-  T as ChatClient,
-  W as ChatHeaderAddon,
-  Y as ChatProvider,
-  o as Comment,
+  z as BinaryThumb,
+  H as BlogCard,
+  F as BlogList,
+  J as BlogPermaLink,
+  al as ButtonGroup,
+  W as Chat,
+  U as ChatClient,
+  X as ChatHeaderAddon,
+  Z as ChatProvider,
+  q as Comment,
   C as CommentInput,
-  q as CommentList,
-  v as CommentsContext,
-  x as CommentsProvider,
-  a0 as Confirm,
-  a1 as ConfirmContext,
-  ac as ConfirmNavigation,
-  a3 as ConfirmProvider,
-  K as CoverImage,
-  L as CoverImageUpload,
+  v as CommentList,
+  w as CommentsContext,
+  y as CommentsProvider,
+  a1 as Confirm,
+  a2 as ConfirmContext,
+  ad as ConfirmNavigation,
+  a4 as ConfirmProvider,
+  L as CoverImage,
+  N as CoverImageUpload,
   D as DefaultEditorConfigProvider,
-  ab as DirtyPromptContainer,
-  aa as EditorPreview,
+  ac as DirtyPromptContainer,
+  ab as EditorPreview,
   E as EmptyStatus,
   G as GithubReaction,
   b as Input,
-  f as InternalThemeProvider,
-  a9 as LazyEditor,
+  h as InternalThemeProvider,
+  aa as LazyEditor,
   M as Menu,
   P as Pagination,
-  aj as PointUpProvider,
-  n as Post,
-  m as PostContent,
-  a7 as PreviousLocationRecorder,
+  ak as PointUpProvider,
+  o as Post,
+  n as PostContent,
+  a8 as PreviousLocationRecorder,
   R as RelativeTime,
   S as ScrollableEditorWrapper,
-  a4 as SecureLabelPicker,
-  al as SegmentedControl,
-  k as SystemUser,
-  Z as UnreadNotificationContext,
-  $ as UnreadNotificationProvider,
-  ad as UploaderContext,
-  ag as UploaderProvider,
-  af as UploaderTrigger,
-  ah as composeImageUrl,
-  am as create,
-  J as getBlogLink,
-  an as getWsClient,
+  a5 as SecureLabelPicker,
+  am as SegmentedControl,
+  m as SystemUser,
+  _ as UnreadNotificationContext,
+  a0 as UnreadNotificationProvider,
+  ae as UploaderContext,
+  ah as UploaderProvider,
+  ag as UploaderTrigger,
+  ai as composeImageUrl,
+  an as create,
+  K as getBlogLink,
+  ao as getWsClient,
   l as lexicalUtils,
   p as preferences,
   r as routes,
-  e as themeOverrides,
+  f as themeOverrides,
   t as translations,
-  a5 as useApiErrorHandler,
-  O as useAuthzContext,
+  a6 as useApiErrorHandler,
+  Q as useAuthzContext,
   c as useChanged,
-  X as useChatContext,
-  w as useCommentsContext,
-  a2 as useConfirm,
-  a6 as useDefaultApiErrorHandler,
+  Y as useChatContext,
+  x as useCommentsContext,
+  a3 as useConfirm,
+  a7 as useDefaultApiErrorHandler,
   u as useNow,
-  ai as usePointUpContext,
-  ao as useSubscription,
-  _ as useUnreadNotification,
-  ae as useUploader,
-  d as utils
+  aj as usePointUpContext,
+  d as useSessionContext,
+  ap as useSubscription,
+  $ as useUnreadNotification,
+  af as useUploader,
+  e as utils
 };

package/dist/index.umd.js

@@ -849,9 +849,13 @@ var __publicField = (obj, key, value) => {
     ] }) : null;
   }
   const useSessionContext = () => {
-    var _a2, _b2;
+    var _a2, _b2, _c, _d;
     const ctx = react.useContext(Session.SessionContext) || {};
     const loginRole = (_b2 = (_a2 = ctx == null ? void 0 : ctx.session) == null ? void 0 : _a2.user) == null ? void 0 : _b2.role;
+    const permissionSet = react.useMemo(() => {
+      var _a3, _b3;
+      return new Set(((_b3 = (_a3 = ctx.session) == null ? void 0 : _a3.user) == null ? void 0 : _b3.permissions) || []);
+    }, [(_d = (_c = ctx.session) == null ? void 0 : _c.user) == null ? void 0 : _d.permissions]);
     return {
       ...ctx,
       isAdmin: ["admin", "owner"].includes(loginRole),
@@ -861,6 +865,13 @@ var __publicField = (obj, key, value) => {
         }
         const passportsArr = Array.isArray(passports) ? passports : [passports];
         return passportsArr.includes(loginRole);
+      },
+      hasAnyPermission: (perms) => {
+        if (!perms || perms.length === 0) {
+          return true;
+        }
+        const permsArr = Array.isArray(perms) ? perms : [perms];
+        return permsArr.some((item) => permissionSet.has(item));
       }
     };
   };
@@ -1236,7 +1247,6 @@ var __publicField = (obj, key, value) => {
     content,
     editing = false,
     onExitEditing,
-    onCancel,
     onSubmit,
     autoCollapse,
     enableHeadingsIdPlugin,
@@ -1250,7 +1260,7 @@ var __publicField = (obj, key, value) => {
           sx: {
             ".be-editable": { maxHeight: 768, overflow: "auto", minHeight: `${Math.max(innerHeight, 200)}px !important` }
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(PostEdit, { content, onCancel, send: onSubmit, onSuccess: onExitEditing })
+          children: /* @__PURE__ */ jsxRuntime.jsx(PostEdit, { content, onCancel: onExitEditing, send: onSubmit, onSuccess: onExitEditing })
         }
       );
     }
@@ -1432,7 +1442,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Root$2, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: post.author, createdAt: renderTime(), showProfileCard }),
+          /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { size: "sm", user: post.author, createdAt: renderTime(), showProfileCard }),
           /* @__PURE__ */ jsxRuntime.jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { ml: 5.5 }, children: [
@@ -1484,6 +1494,7 @@ var __publicField = (obj, key, value) => {
       renderExtraContent && renderExtraContent(postContext)
     ] });
   }
+  const tablerMessageCircle = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c3.255 2.777 3.695 7.266 1.029 10.501C16.608 19.942 11.659 20.922 7.7 19z" }) });
   const iconoirThumbsUp = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.5, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
@@ -1716,6 +1727,10 @@ var __publicField = (obj, key, value) => {
     }
   }
 `;
+  const tablerMoodPlus = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.985 12.528a9 9 0 1 0-8.45 8.456M16 19h6m-3-3v6M9 10h.01M15 10h.01" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 15c.658.64 1.56 1 2.5 1s1.842-.36 2.5-1" })
+  ] }) });
   const emojiFont = {
     fontFamily: '"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color"'
   };
@@ -1823,10 +1838,11 @@ var __publicField = (obj, key, value) => {
             sx: {
               lineHeight: "24px",
               fontSize: 13,
+              border: 1,
+              borderColor: "divider",
               borderRadius: 1,
               cursor: "pointer",
               ...selected && {
-                border: 1,
                 borderColor: "primary.light",
                 bgcolor: (theme) => material.alpha(theme.palette.primary.light, 0.2)
               }
@@ -1846,14 +1862,21 @@ var __publicField = (obj, key, value) => {
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
-              width: 28,
-              height: 28,
-              ml: -0.5,
-              cursor: "pointer"
-              // ':hover': { bgcolor: 'grey.100' },
+              gap: 0.75,
+              ml: -0.25,
+              cursor: "pointer",
+              fontWeight: "medium",
+              ".github-reaction-text": {
+                color: "text.secondary"
+              },
+              "&:hover .github-reaction-text": {
+                color: "secondary.main"
+              }
             },
+            onClick: handleOpen,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.AddReactionOutlined, { sx: { fontSize: 20, color: "grey.600" }, onClick: handleOpen }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "github-reaction-text", component: tablerMoodPlus, sx: { fontSize: 18 } }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "github-reaction-text", component: "span", sx: { fontSize: 13 }, children: "Sticker" }),
               open && /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
                 material.Box,
                 {
@@ -2037,23 +2060,36 @@ var __publicField = (obj, key, value) => {
     };
     const render = ({ post, interactive }) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { display: "flex", alignItems: "center", mt: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-          GithubReaction,
-          {
-            data: (post == null ? void 0 : post.rating) || [],
-            onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
-            onUnrate: () => onUnrate(post),
-            append: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxRuntime.jsx(
-              Box,
-              {
-                onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
-                sx: { display: "flex", lineHeight: 1, "&:hover": { cursor: "pointer" } },
-                children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChatBubbleOutlineOutlined, { sx: { fontSize: 18, color: "grey.600" } })
-              }
-            ) }),
-            interactive
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 3, mt: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            GithubReaction,
+            {
+              data: (post == null ? void 0 : post.rating) || [],
+              onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
+              onUnrate: () => onUnrate(post),
+              interactive
+            }
+          ),
+          (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxRuntime.jsxs(
+            Box,
+            {
+              onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                fontSize: 13,
+                color: "text.secondary",
+                lineHeight: 1,
+                "&:hover": { cursor: "pointer" }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: tablerMessageCircle, sx: { fontSize: 18, color: "text.secondary" } }),
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", children: "Reply" })
+              ]
+            }
+          )
+        ] }),
         inputVisible && /* @__PURE__ */ jsxRuntime.jsx(Box, { my: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
           CommentInput,
           {
@@ -2061,7 +2097,8 @@ var __publicField = (obj, key, value) => {
             onSuccess: () => setInputVisible(false),
             draftKey: `post-${post.id}`
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mt: 3 } })
       ] });
     };
     const renderExtraContent = ({ post }) => {
@@ -2641,7 +2678,7 @@ var __publicField = (obj, key, value) => {
             pt: `${100 / aspectRatio}%`,
             overflow: "hidden",
             position: "relative",
-            borderRadius: 2,
+            borderRadius: 1,
             ...shadow && { boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px" },
             // https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari
             transform: "translateZ(0)"
@@ -2722,7 +2759,7 @@ var __publicField = (obj, key, value) => {
                 height: 0,
                 pt: "56%",
                 overflow: "hidden",
-                borderRadius: 2,
+                borderRadius: 1,
                 bgcolor: "grey.300",
                 cursor: "pointer"
               },
@@ -3209,7 +3246,7 @@ var __publicField = (obj, key, value) => {
           alignItems: "center",
           border: "1px solid #bbb",
           borderRadius: 1,
-          boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+          overflow: "hidden"
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3218,10 +3255,10 @@ var __publicField = (obj, key, value) => {
               sx: {
                 display: "flex",
                 alignItems: "center",
-                width: 240,
+                width: 180,
                 alignSelf: "stretch",
-                px: 2,
-                bgcolor: "grey.300"
+                px: 1.25,
+                bgcolor: "grey.200"
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 material.Box,
@@ -3233,10 +3270,11 @@ var __publicField = (obj, key, value) => {
                     width: 1,
                     overflow: "hidden",
                     whiteSpace: "nowrap",
-                    fontSize: 14,
                     border: 0,
                     bgcolor: "inherit",
-                    outline: "none"
+                    outline: "none",
+                    fontSize: 14,
+                    color: "text.secondary"
                   }
                 }
               )
@@ -3245,20 +3283,19 @@ var __publicField = (obj, key, value) => {
           /* @__PURE__ */ jsxRuntime.jsx(
             material.InputBase,
             {
-              className: "blog-link",
               value: slug,
               onChange: (e) => onChange(e.target.value),
-              sx: { ml: 1, flex: 1 }
+              sx: { ml: 0.5, flex: 1, bgcolor: "transparent", input: { py: 1, fontSize: 14 } }
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             material.IconButton,
             {
-              sx: { py: 1.25, px: 2 },
+              sx: { px: 1 },
               onClick: () => {
                 copy(joinUrl(prefix, slug));
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopy, { sx: { fontSize: 20 } })
+              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopy, { sx: { fontSize: 18 } })
             }
           )
         ]
@@ -4299,7 +4336,7 @@ var __publicField = (obj, key, value) => {
   };
   function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
     const navigate = reactRouterDom.useNavigate();
-    const mergedSx = [{ color: "grey.600" }, ...Array.isArray(sx) ? sx : [sx]];
+    const mergedSx = [{}, ...Array.isArray(sx) ? sx : [sx]];
     const handleClick = () => {
       if (url) {
         navigate(url, { replace: true });
@@ -4318,8 +4355,7 @@ var __publicField = (obj, key, value) => {
       {
         onClick: handleClick,
         variant: "outlined",
-        color: "inherit",
-        size: "small",
+        color: "primary",
         startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ArrowBackIos, { style: { fontSize: 13 } }),
         sx: mergedSx,
         ...rest,
@@ -11291,6 +11327,7 @@ var __publicField = (obj, key, value) => {
   exports2.useDefaultApiErrorHandler = useDefaultApiErrorHandler;
   exports2.useNow = useNow;
   exports2.usePointUpContext = usePointUpContext;
+  exports2.useSessionContext = useSessionContext;
   exports2.useSubscription = useSubscription;
   exports2.useUnreadNotification = useUnreadNotification;
   exports2.useUploader = useUploader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.6.188",
+  "version": "1.6.189",
   "files": [
     "dist"
   ],
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@arcblock/ws": "^1.18.113",
-    "@blocklet/editor": "1.6.188",
-    "@blocklet/labels": "1.6.188",
+    "@blocklet/editor": "1.6.189",
+    "@blocklet/labels": "1.6.189",
     "@blocklet/uploader": "^0.0.75",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -94,5 +94,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "7662e0b6e1a16e0129777feba8640acac2032a7b"
+  "gitHead": "9dc3cda97f297d5f4818c0b7a7e0daa1e588d1dd"
 }