Big updates today!!! Math and images!!

Math was probably the hardest thing to add due to the lack of extensibility of the MDXEditor component I’m using. The plugin system is overly complex and makes zero sense since there is hardly any documentation on how to actually use it. Luckily, there is a jsxPlugin that lets the user make custom jsx components of your choosing.

The other hard part was finding a suitable editor for the job. After much googling, I found MathLive, which is a currently unmaintained editor that does exactly what I need it to. Internally it uses KaTeX, which is what I was looking for.

Now the problem arises: combining these libraries. This wasn’t easy; it took a lot of trial and error, as the documentation is limited. But the final result is incredibly worth it.

A couple bugs still exist; notably, pressing the left or right arrow into the math editor does not focus your cursor in it; and similarly for moving out of it. I have no clue how to fix these, MDXEditor is not helpful in the slightest. A minor bug I can fix however is the autosaver not saving if only the MathEditor has changed.

Images

This one was so much easier! There’s a built in plugin for it. It even handles image resizing! I just have to handle uploading images to the server. I decided to make a table in the database that simply stores filenames and their associated users, just so you can’t access other user’s images. When you upload a file, it gives the editor a link to api/image/random-uuid.png. The api route checks the user id against the database and gives you the image in response.

Possibly the dumbest thing ever is the fact that the image plugin limits the minimum size of the image at 100x100px. I don’t like this however cause I want to be able to put emojis in my markdown files, with possible support for later uploading custom emojis and using them in the editor. There is no customizing this value, it is hardcoded in the library. Luckily, pnpm natively supports patching node modules, and that’s exactly what I did. The minimum size is now 10x10!