Various Mermaid improvements (#18776) (#18780)

* 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>
This commit is contained in:
silverwind 2022-02-16 10:26:53 +01:00 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

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;

View file

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

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";

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;

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;
}

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;
}