diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js index dcb62164c..9bf00913a 100644 --- a/src/diagrams/class/classDb.js +++ b/src/diagrams/class/classDb.js @@ -1,6 +1,7 @@ import * as d3 from 'd3'; import { logger } from '../../logger'; import { getConfig } from '../../config'; +import common from '../common/common'; import utils from '../../utils'; const MERMAID_DOM_ID_PREFIX = 'classid-'; @@ -175,7 +176,7 @@ export const setLink = function(ids, linkStr, tooltip) { classes[id].link = utils.formatUrl(linkStr, config); if (tooltip) { - classes[id].tooltip = utils.sanitize(tooltip, config); + classes[id].tooltip = common.sanitizeText(tooltip, config); } } }); @@ -207,7 +208,7 @@ const setClickFunc = function(domId, functionName, tooltip) { } if (typeof classes[id] !== 'undefined') { if (tooltip) { - classes[id].tooltip = utils.sanitize(tooltip, config); + classes[id].tooltip = common.sanitizeText(tooltip, config); } funs.push(function() { diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js new file mode 100644 index 000000000..cc91948fc --- /dev/null +++ b/src/diagrams/common/common.js @@ -0,0 +1,39 @@ +export const getRows = s => { + if (!s) return 1; + let str = breakToPlaceholder(s); + str = str.replace(/\\n/g, '#br#'); + return str.split('#br#'); +}; + +export const sanitizeText = (text, config) => { + let txt = text; + let htmlLabels = true; + if ( + config.flowchart && + (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false') + ) + htmlLabels = false; + + if (config.securityLevel !== 'loose' && htmlLabels) { + // eslint-disable-line + txt = breakToPlaceholder(txt); + txt = txt.replace(//g, '>'); + txt = txt.replace(/=/g, '='); + txt = placeholderToBreak(txt); + } + + return txt; +}; + +const breakToPlaceholder = s => { + return s.replace(//gi, '#br#'); +}; + +const placeholderToBreak = s => { + return s.replace(/#br#/g, '
'); +}; + +export default { + getRows, + sanitizeText +}; diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index 404fdfceb..4917a54a7 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/src/diagrams/flowchart/flowDb.js @@ -2,6 +2,7 @@ import * as d3 from 'd3'; import { logger } from '../../logger'; import utils from '../../utils'; import { getConfig } from '../../config'; +import common from '../common/common'; // const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-'; const MERMAID_DOM_ID_PREFIX = ''; @@ -43,7 +44,7 @@ export const addVertex = function(_id, text, type, style, classes) { vertices[id] = { id: id, styles: [], classes: [] }; } if (typeof text !== 'undefined') { - txt = utils.sanitize(text.trim(), config); + txt = common.sanitizeText(text.trim(), config); // strip quotes if string starts and ends with a quote if (txt[0] === '"' && txt[txt.length - 1] === '"') { @@ -93,7 +94,7 @@ export const addSingleLink = function(_start, _end, type, linktext) { linktext = type.text; if (typeof linktext !== 'undefined') { - edge.text = utils.sanitize(linktext.trim(), config); + edge.text = common.sanitizeText(linktext.trim(), config); // strip quotes if string starts and exnds with a quote if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') { @@ -210,7 +211,7 @@ export const setClass = function(ids, className) { const setTooltip = function(ids, tooltip) { ids.split(',').forEach(function(id) { if (typeof tooltip !== 'undefined') { - tooltips[id] = utils.sanitize(tooltip, config); + tooltips[id] = common.sanitizeText(tooltip, config); } }); }; @@ -410,7 +411,7 @@ export const addSubGraph = function(_id, list, _title) { id = id || 'subGraph' + subCount; if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; title = title || ''; - title = utils.sanitize(title, config); + title = common.sanitizeText(title, config); subCount = subCount + 1; const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] }; subGraphs.push(subGraph); diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index d42228e41..dcd5cf21f 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -2,6 +2,7 @@ import * as d3 from 'd3'; import idCache from './id-cache.js'; import stateDb from './stateDb'; import utils from '../../utils'; +import common from '../common/common'; import { getConfig } from '../../config'; // let conf; @@ -391,12 +392,6 @@ export const drawState = function(elem, stateDef) { return stateInfo; }; -const getRows = s => { - let str = s.replace(//gi, '#br#'); - str = str.replace(/\\n/g, '#br#'); - return str.split('#br#'); -}; - let edgeCount = 0; export const drawEdge = function(elem, path, relation) { const getRelationType = function(type) { @@ -455,7 +450,7 @@ export const drawEdge = function(elem, path, relation) { const { x, y } = utils.calcLabelPosition(path.points); - const rows = getRows(relation.title); + const rows = common.getRows(relation.title); // console.warn(rows); diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js index 396bb976d..e11fbba79 100644 --- a/src/diagrams/state/stateRenderer.js +++ b/src/diagrams/state/stateRenderer.js @@ -3,6 +3,7 @@ import dagre from 'dagre'; import graphlib from 'graphlib'; import { logger } from '../../logger'; import stateDb from './stateDb'; +import common from '../common/common'; import { parser } from './parser/stateDiagram'; // import idCache from './id-cache'; import { drawState, addTitleAndBox, drawEdge } from './shapes'; @@ -99,14 +100,6 @@ const getLabelWidth = text => { return text ? text.length * conf.fontSizeFactor : 1; }; -/* TODO: REMOVE DUPLICATION, SEE SHAPES */ -const getRows = s => { - if (!s) return 1; - let str = s.replace(//gi, '#br#'); - str = str.replace(/\\n/g, '#br#'); - return str.split('#br#'); -}; - const renderDoc = (doc, diagram, parentId, altBkg) => { // // Layout graph, Create a new directed graph const graph = new graphlib.Graph({ @@ -239,7 +232,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => { { relation: relation, width: getLabelWidth(relation.title), - height: conf.labelHeight * getRows(relation.title).length, + height: conf.labelHeight * common.getRows(relation.title).length, labelpos: 'c' }, 'id' + cnt diff --git a/src/utils.js b/src/utils.js index 002dcc8b7..1aec62d4f 100644 --- a/src/utils.js +++ b/src/utils.js @@ -74,25 +74,6 @@ export const interpolateToCurve = (interpolate, defaultCurve) => { return d3[curveName] || defaultCurve; }; -export const sanitize = (text, config) => { - let txt = text; - let htmlLabels = true; - if ( - config.flowchart && - (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false') - ) - htmlLabels = false; - - if (config.securityLevel !== 'loose' && htmlLabels) { // eslint-disable-line - txt = txt.replace(//gi, '#br#'); - txt = txt.replace(//g, '>'); - txt = txt.replace(/=/g, '='); - txt = txt.replace(/#br#/g, '
'); - } - - return txt; -}; - export const formatUrl = (linkStr, config) => { let url = linkStr.trim(); @@ -225,7 +206,6 @@ export default { interpolateToCurve, calcLabelPosition, calcCardinalityPosition, - sanitize, formatUrl, getStylesFromArray };