search

arnog / vue-mathlive

Example of using the Vue wrapper for MathLive math editor
MIT License
129 stars 13 forks source link

The software keyboard is abnormal when the vue-mathlive is embedded by the iframe #89

Open jlsunlight opened 1 year ago

jlsunlight commented 1 year ago

When vue-mathlive is embedded by iframe, the keyboard does not display

arnog commented 1 year ago

Can you provide a project demonstrating the issue?

jlsunlight commented 1 year ago 
<!-- math-live.html -->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>MathLive with by iframe</title>
  </head>
  <style>
    body {
      font-family: sans-serif;
      color: #444;
      background-color: #f9f9f9;
    }
    main {
      max-width: 820px;
      margin: auto;
    }
    .mathfield {
      border: 1px solid #ddd;
      padding: 5px;
      margin: 10px 0 10px 0;
      border-radius: 5px;
      background-color: #fff;
    }
  </style>

  <body>
    <script type="module">
      import Vue from "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm.browser.js";
      import * as MathLive from "https://unpkg.com/mathlive/dist/mathlive.mjs";
      import MathfieldComponent from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs";
      Vue.config.devtools = true;

      Vue.use(MathfieldComponent, MathLive);
      // The default tag for mathfields is <mathlive-mathfield>
      // A custom tag can be defined using:
      // ```Vue.component("custom-tag", Mathfield);```

      new Vue({
        el: "main",
        data: {
          formula: "",
          keystroke: "",
        },
        methods: {
          sayIt: (event) => {
            // this.$refs.mathfield.executeCommand(["speak", "all"]);
          },
          setIt: (event) => {
            // this.formula = "x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}";
          },
          ping: () => {
            console.log("ping");
          },
          displayKeystroke: (keystroke, _ev) => {
            this.keystroke = keystroke;
            return true;
          },
          asSpokenText: function () {
            return this.$refs.mathfield
              ? this.$refs.mathfield.getValue("spoken")
              : "";
          },
        },
        mounted,
      });

      async function mounted() {
        this.$mathlive.renderMathInElement(this.$refs["static-math"]);
      }
    </script>
    <main>
      <h2>MathLive with by iframe</h2>
      <mathlive-mathfield
        id="mf"
        ref="mathfield"
        :options="{smartFence:false, virtualKeyboardMode:'onfocus'}"
        @focus="ping"
        :on-keystroke="displayKeystroke"
        v-model="formula"
        >f(x)=</mathlive-mathfield
      >

      <div ref="static-math">\[x^2 = x*x\]</div>
    </main>
  </body>
</html>
<!-- index.html -->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- <title>MathLive with by iframe</title> -->
  </head>

  <body>
    <div id="app">
      <iframe src="./math-live.html" frameborder="0"></iframe>
    </div>
  </body>
</html>
arnog commented 1 year ago

For the keyboard to be displayed in the parent document you must load the MathLive module in the parent document.

jlsunlight commented 1 year ago 
<!-- index.html -->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- <title>MathLive with by iframe</title> -->
  </head>

  <body>
    <div id="app">
      <iframe src="./math-live.html" frameborder="0"></iframe>
    </div>
  </body>
  <script type="module" src="">
    import Vue from "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm.browser.js";
    import * as MathLive from "https://unpkg.com/mathlive/dist/mathlive.mjs";
    import MathfieldComponent from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs";
    Vue.config.devtools = true;

    Vue.use(MathfieldComponent, MathLive);
  </script>
</html>

I load the MathLive module in the parent document but the keyboard didn't displayed in the parent document,Can you provide a example or project