jakekara.com

editor.js footnote plugin

I wrote a plugin for editor.js to support footnotes.

Editor.js is a really great framework for a modern web-based text editor. It’s very similar to the editing experience in notion.so.

Both tools envision a body of text as a set of individual blocks. Typically these blocks are paragraphs of text, but they can be anything, such as embedded video content, todo lists — in notion, they can even be other pages.

This is a very handy model for building custom text editors quickly. As a developer, you can build a custom block type, as well as add customization options to that block type.

My footnote plugin creates a Footnote block type and a FootnoteMaker inline tool, which allows you to select text in a body paragraph and create a subordinate footnote block. It takes care of generating an arbitrary footnote ID for purposes of linking.

This is one component in a larger project I’m working on to build a scholarly text-editor with support for multimedia content.