mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-21 06:53:17 +08:00
feat(katex): improved handling of KaTeX errors
This commit is contained in:
Nicolas Newman
parent
1db4230d35
commit
825f50299a
@ -1,6 +1,7 @@
|
|||||||
/** Created by knut on 14-12-11. */
|
/** Created by knut on 14-12-11. */
|
||||||
import { select } from 'd3';
|
import { select } from 'd3';
|
||||||
import { log } from './logger';
|
import { log } from './logger';
|
||||||
|
import * as configApi from './config';
|
||||||
|
|
||||||
const conf = {};
|
const conf = {};
|
||||||
|
|
||||||
@ -22,71 +23,85 @@ export const setConf = function (cnf) {
|
|||||||
*
|
*
|
||||||
* @param {string} id The text for the error
|
* @param {string} id The text for the error
|
||||||
* @param {string} ver The version
|
* @param {string} ver The version
|
||||||
|
* @param {Error} error The caught error
|
||||||
*/
|
*/
|
||||||
export const draw = (id, ver) => {
|
export const draw = (id, ver, error = null) => {
|
||||||
try {
|
try {
|
||||||
log.debug('Renering svg for syntax error\n');
|
log.debug('Renering svg for syntax error\n');
|
||||||
|
|
||||||
|
const cnf = configApi.getConfig();
|
||||||
const svg = select('#' + id);
|
const svg = select('#' + id);
|
||||||
|
|
||||||
const g = svg.append('g');
|
const g = svg.append('g');
|
||||||
|
|
||||||
g.append('path')
|
if (error && error.message.includes('KaTeX')) {
|
||||||
.attr('class', 'error-icon')
|
const title = error.message.split(': ')[0];
|
||||||
.attr(
|
const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', '');
|
||||||
'd',
|
g.append('foreignObject')
|
||||||
'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
|
.attr('width', 2000)
|
||||||
);
|
.attr('height', 500)
|
||||||
|
.append('xhtml:div')
|
||||||
|
.style('font-size', '70px')
|
||||||
|
.style('color', cnf.themeVariables.errorTextColor)
|
||||||
|
.html(`<h1>${title}</h1><p>${body}</p>`);
|
||||||
|
} else {
|
||||||
|
g.append('path')
|
||||||
|
.attr('class', 'error-icon')
|
||||||
|
.attr(
|
||||||
|
'd',
|
||||||
|
'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
|
||||||
|
);
|
||||||
|
|
||||||
g.append('path')
|
g.append('path')
|
||||||
.attr('class', 'error-icon')
|
.attr('class', 'error-icon')
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
|
'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
|
||||||
);
|
);
|
||||||
|
|
||||||
g.append('path')
|
g.append('path')
|
||||||
.attr('class', 'error-icon')
|
.attr('class', 'error-icon')
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
|
'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
|
||||||
);
|
);
|
||||||
|
|
||||||
g.append('path')
|
g.append('path')
|
||||||
.attr('class', 'error-icon')
|
.attr('class', 'error-icon')
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
|
'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
|
||||||
);
|
);
|
||||||
|
|
||||||
g.append('path')
|
g.append('path')
|
||||||
.attr('class', 'error-icon')
|
.attr('class', 'error-icon')
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
|
'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
|
||||||
);
|
);
|
||||||
|
|
||||||
g.append('path')
|
g.append('path')
|
||||||
.attr('class', 'error-icon')
|
.attr('class', 'error-icon')
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
|
'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
|
||||||
);
|
);
|
||||||
|
|
||||||
g.append('text') // text label for the x axis
|
g.append('text') // text label for the x axis
|
||||||
.attr('class', 'error-text')
|
.attr('class', 'error-text')
|
||||||
.attr('x', 1240)
|
.attr('x', 1240)
|
||||||
.attr('y', 250)
|
.attr('y', 250)
|
||||||
.attr('font-size', '150px')
|
.attr('font-size', '150px')
|
||||||
.style('text-anchor', 'middle')
|
.style('text-anchor', 'middle')
|
||||||
.text('Syntax error in graph');
|
.text('Syntax error in graph');
|
||||||
g.append('text') // text label for the x axis
|
g.append('text') // text label for the x axis
|
||||||
.attr('class', 'error-text')
|
.attr('class', 'error-text')
|
||||||
.attr('x', 1050)
|
.attr('x', 1050)
|
||||||
.attr('y', 400)
|
.attr('y', 400)
|
||||||
.attr('font-size', '100px')
|
.attr('font-size', '100px')
|
||||||
.style('text-anchor', 'middle')
|
.style('text-anchor', 'middle')
|
||||||
.text('mermaid version ' + ver);
|
.text('mermaid version ' + ver);
|
||||||
|
}
|
||||||
|
|
||||||
svg.attr('height', 100);
|
svg.attr('height', 100);
|
||||||
svg.attr('width', 400);
|
svg.attr('width', 400);
|
||||||
|
|||||||
@ -499,7 +499,7 @@ const render = function (id, _txt, cb, container) {
|
|||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// errorRenderer.setConf(cnf.class);
|
// errorRenderer.setConf(cnf.class);
|
||||||
errorRenderer.draw(id, pkg.version);
|
errorRenderer.draw(id, pkg.version, e);
|
||||||
throw e;
|
throw e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user