🐛 [Bug]: Formula dialog/tooltip is closed upon clicking "virtual-keyboard-toggle" or "menu-toggle" in React js.

[RaSah673]

Version

latest - 0.105.3

What is actually happening

PROBLEM When the "virtual keyboard toggle" or the "menu-toggle" is clicked, "ql-hidden" is inserted to the class= "ql-tooltip.math-field-tooltip.ql-flip" and the dialog becomes hidden but should be visible.

However, in the vue.js example of "https://opentiny.github.io/tiny-editor/docs/demo/formula", the "ql-hidden" is inserted to the class only when "Enter" key is pressed (to insert the written formula to the editor) - which is the expected and correct behaviour.

I followed the issue, and found it is made by this css snippet:

.ql-snow .ql-hidden {
  display: none;
}

in the '@opentiny/fluent-editor/style.css' file. If it is commented out, the issue is resolved, but we can't do it because this snippet has some other duties in the editor including closing the formula dialog when inserting the formula to editor by pressing "Enter" key.

Step to reproduce

// MathliveEditor.jsx  (plain JavaScript, no TypeScript)

import React, { useEffect, useRef } from 'react'

import 'mathlive'
import 'mathlive/static.css'
import 'mathlive/fonts.css'

import "./style.css"
import "./styles.css"

const TOOLBAR_CONFIG = [
  [{ header: [] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  ['formula'],
]

export default function MathliveEditor() {
  const editorRef = useRef(null)

  useEffect(() => {
    let editorInstance

    // Lazy-load so it works in SSR environments just like the Vue example
    import('@opentiny/fluent-editor').then((mod) => {
      const FluentEditor = mod.default

      if (editorRef.current) {
        editorInstance = new FluentEditor(editorRef.current, {
          theme: 'snow',
          modules: {
            toolbar: {
              container: TOOLBAR_CONFIG,
              handlers: {
                formula() {
                  const mathlive = this.quill.getModule('mathlive')
                  mathlive.createDialog('')
                },
              },
            },
            mathlive: true,
          },
        })

        const html =
          'const html = `<p>正弦交流电的公式可以表示为<math-field class="ql-math-field view"></math-field></p>`;'

        editorInstance.root.innerHTML = html
      }
    })


    return () => {
      if (editorInstance && typeof editorInstance.destroy === 'function') {
        editorInstance.destroy()
      }
    }
  }, [])


  return <div id="mathliveEditor" ref={editorRef} />
}

Any additional comments (optional)

I tried adding this custom style:

.ql-tooltip.math-field-tooltip.ql-flip {  
    display: block !important;
}

but experience non-closing dialog upon pressing "Enter" key.

[kagol]

@RaSah673 Maybe mathlive version problem, please try the follow mathlive version:

"mathlive": "~0.101.0",

#279