Math Rich Editor Pack

Reusable React editor for rich text and math equations in the same flow.

Live Demo

https://math-rich-editor-pack-demo-s1ao.vercel.app/

Install

npm install math-rich-editor-pack

import { MathRichEditor } from 'math-rich-editor-pack'
import 'math-rich-editor-pack/style.css'

Quick Start

import { useRef } from 'react'
import { MathRichEditor } from 'math-rich-editor-pack'
import 'math-rich-editor-pack/style.css'

export default function QuestionForm() {
  const editorRef = useRef(null)

  return (
    <MathRichEditor
      ref={editorRef}
      placeholder="Write question text and equations..."
      onChange={({ html, json, text, latexList }) => {
        // Save any format you need
      }}
    />
  )
}

Built-In Features

• Rich text editing (bold, italic, underline, headings, lists, undo/redo)
• Equation insertion with MathLive keyboard and hardware keyboard
• Inline math output with KaTeX rendering
• Table support with clean UX:
• Main toolbar has one Table button
• Table controls appear only when cursor is inside a table
• Advanced table actions are under More
• Load content from HTML
• Load content from DOCX (with equation conversion + warning reporting)
• Multiplication normalization for clearer display (\cdot, ·, ⋅ -> \times)

Callback API

• onChange(payload)
• payload.html
• payload.json
• payload.text
• payload.latexList
• onHtmlChange(html)
• onJsonChange(json)
• onTextChange(text)
• onLatexChange(latexList)
• onMathInsert(latex)
• onLoadResult(result)
• result.source: 'html' | 'docx'
• result.success: boolean
• result.warnings: string[]
• result.error: string | null
• onDocxUnsupported(payload)
• payload.items: unsupported DOCX object summary (chart, smartArt, shape, vmlShape)
• payload.extractedMediaCount: number
• payload.extractedMediaNames: string[]

Ref Methods (Imperative API)

Use ref on MathRichEditor:

const editorRef = useRef(null)

Available methods:

• loadFromHtml(html: string): boolean
• loadFromDocx(fileOrBuffer: File | Blob | ArrayBuffer): Promise<{ source, success, warnings, error, html, unsupported }>
• getContent(): { html, json, text, latexList } | null

Example:

editorRef.current?.loadFromHtml('<p>Hello <strong>world</strong></p>')

const file = input.files?.[0]
if (file) {
  const result = await editorRef.current?.loadFromDocx(file)
  console.log(result)
}

const current = editorRef.current?.getContent()

DOCX Support Notes

• Fully supported: regular text, formatting, lists, tables, OMML equations.
• Partially supported: charts, SmartArt, geometry/shapes.
• For unsupported objects:
• editor inserts readable fallback text markers (so users know content was present)
• warnings are returned in onLoadResult
• onDocxUnsupported returns structured unsupported details
• media from word/media is extracted and attached as fallback preview when unsupported objects are detected

Props

• initialContent: HTML string or Tiptap JSON doc
• placeholder: editor placeholder text
• toolbarOptions: custom visible tools
• Default: ['bold', 'italic', 'underline', 'h1', 'h2', 'ul', 'ol', 'table', 'undo', 'redo', 'math']
• mathShortcutEnabled: enable Ctrl/Cmd + key shortcut for equation composer
• mathShortcutKey: shortcut key, default 'm'
• className, toolbarClassName, editorClassName
• composerTitle, composerDescription, composerInsertLabel, composerCancelLabel

Local Development

npm install
npm run dev

Build

npm run build

Publish Checklist

npm run build
npm pack
npm publish --access public