TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.97k stars 391 forks source link

Custom Block for Katex #741

Open stevenoh2003 opened 2 months ago

stevenoh2003 commented 2 months ago

Is your feature request related to a problem? Please describe. Right now, the default blocks provide useful support for text editing. However, there is a limitation in the editor's versatility: it lacks a dedicated block for inputting equations. This makes it difficult for users who need to include mathematical expressions and equations in their documents, similar to the functionality available in Notion. The current options do not support a seamless way to input and display LaTeX equations within the text editor, which is a significant drawback for users in academia, research, or any field that requires mathematical documentation.

Screenshot 2024-05-14 at 14 48 22

Describe the solution you'd like I would like to have a custom block that allows users to input equations directly into the editor. This block should support LaTeX formatting so that users can type LaTeX code and have it rendered properly as mathematical notation within the document. Ideally, this block would function similarly to Notion's equation input feature, providing a user-friendly interface for entering and editing equations.

Describe alternatives you've considered Building a block that directly converts the text input into LaTeX code. This approach would allow users to type their equations as plain text and have it automatically converted to LaTeX for rendering. Implementing a text field that appears from a dropdown menu in the block selection options. Users could input LaTeX code into this field, and it would render the equation in the current editing location.

Additional context Adding this feature would greatly enhance the usability of the text editor for users who need to include complex mathematical expressions in their documents. It would make the editor more versatile and user-friendly, especially for those in scientific and technical fields.

YousefED commented 1 month ago

This would be great! It should be possible with Custom Inline Content (https://www.blocknotejs.org/docs/custom-schemas/custom-inline-content), although it might need custom prosemirror handling, not sure.

It's not on our roadmap atm, but I'd definitely welcome a PR for this!

/bounty 100

algora-pbc[bot] commented 1 month ago

💎 $100 bounty • BlockNote

Steps to solve:

  1. Start working: Comment /attempt #741 with your implementation plan
  2. Submit work: Create a pull request including /claim #741 in the PR body to claim the bounty
  3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to TypeCellOS/BlockNote!

Add a bounty • Share on socials

Attempt Started (GMT+0) Solution
🟢 @b4s36t4 May 28, 2024, 12:40:09 PM WIP
🟢 @jkcs #818
b4s36t4 commented 1 month ago

/attempt #741

Algora profile Completed bounties Tech Active attempts Options
@b4s36t4 3 bounties from 2 projects
TypeScript, JavaScript,
Rust
Cancel attempt
jkcs commented 1 month ago

Maybe I can give this a try?

Navong commented 1 month ago