From f50132594df69218ea550d42a986f0d419b198d3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 20:22:02 +0100 Subject: [PATCH 01/13] 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 --- package-lock.json | 30 ++++++++++++------------ package.json | 2 +- web_src/js/markup/mermaid.js | 27 ++++++++++++++------- web_src/less/_base.less | 1 + web_src/less/animations.less | 2 +- web_src/less/markup/content.less | 8 +++++++ web_src/less/markup/mermaid.less | 9 ------- web_src/less/themes/theme-arc-green.less | 4 ---- 8 files changed, 44 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index e14de9b68d4de..0f4500e23b981 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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.3", "monaco-editor": "0.32.1", "monaco-editor-webpack-plugin": "7.0.1", @@ -3466,9 +3466,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", @@ -6751,15 +6751,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", @@ -12526,9 +12526,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", @@ -14898,15 +14898,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", diff --git a/package.json b/package.json index 0c71cf9726c53..67de8a7f0a02a 100644 --- a/package.json +++ b/package.json @@ -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.3", "monaco-editor": "0.32.1", "monaco-editor-webpack-plugin": "7.0.1", diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 7c7ee26c3c503..4c1be9514f3ea 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -1,3 +1,4 @@ +import {isDarkTheme} from '../utils.js'; const {mermaidMaxSourceCharacters} = window.config; function displayError(el, err) { @@ -15,14 +16,8 @@ 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', }); @@ -48,7 +43,21 @@ export async function renderMermaid() { mermaid.init(undefined, el, (id) => { const svg = document.getElementById(id); svg.classList.add('mermaid-chart'); - svg.closest('pre').replaceWith(svg); + const iframe = document.createElement('iframe'); + iframe.classList.add('markup-render'); + // allow-same-origin is to set inline style below + iframe.sandbox = 'allow-scripts allow-same-origin'; + iframe.srcdoc = svg.outerHTML; + iframe.addEventListener('load', () => { + const style = document.createElement('style'); + style.appendChild(document.createTextNode(` + body {margin: 0; padding: 0; overflow: hidden} + .mermaid-chart {display: block; margin: 0 auto} + `)); + iframe.contentWindow.document.head.appendChild(style); + iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`; + }); + svg.closest('pre').replaceWith(iframe); }); } catch (err) { displayError(el, err); diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 8e06d16405fdb..55439d6cea28a 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -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; diff --git a/web_src/less/animations.less b/web_src/less/animations.less index cdb10236fbcc3..083e10089d15c 100644 --- a/web_src/less/animations.less +++ b/web_src/less/animations.less @@ -30,7 +30,7 @@ .markup pre.is-loading, .editor-loading.is-loading { - height: 12rem; + height: var(--height-loading); } @keyframes fadein { diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less index 71e98652c8c34..b8dafe351159a 100644 --- a/web_src/less/markup/content.less +++ b/web_src/less/markup/content.less @@ -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; diff --git a/web_src/less/markup/mermaid.less b/web_src/less/markup/mermaid.less index f68b577decf13..4d19d973eaf9b 100644 --- a/web_src/less/markup/mermaid.less +++ b/web_src/less/markup/mermaid.less @@ -1,12 +1,3 @@ -.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 , hide it */ body > div[id*="mermaid-"] { display: none !important; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 5d107cef967c4..0b8d92b01ff94 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -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; } From 34d510791fe11fba42ed6bd575972b7c97c6de50 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 20:43:14 +0100 Subject: [PATCH 02/13] restart ci From aae3daf50fea4e52dbff8a8266b51ff1342e18f2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 20:51:39 +0100 Subject: [PATCH 03/13] misc tweaks --- web_src/js/markup/mermaid.js | 5 +++-- web_src/less/markup/content.less | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 4c1be9514f3ea..4564bb92416ac 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -45,8 +45,8 @@ export async function renderMermaid() { svg.classList.add('mermaid-chart'); const iframe = document.createElement('iframe'); iframe.classList.add('markup-render'); - // allow-same-origin is to set inline style below - iframe.sandbox = 'allow-scripts allow-same-origin'; + iframe.sandbox = 'allow-scripts allow-same-origin'; // allow-same-origin is to add style below + iframe.scrolling = 'no'; iframe.srcdoc = svg.outerHTML; iframe.addEventListener('load', () => { const style = document.createElement('style'); @@ -58,6 +58,7 @@ export async function renderMermaid() { iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`; }); svg.closest('pre').replaceWith(iframe); + iframe.sandbox = 'allow-scripts'; // remove allow-same-origin again }); } catch (err) { displayError(el, err); diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less index b8dafe351159a..ab5fcdf53f4d1 100644 --- a/web_src/less/markup/content.less +++ b/web_src/less/markup/content.less @@ -541,7 +541,6 @@ border: none; width: 100%; height: var(--height-loading); // actual height is set in JS after loading - overflow: hidden; } .markup-block-error { From 1953abe92a7f4431b757296f2e7a904b8c2b6c43 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 20:55:21 +0100 Subject: [PATCH 04/13] remove unneccesary declaration --- web_src/js/markup/mermaid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 4564bb92416ac..18f13e00289b6 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -51,7 +51,7 @@ export async function renderMermaid() { iframe.addEventListener('load', () => { const style = document.createElement('style'); style.appendChild(document.createTextNode(` - body {margin: 0; padding: 0; overflow: hidden} + body {margin: 0; padding: 0} .mermaid-chart {display: block; margin: 0 auto} `)); iframe.contentWindow.document.head.appendChild(style); From eb9b65f84b4e624e711a52f835d6d7fd047721bd Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 22:14:15 +0100 Subject: [PATCH 05/13] make it work without allow-same-origin, add loading=lazy --- web_src/js/markup/mermaid.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 18f13e00289b6..941498b9f4396 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -1,6 +1,11 @@ import {isDarkTheme} from '../utils.js'; const {mermaidMaxSourceCharacters} = window.config; +const iframeStyle = ` + body {margin: 0; padding: 0} + .mermaid-chart {display: block; margin: 0 auto} +`; + function displayError(el, err) { el.closest('pre').classList.remove('is-loading'); const errorNode = document.createElement('div'); @@ -45,20 +50,12 @@ export async function renderMermaid() { svg.classList.add('mermaid-chart'); const iframe = document.createElement('iframe'); iframe.classList.add('markup-render'); - iframe.sandbox = 'allow-scripts allow-same-origin'; // allow-same-origin is to add style below + iframe.sandbox = 'allow-scripts'; iframe.scrolling = 'no'; - iframe.srcdoc = svg.outerHTML; - iframe.addEventListener('load', () => { - const style = document.createElement('style'); - style.appendChild(document.createTextNode(` - body {margin: 0; padding: 0} - .mermaid-chart {display: block; margin: 0 auto} - `)); - iframe.contentWindow.document.head.appendChild(style); - iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`; - }); + iframe.loading = 'lazy'; + iframe.style.height = `${Math.ceil(svg.getAttribute('height'))}px`; + iframe.srcdoc = `${svg.outerHTML}`; svg.closest('pre').replaceWith(iframe); - iframe.sandbox = 'allow-scripts'; // remove allow-same-origin again }); } catch (err) { displayError(el, err); From ab992645f2d3c625800b40f9c7d23863bde7709f Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 22:19:34 +0100 Subject: [PATCH 06/13] remove loading attribute, does not seem to work --- web_src/js/markup/mermaid.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 941498b9f4396..be00a1a2d955c 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -52,7 +52,6 @@ export async function renderMermaid() { iframe.classList.add('markup-render'); iframe.sandbox = 'allow-scripts'; iframe.scrolling = 'no'; - iframe.loading = 'lazy'; iframe.style.height = `${Math.ceil(svg.getAttribute('height'))}px`; iframe.srcdoc = `${svg.outerHTML}`; svg.closest('pre').replaceWith(iframe); From f0874f3d79b256e3e5be9b12a132501b00b9a310 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Feb 2022 22:23:59 +0100 Subject: [PATCH 07/13] rename variable --- web_src/js/markup/mermaid.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index be00a1a2d955c..abeec047525b2 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -1,7 +1,7 @@ import {isDarkTheme} from '../utils.js'; const {mermaidMaxSourceCharacters} = window.config; -const iframeStyle = ` +const iframeCss = ` body {margin: 0; padding: 0} .mermaid-chart {display: block; margin: 0 auto} `; @@ -53,7 +53,7 @@ export async function renderMermaid() { iframe.sandbox = 'allow-scripts'; iframe.scrolling = 'no'; iframe.style.height = `${Math.ceil(svg.getAttribute('height'))}px`; - iframe.srcdoc = `${svg.outerHTML}`; + iframe.srcdoc = `${svg.outerHTML}`; svg.closest('pre').replaceWith(iframe); }); } catch (err) { From 5512f0251c097fa078f4eb6967c3655c02cbddeb Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Feb 2022 01:16:50 +0100 Subject: [PATCH 08/13] skip roundtrip to DOM for rendering --- web_src/js/markup/mermaid.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index abeec047525b2..4d6b93439e4d8 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -3,7 +3,7 @@ const {mermaidMaxSourceCharacters} = window.config; const iframeCss = ` body {margin: 0; padding: 0} - .mermaid-chart {display: block; margin: 0 auto} + #mermaid {display: block; margin: 0 auto} `; function displayError(el, err) { @@ -27,14 +27,16 @@ export async function renderMermaid() { }); 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,16 +47,19 @@ export async function renderMermaid() { } try { - mermaid.init(undefined, el, (id) => { - const svg = document.getElementById(id); - svg.classList.add('mermaid-chart'); + // Can't use bindFunctions here because we can't pass functions to the iframe, which + // means js-based interaction in charts will not work, but it seems this feature is + // disabled in "strict" securityLevel anyways. + mermaid.mermaidAPI.render('mermaid', source, (svgStr) => { + const heightStr = (svgStr.match(/height="(.+?)"/) || [])[1]; + const height = heightStr ? Math.ceil(parseFloat(heightStr)) : 600; // best-effort fallback const iframe = document.createElement('iframe'); iframe.classList.add('markup-render'); iframe.sandbox = 'allow-scripts'; iframe.scrolling = 'no'; - iframe.style.height = `${Math.ceil(svg.getAttribute('height'))}px`; - iframe.srcdoc = `${svg.outerHTML}`; - svg.closest('pre').replaceWith(iframe); + iframe.style.height = `${height}px`; + iframe.srcdoc = `${svgStr}`; + el.closest('pre').replaceWith(iframe); }); } catch (err) { displayError(el, err); From a49b789a4fd7d77945ad8f8e81d420a9f4684f66 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Feb 2022 01:29:46 +0100 Subject: [PATCH 09/13] don't guess chart height --- web_src/js/markup/mermaid.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 4d6b93439e4d8..cd52571b774b2 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -52,12 +52,12 @@ export async function renderMermaid() { // disabled in "strict" securityLevel anyways. mermaid.mermaidAPI.render('mermaid', source, (svgStr) => { const heightStr = (svgStr.match(/height="(.+?)"/) || [])[1]; - const height = heightStr ? Math.ceil(parseFloat(heightStr)) : 600; // best-effort fallback + 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.scrolling = 'no'; - iframe.style.height = `${height}px`; + iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`; iframe.srcdoc = `${svgStr}`; el.closest('pre').replaceWith(iframe); }); From b563a7a7760b4f9d756f72facb26e7898ec735fb Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Feb 2022 01:43:14 +0100 Subject: [PATCH 10/13] update comment to make it clear it's intentional --- web_src/js/markup/mermaid.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index cd52571b774b2..940f55c91509d 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -47,9 +47,8 @@ export async function renderMermaid() { } try { - // Can't use bindFunctions here because we can't pass functions to the iframe, which - // means js-based interaction in charts will not work, but it seems this feature is - // disabled in "strict" securityLevel anyways. + // can't use bindFunctions here because we 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')); From 41141ccace9f577349339b7007b7b7fde870acb6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Feb 2022 01:43:43 +0100 Subject: [PATCH 11/13] tweak --- web_src/js/markup/mermaid.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 940f55c91509d..0581cc63883b0 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -47,8 +47,8 @@ export async function renderMermaid() { } try { - // can't use bindFunctions here because we cross the iframe boundary. This means - // js-based interactions won't work but they aren't intended to work either + // 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')); From ced1c138a4f857a7d330dfbfbb4e4128779c2d75 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Feb 2022 02:00:43 +0100 Subject: [PATCH 12/13] replace deprecated 'scrolling' property --- web_src/js/markup/mermaid.js | 1 - web_src/less/markup/content.less | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 0581cc63883b0..773c46e791089 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -55,7 +55,6 @@ export async function renderMermaid() { const iframe = document.createElement('iframe'); iframe.classList.add('markup-render'); iframe.sandbox = 'allow-scripts'; - iframe.scrolling = 'no'; iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`; iframe.srcdoc = `${svgStr}`; el.closest('pre').replaceWith(iframe); diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less index ab5fcdf53f4d1..b8dafe351159a 100644 --- a/web_src/less/markup/content.less +++ b/web_src/less/markup/content.less @@ -541,6 +541,7 @@ border: none; width: 100%; height: var(--height-loading); // actual height is set in JS after loading + overflow: hidden; } .markup-block-error { From 6b1704667db8c260aec3d0584b62f1fc026195ff Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Feb 2022 02:59:12 +0100 Subject: [PATCH 13/13] remove unused css file --- web_src/less/index.less | 1 - web_src/less/markup/mermaid.less | 4 ---- 2 files changed, 5 deletions(-) delete mode 100644 web_src/less/markup/mermaid.less diff --git a/web_src/less/index.less b/web_src/less/index.less index e95cb72eb071f..805c68f2c4b0f 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -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"; diff --git a/web_src/less/markup/mermaid.less b/web_src/less/markup/mermaid.less deleted file mode 100644 index 4d19d973eaf9b..0000000000000 --- a/web_src/less/markup/mermaid.less +++ /dev/null @@ -1,4 +0,0 @@ -/* mermaid's errorRenderer seems to unavoidably spew stuff into , hide it */ -body > div[id*="mermaid-"] { - display: none !important; -}