Package Exports

react-latex-editor
react-latex-editor/styles

Readme

React Rich Text with Math

$npm version$ $npm downloads$ $license$

A powerful React rich text editor with mathematical equation support, built on TipTap with MathLive integration. This package provides a comprehensive WYSIWYG editor that supports mathematical equations, tables, images, and more.

📖 Documentation • 🚀 Quick Start • 🎯 Examples • 🔧 API Reference • 🎨 Customization

✨ Features

🎨 Rich Text Editing: Full-featured WYSIWYG editor based on TipTap
🧮 Mathematical Equations: Inline and block math support with MathLive
📊 Tables: Create and edit tables with resizable columns
🖼️ Images: Insert and resize images with alignment options
🎥 YouTube Videos: Embed and resize YouTube videos
🎨 Text Formatting: Bold, italic, underline, strikethrough, colors, and more
📝 Code Blocks: Syntax highlighting with lowlight
📋 Lists: Bullet points, numbered lists, and task lists
🔗 Links: Insert and edit hyperlinks
📏 Text Alignment: Left, center, right alignment
🎯 Character Count: Track content length
📱 Responsive Design: Works on desktop and mobile devices
🔧 TypeScript Support: Full TypeScript definitions included
♿ Accessibility: ARIA labels and keyboard navigation support
🎨 Customizable: CSS custom properties for easy theming
⚡ Performance: Optimized bundle size (~90KB gzipped)

📦 Installation

npm install react-latex-editor

Peer Dependencies

This package requires React 18+ and React DOM 18+ as peer dependencies:

npm install react react-dom

Next.js Compatibility

This package is fully compatible with Next.js. For detailed integration instructions, see NEXTJS.md.

Note: The MathLive import issues in Next.js have been resolved in version 1.0.1+. No additional configuration is needed.

🚀 Quick Start

import React, { useRef, useState } from "react";
import { Editor, Viewer, type EditorRef } from "react-latex-editor";
import "react-latex-editor/styles";

const App = () => {
  const [content, setContent] = useState(
    "<p>Start typing your content here...</p>",
  );
  const editorRef = useRef<EditorRef>(null);

  return (
    <div style={{ width: "60%", height: "100vh", margin: "0 auto" }}>
      <Editor
        ref={editorRef}
        initialContent={content}
        onChange={setContent}
        placeholder="Type your content..."
        autoFocus={true}
      />
      <Viewer content={content} />
    </div>
  );
};

export default App;

📖 Documentation

Basic Usage

Editor Component

The main Editor component provides a full-featured rich text editor:

import { Editor, EditorRef } from "react-latex-editor";

interface EditorProps {
  initialContent?: string; // Initial HTML content
  onChange?: (content: string) => void; // Content change callback
  placeholder?: string; // Placeholder text
  readOnly?: boolean; // Read-only mode
  autoFocus?: boolean; // Auto-focus on mount
  className?: string; // Additional CSS classes
  onImageSelectionRequest?: () => void; // Image selection callback
  minHeight?: string; // Minimum height (default: "300px")
  maxHeight?: string; // Maximum height for scrolling
  showCharacterCount?: boolean; // Show character count (default: true)
  showTableControls?: boolean; // Show table controls (default: true)
}

Editor Reference

Access editor methods through the ref:

const editorRef = useRef<EditorRef>(null);

// Get current HTML content
const html = editorRef.current?.getHTML();

// Set content programmatically
editorRef.current?.setContent("<p>New content</p>");

// Add images programmatically
editorRef.current?.addImage(["https://example.com/image.jpg"]);

Viewer Component

Display content in read-only mode with math rendering:

import { Viewer } from "react-latex-editor";

function ContentViewer({ content }: { content: string }) {
  return (
    <Viewer
      content={content}
      className="my-viewer"
      enableMath={true}
      mathJaxConfig={{
        inlineMath: [["$", "$"]],
        displayMath: [["$$", "$$"]],
        packages: ["base", "ams"],
      }}
    />
  );
}

Advanced Usage

The editor includes a comprehensive toolbar with:

Text Formatting: Bold, italic, underline, strikethrough
Headings: H1-H6
Text Alignment: Left, center, right
Text Color: Text color and background color
Lists: Bullet, numbered, task lists
Tables: Create and edit tables
Media: Images, YouTube videos
Mathematical Equations: Inline and block math
Code Blocks: Syntax highlighting
Other: Links, blockquotes, horizontal rules

Mathematical Equations

Insert mathematical equations using the math button in the toolbar:

// Inline math: $x^2 + y^2 = z^2$
// Block math: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

The editor supports both inline and block math equations with a comprehensive symbol palette powered by MathLive.

Tables

Create tables with the table button:

Add/remove rows and columns
Merge/split cells
Resize columns
Align content

Images

Insert images with:

Drag and drop support
URL input
Resize handles
Alignment options (left, center, right)
Alt text support

YouTube Videos

Embed YouTube videos with:

URL input
Resize handles
Responsive design

🎯 Examples

Basic Editor

import { Editor } from "react-latex-editor";

function BasicEditor() {
  return (
    <Editor
      placeholder="Start writing your content..."
      onChange={(content) => console.log(content)}
    />
  );
}

Read-only Viewer

import { Viewer } from "react-latex-editor";

function ContentViewer({ content }: { content: string }) {
  return <Viewer content={content} />;
}

Custom Height Editor

import { Editor } from "react-latex-editor";

function CustomHeightEditor() {
  return (
    <Editor
      minHeight="400px"
      maxHeight="600px"
      placeholder="Content with custom height..."
    />
  );
}

Editor with Image Handler

import { Editor } from "react-latex-editor";

function EditorWithImageHandler() {
  const handleImageRequest = () => {
    // Open your image picker/modal here
    const imageUrl = prompt("Enter image URL:");
    if (imageUrl) {
      // Handle image insertion
    }
  };

  return (
    <Editor
      onImageSelectionRequest={handleImageRequest}
      placeholder="Editor with custom image handling..."
    />
  );
}

Minimal Editor

import { Editor } from "react-latex-editor";

function MinimalEditor() {
  return (
    <Editor
      showCharacterCount={false}
      showTableControls={false}
      placeholder="Minimal editor..."
    />
  );
}

Dark Mode Editor

import { Editor } from "react-latex-editor";

function DarkModeEditor() {
  return (
    <div className="dark-theme">
      <Editor
        placeholder="Dark mode editor..."
        onChange={(content) => console.log(content)}
      />
    </div>
  );
}

Math-Focused Editor

import { Editor } from "react-latex-editor";

function MathEditor() {
  return (
    <Editor
      initialContent="<p>Solve the equation: $x^2 + 5x + 6 = 0$</p>"
      placeholder="Write mathematical content..."
      onChange={(content) => console.log(content)}
    />
  );
}

🎨 Customization

Import Styles

Import the default styles:

import "react-latex-editor/styles";

🔧 API Reference

Editor Props

Prop	Type	Default	Description
`initialContent`	`string`	`"<p>Start typing something...</p>"`	Initial HTML content
`onChange`	`(content: string) => void`	-	Content change callback
`placeholder`	`string`	`"Start typing..."`	Placeholder text
`readOnly`	`boolean`	`false`	Read-only mode
`autoFocus`	`boolean`	`false`	Auto-focus on mount
`className`	`string`	`""`	Additional CSS classes
`onImageSelectionRequest`	`() => void`	-	Image selection callback
`minHeight`	`string`	`"300px"`	Minimum height
`maxHeight`	`string`	-	Maximum height for scrolling
`showCharacterCount`	`boolean`	`true`	Show character count
`showTableControls`	`boolean`	`true`	Show table controls

EditorRef Methods

Method	Parameters	Description
`getHTML`	-	Get current HTML content
`setContent`	`content: string`	Set editor content
`addImage`	`urls: string[]`	Add images programmatically

Viewer Props

Prop	Type	Default	Description
`content`	`string`	-	HTML content to display
`className`	`string`	`""`	Additional CSS classes
`enableMath`	`boolean`	`true`	Enable MathJax rendering
`mathJaxConfig`	`object`	`{}`	Custom MathJax configuration

🔍 Troubleshooting

Common Issues

Styles not loading: Make sure to import the styles:
```
import "react-latex-editor/styles";
```
Math equations not rendering: Ensure MathJax is properly configured in the Viewer component.
TypeScript errors: Make sure you're using React 18+ and have the latest TypeScript definitions.
Images not uploading: Implement the onImageSelectionRequest callback for custom image handling.

Getting Help

If you encounter any issues:

Check the examples section
Review the API reference
Open an issue on GitHub with a minimal reproduction

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📄 License

MIT License - see the LICENSE file for details.

🆘 Support

Made with ❤️ by Bablu Mia

react-latex-editor