hasancode-math-editor

A powerful, rich-text math editor component for React built on top of Tiptap, Shadcn UI, and Tailwind CSS. It provides a beautiful interface for writing both standard rich text and advanced mathematical equations (LaTeX) with live previews.

Features

• ✍️ Rich Text Editing: Bold, italic, underline, strikethrough, highlights, blockquotes, code blocks, lists, and headings.
• 🧮 Advanced Math Support: Write complex equations via LaTeX with a built-in mathematics extension. Includes a math popover with categorized symbol insertion (Common, Accents, Greek Letters, Logic & Sets, etc.).
• 📊 Table Management: Easily create and manage tables, add/delete rows/columns, and toggle header cells using the interactive table controls.
• 🎨 Beautiful UI: Modern, sleek interface built with Shadcn UI and Tailwind CSS.
• 🔗 Media & Links: Insert hyperlinks and images seamlessly.
• 🔄 History: Built-in Undo and Redo functionality.
• 📱 Responsive: fully responsive and works well across different screen sizes.

Installation

Install the package via npm, yarn, or pnpm:

npm install hasancode-math-editor

or

yarn add hasancode-math-editor

or

pnpm add hasancode-math-editor

Peer Dependencies

Ensure you have React and React DOM installed in your project:

npm install react react-dom

Usage

Here is a basic example of how to integrate math-editor into your React application:

import { useState } from "react";
import { Editor } from "hasancode-math-editor";

// Important: Import the package styles for the UI and Tailwind classes to work
import "hasancode-math-editor/style.css";

function App() {
    const [content, setContent] = useState(
        "<p>Welcome to the math editor!</p>",
    );

    return (
        <div className="max-w-4xl mx-auto py-8">
            <Editor content={content} setContent={setContent} />

            <div className="mt-8 p-4 bg-gray-50 rounded-md border">
                <h3 className="font-semibold mb-2">HTML Output:</h3>
                <code>{content}</code>
            </div>
        </div>
    );
}

export default App;

API Reference

<Editor /> Props

| Prop | Type | Required | Description | | ------------ | --------------------------- | -------- | ------------------------------------------------------------------------- | | content | string | Yes | The initial HTML content to be loaded into the editor. | | setContent | (content: string) => void | Yes | Callback fired whenever the editor content changes. Receives HTML string. |

License

This project is licensed under the MIT License - see the LICENSE file for details.