@blocklet/discuss-kit-ux 1.6.63 → 1.6.64

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Post, Target, CommentAPI } from '../../../types';
 type Order = 'asc' | 'desc';
 interface CommentsProviderProps {
@@ -12,6 +12,7 @@ interface CommentsProviderProps {
     allowCopyLink?: boolean;
     showProfileCard?: boolean;
     interactive?: boolean;
+    containerRef: React.RefObject<HTMLDivElement>;
 }
 interface State {
     comments: Post[];
@@ -49,7 +50,7 @@ interface CommentsContextValue {
     reply: CommentAPI['reply'];
     findById: (id: string) => Post | undefined;
 }
-export declare const CommentsContext: import("react").Context<CommentsContextValue>;
+export declare const CommentsContext: React.Context<CommentsContextValue>;
 export declare const useCommentsContext: () => CommentsContextValue;
-export declare function CommentsProvider({ target, api, flatView, children, order, autoLoadComments, autoCollapse, allowCopyLink, showProfileCard, interactive, }: CommentsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommentsProvider({ target, api, flatView, children, order, autoLoadComments, autoCollapse, allowCopyLink, showProfileCard, interactive, containerRef, }: CommentsProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{editor-EfzFR9YD.mjs → editor-XEL58tBE.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-NFPPoDc-.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-GBSsS-kJ.mjs";
 import "@blocklet/labels";
 import "@mui/material/styles";
 import "@mui/material/Box";

package/dist/{index-NFPPoDc-.mjs → index-GBSsS-kJ.mjs}

@@ -19,7 +19,7 @@ import joinUrl from "url-join";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
-import { useSize, useSetState, useGetState, useReactive } from "ahooks";
+import { useSize, useInViewport, useSetState, useGetState, useReactive } from "ahooks";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, AddReactionOutlined, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add } from "@mui/icons-material";
 import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
@@ -1296,9 +1296,12 @@ function PostComponent({
   var _a2;
   const { session, isAdmin } = useSessionContext();
   const isAuthor = post.author.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
+  const commentUrl = window.location.hash.substring(1);
   const { t } = useLocaleContext();
   const [editing, setEditing] = useState(false);
   const postContext = { isAdmin, isAuthor, interactive, post };
+  const [inViewport] = useInViewport(() => document == null ? void 0 : document.getElementById(post.id));
+  const [hasEnteredViewport, setHasEnteredViewport] = useState(false);
   let menuItems = [];
   if (isAuthor && !post.deletedAt) {
     menuItems.push(
@@ -1319,7 +1322,7 @@ function PostComponent({
       )
     );
   }
-  const isTargetPost = window.location.hash.substring(1) === post.id;
+  const isTargetPost = commentUrl === post.id;
   menuItems = customMenu ? customMenu(menuItems, postContext) : menuItems;
   const renderTime = () => {
     if (allowCopyLink) {
@@ -1334,8 +1337,13 @@ function PostComponent({
     systemTip = t("emptyContent");
   }
   const showSystemTip = systemTip && !editing;
+  useEffect(() => {
+    if (inViewport) {
+      setHasEnteredViewport(inViewport);
+    }
+  }, [inViewport]);
   return /* @__PURE__ */ jsxs(Root$1, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
-    /* @__PURE__ */ jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost }), children: [
+    /* @__PURE__ */ jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
       /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
         /* @__PURE__ */ jsx(AuthorInfo, { user: post.author, createdAt: renderTime(), showProfileCard }),
         /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
@@ -2036,8 +2044,10 @@ const uniqAndSort$1 = (list, order) => {
   const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
   return sorted;
 };
-const useAutoScroll = (data) => {
+const useAutoScroll = (data, containerHeight) => {
   const highlightedRef = useRef(window.location.hash.substring(1));
+  const lastHeightRef = useRef(containerHeight);
+  const autoScrolledRef = useRef(false);
   const matchTargetedPost = (posts) => {
     return posts.some((item) => {
       var _a2;
@@ -2050,13 +2060,33 @@ const useAutoScroll = (data) => {
       return false;
     });
   };
+  const stableHeight = () => {
+    if (lastHeightRef.current === containerHeight) {
+      return true;
+    }
+    lastHeightRef.current = containerHeight;
+    return false;
+  };
   useEffect(() => {
-    var _a2;
-    if (highlightedRef.current && matchTargetedPost(data)) {
-      (_a2 = document.getElementById(highlightedRef.current)) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "center" });
-      highlightedRef.current = null;
+    let interval;
+    if (containerHeight && !autoScrolledRef.current) {
+      interval = window.setInterval(() => {
+        if (stableHeight()) {
+          clearInterval(interval);
+          if (highlightedRef.current && matchTargetedPost(data)) {
+            const element = document.getElementById(highlightedRef.current);
+            element == null ? void 0 : element.scrollIntoView({ behavior: "smooth", block: "center" });
+            autoScrolledRef.current = true;
+          }
+        }
+      }, 200);
     }
-  }, [data]);
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [containerHeight]);
 };
 const CommentsContext = createContext({});
 const useCommentsContext = () => useContext(CommentsContext);
@@ -2070,14 +2100,17 @@ function CommentsProvider({
   autoCollapse,
   allowCopyLink,
   showProfileCard,
-  interactive
+  interactive,
+  containerRef
 }) {
+  var _a2;
   const [state, setState] = useSetState(getInitialState(order ? { order } : {}));
+  const containerHeight = (_a2 = useSize(containerRef)) == null ? void 0 : _a2.height;
   const commentsKeyById = useMemo(() => {
     return state.comments.reduce((acc, cur) => {
-      var _a2;
+      var _a3;
       acc[cur.id] = cur;
-      if ((_a2 = cur.replies) == null ? void 0 : _a2.length) {
+      if ((_a3 = cur.replies) == null ? void 0 : _a3.length) {
         cur.replies.forEach((item) => {
           acc[item.id] = item;
         });
@@ -2148,12 +2181,12 @@ function CommentsProvider({
     };
     init();
   }, [target.id, state.order, setState]);
-  useAutoScroll(state.comments);
+  useAutoScroll(state.comments, containerHeight);
   const updateCommentState = (id2, mapper) => {
-    var _a2;
+    var _a3;
     const comment = commentsKeyById[id2];
     const root = commentsKeyById[comment.rootId];
-    if ((_a2 = root == null ? void 0 : root.replies) == null ? void 0 : _a2.length) {
+    if ((_a3 = root == null ? void 0 : root.replies) == null ? void 0 : _a3.length) {
       root.replies = root.replies.map((item) => item.id === id2 ? mapper(item) : item);
       updateCommentState(root.id, (current) => ({ ...current }));
     } else {
@@ -2189,10 +2222,10 @@ function CommentsProvider({
     setState({ comments: sorted, total, highlighted: { ...state.highlighted, nextCursor } });
   };
   const loadMoreReplies = async (rootId) => {
-    var _a2;
+    var _a3;
     const root = commentsKeyById[rootId];
     if (root.replies) {
-      const cursor = state.replyCursors[root.id] || ((_a2 = getLastItem(root.replies)) == null ? void 0 : _a2.id);
+      const cursor = state.replyCursors[root.id] || ((_a3 = getLastItem(root.replies)) == null ? void 0 : _a3.id);
       const { data, total, nextCursor } = await api.fetchComments({
         objectId: target.id,
         rootId,
@@ -2214,14 +2247,14 @@ function CommentsProvider({
     localStorage.setItem(KEY_LS_ORDER, order2);
   };
   const add = (post) => {
-    var _a2;
+    var _a3;
     if (flatView || !post.rootId) {
       setState({ comments: uniqAndSort$1([...state.comments, post], state.order) });
     } else {
       const root = commentsKeyById[post.rootId];
       if (root) {
         if (!state.replyCursors[root.id] && root.replies) {
-          state.replyCursors[root.id] = (_a2 = getLastItem(root.replies)) == null ? void 0 : _a2.id;
+          state.replyCursors[root.id] = (_a3 = getLastItem(root.replies)) == null ? void 0 : _a3.id;
         }
         const sorted = uniqAndSort$1([...root.replies || [], post], "asc");
         updateCommentState(post.rootId, (current) => ({
@@ -4461,7 +4494,7 @@ function Pagination({ page, size = 20, total, onChange, routerMode = true, ...re
     }
   );
 }
-const Editor = lazy(() => import("./editor-EfzFR9YD.mjs"));
+const Editor = lazy(() => import("./editor-XEL58tBE.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),

package/dist/index.es.js

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

package/dist/index.umd.js

@@ -1236,9 +1236,12 @@ var __publicField = (obj, key, value) => {
     var _a2;
     const { session, isAdmin } = useSessionContext();
     const isAuthor = post.author.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
+    const commentUrl = window.location.hash.substring(1);
     const { t } = context.useLocaleContext();
     const [editing, setEditing] = react.useState(false);
     const postContext = { isAdmin, isAuthor, interactive, post };
+    const [inViewport] = ahooks.useInViewport(() => document == null ? void 0 : document.getElementById(post.id));
+    const [hasEnteredViewport, setHasEnteredViewport] = react.useState(false);
     let menuItems = [];
     if (isAuthor && !post.deletedAt) {
       menuItems.push(
@@ -1259,7 +1262,7 @@ var __publicField = (obj, key, value) => {
         )
       );
     }
-    const isTargetPost = window.location.hash.substring(1) === post.id;
+    const isTargetPost = commentUrl === post.id;
     menuItems = customMenu ? customMenu(menuItems, postContext) : menuItems;
     const renderTime = () => {
       if (allowCopyLink) {
@@ -1274,8 +1277,13 @@ var __publicField = (obj, key, value) => {
       systemTip = t("emptyContent");
     }
     const showSystemTip = systemTip && !editing;
+    react.useEffect(() => {
+      if (inViewport) {
+        setHasEnteredViewport(inViewport);
+      }
+    }, [inViewport]);
     return /* @__PURE__ */ jsxRuntime.jsxs(Root$2, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost }), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
           /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: post.author, createdAt: renderTime(), showProfileCard }),
           /* @__PURE__ */ jsxRuntime.jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
@@ -1976,8 +1984,10 @@ var __publicField = (obj, key, value) => {
     const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
     return sorted;
   };
-  const useAutoScroll = (data) => {
+  const useAutoScroll = (data, containerHeight) => {
     const highlightedRef = react.useRef(window.location.hash.substring(1));
+    const lastHeightRef = react.useRef(containerHeight);
+    const autoScrolledRef = react.useRef(false);
     const matchTargetedPost = (posts) => {
       return posts.some((item) => {
         var _a2;
@@ -1990,13 +2000,33 @@ var __publicField = (obj, key, value) => {
         return false;
       });
     };
+    const stableHeight = () => {
+      if (lastHeightRef.current === containerHeight) {
+        return true;
+      }
+      lastHeightRef.current = containerHeight;
+      return false;
+    };
     react.useEffect(() => {
-      var _a2;
-      if (highlightedRef.current && matchTargetedPost(data)) {
-        (_a2 = document.getElementById(highlightedRef.current)) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "center" });
-        highlightedRef.current = null;
+      let interval;
+      if (containerHeight && !autoScrolledRef.current) {
+        interval = window.setInterval(() => {
+          if (stableHeight()) {
+            clearInterval(interval);
+            if (highlightedRef.current && matchTargetedPost(data)) {
+              const element = document.getElementById(highlightedRef.current);
+              element == null ? void 0 : element.scrollIntoView({ behavior: "smooth", block: "center" });
+              autoScrolledRef.current = true;
+            }
+          }
+        }, 200);
       }
-    }, [data]);
+      return () => {
+        if (interval) {
+          clearInterval(interval);
+        }
+      };
+    }, [containerHeight]);
   };
   const CommentsContext = react.createContext({});
   const useCommentsContext = () => react.useContext(CommentsContext);
@@ -2010,14 +2040,17 @@ var __publicField = (obj, key, value) => {
     autoCollapse,
     allowCopyLink,
     showProfileCard,
-    interactive
+    interactive,
+    containerRef
   }) {
+    var _a2;
     const [state, setState] = ahooks.useSetState(getInitialState(order ? { order } : {}));
+    const containerHeight = (_a2 = ahooks.useSize(containerRef)) == null ? void 0 : _a2.height;
     const commentsKeyById = react.useMemo(() => {
       return state.comments.reduce((acc, cur) => {
-        var _a2;
+        var _a3;
         acc[cur.id] = cur;
-        if ((_a2 = cur.replies) == null ? void 0 : _a2.length) {
+        if ((_a3 = cur.replies) == null ? void 0 : _a3.length) {
           cur.replies.forEach((item) => {
             acc[item.id] = item;
           });
@@ -2088,12 +2121,12 @@ var __publicField = (obj, key, value) => {
       };
       init();
     }, [target.id, state.order, setState]);
-    useAutoScroll(state.comments);
+    useAutoScroll(state.comments, containerHeight);
     const updateCommentState = (id2, mapper) => {
-      var _a2;
+      var _a3;
       const comment = commentsKeyById[id2];
       const root = commentsKeyById[comment.rootId];
-      if ((_a2 = root == null ? void 0 : root.replies) == null ? void 0 : _a2.length) {
+      if ((_a3 = root == null ? void 0 : root.replies) == null ? void 0 : _a3.length) {
         root.replies = root.replies.map((item) => item.id === id2 ? mapper(item) : item);
         updateCommentState(root.id, (current) => ({ ...current }));
       } else {
@@ -2129,10 +2162,10 @@ var __publicField = (obj, key, value) => {
       setState({ comments: sorted, total, highlighted: { ...state.highlighted, nextCursor } });
     };
     const loadMoreReplies = async (rootId) => {
-      var _a2;
+      var _a3;
       const root = commentsKeyById[rootId];
       if (root.replies) {
-        const cursor = state.replyCursors[root.id] || ((_a2 = getLastItem(root.replies)) == null ? void 0 : _a2.id);
+        const cursor = state.replyCursors[root.id] || ((_a3 = getLastItem(root.replies)) == null ? void 0 : _a3.id);
         const { data, total, nextCursor } = await api.fetchComments({
           objectId: target.id,
           rootId,
@@ -2154,14 +2187,14 @@ var __publicField = (obj, key, value) => {
       localStorage.setItem(KEY_LS_ORDER, order2);
     };
     const add = (post) => {
-      var _a2;
+      var _a3;
       if (flatView || !post.rootId) {
         setState({ comments: uniqAndSort$1([...state.comments, post], state.order) });
       } else {
         const root = commentsKeyById[post.rootId];
         if (root) {
           if (!state.replyCursors[root.id] && root.replies) {
-            state.replyCursors[root.id] = (_a2 = getLastItem(root.replies)) == null ? void 0 : _a2.id;
+            state.replyCursors[root.id] = (_a3 = getLastItem(root.replies)) == null ? void 0 : _a3.id;
           }
           const sorted = uniqAndSort$1([...root.replies || [], post], "asc");
           updateCommentState(post.rootId, (current) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.6.63",
+  "version": "1.6.64",
   "files": [
     "dist"
   ],
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@arcblock/ws": "^1.18.108",
-    "@blocklet/editor": "1.6.63",
-    "@blocklet/labels": "1.6.63",
+    "@blocklet/editor": "1.6.64",
+    "@blocklet/labels": "1.6.64",
     "@blocklet/uploader": "^0.0.63",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -93,5 +93,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "6654a90b799b661e5f9ffb543a67d831208ba415"
+  "gitHead": "455036419d403c12937a586732caff277ea399c9"
 }