Math plugin for Editor.js

I was recently working on a blog project using Editor.js. If you use it, you know it’s a solid block editor, but I ran into a problem when I actually tried to write content that included math formulas.

I needed to support LaTeX for big equations, but also inline math (like putting variables inside a sentence).

I figured this was a solved problem. I went to npm and GitHub to grab a plugin, but I couldn’t find anything that actually worked for me.

• Most repos I found were published 3+ years ago and abandoned.
• The ones that did work only supported “Block” math, so I couldn’t write formulas inside a paragraph.

It felt weird that something this essential was missing. I didn’t want to hack together a messy solution every time, so I decided to package it up properly.

This is editorjs-mathcyou. It’s actually my first npm package, so I wanted to make sure it solved the specific issues I found in other libraries.

It’s a lightweight wrapper around KaTeX that handles:

1. Inline Math: You can actually write math inside your text blocks.
2. Block Math: Standalone equations.
3. Parsing: I included a helper to clean up the data output.

How to use it

It’s pretty standard to set up.

Installation:

Bash

npm install editorjs-mathcyou

npm install editorjs-mathcyou

Configuration:

Just import it and add it to your tools config. Make sure you include the CSS for KaTeX or it will look broken.

JavaScript

import EditorJS from '@editorjs/editorjs';
import { InlineMathTool, MathBlockTool } from 'editorjs-mathcyou';
import 'katex/dist/katex.min.css'; 

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    paragraph: {
      class: Paragraph,
      inlineToolbar: true // You need this enabled for inline math
    },
    inlineMath: {
      class: InlineMathTool
    },
    mathBlock: {
      class: MathBlockTool
    }
  }
});

import EditorJS from '@editorjs/editorjs';
import { InlineMathTool, MathBlockTool } from 'editorjs-mathcyou';
import 'katex/dist/katex.min.css'; 

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    paragraph: {
      class: Paragraph,
      inlineToolbar: true // You need this enabled for inline math
    },
    inlineMath: {
      class: InlineMathTool
    },
    mathBlock: {
      class: MathBlockTool
    }
  }
});

Links

I put it up on npm if you want to try it out. Since this is my first lib, let me know if you spot any bugs or have ideas to make it better.

• NPM: editorjs-mathcyou

Hope this saves you the time I spent searching for it.