erl-mathtextx-editor 0.3.1 → 0.3.6

package/CHANGELOG.md

@@ -5,6 +5,114 @@ All notable changes to `erl-mathtextx-editor` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.6] - 2026-07-21
+
+### Added
+
+- **Word-like Math Conversions** — Unicode / LaTeX / Text mode toggles + Convert on the math toolbar
+  - `mathInputMode` / `onMathInputModeChange` props (default `latex`, persisted in `localStorage`)
+  - Paste interpretation is gated by mode (avoids mixing Unicode and LaTeX auto-detect)
+  - **Convert → Ke rumus** / **Ke teks LaTeX** for selection or active math node
+  - `MathInputModeContext` / `useMathInputMode` for NodeViews (math-field paste)
+
+### Fixed
+
+- **Word equation paste as image** — in **LaTeX** mode, when clipboard has OMML/MathML/LaTeX *and* an equation bitmap, prefer math node; strip Word equation preview images after math rewrite. In **Unicode** mode, Word equation snapshots paste as image
+
+### Changed
+
+- **Pecahan & Akar tab** — expanded templates: fraction ops (+/−/×/÷), proportion, rationalization, nth roots, power–root forms, and more preset formulas (ABC, distance, Pythagoras)
+- **Operator & Relasi tab** — added ⊆/⊇, ∄, ∝, ≪/≫, ∤/∣, ∖/∁, ⇒/⇔, gcd/lcm, inequality chains, and more logic/set symbols
+- **Geometri & Trigonometri tab** — added cot/sec/csc, invers trig, sudut ganda & penjumlahan, luas/volume bangun, identitas trig, dan templat geometri (garis, busur, vektor)
+- **Equation Editor modal UX** — equation-first layout (persamaan di atas, templat di bawah), collapsible “Templat & simbol” panel, compact format bar in equation header, floating tooltips
+- **Arabic math text** — Adobe Naskh Medium font (`mt-font-arabic`), RTL direction, shadow-DOM injection for MathLive, KaTeX `\class` → `\htmlClass` in viewer
+- **Equation editor space key** — Space still inserts `\,` in LaTeX; key-repeat and focus fixes prevent stuck typing
+- **Image insert dialog UX** — choose file → preview + alt text → Sisipkan; primary action always visible; clearer empty-state guidance
+
+## [0.3.5] - 2026-07-21
+
+### Added
+
+- **OMML Word paste** — `<m:oMath>` / `<m:oMathPara>` convert to LaTeX math nodes (`ommlToLatex`)
+- **DOCX equation import** — OMML inside `.docx` is preprocessed to math spans before mammoth
+- **Default paste image re-upload** — when `onImageUpload` is set (and `onBeforePasteHTML` is not), pasted images are re-uploaded automatically (`reuploadImagesInHTML`)
+- **Wired config props** — `toolbar`, `mathToolbar`, `templates` (education level), and `outputFormat` (`html` | `json`) now apply at runtime
+- **Public export helpers** — `exportToImage`, `exportToPDF`, `exportToJSON` exported from package root
+
+### Fixed
+
+- **LaTeX control-word gluing** — Word Unicode paste no longer produces `\timesE` / `\partialB`; commands get a terminating space before letters (`\times E`, `\partial B`) so MathLive renders correctly (e.g. Faraday `∇×E=-∂B/∂t`)
+
+### Notes
+
+- OMML coverage is best-effort for common education structures (frac, sqrt, scripts, n-ary, delimiters, matrix)
+- `onBeforePasteHTML` still overrides the default image re-upload when provided
+
+## [0.3.4] - 2026-07-21
+
+### Added
+
+- **Microsoft Word math paste** — Unicode math characters (𝑥, 𝑎, ², ∫, …) and LaTeX from Word convert to `mathInline` / `mathBlock`
+  - `unicodeMathToLatex` / `isUnicodeMathContent` for Mathematical Alphanumeric Symbols, super/subscripts, operators
+  - `resolveMicrosoftMathPaste` priority: `text/latex` → MathML → LaTeX plain → Unicode math
+  - MathML → LaTeX via MathLive (`mathMlToLatex`)
+  - Office HTML path rewrites `<math>` / TeX annotations to `mtx-math-*` spans before OMML tags are stripped
+  - Linear UnicodeMath build-up: `1/2√2` → `\frac{1}{2}\sqrt{2}`, `√(a+b)`, `(a+b)/(c+d)`, ∛/∜
+  - Strips Word invisible operators (U+2061–2064, ZWSP, etc.)
+  - Unicode math text runs inside Office HTML spans also convert to math nodes
+
+### Fixed
+
+- Supplementary-plane math letters detection now uses the Unicode `u` flag (`\u{1D400}`)
+- Whitespace preserved before fractions (`= 1/2√2` → `= \frac{1}{2}\sqrt{2}`)
+- Parentheses no longer collapse to braces outside frac/sqrt (`sin(x)` stays `sin(x)`)
+
+### Notes
+
+- Full OMML (`<m:oMath>`) conversion is not included yet; Word pastes that only expose OMML without Unicode/MathML/LaTeX may still lose structure
+- Complex UnicodeMath linear build-up is best-effort (nested scripts / matrices still limited)
+
+## [0.3.3] - 2026-07-21
+
+### Fixed
+
+- **Stale TipTap handlers** — `onChange`, `onSave`, `onImageUpload`, `onBeforePasteHTML`, drop/paste handlers now use refs so they stay current after re-renders
+- **Reactive `editable` / `content`** — `editable` syncs via `setEditable`; external `content` updates apply without fighting local edits
+- **Paste race** — async paste transforms use a generation counter so only the latest paste is inserted
+- **Image object URL leaks** — revoke on upload failure, tab switch, and unmount
+- **WebP validation** — magic-byte check requires RIFF + WEBP signature
+- **Image URL insert** — only `http:` / `https:` schemes allowed
+- **Drop/paste image validation** — same MIME/size/signature checks as the insert dialog
+- **GraphComponent DOM accumulation** — clears previous plot before re-render
+- **Image drag overlay** — removed on node unmount
+- **Word count without spaces** — correct whitespace stripping
+- **XSS allowlists** — ContentViewer, paste, and serializer share one sanitization config; `getHTML()` is sanitized on output
+
+### Added
+
+- Shared helpers: `isLatexContent`, `validateImageFile`, `isSafeImageUrl`
+- Unit tests for LaTeX detection, upload errors, safe URLs, and word/character counting
+
+## [0.3.2] - 2026-07-07
+
+### Added
+
+- **LaTeX Paste Support** — Paste LaTeX equations from clipboard into the editor
+  - Detects `text/latex` MIME type and plain-text LaTeX patterns (`\frac`, `\sqrt`, `$$`, etc.)
+  - Inserts as `mathInline` node when pasting in regular text
+  - Passes through to MathLive native paste when cursor is inside a math field
+  - `paste` event listener on `<math-field>` prevents ProseMirror from intercepting
+
+- **Upload Error Debug** — Better diagnostics when `onImageUpload` fails
+  - `UploadError` class with structured `debug` payload
+  - Collapsible debug panel in Image Insert dialog and drag-and-drop error toast
+  - `logUploadError()`, `getUploadErrorDebug()`, `formatUploadErrorDebug()` utilities exported from package
+
+### Fixed
+
+- **Image Upload Error Handling** — Drag-and-drop upload no longer fails silently; shows user-visible error with debug details
+- **Image Insert After Upload** — Image is still inserted even when dimension probing fails after a successful upload
+
 ## [0.3.0] - 2026-06-18
 
 ### Added

package/README.md

@@ -510,7 +510,20 @@ Klik kanan → Table Templates untuk memilih tema:
 | `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` |
+| `erl-mathtextx-editor/viewer/styles` | `dist/assets/viewer.css` |
+
+---
+
+## 📤 Publish (maintainers)
+
+```bash
+cd packages/editor
+npm run lint
+npm run pack:check   # dry-run tarball
+npm publish          # runs prepack → test + build
+```
+
+Published version on npm is independent of the monorepo demo (`file:` link). After publish, bump consumers to the new semver.
 
 ---
 

package/dist/{CellPropertiesDialogImpl-5bzEkaTt.js → CellPropertiesDialogImpl-NSTfG9SA.js}

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import V, { useId as B, useRef as M, useCallback as b, useState as d, useEffect as A } from "react";
-import { u as $ } from "./index-Bq8NKSwD.js";
+import { u as $ } from "./index-D1pCAIcb.js";
 import { u as I } from "./useDraggable-DEoLIB5k.js";
 const P = V.memo(({
   isOpen: o,

package/dist/ContentViewer-LqSkiQjT.js

@@ -0,0 +1,161 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as n, useMemo as s, useEffect as m } from "react";
+import { p as i, k as l } from "./viewer-deps-_HnWniSt.js";
+const d = [
+  "p",
+  "br",
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "s",
+  "sub",
+  "sup",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "td",
+  "th",
+  "div",
+  "span",
+  "a",
+  "img",
+  "figure",
+  "figcaption",
+  "pre",
+  "code",
+  "blockquote",
+  "hr",
+  "wbr",
+  "col",
+  "colgroup",
+  "caption",
+  // MathLive / MathML (incoming content + viewer)
+  "math-field",
+  "math",
+  "mi",
+  "mo",
+  "mn",
+  "msup",
+  "msub",
+  "mrow",
+  "mfrac",
+  "msqrt",
+  "mroot",
+  "mover",
+  "munder",
+  "munderover",
+  "mspace",
+  "mstyle",
+  "mtext",
+  "menclose",
+  "mfenced",
+  "merror",
+  "mpadded",
+  "mphantom",
+  "mprescripts",
+  "none"
+], c = [
+  "href",
+  "target",
+  "rel",
+  "title",
+  "src",
+  "alt",
+  "width",
+  "height",
+  "class",
+  "id",
+  "style",
+  "align",
+  "data-align",
+  "data-theme",
+  "data-colwidth",
+  "data-rowheight",
+  "data-latex",
+  "data-type",
+  "data-display",
+  "data-offset-x",
+  "data-offset-y",
+  "data-table-width",
+  "data-indent",
+  "data-mathml",
+  "lang",
+  "dir",
+  "hidden",
+  "value",
+  "virtual-keyboard-mode",
+  "math-virtual-keyboard-policy",
+  "smart-mode",
+  "smart-fence",
+  "smart-superscript",
+  // Table attributes
+  "colspan",
+  "rowspan",
+  "border",
+  "valign",
+  "cellspacing",
+  "cellpadding",
+  "summary",
+  "scope",
+  "abbr",
+  "axis"
+], h = {
+  ALLOWED_TAGS: d,
+  ALLOWED_ATTR: c,
+  ALLOW_DATA_ATTR: !0
+};
+function u(t) {
+  if (t.querySelector(".katex")) return;
+  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",
+      trust: (r) => r.command === "\\htmlClass",
+      macros: {
+        "\\class": "\\htmlClass{#1}{#2}"
+      }
+    });
+  } catch {
+    t.textContent = a ? `$$${e}$$` : `$${e}$`;
+  }
+}
+function y({ content: t, className: e }) {
+  const a = n(null), r = s(
+    () => i.sanitize(t, { ...h }),
+    [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(u);
+  }, [r]), /* @__PURE__ */ o(
+    "div",
+    {
+      ref: a,
+      className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
+      dangerouslySetInnerHTML: { __html: r }
+    }
+  );
+}
+export {
+  y as C,
+  h as S
+};

package/dist/ImageInsertDialog-DDxR_Cah.js

@@ -0,0 +1,331 @@
+import { jsxs as l, Fragment as le, jsx as a } from "react/jsx-runtime";
+import { useId as _, useRef as $, useState as m, useCallback as t, useEffect as ie } from "react";
+import { u as te, v as re, l as ne, i as V, U as oe } from "./index-D1pCAIcb.js";
+function de(u) {
+  return u < 1024 ? `${u} B` : u < 1024 * 1024 ? `${(u / 1024).toFixed(1)} KB` : `${(u / (1024 * 1024)).toFixed(1)} MB`;
+}
+function ue({
+  isOpen: u,
+  onClose: B,
+  onInsert: v,
+  onImageUpload: k
+}) {
+  const x = _(), j = _(), E = _(), G = _(), N = _(), S = $(null), [o, J] = m(k ? "upload" : "url"), [d, D] = m(""), [g, F] = m(""), [q, U] = m(!1), [h, b] = m(!1), [f, p] = m(null), [r, M] = m(null), [P, n] = m(""), [T, w] = m(null), L = $(null), s = $(null), W = t(() => {
+    s.current && (URL.revokeObjectURL(s.current), s.current = null), D(""), F(""), p(null), M(null), n(""), w(null), b(!1), U(!1);
+  }, []), c = t(() => {
+    W(), B();
+  }, [B, W]);
+  te({ isOpen: u, dialogRef: S, onClose: c }), ie(() => () => {
+    s.current && (URL.revokeObjectURL(s.current), s.current = null);
+  }, []);
+  const y = t(() => {
+    s.current && (URL.revokeObjectURL(s.current), s.current = null), p(null), M(null);
+  }, []), A = t((e) => {
+    J(e), n(""), w(null), y(), D("");
+  }, [y]), R = t(
+    async (e) => {
+      const i = await re(e);
+      if (!i.valid) {
+        n(i.error);
+        return;
+      }
+      n(""), w(null), y();
+      const C = URL.createObjectURL(e);
+      if (s.current = C, p(C), M(e), !g.trim()) {
+        const I = e.name.replace(/\.[^.]+$/, "");
+        F(I);
+      }
+    },
+    [g, y]
+  ), O = t(async () => {
+    if (!r) return;
+    if (k) {
+      b(!0);
+      try {
+        const i = await k(r);
+        if (!i)
+          throw new Error("Upload gagal: URL tidak valid");
+        v(i, g.trim() || r.name), c();
+      } catch (i) {
+        const C = i instanceof Error ? i.message : "Upload gagal", I = ne("Image insert upload failed", i);
+        n(`Upload gagal: ${C}`), w(I);
+      } finally {
+        b(!1);
+      }
+      return;
+    }
+    b(!0);
+    const e = new FileReader();
+    e.onload = () => {
+      const i = e.result;
+      v(i, g.trim() || r.name), c();
+    }, e.onerror = () => {
+      n("Gagal membaca file gambar"), b(!1);
+    }, e.readAsDataURL(r);
+  }, [r, k, v, g, c]), H = t(
+    (e) => {
+      const i = e.target.files?.[0];
+      i && R(i), e.target.value = "";
+    },
+    [R]
+  ), Q = t((e) => {
+    e.stopPropagation(), L.current?.click();
+  }, []), X = t((e) => {
+    e.preventDefault(), e.stopPropagation(), U(!0);
+  }, []), Y = t((e) => {
+    e.preventDefault(), e.stopPropagation(), U(!1);
+  }, []), Z = t(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), U(!1);
+      const i = e.dataTransfer.files?.[0];
+      i && R(i);
+    },
+    [R]
+  ), z = t(() => {
+    if (!d.trim()) {
+      n("Masukkan URL gambar");
+      return;
+    }
+    if (!V(d)) {
+      n("URL tidak valid. Gunakan http:// atau https://");
+      return;
+    }
+    v(d.trim(), g.trim() || void 0), c();
+  }, [d, g, v, c]), ee = t(() => {
+    if (!d.trim()) {
+      p(null);
+      return;
+    }
+    if (!V(d)) {
+      n("URL tidak valid. Gunakan http:// atau https://"), p(null);
+      return;
+    }
+    p(d.trim()), n("");
+  }, [d]), K = t(() => {
+    o === "upload" ? O() : z();
+  }, [o, O, z]), ae = o === "upload" ? !!r && !h : !!d.trim() && !h;
+  return u ? /* @__PURE__ */ l(le, { children: [
+    /* @__PURE__ */ a("div", { className: "mtx-dialog-overlay", onClick: c, "aria-hidden": "true" }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: "mtx-image-dialog",
+        ref: S,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": x,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ l("div", { className: "mtx-image-dialog__header", children: [
+            /* @__PURE__ */ a("h3", { id: x, children: "Sisipkan Gambar" }),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: "mtx-image-dialog__close",
+                onClick: c,
+                "aria-label": "Tutup",
+                children: /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M3 3l10 10M13 3L3 13", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l("div", { className: "mtx-image-dialog__tabs", role: "tablist", "aria-label": "Metode sisip gambar", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                id: j,
+                role: "tab",
+                "aria-selected": o === "upload",
+                "aria-controls": G,
+                className: `mtx-image-dialog__tab ${o === "upload" ? "is-active" : ""}`,
+                onClick: () => A("upload"),
+                children: [
+                  /* @__PURE__ */ l("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ a("path", { d: "M8 10V2M8 2L5 5M8 2l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+                    /* @__PURE__ */ a("path", { d: "M2 12v1.5A1.5 1.5 0 003.5 15h9a1.5 1.5 0 001.5-1.5V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+                  ] }),
+                  "Upload File"
+                ]
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                id: E,
+                role: "tab",
+                "aria-selected": o === "url",
+                "aria-controls": N,
+                className: `mtx-image-dialog__tab ${o === "url" ? "is-active" : ""}`,
+                onClick: () => A("url"),
+                children: [
+                  /* @__PURE__ */ l("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ a("path", { d: "M6.5 9.5a3 3 0 004.24 0l2-2a3 3 0 00-4.24-4.24l-.88.88", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                    /* @__PURE__ */ a("path", { d: "M9.5 6.5a3 3 0 00-4.24 0l-2 2a3 3 0 004.24 4.24l.88-.88", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+                  ] }),
+                  "URL"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l("div", { className: "mtx-image-dialog__body", children: [
+            o === "upload" && /* @__PURE__ */ a(
+              "div",
+              {
+                id: G,
+                role: "tabpanel",
+                "aria-labelledby": j,
+                className: "mtx-image-dialog__panel",
+                children: /* @__PURE__ */ l(
+                  "div",
+                  {
+                    className: `mtx-image-dialog__dropzone ${q ? "is-dragging" : ""} ${f ? "has-preview" : ""}`,
+                    onDragOver: X,
+                    onDragLeave: Y,
+                    onDrop: Z,
+                    onClick: () => !h && L.current?.click(),
+                    onKeyDown: (e) => {
+                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), h || L.current?.click());
+                    },
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-label": "Pilih file gambar atau seret dan lepas di sini",
+                    children: [
+                      /* @__PURE__ */ a(
+                        "input",
+                        {
+                          ref: L,
+                          type: "file",
+                          accept: "image/jpeg,image/png,image/gif,image/webp",
+                          onChange: H,
+                          className: "mtx-image-dialog__file-input",
+                          "aria-hidden": "true",
+                          tabIndex: -1
+                        }
+                      ),
+                      h ? /* @__PURE__ */ l("div", { className: "mtx-image-dialog__uploading", children: [
+                        /* @__PURE__ */ a("div", { className: "mtx-image-dialog__spinner", "aria-hidden": "true" }),
+                        /* @__PURE__ */ a("p", { children: "Mengupload gambar..." })
+                      ] }) : f && r ? /* @__PURE__ */ l("div", { className: "mtx-image-dialog__preview-card", children: [
+                        /* @__PURE__ */ a("img", { src: f, alt: "", className: "mtx-image-dialog__preview-img" }),
+                        /* @__PURE__ */ l("div", { className: "mtx-image-dialog__preview-meta", children: [
+                          /* @__PURE__ */ a("span", { className: "mtx-image-dialog__preview-name", title: r.name, children: r.name }),
+                          /* @__PURE__ */ a("span", { className: "mtx-image-dialog__preview-size", children: de(r.size) })
+                        ] }),
+                        /* @__PURE__ */ a(
+                          "button",
+                          {
+                            type: "button",
+                            className: "mtx-image-dialog__change-file",
+                            onClick: Q,
+                            children: "Ganti file"
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ l("div", { className: "mtx-image-dialog__placeholder", children: [
+                        /* @__PURE__ */ a("div", { className: "mtx-image-dialog__placeholder-icon", "aria-hidden": "true", children: /* @__PURE__ */ l("svg", { width: "40", height: "40", viewBox: "0 0 48 48", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                          /* @__PURE__ */ a("rect", { x: "4", y: "8", width: "40", height: "32", rx: "4" }),
+                          /* @__PURE__ */ a("circle", { cx: "16", cy: "20", r: "4" }),
+                          /* @__PURE__ */ a("path", { d: "M4 36l10-10 6 6 8-10 16 14" })
+                        ] }) }),
+                        /* @__PURE__ */ a("p", { className: "mtx-image-dialog__placeholder-title", children: "Klik untuk pilih file atau drag & drop" }),
+                        /* @__PURE__ */ a("p", { className: "mtx-image-dialog__placeholder-hint", children: "JPG, PNG, GIF, WebP — maks. 10 MB" })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            o === "url" && /* @__PURE__ */ l(
+              "div",
+              {
+                id: N,
+                role: "tabpanel",
+                "aria-labelledby": E,
+                className: "mtx-image-dialog__panel",
+                children: [
+                  /* @__PURE__ */ l("div", { className: "mtx-image-dialog__url-form", children: [
+                    /* @__PURE__ */ a("label", { htmlFor: `${N}-url`, children: "URL Gambar" }),
+                    /* @__PURE__ */ a(
+                      "input",
+                      {
+                        id: `${N}-url`,
+                        type: "url",
+                        value: d,
+                        onChange: (e) => {
+                          D(e.target.value), P && n("");
+                        },
+                        placeholder: "https://example.com/gambar.jpg",
+                        onKeyDown: (e) => {
+                          e.key === "Enter" && K();
+                        },
+                        onBlur: ee,
+                        autoFocus: !0
+                      }
+                    )
+                  ] }),
+                  f && o === "url" && /* @__PURE__ */ a("div", { className: "mtx-image-dialog__url-preview", children: /* @__PURE__ */ a(
+                    "img",
+                    {
+                      src: f,
+                      alt: "Pratinjau gambar dari URL",
+                      onError: () => {
+                        p(null), n("Gambar tidak dapat dimuat dari URL ini");
+                      }
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ l("div", { className: "mtx-image-dialog__alt", children: [
+              /* @__PURE__ */ a("label", { htmlFor: `${x}-alt`, children: "Teks alternatif" }),
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  id: `${x}-alt`,
+                  type: "text",
+                  value: g,
+                  onChange: (e) => F(e.target.value),
+                  placeholder: "Deskripsi gambar untuk aksesibilitas (opsional)"
+                }
+              ),
+              /* @__PURE__ */ a("p", { className: "mtx-image-dialog__alt-hint", children: "Membantu pembaca layar memahami isi gambar." })
+            ] }),
+            P && /* @__PURE__ */ l("div", { className: "mtx-image-dialog__error", role: "alert", children: [
+              /* @__PURE__ */ a("div", { children: P }),
+              T && /* @__PURE__ */ a(oe, { debug: T })
+            ] })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "mtx-image-dialog__footer", children: [
+            /* @__PURE__ */ a("p", { className: "mtx-image-dialog__footer-hint", "aria-live": "polite", children: o === "upload" && !r && !h ? "Pilih file terlebih dahulu, lalu klik Sisipkan." : "" }),
+            /* @__PURE__ */ l("div", { className: "mtx-image-dialog__actions", children: [
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  className: "mtx-image-dialog__btn mtx-image-dialog__btn--cancel",
+                  onClick: c,
+                  disabled: h,
+                  children: "Batal"
+                }
+              ),
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  className: "mtx-image-dialog__btn mtx-image-dialog__btn--insert",
+                  onClick: K,
+                  disabled: !ae,
+                  children: h ? "Mengupload..." : "Sisipkan"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) : null;
+}
+export {
+  ue as ImageInsertDialog
+};

package/dist/{InsertTableDialogImpl-B2GUzYNY.js → InsertTableDialogImpl-DrW9QTDd.js}

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import v, { useId as g, useRef as y, useState as c, useEffect as k, useCallback as w } from "react";
-import { u as C } from "./index-Bq8NKSwD.js";
+import { u as C } from "./index-D1pCAIcb.js";
 import { u as M } from "./useDraggable-DEoLIB5k.js";
 const I = v.memo(({ isOpen: i, onInsert: d, onClose: m }) => {
   const u = g(), b = y(null), [l, n] = c(3), [a, s] = c(3), [o, h] = c(!0), { position: p, handleMouseDown: N } = M(i);

package/dist/{LinkDialogImpl-CPjj0CkY.js → LinkDialogImpl-BXjhfEiE.js}

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as e } from "react/jsx-runtime";
 import S, { useId as T, useRef as _, useState as r, useEffect as w, useCallback as c } from "react";
-import { u as F } from "./index-Bq8NKSwD.js";
+import { u as F } from "./index-D1pCAIcb.js";
 const I = S.memo(({
   isOpen: s,
   currentUrl: o = "",

package/dist/MathTextXEditor.d.ts

@@ -5,4 +5,4 @@ import { MathTextXEditorProps } from './types';
  * 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, toolbar: _toolbar, mathToolbar: _mathToolbar, templates: _templates, outputFormat: _outputFormat, className, minHeight, maxHeight, autoFocus, onImageUpload, onBeforePasteHTML, tableStyle, }: MathTextXEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MathTextXEditor({ content, onChange, onSave, editable, placeholder, toolbarMode, toolbar, mathToolbar, templates, outputFormat, mathInputMode: mathInputModeProp, onMathInputModeChange, className, minHeight, maxHeight, autoFocus, onImageUpload, onBeforePasteHTML, tableStyle, }: MathTextXEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/{TablePropertiesDialogImpl-BLbhyfA0.js → TablePropertiesDialogImpl-C2eqgZMa.js}

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import g, { useId as x, useRef as p, useState as f, useEffect as y, useCallback as h } from "react";
-import { u as N } from "./index-Bq8NKSwD.js";
+import { u as N } from "./index-D1pCAIcb.js";
 import { u as k } from "./useDraggable-DEoLIB5k.js";
 const z = g.memo(({
   isOpen: a,