<template>
  <div>
    <math-field
      id="formula"
      virtual-keyboard-mode="manual"
      style="padding: 1px; margin: 10px"
      >x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}</math-field
    >
    <el-input
      type="textarea"
      :value="mathText"
      @input="handleMathInput"
    ></el-input>
  </div>
</template>

<script>
import { MathfieldElement } from "mathlive";
let mf;
export default {
  data() {
    return {
      mathText: "",
    };
  },
  mounted() {
    mf = document.querySelector("#formula");
    const updateLatex = () => {
      this.mathText = mf.value;
    };
    mf.addEventListener("input", updateLatex);
  },

  methods: {
    handleMathInput(value) {
      mf.setValue(value);
      this.mathValue = value;
    },
  },
};
</script>

<style></style>