How to add LaTeX or any math formula support to my HTML editor?

[alirezaemami]

I need to add LaTeX (or any other approach) to add formula in my HTML

[tneotia]

I don't know how LaTeX works in HTML, is there some JS/CSS you have to add? How would you add LaTeX support to a normal HTML document? This will help me figure out a way to support it in the editor.

[alirezaemami]

To add LaTex or MathJax, we only need to be able to add a script to the iframe head.
`

      initialText: r"""
       <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      <script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
      </script>
       Look at this: \(ax^2 + bx + c = 0\) \(\sqrt{x}\)"""

`

http://docs.mathjax.org/en/latest/web/examples.html

This code is obviously not a good approach but, it is working.
We need to remove the script from the initialText and move it somewhere else(but we don't know where).

[alirezaemami]

There is another problem with RTL
By switching LTR to RTL, MathJaX will fail and will not work again.

[tneotia]

Thanks for the detail, just noticed you are using Flutter Web. I know how to implement this and will provide a solution for you soon.

[tneotia]

@alirezaemami can you try this:

HtmlEditor(
  controller: controller,
  htmlEditorOptions: HtmlEditorOptions(
    initialText: r"""Look at this: \(ax^2 + bx + c = 0\) \(\sqrt{x}\)""",
    darkMode: false,
    webInitialScripts: UnmodifiableListView(
      [
        WebScript(script: """
          var script = document.createElement('script');
          script.src = 'https://polyfill.io/v3/polyfill.min.js?features=es6';
          document.head.appendChild(script);
          var script2 = document.createElement('script');
          script2.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
          script2.async = true;
          document.head.appendChild(script2);
          """, name: "mathJax"
        )
      ]
    )
  ),
  callbacks: Callbacks(onInit: () {
    controller.evaluateJavascriptWeb("mathJax");
  }),
),

Let me know if it doesn't work or you need more help.

Result:

I will say this, I like the idea of editing math in the HTML editor but it wasn't really built for this... when I tried to mess around with creating math input it wasn't working. Maybe I was doing something wrong though, just FYI.

[alirezaemami]

Thank you for paying attention to this issue.
I understand that users are not comfortable writing formulas and I am combining libraries to provide a suitable solution for my project.
I am currently using the math_keyboard library to get formulas from users and convert formulas to LaTeX, and I want to display the LaTeX output in html-editor-enhanced.
I hope I can create a good UX for users.

I'm currently developing part of an online testing project called Wikiazma, and I want my users able to design complex questions freely. I need a WYSIWYG editor for this, but unfortunately, Flutter is still weak in this, and after reviewing dozens of libraries, HTML seems to work better than Markdown, Quill, and etc.

[tneotia]

Yes you are correct, the wysiwyg functionality in Flutter is very lacking, especially because their webview support is not great. Hopefully it gets better in the future.

If you have any other questions feel free to ask. Thanks!

[adithyank]

  void addText() {
    controller.insertText(r"""Look at this: \(ax^2 + bx + c = 0\) \(\sqrt{x}\)""");
  }

This does not add expression to the editor. It just adds the given string as it is.

is it possible to use controller.insertText() or controller.insertHtml() to insert an expression dynamically?

Can you help please?