@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
119 lines • 5.58 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Markdown = void 0;
const react_1 = __importDefault(require("react"));
const react_markdown_1 = __importDefault(require("react-markdown"));
const react_syntax_highlighter_1 = require("react-syntax-highlighter");
// @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
const remark_typograf_1 = __importDefault(require("@mavrin/remark-typograf"));
const rehype_external_links_1 = __importDefault(require("rehype-external-links"));
const rehype_raw_1 = __importDefault(require("rehype-raw"));
const remark_definition_list_1 = require("remark-definition-list");
const remark_gfm_1 = __importDefault(require("remark-gfm"));
const constants_1 = require("../../configuration/constants");
const index_1 = require("../../index");
const configDefault = {
/*
Using React Markdown configuration
@see https://github.com/remarkjs/react-markdown#api
*/
// @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
remarkPlugins: [remark_gfm_1.default, remark_typograf_1.default, remark_definition_list_1.remarkDefinitionList],
// @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
rehypePlugins: [],
allowedElements: [
// default markdown
"a",
"blockquote",
"code",
"em",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hr",
"img",
"li",
"ol",
"p",
"pre",
"strong",
"ul",
// gfm (Github Flavoured Markdown) extensions
"del",
"input",
"table",
"tbody",
"td",
"th",
"thead",
"tr",
// other stuff
"mark",
"dl",
"dt",
"dd",
],
// remove all unwanted HTML markup
unwrapDisallowed: true,
// show escaped HTML
skipHtml: false,
};
/** Renders a markdown string. */
const Markdown = (_a) => {
var { children, allowHtml = false, removeMarkup = false, inheritBlock = false, allowedElements, reHypePlugins, linkTargetName = "_mdref", htmlContentBlockProps } = _a, otherProps = __rest(_a, ["children", "allowHtml", "removeMarkup", "inheritBlock", "allowedElements", "reHypePlugins", "linkTargetName", "htmlContentBlockProps"]);
const configHtmlExternalLinks = {
rel: ["nofollow"],
target: linkTargetName,
};
configDefault.rehypePlugins = configDefault.rehypePlugins.concat([[rehype_external_links_1.default, configHtmlExternalLinks]]);
const configHtml = allowHtml
? {
rehypePlugins: [...configDefault.rehypePlugins].concat([rehype_raw_1.default]),
// switch from allowed list to disallowed list
allowedElements: undefined,
disallowedElements: ["applet", "script", "style", "link", "iframe", "form", "button"],
}
: {};
const configTextOnly = removeMarkup
? {
skipHtml: true,
allowedElements: [],
disallowedElements: undefined,
}
: {};
const reactMarkdownProperties = Object.assign(Object.assign(Object.assign(Object.assign({ children: children.trim() }, configDefault), configHtml), configTextOnly), { components: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
code(props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { children, className, node, inline } = props, rest = __rest(props, ["children", "className", "node", "inline"]);
const match = /language-(\w+)/.exec(className || "");
return match ? (react_1.default.createElement(react_syntax_highlighter_1.Prism, Object.assign({}, rest, { PreTag: "div", codeTagProps: {
className: `${constants_1.CLASSPREFIX}-markdown__syntaxhighlighter`,
}, children: String(children).replace(/\n$/, ""), language: match[1] }))) : (react_1.default.createElement("code", Object.assign({}, rest, { className: className }), children));
},
}, allowedElements });
if (reHypePlugins) {
reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(reHypePlugins);
}
const markdownDisplay = react_1.default.createElement(react_markdown_1.default, Object.assign({}, reactMarkdownProperties));
return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (markdownDisplay) : (react_1.default.createElement(index_1.HtmlContentBlock, Object.assign({}, htmlContentBlockProps, { className: `${constants_1.CLASSPREFIX}-markdown__container`, "data-test-id": otherProps["data-test-id"] }), markdownDisplay));
};
exports.Markdown = Markdown;
//# sourceMappingURL=Markdown.js.map