Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add suppressErrorRendering option to avoid inserting 'Syntax error' message to DOM directly #4359

Merged
Merged
Changes from 10 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions cypress/integration/other/configuration.spec.js
Original file line number Diff line number Diff line change
@@ -126,4 +126,26 @@ describe('Configuration', () => {
);
});
});

describe('suppressErrorRendering', () => {
it('should not render error diagram if suppressErrorRendering is set', () => {
const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('#test');
sidharthv96 marked this conversation as resolved.
Show resolved Hide resolved
cy.matchImageSnapshot(
'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
);
});

it('should render error diagram if suppressErrorRendering is not set', () => {
const url = 'http://localhost:9000/suppressError.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('#test');
sidharthv96 marked this conversation as resolved.
Show resolved Hide resolved
cy.matchImageSnapshot(
'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
);
});
});
});
34 changes: 34 additions & 0 deletions cypress/platform/suppressError.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>
<body>
<div id="test">
<pre class="mermaid">
flowchart
a[This should be visible]
</pre
>
<pre class="mermaid">
flowchart
a --< b
</pre
>
<pre class="mermaid">
flowchart
a[This should be visible]
</pre
>
</div>
<script type="module">
import mermaid from './mermaid.esm.mjs';
const shouldSuppress =
new URLSearchParams(window.location.search).get('suppressErrorRendering') === 'true';
mermaid.initialize({ startOnLoad: true, suppressErrorRendering: shouldSuppress });
</script>
</body>
</html>
3 changes: 2 additions & 1 deletion docs/config/setup/modules/mermaidAPI.md
Original file line number Diff line number Diff line change
@@ -42,6 +42,7 @@ const config = {
securityLevel: 'strict',
startOnLoad: true,
arrowMarkerAbsolute: false,
suppressErrorRendering: false,

er: {
diagramPadding: 20,
@@ -96,7 +97,7 @@ mermaid.initialize(config);

#### Defined in

[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
[mermaidAPI.ts:653](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L653)

## Functions

6 changes: 6 additions & 0 deletions packages/mermaid/src/config.type.ts
Original file line number Diff line number Diff line change
@@ -158,6 +158,12 @@ export interface MermaidConfig {
dompurifyConfig?: DOMPurifyConfiguration;
wrap?: boolean;
fontSize?: number;
/**
* Suppresses inserting 'Syntax error' diagram in the DOM.
* This is useful when you want to control how to handle syntax errors in your application.
*
*/
suppressErrorRendering?: boolean;
}
/**
* This interface was referenced by `MermaidConfig`'s JSON-Schema
28 changes: 20 additions & 8 deletions packages/mermaid/src/mermaidAPI.ts
Original file line number Diff line number Diff line change
@@ -390,6 +390,16 @@ const render = async function (
const enclosingDivID = 'd' + id;
const enclosingDivID_selector = '#' + enclosingDivID;

const removeTempElements = () => {
// -------------------------------------------------------------------------------
// Remove the temporary HTML element if appropriate
const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
const node = select(tmpElementSelector).node();
if (node && 'remove' in node) {
node.remove();
}
};

let root: any = select('body');

const isSandboxed = config.securityLevel === SECURITY_LVL_SANDBOX;
@@ -448,6 +458,10 @@ const render = async function (
try {
diag = await getDiagramFromText(text, { title: processed.title });
} catch (error) {
if (config.suppressErrorRendering) {
removeTempElements();
throw error;
}
diag = new Diagram('error');
parseEncounteredException = error;
}
@@ -475,8 +489,11 @@ const render = async function (
try {
await diag.renderer.draw(text, id, version, diag);
} catch (e) {
if (config.suppressErrorRendering) {
removeTempElements();
throw e;
}
errorRenderer.draw(text, id, version);
throw e;
sidharthv96 marked this conversation as resolved.
Show resolved Hide resolved
}

// This is the d3 node for the svg element
@@ -512,13 +529,7 @@ const render = async function (
throw parseEncounteredException;
}

// -------------------------------------------------------------------------------
// Remove the temporary HTML element if appropriate
const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
const node = select(tmpElementSelector).node();
if (node && 'remove' in node) {
node.remove();
}
removeTempElements();

return {
svg: svgCode,
@@ -585,6 +596,7 @@ function addA11yInfo(
* securityLevel: 'strict',
* startOnLoad: true,
* arrowMarkerAbsolute: false,
* suppressErrorRendering: false,
*
* er: {
* diagramPadding: 20,
6 changes: 6 additions & 0 deletions packages/mermaid/src/schemas/config.schema.yaml
Original file line number Diff line number Diff line change
@@ -217,6 +217,12 @@ properties:
fontSize:
type: number
default: 16
suppressErrorRendering:
type: boolean
default: false
description: |
Suppresses inserting 'Syntax error' diagram in the DOM.
This is useful when you want to control how to handle syntax errors in your application.

$defs: # JSON Schema definition (maybe we should move these to a seperate file)
BaseDiagramConfig: