I noticed that there is no English translations for the editor.
Would you be interested of receiving a PR for adding that?

Here I am entering the expression a^{x_0^y}. The first line has the same expression correctly rendered, but on the second line the editor preview puts the y in the wrong place.

In the README.md there is a reference to the math-demo github repository: https://github.com/digabi/math-demo/ but the repository doesn't exist or is a private one giving 404 error.

The shortcut CTRL+E that opens a new formula can often be mistyped as CTRL+W which closes the browser tab on atleast the newest version of Firefox. (https://math-demo.abitti.fi/)

Im not sure if this is a problem in the real abitti environment.

Adding a onbeforeunload event listener would probably help with the issue as it would make the browser show a "Do you wan't to close this page?" dialog.
https://stackoverflow.com/a/1119324

Adding a line break \\ in LaTeX makes the preview disappear completely. This is extremely inconvenient. Also typing something to the preview in that state will make you lose everything. Here's a screenshot:

Hi folks,

we had issues in rendering \square -symbols with the math editor. On https://math-demo.abitti.fi/ it works, but the other demo (http://digabi.github.io/rich-text-editor/) has the same problem. What is the difference between those two?

we want to integrate physics latex code where we add the code and add physics tab in css

Pictures used to show a source for a solution always show up really big with no way of changing it except for downloading the HTML file and adjusting the size there with CSS.

\xrightleftharpoons already works (but \rightleftharpoons doesn't in preview), so could you add support for \xrightarrow (and \xleftarrow) also. This would help in writing some chemical reactions.

Dfrac formula \dfrac{\frac{1}{2}}{\dfrac{3}{4}} changes to frac if edited \frac{\frac{1}{2}}{\frac{3}{4}

The formula changes from dfrac to frac when editing

Low priority, since Firefox is used in Abitti

It seems to be an intended feature that inserting \ followed by something that isn't a latex command will insert the text inside \text{}. This is useful behaviour for quickly writing one word \text{} blocks

This feature does not work with all expected characters. As far as I can tell, it seems to cancel the text block for any non a-z character. This should support äöå.

Is it possible to set custom position for the toolbar? I would like to have it visible at all times and inside my component instead of top of the page.

Here are a few examples of the issues which I've found with rendering powers written incorrectly in LaTeX

It seems to me like it's trying to automatically fix the syntax, but that only happens when re-entering the editor instead of right away when exiting which causes the rendering to change. This shouldn't cause any huge problems, but it could cause some small annoyances.

When using mhchem with \ce, the result does not render on the preview view. Like here:

But it does render after closing the field:

Also, \ce should probably have a shortcut in the top bar if this issue is fixed.

The index.html file has an invalid link to the mathquill.css file. This is causing the math editor to not display one's text in the text box while writing it in the "Lisää kaava"-section.

When writing custom LaTeX in the editor, some of it is not supported by MathQuill (the wysiwyg-editor), but is supported by the final renderer. This is fine, and I can use all the functionality. However, when reopening the equation for editing, all raw LaTeX is reinterpreted and a lot of code that isn't supported by MathQuill changes.

Example

I write some LaTeX that isn't quite supported by MathQuill:

Exit the editor and it displays fine:

But, when reopening the editor, the code has changed:

And finally, closing the editor again, the final render has changed.

The same kind of behaviour can be observed with many other features as well, such as symbol names changing to their aliases (not a deal-breaker necessarily), or writing "minimum" and not wanting it to be changed to "\min imum".

Low priority, since Firefox is used in Abitti

Any documentation or proper ways how to use this with React?

When you clone this repository and try to copy paste math from https://cheat.abitti.fi/ it doesn't work as in the https://math-demo.abitti.fi/ I would need more information how the serverside rendering should be implemented in order to get it working like in the official versions. Ticket is related to my earlier ticket: #156 Could you provide more information how to get the copy paste working on localhost?

With a setup of multiple editor implementations copying and pasting formulas from one editor to another does not work.

The editor has no standard way of storing its formula data. Some implementations store the svg formula data statically in the html as base64. In the static implementation there is no server handling the conversion. In dynamic implementations the svg image is stored as a link src="/math.svg?latex=x" which the server resolves. The lack of standardization causes the following formula copying issues.

Dynamic to static:

Formulas cannot be copied from dynamic implementations to static implementations, since the dynamic implementations only work with a server resolving the svg images.
To fix this, the 2 methods of implementations should be clearly separated. The data coming from a different editor type could be parsed when the paste event happens to convert it to a format which the paste target expects.

Static to dynamic:

This theoretically works, but the lack of standards still causes issues. Dynamic editors expect dynamic data when saving the answer. A conversion of the data when pasting would guarantee compatibility.

Dynamic to dynamic:

Copying a formula between 2 dynamic implementations does not work, because the image src in the paste data references the url it was copied from. This one is easier to fix, the paste event handler just needs to parse the incoming data and remove the base url references.
Fix for this part: #422

To achieve compatibility between different implementation types the paste event handler needs to convert the data into what the editor expects. This would require a config for the editor, where the type of implementation is defined.

Hi

I'm exploring whether it would be feasible to use the Abitti editor in an e-learning system. We already have exercises where students type into a textarea element but that's rather horrible. The easiest way to utilize the editor would be to compile the whole thing into a static site without the Node server. This would, of course, drop out the upload functionality, but whatever.

From my five-minute testing it seems that once you fire up the editor, the only realtime connections are required for the math.svg in order to render something nice on the screen.

Question: when this architecture was chosen, was it investigated whether this whole thing https://github.com/digabi/rich-text-editor/blob/master/server/mathSvg.js could be done on the client without any additional HTTP requests? It should be a matter of finding Latex SVG libraries or something like that, the SVG construction is a trivial thing in itself.

If the SVG rendering could be done in the client AND if I'm not missing something critical, I think it would not be too big a hurdle to build a static version which one could use by just including necessary CSS, JS, and font files and putting some <div id="editor-here"> in their own templates.

Please note I really haven't dug deep here. Just some ideas, I could be missing a lot.

Thanks a lot!

While pressing \intsub button from up it gives other piece of code, but when writing in LaTeX \intsub just shows error to user.

Is it possible to use only latex / math view instead of whole input field which is contenteditable?

Both work when typed into the Latex field, but a shortcut would be helpful.

NOT AN ISSUEI have been trying to use this library in Angular/Ionic project to no avail, kindly provide a guideline or documentation on how to use this library
PS Thanks for such a nice library

When added photo to text and go to other tab in browser makes photos disappear when going back to math-demo tab.

I am using the digabi editor for school and I want to use the TAB charcter like there is in for example MS Word and other text editors.

\begin{array}{l|c|r}
abcde&ab&ab\
\hline
&&abcd\
\hline
ab&abcde&
\end{array}

If I input this and click outside the editor so it closes, it correctly displays the second \hline and the text alignment changes stated in {l|c|r}, but when I click back on the text to continue editing it, the {l|c|r} is replaced with {l|l} and the second \hline is gone, returning it to the default array state. It could be useful if this was optional.

Pasting the text results in javascript code to be inserted as a string instead of the clipboard contents.
The weird looking image result is working, it's trying to write that entire text block on one line which results in a 28030 px wide image

Within formulas \mathbb{} is used to display the characters ℤℝℕℚ

The problem is this can be accidentally stepped into:

Writing inside mathbb doesn't seem to be intended - or at least wasn't tested properly.
Stepping inside it should probably just be disabled entirely.

Here are some of the issues I quickly found

The behavior above happens with (), [], {}, | |,

It erases latex brackets, which breaks half of the formulas

\lim, upper index and lower index multiply on interaction:

Extending formula renders wrong.

Latex: ^{X\text{)}}\frac{X}{X}

As you can see the x) renders almost in the middle of the formula. Should be on top like where it is when typing the code.

Add support for per mille sign.

Therefore it doesn't work for adding formulas

This way rendering answers online doesn't require modifying paths afterwards

New formula with enter

Starting a formula (and writing any content) and ending it with enter should place the formula (where it would be placed with any formula exit method) and start a new formula, which if finished, will be positioned after the previous formula and 1 newline.

This behaviour gets inconsistent in the following situation:
Place a newline (and keep your caret at the start of the new line)
Write a formula (with content)
End this formula with enter

The inconsistent behaviour is that this will start the new formula after 2 newlines instead of 1.

Keys pressed here: enter, ctrl+e, a, enter, b, esc

The new formula should be placed after 1 newline.

User written text gets sanitized

Copying a formula from https://cheat.abitti.fi/ and then pasting it to the demo https://math-demo.abitti.fi/ works as expected but pasting to the rich-text-editor direct example doesn't work. I experienced this same issue on my app. Any hints what could be wrong? http://digabi.github.io/rich-text-editor/ The formula just flashes quickly and disappears. No latex image.

When typing \deg to the LaTex-field in the editor, the preview shows the degree symbol (°) correctly. But after you unfocus the LaTex field, it turns into plain text "deg". After activating the editor again, the LaTex is now \degree, the preview is again correct, but after unfocusing it the symbol/formula fails.

There is a shortcut button in the toolbar, but some students prefer typing it in LaTex.

At least safari is unable to render unicode superscript characters in mathjax svg.
i.e. ⁴ should be converted to ^4 when pasted to editor.

The toolbar can block the editor field if the editor field is positioned near the top of the page and the viewport width is scaled down. Examples captured on https://math-demo.abitti.fi/ with the header and instruction text removed.

Chromium

Firefox

Create for example this latex code:

ax^2+bx+c=0

in rich text editor demo http://digabi.github.io/rich-text-editor/
Then create the same latex code in Math demo: https://math-demo.abitti.fi/

The SVG font is slightly different. What is causing this and what is the math-demo configuration for fonts?