@ihsanabuhanifah/react-math-editor

A modern, lightweight Rich Text Editor and Math Viewer component for React. Powered by Tiptap, KaTeX, and highlight.js.

Designed specifically for educational platforms, exam builders (CBT), question banks, technical documentation, and math blogging.

✨ Features

• 🧠 SmartContentEditor Included: Advanced editor supporting resizable & alignable images (25%, 50%, 75%, 100%), document attachments, YouTube video embeds, and AI paste modal.
• 📐 Interactive LaTeX Math Formulas: Popup dialog with live KaTeX preview. Click any formula chip inside the editor to edit it seamlessly.
• 📘 Built-in Formula Cheat Sheet: Comprehensive LaTeX dictionary covering Algebra, Trigonometry, Calculus, Matrices, and Logic.
• 📊 Rich Table Support: Insert tables (3x3), visually add/remove rows and columns, delete tables.
• 📋 Auto-convert Markdown Tables: Copy-paste markdown tables from AI assistants (ChatGPT, Claude, DeepSeek) and they automatically convert into interactive HTML tables.
• 🤖 Smart AI Paste: Dedicated modal & paste listener that formats markdown from AI into clean visual Tiptap nodes.
• 🎥 YouTube & Attachment Embeds: Embed responsive 16:9 YouTube videos and downloadable document attachments.
• 💻 Syntax Highlighted Code Blocks: Pre-configured code blocks with syntax highlighting using highlight.js.
• 🖼️ Vendor-Agnostic Uploads: Async callback props (onUploadImage, onUploadFile) connect to any storage backend.
• 🎨 Self-Contained Styling: Bundled standalone CSS (style.css), no TailwindCSS setup required on the consumer application.
• 👁️ RenderMathHTML Viewer: Companion lightweight component to safely render and display saved HTML content.

📦 Installation

npm install @ihsanabuhanifah/react-math-editor

yarn add @ihsanabuhanifah/react-math-editor

pnpm add @ihsanabuhanifah/react-math-editor

Peer Dependencies: Ensure react and react-dom (>= 18.0.0) are installed in your project.

🚀 Quick Start

1. The Editor (TextEditor)

import React, { useState } from "react";
import { TextEditor } from "@ihsanabuhanifah/react-math-editor";
import "@ihsanabuhanifah/react-math-editor/dist/style.css"; // Import CSS once

export function QuestionForm() {
  const [content, setContent] = useState("<p>Solve for $x$: $x^2 - 5x + 6 = 0$</p>");

  return (
    <div style={{ maxWidth: 800, margin: "20px auto" }}>
      <h2>Create Question</h2>
      <TextEditor
        value={content}
        onChange={(html) => setContent(html)}
        placeholder="Type questions, insert LaTeX math formulas, or paste tables..."
        minHeight={220}
        onUploadImage={async (file: File) => {
          // Upload to your backend server / S3
          const formData = new FormData();
          formData.append("file", file);

          const response = await fetch("/api/upload", {
            method: "POST",
            body: formData,
          });
          const result = await response.json();
          return result.url; // Must return the image URL string
        }}
      />
    </div>
  );
}

2. The Content Viewer (RenderMathHTML)

Use RenderMathHTML wherever you need to display the formatted content to students or readers (e.g., exam page, preview card, blog post):

import React from "react";
import { RenderMathHTML } from "@ihsanabuhanifah/react-math-editor";
import "@ihsanabuhanifah/react-math-editor/dist/style.css";

export function QuestionCard({ htmlContent }: { htmlContent: string }) {
  return (
    <div className="card">
      <RenderMathHTML html={htmlContent} />
    </div>
  );
}

⚙️ API & Props Reference

<SmartContentEditor /> (Featured Full-Featured Component)

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | value | string | "" | Initial or controlled HTML content | | handleChange / onChange | (html: string) => void | undefined | Callback fired on content change | | readOnly | boolean | false | Read-only mode (ideal for question previews & test cards) | | minHeight | number | 140 | Minimum height for editing area in pixels | | placeholder | string | "Tulis konten..." | Placeholder text when empty | | onUploadImage | (file: File) => Promise<string> | undefined | Async upload for image insertions, drag-drop, or screenshot paste | | onUploadFile | (file: File) => Promise<{ url, name, size }> | undefined | Async upload for document attachment nodes | | className | string | "" | Optional CSS class name |

<TextEditor /> (Standard Rich Math Editor)

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | value | string | "" | Initial HTML string content | | onChange | (html: string) => void | undefined | Callback fired on content change with updated HTML | | placeholder | string | "Tulis konten..." | Placeholder text when editor is empty | | disabled | boolean | false | Disables user interaction | | readOnly | boolean | false | Read-only mode without toolbar | | minHeight | number \| string | 140 | Minimum height for editing area (px or CSS string) | | maxHeight | number \| string | 600 | Maximum height before scrolling | | onUploadImage | (file: File) => Promise<string> | undefined | Async handler to upload images; returns the URL | | toolbarExtra | React.ReactNode | undefined | Slot for custom action buttons in the toolbar | | className | string | "" | Additional CSS class names for outer container |

<RenderMathHTML /> (Lightweight Output Viewer)

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | html | string | "" | HTML string containing text, math, or tables to render | | className | string | "" | Additional CSS class for viewer container | | style | React.CSSProperties | undefined | Inline styling for viewer container | | resolveImageUrl | (url: string) => Promise<string> \| string | undefined | Optional resolver for private / signed image URLs |

💡 Framework Support

Next.js (App Router & Pages Router)

The library is pre-configured with 'use client'; and SSR hydration guards (immediatelyRender: false), making it fully compatible with Next.js:

'use client';

import { SmartContentEditor, RenderMathHTML } from "@ihsanabuhanifah/react-math-editor";
import "@ihsanabuhanifah/react-math-editor/dist/style.css";

export default function SoalPage() {
  const [content, setContent] = useState("");

  return <SmartContentEditor value={content} handleChange={setContent} />;
}

Or with next/dynamic if you prefer client-only lazy loading:

import dynamic from "next/dynamic";
import "@ihsanabuhanifah/react-math-editor/dist/style.css";

const SmartContentEditor = dynamic(
  () => import("@ihsanabuhanifah/react-math-editor").then((mod) => mod.SmartContentEditor),
  { ssr: false }
);

Vite / Remix / Create React App

Works directly out of the box with zero extra configuration. Just import the component and the stylesheet. Works directly out of the box. Simply import the component and the stylesheet.

📄 License

MIT © Ihsan Abu Hanifah