mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Various Mermaid improvements (#18776) (#18780)

Browse Source 
* Various Mermaid improvments

- Render into iframe for improved security
- Use built-in dark theme instead of color inversion
- Remove flexbox attributes, resulting in more consistent size rendering
- Update API usage and update to latest version

* restart ci

* misc tweaks

* remove unneccesary declaration

* make it work without allow-same-origin, add loading=lazy

* remove loading attribute, does not seem to work

* rename variable

* skip roundtrip to DOM for rendering

* don't guess chart height

* update comment to make it clear it's intentional

* tweak

* replace deprecated 'scrolling' property

* remove unused css file

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
pull/18787/head
silverwind 3 years ago committed by GitHub
parent c876124efe
commit 1f7802db97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 50 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      package-lock.json
  2. 2
      package.json
  3. 39
      web_src/js/markup/mermaid.js
  4. 1
      web_src/less/_base.less
  5. 2
      web_src/less/animations.less
  6. 1
      web_src/less/index.less
  7. 8
      web_src/less/markup/content.less
  8. 13
      web_src/less/markup/mermaid.less
  9. 4
      web_src/less/themes/theme-arc-green.less

30
package-lock.json generated
Unescape View File

@ -23,7 +23,7 @@
"less": "4.1.2",
"less-loader": "10.2.0",
"license-checker-webpack-plugin": "0.2.1",
"mermaid": "8.13.10",
"mermaid": "8.14.0",
"mini-css-extract-plugin": "2.5.2",
"monaco-editor": "0.31.1",
"monaco-editor-webpack-plugin": "7.0.1",
@ -3435,9 +3435,9 @@
}
},
"node_modules/dompurify": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.4.tgz",
"integrity": "sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ=="
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.5.tgz",
"integrity": "sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ=="
},
"node_modules/domutils": {
"version": "2.8.0",
@ -6797,15 +6797,15 @@
}
},
"node_modules/mermaid": {
"version": "8.13.10",
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.13.10.tgz",
"integrity": "sha512-2ANep359uML87+wiYaWSu83eg9Qc0xCLnNJdCh100m4v0orS3fp8SScsZLcDSElRGHi+1zuVJsEEVEWH05+COQ==",
"version": "8.14.0",
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.14.0.tgz",
"integrity": "sha512-ITSHjwVaby1Li738sxhF48sLTxcNyUAoWfoqyztL1f7J6JOLpHOuQPNLBb6lxGPUA0u7xP9IRULgvod0dKu35A==",
"dependencies": {
"@braintree/sanitize-url": "^3.1.0",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
"dompurify": "2.3.4",
"dompurify": "2.3.5",
"graphlib": "^2.1.8",
"khroma": "^1.4.1",
"moment-mini": "^2.24.0",
@ -12547,9 +12547,9 @@
}
},
"dompurify": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.4.tgz",
"integrity": "sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ=="
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.5.tgz",
"integrity": "sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ=="
},
"domutils": {
"version": "2.8.0",
@ -15033,15 +15033,15 @@
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
},
"mermaid": {
"version": "8.13.10",
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.13.10.tgz",
"integrity": "sha512-2ANep359uML87+wiYaWSu83eg9Qc0xCLnNJdCh100m4v0orS3fp8SScsZLcDSElRGHi+1zuVJsEEVEWH05+COQ==",
"version": "8.14.0",
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.14.0.tgz",
"integrity": "sha512-ITSHjwVaby1Li738sxhF48sLTxcNyUAoWfoqyztL1f7J6JOLpHOuQPNLBb6lxGPUA0u7xP9IRULgvod0dKu35A==",
"requires": {
"@braintree/sanitize-url": "^3.1.0",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
"dompurify": "2.3.4",
"dompurify": "2.3.5",
"graphlib": "^2.1.8",
"khroma": "^1.4.1",
"moment-mini": "^2.24.0",

2
package.json
Unescape View File

@ -23,7 +23,7 @@
"less": "4.1.2",
"less-loader": "10.2.0",
"license-checker-webpack-plugin": "0.2.1",
"mermaid": "8.13.10",
"mermaid": "8.14.0",
"mini-css-extract-plugin": "2.5.2",
"monaco-editor": "0.31.1",
"monaco-editor-webpack-plugin": "7.0.1",

39
web_src/js/markup/mermaid.js
Unescape View File

@ -1,5 +1,11 @@
import {isDarkTheme} from '../utils.js';
const {mermaidMaxSourceCharacters} = window.config;
const iframeCss = `
body {margin: 0; padding: 0}
#mermaid {display: block; margin: 0 auto}
`;
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
@ -15,26 +21,22 @@ export async function renderMermaid() {
const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
mermaid.initialize({
mermaid: {
startOnLoad: false,
},
flowchart: {
useMaxWidth: true,
htmlLabels: false,
},
theme: 'neutral',
startOnLoad: false,
theme: isDarkTheme() ? 'dark' : 'neutral',
securityLevel: 'strict',
});
for (const el of els) {
if (mermaidMaxSourceCharacters >= 0 && el.textContent.length > mermaidMaxSourceCharacters) {
displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
const source = el.textContent;
if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
displayError(el, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
continue;
}
let valid;
try {
valid = mermaid.parse(el.textContent);
valid = mermaid.parse(source);
} catch (err) {
displayError(el, err);
}
@ -45,10 +47,17 @@ export async function renderMermaid() {
}
try {
mermaid.init(undefined, el, (id) => {
const svg = document.getElementById(id);
svg.classList.add('mermaid-chart');
svg.closest('pre').replaceWith(svg);
// can't use bindFunctions here because we can't cross the iframe boundary. This
// means js-based interactions won't work but they aren't intended to work either
mermaid.mermaidAPI.render('mermaid', source, (svgStr) => {
const heightStr = (svgStr.match(/height="(.+?)"/) || [])[1];
if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
const iframe = document.createElement('iframe');
iframe.classList.add('markup-render');
iframe.sandbox = 'allow-scripts';
iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`;
el.closest('pre').replaceWith(iframe);
});
} catch (err) {
displayError(el, err);

1
web_src/less/_base.less
Unescape View File

@ -6,6 +6,7 @@
/* other variables */
--border-radius: .28571429rem;
--opacity-disabled: .55;
--height-loading: 12rem;
--color-primary: #4183c4;
--color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f;

2
web_src/less/animations.less
Unescape View File

@ -30,7 +30,7 @@
.markup pre.is-loading,
.editor-loading.is-loading {
height: 12rem;
height: var(--height-loading);
}
@keyframes fadein {

1
web_src/less/index.less
Unescape View File

@ -10,7 +10,6 @@
@import "./features/codeeditor.less";
@import "./features/projects.less";
@import "./markup/content.less";
@import "./markup/mermaid.less";
@import "./markup/codecopy.less";
@import "./code/linebutton.less";

8
web_src/less/markup/content.less
Unescape View File

@ -536,6 +536,14 @@
}
}
.markup-render {
display: block;
border: none;
width: 100%;
height: var(--height-loading); // actual height is set in JS after loading
overflow: hidden;
}
.markup-block-error {
margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important;

13
web_src/less/markup/mermaid.less
Unescape View File

@ -1,13 +0,0 @@
.mermaid-chart {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin: 1rem auto;
height: auto;
}
/* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */
body > div[id*="mermaid-"] {
display: none !important;
}

4
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -455,10 +455,6 @@ img[src$="/img/matrix.svg"] {
filter: invert(80%);
}
.mermaid-chart {
filter: invert(84%) hue-rotate(180deg);
}
.is-loading::after {
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
}

Write Preview
Loading…
Cancel
Save