From 6966aaede974a357ff09e821b73b6aed1cdc7eac Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Thu, 14 Nov 2019 20:13:41 +0100 Subject: [PATCH] Added validate function --- docs/usage.md | 10 ++++++++-- src/mermaid.js | 1 + src/mermaid.spec.js | 22 ++++++++++++++++++---- src/mermaidAPI.js | 11 +++++++++++ src/mermaidAPI.spec.js | 17 ++++++++++++++--- 5 files changed, 52 insertions(+), 9 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index 2b556d2169..19d9661a69 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -114,7 +114,7 @@ $(document).ready(function() { Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering. -If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. +If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. ``` div.mermaid { font-family: 'trebuchet ms', verdana, arial; @@ -262,8 +262,14 @@ function in order to handle the error in an application-specific way. **Parsing text without rendering** +Text can also be parsed without rendering it. The function +**mermaid.validate(txt)** takes a text string as an argument and returns true if the text is syntactically correct and +false if it is not. The parseError function will be called when the parse function returns false. + +**Validating text** + It is also possible to validate the syntax before rendering in order to streamline the user experience. The function -**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and +**mermaid.validate(txt)** takes a text string as an argument and returns true if the text is syntactically correct and false if it is not. The parseError function will be called when the parse function returns false. The code-example below in meta code illustrates how this could work: diff --git a/src/mermaid.js b/src/mermaid.js index 76b644ef28..3aa884f308 100644 --- a/src/mermaid.js +++ b/src/mermaid.js @@ -172,6 +172,7 @@ const mermaid = { mermaidAPI, parse: mermaidAPI.parse, + validate: mermaidAPI.validate, render: mermaidAPI.render, init, diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js index e25adc5ca2..0f7c911f6d 100644 --- a/src/mermaid.spec.js +++ b/src/mermaid.spec.js @@ -4,8 +4,8 @@ import flowDb from './diagrams/flowchart/flowDb'; import flowParser from './diagrams/flowchart/parser/flow'; import flowRenderer from './diagrams/flowchart/flowRenderer'; -describe('when using mermaid and ', function() { - describe('when detecting chart type ', function() { +describe('when using mermaid and', function() { + describe('when detecting chart type', function() { it('should not start rendering with mermaid.startOnLoad set to false', function() { mermaid.startOnLoad = false; document.body.innerHTML = '
graph TD;\na;
'; @@ -38,7 +38,7 @@ describe('when using mermaid and ', function() { }); }); - describe('when calling addEdges ', function() { + describe('when calling addEdges', function() { beforeEach(function() { flowParser.parser.yy = flowDb; flowDb.clear(); @@ -180,7 +180,7 @@ describe('when using mermaid and ', function() { }); }); - describe('checking validity of input ', function() { + describe('parsing input', function() { beforeEach(function() { flowParser.parser.yy = flowDb; flowDb.clear(); @@ -224,4 +224,18 @@ describe('when using mermaid and ', function() { expect(() => mermaid.parse(text)).toThrow(); }); }); + describe('checking validity of input', function() { + beforeEach(function() { + flowParser.parser.yy = flowDb; + flowDb.clear(); + }); + it('it should return false for an invalid definiton', function() { + const res = mermaid.validate('this is not a mermaid diagram definition'); + expect(res).toBeFalsy(); + }); + it('it should return true for a valid definition', function() { + const res = mermaid.validate('graph TD;A--x|text including URL space|B;'); + expect(res).toBeTruthy(); + }); + }); }); diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 94b0efe54c..13a021f69f 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -383,6 +383,16 @@ function parse(text) { parser.parse(text); } +function validate(text) { + try { + parse(text); + return true; + } catch (e) { + // ignored + } + return false; +} + export const encodeEntities = function(text) { let txt = text; @@ -677,6 +687,7 @@ function initialize(options) { const mermaidAPI = { render, parse, + validate, initialize, getConfig }; diff --git a/src/mermaidAPI.spec.js b/src/mermaidAPI.spec.js index a5114356f9..9f0d17d0ee 100644 --- a/src/mermaidAPI.spec.js +++ b/src/mermaidAPI.spec.js @@ -1,8 +1,8 @@ /* eslint-env jasmine */ import mermaidAPI from './mermaidAPI'; -describe('when using mermaidAPI and ', function() { - describe('doing initialize ', function() { +describe('when using mermaidAPI and', function() { + describe('doing initialize', function() { beforeEach(function() { document.body.innerHTML = ''; }); @@ -34,7 +34,7 @@ describe('when using mermaidAPI and ', function() { expect(config.testObject.test3).toBe(true); }); }); - describe('checking validity of input ', function() { + describe('parsing input', function() { it('it should throw for an invalid definiton', function() { expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow(); }); @@ -42,4 +42,15 @@ describe('when using mermaidAPI and ', function() { expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow(); }); }); + + describe('checking validity of input', function() { + it('it should return false for an invalid definiton', function() { + const res = mermaidAPI.validate('this is not a mermaid diagram definition'); + expect(res).toBeFalsy(); + }); + it('it should return true for a valid definiton', function() { + const res = mermaidAPI.validate('graph TD;A--x|text including URL space|B;'); + expect(res).toBeTruthy(); + }); + }); });