@ihsanabuhanifah/react-math-editor 1.1.0 → 1.1.1

package/README.md

@@ -105,7 +105,20 @@ export function QuestionCard({ htmlContent }: { htmlContent: string }) {
 
 ## ⚙️ API & Props Reference
 
-### `<TextEditor />`
+### `<SmartContentEditor />` *(Featured Full-Featured Component)*
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string` | `""` | Initial or controlled HTML content |
+| `handleChange` / `onChange` | `(html: string) => void` | `undefined` | Callback fired on content change |
+| `readOnly` | `boolean` | `false` | Read-only mode (ideal for question previews & test cards) |
+| `minHeight` | `number` | `140` | Minimum height for editing area in pixels |
+| `placeholder` | `string` | `"Tulis konten..."` | Placeholder text when empty |
+| `onUploadImage` | `(file: File) => Promise<string>` | `undefined` | Async upload for image insertions, drag-drop, or screenshot paste |
+| `onUploadFile` | `(file: File) => Promise<{ url, name, size }>` | `undefined` | Async upload for document attachment nodes |
+| `className` | `string` | `""` | Optional CSS class name |
+
+### `<TextEditor />` *(Standard Rich Math Editor)*
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -120,7 +133,7 @@ export function QuestionCard({ htmlContent }: { htmlContent: string }) {
 | `toolbarExtra` | `React.ReactNode` | `undefined` | Slot for custom action buttons in the toolbar |
 | `className` | `string` | `""` | Additional CSS class names for outer container |
 
-### `<RenderMathHTML />`
+### `<RenderMathHTML />` *(Lightweight Output Viewer)*
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -133,16 +146,36 @@ export function QuestionCard({ htmlContent }: { htmlContent: string }) {
 
 ## 💡 Framework Support
 
-### Next.js (App Router / Pages Router)
-Because KaTeX and Tiptap interact with the browser DOM, wrap `TextEditor` with `'use client'` or dynamic import if using Server Components:
+### Next.js (App Router & Pages Router)
+The library is pre-configured with `'use client';` and SSR hydration guards (`immediatelyRender: false`), making it fully compatible with Next.js:
 
 ```tsx
 'use client';
-import { TextEditor } from "@ihsanabuhanifah/react-math-editor";
+
+import { SmartContentEditor, RenderMathHTML } from "@ihsanabuhanifah/react-math-editor";
 import "@ihsanabuhanifah/react-math-editor/dist/style.css";
+
+export default function SoalPage() {
+  const [content, setContent] = useState("");
+
+  return <SmartContentEditor value={content} handleChange={setContent} />;
+}
+```
+
+Or with `next/dynamic` if you prefer client-only lazy loading:
+
+```tsx
+import dynamic from "next/dynamic";
+import "@ihsanabuhanifah/react-math-editor/dist/style.css";
+
+const SmartContentEditor = dynamic(
+  () => import("@ihsanabuhanifah/react-math-editor").then((mod) => mod.SmartContentEditor),
+  { ssr: false }
+);
 ```
 
-### Vite / Create React App / Remix
+### Vite / Remix / Create React App
+Works directly out of the box with zero extra configuration. Just import the component and the stylesheet.
 Works directly out of the box. Simply import the component and the stylesheet.
 
 ---