npm package: @package-reviewer/markdown-math-editor
Description: A modern markdown editor with LaTeX math support and live preview
Latest version: 1.0.0

# Markdown Math Editor

A modern, feature-rich markdown editor with LaTeX math support and live preview built with React and TypeScript.

## Features

- ✨ **Split-pane editor** - Edit markdown on the left, see live preview on the right
- 🔢 **LaTeX Math Support** - Insert and render mathematical equations using LaTeX syntax
- 🎨 **Modern UI** - Beautiful, clean interface built with Tailwind CSS and shadcn/ui
- 📝 **Rich Toolbar** - Format text with bold, italic, headings, lists, code blocks, tables, and more
- ⚡ **Real-time Preview** - See your markdown rendered instantly as you type
- 🎯 **TypeScript** - Fully typed for better developer experience

## Installation

```bash
npm install @your-org/markdown-math-editor
# or
yarn add @your-org/markdown-math-editor
# or
pnpm add @your-org/markdown-math-editor
```

## Usage

### 1. MarkdownEditor Component

Use the editor component to allow users to edit markdown content:

```tsx
import { MarkdownEditor } from '@your-org/markdown-math-editor';
import '@your-org/markdown-math-editor/styles';

function App() {
  const [content, setContent] = useState('');

  return (
    <MarkdownEditor
      value={content}
      onChange={setContent}
      title="My Editor"
      className="h-screen"
    />
  );
}
```

### 2. RenderInline Component

Use the render component to display markdown content:

```tsx
import { RenderInline } from '@your-org/markdown-math-editor';
import '@your-org/markdown-math-editor/styles';

function Preview({ markdown }: { markdown: string }) {
  return (
    <div>
      <RenderInline content={markdown} />
    </div>
  );
}
```

## API Reference

### MarkdownEditor Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | `''` | The markdown content to edit |
| `onChange` | `(value: string) => void` | - | Callback fired when content changes |
| `title` | `string` | `'Markdown Editor'` | Optional title displayed at the top |
| `className` | `string` | - | Additional CSS classes |

### RenderInline Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `string` | `''` | The markdown content to render |
| `style` | `React.CSSProperties` | - | Optional inline styles |
| `className` | `string` | - | Additional CSS classes |

## Examples

### Basic Editor

```tsx
import { useState } from 'react';
import { MarkdownEditor } from '@your-org/markdown-math-editor';

function MyEditor() {
  const [markdown, setMarkdown] = useState('# Hello World\n\nThis is **bold** text.');

  return (
    <MarkdownEditor
      value={markdown}
      onChange={setMarkdown}
    />
  );
}
```

### Display Only (Read-only)

```tsx
import { RenderInline } from '@your-org/markdown-math-editor';

function Article({ content }: { content: string }) {
  return (
    <article>
      <RenderInline content={content} />
    </article>
  );
}
```

### With Math Support

The editor supports LaTeX math expressions:

```markdown
# Math Example

Inline math: \\(E = mc^2\\)

Display math:
\\[
\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
\\]
```

## Styling

The package uses Tailwind CSS. Make sure to include the styles:

```tsx
import '@your-org/markdown-math-editor/styles';
```

Or import the CSS file in your main entry:

```tsx
import '@your-org/markdown-math-editor/dist/index.css';
```

## Requirements

- React 18+ or React 19+
- Tailwind CSS (for styling)
- shadcn/ui components installed (Button, Input, Label, Textarea)
- **Guppy Math Editor files** (see setup below)

## Guppy Math Editor Setup

The math editor requires Guppy files to be available. Copy the `guppy` folder to your `public` directory:

```
public/
  guppy/
    guppy.min.js
    guppy_osk.min.js
    guppy-default.min.css
    guppy-default-osk.min.css
    sym/
      symbols.json
    (other guppy files)
```

Include in your HTML:

```html
<link rel="stylesheet" href="/guppy/guppy-default.min.css" />
<link rel="stylesheet" href="/guppy/guppy-default-osk.min.css" />
<script src="/guppy/guppy.min.js"></script>
<script src="/guppy/guppy_osk.min.js"></script>
```

**Note:** Guppy files are not included in this package. You can download them from [Guppy's repository](https://github.com/daniel3735928559/guppy) or copy from your existing project.

## License

MIT