marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-03 23:56:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2427 from mermaid-js/2425_Unicode_handling_for_html_labels

Browse Source 
#2425 Unicode handling for HTML labels
This commit is contained in:
Knut Sveidqvist
2021-10-21 19:58:19 +02:00
committed by GitHub
parent d144128bf0 250c9beff9
commit f8c01acd18
3 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -611,6 +611,16 @@ flowchart RL
); );
}); });
it('76: handle unicode encoded character with HTML labels true', () => {
imgSnapshotTest(
`flowchart TB
a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('2050: handling of different rendering direction in subgraphs', () => { it('2050: handling of different rendering direction in subgraphs', () => {
imgSnapshotTest( imgSnapshotTest(
` `

29
cypress/platform/current.html
View File

@@ -74,7 +74,7 @@ stateDiagram-v2
A --> D: asd123 A --> D: asd123
</div> </div>
</div> </div>
<div class="mermaid" style="width: 50%; height: 40%;"> <div class="mermaid2" style="width: 50%; height: 40%;">
%% this does not produce the desired result %% this does not produce the desired result
flowchart TB flowchart TB
subgraph container_Beta subgraph container_Beta
@@ -88,24 +88,13 @@ flowchart TB
</div> </div>
<div class="mermaid" style="width: 50%; height: 40%;"> <div class="mermaid" style="width: 50%; height: 40%;">
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% flowchart TB
flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
b-->B --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
a-->c
subgraph O
A
end
subgraph B
c
end
subgraph A
a
b
B
end
</div> </div>
<div class="mermaid" style="width: 50%; height: 50%;"> <div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TB flowchart TB
internet internet
nat nat
@@ -130,7 +119,7 @@ flowchart TB
routeur --> subnet1 & subnet2 routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet subnet1 & subnet2 --> nat --> internet
</div> </div>
<div class="mermaid" style="width: 50%; height: 50%;"> <div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD flowchart TD
subgraph one[One] subgraph one[One]
@@ -145,7 +134,7 @@ end
sub_one --> two sub_one --> two
</div> </div>
<div class="mermaid" style="width: 50%; height: 50%;"> <div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD flowchart TD
subgraph one[One] subgraph one[One]
@@ -174,7 +163,7 @@ _one --> b
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false }, flowchart: { curve: 'cardinal', "htmlLabels": true },
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true }, sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated

12
src/dagre-wrapper/shapes/util.js
View File

@@ -1,7 +1,8 @@
import createLabel from '../createLabel'; import createLabel from '../createLabel';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { decodeEntities } from '../../mermaidAPI';
import { select } from 'd3'; import { select } from 'd3';
import { evaluate } from '../../diagrams/common/common'; import { evaluate, sanitizeText } from '../../diagrams/common/common';
export const labelHelper = (parent, node, _classes, isNode) => { export const labelHelper = (parent, node, _classes, isNode) => {
let classes; let classes;
if (!_classes) { if (!_classes) {
@@ -20,7 +21,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
const text = label const text = label
.node() .node()
.appendChild(createLabel(node.labelText, node.labelStyle, false, isNode)); .appendChild(
createLabel(
sanitizeText(decodeEntities(node.labelText), getConfig()),
node.labelStyle,
false,
isNode
)
);
// Get the size of the label // Get the size of the label
let bbox = text.getBBox(); let bbox = text.getBBox();