erl-mathtextx-editor 0.1.7 → 0.1.8

package/README.md

@@ -1,253 +1,268 @@
-# 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! 🚀
+# 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, column resize, cell selection
+- 🖥️ **Code Blocks** — Syntax highlighting untuk berbagai bahasa pemrograman
+- 📋 **Collapsible Sections** — Details/summary untuk konten tersembunyi
+- ⌨️ **Keyboard Shortcuts** — Ctrl+K (link), Ctrl+Shift+T (table), Ctrl+S (save)
+- 📊 **Graph Plotting** — Function plotting via Function Plot
+- 🔒 **XSS Protection** — DOMPurify sanitization
+- 💻 **Code Blocks** — Syntax highlighting with 100+ languages
+- 📋 **Collapsible Sections** — Details/summary for hidden content
+
+---
+
+## 📦 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 } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function QuestionForm() {
+  const handleSave = (html) => {
+    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>
+  )
+}
+```
+
+---
+
+## 📋 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 |
+| `onImageUpload` | `(file: File) => Promise<string>` | — | Custom image upload handler |
+| `placeholder` | `string` | `'Tulis soal...'` | Placeholder text |
+| `minHeight` | `string` | `'200px'` | Minimum editor height |
+| `maxHeight` | `string` | — | Maximum editor height |
+| `autoFocus` | `boolean` | `false` | Auto-focus editor on mount |
+| `toolbarMode` | `'basic' \| 'advanced'` | `'basic'` | Toolbar preset |
+| `educationLevel` | `'sd' \| 'smp' \| 'sma' \| 'all'` | `'all'` | Filter math templates by level |
+
+### ContentViewer
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content` | `string` | — | HTML content to render (required) |
+| `className` | `string` | — | Additional CSS class |
+
+---
+
+## 📦 Exports
+
+### Main Package (`erl-mathtextx-editor`)
+
+```tsx
+import {
+  MathTextXEditor,
+  ContentViewer,
+  getHTML,
+  toCompatibleHTML,
+  sanitizeCKEditorHTML,
+  MathTypeDialog,
+  TemplatePanel,
+  mathTemplates,
+  getTemplatesByLevel,
+  getTemplatesByCategory,
+  getTemplateCategories,
+} from 'erl-mathtextx-editor'
+
+import 'erl-mathtextx-editor/styles'
+```
+
+### Viewer Only (`erl-mathtextx-editor/viewer`)
+
+```tsx
+import { ContentViewer } from 'erl-mathtextx-editor/viewer'
+import 'erl-mathtextx-editor/viewer/styles'
+```
+
+---
+
+## ⌨️ Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+B` | Bold |
+| `Ctrl+I` | Italic |
+| `Ctrl+U` | Underline |
+| `Ctrl+K` | Insert/edit link |
+| `Ctrl+Shift+T` | Insert table |
+| `Ctrl+S` | Save document |
+| `Tab` | Indent paragraph (at start) / Insert 4 spaces (in middle) |
+| `Shift+Tab` | Outdent paragraph |
+| `Backspace` | Outdent (if indented) / Join with previous paragraph |
+
+---
+
+## 🎯 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>
+
+      <MathTextXEditor
+        content={question}
+        onChange={setQuestion}
+        placeholder="Tulis pertanyaan..."
+        minHeight="150px"
+      />
+
+      {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>
+  )
+}
+```
+
+---
+
+## 🛠️ Tech Stack
+
+- **UI Framework:** React 18+
+- **Editor Engine:** TipTap / ProseMirror
+- **Math Input:** MathLive (WYSIWYG math)
+- **Math Rendering:** KaTeX
+- **XSS Protection:** DOMPurify
+- **Graph Plotting:** Function Plot
+
+---
+
+## 📄 License
+
+[MIT](https://github.com/erlangga/richtext-editor-research/blob/main/LICENSE) © Erlangga Team
+
+---
+
+## 🔗 Links
+
+- **NPM:** [erl-mathtextx-editor](https://www.npmjs.com/package/erl-mathtextx-editor)
+- **Source:** [GitHub Repository](https://github.com/erlangga/richtext-editor-research)
+- **Issues:** [Report Bug](https://github.com/erlangga/richtext-editor-research/issues)

package/dist/{CellPropertiesDialogImpl-HPT77uxM.js → CellPropertiesDialogImpl-DBgs-7H9.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-Ci20X1Rj.js";
+import { u as B } from "./index-UCSefQk0.js";
 const M = z.memo(({
   isOpen: s,
   initialData: i = {},

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

@@ -1,44 +1,44 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useRef as o, useMemo as i, useEffect as m } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as r, 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;
-  const a = t.classList.contains("mtx-math-block");
+  const n = t.classList.contains("mtx-math-block");
   try {
     l.render(e, t, {
       throwOnError: !1,
-      displayMode: a,
+      displayMode: n,
       output: "htmlAndMathml"
     });
   } catch {
-    t.textContent = a ? `$$${e}$$` : `$${e}$`;
+    t.textContent = n ? `$$${e}$$` : `$${e}$`;
   }
 }
-function x({ content: t, className: e }) {
-  const a = o(null), r = i(
+function p({ content: t, className: e }) {
+  const n = r(null), a = i(
     () => s.sanitize(t, {
       ADD_TAGS: ["math-field", "span", "div"],
       ADD_ATTR: ["data-latex", "latex", "data-type", "data-mathml"],
-      FORBID_TAGS: ["script", "style", "iframe", "object", "embed"]
+      FORBID_TAGS: ["script", "style", "iframe", "object", "embed"],
+      FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onmouseout", "onfocus", "onblur"]
     }),
     [t]
   );
   return m(() => {
-    if (!a.current) return;
-    a.current.querySelectorAll(
+    if (!n.current) return;
+    n.current.querySelectorAll(
       '.mtx-math-inline, .mtx-math-block, [data-type="math-inline"], [data-type="math-block"]'
     ).forEach(c);
-  }, [r]), /* @__PURE__ */ n(
+  }, [a]), /* @__PURE__ */ o(
     "div",
     {
-      ref: a,
+      ref: n,
       className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
-      dangerouslySetInnerHTML: { __html: r }
+      dangerouslySetInnerHTML: { __html: a }
     }
   );
 }
 export {
-  x as C
+  p as C
 };