erl-mathtextx-editor 0.1.2

package/dist/InsertTableDialogImpl-CKirXRqE.js

@@ -0,0 +1,100 @@
+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-DYxMVo98.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(() => {
+    i && (n(3), s(3), h(!0));
+  }, [i]), y({ isOpen: i, dialogRef: u, onClose: m });
+  const x = w((r) => {
+    r.preventDefault(), d(l, a, o), m();
+  }, [l, a, o, d, m]);
+  return i ? /* @__PURE__ */ e("div", { className: "mtx-modal-overlay", onClick: m, children: /* @__PURE__ */ t(
+    "div",
+    {
+      ref: u,
+      className: "mtx-modal-dialog mtx-insert-table-dialog",
+      onClick: (r) => r.stopPropagation(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": b,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ t("div", { className: "mtx-modal-header", children: [
+          /* @__PURE__ */ e("h3", { className: "mtx-modal-title", id: b, children: "Insert Table" }),
+          /* @__PURE__ */ e("button", { className: "mtx-modal-close", onClick: m, 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__ */ t("form", { onSubmit: x, children: [
+          /* @__PURE__ */ t("div", { className: "mtx-modal-body", children: [
+            /* @__PURE__ */ t("div", { className: "mtx-form-group", children: [
+              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "table-rows", children: [
+                "Rows",
+                /* @__PURE__ */ e("span", { className: "mtx-form-hint", children: "(1-10)" })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "mtx-number-input-wrapper", children: [
+                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => n(Math.max(1, l - 1)), disabled: l <= 1, children: "−" }),
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    id: "table-rows",
+                    type: "number",
+                    className: "mtx-form-input mtx-number-input",
+                    value: l,
+                    onChange: (r) => n(Math.min(10, Math.max(1, parseInt(r.target.value) || 1))),
+                    min: "1",
+                    max: "10",
+                    autoFocus: !0
+                  }
+                ),
+                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => n(Math.min(10, l + 1)), disabled: l >= 10, children: "+" })
+              ] })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "mtx-form-group", children: [
+              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "table-cols", children: [
+                "Columns",
+                /* @__PURE__ */ e("span", { className: "mtx-form-hint", children: "(1-10)" })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "mtx-number-input-wrapper", children: [
+                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => s(Math.max(1, a - 1)), disabled: a <= 1, children: "−" }),
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    id: "table-cols",
+                    type: "number",
+                    className: "mtx-form-input mtx-number-input",
+                    value: a,
+                    onChange: (r) => s(Math.min(10, Math.max(1, parseInt(r.target.value) || 1))),
+                    min: "1",
+                    max: "10"
+                  }
+                ),
+                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => s(Math.min(10, a + 1)), disabled: a >= 10, children: "+" })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "mtx-form-group mtx-form-checkbox", children: /* @__PURE__ */ t("label", { className: "mtx-checkbox-label", children: [
+              /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: (r) => h(r.target.checked) }),
+              /* @__PURE__ */ e("span", { children: "Include header row" })
+            ] }) }),
+            /* @__PURE__ */ t("div", { className: "mtx-table-preview", children: [
+              /* @__PURE__ */ t("div", { className: "mtx-table-preview-label", children: [
+                "Preview: ",
+                l,
+                "x",
+                a
+              ] }),
+              /* @__PURE__ */ e("div", { className: "mtx-table-preview-grid", style: { display: "grid", gridTemplateColumns: `repeat(${a}, 1fr)`, gridTemplateRows: `repeat(${l}, 1fr)` }, children: Array.from({ length: l * a }).map((r, p) => /* @__PURE__ */ e("div", { className: `mtx-preview-cell${o && p < a ? " mtx-preview-header" : ""}` }, p)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "mtx-modal-footer", children: [
+            /* @__PURE__ */ e("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: m, children: "Cancel" }),
+            /* @__PURE__ */ e("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: "Insert Table" })
+          ] })
+        ] })
+      ]
+    }
+  ) }) : null;
+});
+k.displayName = "InsertTableDialogImpl";
+export {
+  k as InsertTableDialogImpl
+};

package/dist/LinkDialogImpl-BSz0F-xG.js

@@ -0,0 +1,136 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import F, { useId as U, useRef as j, useState as s, useEffect as E, useCallback as h } from "react";
+import { u as P } from "./index-DYxMVo98.js";
+const R = F.memo(({
+  isOpen: m,
+  currentUrl: i = "",
+  currentText: c = "",
+  currentTitle: u = "",
+  currentTarget: p = "_blank",
+  onInsert: g,
+  onRemove: r,
+  onClose: o
+}) => {
+  const N = U(), v = j(null), [x, y] = s(i), [k, C] = s(c), [f, L] = s(u), [b, I] = s(p), [d, n] = s("");
+  E(() => {
+    m && (y(i), C(c), L(u), I(p || "_blank"), n(""));
+  }, [m, i, c, u, p]), P({ isOpen: m, dialogRef: v, onClose: o });
+  const D = h((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), []), W = h((e) => {
+    const l = e.trim();
+    return l.startsWith("http://") || l.startsWith("https://") || l.startsWith("mailto:") || l.startsWith("#") ? l : `https://${l}`;
+  }, []), _ = h((e) => {
+    e.preventDefault();
+    const l = W(x);
+    D(l) && g({
+      url: l,
+      text: k.trim() || void 0,
+      title: f.trim() || void 0,
+      target: b || void 0
+    });
+  }, [x, k, f, b, D, W, g]), w = h(() => {
+    r == null || r(), o();
+  }, [r, o]);
+  return m ? /* @__PURE__ */ t("div", { className: "mtx-modal-overlay", onClick: o, children: /* @__PURE__ */ a(
+    "div",
+    {
+      ref: v,
+      className: "mtx-modal-dialog mtx-link-dialog",
+      onClick: (e) => e.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__ */ a("form", { onSubmit: _, 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__ */ t(
+                "input",
+                {
+                  id: "link-url",
+                  type: "text",
+                  className: `mtx-form-input ${d ? "mtx-input-error" : ""}`,
+                  value: x,
+                  onChange: (e) => {
+                    y(e.target.value), d && n("");
+                  },
+                  placeholder: "https://example.com",
+                  autoFocus: !0,
+                  autoComplete: "url"
+                }
+              ),
+              d && /* @__PURE__ */ t("div", { className: "mtx-form-error", children: d })
+            ] }),
+            /* @__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: c ? "(kosongkan untuk tetap menggunakan text saat ini)" : "(opsional, akan menggunakan URL jika kosong)" })
+              ] }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  id: "link-text",
+                  type: "text",
+                  className: "mtx-form-input",
+                  value: k,
+                  onChange: (e) => C(e.target.value),
+                  placeholder: "Click here",
+                  autoComplete: "off"
+                }
+              )
+            ] }),
+            /* @__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__ */ t(
+                "input",
+                {
+                  id: "link-title",
+                  type: "text",
+                  className: "mtx-form-input",
+                  value: f,
+                  onChange: (e) => L(e.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(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: b === "_blank",
+                  onChange: (e) => I(e.target.checked ? "_blank" : "_self")
+                }
+              ),
+              /* @__PURE__ */ t("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 && r && /* @__PURE__ */ t("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",
+              " Link"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) }) : null;
+});
+R.displayName = "LinkDialogImpl";
+export {
+  R as LinkDialogImpl
+};

package/dist/MathTextXEditor.d.ts

@@ -0,0 +1,8 @@
+import { MathTextXEditorProps } from './types';
+/**
+ * MathTextX Editor — Visual math editor React component.
+ *
+ * Drop-in replacement for CKEditor in solutest.id.
+ * Supports rich text formatting and visual math input without LaTeX.
+ */
+export declare function MathTextXEditor({ content, onChange, onSave, editable, placeholder, toolbarMode, className, minHeight, maxHeight, autoFocus, onImageUpload, }: MathTextXEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/TableTemplatesDialogImpl-DrdqLQLH.js

@@ -0,0 +1,64 @@
+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-DYxMVo98.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 },
+  { id: "dark", name: "Dark", description: "Dark header with white text", headerStyle: "dark", borderStyle: "horizontal", stripeRows: !1 },
+  { id: "blue", name: "Blue Theme", description: "Blue header with striped rows", headerStyle: "blue", borderStyle: "horizontal", stripeRows: !0 },
+  { id: "striped", name: "Striped", description: "Alternating row colors", headerStyle: "light", borderStyle: "none", stripeRows: !0 },
+  { id: "minimal", name: "Minimal", description: "Only horizontal borders", headerStyle: "none", borderStyle: "horizontal", stripeRows: !1 }
+], b = o.memo(({ isOpen: i, onSelect: m, onClose: a }) => {
+  const r = c(), d = n(null), s = p((l) => {
+    m(l), a();
+  }, [m, a]);
+  return h({ isOpen: i, dialogRef: d, onClose: a }), i ? /* @__PURE__ */ e("div", { className: "mtx-modal-overlay", onClick: a, children: /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d,
+      className: "mtx-modal-dialog mtx-table-templates-dialog",
+      onClick: (l) => l.stopPropagation(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": r,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ t("div", { className: "mtx-modal-header", children: [
+          /* @__PURE__ */ e("h3", { className: "mtx-modal-title", id: r, children: "Table Templates" }),
+          /* @__PURE__ */ e("button", { className: "mtx-modal-close", onClick: a, 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__ */ t("div", { className: "mtx-modal-body", children: [
+          /* @__PURE__ */ e("p", { className: "mtx-template-dialog-hint", children: "Pilih template untuk diterapkan ke tabel yang sedang dipilih." }),
+          /* @__PURE__ */ e("div", { className: "mtx-templates-grid", children: x.map((l) => /* @__PURE__ */ t("button", { type: "button", className: "mtx-template-card", onClick: () => s(l), children: [
+            /* @__PURE__ */ e("div", { className: "mtx-template-preview", children: /* @__PURE__ */ t("div", { className: `mtx-template-table mtx-template-${l.id}`, children: [
+              /* @__PURE__ */ t("div", { className: "mtx-template-row", children: [
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell mtx-template-header" }),
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell mtx-template-header" }),
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell mtx-template-header" })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "mtx-template-row", children: [
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell" })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "mtx-template-row", children: [
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
+                /* @__PURE__ */ e("div", { className: "mtx-template-cell" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ t("div", { className: "mtx-template-info", children: [
+              /* @__PURE__ */ e("h4", { className: "mtx-template-name", children: l.name }),
+              /* @__PURE__ */ e("p", { className: "mtx-template-description", children: l.description })
+            ] })
+          ] }, l.id)) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "mtx-modal-footer", children: /* @__PURE__ */ e("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: a, children: "Cancel" }) })
+      ]
+    }
+  ) }) : null;
+});
+b.displayName = "TableTemplatesDialogImpl";
+export {
+  b as TableTemplatesDialogImpl
+};