Description
Greetings, this is a very powerful tool, which I am, unfortunately, not able to grasp it seems.
I have read the documentation, googled and asked Chat GPT, all of which seem to fail me.
My use case is relatively simple - I need to use this package's tex2svg function. That is basically all I need from this package. I'm building my own Vue custom component library for internal use, one of component's ideas is to generate latex expression using MathLive keyboard and then convert that into an svg (that's where I though MathJax would come in). All seems to be working fine within the component library, though once I install my library, which contains mathjax into other project, I start getting Cannot set property Package of #<Object> which has only a getter error (yes, I've already read all the related issues, they don't seem to help much). This is the snippet of the component that I'm building:
<template>
<div>
<div ref="mathEditor"></div>
<div></div>
<div
v-if="svgHtml"
v-html="svgHtml"></div>
</div>
</template>
<script>
import { Utils } from "../classes/Utils"
import { MathfieldElement } from "mathlive"
import "mathjax/es5/tex-svg.js"
export default {
name: "MathEditor",
data() {
return {
mathEditor: null,
formula: "",
svgHtml: null,
}
},
<...>
methods:{
handleInput(value) {
this.formula = value
let svg = Utils.latexToSvg(value)
this.$emit("update", { svg: svg, latex: this.formula })
},
}
Utils.js is also pretty simple
class Utils {
static latexToSvg(latex) {
if (window.MathJax) {
let svgNode = window.MathJax.tex2svg(latex).getElementsByTagName("svg")[0]
return svgNode.outerHTML
}
}
}
export { Utils }
What am I doing wrong? Is there a simpler way to achieve what I'm trying to do? Any help would be greatly appreciated