swerasty_editor 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -13
- package/dist/swerasty-editor.js +232 -230
- package/dist/swerasty-editor.umd.cjs +21 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,88 @@
|
|
|
1
|
-
|
|
2
|
-
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
|
3
|
-
</div>
|
|
1
|
+
# Swerasty Rich Text Editor
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
A professional-grade, React-based rich text editor featuring an integrated **AI Math Pad** powered by Google Gemini. 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.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
## Key Features
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
- **Rich Text Formatting**: Standard controls for bold, italic, underline, strike-through, font sizing, and colors.
|
|
8
|
+
- **AI Math Pad**: A specialized modal for formulas:
|
|
9
|
+
- **Handwriting Recognition**: Draw formulas on a digital canvas and have Gemini convert them to LaTeX.
|
|
10
|
+
- **Keyboard Input**: Efficiently build formulas using symbol palettes.
|
|
11
|
+
- **Chemistry Support**: Dedicated mode for chemical elements and reaction arrows.
|
|
12
|
+
- **Tables & Images**: Seamlessly insert and manage tables and local image uploads.
|
|
13
|
+
- **History Management**: Reliable undo/redo stack for both text editing and formula drawing.
|
|
14
|
+
- **KaTeX Rendering**: Real-time, beautiful mathematical rendering.
|
|
10
15
|
|
|
11
|
-
##
|
|
16
|
+
## Getting Started
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
### 1. Installation
|
|
19
|
+
The editor relies on standard React 19 dependencies. Ensure you have the following in your `package.json`:
|
|
20
|
+
- `react`, `react-dom`
|
|
21
|
+
- `@google/genai` (for AI features)
|
|
22
|
+
- `lucide-react` (for iconography)
|
|
14
23
|
|
|
24
|
+
### 2. API Key Configuration
|
|
25
|
+
To enable the AI Handwriting recognition, you must provide a **Google Gemini API Key**. You can obtain one from the [Google AI Studio](https://aistudio.google.com/).
|
|
15
26
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
27
|
+
## Usage Guide
|
|
28
|
+
|
|
29
|
+
### Basic Component Implementation
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import React, { useRef } from 'react';
|
|
33
|
+
import Editor, { EditorRef } from './components/Editor';
|
|
34
|
+
|
|
35
|
+
const MyComponent = () => {
|
|
36
|
+
const editorRef = useRef<EditorRef>(null);
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Editor
|
|
40
|
+
ref={editorRef}
|
|
41
|
+
initialContent="<h1>Hello World</h1>"
|
|
42
|
+
apiKey="YOUR_GEMINI_API_KEY"
|
|
43
|
+
onChange={(html) => console.log('Content changed:', html)}
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### How to Get Output
|
|
50
|
+
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.
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
const handleSave = () => {
|
|
54
|
+
if (editorRef.current) {
|
|
55
|
+
const htmlOutput = editorRef.current.getContent();
|
|
56
|
+
// Save htmlOutput to your database or process it
|
|
57
|
+
console.log(htmlOutput);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### How to Set Content Back
|
|
63
|
+
To programmatically update the editor's state (e.g., loading a saved draft), use the `setContent(html)` method.
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
const handleLoadDraft = (savedHtml: string) => {
|
|
67
|
+
if (editorRef.current) {
|
|
68
|
+
editorRef.current.setContent(savedHtml);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## AI Math Pad Instructions
|
|
74
|
+
|
|
75
|
+
1. **Open the Pad**: Click the **Σ (AI Math Pad)** icon in the toolbar.
|
|
76
|
+
2. **Switch Modes**: Use the sidebar to toggle between **Keyboard** (typing LaTeX) and **Pencil** (drawing).
|
|
77
|
+
3. **Recognize**: If drawing, click **Recognize Drawing**. The Gemini AI will analyze your stroke data and convert it into a valid LaTeX string.
|
|
78
|
+
4. **Insert**: Preview the rendered formula at the bottom of the modal. If it looks correct, click **Insert Into Editor**.
|
|
79
|
+
|
|
80
|
+
## Technical Details
|
|
81
|
+
|
|
82
|
+
- **Dependencies**: The app uses KaTeX via CDN. Ensure your `index.html` includes the KaTeX CSS/JS for formulas to render correctly.
|
|
83
|
+
- **Styling**: Powered by Tailwind CSS (via CDN in the standalone version) and the `@tailwindcss/typography` plugin for "Prose" styling.
|
|
84
|
+
- **Model**: Uses `gemini-3-pro-preview` for high-accuracy handwriting analysis.
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
Designed for developers who need a powerful, formula-aware editing experience in their web applications.
|