GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3859 from aloisklink/fix/3706_support-indented-yaml-only-in-html

Browse Source 
Support parsing indented mermaid/YAML only from HTML
This commit is contained in:
Sidharth Vinod 2022-12-24 00:27:44 +05:30 committed by GitHub
commit c23cd49322
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 114 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/er.html
View File

@ -19,7 +19,6 @@
<body>
<pre class="mermaid">
---
title: This is a title
---

1
packages/mermaid/package.json
View File

@ -61,6 +61,7 @@
"moment-mini": "^2.24.0",
"non-layered-tidy-tree-layout": "^2.0.2",
"stylis": "^4.1.2",
"ts-dedent": "^2.2.0",
"uuid": "^9.0.0"
},
"devDependencies": {

27
packages/mermaid/src/diagram-api/diagram-orchestration.ts
View File

@ -125,6 +125,33 @@ export const addDiagrams = () => {
},
(text) => text.toLowerCase().trim() === 'error'
);
registerDiagram(
'---',
// --- diagram type may appear if YAML front-matter is not parsed correctly
{
db: {
clear: () => {
// Quite ok, clear needs to be there for --- to work as a regular diagram
},
},
styles: errorStyles, // should never be used
renderer: errorRenderer, // should never be used
parser: {
parser: { yy: {} },
parse: () => {
throw new Error(
'Diagrams beginning with --- are not valid. ' +
'If you were trying to use a YAML front-matter, please ensure that ' +
"you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
);
},
},
init: () => null, // no op
},
(text) => {
return text.toLowerCase().trimStart().startsWith('---');
}
);
registerDiagram(
'c4',

8
packages/mermaid/src/mermaid.ts
View File

@ -2,6 +2,8 @@
* Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
* functionality and to render the diagrams to svg code!
*/
import dedent from 'ts-dedent';
import { MermaidConfig } from './config.type';
import { log } from './logger';
import utils from './utils';
@ -148,8 +150,7 @@ const initThrowsErrors = function (
txt = element.innerHTML;
// transforms the html to pure text
txt = utils
.entityDecode(txt)
txt = dedent(utils.entityDecode(txt)) // removes indentation, required for YAML parsing
.trim()
.replace(/<br\s*\/?>/gi, '<br/>');
@ -290,8 +291,7 @@ const initThrowsErrorsAsync = async function (
txt = element.innerHTML;
// transforms the html to pure text
txt = utils
.entityDecode(txt)
txt = dedent(utils.entityDecode(txt)) // removes indentation, required for YAML parsing
.trim()
.replace(/<br\s*\/?>/gi, '<br/>');

13
packages/mermaid/src/mermaidAPI.spec.ts
View File

@ -654,6 +654,19 @@ describe('mermaidAPI', function () {
expect(mermaid.parseError).toEqual(undefined);
expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
});
it('throws for a nicer error for a invalid definition starting with `---`', function () {
expect(mermaid.parseError).toEqual(undefined);
expect(() =>
mermaidAPI.parse(`
---
title: a malformed YAML front-matter
`)
).toThrow(
'Diagrams beginning with --- are not valid. ' +
'If you were trying to use a YAML front-matter, please ensure that ' +
"you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
);
});
it('does not throw for a valid definition', function () {
expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
});

4
packages/mermaid/src/utils.spec.js
View File

@ -239,9 +239,9 @@ Alice->Bob: hi`;
const type = detectType(str);
expect(type).toBe('gitGraph');
});
it('should not allow frontmatter with leading spaces', function () {
it('should handle malformed frontmatter (with leading spaces) with `---` error graphtype', function () {
const str = ' ---\ntitle: foo\n---\n gitGraph TB:\nbfs1:queue';
expect(() => detectType(str)).toThrow('No diagram type detected for text');
expect(detectType(str)).toBe('---');
});
});
describe('when finding substring in array ', function () {

16
pnpm-lock.yaml generated
View File

@ -193,6 +193,9 @@ importers:
stylis:
specifier: ^4.1.2
version: 4.1.2
ts-dedent:
specifier: ^2.2.0
version: 2.2.0
uuid:
specifier: ^9.0.0
version: 9.0.0
@ -3751,7 +3754,7 @@ packages:
/axios/0.21.4_debug@4.3.2:
resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
dependencies:
follow-redirects: 1.15.2_debug@4.3.2
follow-redirects: 1.15.2
transitivePeerDependencies:
- debug
dev: true
@ -6500,7 +6503,7 @@ packages:
resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
dev: true
/follow-redirects/1.15.2_debug@4.3.2:
/follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
@ -6508,8 +6511,6 @@ packages:
peerDependenciesMeta:
debug:
optional: true
dependencies:
debug: 4.3.2
dev: true
/foreground-child/2.0.0:
@ -7044,7 +7045,7 @@ packages:
engines: {node: '>=8.0.0'}
dependencies:
eventemitter3: 4.0.7
follow-redirects: 1.15.2_debug@4.3.2
follow-redirects: 1.15.2
requires-port: 1.0.0
transitivePeerDependencies:
- debug
@ -10745,6 +10746,11 @@ packages:
resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
dev: true
/ts-dedent/2.2.0:
resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
engines: {node: '>=6.10'}
dev: false
/ts-node/10.9.1_cbe7ovvae6zqfnmtgctpgpys54:
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true