fix: handling diagram width in sandbox mode

knsv · knsv · commit 882ba03fcbe2 · 2022-02-03T19:54:24.000+01:00
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -14,6 +14,7 @@
         font-family: 'Arial';
         /* font-size: 18px !important; */
         width: 100%;
+        display: flex;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
@@ -25,7 +26,7 @@
     </style>
   </head>
   <body>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid2" style="width: 50%;">
 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
@@ -63,7 +64,7 @@
 commit
 merge newbranch
       </div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 50%;">
 sequenceDiagram
         participant a as Alice
         participant j as John
@@ -75,8 +76,7 @@
         links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
         link a: Contacts @ https://contacts.contoso.com/?contact=alice@contoso.com
         a->>j: Hello John, how are you?
-        j-->>a: Great!
-      </div>
+        j-->>a: Great!      </div>
       <div class="mermaid2" style="width: 100%;">
 journey
             title My working day
@@ -144,21 +144,13 @@
           a1-->a2-->a3
         end
       </div>
-      <div class="mermaid2" style="width: 100%;">
- flowchart TB
-      Function-->URL
+      <div class="mermaid" style="width: 50%;">
+ flowchart LR
+      Function-->URL-->A-->B-->C
       click Function clickByFlow "Add a div"
       click URL "https://mermaid-js.github.io/mermaid/#/" "Visit <strong>mermaid docs</strong>" _blank
       </div>
       <div class="mermaid2" style="width: 100%;">
-  classDiagram-v2
-    class Test
-    class ShapeLink
-    link ShapeLink "https://mermaid-js.github.io/mermaid/#/" "This is a tooltip for a link"
-    class ShapeCallback
-    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
-  </div>
-      <div class="mermaid" style="width: 100%;">
       gantt
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
@@ -264,7 +256,12 @@
     htmlLabels: true,
   },
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        sequence: {
+    actorFontFamily: 'courier',
+    actorMargin: 50,
+    showSequenceNumbers: false,
+    // forceMenus: true,
+  },
         // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -276,7 +273,7 @@
         logLevel: 0,
         fontSize: 18,
         curve: 'cardinal',
-        securityLevel: 'sandbox',
+        // securityLevel: 'sandbox',
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
@@ -6,7 +6,9 @@ import intersect from './intersect/index.js';
 import createLabel from './createLabel';
 import note from './shapes/note';
 import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate } from '../diagrams/common/common';
+import { evaluate, sanitizeText as sanitize } from '../diagrams/common/common';
+
+const sanitizeText = (txt) => sanitize(txt, getConfig());
 
 const question = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
@@ -216,7 +216,7 @@ export const setLink = function (ids, linkStr, target) {
       if (config.securityLevel === 'sandbox') {
         classes[id].linkTarget = '_top';
       } else if (typeof target === 'string') {
-        classes[id].linkTarget = target;
+        classes[id].linkTarget = sanitizeText(target);
       } else {
         classes[id].linkTarget = '_blank';
       }
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -528,7 +528,7 @@ const render = function (id, _txt, cb, container) {
     let width = '100%';
     let height = '100%';
     if (svgEl) {
-      width = svgEl.viewBox.baseVal.width + 'px';
+      // width = svgEl.viewBox.baseVal.width + 'px';
       height = svgEl.viewBox.baseVal.height + 'px';
     }
     svgCode = `<iframe style="width:${width};height:${height};border:0;margin:0;" src="data:text/html;base64,${btoa(

Original file line number	Diff line number	Diff line change
`@@ -216,7 +216,7 @@ export const setLink = function (ids, linkStr, target) {`
`216`	`216`	`if (config.securityLevel === 'sandbox') {`
`217`	`217`	`classes[id].linkTarget = '_top';`
`218`	`218`	`} else if (typeof target === 'string') {`
`219`		`- classes[id].linkTarget = target;`
	`219`	`+ classes[id].linkTarget = sanitizeText(target);`
`220`	`220`	`} else {`
`221`	`221`	`classes[id].linkTarget = '_blank';`
`222`	`222`	`}`
Original file line number	Diff line number	Diff line change
`@@ -528,7 +528,7 @@ const render = function (id, _txt, cb, container) {`
`528`	`528`	`let width = '100%';`
`529`	`529`	`let height = '100%';`
`530`	`530`	`if (svgEl) {`
`531`		`- width = svgEl.viewBox.baseVal.width + 'px';`
	`531`	`+ // width = svgEl.viewBox.baseVal.width + 'px';`
`532`	`532`	`height = svgEl.viewBox.baseVal.height + 'px';`
`533`	`533`	`}`
`534`	`534`	svgCode = `<iframe style="width:${width};height:${height};border:0;margin:0;" src="data:text/html;base64,${btoa(