@blocklet/discuss-kit-ux-lite 2.6.0

package/dist/components/posts/comment.mjs

@@ -0,0 +1,184 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { EditorHolderProvider } from "@blocklet/editor/lib/ext/EditorHolderPlugin";
+import { NavigateNext as NavigateNextIcon } from "@mui/icons-material";
+import { Divider } from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { red } from "@mui/material/colors";
+import MuiMenuItem from "@mui/material/MenuItem";
+import { Suspense, useState } from "react";
+import { Icon } from "@iconify/react";
+import PinnedIcon from "@iconify/icons-tabler/pinned";
+import preferences from "../../preferences.mjs";
+import { useConfirm } from "../confirm.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import { CommentInput } from "../input/index.mjs";
+import { GithubReaction } from "../rating/index.mjs";
+import { protectLogin } from "../utils.mjs";
+import PostComponent from "./post.mjs";
+import { IconButton, IconButtonGroup } from "../icon-button.mjs";
+export default function Comment({
+  onDelete,
+  onRate,
+  onUnrate,
+  onReply,
+  onTogglePin,
+  onContentUpdate,
+  onLoadMoreReplies,
+  renderDonation,
+  renderActions,
+  renderEditorPlugins,
+  enableAutoTranslate,
+  ...rest
+}) {
+  const { session } = useSessionContext();
+  const { t } = useLocaleContext();
+  const [inputVisible, setInputVisible] = useState(false);
+  const { confirm } = useConfirm();
+  const handleDelete = async (...args) => {
+    const proceed = await confirm({
+      title: t("deleteComment.title"),
+      description: t("deleteComment.desc"),
+      okButtonProps: { color: "error" }
+    });
+    if (proceed) {
+      onDelete(...args);
+    }
+  };
+  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, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
+      );
+    }
+    return items;
+  };
+  const render = ({ post, interactive }) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      post.pinnedAt && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "end", gap: 3, mt: 1, mb: 1 }, children: /* @__PURE__ */ 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__ */ jsx(Box, { component: Icon, icon: PinnedIcon, sx: { fontSize: 12 } }),
+            t("pinned")
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "end", gap: 1 }, children: [
+        /* @__PURE__ */ jsxs(IconButtonGroup, { sx: { alignItems: "flex-end" }, children: [
+          /* @__PURE__ */ jsx(
+            GithubReaction,
+            {
+              data: post?.rating || [],
+              onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
+              onUnrate: () => onUnrate(post),
+              interactive
+            }
+          ),
+          (!!session?.user || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsx(IconButton, { onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)), children: /* @__PURE__ */ jsx(Icon, { icon: "feather:message-circle" }) }),
+          renderDonation && renderDonation(post)
+        ] }),
+        renderActions?.(post)
+      ] }),
+      inputVisible && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            my: 2
+          },
+          children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+            CommentInput,
+            {
+              send: (content) => onReply(post, content),
+              onSuccess: () => setInputVisible(false),
+              draftKey: `post-${post.id}`
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, { sx: { mt: 3 } })
+    ] });
+  };
+  const renderExtraContent = ({ post }) => {
+    if (post.replies?.length) {
+      return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, ml: { xs: 0, md: 5.5 } }, children: [
+        post.replies.map((item) => {
+          return /* @__PURE__ */ jsx(
+            Comment,
+            {
+              post: item,
+              onDelete,
+              onContentUpdate,
+              onRate,
+              onUnrate,
+              onReply,
+              onTogglePin,
+              onLoadMoreReplies,
+              allowCopyLink: rest.allowCopyLink,
+              showProfileCard: rest.showProfileCard,
+              interactive: rest.interactive,
+              resolveAuthorInfoAppend: rest.resolveAuthorInfoAppend,
+              renderDonation,
+              renderActions,
+              renderEditorPlugins,
+              enableAutoTranslate
+            },
+            item.id
+          );
+        }),
+        (post.totalReplies || 0) > post.replies.length && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => onLoadMoreReplies(post.id),
+            variant: "outlined",
+            color: "inherit",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(NavigateNextIcon, {}),
+            sx: {
+              mt: 2,
+              ml: 5.5,
+              color: "grey.600",
+              borderColor: "grey.400",
+              fontSize: 12,
+              textTransform: "none"
+            },
+            children: t("showMoreReplies")
+          }
+        )
+      ] });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx(EditorHolderProvider, { children: /* @__PURE__ */ jsx(
+    PostComponent,
+    {
+      ...rest,
+      onContentUpdate,
+      customMenu,
+      render,
+      renderExtraContent,
+      editorPlugins: renderEditorPlugins?.(rest.post),
+      enableAutoTranslate
+    }
+  ) });
+}

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

@@ -0,0 +1,6 @@
+export { default as PostContent } from './post-content';
+export { default as Post } from './post';
+export { default as Comment } from './comment';
+export { default as CommentList } from './comment-list/comment-list';
+export { default as Menu } from './menu';
+export * from './comment-list/context';

package/dist/components/posts/index.mjs

@@ -0,0 +1,6 @@
+export { default as PostContent } from "./post-content.mjs";
+export { default as Post } from "./post.mjs";
+export { default as Comment } from "./comment.mjs";
+export { default as CommentList } from "./comment-list/comment-list.mjs";
+export { default as Menu } from "./menu.mjs";
+export * from "./comment-list/context.mjs";

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import MuiMenuItem from '@mui/material/MenuItem';
+import { SxProps } from '@mui/material';
+interface MenuProps {
+    items: React.ReactElement<typeof MuiMenuItem>[];
+    style?: React.CSSProperties;
+    className?: string;
+    sx?: SxProps;
+}
+declare function Menu({ items, ...rest }: MenuProps): import("react").JSX.Element | null;
+declare namespace Menu {
+    var Item: import("@mui/material").ExtendButtonBase<import("@mui/material").MenuItemTypeMap<{}, "li">>;
+}
+export default Menu;

package/dist/components/posts/menu.mjs

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { styled } from "@arcblock/ux/lib/Theme";
+import IconButton from "@mui/material/IconButton";
+import { MoreVert as MoreVertIcon } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import MuiMenu from "@mui/material/Menu";
+import MuiMenuItem from "@mui/material/MenuItem";
+const StyledMuiMenu = styled(MuiMenu)`
+  .MuiMenuItem-root {
+    min-height: 32px;
+    min-width: 120px;
+    font-size: 14px;
+  }
+`;
+export default function Menu({ items = [], ...rest }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleOnClick = (e) => {
+    const currentTarget = e.currentTarget;
+    let element = e.target;
+    while (element && element !== currentTarget) {
+      if (element.classList.contains("MuiMenuItem-root")) {
+        handleClose();
+        break;
+      }
+      element = element.parentElement;
+    }
+  };
+  if (!items?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      onClick: handleOnClick,
+      sx: [
+        {
+          display: "inline-block"
+        },
+        ...Array.isArray(rest.sx) ? rest.sx : [rest.sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "medium",
+            className: "menu-icon",
+            onClick: handleClick,
+            sx: { p: 1, borderRadius: 1, border: 1, borderColor: "divider", height: 32, width: 32 },
+            children: /* @__PURE__ */ jsx(MoreVertIcon, { sx: { fontSize: 18 } })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledMuiMenu,
+          {
+            className: "menu-dialog",
+            anchorEl,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            open,
+            onClose: handleClose,
+            children: items
+          }
+        )
+      ]
+    }
+  );
+}
+Menu.Item = MuiMenuItem;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Send } from '../input/input';
+interface Props {
+    content: string;
+    editing?: boolean;
+    onExitEditing?: () => void;
+    onSubmit?: Send;
+    autoCollapse?: boolean;
+    enableHeadingsIdPlugin?: boolean;
+    onReady?: () => void;
+    children?: React.ReactNode;
+    editorPrepend?: React.ReactNode;
+    editorFallback?: React.ReactNode;
+}
+export default function PostContent({ content, editing, onExitEditing, onSubmit, autoCollapse, enableHeadingsIdPlugin, onReady, children, editorPrepend, editorFallback, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/posts/post-content.mjs

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import Box from "@mui/material/Box";
+import { Skeleton } from "@mui/material";
+import { BlockletEditorViewer } from "@blocklet/editor/lib/blocklet-editor-viewer";
+import { ViewMore } from "../view-more.mjs";
+import PostEdit from "../input/post-edit.mjs";
+const innerHeight = parseInt(String(window.innerHeight / 3), 10);
+export default function PostContent({
+  content,
+  editing = false,
+  onExitEditing,
+  onSubmit,
+  autoCollapse,
+  enableHeadingsIdPlugin,
+  onReady,
+  children,
+  editorPrepend,
+  editorFallback,
+  ...rest
+}) {
+  if (editing && onSubmit) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          ".be-editable": { maxHeight: 768, overflow: "auto", minHeight: `${Math.max(innerHeight, 200)}px !important` }
+        },
+        children: /* @__PURE__ */ jsx(PostEdit, { content, onCancel: onExitEditing, send: onSubmit, onSuccess: onExitEditing })
+      }
+    );
+  }
+  const fallback = editorFallback || /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
+    /* @__PURE__ */ jsx(Skeleton, {}),
+    /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+  ] });
+  if (!autoCollapse) {
+    return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(
+      BlockletEditorViewer,
+      {
+        editorState: content,
+        enableHeadingsIdPlugin,
+        onReady,
+        prepend: editorPrepend,
+        onCheckboxChange: onSubmit,
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(ViewMore, { ...rest, children: /* @__PURE__ */ jsx(
+    BlockletEditorViewer,
+    {
+      editorState: content,
+      enableHeadingsIdPlugin,
+      onReady,
+      prepend: editorPrepend,
+      onCheckboxChange: onSubmit,
+      children
+    }
+  ) }) });
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import MuiMenuItem from '@mui/material/MenuItem';
+import type { Post } from '../../types';
+export interface PostProps {
+    post: Post;
+    interactive?: boolean;
+    render?: (ctx: PostContext) => React.ReactNode;
+    renderExtraContent?: (ctx: PostContext) => React.ReactNode;
+    customMenu?: (menuItems: React.ReactElement<typeof MuiMenuItem>[], ctx: PostContext) => React.ReactElement<typeof MuiMenuItem>[];
+    onContentUpdate: (post: Post, content: string) => Promise<any>;
+    allowCopyLink?: boolean;
+    autoCollapse?: boolean;
+    showProfileCard?: boolean;
+    className?: string;
+    resolveAuthorInfoAppend?: (post: Post) => React.ReactNode;
+    editorPlugins?: React.ReactNode;
+    enableAutoTranslate?: boolean;
+}
+interface PostContext {
+    isAdmin: boolean;
+    isAuthor: boolean;
+    interactive: boolean;
+    post: Post;
+}
+export default function PostComponent({ post, render, renderExtraContent, customMenu, interactive, onContentUpdate, allowCopyLink, autoCollapse, showProfileCard, resolveAuthorInfoAppend, editorPlugins, enableAutoTranslate, ...rest }: PostProps): JSX.Element;
+export {};

package/dist/components/posts/post.mjs

@@ -0,0 +1,198 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import MuiMenuItem from "@mui/material/MenuItem";
+import clsx from "clsx";
+import { useInViewport } from "ahooks";
+import { Icon } from "@iconify/react";
+import ArrowForwardUpIcon from "@iconify/icons-tabler/arrow-forward-up";
+import { Stack } from "@mui/material";
+import RelativeTime from "../shared/relative-time.mjs";
+import { AuthorInfo } from "../avatars/index.mjs";
+import PostContent from "./post-content.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import { copy } from "../utils.mjs";
+import Menu from "./menu.mjs";
+import { ProfileCardTooltip } from "../profile-card/profile-card.mjs";
+import { PostAutoTranslatePlugin } from "../auto-translate/post-auto-translate-plugin.mjs";
+const Root = styled(Box)`
+  .post-highlighted {
+    animation: highlighted-post-fade 3s;
+    animation-timing-function: ease-out;
+  }
+  @-webkit-keyframes highlighted-post-fade {
+    0% {
+      background-color: #fcf4d9;
+    }
+    100% {
+      background-color: rgba(255, 255, 153, 0);
+    }
+  }
+  @-moz-keyframes highlighted-post-fade {
+    0% {
+      background-color: #fcf4d9;
+    }
+    100% {
+      background-color: rgba(255, 255, 153, 0);
+    }
+  }
+`;
+export default function PostComponent({
+  post,
+  render,
+  renderExtraContent,
+  customMenu,
+  interactive = true,
+  onContentUpdate,
+  allowCopyLink = false,
+  autoCollapse,
+  showProfileCard,
+  resolveAuthorInfoAppend = () => void 0,
+  editorPlugins,
+  enableAutoTranslate,
+  ...rest
+}) {
+  const { session, isAdmin } = useSessionContext();
+  const isAuthor = post.author.did === session?.user?.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?.getElementById(post.id));
+  const [hasEnteredViewport, setHasEnteredViewport] = useState(false);
+  let menuItems = [];
+  if (isAuthor && !post.deletedAt) {
+    menuItems.push(
+      /* @__PURE__ */ jsx(MuiMenuItem, { onClick: () => setEditing(true), children: t("edit") }, "edit")
+    );
+  }
+  if (allowCopyLink) {
+    menuItems.push(
+      /* @__PURE__ */ jsx(
+        MuiMenuItem,
+        {
+          onClick: () => copy(
+            window.location.hash ? window.location.href.replace(window.location.hash, `#${post.id}`) : `${window.location.href}#${post.id}`
+          ),
+          children: t("copyLink")
+        },
+        "copyLink"
+      )
+    );
+  }
+  const isTargetPost = commentUrl === post.id;
+  menuItems = customMenu ? customMenu(menuItems, postContext) : menuItems;
+  const renderTime = () => {
+    if (allowCopyLink) {
+      return /* @__PURE__ */ jsx(Box, { component: "a", href: `#${post.id}`, sx: { color: "text.secondary", textDecoration: "none" }, children: /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt }) });
+    }
+    return /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt });
+  };
+  let systemTip = "";
+  if (post.deletedAt) {
+    systemTip = t("deleted");
+  } else if (!post.content) {
+    systemTip = t("emptyContent");
+  }
+  const showSystemTip = systemTip && !editing;
+  useEffect(() => {
+    if (inViewport) {
+      setHasEnteredViewport(inViewport);
+    }
+  }, [inViewport]);
+  return /* @__PURE__ */ jsxs(Root, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        id: post.id,
+        className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }),
+        sx: {
+          flex: "1"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "start"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  AuthorInfo,
+                  {
+                    size: "sm",
+                    fontSize: 14,
+                    avatarSize: 32,
+                    user: post.author,
+                    createdAt: renderTime(),
+                    showProfileCard,
+                    append: resolveAuthorInfoAppend(post),
+                    showDID: false
+                  }
+                ),
+                /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { sx: { ml: { xs: 0, md: 5.5 } }, children: [
+            post.replyTo && /* @__PURE__ */ jsx(Box, { sx: { pt: 1 }, children: /* @__PURE__ */ jsx(ProfileCardTooltip, { user: post.replyTo, children: /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                sx: {
+                  alignItems: "center",
+                  gap: 0.5,
+                  display: "inline-flex",
+                  color: "text.secondary",
+                  cursor: "pointer",
+                  ".did-address-text": { color: "primary.light" }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Box, { component: Icon, icon: ArrowForwardUpIcon }),
+                  /* @__PURE__ */ jsx("span", { children: "Reply to" }),
+                  /* @__PURE__ */ jsx(Box, { component: "span", children: post.replyTo.fullName })
+                ]
+              }
+            ) }) }),
+            showSystemTip && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "inline-block",
+                  px: 2.5,
+                  py: 1,
+                  my: 1,
+                  fontSize: 14,
+                  bgcolor: "grey.100",
+                  color: "grey.600",
+                  borderRadius: 1
+                },
+                children: systemTip
+              }
+            ),
+            !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+              PostContent,
+              {
+                content: post.content,
+                editing,
+                onExitEditing: () => setEditing(false),
+                onSubmit: (content) => onContentUpdate(post, content),
+                autoCollapse,
+                editorPrepend: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  editorPlugins,
+                  enableAutoTranslate && /* @__PURE__ */ jsx(PostAutoTranslatePlugin, { postId: post.id, updatedAt: post.updatedAt || "" })
+                ] })
+              }
+            ) }),
+            render && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: render(postContext) })
+          ] })
+        ]
+      }
+    ),
+    renderExtraContent && renderExtraContent(postContext)
+  ] });
+}

package/dist/components/profile-card/index.d.ts

@@ -0,0 +1 @@
+export * from './profile-card';

package/dist/components/profile-card/index.mjs

@@ -0,0 +1 @@
+export * from "./profile-card.mjs";

package/dist/components/profile-card/profile-card.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { User } from '../../types';
+interface ProfileCardProps {
+    user: User;
+    click: () => void;
+}
+export declare function ProfileCard({ user, click, ...rest }: ProfileCardProps): import("react").JSX.Element;
+interface ProfileCardTooltipProps {
+    user: User;
+    children: React.ReactElement<any> | ((props: {
+        navigateToProfile: () => void;
+    }) => React.ReactElement<any>);
+}
+export declare function ProfileCardTooltip({ user, children }: ProfileCardTooltipProps): import("react").JSX.Element;
+export {};