erl-mathtextx-editor 0.1.9 → 0.1.10

package/README.md

@@ -13,16 +13,15 @@ Embeddable visual math editor widget untuk CMS dan platform edukasi. User tidak
 
 - 🎯 **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
+- 🧮 **Equation Editor** — Dialog MathType-style dengan tab, grid, KaTeX preview
+- 📋 **100+ Formula Templates** — Algebra, calculus, trigonometry, chemistry, matrix
+- 🖼️ **Free-form Image Drag** — Drag gambar ke posisi bebas (pixel-perfect)
+- 📄 **DOCX Import** — Import file .docx via mammoth.js (toolbar + drag-drop)
+- 🗂️ **Google Docs Paste** — Paste dari Google Docs (equations + document) auto-cleaned
+- 👁️ **Content Viewer** — Read-only renderer dengan KaTeX + DOMPurify
+- 🎨 **Table Editor** — 6 templates, column resize, cell merge/split
+- 🔒 **XSS Protection** — DOMPurify sanitization di paste + serializer
+- 🛡️ **Error Boundary** — Anti white-screen crash protection
 
 ---
 
@@ -36,7 +35,7 @@ npm install erl-mathtextx-editor
 
 ## 🚀 Quick Start
 
-### Basic Usage
+### 1. Basic Editor
 
 ```tsx
 import { MathTextXEditor } from 'erl-mathtextx-editor'
@@ -52,14 +51,19 @@ function App() {
 }
 ```
 
-### With Save Handler
+### 2. Editor dengan Save Handler
 
 ```tsx
-import { MathTextXEditor } from 'erl-mathtextx-editor'
+import { useRef } from 'react'
+import { MathTextXEditor, getHTML } from 'erl-mathtextx-editor'
 import 'erl-mathtextx-editor/styles'
 
 function QuestionForm() {
-  const handleSave = (html) => {
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  const handleSave = () => {
+    if (!editorRef.current) return
+    const html = getHTML(editorRef.current)
     fetch('/api/questions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -67,32 +71,210 @@ function QuestionForm() {
     })
   }
 
+  return (
+    <div>
+      <MathTextXEditor ref={editorRef} placeholder="Tulis pertanyaan..." onSave={handleSave} />
+      <button onClick={handleSave}>Simpan</button>
+    </div>
+  )
+}
+```
+
+### 3. Edit Existing Content
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function EditQuestion({ existingHtml }: { existingHtml: string }) {
   return (
     <MathTextXEditor
-      onChange={(html) => console.log(html)}
-      onSave={handleSave}
-      placeholder="Tulis pertanyaan..."
+      content={existingHtml}
+      onChange={(html) => console.log('Updated:', html)}
     />
   )
 }
 ```
 
-### Content Viewer (Read-Only)
+### 4. Read-Only Mode (Viewer)
 
 ```tsx
 import { ContentViewer } from 'erl-mathtextx-editor/viewer'
 import 'erl-mathtextx-editor/viewer/styles'
 
-function QuestionCard({ questionHtml }) {
+function ExamQuestion({ questionHtml }: { questionHtml: string }) {
+  return <ContentViewer content={questionHtml} />
+}
+```
+
+### 5. Multi-Instance (Soal + Pilihan Jawaban)
+
+```tsx
+import { useState } from 'react'
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function MultipleChoiceForm() {
+  const [question, setQuestion] = useState('')
+  const [options, setOptions] = useState(
+    ['A', 'B', 'C', 'D'].map((id) => ({ id, content: '' }))
+  )
+
   return (
-    <div className="question-card">
-      <h3>Soal 1</h3>
-      <ContentViewer content={questionHtml} />
+    <div>
+      <label>Pertanyaan:</label>
+      <MathTextXEditor
+        content={question}
+        onChange={setQuestion}
+        placeholder="Tulis pertanyaan..."
+        minHeight="150px"
+      />
+      {options.map((opt) => (
+        <div key={opt.id}>
+          <label>Opsi {opt.id}:</label>
+          <MathTextXEditor
+            content={opt.content}
+            onChange={(html) => setOptions((prev) => prev.map((o) => o.id === opt.id ? { ...o, content: html } : o))}
+            placeholder={`Jawaban ${opt.id}...`}
+            minHeight="60px"
+          />
+        </div>
+      ))}
     </div>
   )
 }
 ```
 
+### 6. Next.js (App Router)
+
+```tsx
+'use client'
+import dynamic from 'next/dynamic'
+import 'erl-mathtextx-editor/styles'
+
+const MathTextXEditor = dynamic(
+  () => import('erl-mathtextx-editor').then((mod) => mod.MathTextXEditor),
+  { ssr: false }
+)
+
+export default function EditorPage() {
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal matematika..."
+      onChange={(html) => console.log(html)}
+      minHeight="300px"
+    />
+  )
+}
+```
+
+### 7. Vite + React
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function App() {
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal..."
+      onChange={(html) => console.log(html)}
+    />
+  )
+}
+export default App
+```
+
+---
+
+## 🧰 Image Upload
+
+Editor mendukung upload gambar dari: **Insert dialog**, **drag-drop**, **paste dari clipboard**, dan **DOCX import**. Semuanya melalui satu callback `onImageUpload`.
+
+### Basic Upload
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function EditorWithUpload() {
+  const handleImageUpload = async (file: File): Promise<string> => {
+    const formData = new FormData()
+    formData.append('image', file)
+    const res = await fetch('/api/upload', { method: 'POST', body: formData })
+    if (!res.ok) throw new Error('Upload failed: ' + res.statusText)
+    const data = await res.json()
+    return data.url // Expected: { "url": "https://cdn.example.com/img.jpg" }
+  }
+
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal..."
+      onImageUpload={handleImageUpload}
+    />
+  )
+}
+```
+
+### Re-upload Gambar dari Paste (Google Docs / Website)
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function EditorWithPasteReupload() {
+  const handleImageUpload = async (file: File): Promise<string> => {
+    const formData = new FormData()
+    formData.append('image', file)
+    const res = await fetch('/api/upload', { method: 'POST', body: formData })
+    return (await res.json()).url
+  }
+
+  const handleBeforePasteHTML = async (html: string): Promise<string> => {
+    // Download + re-upload external images from pasted HTML
+    const imgRegex = /<img\s+[^>]*src="([^"]+)"[^>]*>/gi
+    const replacements: Array<[string, string]> = []
+    let match
+
+    while ((match = imgRegex.exec(html)) !== null) {
+      const src = match[1]
+      if (src.startsWith('data:') || src.includes('cdn.example.com')) continue
+      try {
+        const blob = await (await fetch(src)).blob()
+        const file = new File([blob], 'image.' + (blob.type.split('/')[1] || 'jpg'))
+        replacements.push([src, await handleImageUpload(file)])
+      } catch { console.warn('Skip image:', src) }
+    }
+
+    let result = html
+    for (const [oldSrc, newSrc] of replacements) result = result.replaceAll(oldSrc, newSrc)
+    return result
+  }
+
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal..."
+      onImageUpload={handleImageUpload}
+      onBeforePasteHTML={handleBeforePasteHTML}
+    />
+  )
+}
+```
+
+### Base64 Fallback (Tanpa Server)
+
+```tsx
+const handleImageUpload = async (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+// ⚠️ Base64 hanya cocok untuk gambar < 100KB. Untuk produksi, gunakan upload ke server.
+```
+
 ---
 
 ## 📋 Props API
@@ -102,15 +284,17 @@ function QuestionCard({ questionHtml }) {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `content` | `string` | `''` | Initial HTML content |
-| `onChange` | `(html: string) => void` | — | Callback on content change |
+| `onChange` | `(html: string) => void` | — | Callback on content change (debounced 150ms) |
 | `onSave` | `(html: string) => void` | — | Callback on Ctrl+S |
 | `onImageUpload` | `(file: File) => Promise<string>` | — | Custom image upload handler |
+| `onBeforePasteHTML` | `(html: string) => Promise<string>` | — | Transform pasted HTML (re-upload images) |
 | `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 |
+| `editable` | `boolean` | `true` | Set false for read-only mode |
+| `className` | `string` | — | Additional CSS class |
 
 ### ContentViewer
 
@@ -127,17 +311,35 @@ function QuestionCard({ questionHtml }) {
 
 ```tsx
 import {
-  MathTextXEditor,
-  ContentViewer,
-  getHTML,
-  toCompatibleHTML,
-  sanitizeCKEditorHTML,
-  MathTypeDialog,
-  TemplatePanel,
-  mathTemplates,
-  getTemplatesByLevel,
-  getTemplatesByCategory,
-  getTemplateCategories,
+  MathTextXEditor,       // Main editor component
+  ContentViewer,         // Read-only renderer
+  MathTypeDialog,        // Standalone equation editor dialog
+  TemplatePanel,         // Standalone formula template panel
+  MainToolbar,           // Standalone text formatting toolbar
+  MathToolbar,           // Standalone math symbols toolbar
+  SymbolPalette,         // Standalone symbol picker
+  WordCount,             // Status bar word/char counter
+  LinkDialog,            // Standalone link insert/edit dialog
+  ImageEditDialog,       // Standalone image edit dialog
+  InsertTableDialog,     // Standalone table insert dialog
+  TableMenu,             // Standalone table context menu
+  CellPropertiesDialog,  // Standalone cell properties dialog
+  TablePropertiesDialog, // Standalone table properties dialog
+  TableTemplatesDialog,  // Standalone table template picker
+  MathInlineNode,        // TipTap inline math extension
+  MathBlockNode,         // TipTap block math extension
+  getHTML,               // Serialize editor → HTML string
+  getJSON,               // Serialize editor → JSON
+  sanitizeCKEditorHTML,  // Clean CKEditor HTML for compatibility
+  toCompatibleHTML,      // Convert to CKEditor-compatible format
+  createExtensions,      // Create TipTap extensions programmatically
+  mathTemplates,         // Template definitions
+  getTemplatesByLevel,   // Filter templates by education level
+  getTemplatesByCategory,// Filter templates by category
+  getTemplateCategories, // Get all template categories
+  countWords,            // Word count utility
+  countCharacters,       // Character count utility
+  getTemplateStyles,     // Table template CSS generator
 } from 'erl-mathtextx-editor'
 
 import 'erl-mathtextx-editor/styles'
@@ -160,87 +362,36 @@ import 'erl-mathtextx-editor/viewer/styles'
 | `Ctrl+I` | Italic |
 | `Ctrl+U` | Underline |
 | `Ctrl+K` | Insert/edit link |
+| `Ctrl+M` | Insert inline math |
 | `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 |
+| `Shift+Ctrl+V` | Paste as plain text |
+| `Enter` (equation editor) | Insert formula |
+| `Esc` (equation editor) | Close dialog |
 
 ---
 
-## 🎯 Example: Multiple Choice Question Form
+## ⚠️ Troubleshooting
 
-```tsx
-import { useState } from 'react'
-import { MathTextXEditor } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
+| Error | Solution |
+|---|---|
+| `Can't resolve 'erl-mathtextx-editor'` | `npm install erl-mathtextx-editor` |
+| `Can't resolve 'erl-mathtextx-editor/styles'` | Version ≥ 0.1.3. Alternatif: `import 'erl-mathtextx-editor/dist/assets/erl-mathtextx-editor.css'` |
+| `MathTextXEditor is not a function` | Pastikan React ≥ 18 (`npm ls react`) |
+| `window is not defined` (Next.js) | Gunakan `dynamic()` dengan `{ ssr: false }` |
+| `Unexpected token 'export'` (CRA) | Webpack config: `resolve.mainFields: ['main', 'module']` |
+| MathLive fonts error | Set `(window as any).MATHLIVE_FONTS_PATH = '/fonts'` + copy font ke `public/fonts/` |
 
-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>
-      ))}
+## ✅ Verified Import Paths
 
-      <button onClick={handleSubmit}>Simpan Soal</button>
-    </div>
-  )
-}
-```
+| Import | Resolves to |
+|---|---|
+| `erl-mathtextx-editor` | `dist/erl-mathtextx-editor.js` |
+| `erl-mathtextx-editor/styles` | `dist/assets/erl-mathtextx-editor.css` |
+| `erl-mathtextx-editor/viewer` | `dist/viewer.js` |
+| `erl-mathtextx-editor/viewer/styles` | `dist/viewer-styles.js` |
 
 ---
 
@@ -250,8 +401,11 @@ export default function QuestionForm() {
 - **Editor Engine:** TipTap / ProseMirror
 - **Math Input:** MathLive (WYSIWYG math)
 - **Math Rendering:** KaTeX
+- **DOCX Import:** mammoth.js
 - **XSS Protection:** DOMPurify
 - **Graph Plotting:** Function Plot
+- **Syntax Highlight:** lowlight (100+ languages)
+- **Build:** Vite (Library Mode)
 
 ---
 
@@ -266,3 +420,4 @@ export default function QuestionForm() {
 - **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)
+- **📘 Embed Tutorial:** [docs/EMBED_TUTORIAL.md](https://github.com/erlangga/richtext-editor-research/blob/main/docs/EMBED_TUTORIAL.md)

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

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

@@ -1,22 +1,23 @@
-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 { jsx as a } 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-BDYoL2Ts.js";
 function c(t) {
+  if (t.querySelector(".katex")) return;
   const e = t.getAttribute("data-latex") || t.getAttribute("latex");
   if (!e) return;
-  const n = t.classList.contains("mtx-math-block");
+  const r = t.classList.contains("mtx-math-block");
   try {
     l.render(e, t, {
       throwOnError: !1,
-      displayMode: n,
+      displayMode: r,
       output: "htmlAndMathml"
     });
   } catch {
-    t.textContent = n ? `$$${e}$$` : `$${e}$`;
+    t.textContent = r ? `$$${e}$$` : `$${e}$`;
   }
 }
-function p({ content: t, className: e }) {
-  const n = r(null), a = i(
+function x({ content: t, className: e }) {
+  const r = o(null), n = i(
     () => s.sanitize(t, {
       ADD_TAGS: ["math-field", "span", "div"],
       ADD_ATTR: ["data-latex", "latex", "data-type", "data-mathml"],
@@ -26,19 +27,19 @@ function p({ content: t, className: e }) {
     [t]
   );
   return m(() => {
-    if (!n.current) return;
-    n.current.querySelectorAll(
+    if (!r.current) return;
+    r.current.querySelectorAll(
       '.mtx-math-inline, .mtx-math-block, [data-type="math-inline"], [data-type="math-block"]'
     ).forEach(c);
-  }, [a]), /* @__PURE__ */ o(
+  }, [n]), /* @__PURE__ */ a(
     "div",
     {
-      ref: n,
+      ref: r,
       className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
-      dangerouslySetInnerHTML: { __html: a }
+      dangerouslySetInnerHTML: { __html: n }
     }
   );
 }
 export {
-  p as C
+  x as C
 };

package/dist/{ImageInsertDialog-B24KHrgt.js → ImageInsertDialog-BVBl1y36.js}

@@ -1,17 +1,17 @@
 import { jsxs as i, Fragment as J, jsx as e } from "react/jsx-runtime";
 import { useId as V, useRef as y, useState as d, useCallback as s } from "react";
-import { u as q } from "./index-UCSefQk0.js";
+import { u as q } from "./index-CakccgVO.js";
 function Z({
   isOpen: U,
-  onClose: N,
+  onClose: w,
   onInsert: u,
   onImageUpload: v
 }) {
-  const w = V(), R = y(null), [p, L] = d(v ? "upload" : "url"), [r, D] = d(""), [g, C] = d(""), [B, h] = d(!1), [T, k] = d(!1), [f, o] = d(null), [P, l] = d(""), F = y(null), m = y(null), j = s(() => {
-    m.current && (URL.revokeObjectURL(m.current), m.current = null), D(""), C(""), o(null), l(""), k(!1), h(!1);
+  const N = V(), R = y(null), [p, L] = d(v ? "upload" : "url"), [r, D] = d(""), [g, C] = d(""), [B, h] = d(!1), [T, k] = d(!1), [f, c] = d(null), [P, l] = d(""), F = y(null), m = y(null), j = s(() => {
+    m.current && (URL.revokeObjectURL(m.current), m.current = null), D(""), C(""), c(null), l(""), k(!1), h(!1);
   }, []), t = s(() => {
-    j(), N();
-  }, [N, j]);
+    j(), w();
+  }, [w, j]);
   q({ isOpen: U, dialogRef: R, onClose: t });
   const A = async (a) => {
     if (!["image/png", "image/jpeg", "image/jpg", "image/gif", "image/webp"].includes(a.type))
@@ -26,7 +26,7 @@ function Z({
       "image/webp": [[82, 73, 70, 70]]
     };
     try {
-      const c = await a.slice(0, 8).arrayBuffer(), x = new Uint8Array(c), S = _[a.type];
+      const o = await a.slice(0, 8).arrayBuffer(), x = new Uint8Array(o), S = _[a.type];
       if (!S)
         return { valid: !1, error: "Format gambar tidak dikenali" };
       if (!S.some(
@@ -46,22 +46,24 @@ function Z({
       }
       l(""), m.current && URL.revokeObjectURL(m.current);
       const _ = URL.createObjectURL(a);
-      if (m.current = _, o(_), v) {
+      if (m.current = _, c(_), v) {
         k(!0);
         try {
-          const c = await v(a);
-          u(c, g || a.name), t();
+          const o = await v(a);
+          if (!o)
+            throw new Error("Upload gagal: URL tidak valid");
+          u(o, g || a.name), t();
         } catch {
-          l("Upload gagal. Silakan coba lagi."), o(null);
+          l("Upload gagal. Silakan coba lagi."), c(null);
         } finally {
           k(!1);
         }
       } else {
-        const c = new FileReader();
-        c.onload = () => {
-          const x = c.result;
+        const o = new FileReader();
+        o.onload = () => {
+          const x = o.result;
           u(x, g || a.name), t();
-        }, c.readAsDataURL(a);
+        }, o.readAsDataURL(a);
       }
     },
     [v, u, g, t]
@@ -73,9 +75,9 @@ function Z({
     [b]
   ), I = s((a) => {
     a.preventDefault(), a.stopPropagation(), h(!0);
-  }, []), O = s((a) => {
+  }, []), E = s((a) => {
     a.preventDefault(), a.stopPropagation(), h(!1);
-  }, []), E = s(
+  }, []), O = s(
     (a) => {
       a.preventDefault(), a.stopPropagation(), h(!1);
       const n = a.dataTransfer.files?.[0];
@@ -97,16 +99,16 @@ function Z({
   }, [r, g, u, t]), K = s(() => {
     if (r.trim())
       try {
-        new URL(r), o(r.trim()), l("");
+        new URL(r), c(r.trim()), l("");
       } catch {
         l("URL tidak valid");
       }
   }, [r]);
   return U ? /* @__PURE__ */ i(J, { children: [
     /* @__PURE__ */ e("div", { className: "mtx-dialog-overlay", onClick: t }),
-    /* @__PURE__ */ i("div", { className: "mtx-image-dialog", ref: R, role: "dialog", "aria-modal": "true", "aria-labelledby": w, tabIndex: -1, children: [
+    /* @__PURE__ */ i("div", { className: "mtx-image-dialog", ref: R, role: "dialog", "aria-modal": "true", "aria-labelledby": N, tabIndex: -1, children: [
       /* @__PURE__ */ i("div", { className: "mtx-image-dialog__header", children: [
-        /* @__PURE__ */ e("h3", { id: w, children: "Sisipkan Gambar" }),
+        /* @__PURE__ */ e("h3", { id: N, children: "Sisipkan Gambar" }),
         /* @__PURE__ */ e(
           "button",
           {
@@ -123,7 +125,7 @@ function Z({
           {
             className: `mtx-image-dialog__tab ${p === "upload" ? "is-active" : ""}`,
             onClick: () => {
-              L("upload"), l(""), o(null);
+              L("upload"), l(""), c(null);
             },
             children: "📁 Upload File"
           }
@@ -133,7 +135,7 @@ function Z({
           {
             className: `mtx-image-dialog__tab ${p === "url" ? "is-active" : ""}`,
             onClick: () => {
-              L("url"), l(""), o(null);
+              L("url"), l(""), c(null);
             },
             children: "🔗 URL"
           }
@@ -145,8 +147,8 @@ function Z({
           {
             className: `mtx-image-dialog__dropzone ${B ? "is-dragging" : ""}`,
             onDragOver: I,
-            onDragLeave: O,
-            onDrop: E,
+            onDragLeave: E,
+            onDrop: O,
             onClick: () => F.current?.click(),
             children: [
               /* @__PURE__ */ e(
@@ -199,7 +201,7 @@ function Z({
               src: f,
               alt: "Preview",
               onError: () => {
-                o(null), l("Gambar tidak dapat dimuat dari URL ini");
+                c(null), l("Gambar tidak dapat dimuat dari URL ini");
               }
             }
           ) })

package/dist/{InsertTableDialogImpl-B6_PRu5m.js → InsertTableDialogImpl-Cx3ShX7u.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-UCSefQk0.js";
+import { u as y } from "./index-CakccgVO.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(() => {