erl-mathtextx-editor 0.2.0 → 0.2.2

package/dist/{index-DJrUW7HG.js → index-D7JFZLgA.js}

@@ -1,4 +1,4 @@
-import { g as Wt, c as F, a as za } from "./index-D0Rzm7Tg.js";
+import { g as Wt, c as F, a as za } from "./index-BHhpSW1p.js";
 function yf(t, e) {
   for (var n = 0; n < e.length; n++) {
     const r = e[n];

package/dist/{index-C9scFI1r.js → index-DBnDkAIP.js}

@@ -1,4 +1,4 @@
-import { g as jl, c as fe } from "./index-D0Rzm7Tg.js";
+import { g as jl, c as fe } from "./index-BHhpSW1p.js";
 function Xl(e, n) {
   for (var t = 0; t < n.length; t++) {
     const i = n[t];

package/dist/toolbar/toolbar-config.d.ts

@@ -0,0 +1,22 @@
+import { Editor } from '@tiptap/react';
+import { IconKey } from './toolbar-icons';
+import { ToolbarMode } from '../types';
+export interface ToolDef {
+    id: string;
+    icon: IconKey;
+    label: string;
+    action: (editor: Editor) => void;
+    isActive?: (editor: Editor) => boolean;
+    isDisabled?: (editor: Editor) => boolean;
+}
+export interface ToolGroup {
+    id: string;
+    buttons: ToolDef[];
+}
+type ToolActions = Record<string, (editor: Editor) => void>;
+export declare function createToolbarConfig(mode: ToolbarMode, actions: ToolActions): ToolGroup[];
+export declare const fontOptions: {
+    value: string;
+    label: string;
+}[];
+export {};

package/dist/toolbar/toolbar-icons.d.ts

@@ -0,0 +1,53 @@
+export declare const icons: {
+    bold: import("react/jsx-runtime").JSX.Element;
+    italic: import("react/jsx-runtime").JSX.Element;
+    underline: import("react/jsx-runtime").JSX.Element;
+    strike: import("react/jsx-runtime").JSX.Element;
+    h1: import("react/jsx-runtime").JSX.Element;
+    h2: import("react/jsx-runtime").JSX.Element;
+    h3: import("react/jsx-runtime").JSX.Element;
+    h4: import("react/jsx-runtime").JSX.Element;
+    paragraph: import("react/jsx-runtime").JSX.Element;
+    bulletList: import("react/jsx-runtime").JSX.Element;
+    orderedList: import("react/jsx-runtime").JSX.Element;
+    taskList: import("react/jsx-runtime").JSX.Element;
+    superscript: import("react/jsx-runtime").JSX.Element;
+    subscript: import("react/jsx-runtime").JSX.Element;
+    link: import("react/jsx-runtime").JSX.Element;
+    image: import("react/jsx-runtime").JSX.Element;
+    editImage: import("react/jsx-runtime").JSX.Element;
+    table: import("react/jsx-runtime").JSX.Element;
+    rowAbove: import("react/jsx-runtime").JSX.Element;
+    rowBelow: import("react/jsx-runtime").JSX.Element;
+    columnLeft: import("react/jsx-runtime").JSX.Element;
+    columnRight: import("react/jsx-runtime").JSX.Element;
+    cellProperties: import("react/jsx-runtime").JSX.Element;
+    deleteRow: import("react/jsx-runtime").JSX.Element;
+    deleteColumn: import("react/jsx-runtime").JSX.Element;
+    mergeCells: import("react/jsx-runtime").JSX.Element;
+    splitCell: import("react/jsx-runtime").JSX.Element;
+    headerRow: import("react/jsx-runtime").JSX.Element;
+    headerColumn: import("react/jsx-runtime").JSX.Element;
+    fixTable: import("react/jsx-runtime").JSX.Element;
+    graph: import("react/jsx-runtime").JSX.Element;
+    horizontalRule: import("react/jsx-runtime").JSX.Element;
+    blockquote: import("react/jsx-runtime").JSX.Element;
+    codeBlock: import("react/jsx-runtime").JSX.Element;
+    math: import("react/jsx-runtime").JSX.Element;
+    undo: import("react/jsx-runtime").JSX.Element;
+    redo: import("react/jsx-runtime").JSX.Element;
+    chemistry: import("react/jsx-runtime").JSX.Element;
+    download: import("react/jsx-runtime").JSX.Element;
+    alignLeft: import("react/jsx-runtime").JSX.Element;
+    alignCenter: import("react/jsx-runtime").JSX.Element;
+    alignRight: import("react/jsx-runtime").JSX.Element;
+    alignJustify: import("react/jsx-runtime").JSX.Element;
+    indent: import("react/jsx-runtime").JSX.Element;
+    outdent: import("react/jsx-runtime").JSX.Element;
+    highlight: import("react/jsx-runtime").JSX.Element;
+    removeFormat: import("react/jsx-runtime").JSX.Element;
+    importDocx: import("react/jsx-runtime").JSX.Element;
+    tableDropdown: import("react/jsx-runtime").JSX.Element;
+    tableTemplates: import("react/jsx-runtime").JSX.Element;
+};
+export type IconKey = keyof typeof icons;

package/dist/toolbar/useDialogManager.d.ts

@@ -0,0 +1,45 @@
+export type DialogId = 'link' | 'insertTable' | 'cellProperties' | 'tableProperties' | 'tableTemplates' | 'image' | 'imageEdit';
+export interface CellPropertiesData {
+    width?: string;
+    backgroundColor?: string;
+    horizontalAlign?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+}
+export interface TablePropertiesData {
+    align?: 'left' | 'center' | 'right';
+}
+export interface TableTemplate {
+    id: string;
+}
+export interface ImageEditData {
+    width: number | string;
+    height: number | string;
+    align: 'left' | 'center' | 'right' | 'full';
+    alt: string;
+    title: string;
+    maintainAspectRatio: boolean;
+    naturalWidth?: number;
+    naturalHeight?: number;
+}
+interface DialogState {
+    link: boolean;
+    insertTable: boolean;
+    cellProperties: boolean;
+    tableProperties: boolean;
+    tableTemplates: boolean;
+    image: boolean;
+    imageEdit: boolean;
+}
+export declare function useDialogManager(): {
+    open: DialogState;
+    show: (id: DialogId) => boolean;
+    openDialog: (id: DialogId) => void;
+    closeDialog: (id: DialogId) => void;
+    cellData: CellPropertiesData;
+    setCellData: import('react').Dispatch<import('react').SetStateAction<CellPropertiesData>>;
+    tableData: TablePropertiesData;
+    setTableData: import('react').Dispatch<import('react').SetStateAction<TablePropertiesData>>;
+    imageEditData: ImageEditData | null;
+    setImageEditData: import('react').Dispatch<import('react').SetStateAction<ImageEditData | null>>;
+};
+export {};

package/dist/useDraggable-DEoLIB5k.js

@@ -0,0 +1,34 @@
+import { useState as x, useRef as l, useEffect as g, useCallback as D } from "react";
+function X(o) {
+  const [n, c] = x({ x: 0, y: 0 }), r = l({ x: 0, y: 0 }), t = l({ startX: 0, startY: 0, isDragging: !1 });
+  g(() => {
+    r.current = n;
+  }, [n]), g(() => {
+    o || c({ x: 0, y: 0 });
+  }, [o]);
+  const d = D((e) => {
+    const s = e.target;
+    if (s.closest("button") || s.closest("input") || s.closest("select") || s.closest("a"))
+      return;
+    e.preventDefault(), t.current = {
+      isDragging: !0,
+      startX: e.clientX,
+      startY: e.clientY
+    };
+    const m = r.current.x, f = r.current.y, u = (i) => {
+      if (!t.current.isDragging) return;
+      const v = i.clientX - t.current.startX, p = i.clientY - t.current.startY;
+      c({
+        x: m + v,
+        y: f + p
+      });
+    }, a = () => {
+      t.current.isDragging = !1, document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", a);
+    };
+    document.addEventListener("mousemove", u), document.addEventListener("mouseup", a);
+  }, []);
+  return { position: n, handleMouseDown: d };
+}
+export {
+  X as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "erl-mathtextx-editor",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Visual math editor component for solutest.id — CKEditor replacement with zero-LaTeX approach",
   "type": "module",
   "main": "./dist/erl-mathtextx-editor.umd.cjs",

package/dist/TablePropertiesDialogImpl-YBNdKM7k.js

@@ -1,56 +0,0 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import u, { useId as v, useRef as g, useState as x, useEffect as p, useCallback as d } from "react";
-import { u as f } from "./index-D0Rzm7Tg.js";
-const N = u.memo(({
-  isOpen: r,
-  initialData: n = {},
-  onSave: m,
-  onClose: e
-}) => {
-  const c = v(), s = g(null), [i, a] = x(n.align || "left");
-  p(() => {
-    r && a(n.align || "left");
-  }, [n, r]), f({ isOpen: r, dialogRef: s, onClose: e });
-  const h = d((o) => {
-    o.preventDefault(), m({ align: i }), e();
-  }, [i, m, e]), b = d(() => {
-    a("left");
-  }, []);
-  return r ? /* @__PURE__ */ t("div", { className: "mtx-modal-overlay", onClick: e, children: /* @__PURE__ */ l(
-    "div",
-    {
-      ref: s,
-      className: "mtx-modal-dialog mtx-table-properties-dialog",
-      onClick: (o) => o.stopPropagation(),
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": c,
-      tabIndex: -1,
-      children: [
-        /* @__PURE__ */ l("div", { className: "mtx-modal-header", children: [
-          /* @__PURE__ */ t("h3", { className: "mtx-modal-title", id: c, children: "Table Properties" }),
-          /* @__PURE__ */ t("button", { className: "mtx-modal-close", onClick: e, 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: h, children: [
-          /* @__PURE__ */ t("div", { className: "mtx-modal-body", children: /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
-            /* @__PURE__ */ t("label", { className: "mtx-form-label", children: "Table Alignment" }),
-            /* @__PURE__ */ l("div", { className: "mtx-align-buttons", children: [
-              /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${i === "left" ? "is-active" : ""}`, onClick: () => a("left"), title: "Align 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 ${i === "center" ? "is-active" : ""}`, onClick: () => a("center"), title: "Align 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 ${i === "right" ? "is-active" : ""}`, onClick: () => a("right"), title: "Align 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-modal-footer", children: [
-            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: b, children: "Reset" }),
-            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: e, children: "Cancel" }),
-            /* @__PURE__ */ t("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: "Apply" })
-          ] })
-        ] })
-      ]
-    }
-  ) }) : null;
-});
-N.displayName = "TablePropertiesDialogImpl";
-export {
-  N as TablePropertiesDialogImpl
-};

package/dist/TableTemplatesDialogImpl-P54y5q-u.js

@@ -1,64 +0,0 @@
-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-D0Rzm7Tg.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-table-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
-};