@ihsanabuhanifah/react-math-editor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,176 @@
+# @ihsanabuhanifah/react-math-editor
+
+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.
+
+[![npm version](https://img.shields.io/badge/npm-v1.0.0-blue.svg)](https://www.npmjs.com/)
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
+
+---
+
+## ✨ Fitur Utama
+
+- 📐 **Formula Matematika LaTeX Interaktif:** Dialog penulisan rumus dengan pratinjau instan (*live KaTeX preview*) dan klik langsung untuk mengedit rumus yang sudah ada.
+- 📘 **Kamus Rumus LaTeX:** Cheat sheet terintegrasi lengkap dengan berbagai kategori (Aljabar, Trigonometri, Kalkulus, Matriks, Logika).
+- 📊 **Tabel Responsif:** Sisipkan tabel, tambah/hapus baris & kolom secara visual.
+- 📋 **Auto-convert Markdown Table:** Copy-paste tabel teks markdown dari AI (ChatGPT, DeepSeek, Claude) langsung otomatis diubah menjadi tabel HTML.
+- 💻 **Blok Kode & Highlighting:** Syntax highlighting otomatis untuk berbagai bahasa pemrograman menggunakan `highlight.js`.
+- 🖼️ **Upload Gambar Fleksibel:** Integrasikan dengan backend apa pun (AWS S3, Cloudflare R2, Supabase, Laravel, Express) via callback `onUploadImage`.
+- 🎨 **Styles Mandiri:** File CSS terisolasi (`style.css`), tidak memerlukan konfigurasi Tailwind eksternal.
+- 👁️ **RenderMathHTML Viewer:** Komponen terpisah untuk menampilkan output konten dengan perenderan KaTeX dan tabel responsif.
+
+---
+
+## 📦 Instalasi
+
+Install paket ini melalui package manager favorit Anda:
+
+```bash
+npm install @ihsanabuhanifah/react-math-editor
+# atau
+yarn add @ihsanabuhanifah/react-math-editor
+# atau
+pnpm add @ihsanabuhanifah/react-math-editor
+```
+
+Pastikan juga `react` dan `react-dom` versi 18 atau 19 sudah terpasang di project Anda.
+
+---
+
+## 🚀 Panduan Penggunaan
+
+### 1. Menggunakan Editor (`TextEditor`)
+
+```tsx
+import React, { useState } from "react";
+import { TextEditor } from "@ihsanabuhanifah/react-math-editor";
+import "@ihsanabuhanifah/react-math-editor/dist/style.css"; // Wajib diimport sekali
+
+export function FormInputSoal() {
+  const [content, setContent] = useState("<p>Tentukan nilai dari $x^2 + 5x + 6 = 0$!</p>");
+
+  return (
+    <div style={{ maxWidth: 800, margin: "0 auto" }}>
+      <TextEditor
+        value={content}
+        onChange={(html) => setContent(html)}
+        placeholder="Ketik soal, rumus matematika, atau sisipkan tabel..."
+        minHeight={200}
+        // Handler upload gambar ke server Anda:
+        onUploadImage={async (file) => {
+          const formData = new FormData();
+          formData.append("image", file);
+
+          const res = await fetch("/api/upload", {
+            method: "POST",
+            body: formData,
+          });
+          const data = await res.json();
+          return data.url; // Harus mengembalikan string URL gambar
+        }}
+      />
+    </div>
+  );
+}
+```
+
+---
+
+### 2. Menampilkan Hasil Konten (`RenderMathHTML`)
+
+Komponen ini digunakan di halaman preview, ujian siswa, artikel, atau detail soal:
+
+```tsx
+import React from "react";
+import { RenderMathHTML } from "@ihsanabuhanifah/react-math-editor";
+import "@ihsanabuhanifah/react-math-editor/dist/style.css";
+
+export function DetailSoal({ soalHtml }: { soalHtml: string }) {
+  return (
+    <div className="card-soal">
+      <RenderMathHTML html={soalHtml} />
+    </div>
+  );
+}
+```
+
+---
+
+## 🛠️ API & Props Reference
+
+### `<TextEditor />`
+
+| Prop | Tipe | Default | Deskripsi |
+| :--- | :--- | :--- | :--- |
+| `value` | `string` | `""` | Konten HTML input awal |
+| `onChange` | `(html: string) => void` | `undefined` | Callback saat isi editor berubah |
+| `placeholder` | `string` | `"Tulis konten..."` | Teks placeholder saat editor kosong |
+| `disabled` | `boolean` | `false` | Menonaktifkan interaksi editor |
+| `readOnly` | `boolean` | `false` | Sembunyikan toolbar dan jadikan read-only |
+| `minHeight` | `number \| string` | `140` | Tinggi minimum area ketik (px atau css string) |
+| `maxHeight` | `number \| string` | `600` | Tinggi maksimum sebelum scroll |
+| `onUploadImage` | `(file: File) => Promise<string>` | `undefined` | Fungsi async pengunggah gambar |
+| `toolbarExtra` | `React.ReactNode` | `undefined` | Slot tombol tambahan di kanan toolbar |
+| `className` | `string` | `""` | Kelas CSS tambahan pada container |
+
+### `<RenderMathHTML />`
+
+| Prop | Tipe | Default | Deskripsi |
+| :--- | :--- | :--- | :--- |
+| `html` | `string` | `""` | String HTML yang akan dirender |
+| `className` | `string` | `""` | Kelas CSS kustom untuk container |
+| `style` | `React.CSSProperties` | `undefined` | Objek inline style container |
+| `resolveImageUrl` | `(url: string) => Promise<string> \| string` | `undefined` | Resolver opsional untuk URL gambar presigned/private |
+
+---
+
+## 🌐 Cara Publikasi ke GitHub & NPM
+
+### A. Publish ke NPM Registry
+1. Masuk ke folder library:
+   ```bash
+   cd packages/react-math-editor
+   ```
+2. Build bundle produksi:
+   ```bash
+   npm run build
+   ```
+3. Login ke akun NPM Anda (jika belum):
+   ```bash
+   npm login
+   ```
+4. Publikasikan paket:
+   ```bash
+   npm publish --access public
+   ```
+
+### B. Simpan di GitHub Repository
+Anda bisa membuat repository baru di GitHub (misal `https://github.com/username/react-math-editor`):
+```bash
+cd packages/react-math-editor
+git init
+git add .
+git commit -m "feat: initial release of react-math-editor"
+git branch -M main
+git remote add origin https://github.com/username/react-math-editor.git
+git push -u origin main
+```
+
+Setelah dipush ke GitHub, Anda bahkan bisa langsung menginstallnya di project lain tanpa harus publish ke NPM:
+```bash
+npm install git+https://github.com/username/react-math-editor.git
+```
+
+### C. Testing Lokal Tanpa Publish (`npm pack`)
+Jalankan di folder library:
+```bash
+npm pack
+```
+Perintah ini akan menghasilkan file seperti `luvie-react-math-editor-1.0.0.tgz`. Di aplikasi lain, cukup jalankan:
+```bash
+npm install /path/ke/luvie-react-math-editor-1.0.0.tgz
+```
+
+---
+
+## 📄 Lisensi
+[MIT License](LICENSE) © 2026

package/dist/components/LatexCheatSheet.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface FormulaItem {
+    name: string;
+    category: string;
+    code: string;
+    description: string;
+}
+export declare const DEFAULT_FORMULAS: FormulaItem[];
+export interface LatexCheatSheetModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectFormula: (code: string) => void;
+}
+export declare function LatexCheatSheetModal({ isOpen, onClose, onSelectFormula, }: LatexCheatSheetModalProps): React.JSX.Element;

package/dist/components/MathFormulaModal.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface MathFormulaModalProps {
+    isOpen: boolean;
+    initialValue?: string;
+    onClose: () => void;
+    onSubmit: (latex: string) => void;
+}
+export declare function MathFormulaModal({ isOpen, initialValue, onClose, onSubmit, }: MathFormulaModalProps): React.JSX.Element;

package/dist/components/RenderMathHTML.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export interface RenderMathHTMLProps {
+    html: string;
+    className?: string;
+    style?: React.CSSProperties;
+    resolveImageUrl?: (url: string) => Promise<string> | string;
+}
+export declare function RenderMathHTML({ html, className, style, resolveImageUrl, }: RenderMathHTMLProps): React.JSX.Element;
+export default RenderMathHTML;

package/dist/components/TextEditor.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface TextEditorProps {
+    value?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    onUploadImage?: (file: File) => Promise<string>;
+    toolbarExtra?: React.ReactNode;
+}
+export declare function TextEditor({ value, onChange, placeholder, disabled, readOnly, className, minHeight, maxHeight, onUploadImage, toolbarExtra, }: TextEditorProps): React.JSX.Element;