erl-mathtextx-editor 0.1.3 → 0.1.6

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

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

@@ -1,40 +1,41 @@
-import { jsx as r } 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";
 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 p({ content: t, className: e }) {
-  const a = o(null), n = i(
+  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);
-  }, [n]), /* @__PURE__ */ r(
+  }, [a]), /* @__PURE__ */ o(
     "div",
     {
-      ref: a,
+      ref: n,
       className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
-      dangerouslySetInnerHTML: { __html: n }
+      dangerouslySetInnerHTML: { __html: a }
     }
   );
 }

package/dist/ImageInsertDialog-CJPVdXtW.js

@@ -0,0 +1,238 @@
+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-wMMXFiRr.js";
+function Z({
+  isOpen: U,
+  onClose: N,
+  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);
+  }, []), t = s(() => {
+    j(), N();
+  }, [N, 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))
+      return { valid: !1, error: "File harus berupa gambar (JPG, PNG, GIF, WebP)" };
+    if (a.size > 10 * 1024 * 1024)
+      return { valid: !1, error: "Ukuran file maksimal 10MB" };
+    const _ = {
+      "image/png": [[137, 80, 78, 71]],
+      "image/jpeg": [[255, 216, 255]],
+      "image/jpg": [[255, 216, 255]],
+      "image/gif": [[71, 73, 70, 56]],
+      "image/webp": [[82, 73, 70, 70]]
+    };
+    try {
+      const c = await a.slice(0, 8).arrayBuffer(), x = new Uint8Array(c), S = _[a.type];
+      if (!S)
+        return { valid: !1, error: "Format gambar tidak dikenali" };
+      if (!S.some(
+        (W) => W.every(($, z) => x[z] === $)
+      ))
+        return { valid: !1, error: "File signature tidak valid. Kemungkinan file rusak atau mencurigakan." };
+    } catch {
+      return { valid: !1, error: "Gagal memvalidasi file" };
+    }
+    return { valid: !0 };
+  }, b = s(
+    async (a) => {
+      const n = await A(a);
+      if (!n.valid) {
+        l(n.error);
+        return;
+      }
+      l(""), m.current && URL.revokeObjectURL(m.current);
+      const _ = URL.createObjectURL(a);
+      if (m.current = _, o(_), v) {
+        k(!0);
+        try {
+          const c = await v(a);
+          u(c, g || a.name), t();
+        } catch {
+          l("Upload gagal. Silakan coba lagi."), o(null);
+        } finally {
+          k(!1);
+        }
+      } else {
+        const c = new FileReader();
+        c.onload = () => {
+          const x = c.result;
+          u(x, g || a.name), t();
+        }, c.readAsDataURL(a);
+      }
+    },
+    [v, u, g, t]
+  ), M = s(
+    (a) => {
+      const n = a.target.files?.[0];
+      n && b(n);
+    },
+    [b]
+  ), I = s((a) => {
+    a.preventDefault(), a.stopPropagation(), h(!0);
+  }, []), O = s((a) => {
+    a.preventDefault(), a.stopPropagation(), h(!1);
+  }, []), E = s(
+    (a) => {
+      a.preventDefault(), a.stopPropagation(), h(!1);
+      const n = a.dataTransfer.files?.[0];
+      n && b(n);
+    },
+    [b]
+  ), G = s(() => {
+    if (!r.trim()) {
+      l("Masukkan URL gambar");
+      return;
+    }
+    try {
+      new URL(r);
+    } catch {
+      l("URL tidak valid");
+      return;
+    }
+    u(r.trim(), g || void 0), t();
+  }, [r, g, u, t]), K = s(() => {
+    if (r.trim())
+      try {
+        new URL(r), o(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__header", children: [
+        /* @__PURE__ */ e("h3", { id: w, children: "Sisipkan Gambar" }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: "mtx-image-dialog__close",
+            onClick: t,
+            "aria-label": "Tutup",
+            children: "✕"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("div", { className: "mtx-image-dialog__tabs", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `mtx-image-dialog__tab ${p === "upload" ? "is-active" : ""}`,
+            onClick: () => {
+              L("upload"), l(""), o(null);
+            },
+            children: "📁 Upload File"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `mtx-image-dialog__tab ${p === "url" ? "is-active" : ""}`,
+            onClick: () => {
+              L("url"), l(""), o(null);
+            },
+            children: "🔗 URL"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("div", { className: "mtx-image-dialog__body", children: [
+        p === "upload" && /* @__PURE__ */ i(
+          "div",
+          {
+            className: `mtx-image-dialog__dropzone ${B ? "is-dragging" : ""}`,
+            onDragOver: I,
+            onDragLeave: O,
+            onDrop: E,
+            onClick: () => F.current?.click(),
+            children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: F,
+                  type: "file",
+                  accept: "image/*",
+                  onChange: M,
+                  style: { display: "none" }
+                }
+              ),
+              T ? /* @__PURE__ */ i("div", { className: "mtx-image-dialog__uploading", children: [
+                /* @__PURE__ */ e("div", { className: "mtx-spinner" }),
+                /* @__PURE__ */ e("p", { children: "Mengupload gambar..." })
+              ] }) : f ? /* @__PURE__ */ e("div", { className: "mtx-image-dialog__preview", children: /* @__PURE__ */ e("img", { src: f, alt: "Preview" }) }) : /* @__PURE__ */ i("div", { className: "mtx-image-dialog__placeholder", children: [
+                /* @__PURE__ */ i("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__ */ i("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" })
+              ] })
+            ]
+          }
+        ),
+        p === "url" && /* @__PURE__ */ i("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) => D(a.target.value),
+              placeholder: "https://example.com/gambar.jpg",
+              onKeyDown: (a) => {
+                a.key === "Enter" && G();
+              },
+              onBlur: K,
+              autoFocus: !0
+            }
+          ) }),
+          f && /* @__PURE__ */ e("div", { className: "mtx-image-dialog__url-preview", children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: f,
+              alt: "Preview",
+              onError: () => {
+                o(null), l("Gambar tidak dapat dimuat dari URL ini");
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "mtx-image-dialog__alt", children: [
+          /* @__PURE__ */ e("label", { children: "Teks Alternatif (opsional)" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              value: g,
+              onChange: (a) => C(a.target.value),
+              placeholder: "Deskripsi gambar untuk aksesibilitas"
+            }
+          )
+        ] }),
+        P && /* @__PURE__ */ e("div", { className: "mtx-image-dialog__error", children: P })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "mtx-image-dialog__footer", children: [
+        /* @__PURE__ */ e("button", { className: "mtx-image-dialog__btn mtx-image-dialog__btn--cancel", onClick: t, children: "Batal" }),
+        p === "url" && /* @__PURE__ */ e(
+          "button",
+          {
+            className: "mtx-image-dialog__btn mtx-image-dialog__btn--insert",
+            onClick: G,
+            disabled: !r.trim(),
+            children: "Sisipkan"
+          }
+        )
+      ] })
+    ] })
+  ] }) : null;
+}
+export {
+  Z as ImageInsertDialog
+};

package/dist/{InsertTableDialogImpl-Dpo1pByJ.js → InsertTableDialogImpl-65qn7ajF.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-jQUBaVKf.js";
+import { u as y } from "./index-wMMXFiRr.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-C1YeHJFJ.js → LinkDialogImpl-BXNEtesu.js}

@@ -1,87 +1,102 @@
-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-jQUBaVKf.js";
-const P = w.memo(({
-  isOpen: m,
-  currentUrl: i = "",
-  currentText: s = "",
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import D, { useId as _, useRef as j, useState as n, useEffect as F, useCallback as d } from "react";
+import { u as E } from "./index-wMMXFiRr.js";
+const S = D.memo(({
+  isOpen: s,
+  currentUrl: o = "",
+  currentText: m = "",
   currentTitle: h = "",
   currentTarget: u = "_blank",
   onInsert: g,
   onRemove: p,
-  onClose: o
+  onClose: r
 }) => {
-  const N = F(), v = U(null), [x, y] = r(i), [k, C] = r(s), [f, L] = r(h), [b, R] = r(u), [c, n] = r("");
-  j(() => {
-    m && (y(i), C(s), L(h), R(u || "_blank"), n(""));
-  }, [m, i, s, h, u]), E({ isOpen: m, dialogRef: v, onClose: o });
-  const I = d((e) => e.trim() ? /^(https?:\/\/|mailto:|#)[^\s]+$/i.test(e) ? (n(""), !0) : (n("URL harus dimulai dengan http://, https://, mailto:, atau #"), !1) : (n("URL tidak boleh kosong"), !1), []), D = d((e) => {
-    const l = e.trim();
+  const N = _(), v = j(null), [x, y] = n(o), [k, C] = n(m), [f, L] = n(h), [b, R] = n(u), [c, i] = n("");
+  F(() => {
+    s && (y(o), C(m), L(h), R(u || "_blank"), i(""));
+  }, [s, o, m, h, u]), E({ isOpen: s, dialogRef: v, onClose: r });
+  const U = d((t) => {
+    if (!t.trim())
+      return i("URL tidak boleh kosong"), !1;
+    if (t.startsWith("#"))
+      return i(""), !0;
+    try {
+      const l = new URL(t);
+      if (l.protocol !== "http:" && l.protocol !== "https:")
+        return i("URL harus dimulai dengan http:// atau https://"), !1;
+      if (t.includes("javascript:") || t.includes("data:") || t.includes("vbscript:"))
+        return i("URL tidak valid"), !1;
+    } catch {
+      return i("URL tidak valid. Pastikan format benar (contoh: https://example.com)"), !1;
+    }
+    return i(""), !0;
+  }, []), I = d((t) => {
+    const l = t.trim();
     return l.startsWith("http://") || l.startsWith("https://") || l.startsWith("mailto:") || l.startsWith("#") ? l : `https://${l}`;
-  }, []), W = d((e) => {
-    e.preventDefault();
-    const l = D(x);
-    I(l) && g({
+  }, []), W = d((t) => {
+    t.preventDefault();
+    const l = I(x);
+    U(l) && g({
       url: l,
       text: k.trim() || void 0,
       title: f.trim() || void 0,
       target: b || void 0
     });
-  }, [x, k, f, b, I, D, g]), _ = d(() => {
-    p?.(), o();
-  }, [p, o]);
-  return m ? /* @__PURE__ */ t("div", { className: "mtx-modal-overlay", onClick: o, children: /* @__PURE__ */ a(
+  }, [x, k, f, b, U, I, g]), w = d(() => {
+    p?.(), r();
+  }, [p, r]);
+  return s ? /* @__PURE__ */ e("div", { className: "mtx-modal-overlay", onClick: r, children: /* @__PURE__ */ a(
     "div",
     {
       ref: v,
       className: "mtx-modal-dialog mtx-link-dialog",
-      onClick: (e) => e.stopPropagation(),
+      onClick: (t) => t.stopPropagation(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": N,
       tabIndex: -1,
       children: [
         /* @__PURE__ */ a("div", { className: "mtx-modal-header", children: [
-          /* @__PURE__ */ t("h3", { className: "mtx-modal-title", id: N, children: i ? "Edit Link" : "Insert Link" }),
-          /* @__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__ */ e("h3", { className: "mtx-modal-title", id: N, children: o ? "Edit Link" : "Insert Link" }),
+          /* @__PURE__ */ e("button", { className: "mtx-modal-close", onClick: r, title: "Close", "aria-label": "Close dialog", children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M4 4l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
         ] }),
         /* @__PURE__ */ a("form", { onSubmit: W, children: [
           /* @__PURE__ */ a("div", { className: "mtx-modal-body", children: [
             /* @__PURE__ */ a("div", { className: "mtx-form-group", children: [
               /* @__PURE__ */ a("label", { className: "mtx-form-label", htmlFor: "link-url", children: [
                 "URL ",
-                /* @__PURE__ */ t("span", { className: "mtx-required", children: "*" })
+                /* @__PURE__ */ e("span", { className: "mtx-required", children: "*" })
               ] }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ e(
                 "input",
                 {
                   id: "link-url",
                   type: "text",
                   className: `mtx-form-input ${c ? "mtx-input-error" : ""}`,
                   value: x,
-                  onChange: (e) => {
-                    y(e.target.value), c && n("");
+                  onChange: (t) => {
+                    y(t.target.value), c && i("");
                   },
                   placeholder: "https://example.com",
                   autoFocus: !0,
                   autoComplete: "url"
                 }
               ),
-              c && /* @__PURE__ */ t("div", { className: "mtx-form-error", children: c })
+              c && /* @__PURE__ */ e("div", { className: "mtx-form-error", children: c })
             ] }),
             /* @__PURE__ */ a("div", { className: "mtx-form-group", children: [
               /* @__PURE__ */ a("label", { className: "mtx-form-label", htmlFor: "link-text", children: [
                 "Display Text",
-                /* @__PURE__ */ t("span", { className: "mtx-form-hint", children: s ? "(kosongkan untuk tetap menggunakan text saat ini)" : "(opsional, akan menggunakan URL jika kosong)" })
+                /* @__PURE__ */ e("span", { className: "mtx-form-hint", children: m ? "(kosongkan untuk tetap menggunakan text saat ini)" : "(opsional, akan menggunakan URL jika kosong)" })
               ] }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ e(
                 "input",
                 {
                   id: "link-text",
                   type: "text",
                   className: "mtx-form-input",
                   value: k,
-                  onChange: (e) => C(e.target.value),
+                  onChange: (t) => C(t.target.value),
                   placeholder: "Click here",
                   autoComplete: "off"
                 }
@@ -90,38 +105,38 @@ const P = w.memo(({
             /* @__PURE__ */ a("div", { className: "mtx-form-group", children: [
               /* @__PURE__ */ a("label", { className: "mtx-form-label", htmlFor: "link-title", children: [
                 "Title (Tooltip)",
-                /* @__PURE__ */ t("span", { className: "mtx-form-hint", children: "Teks yang muncul saat hover" })
+                /* @__PURE__ */ e("span", { className: "mtx-form-hint", children: "Teks yang muncul saat hover" })
               ] }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ e(
                 "input",
                 {
                   id: "link-title",
                   type: "text",
                   className: "mtx-form-input",
                   value: f,
-                  onChange: (e) => L(e.target.value),
+                  onChange: (t) => L(t.target.value),
                   placeholder: "Visit our website",
                   autoComplete: "off"
                 }
               )
             ] }),
-            /* @__PURE__ */ t("div", { className: "mtx-form-group mtx-form-checkbox", children: /* @__PURE__ */ a("label", { className: "mtx-checkbox-label", children: [
-              /* @__PURE__ */ t(
+            /* @__PURE__ */ e("div", { className: "mtx-form-group mtx-form-checkbox", children: /* @__PURE__ */ a("label", { className: "mtx-checkbox-label", children: [
+              /* @__PURE__ */ e(
                 "input",
                 {
                   type: "checkbox",
                   checked: b === "_blank",
-                  onChange: (e) => R(e.target.checked ? "_blank" : "_self")
+                  onChange: (t) => R(t.target.checked ? "_blank" : "_self")
                 }
               ),
-              /* @__PURE__ */ t("span", { children: "Open in new tab" })
+              /* @__PURE__ */ e("span", { children: "Open in new tab" })
             ] }) })
           ] }),
           /* @__PURE__ */ a("div", { className: "mtx-modal-footer", children: [
-            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: o, children: "Cancel" }),
-            i && p && /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-danger", onClick: _, children: "Remove Link" }),
+            /* @__PURE__ */ e("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: r, children: "Cancel" }),
+            o && p && /* @__PURE__ */ e("button", { type: "button", className: "mtx-btn mtx-btn-danger", onClick: w, children: "Remove Link" }),
             /* @__PURE__ */ a("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: [
-              i ? "Update" : "Insert",
+              o ? "Update" : "Insert",
               " Link"
             ] })
           ] })
@@ -130,7 +145,7 @@ const P = w.memo(({
     }
   ) }) : null;
 });
-P.displayName = "LinkDialogImpl";
+S.displayName = "LinkDialogImpl";
 export {
-  P as LinkDialogImpl
+  S as LinkDialogImpl
 };

package/dist/{TableTemplatesDialogImpl-CMzxe328.js → TableTemplatesDialogImpl-Djt0R6Hh.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-jQUBaVKf.js";
+import { u as h } from "./index-wMMXFiRr.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 },