feat: Math / KaTeX

[tommoor]

Proof of concept using prosemirror-math to manage flipping between KaTeX and an editable math expression. Note that including this in Outline as it stands would probably be a blocker for collab editing, as it lacks support.

TODO

• Respect readOnly
• Add to block menu
• Fix content not rehydrated from markdown persistence
• Support for async loading Support for async KaTeX benrbray/prosemirror-math#22
• Refine styling

related outline/outline#1038

[dominiczy]

This looks really awesome, currently trying to implement it!
Only thing blocking for me is rehydrating from saved markdown, any ideas on how to do that @tommoor ?

Also, add to block menu can simply be fixed by changing the command to math_inline instead of math_display

[dominiczy]

@tommoor it seems that the toDOM callback is never executed for both the math_inline and math_display nodes, preventing correct hydration from markdown. Do you have any clues to how to debug that?

[tommoor]

The pipeline is:

• Markdown text input
• Gets parsed on load by markdown-it (and any added rules into) "tokens"
• These tokens are then matched by the node definitions to turn them into Prosemirror nodes. So there needs to be a token for math_display and math_inline. I think the rule here is probably trash looking at it now and needs to be re-written from scratch. There are lots of examples of other rules in that directory and the markdown-it documentation is not too terrible either.

[dominiczy]

@tommoor I have replaced the rule in src/lib/markdown/math.ts with this math-katex rule https://github.com/yzhang-gh/markdown-it-katex/blob/master/index.js. Now math_display and math_inline tokens are both set correctly. token.content is also set correctly to the math equation text.

However when inspecting the Prosemirror node in the state, the content is an empty array, and hence the equations don't show. So it looks like there is an error in how the tokens are matched to nodes. The math-katex rule also defines a markdown-it renderer (e.g. md.renderer.rules.math_inline = inlineRenderer) but this seems to be ignored by rich-markdown-editor. Could you point me to where/how the tokens are matched to nodes?

[tommoor]

If the prosemirror nodes are being created then it's matching correctly (It uses the name getter on the node), I would compare the tokens to those for a code_fence as they should be very similar.

[dominiczy]

@tommoor the matching is correctly then but it still doesn't pick up the content. In the screenshot is a comparison between a code_fence and a math_display token, they look very similar so I'm not sure where it's going wrong?

[dominiczy]

And this is what the nodes look like in the editor view state:

code_block:

math_display hydrated from markdown (content is empty array):

math_display after I just inserted an equation (content is correct, similar to code_fence):

Another thing that struck me as odd is that both math_display and math_inline show up in nodeViews, even though they don't have a component prop, so I don't know how they end up there and whether they should be there:

[dominiczy]

I've been able to fix this by changing the parseMarkdown method as follows:

For math_inline:

parseMarkdown() {
    return {
      node: "math_inline",
      block: "math_inline",
      noCloseToken: "math_inline",
    };
  }

For math_display:

parseMarkdown() {
    return {
     node: "math_display",
      block: "math_display",
      noCloseToken: "math_display",
    };
  }

In addition, I used the math rule from https://github.com/yzhang-gh/markdown-it-katex/blob/master/index.js to correctly match math_display

Using these fixes, the hydration from saved markdown works without problem

@tommoor let me know if I should create a merge request for this