editable wysiwyg

v6
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.