@ihsanabuhanifah/react-math-editor 1.0.1 → 1.1.1

package/README.md

@@ -13,14 +13,17 @@ Designed specifically for educational platforms, exam builders (CBT), question b
 
 ## ✨ Features
 
+- 🧠 **SmartContentEditor Included:** Advanced editor supporting resizable & alignable images (25%, 50%, 75%, 100%), document attachments, YouTube video embeds, and AI paste modal.
 - 📐 **Interactive LaTeX Math Formulas:** Popup dialog with live KaTeX preview. Click any formula chip inside the editor to edit it seamlessly.
 - 📘 **Built-in Formula Cheat Sheet:** Comprehensive LaTeX dictionary covering Algebra, Trigonometry, Calculus, Matrices, and Logic.
 - 📊 **Rich Table Support:** Insert tables (3x3), visually add/remove rows and columns, delete tables.
 - 📋 **Auto-convert Markdown Tables:** Copy-paste markdown tables from AI assistants (ChatGPT, Claude, DeepSeek) and they automatically convert into interactive HTML tables.
+- 🤖 **Smart AI Paste:** Dedicated modal & paste listener that formats markdown from AI into clean visual Tiptap nodes.
+- 🎥 **YouTube & Attachment Embeds:** Embed responsive 16:9 YouTube videos and downloadable document attachments.
 - 💻 **Syntax Highlighted Code Blocks:** Pre-configured code blocks with syntax highlighting using `highlight.js`.
-- 🖼️ **Vendor-Agnostic Image Upload:** Async callback prop (`onUploadImage`) easily connects to AWS S3, Cloudflare R2, Supabase, Firebase, or your custom REST API.
+- 🖼️ **Vendor-Agnostic Uploads:** Async callback props (`onUploadImage`, `onUploadFile`) connect to any storage backend.
 - 🎨 **Self-Contained Styling:** Bundled standalone CSS (`style.css`), no TailwindCSS setup required on the consumer application.
-- 👁️ **RenderMathHTML Viewer:** Companion lightweight component to safely render and display saved HTML content with full KaTeX formulas and responsive tables.
+- 👁️ **RenderMathHTML Viewer:** Companion lightweight component to safely render and display saved HTML content.
 
 ---
 
@@ -102,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 |
 | :--- | :--- | :--- | :--- |
@@ -117,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 |
 | :--- | :--- | :--- | :--- |
@@ -130,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.
 
 ---

package/dist/components/SmartContentEditor.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+
+export declare let lastActiveSmartEditor: any;
+export declare function setLastActiveSmartEditor(ed: any): void;
+export declare function getLastActiveSmartEditor(): any;
+export declare function parseYouTubeEmbedUrl(url: string): string | null;
+export declare function convertAiMarkdownToTipTapHtml(markdown: string): string;
+export interface SmartContentEditorProps {
+    value: string;
+    handleChange?: (html: string) => void;
+    onChange?: (html: string) => void;
+    readOnly?: boolean;
+    minHeight?: number;
+    placeholder?: string;
+    onUploadImage?: (file: File) => Promise<string>;
+    onUploadFile?: (file: File) => Promise<{
+        url: string;
+        name: string;
+        size?: string | number;
+    }>;
+    showMathGraph?: boolean;
+    onPreview?: () => void;
+    error?: string;
+    className?: string;
+}
+export declare function SmartContentEditor({ value, handleChange, onChange, readOnly, minHeight, placeholder, onUploadImage, onUploadFile, showMathGraph, onPreview, error, className, }: SmartContentEditorProps): React.JSX.Element;
+export default SmartContentEditor;