@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
148 lines • 6.58 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React from "react";
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "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`)
import remarkTypograf from "@mavrin/remark-typograf";
import rehypeExternalLinks from "rehype-external-links";
import rehypeRaw from "rehype-raw";
import { remarkDefinitionList } from "remark-definition-list";
import remarkGfm from "remark-gfm";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { HtmlContentBlock } from "../../index.js";
var 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: [remarkGfm, remarkTypograf, 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. */
export var Markdown = function (_a) {
var children = _a.children, _b = _a.allowHtml, allowHtml = _b === void 0 ? false : _b, _c = _a.removeMarkup, removeMarkup = _c === void 0 ? false : _c, _d = _a.inheritBlock, inheritBlock = _d === void 0 ? false : _d, allowedElements = _a.allowedElements, reHypePlugins = _a.reHypePlugins, _e = _a.linkTargetName, linkTargetName = _e === void 0 ? "_mdref" : _e, htmlContentBlockProps = _a.htmlContentBlockProps, otherProps = __rest(_a, ["children", "allowHtml", "removeMarkup", "inheritBlock", "allowedElements", "reHypePlugins", "linkTargetName", "htmlContentBlockProps"]);
var configHtmlExternalLinks = {
rel: ["nofollow"],
target: linkTargetName,
};
configDefault.rehypePlugins = configDefault.rehypePlugins.concat([[rehypeExternalLinks, configHtmlExternalLinks]]);
var configHtml = allowHtml
? {
rehypePlugins: __spreadArray([], __read(configDefault.rehypePlugins), false).concat([rehypeRaw]),
// switch from allowed list to disallowed list
allowedElements: undefined,
disallowedElements: ["applet", "script", "style", "link", "iframe", "form", "button"],
}
: {};
var configTextOnly = removeMarkup
? {
skipHtml: true,
allowedElements: [],
disallowedElements: undefined,
}
: {};
var reactMarkdownProperties = __assign(__assign(__assign(__assign({ children: children.trim() }, configDefault), configHtml), configTextOnly), { components: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
code: function (props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var children = props.children, className = props.className, node = props.node, inline = props.inline, rest = __rest(props, ["children", "className", "node", "inline"]);
var match = /language-(\w+)/.exec(className || "");
return match ? (React.createElement(SyntaxHighlighter, __assign({}, rest, { PreTag: "div", codeTagProps: {
className: "".concat(eccgui, "-markdown__syntaxhighlighter"),
}, children: String(children).replace(/\n$/, ""), language: match[1] }))) : (React.createElement("code", __assign({}, rest, { className: className }), children));
},
}, allowedElements: allowedElements });
if (reHypePlugins) {
reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(reHypePlugins);
}
var markdownDisplay = React.createElement(ReactMarkdown, __assign({}, reactMarkdownProperties));
return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (markdownDisplay) : (React.createElement(HtmlContentBlock, __assign({}, htmlContentBlockProps, { className: "".concat(eccgui, "-markdown__container"), "data-test-id": otherProps["data-test-id"] }), markdownDisplay));
};
//# sourceMappingURL=Markdown.js.map