From 4315e313d12bbf0655710b6ab0aad121e0f7dba2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 Jul 2020 08:24:09 +0200
Subject: [PATCH] Add mermaid JS renderer (#12334)
* Add mermaid JS renderer
For feature parity with GitLab. Tested in files, issues, wiki, editor.
arc-green only does an inversion because the renderer seems to like to
render white backgrounds on boxes.
Ref: https://github.com/go-gitea/gitea/issues/3340
Fixes: https://github.com/go-gitea/gitea/issues/12307
* add feature entry, switch to neutral theme, remove border
* add bindFunctions support
* remove unnecessary border-radius
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
---
.../doc/advanced/customizing-gitea.en-us.md | 39 --
docs/content/page/index.en-us.md | 1 +
package-lock.json | 464 +++++++++++++++++-
package.json | 1 +
web_src/js/index.js | 6 +
web_src/js/markdown/content.js | 5 +
web_src/js/markdown/mermaid.js | 23 +
web_src/js/utils.js | 11 +
web_src/less/_markdown.less | 8 +
web_src/less/themes/theme-arc-green.less | 4 +
10 files changed, 521 insertions(+), 41 deletions(-)
create mode 100644 web_src/js/markdown/content.js
create mode 100644 web_src/js/markdown/mermaid.js
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
index d6a2019ac0..6bc7be4ad0 100644
--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -108,45 +108,6 @@ Apart from `extra_links.tmpl` and `extra_tabs.tmpl`, there are other useful temp
- `body_outer_post.tmpl`, before the bottom `<footer>` element.
- `footer.tmpl`, right before the end of the `<body>` tag, a good place for additional Javascript.
-#### Example: Mermaid.js
-
-If you would like to add [mermaid.js](https://mermaid-js.github.io/mermaid) support to Gitea's markdown you simply add:
-
-```html
-{{if .RequireHighlightJS}}
-<script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>
-<!-- or wherever you have placed it -->
-<script>mermaid.init(".language-mermaid")</script>
-{{end}}
-```
-
-to `custom/footer.tmpl`. You then can add blocks
-like below to your markdown:
-
- ```mermaid
- stateDiagram
- [*] --> Active
-
- state Active {
- [*] --> NumLockOff
- NumLockOff --> NumLockOn : EvNumLockPressed
- NumLockOn --> NumLockOff : EvNumLockPressed
- --
- [*] --> CapsLockOff
- CapsLockOff --> CapsLockOn : EvCapsLockPressed
- CapsLockOn --> CapsLockOff : EvCapsLockPressed
- --
- [*] --> ScrollLockOff
- ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
- ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
- }
- ```
-
-If you want to use Mermaid.js outside of markdown, e.g. in other templates or HTML files,
-you would need to remove `{{if .RequireHighlightJS}}` and `{{end}}`.
-
-Mermaid will detect and use tags with `class="language-mermaid"`.
-
#### Example: PlantUML
You can add [PlantUML](https://plantuml.com/) support to Gitea's markdown by using a PlantUML server.
diff --git a/docs/content/page/index.en-us.md b/docs/content/page/index.en-us.md
index 027fcbfcc9..32ce9c1238 100644
--- a/docs/content/page/index.en-us.md
+++ b/docs/content/page/index.en-us.md
@@ -128,6 +128,7 @@ Windows, on architectures like amd64, i386, ARM, PowerPC, and others.
- Environment variables
- Command line options
- Multi-language support ([21 languages](https://github.com/go-gitea/gitea/tree/master/options/locale))
+- [Mermaid](https://mermaidjs.github.io/) Diagram support
- Mail service
- Notifications
- Registration confirmation
diff --git a/package-lock.json b/package-lock.json
index 5754c9fc54..b0bc6fc22f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2492,6 +2492,15 @@
"resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
},
+ "camel-case": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+ "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+ "requires": {
+ "no-case": "^2.2.0",
+ "upper-case": "^1.1.1"
+ }
+ },
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -3219,6 +3228,14 @@
"randomfill": "^1.0.3"
}
},
+ "crypto-random-string": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-3.2.0.tgz",
+ "integrity": "sha512-8vPu5bsKaq2uKRy3OL7h1Oo7RayAWB8sYexLKAqvCXVib8SxgbmoF1IN4QMKjBv8uI8mp5gPPMbiRah25GMrVQ==",
+ "requires": {
+ "type-fest": "^0.8.1"
+ }
+ },
"css": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
@@ -3237,6 +3254,11 @@
}
}
},
+ "css-b64-images": {
+ "version": "0.2.5",
+ "resolved": "https://registry.npmjs.org/css-b64-images/-/css-b64-images-0.2.5.tgz",
+ "integrity": "sha1-QgBdgyBLK0pdk7axpWRBM7WSegI="
+ },
"css-blank-pseudo": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -3501,6 +3523,290 @@
"type": "^1.0.1"
}
},
+ "d3": {
+ "version": "5.16.0",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+ "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+ "requires": {
+ "d3-array": "1",
+ "d3-axis": "1",
+ "d3-brush": "1",
+ "d3-chord": "1",
+ "d3-collection": "1",
+ "d3-color": "1",
+ "d3-contour": "1",
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-dsv": "1",
+ "d3-ease": "1",
+ "d3-fetch": "1",
+ "d3-force": "1",
+ "d3-format": "1",
+ "d3-geo": "1",
+ "d3-hierarchy": "1",
+ "d3-interpolate": "1",
+ "d3-path": "1",
+ "d3-polygon": "1",
+ "d3-quadtree": "1",
+ "d3-random": "1",
+ "d3-scale": "2",
+ "d3-scale-chromatic": "1",
+ "d3-selection": "1",
+ "d3-shape": "1",
+ "d3-time": "1",
+ "d3-time-format": "2",
+ "d3-timer": "1",
+ "d3-transition": "1",
+ "d3-voronoi": "1",
+ "d3-zoom": "1"
+ }
+ },
+ "d3-array": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+ "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+ },
+ "d3-axis": {
+ "version": "1.0.12",
+ "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+ "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+ },
+ "d3-brush": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.5.tgz",
+ "integrity": "sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
+ },
+ "d3-chord": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+ "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+ "requires": {
+ "d3-array": "1",
+ "d3-path": "1"
+ }
+ },
+ "d3-collection": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+ "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+ },
+ "d3-color": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+ "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+ },
+ "d3-contour": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+ "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+ "requires": {
+ "d3-array": "^1.1.1"
+ }
+ },
+ "d3-dispatch": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+ "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+ },
+ "d3-drag": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+ "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-selection": "1"
+ }
+ },
+ "d3-dsv": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+ "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+ "requires": {
+ "commander": "2",
+ "iconv-lite": "0.4",
+ "rw": "1"
+ }
+ },
+ "d3-ease": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
+ "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
+ },
+ "d3-fetch": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+ "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
+ "requires": {
+ "d3-dsv": "1"
+ }
+ },
+ "d3-force": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+ "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+ "requires": {
+ "d3-collection": "1",
+ "d3-dispatch": "1",
+ "d3-quadtree": "1",
+ "d3-timer": "1"
+ }
+ },
+ "d3-format": {
+ "version": "1.4.4",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
+ "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+ },
+ "d3-geo": {
+ "version": "1.12.1",
+ "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+ "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+ "requires": {
+ "d3-array": "1"
+ }
+ },
+ "d3-hierarchy": {
+ "version": "1.1.9",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+ "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+ },
+ "d3-interpolate": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+ "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+ "requires": {
+ "d3-color": "1"
+ }
+ },
+ "d3-path": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+ "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+ },
+ "d3-polygon": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+ "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+ },
+ "d3-quadtree": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+ "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+ },
+ "d3-random": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+ "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
+ },
+ "d3-scale": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+ "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+ "requires": {
+ "d3-array": "^1.2.0",
+ "d3-collection": "1",
+ "d3-format": "1",
+ "d3-interpolate": "1",
+ "d3-time": "1",
+ "d3-time-format": "2"
+ }
+ },
+ "d3-scale-chromatic": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+ "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+ "requires": {
+ "d3-color": "1",
+ "d3-interpolate": "1"
+ }
+ },
+ "d3-selection": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+ "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+ },
+ "d3-shape": {
+ "version": "1.3.7",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+ "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+ "requires": {
+ "d3-path": "1"
+ }
+ },
+ "d3-time": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+ "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+ },
+ "d3-time-format": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
+ "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+ "requires": {
+ "d3-time": "1"
+ }
+ },
+ "d3-timer": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+ "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+ },
+ "d3-transition": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+ "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+ "requires": {
+ "d3-color": "1",
+ "d3-dispatch": "1",
+ "d3-ease": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "^1.1.0",
+ "d3-timer": "1"
+ }
+ },
+ "d3-voronoi": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+ "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+ },
+ "d3-zoom": {
+ "version": "1.8.3",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+ "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
+ },
+ "dagre": {
+ "version": "0.8.5",
+ "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+ "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+ "requires": {
+ "graphlib": "^2.1.8",
+ "lodash": "^4.17.15"
+ }
+ },
+ "dagre-d3": {
+ "version": "0.6.4",
+ "resolved": "https://registry.npmjs.org/dagre-d3/-/dagre-d3-0.6.4.tgz",
+ "integrity": "sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==",
+ "requires": {
+ "d3": "^5.14",
+ "dagre": "^0.8.5",
+ "graphlib": "^2.1.8",
+ "lodash": "^4.17.15"
+ }
+ },
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -4003,6 +4309,14 @@
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
"integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
},
+ "entity-decode": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/entity-decode/-/entity-decode-2.0.2.tgz",
+ "integrity": "sha512-5CCY/3ci4MC1m2jlumNjWd7VBFt4VfFnmSqSNmVcXq4gxM3Vmarxtt+SvmBnzwLS669MWdVuXboNVj1qN2esVg==",
+ "requires": {
+ "he": "^1.1.1"
+ }
+ },
"errno": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -4097,6 +4411,11 @@
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
},
+ "escaper": {
+ "version": "2.5.3",
+ "resolved": "https://registry.npmjs.org/escaper/-/escaper-2.5.3.tgz",
+ "integrity": "sha512-QGb9sFxBVpbzMggrKTX0ry1oiI4CSDAl9vIL702hzl1jGW8VZs7qfqTRX7WDOjoNDoEVGcEtu1ZOQgReSfT2kQ=="
+ },
"eslint": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.4.0.tgz",
@@ -5729,6 +6048,14 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
},
+ "graphlib": {
+ "version": "2.1.8",
+ "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+ "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+ "requires": {
+ "lodash": "^4.17.15"
+ }
+ },
"growly": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -6849,6 +7176,27 @@
"resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
"integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
},
+ "html-minifier": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
+ "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
+ "requires": {
+ "camel-case": "^3.0.0",
+ "clean-css": "^4.2.1",
+ "commander": "^2.19.0",
+ "he": "^1.2.0",
+ "param-case": "^2.1.1",
+ "relateurl": "^0.2.7",
+ "uglify-js": "^3.5.1"
+ },
+ "dependencies": {
+ "uglify-js": {
+ "version": "3.10.0",
+ "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.0.tgz",
+ "integrity": "sha512-Esj5HG5WAyrLIdYU74Z3JdG2PxdIusvj6IWHMtlyESxc7kcDz7zYlYjpnSokn1UbpV0d/QX9fan7gkCNd/9BQA=="
+ }
+ }
+ },
"html-tags": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -8218,6 +8566,11 @@
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
+ "lower-case": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+ "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+ },
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@@ -8653,6 +9006,31 @@
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
},
+ "mermaid": {
+ "version": "8.6.3",
+ "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.6.3.tgz",
+ "integrity": "sha512-oedt5nwCB+5jqPhyd45ml9bYd8WlldcMGT1KgpyKYL58gcnMKjxbHDa/g2fQXSPKopK+O3u7CmgXxXwMyW+4aA==",
+ "requires": {
+ "@braintree/sanitize-url": "^3.1.0",
+ "crypto-random-string": "^3.0.1",
+ "d3": "^5.7.0",
+ "dagre": "^0.8.4",
+ "dagre-d3": "^0.6.4",
+ "entity-decode": "^2.0.2",
+ "graphlib": "^2.1.7",
+ "he": "^1.2.0",
+ "minify": "^4.1.1",
+ "moment-mini": "^2.22.1",
+ "scope-css": "^1.2.1"
+ },
+ "dependencies": {
+ "@braintree/sanitize-url": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
+ "integrity": "sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg=="
+ }
+ }
+ },
"micromatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -8742,6 +9120,20 @@
}
}
},
+ "minify": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/minify/-/minify-4.1.3.tgz",
+ "integrity": "sha512-ykuscavxivSmVpcCzsXmsVTukWYLUUtPhHj0w2ILvHDGqC+hsuTCihBn9+PJBd58JNvWTNg9132J9nrrI2anzA==",
+ "requires": {
+ "clean-css": "^4.1.6",
+ "css-b64-images": "~0.2.5",
+ "debug": "^4.1.0",
+ "html-minifier": "^4.0.0",
+ "terser": "^4.0.0",
+ "try-catch": "^2.0.0",
+ "try-to-catch": "^1.0.2"
+ }
+ },
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -8891,6 +9283,11 @@
"minimist": "^1.2.5"
}
},
+ "moment-mini": {
+ "version": "2.24.0",
+ "resolved": "https://registry.npmjs.org/moment-mini/-/moment-mini-2.24.0.tgz",
+ "integrity": "sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ=="
+ },
"monaco-editor": {
"version": "0.20.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.20.0.tgz",
@@ -8991,6 +9388,14 @@
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
},
+ "no-case": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+ "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+ "requires": {
+ "lower-case": "^1.1.1"
+ }
+ },
"node-fetch": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
@@ -9399,6 +9804,14 @@
"readable-stream": "^2.1.5"
}
},
+ "param-case": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+ "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+ "requires": {
+ "no-case": "^2.2.0"
+ }
+ },
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11227,6 +11640,11 @@
}
}
},
+ "relateurl": {
+ "version": "0.2.7",
+ "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+ },
"remark": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/remark/-/remark-12.0.0.tgz",
@@ -11638,6 +12056,11 @@
"aproba": "^1.1.1"
}
},
+ "rw": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+ "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+ },
"rxjs": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.0.tgz",
@@ -11679,6 +12102,16 @@
"ajv-keywords": "^3.4.1"
}
},
+ "scope-css": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/scope-css/-/scope-css-1.2.1.tgz",
+ "integrity": "sha512-UjLRmyEYaDNiOS673xlVkZFlVCtckJR/dKgr434VMm7Lb+AOOqXKdAcY7PpGlJYErjXXJzKN7HWo4uRPiZZG0Q==",
+ "requires": {
+ "escaper": "^2.5.3",
+ "slugify": "^1.3.1",
+ "strip-css-comments": "^3.0.0"
+ }
+ },
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -11826,6 +12259,11 @@
}
}
},
+ "slugify": {
+ "version": "1.4.5",
+ "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
+ "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
+ },
"snapdragon": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -12256,6 +12694,14 @@
"strip-bom-buf": "^1.0.0"
}
},
+ "strip-css-comments": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/strip-css-comments/-/strip-css-comments-3.0.0.tgz",
+ "integrity": "sha1-elYl7/iisibPiUehElTaluE9rok=",
+ "requires": {
+ "is-regexp": "^1.0.0"
+ }
+ },
"strip-eof": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -13126,6 +13572,16 @@
"integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
"dev": true
},
+ "try-catch": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/try-catch/-/try-catch-2.0.1.tgz",
+ "integrity": "sha512-LsOrmObN/2WdM+y2xG+t16vhYrQsnV8wftXIcIOWZhQcBJvKGYuamJGwnU98A7Jxs2oZNkJztXlphEOoA0DWqg=="
+ },
+ "try-to-catch": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/try-to-catch/-/try-to-catch-1.1.1.tgz",
+ "integrity": "sha512-ikUlS+/BcImLhNYyIgZcEmq4byc31QpC+46/6Jm5ECWkVFhf8SM2Fp/0pMVXPX6vk45SMCwrP4Taxucne8I0VA=="
+ },
"tsconfig-paths": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
@@ -13197,8 +13653,7 @@
"type-fest": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
- "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
- "dev": true
+ "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
},
"typedarray": {
"version": "0.0.6",
@@ -13511,6 +13966,11 @@
"integrity": "sha512-NkghVbjJeIBaiuC+Yvr8B99L2E/THCBoO9REo1uH+ulpxJyO2S4UNKSwXgbSC7GBRjTd/+0LFYFTQsbVfLQNaw==",
"dev": true
},
+ "upper-case": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+ "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+ },
"uri-js": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
diff --git a/package.json b/package.json
index ad4eca5cc3..56d021d579 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"jquery.are-you-sure": "1.9.0",
"less-loader": "6.2.0",
"license-webpack-plugin": "2.2.0",
+ "mermaid": "8.6.3",
"mini-css-extract-plugin": "0.9.0",
"monaco-editor": "0.20.0",
"monaco-editor-webpack-plugin": "1.9.0",
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 03f0c6e4cc..cb1d39e62d 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -13,6 +13,7 @@ import initClipboard from './features/clipboard.js';
import initUserHeatmap from './features/userheatmap.js';
import initServiceWorker from './features/serviceworker.js';
import initMarkdownAnchors from './markdown/anchors.js';
+import renderMarkdownContent from './markdown/content.js';
import attachTribute from './features/tribute.js';
import createDropzone from './features/dropzone.js';
import initTableSort from './features/tablesort.js';
@@ -46,6 +47,7 @@ function initCommentPreviewTab($form) {
}, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data);
+ renderMarkdownContent();
});
});
@@ -75,6 +77,7 @@ function initEditPreviewTab($form) {
}, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data);
+ renderMarkdownContent();
});
});
}
@@ -1007,6 +1010,7 @@ async function initRepository() {
}
dz.emit('submit');
dz.emit('reload');
+ renderMarkdownContent();
});
});
} else {
@@ -1347,6 +1351,7 @@ function initWikiForm() {
wiki: true
}, (data) => {
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
+ renderMarkdownContent();
});
};
if (!simplemde.isSideBySideActive()) {
@@ -2484,6 +2489,7 @@ $(document).ready(async () => {
initUserHeatmap(),
initServiceWorker(),
initNotificationCount(),
+ renderMarkdownContent(),
]);
});
diff --git a/web_src/js/markdown/content.js b/web_src/js/markdown/content.js
new file mode 100644
index 0000000000..f41800ee30
--- /dev/null
+++ b/web_src/js/markdown/content.js
@@ -0,0 +1,5 @@
+import {renderMermaid} from './mermaid.js';
+
+export default async function renderMarkdownContent() {
+ await renderMermaid(document.querySelectorAll('.language-mermaid'));
+}
diff --git a/web_src/js/markdown/mermaid.js b/web_src/js/markdown/mermaid.js
new file mode 100644
index 0000000000..1fda101dc0
--- /dev/null
+++ b/web_src/js/markdown/mermaid.js
@@ -0,0 +1,23 @@
+import {random} from '../utils.js';
+
+export async function renderMermaid(els) {
+ if (!els || !els.length) return;
+
+ const {mermaidAPI} = await import(/* webpackChunkName: "mermaid" */'mermaid');
+
+ mermaidAPI.initialize({
+ startOnLoad: false,
+ theme: 'neutral',
+ securityLevel: 'strict',
+ });
+
+ for (const el of els) {
+ mermaidAPI.render(`mermaid-${random(12)}`, el.textContent, (svg, bindFunctions) => {
+ const div = document.createElement('div');
+ div.classList.add('mermaid-chart');
+ div.innerHTML = svg;
+ if (typeof bindFunctions === 'function') bindFunctions(div);
+ el.closest('pre').replaceWith(div);
+ });
+ }
+}
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 229f4d6304..d5f921f8dc 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -23,3 +23,14 @@ export function isDarkTheme() {
export function uniq(arr) {
return Array.from(new Set(arr));
}
+
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+// generate a random string
+export function random(length) {
+ let str = '';
+ for (let i = 0; i < length; i++) {
+ str += chars.charAt(Math.floor(Math.random() * chars.length));
+ }
+ return str;
+}
diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index e2ac664bec..0f57bc4449 100644
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -494,3 +494,11 @@
user-select: none;
}
}
+
+.mermaid-chart {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+ margin: 1rem 0;
+}
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 49d9821cdd..e623656017 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1898,3 +1898,7 @@ footer .container .links > * {
.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
color: #2a2e3a;
}
+
+.mermaid-chart {
+ filter: invert(84%) hue-rotate(180deg);
+}