This commit is contained in:
Konstantin Schaper
2022-08-10 18:25:24 +02:00
parent 7612f1279f
commit e75ffc9548
3 changed files with 40 additions and 32 deletions

View File

@@ -92,7 +92,7 @@
"remark-rehype": "^8.0.0",
"tabbable": "^5.2.1",
"unified": "^9.2.1",
"mermaid": "^9.1.4"
"mermaid": "^8.14.0"
},
"babel": {
"presets": [

View File

@@ -23,32 +23,40 @@
*/
import { extensionPoints } from "@scm-manager/ui-extensions";
import React, { FC, useEffect, useRef, useState } from "react";
import React, { FC, useEffect, useMemo, useRef, useState } from "react";
import mermaid from "mermaid";
import ErrorNotification from "../ErrorNotification";
import Loading from "../Loading";
const MermaidCodeRenderer: FC<extensionPoints.MarkdownCodeRenderer["props"]> = ({ value }) => {
const [content, setContent] = useState<string>();
const ref = useRef<HTMLDivElement>(null);
const [content, setContent] = useState<string>("Loading...");
const [error, setError] = useState<Error>();
const id = useRef(`MERMAID-${Date.now()}`);
const dangerousHtmlObject = useMemo(() => ({ __html: content }), [content]);
useEffect(() => {
try {
mermaid.render("MERMAID", value, (svgCode, bindFunctions) => {
setError(undefined);
setContent("");
mermaid.render(id.current, value, (svgCode) => {
setContent(svgCode);
if (ref.current) {
bindFunctions(ref.current);
}
});
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
// @ts-ignore mermaid error
setContent(e.str);
if (e instanceof Error) {
setError(e);
} else {
// @ts-ignore Unknown mermaid error
setError(new Error(e.str));
}
}
}, [value]);
if (error) {
return <ErrorNotification error={error} />;
}
if (content) {
return <div ref={ref} className="mermaid" dangerouslySetInnerHTML={{ __html: content }} />;
return <figure className="mermaid" dangerouslySetInnerHTML={dangerousHtmlObject} />;
}
return <Loading />;

View File

@@ -1207,10 +1207,10 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@braintree/sanitize-url@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
"@braintree/sanitize-url@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
"@chromaui/localtunnel@^2.0.3":
version "2.0.4"
@@ -8368,10 +8368,10 @@ domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
dependencies:
domelementtype "^2.3.0"
dompurify@2.3.10:
version "2.3.10"
resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.10.tgz#901f7390ffe16a91a5a556b94043314cd4850385"
integrity sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g==
dompurify@2.3.5:
version "2.3.5"
resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.5.tgz#c83ed5a3ae5ce23e52efe654ea052ffb358dd7e3"
integrity sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ==
domutils@^2.5.2, domutils@^2.8.0:
version "2.8.0"
@@ -12818,10 +12818,10 @@ keygrip@~1.1.0:
dependencies:
tsscmp "1.0.6"
khroma@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.0.0.tgz#7577de98aed9f36c7a474c4d453d94c0d6c6588b"
integrity sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==
khroma@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.4.1.tgz#ad6a5b6a972befc5112ce5129887a1a83af2c003"
integrity sha512-+GmxKvmiRuCcUYDgR7g5Ngo0JEDeOsGdNONdU2zsiBQaK4z19Y2NvXqfEDE0ZiIrg45GTZyAnPLVsLZZACYm3Q==
kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
version "3.2.2"
@@ -13745,18 +13745,18 @@ merge2@^1.2.3, merge2@^1.3.0, merge2@^1.4.1:
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
mermaid@^9.1.4:
version "9.1.4"
resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.1.4.tgz#05113b14dabe6b2ce5abd7452d10d4309cc0467f"
integrity sha512-QgQTpIIzJfV/Ob7FZTDzxmWjFzCciij4C8RbbQbamsadf2gHrNrfqAoWLF6ALfQlW5ZqOefvlogDdWcFZRnifg==
mermaid@^8.14.0:
version "8.14.0"
resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.14.0.tgz#ef589b0537f56d6340069070edb51719a4faba00"
integrity sha512-ITSHjwVaby1Li738sxhF48sLTxcNyUAoWfoqyztL1f7J6JOLpHOuQPNLBb6lxGPUA0u7xP9IRULgvod0dKu35A==
dependencies:
"@braintree/sanitize-url" "^6.0.0"
"@braintree/sanitize-url" "^3.1.0"
d3 "^7.0.0"
dagre "^0.8.5"
dagre-d3 "^0.6.4"
dompurify "2.3.10"
dompurify "2.3.5"
graphlib "^2.1.8"
khroma "^2.0.0"
khroma "^1.4.1"
moment-mini "^2.24.0"
stylis "^4.0.10"