Quill: MathQuill formula editor (feature request)

[benbro]

MathQuill is a formula editor.
http://mathquill.com

Cheet Sheet
https://www.udacity.com/wiki/ma006/mathquill

MathQuill is much nicer than writing raw latex.
Is there a chance it could be used in the formula tooltip?

[harrisonlo]

I would like to request this feature as well, since MathQuill is undoubtedly the best formula editor out there in terms of user experience.

[BenAsaf]

+1

[timeswind]

+1

[fsaenger]

Have you guys seen how Dropbox Paper includes formulae and latex in documents?
I'm mentioning this since you are talking about the user experience.

To use MathQuill, the user needs to know latex. MathQuill then just renders the input into a more graphical formula while typing. It makes it easier in some ways, because users see the result of their code immediately, but it doesn't remove the need to learn latex.

In contrast, Dropbox Paper just switches to a full latex code view once the user clicks the formula. In my opinion this is less confusing since it is showing me what I had to write anyway – the latex code.

So all in all, I dare to say that Paper's approach is much easier to implement and would show better results if you were to conduct usability tests with users. I haven't done any, though, so this is just a gut feeling.

Edit: The pure fact that there is a "cheat sheet" is a good clue that MathQuill is not the non plus ultra in terms of user experience.

[fsaenger]

Here is a quick animation showing how Dropbox Paper works, for those of you who are not using it:

[harrisonlo]

@fsaenger This would really limit the audience to those more familiar with the syntax. WYSIWYGs always have a much larger audience. Think why Quill exists in the first place? Why can't everyone just write HTML?

Hope you get my point :)

[fsaenger]

@harrison0723 MathQuill is not really WYSIWYG, it's a live preview. You have to know the syntax to be able to write the formula. This makes the user experience even worse than either just writing the syntax or getting a real WYSIWYG (more like LibreOffice Math or whatever it's called).

It's like writing a strong tag in HTML around a work and once you've completed writing the closing tag, the expression gets converted into an actual bold preview. This is _not_ a good experience, and I hope you get that point too ;)

[harrisonlo]

@fsaenger I just checked and it's true that MathQuill is not entirely WYSIWYG, but it is the closest thing that is to it. With a few buttons to replace the very few syntax users are required to know, you can make it entirely WYSIWYG. That's what I have done for my app (almost out to production), which is why I mistakenly assumed it to be WYSIWYG.

In short, it is the closest thing to WYSIWYG, and executable to make it WYSIWYG.

[jhchen]

Given the size of the MathQuill library and its dependency jQuery, it's pretty unlikely it will be added to Quill core. If someone is interested in building this as an optional module, please comment and I'm happy to give guidance.

[xiaokaike]

How to re-edit the formula ?

how about click the formula to re-editt

[benbro]

@xiaokaike there is a feature request for this:
https://github.com/quilljs/quill/issues/801

[c-w]

@benbro @harrison0723 @timeswind @BenAsaf @tscholl2 @guillefix: In case you are still looking for a way to improve the math authoring experience in Quill, take a look at my mathquill4quill module which monkey-patches MathQuill into Quill.

[anuragd7]

Anyone tried the mathquill4quill module shared by @c-w . It works perfectly in chrome but does not work in Safari. Any suggestions on how this can be fixed?

[anuragd7]

If anyone faces a problem using the mathquill4quill module in Safari. It seems to happen because jquery is not adding and removing classes and attributes correctly in Safari. I fixed the issue by setting up a custom handler for the formula button in the toolbarOptions. The handler adds and removes classes and attributes as required.

handlers: {
      formula: () => {
        var inputBox = document.getElementsByClassName("ql-tooltip")[0];
        inputBox.setAttribute("data-mode", "formula");
        inputBox.className += " ql-editing ql-flip";
        inputBox.classList.remove("ql-hidden");
      }

[c-w]

The mathquill4quill fix for Safari mentioned by @anuragd7 has now been merged (see https://github.com/c-w/mathquill4quill/pull/2).

[brunoserman]

Is it possible to edit math formulas with the mathquill4quill module?

[c-w]

@brunoserman Editing formulas is not currently implemented in mathquill4quill. Pull requests are welcome!