jake kara ‣ editor.js footnote plugin ░

  • Projects
  • Blog

September 22, 2020

editor.js footnote plugin

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

  • Github: https://github.com/jakekara/editorjs-footnotes
  • Package: https://www.npmjs.com/package/editorjs-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.