Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
alirezaemami opened this issue Jun 26, 2021 · 8 comments
Closed
Labels
question Further information is requested

Comments

@alirezaemami
Copy link

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

@alirezaemami alirezaemami added the question Further information is requested label Jun 26, 2021
@tneotia
Copy link
Owner

tneotia commented Jun 27, 2021

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
Copy link
Author

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

Screen Shot 2021-06-27 at 14 46 57

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
Copy link
Author

There is another problem with RTL
By switching LTR to RTL, MathJaX will fail and will not work again.
Screen Shot 2021-06-27 at 14 59 40

@tneotia
Copy link
Owner

tneotia commented Jun 27, 2021

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
Copy link
Owner

tneotia commented Jun 28, 2021

@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:

image

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
Copy link
Author

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
Copy link
Owner

tneotia commented Jun 29, 2021

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!

@tneotia tneotia closed this as completed Jun 29, 2021
@adithyank
Copy link

adithyank commented Oct 25, 2023

  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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants