Swerasty Editor

A professional-grade, React-based rich text editor featuring an integrated AI Math Pad. This editor allows users to draft complex documents with high-quality formatting and insert mathematical or chemical formulas through either keyboard input or AI-powered handwriting recognition.

Key Features

• Rich Text Formatting: Standard controls for bold, italic, underline, strike-through, font sizing, and colors.
• AI Math Pad: A specialized modal for formulas:
  • Handwriting Recognition: Draw formulas on a digital canvas and have Gemini convert them to LaTeX.
  • Keyboard Input: Efficiently build formulas using symbol palettes.
  • Chemistry Support: Dedicated mode for chemical elements and reaction arrows.
• Tables & Images: Seamlessly insert and manage tables and local image uploads.
• History Management: Reliable undo/redo stack for both text editing and formula drawing.
• KaTeX Rendering: Real-time, beautiful mathematical rendering.

Getting Started

1. Installation

The editor relies on standard React 19 dependencies. Ensure you have the following in your package.json:

• react, react-dom
• @google/genai (for AI features)
• lucide-react (for iconography)

2. API Key Configuration

To enable the AI Handwriting recognition, you must provide a Google Gemini API Key. You can obtain one from the Google AI Studio.

Usage Guide

Basic Component Implementation

import React, { useRef } from 'react';
import Editor, { EditorRef } from './components/Editor';

const MyComponent = () => {
  const editorRef = useRef<EditorRef>(null);

  return (
    <Editor 
      ref={editorRef}
      initialContent="<h1>Hello Coders</h1>" 
      apiKey="YOUR_GEMINI_API_KEY"   //optional
      onChange={(html) => console.log('Content changed:', html)}
    />
  );
};

How to Get Output

The editor uses an imperative handle pattern. You can retrieve the current HTML content at any time using the getContent() method on the editor reference.

const handleSave = () => {
  if (editorRef.current) {
    const htmlOutput = editorRef.current.getContent();
    // Save htmlOutput to your database or process it
    console.log(htmlOutput);
  }
};

How to Set Content Back

To programmatically update the editor's state (e.g., loading a saved draft), use the setContent(html) method.

const handleLoadDraft = (savedHtml: string) => {
  if (editorRef.current) {
    editorRef.current.setContent(savedHtml);
  }
};

AI Math Pad Instructions

1. Open the Pad: Click the Σ (AI Math Pad) icon in the toolbar.
2. Switch Modes: Use the sidebar to toggle between Keyboard (typing LaTeX) and Pencil (drawing).
3. Recognize: If drawing, click Recognize Drawing. The Gemini AI will analyze your stroke data and convert it into a valid LaTeX string.
4. Insert: Preview the rendered formula at the bottom of the modal. If it looks correct, click Insert Into Editor.

Technical Details

• Dependencies: The app uses KaTeX via CDN. Ensure your index.html includes the KaTeX CSS/JS for formulas to render correctly.
• Styling: Powered by Tailwind CSS (via CDN in the standalone version) and the @tailwindcss/typography plugin for "Prose" styling.
• Model: Uses gemini-3-pro-preview for high-accuracy handwriting analysis.

Designed for developers who need a powerful, formula-aware editing experience in their web applications.