@blocklet/pages-kit 0.4.116 → 0.4.117

package/lib/esm/builtin/async/rehype-mermaid.js

@@ -0,0 +1 @@
+export default () => import('rehype-mermaid');

package/lib/esm/builtin/markdown/action-button.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Tooltip } from '@mui/material';
+import { useRef, useState } from 'react';
+import LoadingButton from './loading-button';
+export default function ActionButton({ tip, tipSucceed, title, titleSucceed, icon, iconSucceed, autoReset, placement = 'top', ...props }) {
+    const [active, setActive] = useState(false);
+    const [error, setError] = useState();
+    const timer = useRef();
+    const onClose = () => {
+        setError(undefined);
+        if (autoReset) {
+            timer.current = window.setTimeout(() => {
+                setActive(false);
+            }, 3000);
+        }
+    };
+    const onOpen = () => {
+        clearTimeout(timer.current);
+    };
+    const realIcon = active ? iconSucceed : icon;
+    const toolTipTitleText = error ? _jsx(Box, { color: "error", children: error.message }) : (active && tipSucceed) || tip;
+    const buttonText = active ? titleSucceed : title;
+    return (_jsx(Tooltip, { title: toolTipTitleText, disableInteractive: true, placement: placement, onClose: onClose, onOpen: onOpen, children: _jsx("span", { children: _jsx(LoadingButton, { startIcon: realIcon && (typeof realIcon === 'string' ? _jsx(Icon, { icon: realIcon }) : realIcon), loadingPosition: realIcon ? 'start' : undefined, ...props, onClick: async (e) => {
+                    if (!props.onClick)
+                        return;
+                    try {
+                        await props.onClick(e);
+                        setActive(true);
+                    }
+                    catch (error) {
+                        setError(error);
+                    }
+                }, children: buttonText }) }) }));
+}

package/lib/esm/builtin/markdown/index.js

@@ -0,0 +1,4 @@
+import { MarkdownContext, MarkdownProvider, useMarkdownOptions } from './markdown-context';
+import MarkdownRenderer from './markdown-renderer';
+export { MarkdownRenderer, MarkdownProvider, MarkdownContext, useMarkdownOptions };
+export default MarkdownRenderer;

package/lib/esm/builtin/markdown/loading-button.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingButton as MuiLoadingButton } from '@mui/lab';
+import { forwardRef, useCallback, useState } from 'react';
+const LoadingButton = forwardRef(({ onClick, ...props }, ref) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = useCallback(async (e) => {
+        try {
+            setLoading(true);
+            await onClick?.(e);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [onClick]);
+    return _jsx(MuiLoadingButton, { ref: ref, ...props, loading: props.loading || loading, onClick: handleClick });
+});
+export default LoadingButton;

package/lib/esm/builtin/markdown/markdown-context.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const defaultOptions = {
+    codeOptions: {
+        showActionButton: true,
+    },
+};
+export const MarkdownContext = createContext(defaultOptions);
+export const useMarkdownOptions = () => useContext(MarkdownContext);
+export function MarkdownProvider({ children, options = defaultOptions }) {
+    return _jsx(MarkdownContext.Provider, { value: options, children: children });
+}

package/lib/esm/builtin/markdown/markdown-renderer.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Stack, styled } from '@mui/material';
+import React from 'react';
+import { MarkdownHooks } from 'react-markdown';
+import rehypeMermaid from 'rehype-mermaid';
+import remarkGfm from 'remark-gfm';
+import ActionButton from './action-button';
+import { MarkdownProvider, useMarkdownOptions } from './markdown-context';
+const ReactSyntaxHighlighter = React.lazy(() => import('react-syntax-highlighter').then((m) => ({ default: m.Prism })));
+const matchLanguage = (className) => {
+    const match = /language-(\w+)/.exec(className || '');
+    return match?.[1];
+};
+function MarkdownCode({ node, inline, className, children, ...props }) {
+    const { codeOptions } = useMarkdownOptions();
+    if (!children)
+        return null;
+    const language = matchLanguage(className);
+    return !inline ? (_jsx(Box, { component: ReactSyntaxHighlighter, language: language, style: codeOptions?.theme, showLineNumbers: true, ...props, sx: { borderRadius: 1 }, children: String(children).replace(/\n$/, '') })) : (_jsx(Box, { component: "code", className: className, ...props, children: children }));
+}
+function MarkdownTable({ className, children }) {
+    return (_jsx(Box, { sx: { overflow: 'auto', my: 1 }, children: _jsx("table", { className: className, children: children }) }));
+}
+function MarkdownPre({ children }) {
+    const { codeOptions } = useMarkdownOptions();
+    const childrenProps = children?.props;
+    if (!childrenProps?.children)
+        return null;
+    const language = matchLanguage(childrenProps.className);
+    const showActionButton = codeOptions?.showActionButton !== false;
+    if (!showActionButton) {
+        return children;
+    }
+    return (_jsxs(Box, { component: "div", sx: {
+            fontSize: 14,
+            borderRadius: 1,
+            bgcolor: 'rgb(245, 242, 240)',
+            '> pre': { mt: '0 !important' },
+        }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [_jsx(Box, { children: language }), _jsx(Box, { flex: 1 }), _jsx(ActionButton, { autoReset: true, title: _jsx(Icon, { icon: "tabler:copy" }), titleSucceed: _jsx(Icon, { icon: "tabler:copy-check" }), sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 }, onClick: () => {
+                            window.navigator.clipboard.writeText(childrenProps.children);
+                        } })] }), children] }));
+}
+function MarkdownRenderer(props) {
+    const { codeOptions = { showActionButton: true }, ...rest } = props;
+    const options = {
+        codeOptions,
+    };
+    return (_jsx(StyledBox, { children: _jsx(MarkdownProvider, { options: options, children: _jsx(MarkdownHooks, { ...rest, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeMermaid], components: {
+                    pre: MarkdownPre,
+                    code: MarkdownCode,
+                    table: MarkdownTable,
+                } }) }) }));
+}
+const StyledBox = styled(Box) `
+  width: 100%;
+  overflow: hidden;
+  word-break: break-word;
+
+  > * {
+    &:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-top: 0;
+    }
+    &:last-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-bottom: 0;
+    }
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  li p {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    white-space: nowrap;
+
+    th,
+    td {
+      border: 1px solid grey;
+      padding: 4px 8px;
+    }
+  }
+
+  a {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.writing > *:last-child {
+    &:after {
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+      height: 1.2em;
+      margin-top: -0.2em;
+      margin-left: 0.1em;
+      border-right: 0.2em solid orange;
+      border-radius: 10px;
+      animation: blink-caret 0.75s step-end infinite;
+
+      @keyframes blink-caret {
+        from,
+        to {
+          border-color: transparent;
+        }
+        50% {
+          border-color: ${({ theme }) => theme.palette.secondary.main};
+        }
+      }
+    }
+  }
+`;
+export default MarkdownRenderer;