mui-extended
Version:
Extended UI Components built on Material UI
102 lines (101 loc) • 6.6 kB
JavaScript
import { __assign, __makeTemplateObject, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable */
// @ts-nocheck
import { Alert, Paper, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, useTheme, Box, IconButton, Tooltip } from "@mui/material";
import { createContext, useContext } from "react";
import ReactMarkdown from "react-markdown";
import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter";
import remarkGfm from "remark-gfm";
import typescript from "refractor/lang/typescript";
import { darkThemeStyle } from "./styles/dark";
import { lightThemeStyle } from "./styles/light";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import { MuiLinkWithNext } from "../NextMuiLink";
SyntaxHighlighter.registerLanguage("typescript", typescript);
var Span = styled("span")(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
var CodeComponentContext = createContext({});
export var CodeComponentContextProvider = CodeComponentContext.Provider;
var getNodeText = function (node) {
var _a;
if (["string", "number"].includes(typeof node)) {
return node;
}
else if (node instanceof Array) {
return node.map(getNodeText).join("");
}
else if (typeof node === "object" && node) {
//@ts-expect-error props may not be in node
return getNodeText((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.children);
}
else {
return "";
}
};
export var generateAnchorLink = function (linkTitle) {
return (getNodeText(linkTitle)
.toLocaleLowerCase()
// eslint-disable-next-line no-control-regex
.replace(/[\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]/g, "_"));
};
var MarkdownPreviewContext = createContext({});
export var markdownAnchorLinkHOC = function (HeaderComponent) {
return function HeaderComponentWithAnchorLink(props) {
var context = useContext(MarkdownPreviewContext);
var elem = _jsx(HeaderComponent, __assign({}, props));
if (context.anchorLink) {
elem = (_jsx("a", { href: "#" + generateAnchorLink(props["children"] || ""), style: { textDecoration: "none", color: "inherit" }, children: elem }));
}
return elem;
};
};
var SyntaxHighLightedCodeComponent = function (_a) {
var inline = _a.inline, className = _a.className, children = _a.children, props = __rest(_a, ["inline", "className", "children"]);
var theme = useTheme();
var codeComponentContext = useContext(CodeComponentContext);
var style = theme.palette.mode == "light" ? lightThemeStyle : darkThemeStyle;
var match = /language-(\w+)/.exec(className || "");
return !inline ? (_jsxs(Box, { position: "relative", sx: {
"& > div": {
maxHeight: codeComponentContext.maxHeight,
overflow: "auto"
}
}, children: [_jsx(SyntaxHighlighter, __assign({ style: style, language: match ? match[1] : "javascript", PreTag: "div", wrapLongLines: true }, props, { children: children })), codeComponentContext.enableCopy ? (_jsx(Tooltip, { title: "Copy Contents", children: _jsx(IconButton, { sx: { position: "absolute", top: 8, right: 16 }, onClick: function () {
navigator.clipboard.writeText(children);
}, children: _jsx(ContentCopyIcon, { fontSize: "inherit" }) }) })) : null] })) : (_jsx(Span, { sx: {
paddingLeft: 1,
paddingRight: 1,
color: "primary.main"
}, children: _jsx("code", __assign({ className: className }, props, { children: children })) }));
};
var H1 = function (props) { return (_jsx(Typography, __assign({}, props, { variant: "h4", variantMapping: { h4: "h1" }, sx: { marginTop: 2 } }))); };
var H2 = function (props) { return (_jsx(Typography, __assign({}, props, { variant: "h5", variantMapping: { h5: "h2" }, sx: { marginTop: 2 } }))); };
var H3 = function (props) { return (_jsx(Typography, __assign({}, props, { variant: "h6", variantMapping: { h6: "h3" }, sx: { marginTop: 1 } }))); };
var H4 = function (props) { return (_jsx(Typography, __assign({}, props, { variant: "subtitle1", variantMapping: { subtitle1: "h4" }, sx: { marginTop: 0.5, fontWeight: "bold" } }))); };
var H5 = function (props) { return (_jsx(Typography, __assign({}, props, { variant: "subtitle2", variantMapping: { subtitle2: "h5" }, sx: { marginTop: 0.5, fontWeight: "bold" } }))); };
var H6 = function (props) { return (_jsx(Typography, __assign({}, props, { variant: "subtitle2", variantMapping: { subtitle2: "h6" } }))); };
var P = function (props) { return _jsx(Typography, __assign({}, props, { variant: "body1", py: 1 })); };
var Blockquote = function (_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return (_jsx("blockquote", __assign({}, props, { style: { margin: "16px 0 16px 0" }, children: _jsx(Alert, { icon: false, severity: "info", color: "info", sx: { my: 1, py: 0 }, children: children }) })));
};
var TableComponent = function (props) { return (_jsx(TableContainer, { component: Paper, children: _jsx(Table, __assign({}, props, { size: "small" })) })); };
var Img = function (props) {
var propsFromTitle = {};
if (props.title) {
var _a = props.title.split("?", 2), title = _a[0], attrs = _a[1];
propsFromTitle["title"] = title;
Object.assign(propsFromTitle, Object.fromEntries(new URLSearchParams(attrs).entries()));
}
// eslint-disable-next-line @next/next/no-img-element
return _jsx("img", __assign({}, props, propsFromTitle, { alt: props.alt }));
};
var A = function (props) {
return _jsx(MuiLinkWithNext, __assign({}, props));
};
export var MarkdownPreview = function (_a) {
var children = _a.children, _b = _a.components, components = _b === void 0 ? {} : _b, props = __rest(_a, ["children", "components"]);
var _components = __assign({ h1: markdownAnchorLinkHOC(H1), h2: markdownAnchorLinkHOC(H2), h3: markdownAnchorLinkHOC(H3), h4: markdownAnchorLinkHOC(H4), h5: markdownAnchorLinkHOC(H5), h6: markdownAnchorLinkHOC(H6), p: P, blockquote: Blockquote, table: TableComponent, img: Img, thead: TableHead, tbody: TableBody, th: TableCell, tr: TableRow, td: TableCell, code: SyntaxHighLightedCodeComponent, a: A }, components);
return (_jsx(MarkdownPreviewContext.Provider, { value: props, children: _jsx(ReactMarkdown, { components: _components, remarkPlugins: [remarkGfm], children: children }) }));
};
var templateObject_1;