ProseMirror + Math at Desmos


Hey all! I just finished the initial integration of ProseMirror into our teacher site here at Desmos. We’re currently using it to allow teachers to enter inline math in the descriptions and notes that they create for their activities. We plan to add several other node types to allow teachers and students to create rich documents to express their pedagogy and mathematical thinking!

Here it is in action:


You can play around with a demo of our implementation here:

Huge thanks to @marijn for the documentation, answering questions and very quick turnaround on reported issues!

Odd behavior with NodeView and 'atom' Node

Awesome :slight_smile: any plans of making this open source ?

1 Like

Very nice! The crossing of the border between the formula and the other text feels entirely natural. I guess you’re using custom arrow key handlers?


Wow, this looks really good! :slight_smile:


To move from the math node to prosemirror, we hook into MathQuill handlers and trigger a selection transaction and a view.focus. To go the other direction, we need to know whether we are entering the node from the left or the right. In each math node, we listen for state selection changes (via a plugin), and remember whether on the last transaction the cursor was ahead of the node or behind. Then we use that info in the selectNode callback.