feat: Custom inline equation using the BlockNote API

[jkcs]

API Extension Changes:

1. Pass the Tiptap node to props for inline content to access node attr, nodeSize, etc.
2. Allow custom renderHTML implementation for inline content (in this case, to address copying issues)"

Link

• Feat/equation #953
• Custom Block for Katex #741

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	❌ Failed (Inspect)		Aug 26, 2024 0:03am

[vercel]

@jkcs is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[YousefED]

Thanks! The UX of this looks great. I hope to dive into the code coming week. I'd like to research what API surface we'd need to add so this can be built using purely the BlockNote API (and not TipTap internals). Will keep you posted, but lmk in case you have suggestions for this!

[YousefED]

Great stuff. This example shows where the BN API is lacking and is a great starting point to improve it.

I've implemented an isSelected prop (see 519f34a) and made inline content selectable to make the logic a lot easier. We now don't need to listen for "cursor edge keyboard navigations" anymore, but can let prosemirror handle this.

Let me know what you think @jkcs! Do you see any new bugs popping up with the new approach?

There are a couple of todos left with this new approach:

• Make sure the formatting toolbar doesn't show
• Research if there are any other downsides / side effects (for example for other examples) of setting selectable: true. Should we make this configurable or not?
• Implement remaining APIs (marked as TODO in code)
• Review RenderHTML (@jkcs see my PR comment about copying)

[YousefED]

What were the exact issues you were having with copying without the renderHTML?

[jkcs]

copy of clipboard should be c = \pm\sqrt{a^2 + b^2}

[jkcs]

👍👍👍Extending isSelected is much better than before.

New bug: losing focus on input, need to keep isSelected as true.

Implement BlockNote API to add, remove, and edit inline content. For the tiptapApi, it requires 'pos'. Is there a way to operate based on the node rather than using 'pos' every time?