@manuscripts/body-editor 1.7.15 → 1.7.16

package/dist/cjs/commands.js

@@ -109,7 +109,6 @@ const createBlock = (nodeType, position, state, dispatch) => {
         case state.schema.nodes.equation_element:
             node = state.schema.nodes.equation_element.create({}, [
                 state.schema.nodes.equation.create(),
-                createAndFillFigcaptionElement(state),
             ]);
             break;
         default:
@@ -290,10 +289,10 @@ const insertCrossReference = (state, dispatch) => {
 };
 exports.insertCrossReference = insertCrossReference;
 const insertInlineEquation = (state, dispatch) => {
-    const inlineMathFragment = (0, transform_1.buildInlineMathFragment)(state.selection.$anchor.parent.attrs.id, selectedText().replace(/^\$/, '').replace(/\$$/, ''));
     const sourcePos = state.selection.from - 1;
     const tr = state.tr.replaceSelectionWith(state.schema.nodes.inline_equation.create({
-        id: inlineMathFragment._id,
+        format: 'tex',
+        contents: selectedText().replace(/^\$/, '').replace(/\$$/, ''),
     }));
     if (dispatch) {
         const selection = prosemirror_state_1.NodeSelection.create(tr.doc, tr.mapping.map(sourcePos) + 1);

package/dist/cjs/lib/helpers.js

@@ -14,8 +14,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeSimilarItems = exports.nearestAncestor = exports.isNodeOfType = void 0;
+exports.renderMath = exports.mergeSimilarItems = exports.nearestAncestor = exports.isNodeOfType = void 0;
 const isNodeOfType = (...type) => (node) => {
     const [head, ...tail] = type;
     if (node.type === node.type.schema.nodes[head]) {
@@ -50,3 +82,14 @@ const mergeSimilarItems = (compareFunc, mergeFunc) => (items) => {
     }, []);
 };
 exports.mergeSimilarItems = mergeSimilarItems;
+const renderMath = (math, format) => __awaiter(void 0, void 0, void 0, function* () {
+    if (format === 'tex') {
+        const { convertTeXToSVG } = yield Promise.resolve().then(() => __importStar(require('../lib/tex-to-svg')));
+        return convertTeXToSVG(math);
+    }
+    else {
+        const { convertMathMLToSVG } = yield Promise.resolve().then(() => __importStar(require('../lib/mathml-to-svg')));
+        return convertMathMLToSVG(math);
+    }
+});
+exports.renderMath = renderMath;

package/dist/cjs/lib/mathml-to-svg.js

@@ -0,0 +1,70 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMathMLToSVG = void 0;
+require("mathjax-full/js/util/entities/all");
+const transform_1 = require("@manuscripts/transform");
+const HTMLAdaptor_1 = require("mathjax-full/js/adaptors/HTMLAdaptor");
+const MmlFactory_1 = require("mathjax-full/js/core/MmlTree/MmlFactory");
+const HTMLDocument_1 = require("mathjax-full/js/handlers/html/HTMLDocument");
+const mathml_1 = require("mathjax-full/js/input/mathml");
+const svg_1 = require("mathjax-full/js/output/svg");
+class ManuscriptsMmlFactory extends MmlFactory_1.MmlFactory {
+    constructor() {
+        super();
+        this.nodeMap.set('image', this.nodeMap.get('none'));
+    }
+    create(kind, properties = {}, children = []) {
+        if (kind === 'image') {
+            return this.node['none'](properties, children);
+        }
+        return this.node[kind](properties, children);
+    }
+}
+class ManuscriptsHTMLAdaptor extends HTMLAdaptor_1.HTMLAdaptor {
+    setAttribute(node, name, value, ns) {
+        if (name !== 'xmlns') {
+            ns ? node.setAttributeNS(ns, name, value) : node.setAttribute(name, value);
+        }
+    }
+}
+const InputJax = new mathml_1.MathML();
+const OutputJax = new svg_1.SVG({
+    fontCache: 'none',
+});
+const adaptor = new ManuscriptsHTMLAdaptor(window);
+const doc = new HTMLDocument_1.HTMLDocument(document, adaptor, {
+    InputJax,
+    OutputJax,
+    MmlFactory: new ManuscriptsMmlFactory(),
+});
+doc.addStyleSheet();
+const convertMathMLToSVG = (mathml, display = true) => {
+    const item = doc.convert(mathml, {
+        display,
+        em: 16,
+        ex: 8,
+        containerWidth: 1000000,
+        lineWidth: 1000000,
+        scale: 1,
+    });
+    if (!item || !item.firstChild) {
+        return null;
+    }
+    return transform_1.xmlSerializer.serializeToString(item.firstChild);
+};
+exports.convertMathMLToSVG = convertMathMLToSVG;

package/dist/cjs/lib/tex-to-svg.js

@@ -0,0 +1,60 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTeXToSVG = exports.packages = void 0;
+require("mathjax-full/js/util/entities/all");
+const transform_1 = require("@manuscripts/transform");
+const HTMLAdaptor_1 = require("mathjax-full/js/adaptors/HTMLAdaptor");
+const HTMLDocument_1 = require("mathjax-full/js/handlers/html/HTMLDocument");
+const tex_1 = require("mathjax-full/js/input/tex");
+const AllPackages_1 = require("mathjax-full/js/input/tex/AllPackages");
+const svg_1 = require("mathjax-full/js/output/svg");
+exports.packages = AllPackages_1.AllPackages.filter((name) => name !== 'html' && name !== 'bussproofs');
+class ManuscriptsHTMLAdaptor extends HTMLAdaptor_1.HTMLAdaptor {
+    setAttribute(node, name, value, ns) {
+        if (name !== 'xmlns') {
+            ns ? node.setAttributeNS(ns, name, value) : node.setAttribute(name, value);
+        }
+    }
+}
+const InputJax = new tex_1.TeX({
+    packages: exports.packages,
+});
+const OutputJax = new svg_1.SVG({
+    fontCache: 'none',
+});
+const adaptor = new ManuscriptsHTMLAdaptor(window);
+const doc = new HTMLDocument_1.HTMLDocument(document, adaptor, {
+    InputJax,
+    OutputJax,
+});
+doc.addStyleSheet();
+const convertTeXToSVG = (tex, display = true) => {
+    const item = doc.convert(tex, {
+        display,
+        em: 16,
+        ex: 8,
+        containerWidth: 1000000,
+        lineWidth: 1000000,
+        scale: 1,
+    });
+    if (!item || !item.firstChild) {
+        return null;
+    }
+    return transform_1.xmlSerializer.serializeToString(item.firstChild);
+};
+exports.convertTeXToSVG = convertTeXToSVG;

package/dist/cjs/views/equation.js

@@ -17,6 +17,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EquationView = void 0;
 const dompurify_1 = require("../lib/dompurify");
+const helpers_1 = require("../lib/helpers");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 class EquationView extends base_node_view_1.BaseNodeView {
@@ -32,22 +33,29 @@ class EquationView extends base_node_view_1.BaseNodeView {
             this.dom.setAttribute('id', this.node.attrs.id);
         };
         this.updateContents = () => {
-            const { SVGStringRepresentation } = this.node.attrs;
+            const { contents, format } = this.node.attrs;
             while (this.dom.hasChildNodes()) {
                 this.dom.removeChild(this.dom.firstChild);
             }
-            if (SVGStringRepresentation) {
-                const fragment = (0, dompurify_1.sanitize)(SVGStringRepresentation, {
-                    USE_PROFILES: { svg: true },
-                });
-                this.dom.appendChild(fragment);
-            }
-            else {
-                const placeholder = document.createElement('div');
-                placeholder.className = 'equation-placeholder';
-                placeholder.textContent = '<Equation>';
-                this.dom.appendChild(placeholder);
-            }
+            (0, helpers_1.renderMath)(contents, format)
+                .then((svgContent) => {
+                if (svgContent) {
+                    const fragment = (0, dompurify_1.sanitize)(svgContent, {
+                        USE_PROFILES: { svg: true },
+                    });
+                    this.dom.appendChild(fragment);
+                }
+                else {
+                    const placeholder = document.createElement('div');
+                    placeholder.className = 'equation-placeholder';
+                    placeholder.textContent = '<Equation>';
+                    this.dom.appendChild(placeholder);
+                }
+                return true;
+            })
+                .catch((error) => {
+                console.error(error);
+            });
         };
         this.ignoreMutation = () => true;
     }

package/dist/cjs/views/equation_editable.js

@@ -48,7 +48,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EquationEditableView = void 0;
-const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const creators_1 = require("./creators");
 const equation_1 = require("./equation");
@@ -62,21 +61,18 @@ class EquationEditableView extends equation_1.EquationView {
             const { createEditor } = yield Promise.resolve().then(() => __importStar(require('../lib/codemirror')));
             const placeholder = 'Enter LaTeX equation, e.g. "a^2 = \\sqrt{b^2 + c^2}"';
             const input = yield createEditor({
-                value: this.node.attrs.TeXRepresentation || '',
+                value: this.node.attrs.contents || '',
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
             });
             input.on('changes', () => __awaiter(this, void 0, void 0, function* () {
-                const TeXRepresentation = input.getValue();
-                const SVGStringRepresentation = yield (0, transform_1.convertTeXToSVG)(TeXRepresentation, true);
-                if (!SVGStringRepresentation) {
-                    throw new Error('No SVG output from MathJax');
-                }
+                const contents = input.getValue();
                 const pos = this.getPos();
                 const { tr } = this.view.state;
-                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { TeXRepresentation,
-                    SVGStringRepresentation })).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+                const format = contents.includes('mml:math') ? 'mathml' : 'tex';
+                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { contents,
+                    format })).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
                 this.view.dispatch(tr);
             }));
             const wrapper = document.createElement('div');

package/dist/cjs/views/equation_element.js

@@ -27,9 +27,12 @@ class EquationElementView extends block_view_1.default {
         this.elementType = 'figure';
         this.updateContents = () => {
             var _a;
-            const { suppressCaption, suppressTitle } = this.node.attrs;
-            this.dom.classList.toggle('suppress-caption', suppressCaption);
-            this.dom.classList.toggle('suppress-title', suppressTitle === undefined ? true : suppressTitle);
+            const { label } = this.node.attrs;
+            if (label) {
+                const labelEl = document.createElement('label');
+                labelEl.textContent = label;
+                this.dom.appendChild(labelEl);
+            }
             if ((_a = this.node.attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
                 const lastChange = this.node.attrs.dataTracked[this.node.attrs.dataTracked.length - 1];
                 this.dom.setAttribute('data-track-status', lastChange.status);

package/dist/cjs/views/inline_equation.js

@@ -17,6 +17,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineEquationView = void 0;
 const dompurify_1 = require("../lib/dompurify");
+const helpers_1 = require("../lib/helpers");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
@@ -29,22 +30,29 @@ class InlineEquationView extends base_node_view_1.BaseNodeView {
         };
         this.updateContents = () => {
             if (!(0, track_changes_utils_1.isRejectedInsert)(this.node)) {
-                const { SVGRepresentation } = this.node.attrs;
+                const { contents, format } = this.node.attrs;
                 while (this.dom.hasChildNodes()) {
                     this.dom.removeChild(this.dom.firstChild);
                 }
-                if (SVGRepresentation) {
-                    const fragment = (0, dompurify_1.sanitize)(SVGRepresentation, {
-                        USE_PROFILES: { svg: true },
-                    });
-                    this.dom.appendChild(fragment);
-                }
-                else {
-                    const placeholder = document.createElement('div');
-                    placeholder.className = 'equation-placeholder';
-                    placeholder.textContent = '<Equation>';
-                    this.dom.appendChild(placeholder);
-                }
+                (0, helpers_1.renderMath)(contents, format)
+                    .then((svgContent) => {
+                    if (svgContent) {
+                        const fragment = (0, dompurify_1.sanitize)(svgContent, {
+                            USE_PROFILES: { svg: true },
+                        });
+                        this.dom.appendChild(fragment);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'equation-placeholder';
+                        placeholder.textContent = '<Equation>';
+                        this.dom.appendChild(placeholder);
+                    }
+                    return true;
+                })
+                    .catch((error) => {
+                    console.error(error);
+                });
             }
             else {
                 this.dom.innerHTML = '';

package/dist/cjs/views/inline_equation_editable.js

@@ -48,7 +48,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineEquationEditableView = void 0;
-const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const creators_1 = require("./creators");
 const inline_equation_1 = require("./inline_equation");
@@ -62,21 +61,18 @@ class InlineEquationEditableView extends inline_equation_1.InlineEquationView {
             const { createEditor } = yield Promise.resolve().then(() => __importStar(require('../lib/codemirror')));
             const placeholder = 'Enter LaTeX equation, e.g. "E=mc^2"';
             const input = yield createEditor({
-                value: this.node.attrs.TeXRepresentation || '',
+                value: this.node.attrs.contents || '',
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
             });
             input.on('changes', () => __awaiter(this, void 0, void 0, function* () {
-                const TeXRepresentation = input.getValue();
-                const SVGRepresentation = yield (0, transform_1.convertTeXToSVG)(TeXRepresentation, true);
-                if (!SVGRepresentation) {
-                    throw new Error('No SVG output from MathJax');
-                }
+                const contents = input.getValue();
                 const pos = this.getPos();
                 const { tr } = this.view.state;
-                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { TeXRepresentation,
-                    SVGRepresentation })).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+                const format = contents.includes('mml:math') ? 'mathml' : 'tex';
+                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { format,
+                    contents })).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
                 this.view.dispatch(tr);
             }));
             this.props.popper.show(this.dom, input.getWrapperElement(), 'bottom');

package/dist/es/commands.js

@@ -15,7 +15,7 @@
  */
 import { ObjectTypes } from '@manuscripts/json-schema';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { buildComment, buildInlineMathFragment, generateID, isElementNodeType, isInBibliographySection, isListNode, isSectionNodeType, schema, } from '@manuscripts/transform';
+import { buildComment, generateID, isElementNodeType, isInBibliographySection, isListNode, isSectionNodeType, schema, } from '@manuscripts/transform';
 import { NodeRange } from 'prosemirror-model';
 import { wrapInList } from 'prosemirror-schema-list';
 import { NodeSelection, TextSelection, } from 'prosemirror-state';
@@ -101,7 +101,6 @@ export const createBlock = (nodeType, position, state, dispatch) => {
         case state.schema.nodes.equation_element:
             node = state.schema.nodes.equation_element.create({}, [
                 state.schema.nodes.equation.create(),
-                createAndFillFigcaptionElement(state),
             ]);
             break;
         default:
@@ -272,10 +271,10 @@ export const insertCrossReference = (state, dispatch) => {
     return true;
 };
 export const insertInlineEquation = (state, dispatch) => {
-    const inlineMathFragment = buildInlineMathFragment(state.selection.$anchor.parent.attrs.id, selectedText().replace(/^\$/, '').replace(/\$$/, ''));
     const sourcePos = state.selection.from - 1;
     const tr = state.tr.replaceSelectionWith(state.schema.nodes.inline_equation.create({
-        id: inlineMathFragment._id,
+        format: 'tex',
+        contents: selectedText().replace(/^\$/, '').replace(/\$$/, ''),
     }));
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, tr.mapping.map(sourcePos) + 1);

package/dist/es/lib/helpers.js

@@ -13,6 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 export const isNodeOfType = (...type) => (node) => {
     const [head, ...tail] = type;
     if (node.type === node.type.schema.nodes[head]) {
@@ -44,3 +53,13 @@ export const mergeSimilarItems = (compareFunc, mergeFunc) => (items) => {
         ];
     }, []);
 };
+export const renderMath = (math, format) => __awaiter(void 0, void 0, void 0, function* () {
+    if (format === 'tex') {
+        const { convertTeXToSVG } = yield import('../lib/tex-to-svg');
+        return convertTeXToSVG(math);
+    }
+    else {
+        const { convertMathMLToSVG } = yield import('../lib/mathml-to-svg');
+        return convertMathMLToSVG(math);
+    }
+});

package/dist/es/lib/mathml-to-svg.js

@@ -0,0 +1,66 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'mathjax-full/js/util/entities/all';
+import { xmlSerializer } from '@manuscripts/transform';
+import { HTMLAdaptor } from 'mathjax-full/js/adaptors/HTMLAdaptor';
+import { MmlFactory } from 'mathjax-full/js/core/MmlTree/MmlFactory';
+import { HTMLDocument } from 'mathjax-full/js/handlers/html/HTMLDocument';
+import { MathML } from 'mathjax-full/js/input/mathml';
+import { SVG } from 'mathjax-full/js/output/svg';
+class ManuscriptsMmlFactory extends MmlFactory {
+    constructor() {
+        super();
+        this.nodeMap.set('image', this.nodeMap.get('none'));
+    }
+    create(kind, properties = {}, children = []) {
+        if (kind === 'image') {
+            return this.node['none'](properties, children);
+        }
+        return this.node[kind](properties, children);
+    }
+}
+class ManuscriptsHTMLAdaptor extends HTMLAdaptor {
+    setAttribute(node, name, value, ns) {
+        if (name !== 'xmlns') {
+            ns ? node.setAttributeNS(ns, name, value) : node.setAttribute(name, value);
+        }
+    }
+}
+const InputJax = new MathML();
+const OutputJax = new SVG({
+    fontCache: 'none',
+});
+const adaptor = new ManuscriptsHTMLAdaptor(window);
+const doc = new HTMLDocument(document, adaptor, {
+    InputJax,
+    OutputJax,
+    MmlFactory: new ManuscriptsMmlFactory(),
+});
+doc.addStyleSheet();
+export const convertMathMLToSVG = (mathml, display = true) => {
+    const item = doc.convert(mathml, {
+        display,
+        em: 16,
+        ex: 8,
+        containerWidth: 1000000,
+        lineWidth: 1000000,
+        scale: 1,
+    });
+    if (!item || !item.firstChild) {
+        return null;
+    }
+    return xmlSerializer.serializeToString(item.firstChild);
+};

package/dist/es/lib/tex-to-svg.js

@@ -0,0 +1,56 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'mathjax-full/js/util/entities/all';
+import { xmlSerializer } from '@manuscripts/transform';
+import { HTMLAdaptor } from 'mathjax-full/js/adaptors/HTMLAdaptor';
+import { HTMLDocument } from 'mathjax-full/js/handlers/html/HTMLDocument';
+import { TeX } from 'mathjax-full/js/input/tex';
+import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages';
+import { SVG } from 'mathjax-full/js/output/svg';
+export const packages = AllPackages.filter((name) => name !== 'html' && name !== 'bussproofs');
+class ManuscriptsHTMLAdaptor extends HTMLAdaptor {
+    setAttribute(node, name, value, ns) {
+        if (name !== 'xmlns') {
+            ns ? node.setAttributeNS(ns, name, value) : node.setAttribute(name, value);
+        }
+    }
+}
+const InputJax = new TeX({
+    packages,
+});
+const OutputJax = new SVG({
+    fontCache: 'none',
+});
+const adaptor = new ManuscriptsHTMLAdaptor(window);
+const doc = new HTMLDocument(document, adaptor, {
+    InputJax,
+    OutputJax,
+});
+doc.addStyleSheet();
+export const convertTeXToSVG = (tex, display = true) => {
+    const item = doc.convert(tex, {
+        display,
+        em: 16,
+        ex: 8,
+        containerWidth: 1000000,
+        lineWidth: 1000000,
+        scale: 1,
+    });
+    if (!item || !item.firstChild) {
+        return null;
+    }
+    return xmlSerializer.serializeToString(item.firstChild);
+};

package/dist/es/views/equation.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { sanitize } from '../lib/dompurify';
+import { renderMath } from '../lib/helpers';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 export class EquationView extends BaseNodeView {
@@ -29,22 +30,29 @@ export class EquationView extends BaseNodeView {
             this.dom.setAttribute('id', this.node.attrs.id);
         };
         this.updateContents = () => {
-            const { SVGStringRepresentation } = this.node.attrs;
+            const { contents, format } = this.node.attrs;
             while (this.dom.hasChildNodes()) {
                 this.dom.removeChild(this.dom.firstChild);
             }
-            if (SVGStringRepresentation) {
-                const fragment = sanitize(SVGStringRepresentation, {
-                    USE_PROFILES: { svg: true },
-                });
-                this.dom.appendChild(fragment);
-            }
-            else {
-                const placeholder = document.createElement('div');
-                placeholder.className = 'equation-placeholder';
-                placeholder.textContent = '<Equation>';
-                this.dom.appendChild(placeholder);
-            }
+            renderMath(contents, format)
+                .then((svgContent) => {
+                if (svgContent) {
+                    const fragment = sanitize(svgContent, {
+                        USE_PROFILES: { svg: true },
+                    });
+                    this.dom.appendChild(fragment);
+                }
+                else {
+                    const placeholder = document.createElement('div');
+                    placeholder.className = 'equation-placeholder';
+                    placeholder.textContent = '<Equation>';
+                    this.dom.appendChild(placeholder);
+                }
+                return true;
+            })
+                .catch((error) => {
+                console.error(error);
+            });
         };
         this.ignoreMutation = () => true;
     }

package/dist/es/views/equation_editable.js

@@ -22,7 +22,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { convertTeXToSVG } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { createEditableNodeView } from './creators';
 import { EquationView } from './equation';
@@ -36,21 +35,18 @@ export class EquationEditableView extends EquationView {
             const { createEditor } = yield import('../lib/codemirror');
             const placeholder = 'Enter LaTeX equation, e.g. "a^2 = \\sqrt{b^2 + c^2}"';
             const input = yield createEditor({
-                value: this.node.attrs.TeXRepresentation || '',
+                value: this.node.attrs.contents || '',
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
             });
             input.on('changes', () => __awaiter(this, void 0, void 0, function* () {
-                const TeXRepresentation = input.getValue();
-                const SVGStringRepresentation = yield convertTeXToSVG(TeXRepresentation, true);
-                if (!SVGStringRepresentation) {
-                    throw new Error('No SVG output from MathJax');
-                }
+                const contents = input.getValue();
                 const pos = this.getPos();
                 const { tr } = this.view.state;
-                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { TeXRepresentation,
-                    SVGStringRepresentation })).setSelection(NodeSelection.create(tr.doc, pos));
+                const format = contents.includes('mml:math') ? 'mathml' : 'tex';
+                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { contents,
+                    format })).setSelection(NodeSelection.create(tr.doc, pos));
                 this.view.dispatch(tr);
             }));
             const wrapper = document.createElement('div');

package/dist/es/views/equation_element.js

@@ -21,9 +21,12 @@ export class EquationElementView extends BlockView {
         this.elementType = 'figure';
         this.updateContents = () => {
             var _a;
-            const { suppressCaption, suppressTitle } = this.node.attrs;
-            this.dom.classList.toggle('suppress-caption', suppressCaption);
-            this.dom.classList.toggle('suppress-title', suppressTitle === undefined ? true : suppressTitle);
+            const { label } = this.node.attrs;
+            if (label) {
+                const labelEl = document.createElement('label');
+                labelEl.textContent = label;
+                this.dom.appendChild(labelEl);
+            }
             if ((_a = this.node.attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
                 const lastChange = this.node.attrs.dataTracked[this.node.attrs.dataTracked.length - 1];
                 this.dom.setAttribute('data-track-status', lastChange.status);

package/dist/es/views/inline_equation.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { sanitize } from '../lib/dompurify';
+import { renderMath } from '../lib/helpers';
 import { isRejectedInsert } from '../lib/track-changes-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
@@ -26,22 +27,29 @@ export class InlineEquationView extends BaseNodeView {
         };
         this.updateContents = () => {
             if (!isRejectedInsert(this.node)) {
-                const { SVGRepresentation } = this.node.attrs;
+                const { contents, format } = this.node.attrs;
                 while (this.dom.hasChildNodes()) {
                     this.dom.removeChild(this.dom.firstChild);
                 }
-                if (SVGRepresentation) {
-                    const fragment = sanitize(SVGRepresentation, {
-                        USE_PROFILES: { svg: true },
-                    });
-                    this.dom.appendChild(fragment);
-                }
-                else {
-                    const placeholder = document.createElement('div');
-                    placeholder.className = 'equation-placeholder';
-                    placeholder.textContent = '<Equation>';
-                    this.dom.appendChild(placeholder);
-                }
+                renderMath(contents, format)
+                    .then((svgContent) => {
+                    if (svgContent) {
+                        const fragment = sanitize(svgContent, {
+                            USE_PROFILES: { svg: true },
+                        });
+                        this.dom.appendChild(fragment);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'equation-placeholder';
+                        placeholder.textContent = '<Equation>';
+                        this.dom.appendChild(placeholder);
+                    }
+                    return true;
+                })
+                    .catch((error) => {
+                    console.error(error);
+                });
             }
             else {
                 this.dom.innerHTML = '';

package/dist/es/views/inline_equation_editable.js

@@ -22,7 +22,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { convertTeXToSVG } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { createEditableNodeView } from './creators';
 import { InlineEquationView } from './inline_equation';
@@ -36,21 +35,18 @@ export class InlineEquationEditableView extends InlineEquationView {
             const { createEditor } = yield import('../lib/codemirror');
             const placeholder = 'Enter LaTeX equation, e.g. "E=mc^2"';
             const input = yield createEditor({
-                value: this.node.attrs.TeXRepresentation || '',
+                value: this.node.attrs.contents || '',
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
             });
             input.on('changes', () => __awaiter(this, void 0, void 0, function* () {
-                const TeXRepresentation = input.getValue();
-                const SVGRepresentation = yield convertTeXToSVG(TeXRepresentation, true);
-                if (!SVGRepresentation) {
-                    throw new Error('No SVG output from MathJax');
-                }
+                const contents = input.getValue();
                 const pos = this.getPos();
                 const { tr } = this.view.state;
-                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { TeXRepresentation,
-                    SVGRepresentation })).setSelection(NodeSelection.create(tr.doc, pos));
+                const format = contents.includes('mml:math') ? 'mathml' : 'tex';
+                tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { format,
+                    contents })).setSelection(NodeSelection.create(tr.doc, pos));
                 this.view.dispatch(tr);
             }));
             this.props.popper.show(this.dom, input.getWrapperElement(), 'bottom');

package/dist/types/lib/helpers.d.ts

@@ -18,3 +18,4 @@ import { Node, ResolvedPos } from 'prosemirror-model';
 export declare const isNodeOfType: (...type: string[]) => (node: Node) => boolean;
 export declare const nearestAncestor: (func: (node: ManuscriptNode) => boolean) => ($pos: ResolvedPos) => number | null;
 export declare const mergeSimilarItems: <T>(compareFunc: (a: T, b: T) => boolean, mergeFunc: (a: T, b: T) => T) => (items: T[]) => T[];
+export declare const renderMath: (math: string, format: string) => Promise<string | null>;

package/dist/types/lib/mathml-to-svg.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'mathjax-full/js/util/entities/all';
+export declare const convertMathMLToSVG: (mathml: string, display?: boolean) => string | null;

package/dist/types/lib/tex-to-svg.d.ts

@@ -0,0 +1,18 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'mathjax-full/js/util/entities/all';
+export declare const packages: string[];
+export declare const convertTeXToSVG: (tex: string, display?: boolean) => string | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.15",
+  "version": "1.7.16",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -29,13 +29,14 @@
   "dependencies": {
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/assets": "^0.6.4",
-    "@manuscripts/json-schema": "^2.2.4",
-    "@manuscripts/library": "^1.3.3",
-    "@manuscripts/style-guide": "^1.7.9",
+    "@manuscripts/json-schema": "^2.2.5",
+    "@manuscripts/library": "^1.3.4",
+    "@manuscripts/style-guide": "^1.7.10",
     "@manuscripts/track-changes-plugin": "^1.7.6",
-    "@manuscripts/transform": "^2.1.4",
+    "@manuscripts/transform": "^2.1.5",
     "astrocite-eutils": "^0.16.4",
     "axios": "^1.6.7",
+    "mathjax-full": "^3.2.2",
     "codemirror": "^5.58.1",
     "dompurify": "^2.4.1",
     "grapheme-splitter": "^1.0.4",