Patent Rich Text Editor

A modular rich text editor designed for patent document authoring, built with React, Tiptap, and TypeScript.

Features

• General Editing: Paragraphs, headings, lists, code blocks, tables, images.
• Technical Writing:
  • Mermaid diagrams
  • Draw.io diagrams (placeholder)
  • Math formulas (KaTeX)
• Patent Authoring:
  • Claim blocks (auto-numbered)
  • Figure blocks with captions
  • Reference nodes

Project Structure

src/
├── editor/                    # Editor Core & Logic
│   ├── core/                  # Core classes (EditorCore, PluginManager)
│   ├── schema/                # Base nodes & marks
│   ├── plugins/               # Plugin implementations (Mermaid, Math, Patent, etc.)
│   ├── commands/              # Custom commands
│   └── renderer/              # Custom node renderers
├── components/                # React UI Components
│   ├── EditorView.tsx         # Main editor component
│   ├── Toolbar.tsx            # Main toolbar
│   └── NodeToolbar.tsx        # Contextual toolbar
├── store/                     # State management (Zustand)
├── types/                     # TypeScript definitions
└── styles/                    # Editor styles

Getting Started

1. Install dependencies:

   pnpm install

2. Run development server:

   pnpm dev

3. Build for production:

   pnpm build

Usage

The EditorView component is the main entry point.

import { EditorView } from './components/EditorView';

function App() {
  const handleChange = (json) => {
    console.log('Document updated:', json);
  };

  return <EditorView onChange={handleChange} />;
}

Architecture

This project follows a plugin-based architecture where each major feature (Mermaid, Math, Patent) is a separate plugin containing its own Node Schema, View, and Logic.

• State Management: Zustand is used to expose editor state to the UI.
• Styling: TailwindCSS is used for the UI, and custom CSS for editor content.