@blocklet/discuss-kit-ux 1.5.182 → 1.5.184

package/dist/components/blog/cover-image.d.ts

@@ -1,14 +1,17 @@
+/// <reference types="react" />
 import type { BoxProps } from '@mui/material/Box';
 interface CoverImageUploadProps extends Omit<BoxProps, 'onChange'> {
     url?: string;
     onChange: (url: string | null) => void;
 }
-export declare function CoverImage({ url, aspectRatio, width, sx, fetchpriority, loading, }: {
+export declare function CoverImage({ url, aspectRatio, width, sx, fetchpriority, loading, shadow, fallback, ...rest }: {
     url?: string;
     aspectRatio?: number;
     width?: number;
     loading?: 'lazy' | 'eager';
     fetchpriority?: 'auto' | 'low' | 'high';
+    shadow?: boolean;
+    fallback?: React.ReactNode;
 } & BoxProps): import("react/jsx-runtime").JSX.Element;
 export declare function CoverImageUpload({ url, onChange, ...rest }: CoverImageUploadProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,3 @@
 export { default as LazyEditor } from './lazy-editor';
 export type { OnChangeHandler } from './editor';
+export { EditorPreview } from './preview';

package/dist/components/editor/preview.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { BlockletEditorProps } from '@blocklet/editor';
+export interface EditorProps extends Omit<BlockletEditorProps, 'onChange' | 'ref'> {
+    content: string;
+    children?: React.ReactNode;
+}
+export declare function EditorPreview({ content, children, ...rest }: EditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/{editor-7aa2a21c.mjs → editor-d5392181.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, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-a2df4ae9.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-c2d870f7.mjs";
 import "@blocklet/labels";
 import "@mui/material/styles";
 import "@mui/material/Box";
@@ -58,7 +58,8 @@ import "@arcblock/ux/lib/Toast";
 import "@mui/material/Pagination";
 import "unstated-next";
 import "react-dom";
-import "lottie-react";
+import "js-cookie";
+import "@arcblock/ws";
 const BlockletEditor = lazy(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-a2df4ae9.mjs → index-c2d870f7.mjs}

@@ -61,7 +61,8 @@ import Toast from "@arcblock/ux/lib/Toast";
 import MuiPagination from "@mui/material/Pagination";
 import { createContainer } from "unstated-next";
 import { createPortal } from "react-dom";
-import Lottie from "lottie-react";
+import Cookie from "js-cookie";
+import { WsClient } from "@arcblock/ws";
 const themeOverrides = {
   components: {
     MuiButton: {
@@ -361,7 +362,7 @@ const useMeasure = () => {
   const size = useSize(ref);
   return [ref, size || { width: 0, height: 0 }];
 };
-const BlockletEditor$1 = lazy(() => import("@blocklet/editor"));
+const BlockletEditor$2 = lazy(() => import("@blocklet/editor"));
 const Root$5 = styled(Box)`
   position: relative;
   .be-shell {
@@ -461,7 +462,7 @@ const Input = ({
   };
   const editorState = draftKey && draftContent && !initialContent ? draftContent : inferInitialEditorState(initialContent);
   return /* @__PURE__ */ createElement(Root$5, { ref, ...rest, key: draftKey }, /* @__PURE__ */ jsx(EditorConfigProvider, { value: mergedEditorConfig, children: /* @__PURE__ */ jsxs(
-    BlockletEditor$1,
+    BlockletEditor$2,
     {
       placeholder,
       editorState,
@@ -1035,8 +1036,8 @@ function ViewMore({ children, ...rest }) {
     )
   ] });
 }
-const BlockletEditor = lazy(() => import("@blocklet/editor"));
-const StyledBlockletEditor = styled$1(BlockletEditor)`
+const BlockletEditor$1 = lazy(() => import("@blocklet/editor"));
+const StyledBlockletEditor = styled$1(BlockletEditor$1)`
   .editor-scroller {
     min-height: initial;
   }
@@ -2352,7 +2353,10 @@ function CoverImage({
   width = 320,
   sx,
   fetchpriority = "auto",
-  loading = "eager"
+  loading = "eager",
+  shadow = true,
+  fallback,
+  ...rest
 }) {
   const [loaded, setLoaded] = useState(false);
   return /* @__PURE__ */ jsxs(
@@ -2365,12 +2369,13 @@ function CoverImage({
           overflow: "hidden",
           position: "relative",
           borderRadius: 2,
-          boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px",
+          ...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)"
         },
         ...Array.isArray(sx) ? sx : [sx]
       ],
+      ...rest,
       children: [
         (!loaded || !url) && /* @__PURE__ */ jsx(
           Skeleton,
@@ -2386,7 +2391,7 @@ function CoverImage({
             }
           }
         ),
-        /* @__PURE__ */ jsx(
+        !!url && /* @__PURE__ */ jsx(
           "img",
           {
             src: url ? composeImageUrl(url, width) : "",
@@ -2405,6 +2410,19 @@ function CoverImage({
             alt: "cover",
             onLoad: () => setLoaded(true)
           }
+        ),
+        !url && /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%"
+            },
+            children: fallback
+          }
         )
       ]
     }
@@ -3113,7 +3131,7 @@ const uniqAndSort = (list, order = "asc") => {
   const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
   return sorted;
 };
-function ChatProvider({ client, activeChatId, children }) {
+function ChatProvider({ client: client2, activeChatId, children }) {
   const [state, setState] = useSetState({
     initialized: false,
     chats: [],
@@ -3149,7 +3167,7 @@ function ChatProvider({ client, activeChatId, children }) {
   };
   const updateLastAckTime = async (chatId) => {
     updateChat(chatId, (chat) => ({ ...chat, lastAckTime: chat.lastMessageAt }));
-    await client.updateLastAckTime(chatId);
+    await client2.updateLastAckTime(chatId);
   };
   const addMessage = (chatId, message) => {
     updateChat(chatId, (chat) => ({
@@ -3194,7 +3212,7 @@ function ChatProvider({ client, activeChatId, children }) {
     setActiveChat(null);
   };
   const loadMessages = async (chatId, cursor) => {
-    const { messages, nextCursor } = await client.fetchMessages(chatId, cursor);
+    const { messages, nextCursor } = await client2.fetchMessages(chatId, cursor);
     updateChat(chatId, (chat) => ({
       ...chat,
       messages: uniqAndSort([...chat.messages || [], ...messages || []]),
@@ -3202,7 +3220,7 @@ function ChatProvider({ client, activeChatId, children }) {
     }));
   };
   const sendMessage = async (chatId, content) => {
-    const saved = await client.sendMessage(chatId, content);
+    const saved = await client2.sendMessage(chatId, content);
     addMessage(chatId, saved);
     updateLastAckTime(chatId);
   };
@@ -3210,7 +3228,7 @@ function ChatProvider({ client, activeChatId, children }) {
     const {
       chat: { participants },
       messages: { messages, nextCursor }
-    } = await client.fetchChat(chatId);
+    } = await client2.fetchChat(chatId);
     updateChat(chatId, (chat) => {
       const mapped = {
         ...chat,
@@ -3223,7 +3241,7 @@ function ChatProvider({ client, activeChatId, children }) {
     });
   };
   const joinChannel = async (chatId) => {
-    await client.joinChannel(chatId);
+    await client2.joinChannel(chatId);
     updateChat(chatId, (chat) => ({
       ...chat,
       hasJoined: true
@@ -3231,17 +3249,17 @@ function ChatProvider({ client, activeChatId, children }) {
     updateLastAckTime(chatId);
   };
   const leaveChannel = async (chatId) => {
-    await client.leaveChannel(chatId);
+    await client2.leaveChannel(chatId);
     updateChat(chatId, (chat) => ({
       ...chat,
       hasJoined: false
     }));
   };
   const deleteChannel = async (chatId) => {
-    await client.deleteChannel(chatId);
+    await client2.deleteChannel(chatId);
   };
   const deleteMessage = async (chatId, messageId) => {
-    await client.deleteMessage(messageId);
+    await client2.deleteMessage(messageId);
     updateChat(chatId, (chat) => {
       var _a2;
       return {
@@ -3252,7 +3270,7 @@ function ChatProvider({ client, activeChatId, children }) {
   };
   const init = async () => {
     try {
-      const { chats } = await client.init();
+      const { chats } = await client2.init();
       setState({ initialized: true, chats });
     } catch (e) {
       console.error(e);
@@ -3260,7 +3278,7 @@ function ChatProvider({ client, activeChatId, children }) {
     }
   };
   const refresh = () => {
-    client.destroy();
+    client2.destroy();
     return init();
   };
   useEffect(() => {
@@ -3274,7 +3292,7 @@ function ChatProvider({ client, activeChatId, children }) {
         error: void 0
       });
     }
-    return () => client.destroy();
+    return () => client2.destroy();
   }, [currentUser == null ? void 0 : currentUser.did]);
   useEffect(() => {
     if (activeChatId) {
@@ -3290,16 +3308,16 @@ function ChatProvider({ client, activeChatId, children }) {
   }, [state, activeChatId]);
   useEffect(() => {
     const cancels = [
-      client.onMessage(({ chatId, message }) => {
+      client2.onMessage(({ chatId, message }) => {
         addMessage(chatId, message);
         if (isActiveChat(chatId)) {
           updateLastAckTime(chatId);
         }
       }),
-      client.onCreateChat(({ chat }) => addChat(chat)),
-      client.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
-      client.onLeaveChannel(({ chatId, participant }) => removeParticipant(chatId, participant)),
-      client.onDeleteChannel(({ chatId }) => deleteChat(chatId))
+      client2.onCreateChat(({ chat }) => addChat(chat)),
+      client2.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
+      client2.onLeaveChannel(({ chatId, participant }) => removeParticipant(chatId, participant)),
+      client2.onDeleteChannel(({ chatId }) => deleteChat(chatId))
     ];
     return () => {
       cancels.forEach((cancel) => cancel == null ? void 0 : cancel());
@@ -3313,7 +3331,7 @@ function ChatProvider({ client, activeChatId, children }) {
   const value = useMemo(() => {
     return {
       ...state,
-      client,
+      client: client2,
       setActiveChat,
       isActiveChat,
       getOppositeUser: (chat) => {
@@ -3333,7 +3351,7 @@ function ChatProvider({ client, activeChatId, children }) {
       hasUnreadMessages,
       refresh
     };
-  }, [state, client, currentUser == null ? void 0 : currentUser.did]);
+  }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
 }
 function ChatList(props) {
@@ -3884,7 +3902,7 @@ function Empty({ sx }) {
   ] });
 }
 function Chat({ sx, ...rest }) {
-  const { client, initialized, chats, activeChatId, addChat, setActiveChat, refresh } = useChatContext();
+  const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, refresh } = useChatContext();
   const [newChannelVisible, setNewChannelVisible] = useState(false);
   const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
   useEffect(() => {
@@ -3910,7 +3928,7 @@ function Chat({ sx, ...rest }) {
     ...Array.isArray(sx) ? sx : [sx]
   ];
   const handleNewChannel = async ({ name, description }) => {
-    const saved = await client.createChannel(name, description);
+    const saved = await client2.createChannel(name, description);
     const newChannel = { ...saved, hasJoined: true };
     addChat(newChannel);
     setNewChannelVisible(false);
@@ -4255,7 +4273,7 @@ function Pagination({ page, size = 20, total, onChange, routerMode = true, ...re
     }
   );
 }
-const Editor = lazy(() => import("./editor-7aa2a21c.mjs"));
+const Editor = lazy(() => import("./editor-d5392181.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -4265,6 +4283,19 @@ function LazyEditor(props) {
   ] });
   return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(Editor, { ...props }) });
 }
+const BlockletEditor = lazy(() => import("@blocklet/editor"));
+function EditorPreview({ content, children, ...rest }) {
+  const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Skeleton, {}),
+    /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+  ] });
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsxs(BlockletEditor, { editorState: inferInitialEditorState(content), editable: false, ...rest, children: [
+    /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
+    children
+  ] }) });
+}
 const useBeforeUnloadPrompt = (dirty) => {
   useEffect(() => {
     const showPrompt = (e) => {
@@ -4349,8 +4380,8 @@ const en = {
   deleted: "This comment has been deleted",
   edit: "Edit",
   empty: "Be the first to leave a comment.",
-  loadMore: "Load more",
-  readMore: "Read more",
+  loadMore: "Load More",
+  readMore: "Read More",
   saveChanges: "Save Changes",
   sendComment: "Comment",
   showMoreReplies: "Show more replies",
@@ -4418,6 +4449,7 @@ const zh = {
   }
 };
 const translations = { zh, en };
+const Lottie = lazy(() => import("lottie-react"));
 function LottieComponent({ src, ...restProps }) {
   return /* @__PURE__ */ jsx(Lottie, { animationData: src, loop: true, ...restProps });
 }
@@ -9907,8 +9939,50 @@ const boxAnimation = {
   assets,
   layers
 };
+let client;
+function create(prefix2) {
+  const pathPrefix = prefix2;
+  const url = `//${window.location.host}${pathPrefix.replace(/\/$/, "")}`;
+  return new WsClient(url, {
+    heartbeatIntervalMs: 10 * 1e3,
+    params: () => ({
+      token: Cookie.get("login_token")
+    }),
+    reconnectAfterMs: (tries) => {
+      if (Cookie.get("login_token")) {
+        return Math.floor(Math.random() * 2 ** tries * 1e3);
+      }
+      return 2 ** tries * 1e3;
+    }
+  });
+}
+function getWsClient(prefix2 = ((_c) => (_c = window.blocklet) == null ? void 0 : _c.prefix)() || "/") {
+  if (!client) {
+    client = create(prefix2);
+  }
+  return client;
+}
+const useSubscription = (event, cb = () => {
+}, deps = [], prefix2 = ((_d) => (_d = window.blocklet) == null ? void 0 : _d.prefix)() || "/") => {
+  useEffect(() => {
+    if (event) {
+      if (!client) {
+        client = getWsClient(prefix2);
+      }
+      client.on(event, cb);
+      return () => {
+        client.off(event, cb);
+      };
+    }
+    return () => {
+    };
+  }, [event, ...deps]);
+};
 const id = "point-up-component";
 const PointUpContext = createContext({});
+const WsEvents = Object.freeze({
+  POINT_UP: "point.up"
+});
 const usePointUpContext = () => useContext(PointUpContext);
 function PointUp({ points }) {
   const { t } = useLocaleContext();
@@ -9956,16 +10030,34 @@ function PointUp({ points }) {
   );
 }
 function PointUpProvider({ children }) {
-  var _a2, _b2, _c;
+  var _a2, _b2, _c, _d;
   const state = useReactive({
     pointsList: [],
     visible: false,
     currentPoints: 0
   });
-  const value = useMemo(() => {
-    const pointUp = ({ points }) => {
-      state.pointsList.push(points);
+  const { session } = useSessionContext();
+  const wsClient = getWsClient();
+  const pointUp = useCallback(({ points }) => {
+    state.pointsList.push(points);
+  }, []);
+  const pointUpComponent = (_c = (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find) == null ? void 0 : _c.call(
+    _b2,
+    (item) => item.did === "z2qa2ZST7Frp8w1XGqyw9v85u12R3mBbB2oaA"
+  );
+  const handlers = {
+    [WsEvents.POINT_UP]: (payload) => {
+      pointUp(payload);
+    }
+  };
+  useEffect(() => {
+    wsClient.connect();
+    return () => {
+      if (wsClient.isConnected())
+        ;
     };
+  }, []);
+  const value = useMemo(() => {
     return {
       pointUp
     };
@@ -9989,19 +10081,17 @@ function PointUpProvider({ children }) {
       state.visible = false;
     }
   }, [JSON.stringify(state.pointsList)]);
-  const pointUpComponent = (_c = (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find) == null ? void 0 : _c.call(
-    _b2,
-    (item) => item.did === "z2qa2ZST7Frp8w1XGqyw9v85u12R3mBbB2oaA"
-  );
+  useSubscription((_d = session == null ? void 0 : session.user) == null ? void 0 : _d.did, ({ event, data }) => {
+    var _a3;
+    return (_a3 = handlers[event]) == null ? void 0 : _a3.call(handlers, data);
+  }, []);
   return /* @__PURE__ */ jsxs(PointUpContext.Provider, { value, children: [
-    state.currentPoints > 0 && createPortal(
+    (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) && createPortal(
       /* @__PURE__ */ jsx(
         Box,
         {
           onClick: () => {
-            if (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) {
-              window.open(joinUrl(window.location.origin, pointUpComponent.mountPoint, "my"));
-            }
+            window.open(joinUrl(window.location.origin, pointUpComponent.mountPoint, "my"));
           },
           id,
           sx: {
@@ -10027,7 +10117,7 @@ function PointUpProvider({ children }) {
   ] });
 }
 export {
-  ConfirmProvider as $,
+  useConfirm as $,
   Avatar as A,
   BinaryThumb as B,
   CommentInput as C,
@@ -10045,32 +10135,37 @@ export {
   ChatClient as O,
   Pagination as P,
   Chat as Q,
-  ChatHeaderAddon as R,
+  RelativeTime as R,
   ScrollableEditorWrapper as S,
-  useChatContext as T,
-  ChatProvider as U,
-  UnreadNotificationContext as V,
-  useUnreadNotification as W,
-  UnreadNotificationProvider as X,
-  Confirm as Y,
-  ConfirmContext as Z,
-  useConfirm as _,
+  ChatHeaderAddon as T,
+  useChatContext as U,
+  ChatProvider as V,
+  UnreadNotificationContext as W,
+  useUnreadNotification as X,
+  UnreadNotificationProvider as Y,
+  Confirm as Z,
+  ConfirmContext as _,
   isEmptyContent as a,
-  SecureLabelPicker as a0,
-  useApiErrorHandler as a1,
-  useDefaultApiErrorHandler as a2,
-  PreviousLocationRecorder as a3,
-  Back as a4,
-  LazyEditor as a5,
-  DirtyPromptContainer as a6,
-  ConfirmNavigation as a7,
-  UploaderContext as a8,
-  useUploader as a9,
-  UploaderTrigger as aa,
-  UploaderProvider as ab,
-  composeImageUrl as ac,
-  usePointUpContext as ad,
-  PointUpProvider as ae,
+  ConfirmProvider as a0,
+  SecureLabelPicker as a1,
+  useApiErrorHandler as a2,
+  useDefaultApiErrorHandler as a3,
+  PreviousLocationRecorder as a4,
+  Back as a5,
+  LazyEditor as a6,
+  EditorPreview as a7,
+  DirtyPromptContainer as a8,
+  ConfirmNavigation as a9,
+  UploaderContext as aa,
+  useUploader as ab,
+  UploaderTrigger as ac,
+  UploaderProvider as ad,
+  composeImageUrl as ae,
+  usePointUpContext as af,
+  PointUpProvider as ag,
+  create as ah,
+  getWsClient as ai,
+  useSubscription as aj,
   InternalThemeProvider as b,
   Input as c,
   translations as d,

package/dist/index.d.ts

@@ -23,3 +23,5 @@ export * as routes from './components/routes';
 export { default as preferences } from './preferences';
 export * from './components/uploader';
 export * from './components/point-up';
+export * from './ws';
+export { default as RelativeTime } from './components/shared/relative-time';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { K, j, N, A, h, a4, B, z, y, E, Q, O, R, U, o, C, q, v, x, Y, Z, a7, $, H, J, D, a6, G, c, b, a5, M, P, ae, n, m, a3, S, a0, k, V, X, a8, ab, aa, ac, F, l, p, r, t, d, a1, L, e, T, w, _, a2, u, ad, W, a9, f } from "./index-a2df4ae9.mjs";
+import { K, j, N, A, h, a5, B, z, y, E, Q, O, T, V, o, C, q, v, x, Z, _, a9, a0, H, J, D, a8, a7, G, c, b, a6, M, P, ag, n, m, a4, R, S, a1, k, W, Y, aa, ad, ac, ae, ah, F, ai, l, p, r, t, d, a2, L, e, U, w, $, a3, u, af, aj, X, ab, f } from "./index-c2d870f7.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";
@@ -55,70 +55,76 @@ import "@arcblock/ux/lib/Toast";
 import "@mui/material/Pagination";
 import "unstated-next";
 import "react-dom";
-import "lottie-react";
+import "js-cookie";
+import "@arcblock/ws";
 export {
   K as AccessControl,
   j as AuthorInfo,
   N as AuthzProvider,
   A as Avatar,
   h as Avatars,
-  a4 as Back,
+  a5 as Back,
   B as BinaryThumb,
   z as BlogCard,
   y as BlogList,
   E as BlogPermaLink,
   Q as Chat,
   O as ChatClient,
-  R as ChatHeaderAddon,
-  U as ChatProvider,
+  T as ChatHeaderAddon,
+  V as ChatProvider,
   o as Comment,
   C as CommentInput,
   q as CommentList,
   v as CommentsContext,
   x as CommentsProvider,
-  Y as Confirm,
-  Z as ConfirmContext,
-  a7 as ConfirmNavigation,
-  $ as ConfirmProvider,
+  Z as Confirm,
+  _ as ConfirmContext,
+  a9 as ConfirmNavigation,
+  a0 as ConfirmProvider,
   H as CoverImage,
   J as CoverImageUpload,
   D as DefaultEditorConfigProvider,
-  a6 as DirtyPromptContainer,
+  a8 as DirtyPromptContainer,
+  a7 as EditorPreview,
   G as GithubReaction,
   c as Input,
   b as InternalThemeProvider,
-  a5 as LazyEditor,
+  a6 as LazyEditor,
   M as Menu,
   P as Pagination,
-  ae as PointUpProvider,
+  ag as PointUpProvider,
   n as Post,
   m as PostContent,
-  a3 as PreviousLocationRecorder,
+  a4 as PreviousLocationRecorder,
+  R as RelativeTime,
   S as ScrollableEditorWrapper,
-  a0 as SecureLabelPicker,
+  a1 as SecureLabelPicker,
   k as SystemUser,
-  V as UnreadNotificationContext,
-  X as UnreadNotificationProvider,
-  a8 as UploaderContext,
-  ab as UploaderProvider,
-  aa as UploaderTrigger,
-  ac as composeImageUrl,
+  W as UnreadNotificationContext,
+  Y as UnreadNotificationProvider,
+  aa as UploaderContext,
+  ad as UploaderProvider,
+  ac as UploaderTrigger,
+  ae as composeImageUrl,
+  ah as create,
   F as getBlogLink,
+  ai as getWsClient,
   l as lexicalUtils,
   p as preferences,
   r as routes,
   t as themeOverrides,
   d as translations,
-  a1 as useApiErrorHandler,
+  a2 as useApiErrorHandler,
   L as useAuthzContext,
   e as useChanged,
-  T as useChatContext,
+  U as useChatContext,
   w as useCommentsContext,
-  _ as useConfirm,
-  a2 as useDefaultApiErrorHandler,
+  $ as useConfirm,
+  a3 as useDefaultApiErrorHandler,
   u as useNow,
-  ad as usePointUpContext,
-  W as useUnreadNotification,
-  a9 as useUploader,
+  af as usePointUpContext,
+  aj as useSubscription,
+  X as useUnreadNotification,
+  ab as useUploader,
   f as utils
 };

package/dist/index.umd.js

@@ -5,8 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("react"), require("@mui/material/Box"), require("@arcblock/ux/lib/Theme"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/useMediaQuery"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/Tooltip"), 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("@iconify/react"), require("react-router-dom"), require("@mui/material/colors"), require("@arcblock/did-connect/lib/Session"), require("@mui/material"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("url-join"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("mitt"), require("@mui/material/CircularProgress"), require("@mui/material/Fab"), require("lodash/debounce"), require("@mui/material/TextField"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("react-dom"), require("lottie-react"), 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")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "react", "@mui/material/Box", "@arcblock/ux/lib/Theme", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/useMediaQuery", "@arcblock/did-connect/lib/Address", "@mui/material/Tooltip", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@iconify/react", "react-router-dom", "@mui/material/colors", "@arcblock/did-connect/lib/Session", "@mui/material", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "url-join", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "@mui/material/Fab", "lodash/debounce", "@mui/material/TextField", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "react-dom", "lottie-react", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.react, global.Box, global.Theme, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.Button, global.DidAvatar, global.useMediaQuery, global.DIDAddress, global.Tooltip, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.react$1, global.reactRouterDom, global.colors, global.Session, global.material, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.joinUrl, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.Fab, global.debounce, global.TextField, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.reactDom, global.Lottie, global.OnContentChangePlugin, global.ShortcutPlugin, global.SafeAreaPlugin, global.text, global.ImageNode));
-})(this, function(exports2, labels, jsxRuntime, styles, react, Box, Theme, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, Button, DidAvatar, useMediaQuery, DIDAddress, Tooltip, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, react$1, reactRouterDom, colors, Session, material, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, dayjs, relativeTime, mitt, CircularProgress, Fab, debounce, TextField, axios, Toast, MuiPagination, unstatedNext, reactDom, Lottie, OnContentChangePlugin, ShortcutPlugin, SafeAreaPlugin, text, ImageNode) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("react"), require("@mui/material/Box"), require("@arcblock/ux/lib/Theme"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/useMediaQuery"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/Tooltip"), 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("@iconify/react"), require("react-router-dom"), require("@mui/material/colors"), require("@arcblock/did-connect/lib/Session"), require("@mui/material"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("url-join"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("mitt"), require("@mui/material/CircularProgress"), require("@mui/material/Fab"), require("lodash/debounce"), require("@mui/material/TextField"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("react-dom"), require("js-cookie"), require("@arcblock/ws"), 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")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "react", "@mui/material/Box", "@arcblock/ux/lib/Theme", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/useMediaQuery", "@arcblock/did-connect/lib/Address", "@mui/material/Tooltip", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@iconify/react", "react-router-dom", "@mui/material/colors", "@arcblock/did-connect/lib/Session", "@mui/material", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "url-join", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "@mui/material/Fab", "lodash/debounce", "@mui/material/TextField", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "react-dom", "js-cookie", "@arcblock/ws", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.react, global.Box, global.Theme, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.Button, global.DidAvatar, global.useMediaQuery, global.DIDAddress, global.Tooltip, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.react$1, global.reactRouterDom, global.colors, global.Session, global.material, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.joinUrl, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.Fab, global.debounce, global.TextField, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.reactDom, global.Cookie, global.ws, global.OnContentChangePlugin, global.ShortcutPlugin, global.SafeAreaPlugin, global.text, global.ImageNode));
+})(this, function(exports2, labels, jsxRuntime, styles, react, Box, Theme, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, Button, DidAvatar, useMediaQuery, DIDAddress, Tooltip, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, react$1, reactRouterDom, colors, Session, material, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, dayjs, relativeTime, mitt, CircularProgress, Fab, debounce, TextField, axios, Toast, MuiPagination, unstatedNext, reactDom, Cookie, ws, OnContentChangePlugin, ShortcutPlugin, SafeAreaPlugin, text, ImageNode) {
   var _a, _b;
   "use strict";
   const themeOverrides = {
@@ -308,7 +308,7 @@ var __publicField = (obj, key, value) => {
     const size = ahooks.useSize(ref);
     return [ref, size || { width: 0, height: 0 }];
   };
-  const BlockletEditor$2 = react.lazy(() => import("@blocklet/editor"));
+  const BlockletEditor$3 = react.lazy(() => import("@blocklet/editor"));
   const Root$6 = Theme.styled(Box)`
   position: relative;
   .be-shell {
@@ -408,7 +408,7 @@ var __publicField = (obj, key, value) => {
     };
     const editorState = draftKey && draftContent && !initialContent ? draftContent : inferInitialEditorState(initialContent);
     return /* @__PURE__ */ react.createElement(Root$6, { ref, ...rest, key: draftKey }, /* @__PURE__ */ jsxRuntime.jsx(config.EditorConfigProvider, { value: mergedEditorConfig, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      BlockletEditor$2,
+      BlockletEditor$3,
       {
         placeholder,
         editorState,
@@ -982,8 +982,8 @@ var __publicField = (obj, key, value) => {
       )
     ] });
   }
-  const BlockletEditor$1 = react.lazy(() => import("@blocklet/editor"));
-  const StyledBlockletEditor = styles.styled(BlockletEditor$1)`
+  const BlockletEditor$2 = react.lazy(() => import("@blocklet/editor"));
+  const StyledBlockletEditor = styles.styled(BlockletEditor$2)`
   .editor-scroller {
     min-height: initial;
   }
@@ -2299,7 +2299,10 @@ var __publicField = (obj, key, value) => {
     width = 320,
     sx,
     fetchpriority = "auto",
-    loading = "eager"
+    loading = "eager",
+    shadow = true,
+    fallback,
+    ...rest
   }) {
     const [loaded, setLoaded] = react.useState(false);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2312,12 +2315,13 @@ var __publicField = (obj, key, value) => {
             overflow: "hidden",
             position: "relative",
             borderRadius: 2,
-            boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px",
+            ...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)"
           },
           ...Array.isArray(sx) ? sx : [sx]
         ],
+        ...rest,
         children: [
           (!loaded || !url) && /* @__PURE__ */ jsxRuntime.jsx(
             material.Skeleton,
@@ -2333,7 +2337,7 @@ var __publicField = (obj, key, value) => {
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !!url && /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
               src: url ? composeImageUrl(url, width) : "",
@@ -2352,6 +2356,19 @@ var __publicField = (obj, key, value) => {
               alt: "cover",
               onLoad: () => setLoaded(true)
             }
+          ),
+          !url && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%"
+              },
+              children: fallback
+            }
           )
         ]
       }
@@ -3060,7 +3077,7 @@ var __publicField = (obj, key, value) => {
     const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
     return sorted;
   };
-  function ChatProvider({ client, activeChatId, children }) {
+  function ChatProvider({ client: client2, activeChatId, children }) {
     const [state, setState] = ahooks.useSetState({
       initialized: false,
       chats: [],
@@ -3096,7 +3113,7 @@ var __publicField = (obj, key, value) => {
     };
     const updateLastAckTime = async (chatId) => {
       updateChat(chatId, (chat) => ({ ...chat, lastAckTime: chat.lastMessageAt }));
-      await client.updateLastAckTime(chatId);
+      await client2.updateLastAckTime(chatId);
     };
     const addMessage = (chatId, message) => {
       updateChat(chatId, (chat) => ({
@@ -3141,7 +3158,7 @@ var __publicField = (obj, key, value) => {
       setActiveChat(null);
     };
     const loadMessages = async (chatId, cursor) => {
-      const { messages, nextCursor } = await client.fetchMessages(chatId, cursor);
+      const { messages, nextCursor } = await client2.fetchMessages(chatId, cursor);
       updateChat(chatId, (chat) => ({
         ...chat,
         messages: uniqAndSort([...chat.messages || [], ...messages || []]),
@@ -3149,7 +3166,7 @@ var __publicField = (obj, key, value) => {
       }));
     };
     const sendMessage = async (chatId, content) => {
-      const saved = await client.sendMessage(chatId, content);
+      const saved = await client2.sendMessage(chatId, content);
       addMessage(chatId, saved);
       updateLastAckTime(chatId);
     };
@@ -3157,7 +3174,7 @@ var __publicField = (obj, key, value) => {
       const {
         chat: { participants },
         messages: { messages, nextCursor }
-      } = await client.fetchChat(chatId);
+      } = await client2.fetchChat(chatId);
       updateChat(chatId, (chat) => {
         const mapped = {
           ...chat,
@@ -3170,7 +3187,7 @@ var __publicField = (obj, key, value) => {
       });
     };
     const joinChannel = async (chatId) => {
-      await client.joinChannel(chatId);
+      await client2.joinChannel(chatId);
       updateChat(chatId, (chat) => ({
         ...chat,
         hasJoined: true
@@ -3178,17 +3195,17 @@ var __publicField = (obj, key, value) => {
       updateLastAckTime(chatId);
     };
     const leaveChannel = async (chatId) => {
-      await client.leaveChannel(chatId);
+      await client2.leaveChannel(chatId);
       updateChat(chatId, (chat) => ({
         ...chat,
         hasJoined: false
       }));
     };
     const deleteChannel = async (chatId) => {
-      await client.deleteChannel(chatId);
+      await client2.deleteChannel(chatId);
     };
     const deleteMessage = async (chatId, messageId) => {
-      await client.deleteMessage(messageId);
+      await client2.deleteMessage(messageId);
       updateChat(chatId, (chat) => {
         var _a2;
         return {
@@ -3199,7 +3216,7 @@ var __publicField = (obj, key, value) => {
     };
     const init = async () => {
       try {
-        const { chats } = await client.init();
+        const { chats } = await client2.init();
         setState({ initialized: true, chats });
       } catch (e) {
         console.error(e);
@@ -3207,7 +3224,7 @@ var __publicField = (obj, key, value) => {
       }
     };
     const refresh = () => {
-      client.destroy();
+      client2.destroy();
       return init();
     };
     react.useEffect(() => {
@@ -3221,7 +3238,7 @@ var __publicField = (obj, key, value) => {
           error: void 0
         });
       }
-      return () => client.destroy();
+      return () => client2.destroy();
     }, [currentUser == null ? void 0 : currentUser.did]);
     react.useEffect(() => {
       if (activeChatId) {
@@ -3237,16 +3254,16 @@ var __publicField = (obj, key, value) => {
     }, [state, activeChatId]);
     react.useEffect(() => {
       const cancels = [
-        client.onMessage(({ chatId, message }) => {
+        client2.onMessage(({ chatId, message }) => {
           addMessage(chatId, message);
           if (isActiveChat(chatId)) {
             updateLastAckTime(chatId);
           }
         }),
-        client.onCreateChat(({ chat }) => addChat(chat)),
-        client.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
-        client.onLeaveChannel(({ chatId, participant }) => removeParticipant(chatId, participant)),
-        client.onDeleteChannel(({ chatId }) => deleteChat(chatId))
+        client2.onCreateChat(({ chat }) => addChat(chat)),
+        client2.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
+        client2.onLeaveChannel(({ chatId, participant }) => removeParticipant(chatId, participant)),
+        client2.onDeleteChannel(({ chatId }) => deleteChat(chatId))
       ];
       return () => {
         cancels.forEach((cancel) => cancel == null ? void 0 : cancel());
@@ -3260,7 +3277,7 @@ var __publicField = (obj, key, value) => {
     const value = react.useMemo(() => {
       return {
         ...state,
-        client,
+        client: client2,
         setActiveChat,
         isActiveChat,
         getOppositeUser: (chat) => {
@@ -3280,7 +3297,7 @@ var __publicField = (obj, key, value) => {
         hasUnreadMessages,
         refresh
       };
-    }, [state, client, currentUser == null ? void 0 : currentUser.did]);
+    }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value, children });
   }
   function ChatList(props) {
@@ -3831,7 +3848,7 @@ var __publicField = (obj, key, value) => {
     ] });
   }
   function Chat({ sx, ...rest }) {
-    const { client, initialized, chats, activeChatId, addChat, setActiveChat, refresh } = useChatContext();
+    const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, refresh } = useChatContext();
     const [newChannelVisible, setNewChannelVisible] = react.useState(false);
     const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
     react.useEffect(() => {
@@ -3857,7 +3874,7 @@ var __publicField = (obj, key, value) => {
       ...Array.isArray(sx) ? sx : [sx]
     ];
     const handleNewChannel = async ({ name, description }) => {
-      const saved = await client.createChannel(name, description);
+      const saved = await client2.createChannel(name, description);
       const newChannel = { ...saved, hasJoined: true };
       addChat(newChannel);
       setNewChannelVisible(false);
@@ -4212,6 +4229,19 @@ var __publicField = (obj, key, value) => {
     ] });
     return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback, children: /* @__PURE__ */ jsxRuntime.jsx(Editor$1, { ...props }) });
   }
+  const BlockletEditor$1 = react.lazy(() => import("@blocklet/editor"));
+  function EditorPreview({ content, children, ...rest }) {
+    const fallback = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "80%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "60%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "40%" })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback, children: /* @__PURE__ */ jsxRuntime.jsxs(BlockletEditor$1, { editorState: inferInitialEditorState(content), editable: false, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ImagePathFixerPlugin, {}),
+      children
+    ] }) });
+  }
   const useBeforeUnloadPrompt = (dirty) => {
     react.useEffect(() => {
       const showPrompt = (e) => {
@@ -4296,8 +4326,8 @@ var __publicField = (obj, key, value) => {
     deleted: "This comment has been deleted",
     edit: "Edit",
     empty: "Be the first to leave a comment.",
-    loadMore: "Load more",
-    readMore: "Read more",
+    loadMore: "Load More",
+    readMore: "Read More",
     saveChanges: "Save Changes",
     sendComment: "Comment",
     showMoreReplies: "Show more replies",
@@ -4365,6 +4395,7 @@ var __publicField = (obj, key, value) => {
     }
   };
   const translations = { zh, en };
+  const Lottie = react.lazy(() => import("lottie-react"));
   function LottieComponent({ src, ...restProps }) {
     return /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: src, loop: true, ...restProps });
   }
@@ -9854,8 +9885,50 @@ var __publicField = (obj, key, value) => {
     assets,
     layers
   };
+  let client;
+  function create(prefix2) {
+    const pathPrefix = prefix2;
+    const url = `//${window.location.host}${pathPrefix.replace(/\/$/, "")}`;
+    return new ws.WsClient(url, {
+      heartbeatIntervalMs: 10 * 1e3,
+      params: () => ({
+        token: Cookie.get("login_token")
+      }),
+      reconnectAfterMs: (tries) => {
+        if (Cookie.get("login_token")) {
+          return Math.floor(Math.random() * 2 ** tries * 1e3);
+        }
+        return 2 ** tries * 1e3;
+      }
+    });
+  }
+  function getWsClient(prefix2 = ((_c) => (_c = window.blocklet) == null ? void 0 : _c.prefix)() || "/") {
+    if (!client) {
+      client = create(prefix2);
+    }
+    return client;
+  }
+  const useSubscription = (event, cb = () => {
+  }, deps = [], prefix2 = ((_d) => (_d = window.blocklet) == null ? void 0 : _d.prefix)() || "/") => {
+    react.useEffect(() => {
+      if (event) {
+        if (!client) {
+          client = getWsClient(prefix2);
+        }
+        client.on(event, cb);
+        return () => {
+          client.off(event, cb);
+        };
+      }
+      return () => {
+      };
+    }, [event, ...deps]);
+  };
   const id = "point-up-component";
   const PointUpContext = react.createContext({});
+  const WsEvents = Object.freeze({
+    POINT_UP: "point.up"
+  });
   const usePointUpContext = () => react.useContext(PointUpContext);
   function PointUp({ points }) {
     const { t } = context.useLocaleContext();
@@ -9903,16 +9976,34 @@ var __publicField = (obj, key, value) => {
     );
   }
   function PointUpProvider({ children }) {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c, _d;
     const state = ahooks.useReactive({
       pointsList: [],
       visible: false,
       currentPoints: 0
     });
-    const value = react.useMemo(() => {
-      const pointUp = ({ points }) => {
-        state.pointsList.push(points);
+    const { session } = useSessionContext();
+    const wsClient = getWsClient();
+    const pointUp = react.useCallback(({ points }) => {
+      state.pointsList.push(points);
+    }, []);
+    const pointUpComponent = (_c = (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find) == null ? void 0 : _c.call(
+      _b2,
+      (item) => item.did === "z2qa2ZST7Frp8w1XGqyw9v85u12R3mBbB2oaA"
+    );
+    const handlers = {
+      [WsEvents.POINT_UP]: (payload) => {
+        pointUp(payload);
+      }
+    };
+    react.useEffect(() => {
+      wsClient.connect();
+      return () => {
+        if (wsClient.isConnected())
+          ;
       };
+    }, []);
+    const value = react.useMemo(() => {
       return {
         pointUp
       };
@@ -9936,19 +10027,17 @@ var __publicField = (obj, key, value) => {
         state.visible = false;
       }
     }, [JSON.stringify(state.pointsList)]);
-    const pointUpComponent = (_c = (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find) == null ? void 0 : _c.call(
-      _b2,
-      (item) => item.did === "z2qa2ZST7Frp8w1XGqyw9v85u12R3mBbB2oaA"
-    );
+    useSubscription((_d = session == null ? void 0 : session.user) == null ? void 0 : _d.did, ({ event, data }) => {
+      var _a3;
+      return (_a3 = handlers[event]) == null ? void 0 : _a3.call(handlers, data);
+    }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(PointUpContext.Provider, { value, children: [
-      state.currentPoints > 0 && reactDom.createPortal(
+      (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) && reactDom.createPortal(
         /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
             onClick: () => {
-              if (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) {
-                window.open(joinUrl(window.location.origin, pointUpComponent.mountPoint, "my"));
-              }
+              window.open(joinUrl(window.location.origin, pointUpComponent.mountPoint, "my"));
             },
             id,
             sx: {
@@ -10030,6 +10119,7 @@ var __publicField = (obj, key, value) => {
   exports2.CoverImageUpload = CoverImageUpload;
   exports2.DefaultEditorConfigProvider = DefaultEditorConfigProvider;
   exports2.DirtyPromptContainer = DirtyPromptContainer;
+  exports2.EditorPreview = EditorPreview;
   exports2.GithubReaction = GithubReaction;
   exports2.Input = Input;
   exports2.InternalThemeProvider = InternalThemeProvider;
@@ -10040,6 +10130,7 @@ var __publicField = (obj, key, value) => {
   exports2.Post = PostComponent;
   exports2.PostContent = PostContent;
   exports2.PreviousLocationRecorder = PreviousLocationRecorder;
+  exports2.RelativeTime = RelativeTime;
   exports2.ScrollableEditorWrapper = ScrollableEditorWrapper;
   exports2.SecureLabelPicker = SecureLabelPicker;
   exports2.SystemUser = SystemUser;
@@ -10049,7 +10140,9 @@ var __publicField = (obj, key, value) => {
   exports2.UploaderProvider = UploaderProvider;
   exports2.UploaderTrigger = UploaderTrigger;
   exports2.composeImageUrl = composeImageUrl;
+  exports2.create = create;
   exports2.getBlogLink = getBlogLink;
+  exports2.getWsClient = getWsClient;
   exports2.lexicalUtils = lexical;
   exports2.preferences = preferences;
   exports2.routes = routes;
@@ -10064,6 +10157,7 @@ var __publicField = (obj, key, value) => {
   exports2.useDefaultApiErrorHandler = useDefaultApiErrorHandler;
   exports2.useNow = useNow;
   exports2.usePointUpContext = usePointUpContext;
+  exports2.useSubscription = useSubscription;
   exports2.useUnreadNotification = useUnreadNotification;
   exports2.useUploader = useUploader;
   exports2.utils = utils;

package/dist/preferences.d.ts

@@ -29,5 +29,9 @@ declare const preferences: {
     socialShareButtonsDiscussion: boolean;
     socialShareButtonsBlog: boolean;
     socialShareButtonsDoc: boolean;
+    blogListTemplate: "standard" | "corp";
+    blogTemplate: "standard" | "corp";
+    blogListTemplatePrimaryColor: string;
+    blogListTemplateAccentColor: string;
 };
 export default preferences;

package/dist/ws.d.ts

@@ -0,0 +1,3 @@
+export declare function create(prefix: string): any;
+export declare function getWsClient(prefix?: string): any;
+export declare const useSubscription: (event: string, cb?: () => void, deps?: never[], prefix?: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.5.182",
+  "version": "1.5.184",
   "files": [
     "dist"
   ],
@@ -28,8 +28,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@blocklet/editor": "1.5.182",
-    "@blocklet/labels": "1.5.182",
+    "@arcblock/ws": "^1.18.95",
+    "@blocklet/editor": "1.5.184",
+    "@blocklet/labels": "1.5.184",
     "@blocklet/uploader": "^0.0.42",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -40,6 +41,7 @@
     "ahooks": "^3.7.8",
     "axios": "^0.27.2",
     "dayjs": "^1.11.7",
+    "js-cookie": "^3.0.5",
     "lexical": "^0.12.0",
     "lottie-react": "^2.4.0",
     "mitt": "^3.0.0",
@@ -91,5 +93,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "a23964ec273fe5a9c15733b31bfdbf7b0df72fe5"
+  "gitHead": "498f8ec6f32d91ad8a0cf12c7bf863066dc4ec63"
 }