fix: handling diagram width in sandbox mode

mermaid-js · Feb 3, 2022 · 882ba03 · 882ba03
1 parent 46cdacf
commit 882ba03
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
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(