erl-mathtextx-editor 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MathTextX Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,251 @@
+# 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! 🚀

package/dist/CellPropertiesDialogImpl-CgWcr4bD.js

@@ -0,0 +1,101 @@
+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-DYxMVo98.js";
+const M = z.memo(({
+  isOpen: s,
+  initialData: i = {},
+  onSave: f,
+  onClose: o
+}) => {
+  const N = H(), C = A(null), p = b((e) => e ? e.endsWith("%") ? { value: e.replace("%", ""), unit: "%" } : e.endsWith("px") ? { value: e.replace("px", ""), unit: "px" } : { value: e.replace(/[^\d.]/g, ""), unit: "px" } : { value: "", unit: "%" }, []), k = p(i.width), [m, v] = d(k.value), [g, x] = d(k.unit), [h, u] = d(i.backgroundColor || ""), [n, r] = d(i.horizontalAlign || "left"), [a, c] = d(i.verticalAlign || "top");
+  V(() => {
+    if (s) {
+      const e = p(i.width);
+      v(e.value), x(e.unit), u(i.backgroundColor || ""), r(i.horizontalAlign || "left"), c(i.verticalAlign || "top");
+    }
+  }, [p, i, s]), B({ isOpen: s, dialogRef: C, onClose: o });
+  const w = b((e) => {
+    e.preventDefault(), f({
+      width: m ? `${m}${g}` : void 0,
+      backgroundColor: h || void 0,
+      horizontalAlign: n,
+      verticalAlign: a
+    }), o();
+  }, [m, g, h, n, a, f, o]), y = b(() => {
+    v(""), x("%"), u(""), r("left"), c("top");
+  }, []);
+  return s ? /* @__PURE__ */ t("div", { className: "mtx-modal-overlay", onClick: o, children: /* @__PURE__ */ l(
+    "div",
+    {
+      ref: C,
+      className: "mtx-modal-dialog mtx-cell-properties-dialog",
+      onClick: (e) => e.stopPropagation(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": N,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ l("div", { className: "mtx-modal-header", children: [
+          /* @__PURE__ */ t("h3", { className: "mtx-modal-title", id: N, children: "Cell Properties" }),
+          /* @__PURE__ */ t("button", { className: "mtx-modal-close", onClick: o, title: "Close", "aria-label": "Close dialog", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M4 4l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ l("form", { onSubmit: w, children: [
+          /* @__PURE__ */ l("div", { className: "mtx-modal-body", children: [
+            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
+              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "cell-width", children: "Width" }),
+              /* @__PURE__ */ l("div", { className: "mtx-width-input-wrapper", children: [
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    id: "cell-width",
+                    type: "text",
+                    className: "mtx-form-input mtx-width-input",
+                    value: m,
+                    onChange: (e) => v(e.target.value.replace(/[^\d.]/g, "")),
+                    placeholder: "Auto"
+                  }
+                ),
+                /* @__PURE__ */ l("select", { className: "mtx-form-select mtx-width-unit", value: g, onChange: (e) => x(e.target.value), children: [
+                  /* @__PURE__ */ t("option", { value: "px", children: "px" }),
+                  /* @__PURE__ */ t("option", { value: "%", children: "%" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
+              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "cell-bg-color", children: "Background Color" }),
+              /* @__PURE__ */ l("div", { className: "mtx-color-input-wrapper", children: [
+                /* @__PURE__ */ t("input", { id: "cell-bg-color", type: "color", className: "mtx-color-picker-input", value: h || "#ffffff", onChange: (e) => u(e.target.value) }),
+                /* @__PURE__ */ t("input", { type: "text", className: "mtx-form-input mtx-color-text-input", value: h, onChange: (e) => u(e.target.value), placeholder: "Kosongkan untuk default" })
+              ] })
+            ] }),
+            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
+              /* @__PURE__ */ t("label", { className: "mtx-form-label", children: "Horizontal Align" }),
+              /* @__PURE__ */ l("div", { className: "mtx-align-buttons", children: [
+                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${n === "left" ? "is-active" : ""}`, onClick: () => r("left"), title: "Left", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2 3h12v1.5H2V3zm0 4h8v1.5H2V7zm0 4h12v1.5H2v-1.5zM2 11h6v1.5H2V11z" }) }) }),
+                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${n === "center" ? "is-active" : ""}`, onClick: () => r("center"), title: "Center", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2 3h12v1.5H2V3zm3 4h6v1.5H5V7zm-3 4h12v1.5H2v-1.5zM5 11h6v1.5H5V11z" }) }) }),
+                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${n === "right" ? "is-active" : ""}`, onClick: () => r("right"), title: "Right", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2 3h12v1.5H2V3zm6 4h6v1.5H8V7zM2 11h12v1.5H2v-1.5zm6-4h6v1.5H8V7z" }) }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
+              /* @__PURE__ */ t("label", { className: "mtx-form-label", children: "Vertical Align" }),
+              /* @__PURE__ */ l("div", { className: "mtx-align-buttons", children: [
+                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${a === "top" ? "is-active" : ""}`, onClick: () => c("top"), title: "Top", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M8 2l4 4h-3v8H7V6H4L8 2z", transform: "rotate(180 8 8)" }) }) }),
+                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${a === "middle" ? "is-active" : ""}`, onClick: () => c("middle"), title: "Middle", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("rect", { x: "4", y: "6", width: "8", height: "4" }) }) }),
+                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${a === "bottom" ? "is-active" : ""}`, onClick: () => c("bottom"), title: "Bottom", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M8 2l4 4h-3v8H7V6H4L8 2z" }) }) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "mtx-modal-footer", children: [
+            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: y, children: "Reset" }),
+            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: o, children: "Cancel" }),
+            /* @__PURE__ */ t("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: "Apply" })
+          ] })
+        ] })
+      ]
+    }
+  ) }) : null;
+});
+M.displayName = "CellPropertiesDialogImpl";
+export {
+  M as CellPropertiesDialogImpl
+};

package/dist/ContentViewer-DcvxXP9t.js

@@ -0,0 +1,43 @@
+import { jsx as r } 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-xNPNdmbe.js";
+function c(t) {
+  const e = t.getAttribute("data-latex") || t.getAttribute("latex");
+  if (!e) return;
+  const a = t.classList.contains("mtx-math-block");
+  try {
+    l.render(e, t, {
+      throwOnError: !1,
+      displayMode: a,
+      output: "htmlAndMathml"
+    });
+  } catch {
+    t.textContent = a ? `$$${e}$$` : `$${e}$`;
+  }
+}
+function p({ content: t, className: e }) {
+  const a = o(null), n = 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"]
+    }),
+    [t]
+  );
+  return m(() => {
+    if (!a.current) return;
+    a.current.querySelectorAll(
+      '.mtx-math-inline, .mtx-math-block, [data-type="math-inline"], [data-type="math-block"]'
+    ).forEach(c);
+  }, [n]), /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
+      dangerouslySetInnerHTML: { __html: n }
+    }
+  );
+}
+export {
+  p as C
+};

package/dist/ImageInsertDialog-Di0MXcC2.js

@@ -0,0 +1,222 @@
+import { jsxs as l, Fragment as E, jsx as e } from "react/jsx-runtime";
+import { useId as I, useRef as P, useState as d, useCallback as s } from "react";
+import { u as W } from "./index-DYxMVo98.js";
+function O({
+  isOpen: f,
+  onClose: x,
+  onInsert: g,
+  onImageUpload: p
+}) {
+  const k = I(), N = P(null), [u, y] = d(p ? "upload" : "url"), [r, U] = d(""), [m, w] = d(""), [F, h] = d(!1), [G, b] = d(!1), [v, o] = d(null), [D, i] = d(""), R = P(null), C = s(() => {
+    U(""), w(""), o(null), i(""), b(!1), h(!1);
+  }, []), n = s(() => {
+    C(), x();
+  }, [x, C]);
+  W({ isOpen: f, dialogRef: N, onClose: n });
+  const _ = s(
+    async (a) => {
+      if (!a.type.startsWith("image/")) {
+        i("File harus berupa gambar (jpg, png, gif, webp)");
+        return;
+      }
+      if (a.size > 10 * 1024 * 1024) {
+        i("Ukuran file maksimal 10MB");
+        return;
+      }
+      i("");
+      const c = URL.createObjectURL(a);
+      if (o(c), p) {
+        b(!0);
+        try {
+          const t = await p(a);
+          g(t, m || a.name), n();
+        } catch {
+          i("Upload gagal. Silakan coba lagi."), o(null);
+        } finally {
+          b(!1);
+        }
+      } else {
+        const t = new FileReader();
+        t.onload = () => {
+          const T = t.result;
+          g(T, m || a.name), n();
+        }, t.readAsDataURL(a);
+      }
+    },
+    [p, g, m, n]
+  ), M = s(
+    (a) => {
+      var t;
+      const c = (t = a.target.files) == null ? void 0 : t[0];
+      c && _(c);
+    },
+    [_]
+  ), S = s((a) => {
+    a.preventDefault(), a.stopPropagation(), h(!0);
+  }, []), j = s((a) => {
+    a.preventDefault(), a.stopPropagation(), h(!1);
+  }, []), A = s(
+    (a) => {
+      var t;
+      a.preventDefault(), a.stopPropagation(), h(!1);
+      const c = (t = a.dataTransfer.files) == null ? void 0 : t[0];
+      c && _(c);
+    },
+    [_]
+  ), L = s(() => {
+    if (!r.trim()) {
+      i("Masukkan URL gambar");
+      return;
+    }
+    try {
+      new URL(r);
+    } catch {
+      i("URL tidak valid");
+      return;
+    }
+    g(r.trim(), m || void 0), n();
+  }, [r, m, g, n]), B = s(() => {
+    if (r.trim())
+      try {
+        new URL(r), o(r.trim()), i("");
+      } catch {
+        i("URL tidak valid");
+      }
+  }, [r]);
+  return f ? /* @__PURE__ */ l(E, { children: [
+    /* @__PURE__ */ e("div", { className: "mtx-dialog-overlay", onClick: n }),
+    /* @__PURE__ */ l("div", { className: "mtx-image-dialog", ref: N, role: "dialog", "aria-modal": "true", "aria-labelledby": k, tabIndex: -1, children: [
+      /* @__PURE__ */ l("div", { className: "mtx-image-dialog__header", children: [
+        /* @__PURE__ */ e("h3", { id: k, children: "Sisipkan Gambar" }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: "mtx-image-dialog__close",
+            onClick: n,
+            "aria-label": "Tutup",
+            children: "✕"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("div", { className: "mtx-image-dialog__tabs", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `mtx-image-dialog__tab ${u === "upload" ? "is-active" : ""}`,
+            onClick: () => {
+              y("upload"), i(""), o(null);
+            },
+            children: "📁 Upload File"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `mtx-image-dialog__tab ${u === "url" ? "is-active" : ""}`,
+            onClick: () => {
+              y("url"), i(""), o(null);
+            },
+            children: "🔗 URL"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("div", { className: "mtx-image-dialog__body", children: [
+        u === "upload" && /* @__PURE__ */ l(
+          "div",
+          {
+            className: `mtx-image-dialog__dropzone ${F ? "is-dragging" : ""}`,
+            onDragOver: S,
+            onDragLeave: j,
+            onDrop: A,
+            onClick: () => {
+              var a;
+              return (a = R.current) == null ? void 0 : a.click();
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: R,
+                  type: "file",
+                  accept: "image/*",
+                  onChange: M,
+                  style: { display: "none" }
+                }
+              ),
+              G ? /* @__PURE__ */ l("div", { className: "mtx-image-dialog__uploading", children: [
+                /* @__PURE__ */ e("div", { className: "mtx-spinner" }),
+                /* @__PURE__ */ e("p", { children: "Mengupload gambar..." })
+              ] }) : v ? /* @__PURE__ */ e("div", { className: "mtx-image-dialog__preview", children: /* @__PURE__ */ e("img", { src: v, alt: "Preview" }) }) : /* @__PURE__ */ l("div", { className: "mtx-image-dialog__placeholder", children: [
+                /* @__PURE__ */ l("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                  /* @__PURE__ */ e("rect", { x: "4", y: "8", width: "40", height: "32", rx: "4" }),
+                  /* @__PURE__ */ e("circle", { cx: "16", cy: "20", r: "4" }),
+                  /* @__PURE__ */ e("path", { d: "M4 36l10-10 6 6 8-10 16 14" })
+                ] }),
+                /* @__PURE__ */ l("p", { children: [
+                  /* @__PURE__ */ e("strong", { children: "Klik untuk pilih file" }),
+                  " atau drag & drop ke sini"
+                ] }),
+                /* @__PURE__ */ e("span", { children: "JPG, PNG, GIF, WebP — Maks 10MB" })
+              ] })
+            ]
+          }
+        ),
+        u === "url" && /* @__PURE__ */ l("div", { className: "mtx-image-dialog__url-form", children: [
+          /* @__PURE__ */ e("label", { children: "URL Gambar" }),
+          /* @__PURE__ */ e("div", { className: "mtx-image-dialog__url-row", children: /* @__PURE__ */ e(
+            "input",
+            {
+              type: "url",
+              value: r,
+              onChange: (a) => U(a.target.value),
+              placeholder: "https://example.com/gambar.jpg",
+              onKeyDown: (a) => {
+                a.key === "Enter" && L();
+              },
+              onBlur: B,
+              autoFocus: !0
+            }
+          ) }),
+          v && /* @__PURE__ */ e("div", { className: "mtx-image-dialog__url-preview", children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: v,
+              alt: "Preview",
+              onError: () => {
+                o(null), i("Gambar tidak dapat dimuat dari URL ini");
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "mtx-image-dialog__alt", children: [
+          /* @__PURE__ */ e("label", { children: "Teks Alternatif (opsional)" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              value: m,
+              onChange: (a) => w(a.target.value),
+              placeholder: "Deskripsi gambar untuk aksesibilitas"
+            }
+          )
+        ] }),
+        D && /* @__PURE__ */ e("div", { className: "mtx-image-dialog__error", children: D })
+      ] }),
+      /* @__PURE__ */ l("div", { className: "mtx-image-dialog__footer", children: [
+        /* @__PURE__ */ e("button", { className: "mtx-image-dialog__btn mtx-image-dialog__btn--cancel", onClick: n, children: "Batal" }),
+        u === "url" && /* @__PURE__ */ e(
+          "button",
+          {
+            className: "mtx-image-dialog__btn mtx-image-dialog__btn--insert",
+            onClick: L,
+            disabled: !r.trim(),
+            children: "Sisipkan"
+          }
+        )
+      ] })
+    ] })
+  ] }) : null;
+}
+export {
+  O as ImageInsertDialog
+};