#847 Handling of embedded javascript in links
This commit is contained in:
parent
5dd392127f
commit
c33533082c
|
@ -43,7 +43,50 @@ click C "javascript:alert" "link test"
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
graph LR;
|
||||
alert`md5_salt`-->B;
|
||||
click alert`md5_salt` eval "Tooltip for a callback"
|
||||
click B "javascript:alert`salt`" "This is a tooltip for a link"
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :1d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
Add gantt diagram to demo page :after a1 , 20h
|
||||
Add another diagram to demo page :doc1, after a1 , 48h
|
||||
|
||||
section Clickable
|
||||
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
|
||||
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
||||
|
||||
click cl1 href "javascript:alert`salt`"
|
||||
click cl2 call ganttTestClick("test", test, test)
|
||||
|
||||
section Last section
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
sequenceDiagram
|
||||
participant "Alice"
|
||||
|
@ -87,6 +130,7 @@ Class08 <--> C2: Cool label
|
|||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.2.1/dist/mermaid.min.js"></script> -->
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
|
@ -96,7 +140,7 @@ Class08 <--> C2: Cool label
|
|||
gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50 },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
securityLevel:'loose'
|
||||
securityLevel:'strict'
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
|
|
|
@ -111,13 +111,13 @@ graph LR
|
|||
id1{This is the text in the box}
|
||||
```
|
||||
|
||||
### 1
|
||||
### Trapeziod
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
### 2
|
||||
### Trapeziod alt
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mermaid",
|
||||
"version": "8.2.1",
|
||||
"version": "8.2.2",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid.core.js",
|
||||
"keywords": [
|
||||
|
|
|
@ -214,7 +214,11 @@ const setClickFun = function (id, functionName) {
|
|||
export const setLink = function (ids, linkStr, tooltip) {
|
||||
ids.split(',').forEach(function (id) {
|
||||
if (typeof vertices[id] !== 'undefined') {
|
||||
vertices[id].link = linkStr
|
||||
if (config.securityLevel === 'strict') {
|
||||
vertices[id].link = linkStr.replace(/javascript:.*/g, '')
|
||||
} else {
|
||||
vertices[id].link = linkStr
|
||||
}
|
||||
}
|
||||
})
|
||||
setTooltip(ids, tooltip)
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import moment from 'moment-mini'
|
||||
import { logger } from '../../logger'
|
||||
import * as d3 from 'd3'
|
||||
import { getConfig } from '../../config'
|
||||
|
||||
const config = getConfig()
|
||||
|
@ -430,7 +429,11 @@ const compileTasks = function () {
|
|||
* @param ids Comma separated list of ids
|
||||
* @param linkStr URL to create a link for
|
||||
*/
|
||||
export const setLink = function (ids, linkStr) {
|
||||
export const setLink = function (ids, _linkStr) {
|
||||
let linkStr = _linkStr
|
||||
if (config.securityLevel === 'strict') {
|
||||
linkStr = _linkStr.replace(/javascript:.*/g, '')
|
||||
}
|
||||
ids.split(',').forEach(function (id) {
|
||||
let rawTask = findTaskById(id)
|
||||
if (typeof rawTask !== 'undefined') {
|
||||
|
@ -490,17 +493,24 @@ const setClickFun = function (id, functionName, functionArgs) {
|
|||
*/
|
||||
const pushFun = function (id, callbackFunction) {
|
||||
funs.push(function (element) {
|
||||
const elem = d3.select(element).select(`[id="${id}"]`)
|
||||
// const elem = d3.select(element).select(`[id="${id}"]`)
|
||||
const elem = document.querySelector(`[id="${id}"]`)
|
||||
console.log('id', id)
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
console.log('id2', id)
|
||||
elem.addEventListener('click', function () {
|
||||
console.log('id3 - click', id)
|
||||
callbackFunction()
|
||||
})
|
||||
}
|
||||
})
|
||||
funs.push(function (element) {
|
||||
const elem = d3.select(element).select(`[id="${id}-text"]`)
|
||||
// const elem = d3.select(element).select(`[id="${id}-text"]`)
|
||||
const elem = document.querySelector(`[id="${id}-text"]`)
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
console.log('id4', id)
|
||||
|
||||
elem.addEventListener('click', function () {
|
||||
callbackFunction()
|
||||
})
|
||||
}
|
||||
|
|
|
@ -201,6 +201,7 @@ export const draw = function (text, id) {
|
|||
|
||||
// Append task labels
|
||||
rectangles.append('text')
|
||||
.attr('id', function (d) { return d.id + '-text' })
|
||||
.text(function (d) {
|
||||
return d.task
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue