ProseMirror + Math at Desmos

Show
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:

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!

8 Likes
2

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

5 Likes
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.

3 Likes
6

this is pretty cool, but MathQuill seems to be very limited. it doesn’t support many symbols.

7

I’m curious about your final design choices for the Desmos node. Did you end up converting it to a leaf node, and run into issues with cursor boundaries? I just came from Discussion: Inline nodes with content. Thanks!

8

We ended up making it a non-leaf node with text* content. It has a custom NodeView, which is controlled by MathQuill.

Transitioning the cursor was tricky. We ended up having to monitor every transaction on the PM view, and monitoring whether the cursor was before or after a given MathQuill node. Then, when focus entered the MathQuill node we knew whether to place the (internal, MathQuill) cursor at the beginning or the end of the content. From PM’s point of view, the whole node is selected the entire time we are editing the node.

2 Likes
9

In this demo, it’s configured to only support the math that our calculator at desmos.com/calculator understands… so no limits, products, etc…

Mathquill itself supports a much more full subset of latex.

1 Like
10

Is there any chance you might make this feature an open source prosemirror plugin?

11

I stumbled upon the demo of prosemirror with mathquill integration. Looks really nice! This is exactly the functionality I would need in my project.

Is this open source? Or is there a possibility that I could get my hands on the source code of this demo?

Thanks in advance.