Equation

Motivation

Magicube was firstly imagined to be a math editor with support to wide support to math equation. At the time, many editor didn't offer a good live solution for math editing.

The final project does not have this goal in mind, but keep its spirit by offering a built-in equation block where you can either have inline equations, alongside with the text itself or as a display equations

Examples

Examples of inline equations can be

\nabla \cdot \pmb{B} = 0

\pmb{E}=mc^2

For Display Math:

I =\begin{pmatrix}1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1\end{pmatrix}

How to Install

To use the equation plugins, install the package:

npm install @magicube/editor-equation-plugins

Editor Setup

Inline equations are inserted by typing the formula, selecting it, and clicking the "sum" icon in the hovering toolbar. To add a new block equation (display), select it in the block's menu.

"use client";

import { Editor, createMagicubeEditor } from "@magicube/editor";
import { makeBlocks, makeMarks } from "@magicube/editor-typography-plugins";
import { makeEquationBlockPlugin, makeInlineEquationPlugin } from "@magicube/editor-equation-plugins";

import "@magicube/editor/styles.css";
import "@magicube/editor-typography-plugins/styles.css";
import "@magicube/editor-equation-plugins/styles.css";

const editor = createMagicubeEditor({
  plugins: {
    blocks: [...makeBlocks(), makeEquationBlockPlugin()],
    marks: [...makeMarks()],
    inlines: [makeInlineEquationPlugin()],
  },
});

function EquationEditor() {
  return <Editor editor={editor} />;
}

export default EquationEditor;

equation-plugin

Live Example Code

Code Highlighting Understanding the JSON output