@ihsanabuhanifah/react-math-editor 1.0.0 → 1.0.1

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.
Files changed (2) hide show
  1. package/README.md +71 -99
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,71 +1,76 @@
1
1
  # @ihsanabuhanifah/react-math-editor
2
2
 
3
- Komponen Rich Text Editor & Math Viewer modern untuk React. Ditenagai oleh **Tiptap** dan **KaTeX**, dirancang untuk mengetik soal, materi ujian, formula matematika LaTeX, tabel responsif, dan sintaks kode secara visual dan instan.
3
+ [![npm version](https://img.shields.io/npm/v/@ihsanabuhanifah/react-math-editor.svg?color=blue)](https://www.npmjs.com/package/@ihsanabuhanifah/react-math-editor)
4
+ [![npm downloads](https://img.shields.io/npm/dm/@ihsanabuhanifah/react-math-editor.svg)](https://www.npmjs.com/package/@ihsanabuhanifah/react-math-editor)
5
+ [![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/ihsanabuhanifah)
6
+ [![React](https://img.shields.io/badge/React-18%20%7C%2019-61dafb.svg)](https://react.dev)
4
7
 
5
- [![npm version](https://img.shields.io/badge/npm-v1.0.0-blue.svg)](https://www.npmjs.com/)
6
- [![license](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
8
+ A modern, lightweight Rich Text Editor and Math Viewer component for React. Powered by **Tiptap**, **KaTeX**, and **highlight.js**.
9
+
10
+ Designed specifically for educational platforms, exam builders (CBT), question banks, technical documentation, and math blogging.
7
11
 
8
12
  ---
9
13
 
10
- ## ✨ Fitur Utama
14
+ ## ✨ Features
11
15
 
12
- - 📐 **Formula Matematika LaTeX Interaktif:** Dialog penulisan rumus dengan pratinjau instan (*live KaTeX preview*) dan klik langsung untuk mengedit rumus yang sudah ada.
13
- - 📘 **Kamus Rumus LaTeX:** Cheat sheet terintegrasi lengkap dengan berbagai kategori (Aljabar, Trigonometri, Kalkulus, Matriks, Logika).
14
- - 📊 **Tabel Responsif:** Sisipkan tabel, tambah/hapus baris & kolom secara visual.
15
- - 📋 **Auto-convert Markdown Table:** Copy-paste tabel teks markdown dari AI (ChatGPT, DeepSeek, Claude) langsung otomatis diubah menjadi tabel HTML.
16
- - 💻 **Blok Kode & Highlighting:** Syntax highlighting otomatis untuk berbagai bahasa pemrograman menggunakan `highlight.js`.
17
- - 🖼️ **Upload Gambar Fleksibel:** Integrasikan dengan backend apa pun (AWS S3, Cloudflare R2, Supabase, Laravel, Express) via callback `onUploadImage`.
18
- - 🎨 **Styles Mandiri:** File CSS terisolasi (`style.css`), tidak memerlukan konfigurasi Tailwind eksternal.
19
- - 👁️ **RenderMathHTML Viewer:** Komponen terpisah untuk menampilkan output konten dengan perenderan KaTeX dan tabel responsif.
16
+ - 📐 **Interactive LaTeX Math Formulas:** Popup dialog with live KaTeX preview. Click any formula chip inside the editor to edit it seamlessly.
17
+ - 📘 **Built-in Formula Cheat Sheet:** Comprehensive LaTeX dictionary covering Algebra, Trigonometry, Calculus, Matrices, and Logic.
18
+ - 📊 **Rich Table Support:** Insert tables (3x3), visually add/remove rows and columns, delete tables.
19
+ - 📋 **Auto-convert Markdown Tables:** Copy-paste markdown tables from AI assistants (ChatGPT, Claude, DeepSeek) and they automatically convert into interactive HTML tables.
20
+ - 💻 **Syntax Highlighted Code Blocks:** Pre-configured code blocks with syntax highlighting using `highlight.js`.
21
+ - 🖼️ **Vendor-Agnostic Image Upload:** Async callback prop (`onUploadImage`) easily connects to AWS S3, Cloudflare R2, Supabase, Firebase, or your custom REST API.
22
+ - 🎨 **Self-Contained Styling:** Bundled standalone CSS (`style.css`), no TailwindCSS setup required on the consumer application.
23
+ - 👁️ **RenderMathHTML Viewer:** Companion lightweight component to safely render and display saved HTML content with full KaTeX formulas and responsive tables.
20
24
 
21
25
  ---
22
26
 
23
- ## 📦 Instalasi
24
-
25
- Install paket ini melalui package manager favorit Anda:
27
+ ## 📦 Installation
26
28
 
27
29
  ```bash
28
30
  npm install @ihsanabuhanifah/react-math-editor
29
- # atau
31
+ ```
32
+ ```bash
30
33
  yarn add @ihsanabuhanifah/react-math-editor
31
- # atau
34
+ ```
35
+ ```bash
32
36
  pnpm add @ihsanabuhanifah/react-math-editor
33
37
  ```
34
38
 
35
- Pastikan juga `react` dan `react-dom` versi 18 atau 19 sudah terpasang di project Anda.
39
+ > **Peer Dependencies:** Ensure `react` and `react-dom` (>= 18.0.0) are installed in your project.
36
40
 
37
41
  ---
38
42
 
39
- ## 🚀 Panduan Penggunaan
43
+ ## 🚀 Quick Start
40
44
 
41
- ### 1. Menggunakan Editor (`TextEditor`)
45
+ ### 1. The Editor (`TextEditor`)
42
46
 
43
47
  ```tsx
44
48
  import React, { useState } from "react";
45
49
  import { TextEditor } from "@ihsanabuhanifah/react-math-editor";
46
- import "@ihsanabuhanifah/react-math-editor/dist/style.css"; // Wajib diimport sekali
50
+ import "@ihsanabuhanifah/react-math-editor/dist/style.css"; // Import CSS once
47
51
 
48
- export function FormInputSoal() {
49
- const [content, setContent] = useState("<p>Tentukan nilai dari $x^2 + 5x + 6 = 0$!</p>");
52
+ export function QuestionForm() {
53
+ const [content, setContent] = useState("<p>Solve for $x$: $x^2 - 5x + 6 = 0$</p>");
50
54
 
51
55
  return (
52
- <div style={{ maxWidth: 800, margin: "0 auto" }}>
56
+ <div style={{ maxWidth: 800, margin: "20px auto" }}>
57
+ <h2>Create Question</h2>
53
58
  <TextEditor
54
59
  value={content}
55
60
  onChange={(html) => setContent(html)}
56
- placeholder="Ketik soal, rumus matematika, atau sisipkan tabel..."
57
- minHeight={200}
58
- // Handler upload gambar ke server Anda:
59
- onUploadImage={async (file) => {
61
+ placeholder="Type questions, insert LaTeX math formulas, or paste tables..."
62
+ minHeight={220}
63
+ onUploadImage={async (file: File) => {
64
+ // Upload to your backend server / S3
60
65
  const formData = new FormData();
61
- formData.append("image", file);
66
+ formData.append("file", file);
62
67
 
63
- const res = await fetch("/api/upload", {
68
+ const response = await fetch("/api/upload", {
64
69
  method: "POST",
65
70
  body: formData,
66
71
  });
67
- const data = await res.json();
68
- return data.url; // Harus mengembalikan string URL gambar
72
+ const result = await response.json();
73
+ return result.url; // Must return the image URL string
69
74
  }}
70
75
  />
71
76
  </div>
@@ -75,19 +80,19 @@ export function FormInputSoal() {
75
80
 
76
81
  ---
77
82
 
78
- ### 2. Menampilkan Hasil Konten (`RenderMathHTML`)
83
+ ### 2. The Content Viewer (`RenderMathHTML`)
79
84
 
80
- Komponen ini digunakan di halaman preview, ujian siswa, artikel, atau detail soal:
85
+ Use `RenderMathHTML` wherever you need to display the formatted content to students or readers (e.g., exam page, preview card, blog post):
81
86
 
82
87
  ```tsx
83
88
  import React from "react";
84
89
  import { RenderMathHTML } from "@ihsanabuhanifah/react-math-editor";
85
90
  import "@ihsanabuhanifah/react-math-editor/dist/style.css";
86
91
 
87
- export function DetailSoal({ soalHtml }: { soalHtml: string }) {
92
+ export function QuestionCard({ htmlContent }: { htmlContent: string }) {
88
93
  return (
89
- <div className="card-soal">
90
- <RenderMathHTML html={soalHtml} />
94
+ <div className="card">
95
+ <RenderMathHTML html={htmlContent} />
91
96
  </div>
92
97
  );
93
98
  }
@@ -95,82 +100,49 @@ export function DetailSoal({ soalHtml }: { soalHtml: string }) {
95
100
 
96
101
  ---
97
102
 
98
- ## 🛠️ API & Props Reference
103
+ ## ⚙️ API & Props Reference
99
104
 
100
105
  ### `<TextEditor />`
101
106
 
102
- | Prop | Tipe | Default | Deskripsi |
107
+ | Prop | Type | Default | Description |
103
108
  | :--- | :--- | :--- | :--- |
104
- | `value` | `string` | `""` | Konten HTML input awal |
105
- | `onChange` | `(html: string) => void` | `undefined` | Callback saat isi editor berubah |
106
- | `placeholder` | `string` | `"Tulis konten..."` | Teks placeholder saat editor kosong |
107
- | `disabled` | `boolean` | `false` | Menonaktifkan interaksi editor |
108
- | `readOnly` | `boolean` | `false` | Sembunyikan toolbar dan jadikan read-only |
109
- | `minHeight` | `number \| string` | `140` | Tinggi minimum area ketik (px atau css string) |
110
- | `maxHeight` | `number \| string` | `600` | Tinggi maksimum sebelum scroll |
111
- | `onUploadImage` | `(file: File) => Promise<string>` | `undefined` | Fungsi async pengunggah gambar |
112
- | `toolbarExtra` | `React.ReactNode` | `undefined` | Slot tombol tambahan di kanan toolbar |
113
- | `className` | `string` | `""` | Kelas CSS tambahan pada container |
109
+ | `value` | `string` | `""` | Initial HTML string content |
110
+ | `onChange` | `(html: string) => void` | `undefined` | Callback fired on content change with updated HTML |
111
+ | `placeholder` | `string` | `"Tulis konten..."` | Placeholder text when editor is empty |
112
+ | `disabled` | `boolean` | `false` | Disables user interaction |
113
+ | `readOnly` | `boolean` | `false` | Read-only mode without toolbar |
114
+ | `minHeight` | `number \| string` | `140` | Minimum height for editing area (px or CSS string) |
115
+ | `maxHeight` | `number \| string` | `600` | Maximum height before scrolling |
116
+ | `onUploadImage` | `(file: File) => Promise<string>` | `undefined` | Async handler to upload images; returns the URL |
117
+ | `toolbarExtra` | `React.ReactNode` | `undefined` | Slot for custom action buttons in the toolbar |
118
+ | `className` | `string` | `""` | Additional CSS class names for outer container |
114
119
 
115
120
  ### `<RenderMathHTML />`
116
121
 
117
- | Prop | Tipe | Default | Deskripsi |
122
+ | Prop | Type | Default | Description |
118
123
  | :--- | :--- | :--- | :--- |
119
- | `html` | `string` | `""` | String HTML yang akan dirender |
120
- | `className` | `string` | `""` | Kelas CSS kustom untuk container |
121
- | `style` | `React.CSSProperties` | `undefined` | Objek inline style container |
122
- | `resolveImageUrl` | `(url: string) => Promise<string> \| string` | `undefined` | Resolver opsional untuk URL gambar presigned/private |
124
+ | `html` | `string` | `""` | HTML string containing text, math, or tables to render |
125
+ | `className` | `string` | `""` | Additional CSS class for viewer container |
126
+ | `style` | `React.CSSProperties` | `undefined` | Inline styling for viewer container |
127
+ | `resolveImageUrl` | `(url: string) => Promise<string> \| string` | `undefined` | Optional resolver for private / signed image URLs |
123
128
 
124
129
  ---
125
130
 
126
- ## 🌐 Cara Publikasi ke GitHub & NPM
127
-
128
- ### A. Publish ke NPM Registry
129
- 1. Masuk ke folder library:
130
- ```bash
131
- cd packages/react-math-editor
132
- ```
133
- 2. Build bundle produksi:
134
- ```bash
135
- npm run build
136
- ```
137
- 3. Login ke akun NPM Anda (jika belum):
138
- ```bash
139
- npm login
140
- ```
141
- 4. Publikasikan paket:
142
- ```bash
143
- npm publish --access public
144
- ```
145
-
146
- ### B. Simpan di GitHub Repository
147
- Anda bisa membuat repository baru di GitHub (misal `https://github.com/username/react-math-editor`):
148
- ```bash
149
- cd packages/react-math-editor
150
- git init
151
- git add .
152
- git commit -m "feat: initial release of react-math-editor"
153
- git branch -M main
154
- git remote add origin https://github.com/username/react-math-editor.git
155
- git push -u origin main
156
- ```
131
+ ## 💡 Framework Support
157
132
 
158
- Setelah dipush ke GitHub, Anda bahkan bisa langsung menginstallnya di project lain tanpa harus publish ke NPM:
159
- ```bash
160
- npm install git+https://github.com/username/react-math-editor.git
161
- ```
133
+ ### Next.js (App Router / Pages Router)
134
+ Because KaTeX and Tiptap interact with the browser DOM, wrap `TextEditor` with `'use client'` or dynamic import if using Server Components:
162
135
 
163
- ### C. Testing Lokal Tanpa Publish (`npm pack`)
164
- Jalankan di folder library:
165
- ```bash
166
- npm pack
167
- ```
168
- Perintah ini akan menghasilkan file seperti `luvie-react-math-editor-1.0.0.tgz`. Di aplikasi lain, cukup jalankan:
169
- ```bash
170
- npm install /path/ke/luvie-react-math-editor-1.0.0.tgz
136
+ ```tsx
137
+ 'use client';
138
+ import { TextEditor } from "@ihsanabuhanifah/react-math-editor";
139
+ import "@ihsanabuhanifah/react-math-editor/dist/style.css";
171
140
  ```
172
141
 
142
+ ### Vite / Create React App / Remix
143
+ Works directly out of the box. Simply import the component and the stylesheet.
144
+
173
145
  ---
174
146
 
175
- ## 📄 Lisensi
176
- [MIT License](LICENSE) © 2026
147
+ ## 📄 License
148
+ MIT © [Ihsan Abu Hanifah](https://github.com/ihsanabuhanifah)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ihsanabuhanifah/react-math-editor",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Rich text editor and math renderer component for React with KaTeX formulas, tables, code blocks, and markdown support.",
5
5
  "author": "Ihsan Abu Hanifah",
6
6
  "license": "MIT",