diff options
| author | 6543 <6543@obermui.de> | 2021-05-07 10:43:41 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-05-07 10:43:41 +0200 |
| commit | 640066840e23367d9d13e92d786b877448ae9329 (patch) | |
| tree | e419f42d40a904b0b16302f3710914902f5366c0 /web_src/js/markup/mermaid.js | |
| parent | 9b5185d3cc0bd63d7387655bedaeea6340695d95 (diff) | |
| download | gitea-640066840e23367d9d13e92d786b877448ae9329.tar.gz gitea-640066840e23367d9d13e92d786b877448ae9329.zip | |
Use a generic markup class to display externally rendered files and diffs (#15735)
* creates and implements generic markup less class
* How to give custom CSS to externally rendered html
* Clarifies sources of CSS styling of markup
* further clarification of sources of markup styling
* rename _markdown to _markup
* remove defunct import
* fix orphaned reference
* Update docs/content/doc/advanced/external-renderers.en-us.md
* more renames markdown -> markup
* do not suggest less customization
* add back tokens
* fix class whitespace, remove useless if-clause
* remove unused csv-data rules
* use named exports and rename functions
* sort imports
Co-authored-by: HarvsG <11440490+HarvsG@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'web_src/js/markup/mermaid.js')
| -rw-r--r-- | web_src/js/markup/mermaid.js | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js new file mode 100644 index 0000000000..d0aefd1aff --- /dev/null +++ b/web_src/js/markup/mermaid.js @@ -0,0 +1,56 @@ +const MAX_SOURCE_CHARACTERS = 5000; + +function displayError(el, err) { + el.closest('pre').classList.remove('is-loading'); + const errorNode = document.createElement('div'); + errorNode.setAttribute('class', 'ui message error markup-block-error mono'); + errorNode.textContent = err.str || err.message || String(err); + el.closest('pre').before(errorNode); +} + +export async function renderMermaid(els) { + if (!els || !els.length) return; + + const mermaid = await import(/* webpackChunkName: "mermaid" */'mermaid'); + + mermaid.initialize({ + mermaid: { + startOnLoad: false, + }, + flowchart: { + useMaxWidth: true, + htmlLabels: false, + }, + theme: 'neutral', + securityLevel: 'strict', + }); + + for (const el of els) { + if (el.textContent.length > MAX_SOURCE_CHARACTERS) { + displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MAX_SOURCE_CHARACTERS}.`)); + continue; + } + + let valid; + try { + valid = mermaid.parse(el.textContent); + } catch (err) { + displayError(el, err); + } + + if (!valid) { + el.closest('pre').classList.remove('is-loading'); + continue; + } + + try { + mermaid.init(undefined, el, (id) => { + const svg = document.getElementById(id); + svg.classList.add('mermaid-chart'); + svg.closest('pre').replaceWith(svg); + }); + } catch (err) { + displayError(el, err); + } + } +} |