erl-mathtextx-editor 0.1.5 → 0.1.7

package/README.md

@@ -1,251 +1,253 @@
-# erl-mathtextx-editor
-
-**Visual Math Editor Component — Zero LaTeX Required**
-
-[![npm version](https://badge.fury.io/js/erl-mathtextx-editor.svg)](https://www.npmjs.com/package/erl-mathtextx-editor)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-Embeddable visual math editor widget untuk CMS dan platform edukasi. User tidak perlu tahu LaTeX — semua input matematika dilakukan secara visual.
-
----
-
-## ✨ Fitur Utama
-
-- 🎯 **Visual Math Keyboard** — Klik simbol, operator, template formula
-- 📝 **Rich Text Editor** — Bold, italic, tables, lists, links, images
-- 🧮 **100+ Formula Templates** — Algebra, calculus, trigonometry, chemistry
-- 👁️ **Content Viewer** — Read-only renderer dengan KaTeX
-- 🎨 **Table Editor** — 6 professional table templates
-- ⌨️ **Keyboard Shortcuts** — Ctrl+K (link), Ctrl+Shift+T (table), Ctrl+S (save)
-
----
-
-## 📦 Installation
-
-```bash
-npm install erl-mathtextx-editor
-```
-
----
-
-## 🚀 Quick Start
-
-### Basic Usage
-
-```tsx
-import { MathTextXEditor } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
-
-function App() {
-  return (
-    <MathTextXEditor
-      onChange={(html) => console.log(html)}
-      placeholder="Tulis soal di sini..."
-    />
-  )
-}
-```
-
-### With Save Handler
-
-```tsx
-import { MathTextXEditor, getHTML } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
-
-function QuestionForm() {
-  const handleSave = (html) => {
-    // Send to your API
-    fetch('/api/questions', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ content: html }),
-    })
-  }
-
-  return (
-    <MathTextXEditor
-      onChange={(html) => console.log(html)}
-      onSave={handleSave}
-      placeholder="Tulis pertanyaan..."
-    />
-  )
-}
-```
-
-### Content Viewer (Read-Only)
-
-```tsx
-import { ContentViewer } from 'erl-mathtextx-editor/viewer'
-import 'erl-mathtextx-editor/styles'
-
-function QuestionCard({ questionHtml }) {
-  return (
-    <div className="question-card">
-      <h3>Soal 1</h3>
-      <ContentViewer content={questionHtml} />
-    </div>
-  )
-}
-```
-
----
-
-## 📖 Documentation
-
-- [Quick Start Guide](https://github.com/erlangga/richtext-editor-research/blob/main/QUICK_START.md)
-- [Integration Tutorial](https://github.com/erlangga/richtext-editor-research/blob/main/INTEGRATION_TUTORIAL.md)
-
----
-
-## 🛠️ Tech Stack
-
-- **UI Framework:** React 18+
-- **Editor Engine:** TipTap / ProseMirror
-- **Math Input:** MathLive (WYSIWYG math)
-- **Math Rendering:** KaTeX
-- **XSS Protection:** DOMPurify
-
----
-
-## 📋 Props API
-
-### MathTextXEditor
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `string` | `''` | Initial HTML content |
-| `onChange` | `(html: string) => void` | — | Callback on content change |
-| `onSave` | `(html: string) => void` | — | Callback on Ctrl+S |
-| `placeholder` | `string` | `'Tulis soal...'` | Placeholder text |
-| `minHeight` | `string` | `'200px'` | Minimum editor height |
-| `maxHeight` | `string` | — | Maximum editor height |
-| `onImageUpload` | `(file: File) => Promise<string>` | — | Custom image upload handler |
-
-### ContentViewer
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `string` | — | HTML content to render (required) |
-| `className` | `string` | — | Additional CSS class |
-
----
-
-## ⌨️ Keyboard Shortcuts
-
-| Shortcut | Action |
-|----------|--------|
-| `Ctrl+K` | Insert/edit link |
-| `Ctrl+Shift+T` | Insert table |
-| `Ctrl+S` | Save document |
-| `Ctrl+B` | Bold |
-| `Ctrl+I` | Italic |
-| `Ctrl+U` | Underline |
-
----
-
-## 🎯 Example: Multiple Choice Question Form
-
-```tsx
-import { useState } from 'react'
-import { MathTextXEditor } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
-
-export default function QuestionForm() {
-  const [question, setQuestion] = useState('')
-  const [options, setOptions] = useState([
-    { id: 'A', content: '', isCorrect: false },
-    { id: 'B', content: '', isCorrect: false },
-    { id: 'C', content: '', isCorrect: false },
-    { id: 'D', content: '', isCorrect: false },
-  ])
-
-  const handleSubmit = async () => {
-    await fetch('/api/questions', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ question, options }),
-    })
-  }
-
-  return (
-    <div>
-      <h2>Buat Soal Pilihan Ganda</h2>
-
-      {/* Question */}
-      <MathTextXEditor
-        content={question}
-        onChange={setQuestion}
-        placeholder="Tulis pertanyaan..."
-        minHeight="150px"
-      />
-
-      {/* Options */}
-      {options.map((option) => (
-        <div key={option.id}>
-          <label>
-            <input
-              type="radio"
-              name="correct"
-              checked={option.isCorrect}
-              onChange={() => {
-                setOptions(prev =>
-                  prev.map(o => ({
-                    ...o,
-                    isCorrect: o.id === option.id
-                  }))
-                )
-              }}
-            />
-            Opsi {option.id}
-          </label>
-          <MathTextXEditor
-            content={option.content}
-            onChange={(html) => {
-              setOptions(prev =>
-                prev.map(o =>
-                  o.id === option.id ? { ...o, content: html } : o
-                )
-              )
-            }}
-            placeholder={`Jawaban ${option.id}...`}
-            minHeight="80px"
-          />
-        </div>
-      ))}
-
-      <button onClick={handleSubmit}>Simpan Soal</button>
-    </div>
-  )
-}
-```
-
----
-
-## 🔗 Links
-
-- **Website:** [erl-mathtextx-editor](https://github.com/erlangga/richtext-editor-research)
-- **NPM:** [erl-mathtextx-editor](https://www.npmjs.com/package/erl-mathtextx-editor)
-- **Issues:** [Report Bug](https://github.com/erlangga/richtext-editor-research/issues)
-
----
-
-## 📄 License
-
-[MIT](https://github.com/erlangga/richtext-editor-research/blob/main/LICENSE) © Erlangga Team
-
----
-
-## 🎉 Ready to Use?
-
-```bash
-npm install erl-mathtextx-editor
-```
-
-Then import and use:
-
-```tsx
-import { MathTextXEditor } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
-```
-
-Happy coding! 🚀
+# erl-mathtextx-editor
+
+**Visual Math Editor Component — Zero LaTeX Required**
+
+[![npm version](https://badge.fury.io/js/erl-mathtextx-editor.svg)](https://www.npmjs.com/package/erl-mathtextx-editor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Embeddable visual math editor widget untuk CMS dan platform edukasi. User tidak perlu tahu LaTeX — semua input matematika dilakukan secara visual.
+
+---
+
+## ✨ Fitur Utama
+
+- 🎯 **Visual Math Keyboard** — Klik simbol, operator, template formula
+- 📝 **Rich Text Editor** — Bold, italic, tables, lists, links, images
+- 🧮 **100+ Formula Templates** — Algebra, calculus, trigonometry, chemistry
+- 👁️ **Content Viewer** — Read-only renderer dengan KaTeX
+- 🎨 **Table Editor** — 6 professional table templates
+- ⌨️ **Keyboard Shortcuts** — Ctrl+K (link), Ctrl+Shift+T (table), Ctrl+S (save)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install erl-mathtextx-editor
+```
+
+---
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function App() {
+  return (
+    <MathTextXEditor
+      onChange={(html) => console.log(html)}
+      placeholder="Tulis soal di sini..."
+    />
+  )
+}
+```
+
+### With Save Handler
+
+```tsx
+import { MathTextXEditor, getHTML } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function QuestionForm() {
+  const handleSave = (html) => {
+    // Send to your API
+    fetch('/api/questions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: html }),
+    })
+  }
+
+  return (
+    <MathTextXEditor
+      onChange={(html) => console.log(html)}
+      onSave={handleSave}
+      placeholder="Tulis pertanyaan..."
+    />
+  )
+}
+```
+
+### Content Viewer (Read-Only)
+
+```tsx
+import { ContentViewer } from 'erl-mathtextx-editor/viewer'
+import 'erl-mathtextx-editor/viewer/styles'
+
+function QuestionCard({ questionHtml }) {
+  return (
+    <div className="question-card">
+      <h3>Soal 1</h3>
+      <ContentViewer content={questionHtml} />
+    </div>
+  )
+}
+```
+
+**Catatan:** Viewer memerlukan import CSS terpisah: `import 'erl-mathtextx-editor/viewer/styles'`
+
+---
+
+## 📖 Documentation
+
+- [Quick Start Guide](https://github.com/erlangga/richtext-editor-research/blob/main/QUICK_START.md)
+- [Integration Tutorial](https://github.com/erlangga/richtext-editor-research/blob/main/INTEGRATION_TUTORIAL.md)
+
+---
+
+## 🛠️ Tech Stack
+
+- **UI Framework:** React 18+
+- **Editor Engine:** TipTap / ProseMirror
+- **Math Input:** MathLive (WYSIWYG math)
+- **Math Rendering:** KaTeX
+- **XSS Protection:** DOMPurify
+
+---
+
+## 📋 Props API
+
+### MathTextXEditor
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content` | `string` | `''` | Initial HTML content |
+| `onChange` | `(html: string) => void` | — | Callback on content change |
+| `onSave` | `(html: string) => void` | — | Callback on Ctrl+S |
+| `placeholder` | `string` | `'Tulis soal...'` | Placeholder text |
+| `minHeight` | `string` | `'200px'` | Minimum editor height |
+| `maxHeight` | `string` | — | Maximum editor height |
+| `onImageUpload` | `(file: File) => Promise<string>` | — | Custom image upload handler |
+
+### ContentViewer
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content` | `string` | — | HTML content to render (required) |
+| `className` | `string` | — | Additional CSS class |
+
+---
+
+## ⌨️ Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+K` | Insert/edit link |
+| `Ctrl+Shift+T` | Insert table |
+| `Ctrl+S` | Save document |
+| `Ctrl+B` | Bold |
+| `Ctrl+I` | Italic |
+| `Ctrl+U` | Underline |
+
+---
+
+## 🎯 Example: Multiple Choice Question Form
+
+```tsx
+import { useState } from 'react'
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+export default function QuestionForm() {
+  const [question, setQuestion] = useState('')
+  const [options, setOptions] = useState([
+    { id: 'A', content: '', isCorrect: false },
+    { id: 'B', content: '', isCorrect: false },
+    { id: 'C', content: '', isCorrect: false },
+    { id: 'D', content: '', isCorrect: false },
+  ])
+
+  const handleSubmit = async () => {
+    await fetch('/api/questions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ question, options }),
+    })
+  }
+
+  return (
+    <div>
+      <h2>Buat Soal Pilihan Ganda</h2>
+
+      {/* Question */}
+      <MathTextXEditor
+        content={question}
+        onChange={setQuestion}
+        placeholder="Tulis pertanyaan..."
+        minHeight="150px"
+      />
+
+      {/* Options */}
+      {options.map((option) => (
+        <div key={option.id}>
+          <label>
+            <input
+              type="radio"
+              name="correct"
+              checked={option.isCorrect}
+              onChange={() => {
+                setOptions(prev =>
+                  prev.map(o => ({
+                    ...o,
+                    isCorrect: o.id === option.id
+                  }))
+                )
+              }}
+            />
+            Opsi {option.id}
+          </label>
+          <MathTextXEditor
+            content={option.content}
+            onChange={(html) => {
+              setOptions(prev =>
+                prev.map(o =>
+                  o.id === option.id ? { ...o, content: html } : o
+                )
+              )
+            }}
+            placeholder={`Jawaban ${option.id}...`}
+            minHeight="80px"
+          />
+        </div>
+      ))}
+
+      <button onClick={handleSubmit}>Simpan Soal</button>
+    </div>
+  )
+}
+```
+
+---
+
+## 🔗 Links
+
+- **Website:** [erl-mathtextx-editor](https://github.com/erlangga/richtext-editor-research)
+- **NPM:** [erl-mathtextx-editor](https://www.npmjs.com/package/erl-mathtextx-editor)
+- **Issues:** [Report Bug](https://github.com/erlangga/richtext-editor-research/issues)
+
+---
+
+## 📄 License
+
+[MIT](https://github.com/erlangga/richtext-editor-research/blob/main/LICENSE) © Erlangga Team
+
+---
+
+## 🎉 Ready to Use?
+
+```bash
+npm install erl-mathtextx-editor
+```
+
+Then import and use:
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+```
+
+Happy coding! 🚀

package/dist/{CellPropertiesDialogImpl-ra6ImDOd.js → CellPropertiesDialogImpl-HPT77uxM.js}

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import z, { useId as H, useRef as A, useCallback as b, useState as d, useEffect as V } from "react";
-import { u as B } from "./index-K6msjM1s.js";
+import { u as B } from "./index-Ci20X1Rj.js";
 const M = z.memo(({
   isOpen: s,
   initialData: i = {},

package/dist/{ContentViewer-COGXSiwX.js → ContentViewer-CWZ30KYR.js}

@@ -1,6 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { useRef as o, useMemo as i, useEffect as m } from "react";
 import { p as s, k as l } from "./viewer-deps-CjbAqdti.js";
+import "./viewer-styles.js";
 function c(t) {
   const e = t.getAttribute("data-latex") || t.getAttribute("latex");
   if (!e) return;
@@ -15,8 +16,8 @@ function c(t) {
     t.textContent = a ? `$$${e}$$` : `$${e}$`;
   }
 }
-function p({ content: t, className: e }) {
-  const a = o(null), n = i(
+function x({ content: t, className: e }) {
+  const a = o(null), r = i(
     () => s.sanitize(t, {
       ADD_TAGS: ["math-field", "span", "div"],
       ADD_ATTR: ["data-latex", "latex", "data-type", "data-mathml"],
@@ -29,15 +30,15 @@ function p({ content: t, className: e }) {
     a.current.querySelectorAll(
       '.mtx-math-inline, .mtx-math-block, [data-type="math-inline"], [data-type="math-block"]'
     ).forEach(c);
-  }, [n]), /* @__PURE__ */ r(
+  }, [r]), /* @__PURE__ */ n(
     "div",
     {
       ref: a,
       className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
-      dangerouslySetInnerHTML: { __html: n }
+      dangerouslySetInnerHTML: { __html: r }
     }
   );
 }
 export {
-  p as C
+  x as C
 };

package/dist/{ImageInsertDialog-CjD1IOEK.js → ImageInsertDialog-DzLFhSDK.js}

@@ -1,6 +1,6 @@
 import { jsxs as l, Fragment as E, jsx as e } from "react/jsx-runtime";
 import { useId as I, useRef as P, useState as c, useCallback as n } from "react";
-import { u as W } from "./index-K6msjM1s.js";
+import { u as W } from "./index-Ci20X1Rj.js";
 function O({
   isOpen: f,
   onClose: x,

package/dist/{InsertTableDialogImpl-BmFE8rOe.js → InsertTableDialogImpl-DZrLgDKN.js}

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import N, { useId as v, useRef as f, useState as c, useEffect as g, useCallback as w } from "react";
-import { u as y } from "./index-K6msjM1s.js";
+import { u as y } from "./index-Ci20X1Rj.js";
 const k = N.memo(({ isOpen: i, onInsert: d, onClose: m }) => {
   const b = v(), u = f(null), [l, n] = c(3), [a, s] = c(3), [o, h] = c(!0);
   g(() => {

package/dist/{LinkDialogImpl-BZuaNMx0.js → LinkDialogImpl-DTHugWZM.js}

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import w, { useId as F, useRef as U, useState as r, useEffect as j, useCallback as d } from "react";
-import { u as E } from "./index-K6msjM1s.js";
+import { u as E } from "./index-Ci20X1Rj.js";
 const P = w.memo(({
   isOpen: m,
   currentUrl: i = "",

package/dist/{TableTemplatesDialogImpl-D7cUqz0B.js → TableTemplatesDialogImpl-D0sFSAKl.js}

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import o, { useId as c, useRef as n, useCallback as p } from "react";
-import { u as h } from "./index-K6msjM1s.js";
+import { u as h } from "./index-Ci20X1Rj.js";
 const x = [
   { id: "plain", name: "Plain", description: "Simple table without styling", headerStyle: "none", borderStyle: "all", stripeRows: !1 },
   { id: "light", name: "Light", description: "Light gray header", headerStyle: "light", borderStyle: "all", stripeRows: !1 },