@blocklet/discuss-kit-ux 2.1.106 → 2.1.108

package/dist/components/locale/en.d.ts

@@ -86,5 +86,8 @@ declare const _default: {
         edited: string;
         created: string;
     };
+    pin: string;
+    unpin: string;
+    pinned: string;
 };
 export default _default;

package/dist/components/locale/index.d.ts

@@ -89,6 +89,9 @@ export declare const translations: {
             edited: string;
             created: string;
         };
+        pin: string;
+        unpin: string;
+        pinned: string;
     };
     en: {
         cancel: string;
@@ -178,5 +181,8 @@ export declare const translations: {
             edited: string;
             created: string;
         };
+        pin: string;
+        unpin: string;
+        pinned: string;
     };
 };

package/dist/components/locale/zh.d.ts

@@ -88,5 +88,8 @@ declare const _default: {
         edited: string;
         created: string;
     };
+    pin: string;
+    unpin: string;
+    pinned: string;
 };
 export default _default;

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

@@ -45,6 +45,8 @@ interface CommentsContextValue {
     target: Target;
     api: CommentAPI;
     state: State;
+    comments: Post[];
+    pinned: Post[];
     flatView?: boolean;
     autoCollapse?: boolean;
     allowCopyLink?: boolean;
@@ -58,6 +60,7 @@ interface CommentsContextValue {
     updateComment: CommentAPI['updateComment'];
     deleteComment: CommentAPI['deleteComment'];
     reply: CommentAPI['reply'];
+    togglePin: CommentAPI['togglePin'];
     findById: (id: string) => Post | undefined;
     renderComments?: CommentsRender;
     renderDonation?: (post: Post) => React.ReactNode;

package/dist/components/posts/comment.d.ts

@@ -5,9 +5,10 @@ export interface CommentProps {
     onRate: CommentAPI['rate'];
     onUnrate: CommentAPI['unrate'];
     onReply: CommentAPI['reply'];
+    onTogglePin: CommentAPI['togglePin'];
     onLoadMoreReplies: (rootId: string) => void;
     renderDonation?: (post: Post) => React.ReactNode;
     renderActions?: (post: Post) => React.ReactNode;
     renderEditorPlugins?: (post: Post) => React.ReactNode;
 }
-export default function Comment({ onDelete, onRate, onUnrate, onReply, onContentUpdate, onLoadMoreReplies, renderDonation, renderActions, renderEditorPlugins, ...rest }: PostProps & CommentProps): import("react/jsx-runtime").JSX.Element;
+export default function Comment({ onDelete, onRate, onUnrate, onReply, onTogglePin, onContentUpdate, onLoadMoreReplies, renderDonation, renderActions, renderEditorPlugins, ...rest }: PostProps & CommentProps): import("react/jsx-runtime").JSX.Element;

package/dist/{editor-DdY8k2T0.mjs → editor-BvoQGKvy.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 { lazyRetry } from "@arcblock/ux/lib/Util";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DXCcMmcr.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-BXFZiIgf.mjs";
 const BlockletEditor = lazyRetry(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-DXCcMmcr.mjs → index-BXFZiIgf.mjs}

@@ -56,6 +56,7 @@ import clsx from "clsx";
 import IconButton$1 from "@mui/material/IconButton";
 import MuiMenu from "@mui/material/Menu";
 import { EditorHolderProvider } from "@blocklet/editor/lib/ext/EditorHolderPlugin";
+import red from "@mui/material/colors/red";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import orderBy from "lodash/orderBy";
 import Typography from "@mui/material/Typography";
@@ -1804,6 +1805,7 @@ function PostComponent({
   ] });
 }
 const tablerMessageCircle = (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: "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.501S11.659 20.922 7.7 19z" }) });
+const tablerPinned = (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: "M9 4v6l-2 4v2h10v-2l-2-4V4m-3 12v5M8 4h8" }) });
 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.576a2 2 0 0 1 1.929 2.526l-1.91 7A2 2 0 0 1 16.473 20Z" }),
   /* @__PURE__ */ jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
@@ -2349,6 +2351,7 @@ function Comment({
   onRate,
   onUnrate,
   onReply,
+  onTogglePin,
   onContentUpdate,
   onLoadMoreReplies,
   renderDonation,
@@ -2371,6 +2374,11 @@ function Comment({
     }
   };
   const customMenu = (items, { isAuthor, isAdmin, post }) => {
+    if (isAdmin && !post.parentId) {
+      items.push(
+        /* @__PURE__ */ jsx(MuiMenuItem, { onClick: () => onTogglePin({ post, value: !post.pinnedAt }), children: t(post.pinnedAt ? "unpin" : "pin") }, "pin")
+      );
+    }
     if ((isAdmin || isAuthor) && !post.deletedAt) {
       items.push(
         /* @__PURE__ */ jsx(MuiMenuItem, { onClick: () => handleDelete(post), children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
@@ -2380,6 +2388,29 @@ function Comment({
   };
   const render = ({ post, interactive }) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
+      post.pinnedAt && /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", alignItems: "end", gap: 3, mt: 1 }, children: /* @__PURE__ */ jsxs(
+        Box$1,
+        {
+          component: "span",
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.25,
+            fontSize: 12,
+            color: red[700],
+            fontWeight: "bold",
+            bgcolor: red[50],
+            border: `1px solid ${red[100]}`,
+            borderRadius: 1,
+            px: 1.75,
+            py: 0.25
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box$1, { component: tablerPinned, sx: { fontSize: 12 } }),
+            t("pinned")
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "end", gap: 3, mt: 1 }, children: [
         /* @__PURE__ */ jsx(
           GithubReaction,
@@ -2446,6 +2477,7 @@ function Comment({
               onRate,
               onUnrate,
               onReply,
+              onTogglePin,
               onLoadMoreReplies,
               allowCopyLink: rest.allowCopyLink,
               showProfileCard: rest.showProfileCard,
@@ -2580,6 +2612,8 @@ function CommentsProvider({
 }) {
   var _a2;
   const [state, setState] = useSetState(getInitialState(order ? { order } : {}));
+  const comments = useMemo(() => state.comments.filter((item) => !item.pinnedAt), [state.comments]);
+  const pinned = useMemo(() => state.comments.filter((item) => item.pinnedAt), [state.comments]);
   const containerHeight = (_a2 = useSize(containerRef)) == null ? void 0 : _a2.height;
   const commentsKeyById = useMemo(() => {
     return state.comments.reduce((acc, cur) => {
@@ -2609,7 +2643,7 @@ function CommentsProvider({
         order: state.order,
         includeReplies: flatView ? 1 : null
       });
-      const [{ data, total, nextCursor }, positionRes] = await Promise.all([
+      const [{ data, total, nextCursor }, positionRes, pinnedComments] = await Promise.all([
         api.fetchComments({
           objectId: target.id,
           limit,
@@ -2617,7 +2651,8 @@ function CommentsProvider({
           includeReplies: flatView ? 1 : null,
           initialRepliesLimit
         }),
-        highlightedRef.current ? fetchCommentPosition() : -1
+        highlightedRef.current ? fetchCommentPosition() : -1,
+        api.fetchPinnedComments(target.id)
       ]);
       let position = -1;
       let cursor = highlightedRef.current;
@@ -2638,7 +2673,7 @@ function CommentsProvider({
           initialRepliesLimit
         });
         setState({
-          comments: [...data, ...result.data],
+          comments: [...data, ...result.data, ...pinnedComments],
           nextCursor,
           total,
           initialized: true,
@@ -2651,7 +2686,12 @@ function CommentsProvider({
           }
         });
       } else {
-        setState({ comments: data, nextCursor, total, initialized: true });
+        setState({
+          comments: [...data, ...pinnedComments],
+          nextCursor,
+          total,
+          initialized: true
+        });
       }
     };
     init();
@@ -2756,11 +2796,17 @@ function CommentsProvider({
     const result = await api.reply(post, content);
     setTimeout(() => add(result), 800);
   };
+  const togglePin = async ({ post, value: value2 }) => {
+    await api.togglePin({ post, value: value2 });
+    updateCommentState(post.id, (current) => ({ ...current, pinnedAt: value2 ? /* @__PURE__ */ new Date() : null }));
+  };
   const findById = (id2) => commentsKeyById[id2];
   const value = useMemo(
     () => ({
       target,
       state,
+      pinned,
+      comments,
       flatView,
       autoCollapse,
       allowCopyLink,
@@ -2775,6 +2821,7 @@ function CommentsProvider({
       updateComment,
       deleteComment,
       reply,
+      togglePin,
       loadMoreReplies,
       findById,
       renderComments,
@@ -2806,6 +2853,7 @@ function SegmentalList({ ...rest }) {
     updateComment,
     deleteComment,
     reply,
+    togglePin,
     loadMoreReplies,
     api
   } = useCommentsContext();
@@ -2851,6 +2899,7 @@ function SegmentalList({ ...rest }) {
             onRate: api.rate,
             onUnrate: api.unrate,
             onReply: reply,
+            onTogglePin: togglePin,
             onLoadMoreReplies: loadMoreReplies,
             autoCollapse,
             allowCopyLink,
@@ -2876,7 +2925,9 @@ function SegmentalList({ ...rest }) {
 function CommentList(props) {
   const { t } = useLocaleContext();
   const {
-    state: { comments, order, nextCursor, highlighted },
+    state: { order, nextCursor, highlighted },
+    comments,
+    pinned,
     autoCollapse,
     allowCopyLink,
     showProfileCard,
@@ -2885,6 +2936,7 @@ function CommentList(props) {
     updateComment,
     deleteComment,
     reply,
+    togglePin,
     loadMoreReplies,
     api,
     renderComments,
@@ -2904,6 +2956,7 @@ function CommentList(props) {
       onRate: api.rate,
       onUnrate: api.unrate,
       onReply: reply,
+      onTogglePin: togglePin,
       onLoadMoreReplies: loadMoreReplies,
       autoCollapse,
       allowCopyLink,
@@ -2916,7 +2969,12 @@ function CommentList(props) {
     },
     comment.id
   );
+  const sortedPinned = pinned.sort((a, b) => {
+    var _a2, _b2;
+    return (((_a2 = b.pinnedAt) == null ? void 0 : _a2.getTime()) ?? 0) - (((_b2 = a.pinnedAt) == null ? void 0 : _b2.getTime()) ?? 0);
+  });
   return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(Box$1, { children: sortedPinned.map((post) => renderComment(post, {})) }),
     renderComments ? renderComments({ order, comments, renderComment }) : comments == null ? void 0 : comments.map(renderComment),
     nextCursor && /* @__PURE__ */ jsx(Box$1, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
       Button,
@@ -4724,7 +4782,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 = lazyRetry(() => import("./editor-DdY8k2T0.mjs"));
+const Editor = lazyRetry(() => import("./editor-BvoQGKvy.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -6193,7 +6251,10 @@ const en = {
     mostRecent: "most recent",
     edited: "edited",
     created: "created"
-  }
+  },
+  pin: "Pin",
+  unpin: "Unpin",
+  pinned: "Pinned"
 };
 const zh = {
   cancel: "取消",
@@ -6284,7 +6345,10 @@ const zh = {
     mostRecent: "最近",
     edited: "编辑",
     created: "创建"
-  }
+  },
+  pin: "置顶",
+  unpin: "取消置顶",
+  pinned: "置顶"
 };
 const translations = { zh, en };
 const Lottie = lazyRetry(() => import("lottie-react"));

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-DXCcMmcr.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-BXFZiIgf.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("@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("@arcblock/ux/lib/Util"), 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", "@arcblock/ux/lib/Util", "@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.Util, 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, Util, 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("@arcblock/ux/lib/Util"), 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("@mui/material/colors/red"), 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", "@arcblock/ux/lib/Util", "@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", "@mui/material/colors/red", "@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.Util, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.red, 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, Util, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, red, 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);
@@ -1728,6 +1728,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ] });
   }
   const tablerMessageCircle = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", 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.501S11.659 20.922 7.7 19z" }) });
+  const tablerPinned = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 4v6l-2 4v2h10v-2l-2-4V4m-3 12v5M8 4h8" }) });
   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.576a2 2 0 0 1 1.929 2.526l-1.91 7A2 2 0 0 1 16.473 20Z" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
@@ -2273,6 +2274,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onRate,
     onUnrate,
     onReply,
+    onTogglePin,
     onContentUpdate,
     onLoadMoreReplies,
     renderDonation,
@@ -2295,6 +2297,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     const customMenu = (items, { isAuthor, isAdmin, post }) => {
+      if (isAdmin && !post.parentId) {
+        items.push(
+          /* @__PURE__ */ jsxRuntime.jsx(MuiMenuItem, { onClick: () => onTogglePin({ post, value: !post.pinnedAt }), children: t(post.pinnedAt ? "unpin" : "pin") }, "pin")
+        );
+      }
       if ((isAdmin || isAuthor) && !post.deletedAt) {
         items.push(
           /* @__PURE__ */ jsxRuntime.jsx(MuiMenuItem, { onClick: () => handleDelete(post), children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
@@ -2304,6 +2311,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     const render = ({ post, interactive }) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        post.pinnedAt && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "end", gap: 3, mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            component: "span",
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 0.25,
+              fontSize: 12,
+              color: red[700],
+              fontWeight: "bold",
+              bgcolor: red[50],
+              border: `1px solid ${red[100]}`,
+              borderRadius: 1,
+              px: 1.75,
+              py: 0.25
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { component: tablerPinned, sx: { fontSize: 12 } }),
+              t("pinned")
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "end", gap: 3, mt: 1 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             GithubReaction,
@@ -2370,6 +2400,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 onRate,
                 onUnrate,
                 onReply,
+                onTogglePin,
                 onLoadMoreReplies,
                 allowCopyLink: rest.allowCopyLink,
                 showProfileCard: rest.showProfileCard,
@@ -2504,6 +2535,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) {
     var _a2;
     const [state, setState] = ahooks.useSetState(getInitialState(order ? { order } : {}));
+    const comments = react.useMemo(() => state.comments.filter((item) => !item.pinnedAt), [state.comments]);
+    const pinned = react.useMemo(() => state.comments.filter((item) => item.pinnedAt), [state.comments]);
     const containerHeight = (_a2 = ahooks.useSize(containerRef)) == null ? void 0 : _a2.height;
     const commentsKeyById = react.useMemo(() => {
       return state.comments.reduce((acc, cur) => {
@@ -2533,7 +2566,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           order: state.order,
           includeReplies: flatView ? 1 : null
         });
-        const [{ data, total, nextCursor }, positionRes] = await Promise.all([
+        const [{ data, total, nextCursor }, positionRes, pinnedComments] = await Promise.all([
           api.fetchComments({
             objectId: target.id,
             limit,
@@ -2541,7 +2574,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             includeReplies: flatView ? 1 : null,
             initialRepliesLimit
           }),
-          highlightedRef.current ? fetchCommentPosition() : -1
+          highlightedRef.current ? fetchCommentPosition() : -1,
+          api.fetchPinnedComments(target.id)
         ]);
         let position = -1;
         let cursor = highlightedRef.current;
@@ -2562,7 +2596,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             initialRepliesLimit
           });
           setState({
-            comments: [...data, ...result.data],
+            comments: [...data, ...result.data, ...pinnedComments],
             nextCursor,
             total,
             initialized: true,
@@ -2575,7 +2609,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             }
           });
         } else {
-          setState({ comments: data, nextCursor, total, initialized: true });
+          setState({
+            comments: [...data, ...pinnedComments],
+            nextCursor,
+            total,
+            initialized: true
+          });
         }
       };
       init();
@@ -2680,11 +2719,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const result = await api.reply(post, content);
       setTimeout(() => add(result), 800);
     };
+    const togglePin = async ({ post, value: value2 }) => {
+      await api.togglePin({ post, value: value2 });
+      updateCommentState(post.id, (current) => ({ ...current, pinnedAt: value2 ? /* @__PURE__ */ new Date() : null }));
+    };
     const findById = (id2) => commentsKeyById[id2];
     const value = react.useMemo(
       () => ({
         target,
         state,
+        pinned,
+        comments,
         flatView,
         autoCollapse,
         allowCopyLink,
@@ -2699,6 +2744,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         updateComment,
         deleteComment,
         reply,
+        togglePin,
         loadMoreReplies,
         findById,
         renderComments,
@@ -2730,6 +2776,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       updateComment,
       deleteComment,
       reply,
+      togglePin,
       loadMoreReplies,
       api
     } = useCommentsContext();
@@ -2775,6 +2822,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               onRate: api.rate,
               onUnrate: api.unrate,
               onReply: reply,
+              onTogglePin: togglePin,
               onLoadMoreReplies: loadMoreReplies,
               autoCollapse,
               allowCopyLink,
@@ -2800,7 +2848,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function CommentList(props) {
     const { t } = context.useLocaleContext();
     const {
-      state: { comments, order, nextCursor, highlighted },
+      state: { order, nextCursor, highlighted },
+      comments,
+      pinned,
       autoCollapse,
       allowCopyLink,
       showProfileCard,
@@ -2809,6 +2859,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       updateComment,
       deleteComment,
       reply,
+      togglePin,
       loadMoreReplies,
       api,
       renderComments,
@@ -2828,6 +2879,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         onRate: api.rate,
         onUnrate: api.unrate,
         onReply: reply,
+        onTogglePin: togglePin,
         onLoadMoreReplies: loadMoreReplies,
         autoCollapse,
         allowCopyLink,
@@ -2840,7 +2892,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       },
       comment.id
     );
+    const sortedPinned = pinned.sort((a, b) => {
+      var _a2, _b2;
+      return (((_a2 = b.pinnedAt) == null ? void 0 : _a2.getTime()) ?? 0) - (((_b2 = a.pinnedAt) == null ? void 0 : _b2.getTime()) ?? 0);
+    });
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { children: sortedPinned.map((post) => renderComment(post, {})) }),
       renderComments ? renderComments({ order, comments, renderComment }) : comments == null ? void 0 : comments.map(renderComment),
       nextCursor && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -6117,7 +6174,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       mostRecent: "most recent",
       edited: "edited",
       created: "created"
-    }
+    },
+    pin: "Pin",
+    unpin: "Unpin",
+    pinned: "Pinned"
   };
   const zh = {
     cancel: "取消",
@@ -6208,7 +6268,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       mostRecent: "最近",
       edited: "编辑",
       created: "创建"
-    }
+    },
+    pin: "置顶",
+    unpin: "取消置顶",
+    pinned: "置顶"
   };
   const translations = { zh, en };
   const Lottie = Util.lazyRetry(() => import("lottie-react"));

package/dist/types.d.ts

@@ -21,6 +21,7 @@ export interface Post {
     parentId?: string;
     rootId?: string;
     synced?: number;
+    pinnedAt?: Date | null;
 }
 export interface Target {
     id: string;
@@ -65,12 +66,17 @@ export type Rating = {
 export type FetchRatings = (id: string) => Promise<Rating[]>;
 export interface CommentAPI {
     fetchComments: FetchComments;
+    fetchPinnedComments: (id: string) => Promise<Post[]>;
     fetchCommentPosition: FetchCommentPosition;
     deleteComment: DeleteComment;
     updateComment: UpdateComment;
     rate: Rate;
     unrate: Unrate;
     reply: Reply;
+    togglePin: ({ post, value }: {
+        post: Post;
+        value: boolean;
+    }) => Promise<void>;
 }
 export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
     [Property in Key]-?: Type[Property];

package/package.json

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