Commit 94cee2a3 authored by chris's avatar chris
Browse files

mathjax-conversions

parent 97487e39
......@@ -51,10 +51,10 @@ const Editoria = () => {
value={demo}
// readonly
layout={layout}
onChange={debounce(source => {
console.log(source);
}, 200)}
onBlur={source => console.log(source)}
// onChange={debounce(source => {
// console.log(source);
// }, 200)}
// onBlur={source => console.log(source)}
user={user}
/>
</>
......
......@@ -7,9 +7,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import EditorElements from './EditorElements';
/* Katex css */
import '~../../katex/dist/katex.min.css';
const divider = css`
.panelGroup {
background: #fff;
......
......@@ -8,9 +8,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import EditorElements from './EditorElements';
/* Katex css */
import '~../../katex/dist/katex.min.css';
const divider = css`
.panelGroup {
background: #fff;
......
......@@ -5,9 +5,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import EditorElements from './EditorElements';
/* Katex css */
import '~../../katex/dist/katex.min.css';
const Wrapper = styled.div`
background: ${th('colorBackground')};
display: flex;
......
......@@ -14,7 +14,6 @@
},
"dependencies": {
"highlight.js": "^10.1.1",
"katex": "^0.12.0",
"lodash": "^4.17.4",
"prosemirror-commands": "1.1.7",
"prosemirror-highlightjs": "^0.2.0",
......@@ -26,6 +25,5 @@
"wax-prosemirror-core": "^0.0.49",
"wax-prosemirror-utilities": "^0.0.49",
"mathjax-full": "3.1.4"
}
}
......@@ -8,10 +8,30 @@ import {
chainCommands,
deleteSelection,
} from 'prosemirror-commands';
// katex
import katex, { ParseError } from 'katex';
import { collapseMathCmd } from './helpers/collapse-math-cmd';
// new
import { mathjax } from 'mathjax-full/js/mathjax';
import { MathML } from 'mathjax-full/js/input/mathml';
import { HTMLDocument } from 'mathjax-full/js/handlers/html/HTMLDocument.js';
import { TeX } from 'mathjax-full/js/input/tex';
import { SVG } from 'mathjax-full/js/output/svg';
const { liteAdaptor } = require('mathjax-full/js/adaptors/liteAdaptor.js');
import { browserAdaptor } from 'mathjax-full/js/adaptors/browserAdaptor';
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html';
import { STATE } from 'mathjax-full/js/core/MathItem';
import { SerializedMmlVisitor } from 'mathjax-full/js/core/MmlTree/SerializedMmlVisitor.js';
const adaptor = browserAdaptor();
RegisterHTMLHandler(adaptor);
const tex = new TeX({ packages: ['base', 'ams'] });
const mathml = new MathML({});
const svg = new SVG({ fontCache: 'none' });
const markErrors = [STATE.TYPESET + 1, null];
export class MathView {
// == Lifecycle ===================================== //
/**
......@@ -162,19 +182,60 @@ export class MathView {
this.dom.classList.remove('empty-math');
}
// render katex, but fail gracefully
try {
katex.render(texString, this._mathRenderElt, this._katexOptions);
this._mathRenderElt.classList.remove('parse-error');
this.dom.setAttribute('title', '');
} catch (err) {
if (err instanceof ParseError) {
console.error(err);
this._mathRenderElt.classList.add('parse-error');
this.dom.setAttribute('title', err.toString());
} else {
throw err;
}
}
// try {
// katex.render(texString, this._mathRenderElt, this._katexOptions);
// this._mathRenderElt.classList.remove('parse-error');
// this.dom.setAttribute('title', '');
// } catch (err) {
// if (err instanceof ParseError) {
// console.error(err);
// this._mathRenderElt.classList.add('parse-error');
// this.dom.setAttribute('title', err.toString());
// } else {
// throw err;
// }
// }
// MATHML
const mathml_html = mathjax.document('', {
InputJax: mathml,
OutputJax: svg,
renderActions: {},
});
// TEX
const tex_html = mathjax.document('', {
InputJax: tex,
OutputJax: svg,
renderActions: {},
});
// TEX to mathml
const tex_mathml = new HTMLDocument('', liteAdaptor(), { InputJax: tex });
console.log(tex_mathml);
const visitor = new SerializedMmlVisitor();
const toMathML = node => visitor.visitTree(node, tex_mathml);
console.log(
toMathML(
tex_mathml.convert(texString, {
display: true,
}),
),
);
// console.log(tex_html);
// let html = tex_mathml;
// const math = texString;
// const display = true;
// // const metrics = svg.getMetricsFor(node, ture);
// const outerHTML = adaptor.outerHTML(
// html.convert(math, {
// display,
// }),
// );
// this._mathRenderElt.innerHTML = outerHTML;
}
// == Inner Editor ================================== //
dispatchInner(tr) {
......
......@@ -11103,13 +11103,6 @@ jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3, jsx-ast-utils@^2.4.1:
array-includes "^3.1.1"
object.assign "^4.1.0"
 
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
integrity sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==
dependencies:
commander "^2.19.0"
killable@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment