diff --git a/src/index.js b/src/index.js index 405090a..10cd950 100644 --- a/src/index.js +++ b/src/index.js @@ -1,32 +1,52 @@ import mermaid from 'mermaid' -const mermaidChart = (code) => { - try { +function escapeHtml(unsafe) +{ + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + +const mermaidChart = (code) => +{ + try + { mermaid.parse(code) - return `
${str}` + return `
${escapeHtml(str)}` } } -const MermaidPlugin = (md) => { +const MermaidPlugin = (md) => +{ md.mermaid = mermaid - mermaid.loadPreferences = (preferenceStore) => { + mermaid.loadPreferences = (preferenceStore) => + { let mermaidTheme = preferenceStore.get('mermaid-theme') - if (mermaidTheme === undefined) { + if (mermaidTheme === undefined) + { mermaidTheme = 'default' } let ganttAxisFormat = preferenceStore.get('gantt-axis-format') - if (ganttAxisFormat === undefined) { + if (ganttAxisFormat === undefined) + { ganttAxisFormat = '%Y-%m-%d' } mermaid.initialize({ theme: mermaidTheme, - gantt: { axisFormatter: [ - [ganttAxisFormat, (d) => { - return d.getDay() === 1 - }] - ]} + gantt: { + axisFormatter: [ + [ganttAxisFormat, (d) => + { + return d.getDay() === 1 + }] + ] + } }) return { 'mermaid-theme': mermaidTheme, @@ -35,14 +55,17 @@ const MermaidPlugin = (md) => { } const temp = md.renderer.rules.fence.bind(md.renderer.rules) - md.renderer.rules.fence = (tokens, idx, options, env, slf) => { + md.renderer.rules.fence = (tokens, idx, options, env, slf) => + { const token = tokens[idx] const code = token.content.trim() - if (token.info === 'mermaid') { + if (token.info === 'mermaid') + { return mermaidChart(code) } const firstLine = code.split(/\n/)[0].trim() - if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) { + if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) + { return mermaidChart(code) } return temp(tokens, idx, options, env, slf)