arnekeller/Typicalc
1
0
Fork 0
mirror of https://gitlab.kit.edu/uskyk/typicalc.git synced 2024-11-12 20:23:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

MathJax without Shadow DOM (did not work)

Browse Source 
Checkstyle excludes
Bundle MathJax
This commit is contained in:
Arne Keller 2021-01-28 16:18:42 +01:00
parent d48262c0ca
commit 9f13bb7e42
4 changed files with 25 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/mathjax-setup.js
View File

@ -6,86 +6,27 @@ window.MathJax = {
}, },
startup: { startup: {
ready: () => { ready: () => {
const mathjax = MathJax._.mathjax.mathjax;
const HTMLAdaptor = MathJax._.adaptors.HTMLAdaptor.HTMLAdaptor;
const HTMLHandler = MathJax._.handlers.html.HTMLHandler.HTMLHandler;
const AbstractHandler = MathJax._.core.Handler.AbstractHandler.prototype;
const startup = MathJax.startup;
//
// Extend HTMLAdaptor to handle shadowDOM as the document
//
class ShadowAdaptor extends HTMLAdaptor {
create(kind, ns) {
const document = (this.document.createElement ? this.document : this.window.document);
return (ns ?
document.createElementNS(ns, kind) :
document.createElement(kind));
}
text(text) {
const document = (this.document.createTextNode ? this.document : this.window.document);
return document.createTextNode(text);
}
head(doc) {
return doc.head || (doc.getElementById("mjx-document") || {}).firstChild || doc;
}
body(doc) {
return doc.body || (doc.getElementById("mjx-document") || {}).lastChild || doc;
}
root(doc) {
return doc.documentElement || doc.getElementById("mjx-document") || doc;
}
}
//
// Extend HTMLHandler to handle shadowDOM as document
//
class ShadowHandler extends HTMLHandler {
create(document, options) {
const adaptor = this.adaptor;
if (typeof (document) === 'string') {
document = adaptor.parse(document, 'text/html');
} else if ((document instanceof adaptor.window.HTMLElement ||
document instanceof adaptor.window.DocumentFragment) &&
!(document instanceof window.ShadowRoot)) {
let child = document;
document = adaptor.parse('', 'text/html');
adaptor.append(adaptor.body(document), child);
}
//
// We can't use super.create() here, since that doesn't
// handle shadowDOM correctly, so call HTMLHandler's parent class
// directly instead.
//
return AbstractHandler.create.call(this, document, options);
}
}
//
// Register the new handler and adaptor
//
startup.registerConstructor('HTMLHandler', ShadowHandler);
startup.registerConstructor('browserAdaptor', () => new ShadowAdaptor(window));
//
// A service function that creates a new MathDocument from the
// shadow root with the configured input and output jax, and then
// renders the document. The MathDocument is returned in case
// you need to rerender the shadowRoot later.
//
MathJax.typesetShadow = function (root, callback) { MathJax.typesetShadow = function (root, callback) {
const InputJax = startup.getInputJax(); setTimeout(() => {
const OutputJax = startup.getOutputJax(); let tex = root.getElementById("tc-content").innerText;
const html = mathjax.document(root, {InputJax, OutputJax}); root.getElementById("tc-content").innerText = "";
html.render(); MathJax.tex2svgPromise(tex, options).then(function (node) {
if (callback != null) { console.log(node);
callback(html); //
} // The promise returns the typeset node, which we add to the output
return html; // Then update the document to include the adjusted CSS for the
// content of the new equation.
//
root.appendChild(node);
MathJax.startup.document.clear();
MathJax.startup.document.updateDocument();
// TODO: findSteps(node);
}).catch(function (err) {
//
// If there was an error, put the message into the output instead
//
root.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message));
});}, 1); // TODO: remove the delay?
} }
// //
@ -105,10 +46,3 @@ window.MathJax = {
} }
} }
}; };
(function () {
let script = document.createElement('script');
script.src = 'http://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-svg.js';
// script.async = true;
document.head.appendChild(script);
})();

1
frontend/src/tex-svg-full.js Normal file
View File

File diff suppressed because one or more lines are too long

2
pom.xml
View File

@ -177,6 +177,8 @@
<version>3.1.1</version> <version>3.1.1</version>
<configuration> <configuration>
<configLocation>${project.build.directory}/../src/test/resources/checkstyle.xml</configLocation> <configLocation>${project.build.directory}/../src/test/resources/checkstyle.xml</configLocation>
<excludes>src/main/resources</excludes>
<excludes>src/test/resources</excludes>
<failOnViolation>true</failOnViolation> <failOnViolation>true</failOnViolation>
<violationSeverity>warning</violationSeverity> <violationSeverity>warning</violationSeverity>
</configuration> </configuration>

2
src/main/java/edu/kit/typicalc/view/main/MathjaxDisplay.java
View File

@ -1,6 +1,7 @@
package edu.kit.typicalc.view.main; package edu.kit.typicalc.view.main;
import com.vaadin.flow.component.Tag; import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JavaScript;
import com.vaadin.flow.component.dependency.JsModule; import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.littemplate.LitTemplate; import com.vaadin.flow.component.littemplate.LitTemplate;
@ -8,6 +9,7 @@ import com.vaadin.flow.component.template.Id;
@Tag("tc-display") @Tag("tc-display")
@JsModule("./src/mathjax-display.ts") @JsModule("./src/mathjax-display.ts")
@JavaScript("./src/tex-svg-full.js")
public class MathjaxDisplay extends LitTemplate { public class MathjaxDisplay extends LitTemplate {
@Id("tc-content") @Id("tc-content")