@blocklet/discuss-kit-ux-lite 2.6.0

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

@@ -0,0 +1,108 @@
+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 { Icon } from "@iconify/react";
+import LanguageMarkdownIcon from "@iconify/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(Icon, { icon: 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/index.d.ts

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

package/dist/components/input/index.mjs

@@ -0,0 +1,4 @@
+export { default as Input } 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

@@ -0,0 +1,29 @@
+import { MutableRefObject } from 'react';
+import { type BoxProps } from '@mui/material';
+import type { EditorState, LexicalEditor } from 'lexical';
+export type Send = (content: string) => Promise<any>;
+export interface RenderProps {
+    content: EditorState | null;
+    submit: () => void;
+    loading: boolean;
+    error: any;
+    inSmallView: boolean;
+}
+export interface InputProps extends Omit<BoxProps, 'onChange'> {
+    initialContent?: string;
+    send?: Send;
+    placeholder?: string;
+    onSuccess?: (result: any) => void;
+    onChange?: (editorState: EditorState | null) => void;
+    autoFocus?: boolean;
+    draftKey?: string;
+    shortcut?: 'CMD_ENTER' | 'ENTER';
+    children?: React.ReactNode;
+    renderInnerFooter?: (args: RenderProps) => React.ReactElement<any>;
+    renderEditorFooter?: (args: RenderProps) => React.ReactElement<any>;
+    editorRef?: MutableRefObject<LexicalEditor | null>;
+    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.Element;
+export default Input;

package/dist/components/input/input.mjs

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useState, useRef } from "react";
+import { Box } from "@mui/material";
+import isNil from "lodash/isNil";
+import { EditorConfigProvider, useEditorConfig } from "@blocklet/editor/lib/config";
+import { isEmptyContent } from "../lexical.mjs";
+import ShortcutPlugin from "./shortcut-plugin.mjs";
+import { AutoClearPlugin } from "./auto-clear-plugin.mjs";
+import useMeasure from "../hooks/measure.mjs";
+import { mergeSx } from "../utils.mjs";
+import { MAX_COMMENT_LENGTH } from "../../constants.mjs";
+import { BlockletEditor } from "../editor/blocklet-editor.mjs";
+const Input = ({
+  initialContent = "",
+  send,
+  placeholder,
+  onSuccess,
+  onChange,
+  autoFocus,
+  draftKey = "",
+  shortcut,
+  children,
+  renderInnerFooter,
+  renderEditorFooter,
+  editorRef,
+  disableCmdEnter = false,
+  ...rest
+}) => {
+  const sessionKey = draftKey || "";
+  const [content, setContent] = useState(null);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [ref, { width }] = useMeasure();
+  const [clearKey, setClearKey] = useState(0);
+  const editorConfig = useEditorConfig();
+  const internalEditorRef = useRef(null);
+  const inSmallView = width < 700;
+  const draftContent = sessionStorage.getItem(sessionKey);
+  const setDraftContent = (data) => {
+    if (data) {
+      try {
+        sessionStorage.setItem(sessionKey, JSON.stringify(data));
+      } catch (err) {
+        console.log(err);
+      }
+    } else {
+      sessionStorage.removeItem(sessionKey);
+      sessionStorage.removeItem(`${sessionKey}:title`);
+    }
+  };
+  const handleChange = async (state) => {
+    const isEmpty = await isEmptyContent(state);
+    if (isEmpty) {
+      setContent(null);
+      onChange?.(null);
+    } else {
+      setContent(state);
+      onChange?.(state);
+    }
+    if (draftKey) {
+      setDraftContent(state);
+    }
+    setError("");
+  };
+  const submit = async () => {
+    if (!send) {
+      return;
+    }
+    setLoading(true);
+    setError("");
+    const originContent = content;
+    try {
+      const result = await send(isNil(content) ? "" : JSON.stringify(internalEditorRef?.current?.getEditorState()));
+      setContent(null);
+      if (draftKey) {
+        setDraftContent(null);
+      }
+      setClearKey(Date.now());
+      onSuccess?.(result);
+    } catch (e) {
+      setContent(originContent);
+      setError(e?.status === 429 ? e.response?.data || e.message : e.message);
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCmdEnterPressed = () => {
+    if (content && !loading) {
+      submit();
+    }
+  };
+  const mergedEditorConfig = {
+    ...editorConfig,
+    ...inSmallView && {
+      toolbar: {
+        items: ["component", "block", "italic", "bold", "underline", "media", ...editorConfig?.toolbar?.items || []]
+      }
+    },
+    characterLimitConfig: {
+      maxLength: MAX_COMMENT_LENGTH,
+      indicatorStyle: {
+        position: "absolute",
+        bottom: 6,
+        left: { xs: 12, md: 32 }
+      },
+      alignLeft: false
+    }
+  };
+  const editorState = draftKey && draftContent && !initialContent ? draftContent : initialContent;
+  const mergedSx = mergeSx(
+    {
+      position: "relative",
+      ".be-shell": {
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden"
+      },
+      ".be-editable, .be-content": {
+        minHeight: 150
+      }
+    },
+    rest.sx
+  );
+  return /* @__PURE__ */ createElement(Box, { ref, ...rest, key: draftKey, sx: mergedSx }, /* @__PURE__ */ jsx(EditorConfigProvider, { value: mergedEditorConfig, children: /* @__PURE__ */ jsxs(
+    BlockletEditor,
+    {
+      editorRef: (editor) => {
+        internalEditorRef.current = editor;
+        if (editorRef) {
+          editorRef.current = editor;
+        }
+      },
+      placeholder,
+      editorState,
+      onChange: handleChange,
+      autoFocus,
+      children: [
+        !disableCmdEnter && /* @__PURE__ */ jsx(ShortcutPlugin, { shortcut, callback: handleCmdEnterPressed }),
+        /* @__PURE__ */ jsx(AutoClearPlugin, { clearKey }),
+        children,
+        renderInnerFooter?.({ submit, content, loading, error, inSmallView })
+      ]
+    }
+  ) }), renderEditorFooter?.({ submit, content, loading, error, inSmallView }));
+};
+export default Input;

package/dist/components/input/post-edit.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Send } from './input';
+interface Props {
+    content: string;
+    send: Send;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+}
+export default function PostEdit({ content, send, onCancel, onSuccess, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/input/post-edit.mjs

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { Save as SaveIcon } from "@mui/icons-material";
+import { LocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Input from "./input.mjs";
+export default function PostEdit({ content, send, onCancel, onSuccess, ...rest }) {
+  const { t } = useContext(LocaleContext);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      initialContent: content,
+      send,
+      onSuccess,
+      ...rest,
+      renderEditorFooter: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "flex-end",
+            gap: 1,
+            mt: 1
+          },
+          children: [
+            /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: onCancel, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              LoadingButton,
+              {
+                disabled: !content2,
+                loading,
+                loadingPosition: "start",
+                startIcon: /* @__PURE__ */ jsx(SaveIcon, {}),
+                variant: "contained",
+                color: "primary",
+                title: "\u2318 Enter",
+                onClick: submit,
+                children: t("saveChanges")
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}

package/dist/components/input/scrollable-editor-wrapper.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+interface Props {
+    safeDistance?: number;
+    sx?: SxProps;
+    children: React.ReactNode;
+}
+export default function ScrollableEditorWrapper({ safeDistance, sx, children, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/input/scrollable-editor-wrapper.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@arcblock/ux/lib/Theme";
+import Box from "@mui/material/Box";
+import useMeasure from "../hooks/measure.mjs";
+const Root = styled(Box)`
+  height: 100%;
+  .be-editable {
+    overflow-y: auto;
+  }
+`;
+export default function ScrollableEditorWrapper({ safeDistance = 0, sx, children, ...rest }) {
+  const [ref, { height }] = useMeasure();
+  const mergedSx = [...Array.isArray(sx) ? sx : [sx]];
+  if (height) {
+    mergedSx.push({ ".be-editable": { height: height - safeDistance } });
+  }
+  return /* @__PURE__ */ jsx(Root, { sx: mergedSx, ...rest, ref, children });
+}

package/dist/components/input/shortcut-plugin.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    callback: () => void;
+    shortcut?: 'CMD_ENTER' | 'ENTER';
+}
+export default function CmdEnterShortcutPlugin({ callback, shortcut, }: Props): React.ReactElement<any> | null;
+export {};

package/dist/components/input/shortcut-plugin.mjs

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
+export default function CmdEnterShortcutPlugin({
+  callback,
+  shortcut = "CMD_ENTER"
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (e) => {
+        if (shortcut === "CMD_ENTER" && (e.metaKey || e.ctrlKey)) {
+          callback();
+          return true;
+        }
+        if (shortcut === "ENTER" && !e.shiftKey) {
+          e.preventDefault();
+          callback();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor, callback]);
+  return null;
+}

package/dist/components/lexical.d.ts

@@ -0,0 +1,10 @@
+import type { EditorState } from 'lexical';
+export declare const getExcerptFromLexicalContent: (content: any, size?: number) => string;
+/**
+ * 检查 editor 内容是否为空
+ * - 从 editor state strcuture 判断是否为空
+ * - 检查是否只有 text node, 如果不是说明不为空 (仅输入一张图片的情况)
+ * - 检查 text content 空白/空行 的情况 (trim)
+ */
+export declare const isEmptyContent: (editorState: EditorState) => boolean;
+export declare const stringify: (editorState: EditorState | null | undefined) => string;

package/dist/components/lexical.mjs

@@ -0,0 +1,56 @@
+function lexicalRootToText(data) {
+  let parsedRoot = data;
+  if (typeof data === "string") {
+    try {
+      parsedRoot = JSON.parse(data).root;
+      if (typeof parsedRoot !== "object") {
+        return data;
+      }
+    } catch {
+      parsedRoot = {};
+    }
+  }
+  let text = "";
+  if (parsedRoot?.children) {
+    try {
+      parsedRoot.children.forEach((e) => {
+        if (e.text) {
+          text += e.text;
+        } else {
+          if (e.direction && text !== "") {
+            text += "\n";
+          }
+          text += lexicalRootToText(e);
+        }
+      });
+    } catch (err) {
+      console.error(`lexicalRootToText ${err?.toString()}`);
+      console.error(err);
+    }
+  }
+  return text;
+}
+export const getExcerptFromLexicalContent = (content, size = 150) => {
+  const textContent = (lexicalRootToText(content) || "").trim();
+  return textContent.length > size ? `${textContent.slice(0, size)}` : textContent;
+};
+export const isEmptyContent = (editorState) => {
+  const data = editorState.toJSON();
+  if (data.root.children?.length === 1 && !data.root.children[0].children?.length) {
+    return true;
+  }
+  const textOnly = !data.root.children.some((p) => {
+    if (p.type !== "paragraph") {
+      return true;
+    }
+    return p.children?.some((item) => item.type !== "text");
+  });
+  if (!textOnly) {
+    return false;
+  }
+  const text = lexicalRootToText(data.root);
+  return !text.trim();
+};
+export const stringify = (editorState) => {
+  return editorState ? JSON.stringify(editorState) : "";
+};

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

@@ -0,0 +1,117 @@
+declare const _default: {
+    cancel: string;
+    confirm: string;
+    commentInputPlaceholder: string;
+    copyLink: string;
+    delete: string;
+    deleted: string;
+    edit: string;
+    empty: string;
+    loadMore: string;
+    readMore: string;
+    saveChanges: string;
+    sendComment: string;
+    showMoreReplies: string;
+    all: string;
+    messages: string;
+    deleteMessage: {
+        title: string;
+        desc: string;
+    };
+    deleteComment: {
+        title: string;
+        desc: string;
+    };
+    profile: {
+        empty: string;
+    };
+    unsaved: {
+        title: string;
+        desc: string;
+        leave: string;
+        stay: string;
+    };
+    apiError: {
+        400: string;
+        401: string;
+        403: string;
+        409: string;
+        staleTip: string;
+        timeout: string;
+        error: string;
+    };
+    chat: {
+        notification: string;
+        reply: string;
+        unknown: string;
+        chats: string;
+        channel: string;
+        description: string;
+        newChannel: string;
+        updateChannel: string;
+        noChats: string;
+        unknownChannel: string;
+        channelDescription: string;
+        channelName: string;
+        deleteChannel: string;
+        commentedYourPost: string;
+        commentedPost: string;
+        newPost: string;
+        mentionInComment: string;
+        mentionInPost: string;
+        replyYourComment: string;
+        replyComment: string;
+        newMsg: string;
+        deleteChannelTitle: string;
+        deleteChannelDesc: string;
+        leaveChannel: string;
+        joinChannel: string;
+        openTask: string;
+        closeTask: string;
+        assignTask: string;
+        unassignTask: string;
+        points: string;
+        point: string;
+        pointUp: string;
+        loadMore: string;
+        notYetJoinedTheChannel: string;
+        typeSomething: string;
+        send: string;
+        selectBoardTip: string;
+    };
+    userActionLog: {
+        editedCapital: string;
+        times: string;
+        mostRecent: string;
+        and: string;
+        edited: string;
+        created: string;
+        added: string;
+        removed: string;
+        label: string;
+        labels: string;
+        assigned: string;
+        unassigned: string;
+        selfAssigned: string;
+        selfUnassigned: string;
+        published: string;
+        unpublished: string;
+        changeTitle: string;
+        changeBoard: string;
+        mention: string;
+        pin: string;
+        unpin: string;
+        markAsFeatured: string;
+        unmarkAsFeatured: string;
+        expand: string;
+        collapse: string;
+        expired: string;
+        expire: string;
+        passport: string;
+        passports: string;
+    };
+    pin: string;
+    unpin: string;
+    pinned: string;
+};
+export default _default;