editable wysiwyg

v6
1

I’d like to develop a WYSIWYG editable plugin, for example, one that allows editing of fractions where both the numerator and the denominator can be edited, and during the editing process, features like autocomplete and highlighting, etc are also available. Is this functionality achievable? What components can be used to implement it?

2

You might be looking for Prosemirror, which is focused on building WYSIWYG text editors. There seems to be a math plugin: GitHub - benrbray/prosemirror-math: Schema and plugins for "first-class" math support in ProseMirror!.

3

Thank you very much, I’ll check it out.

4

Also GitHub - JerryI/wljs-editor exists

5

Another math WYSIWYG library: http://mathquill.com/ [but no CM/PM integration]

fwiw Fidus Writer is also based on ProseMirror with WYSIWYG math entry (using GitHub - arnog/mathlive: A web component for easy math input), but it pops up a dialog for that, rather than editing in-line. Worse, if you want to edit an existing formula, it seems you must select it than click the “%” button again with mouse to open dialog.

prosemirror-math looks non-WYSIWYG — you type latex source, it renders when you finish/leave the formula — but I personally feel the ability to enter a formula for editing, whether latex or WYSIWYG, as if it was part of the text is a must-have for any kind of math-heavy editing.

  • That kind of edit-source-than-render integration is also possible with CodeMirror, by replacing text portions with “widgets”; E.g. Overleaf in Rich Text mode did it with CodeMirror v5; I’ve done that too and happy to chat. Didn’t try myself in v6 but it’s possible with Decorations.
  • Embedding WYSIWYG editable widgets in CodeMirror is probably possible too? It might be harder to convince the inner WYSIWYG library to allow regular movement keys to exit its area(?)
  • Technically, CodeMirror vs ProseMirror preference is mainly down to the primary representation — do you prefer flat text or tree of nodes.
  • UX-wise, there will be subtle differences…
    Like can selection cross formula boundaries? E.g. in Foo $math1$ Bar $math2$ Baz, in CodeMirror+latex source approach, you could even select from middle of formula to middle of other formula th1$ Bar $ma, press Ctrl+X and the leftovers will form one formula. You can also, easily, get a broken half-formula.
    But if you do CodeMirror+WYSIWYG, you can keep widgets always rendered, getting a better approximation to “unbreakable atomic” formulas. ProseMirror is likely to be most “robust” with explicit concept of formula nodes.

P.S. It’s not a hard “wild text vs. structured editing” tradeoff; it’s not that ProseMirror makes it impossible to support actions like “join 2 formulas into 1” (similar to how it lets user join 2 paragraphs by pretending they “deleted the newline”, despite representing them as separate tree nodes) — but you might need to explicitly implement some such things…

Also ask yourself how you want to interact with Copy-paste to/from external programs.

7

Thank you for your advice. I have learned about the two options you mentioned above, and WLJS seems to be a good choice, although it looks like it’s still not perfect.

8

Thank you very much for your advice. This looks really great.