@blocklet/discuss-kit-ux 2.4.35 → 2.4.37

package/dist/components/emoji-icon.mjs

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+const stringToColor = (str) => {
+  let hash = 0;
+  let i;
+  for (i = 0; i < str.length; i += 1) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = "#";
+  for (i = 0; i < 3; i += 1) {
+    const value = hash >> i * 8 & 255;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  return color;
+};
+function InternalIcon({ title, icon, ...rest }) {
+  const _icon = icon || Array.from(title)[0];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "1.2em",
+        height: "1.2em",
+        lineHeight: 1,
+        ...!icon && { bgcolor: stringToColor(title), color: "#fff" }
+      },
+      ...rest,
+      children: _icon
+    }
+  );
+}
+function EmojiIcon({ title, icon, size = "small", ...rest }) {
+  if (size === "large") {
+    const letterIconStyles = {
+      width: "100%",
+      height: "100%",
+      fontSize: "1.2em"
+    };
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 40,
+          height: 40,
+          overflow: "hidden",
+          borderRadius: 1.5,
+          bgcolor: "grey.300"
+        },
+        children: /* @__PURE__ */ jsx(InternalIcon, { title, icon, ...rest, style: { ...!icon && letterIconStyles } })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(InternalIcon, { title, icon, ...rest });
+}
+export default EmojiIcon;

package/dist/components/empty-status/empty-status.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface Props {
     sx?: SxProps;
 }
-export default function EmptyStatus({ sx }: Props): import("react/jsx-runtime").JSX.Element;
+export default function EmptyStatus({ sx }: Props): import("react").JSX.Element;
 export {};

package/dist/components/empty-status/empty-status.mjs

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Empty from "@arcblock/ux/lib/Empty";
+import { mergeSx } from "../utils.mjs";
+export default function EmptyStatus({ sx }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        // @ts-expect-error
+        mergeSx({ height: "50vh", width: "100%" }, sx)
+      ],
+      children: /* @__PURE__ */ jsx(Empty, { children: t("profile.empty") })
+    }
+  );
+}

package/dist/components/empty-status/index.mjs

@@ -0,0 +1 @@
+export { default as EmptyStatus } from "./empty-status.mjs";

package/dist/components/hooks/changed.mjs

@@ -0,0 +1,34 @@
+import { useRef, useEffect, useState } from "react";
+const isEqual = (a, b) => {
+  if (a === 0 && b === 0 || !a && !b) {
+    return true;
+  }
+  return a === b;
+};
+export const useChanged = (values, options) => {
+  const [trackingStarted, setTrackingStarted] = useState(false);
+  const [changed, setChanged] = useState(false);
+  const initialValues = useRef(values);
+  const detectChanges = () => {
+    const changesDetected = Object.keys(initialValues.current).some(
+      (key) => !isEqual(initialValues.current[key], values[key])
+    );
+    if (changesDetected) {
+      options.onChange?.();
+    }
+    setChanged(changesDetected);
+  };
+  const reset = (overrides) => {
+    initialValues.current = { ...values, ...overrides };
+    detectChanges();
+  };
+  useEffect(() => {
+    if (trackingStarted) {
+      detectChanges();
+    } else if (options.tracking(values) && !trackingStarted) {
+      initialValues.current = { ...values };
+      setTrackingStarted(true);
+    }
+  }, [values, trackingStarted]);
+  return { changed, reset, initialValues: initialValues.current };
+};

package/dist/components/hooks/index.mjs

@@ -0,0 +1,6 @@
+export { useSessionContext } from "./session.mjs";
+export { useChanged } from "./changed.mjs";
+export { useNow } from "./now.mjs";
+export { useInterval } from "./interval.mjs";
+export { useDownBreakpoint, useUpBreakpoint } from "./responsive.mjs";
+export { useEventCallback } from "./use-event-callback.mjs";

package/dist/components/hooks/interval.mjs

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+const DEFAULT_INTERVAL = 60 * 1e3;
+export const useInterval = (callback, options = {}) => {
+  const { interval = DEFAULT_INTERVAL, paused = false } = options;
+  const callbackRef = useRef(void 0);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    if (!paused) {
+      const timer = setInterval(() => callbackRef.current?.(), interval);
+      return () => clearInterval(timer);
+    }
+    return void 0;
+  }, [interval, paused]);
+};

package/dist/components/hooks/locale-context.mjs

@@ -0,0 +1,12 @@
+import { useLocaleContext as useLocaleContextUX } from "@arcblock/ux/lib/Locale/context";
+export const useLocaleContext = () => {
+  const { languages, ...rest } = useLocaleContextUX();
+  function getLanguageName(code) {
+    return languages.find((x) => x.code === code)?.name || code;
+  }
+  return {
+    languages,
+    getLanguageName,
+    ...rest
+  };
+};

package/dist/components/hooks/measure.mjs

@@ -0,0 +1,8 @@
+import { useRef } from "react";
+import { useSize } from "ahooks";
+const useMeasure = () => {
+  const ref = useRef(null);
+  const size = useSize(ref);
+  return [ref, size || { width: 0, height: 0 }];
+};
+export default useMeasure;

package/dist/components/hooks/now.mjs

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+export const useNow = (interval = 1e3) => {
+  const [time, setTime] = useState(/* @__PURE__ */ new Date());
+  const updateTime = () => setTime(/* @__PURE__ */ new Date());
+  useEffect(() => {
+    const timer = setInterval(updateTime, interval);
+    return () => clearInterval(timer);
+  }, [interval]);
+  return time;
+};

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

@@ -1,4 +1,4 @@
-import { Breakpoint } from '@mui/material';
+import { type Breakpoint } from '@mui/material';
 export declare const useDownBreakpoint: (breakpoint: Breakpoint) => boolean;
 export declare const useUpBreakpoint: (breakpoint: Breakpoint) => boolean;
 export declare function useResponsive(): (responsiveValues: {

package/dist/components/hooks/responsive.mjs

@@ -0,0 +1,25 @@
+import { useTheme, useMediaQuery } from "@mui/material";
+export const useDownBreakpoint = (breakpoint) => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(breakpoint));
+};
+export const useUpBreakpoint = (breakpoint) => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.up(breakpoint));
+};
+export function useResponsive() {
+  const theme = useTheme();
+  const matches = theme.breakpoints.keys.reduce(
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (acc, cur) => ({ ...acc, [cur]: useMediaQuery(theme.breakpoints.up(cur)) }),
+    {}
+  );
+  return (responsiveValues) => {
+    const match = [...theme.breakpoints.keys].reverse().find((breakpoint) => matches[breakpoint] && breakpoint in responsiveValues);
+    return match && responsiveValues[match];
+  };
+}
+export const useResponsiveValue = (values) => {
+  const r = useResponsive();
+  return r(values);
+};

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

@@ -5,6 +5,7 @@ export declare const useSessionContext: () => {
     isBlogEditor: boolean;
     hasAnyPassport: (passports: string | string[]) => boolean;
     hasAnyPermission: (perms: string | string[]) => boolean;
+    sessionReadyPromise: Promise<unknown>;
     session: Session;
     connectApi: any;
 };

package/dist/components/hooks/session.mjs

@@ -0,0 +1,41 @@
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { SessionContext } from "@arcblock/did-connect-react/lib/Session";
+export const useSessionContext = () => {
+  const ctx = useContext(SessionContext) || {};
+  const roles = [...ctx?.session?.user?.passports?.map((p) => p.role) || [], "guest"];
+  const permissionSet = useMemo(() => new Set(ctx.session?.user?.permissions || []), [ctx.session?.user?.permissions]);
+  const hasAnyPassport = (passports) => {
+    if (!passports || passports.length === 0) {
+      return true;
+    }
+    const passportsArr = Array.isArray(passports) ? passports : [passports];
+    return roles.some((x) => passportsArr.includes(x));
+  };
+  const resolver = useRef(void 0);
+  const sessionReadyPromise = useMemo(() => {
+    return new Promise((resolve) => {
+      resolver.current = resolve;
+    });
+  }, []);
+  useEffect(() => {
+    if (ctx.session.initialized) {
+      resolver.current?.();
+    }
+  }, [ctx.session?.initialized]);
+  return {
+    ...ctx,
+    isAuthenticated: !!ctx.session?.user,
+    isAdmin: hasAnyPassport(["admin", "owner"]),
+    isMember: hasAnyPassport(["member"]),
+    isBlogEditor: hasAnyPassport(["blogEditor"]),
+    hasAnyPassport,
+    hasAnyPermission: (perms) => {
+      if (!perms || perms.length === 0) {
+        return true;
+      }
+      const permsArr = Array.isArray(perms) ? perms : [perms];
+      return permsArr.some((item) => permissionSet.has(item));
+    },
+    sessionReadyPromise
+  };
+};

package/dist/components/hooks/use-event-callback.mjs

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+export function useEventCallback(fn) {
+  const ref = useRef(void 0);
+  useLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return useCallback((...args) => {
+    const { current } = ref;
+    if (current == null) {
+      throw new Error("callback created in useEventCallback can only be called from event handlers");
+    }
+    return current(...args);
+  }, []);
+}

package/dist/components/icon-button.d.ts

@@ -1,5 +1,6 @@
-import { BoxProps, IconButtonProps } from '@mui/material';
+/// <reference types="react" />
+import { BoxProps, type IconButtonProps } from '@mui/material';
 export declare function IconButton<C extends React.ElementType>({ sx, ...rest }: IconButtonProps<C, {
     component?: C;
-}>): import("react/jsx-runtime").JSX.Element;
-export declare function IconButtonGroup({ children, sx, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
+export declare function IconButtonGroup({ children, sx, ...rest }: BoxProps): import("react").JSX.Element;

package/dist/components/icon-button.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, IconButton as MuiIconButton } from "@mui/material";
+export function IconButton({ sx, ...rest }) {
+  const mergedSx = [
+    {
+      svg: {
+        width: "1em",
+        height: "1em",
+        fontSize: 20
+      },
+      color: "text.secondary",
+      "&:hover": {
+        color: "primary.main"
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsx(MuiIconButton, { color: "primary", size: "small", sx: mergedSx, ...rest, disableFocusRipple: true });
+}
+export function IconButtonGroup({ children, sx, ...rest }) {
+  const mergedSx = [
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: 2,
+      "& > .MuiIconButton-root:first-child": {
+        ml: "-5px"
+      },
+      // 避免局部 theme 覆盖问题 (如 comment donation 中的 IconButton 会以 donation 局部的 theme palette 为准)
+      ".MuiIconButton-root:hover": {
+        color: "primary.main"
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children });
+}

package/dist/components/input/auto-clear-plugin.mjs

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createParagraphNode, $getRoot, $getSelection } from "lexical";
+export default function AutoClearPlugin({ value, isChanged }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    try {
+      if (!isChanged) return;
+      if (value) return;
+      if (!editor) return;
+      editor.update(() => {
+        const root = $getRoot();
+        const selection = $getSelection();
+        const paragraph = $createParagraphNode();
+        root.clear();
+        root.append(paragraph);
+        if (selection !== null) {
+          paragraph.select();
+        }
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  }, [value, isChanged, editor]);
+  return null;
+}

package/dist/components/input/comment-input.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps, RenderProps } from './input';
 interface Props extends Omit<InputProps, 'render'> {
     sendText?: string;
@@ -6,5 +7,5 @@ interface Props extends Omit<InputProps, 'render'> {
     renderInnerFooter?: (args: RenderProps) => React.ReactElement<any>;
     disableCmdEnter?: boolean;
 }
-export default function CommentInput({ disabledSend, send, onSuccess, placeholder, sendText, sendIcon, draftKey, renderInnerFooter, disableCmdEnter, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function CommentInput({ disabledSend, send, onSuccess, placeholder, sendText, sendIcon, draftKey, renderInnerFooter, disableCmdEnter, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/input/comment-input.mjs

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Send as SendIcon } from "@mui/icons-material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import isBoolean from "lodash/isBoolean";
+import { useContext } from "react";
+import LanguageMarkdownIcon from "virtual:icons/mdi/language-markdown";
+import Input from "./input.mjs";
+export default function CommentInput({
+  disabledSend,
+  send,
+  onSuccess,
+  placeholder,
+  sendText,
+  sendIcon,
+  draftKey = "",
+  renderInnerFooter,
+  disableCmdEnter = false,
+  ...rest
+}) {
+  const { t } = useContext(LocaleContext);
+  const renderFooter = ({ submit, content, loading, inSmallView }) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          p: 1,
+          display: "flex",
+          justifyContent: inSmallView ? "end" : "space-between",
+          alignItems: "end"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "a",
+              href: "https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax",
+              target: "_blank",
+              sx: {
+                display: inSmallView ? "none" : "flex",
+                alignItems: "center",
+                m: 0,
+                fontSize: 12,
+                color: "text.disabled",
+                textDecoration: "none",
+                "&:hover": { color: "text.secondary" }
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 },
+                  title: "Styling with Markdown is supported",
+                  children: /* @__PURE__ */ jsx(LanguageMarkdownIcon, { style: { fontSize: 16 } })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                LoadingButton,
+                {
+                  disabled: isBoolean(disabledSend) ? disabledSend : !content,
+                  loading,
+                  loadingPosition: "start",
+                  startIcon: sendIcon || /* @__PURE__ */ jsx(SendIcon, { sx: { transform: "rotate(-45deg) translateX(3px)" } }),
+                  variant: "contained",
+                  color: "primary",
+                  title: "\u2318 Enter",
+                  onClick: submit,
+                  className: "editor-submit-button",
+                  children: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
+                    /* @__PURE__ */ jsx("span", { children: sendText || t("sendComment") }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(\u2318 Enter)" })
+                  ] })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "editor-input-container",
+      placeholder: placeholder || t("commentInputPlaceholder"),
+      send,
+      onSuccess,
+      draftKey,
+      disableCmdEnter,
+      ...rest,
+      renderInnerFooter: renderInnerFooter ?? renderFooter,
+      renderEditorFooter: ({ error }) => error && /* @__PURE__ */ jsx(Alert, { severity: "error", children: error })
+    }
+  );
+}

package/dist/components/input/image-path-fixer-plugin.mjs

@@ -0,0 +1,29 @@
+import { useLayoutEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
+import { joinURL } from "ufo";
+import { discussKitUploadsUrl } from "../utils.mjs";
+const originalExportJSON = ImageNode.prototype.exportJSON;
+const ensureLeadingSlash = (str) => str.startsWith("/") ? str : `/${str}`;
+ImageNode.prototype.exportJSON = function exportJSON() {
+  const json = originalExportJSON.call(this);
+  if (json.src && json.src.startsWith(discussKitUploadsUrl)) {
+    json.src = json.src.replace(discussKitUploadsUrl, "");
+    json.src = ensureLeadingSlash(json.src);
+  }
+  return json;
+};
+function imageNodeTransform(node) {
+  const targetNode = node;
+  const src = targetNode.getSrc();
+  if (src?.startsWith("/") && !src.startsWith(discussKitUploadsUrl)) {
+    targetNode.setSrc(joinURL(discussKitUploadsUrl, src));
+  }
+}
+export default function ImagePathFixerPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useLayoutEffect(() => {
+    return editor.registerNodeTransform(ImageNode, imageNodeTransform);
+  }, [editor]);
+  return null;
+}

package/dist/components/input/index.mjs

@@ -0,0 +1,4 @@
+export { default as Input, preloadInput } from "./input.mjs";
+export { default as CommentInput } from "./comment-input.mjs";
+export { default as PostEdit } from "./post-edit.mjs";
+export { default as ScrollableEditorWrapper } from "./scrollable-editor-wrapper.mjs";

package/dist/components/input/input.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
-import { BoxProps } from '@mui/material';
-import { EditorState, LexicalEditor } from 'lexical';
-export declare const preloadInput: () => Promise<typeof import('@blocklet/editor').default>;
+import { type BoxProps } from '@mui/material';
+import type { EditorState, LexicalEditor } from 'lexical';
+export declare const preloadInput: () => Promise<typeof import("@blocklet/editor").default>;
 export type Send = (content: string) => Promise<any>;
 export interface RenderProps {
     content: EditorState | null;
@@ -26,5 +26,5 @@ export interface InputProps extends Omit<BoxProps, 'onChange'> {
     disableCmdEnter?: boolean;
 }
 export type Ref = HTMLDivElement;
-declare const Input: ({ initialContent, send, placeholder, onSuccess, onChange, autoFocus, draftKey, shortcut, children, renderInnerFooter, renderEditorFooter, editorRef, disableCmdEnter, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ initialContent, send, placeholder, onSuccess, onChange, autoFocus, draftKey, shortcut, children, renderInnerFooter, renderEditorFooter, editorRef, disableCmdEnter, ...rest }: InputProps) => import("react").JSX.Element;
 export default Input;