Minimal UI Math Editor - Treena

Hey guys, my team and I at Treena have been working on minimalistic prose based math editor and we’ve compiled a quick demo for you guys to try out.

Treena WYSIWYG Editor

We unfortunately can’t release the source code right now but id be happy to help anyone reimplement any of the features we have :slight_smile:. I also wanted to say a huge thanks to marijn for all the work he’s done on this awesome codebase and help in these forums!!!


Beautiful. I did notice that (on Firefox, at least), I can’t move the cursor in the little math editor with the mouse.

Yeah we still have to test it on other browsers (using chrome)! Ill try and fix that soon :slight_smile:

I just fixed it up, It turns out firefox doesn’t like nested contenteditable elements. I had to move it out of the main editor and make it a position absolute element that is moved dynamically. Thanks for picking up on that :slight_smile:

this is looking great, can you share how you implemented the type ahead. i know there are a bunch of open source implementations (atlaskit, prosemirror-suggest), did you use any of those ?

Hey Kepta! So i based the insert menu on the code in the prosemirror-mentions package. I basically refactored the code to remove reliance on the included schemas in that package. The code is quite flexible so i just added a fuzzy-search for the displayed elements and a custom callback for each of the options. The callbacks are super similar to the included prose functions such as toggleMark! I hope thats helpful!

If you need more help feel free to ask though :slight_smile:

1 Like