ProseMirror + Math at Desmos

#1

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:


SourWeeAmphiuma

You can play around with a demo of our implementation here: https://teacher.desmos.com/demo/prosemirror

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

3 Likes
Odd behavior with NodeView and 'atom' Node
#2

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

1 Like
#3

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?

#4

Wow, this looks really good! :slight_smile:

#5

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.