@m4l/components 9.24.0-beta-feature-731-m4l-components-code-editor.8 → 9.24.1-beta-feature-731-code-editor.0

package/components/extended/ReactSimpleCodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,SAAS,CAAC;AAgBjB;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAuXhD"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,SAAS,CAAC;AAqFjB;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAqiBhD"}

package/components/extended/ReactSimpleCodeEditor/CodeEditor.js

@@ -1,263 +1,405 @@
-import { jsx as a, jsxs as D } from "@emotion/react/jsx-runtime";
-import { useModuleDictionary as Ae, useModuleSkeleton as Me } from "@m4l/core";
-import { useThemeMode as Ve } from "@m4l/graphics";
-import _ from "clsx";
-import { useId as Pe, useState as J, useRef as ke, useMemo as E, useEffect as Q, useCallback as z } from "react";
-import { getPropDataTestId as x, getNameDataTestId as ze } from "../../../test/getNameDataTestId.js";
-import { CODE_EDITOR_DEFAULT_MAX_LINES as Be, CODE_EDITOR_DEFAULT_MIN_LINES as He, CODE_EDITOR_DEFAULT_LANGUAGE as we, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as Ge, CODE_EDITOR_CLASSES as C, CODE_EDITOR_KEY_COMPONENT as p, CODE_EDITOR_READ_ONLY_LABEL as Ue, CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID as Ye } from "./constants.js";
-import { CODE_EDITOR_DICTIONARY as W } from "./dictionary.js";
-import { resolveCodeEditorLanguageIcon as Fe } from "./helpers/languageIcon.js";
-import { ensureCodeEditorRuntimeDependencies as je, getCodeEditorLineCount as qe, createCodeEditorPrismTheme as Ke, resolveCodeEditorLanguageTemplate as Xe, validateCodeEditorSyntax as Ze, highlightCode as $e } from "./helpers/highlighting.js";
-import { SkeletonStyled as Je, RootStyled as Qe, HeaderStyled as We, LanguageChipStyled as et, LanguageChipIconStyled as tt, HeaderBadgesStyled as at, ReadOnlyChipStyled as nt, BodyStyled as rt, LineNumbersStyled as ot, LineNumberStyled as lt, EditorScrollerStyled as it, PlaceholderStyled as st, EditorStyled as dt } from "./slots/CodeEditorSlots.js";
-import { CodeEditorSlots as f } from "./slots/CodeEditorEnum.js";
-function ct(L, y) {
-  return L.length !== y.length ? !1 : L.every((S, o) => S === y[o]);
+import { jsx as r, jsxs as M } from "@emotion/react/jsx-runtime";
+import { useHostTools as mt, useModuleDictionary as Et, useModuleSkeleton as ft, EmitEvents as Re } from "@m4l/core";
+import A from "clsx";
+import { useId as Ct, useState as C, useRef as _e, useMemo as d, useEffect as y, useLayoutEffect as yt, useCallback as p } from "react";
+import { useTheme as pt } from "@mui/material/styles";
+import { getPropDataTestId as I, getNameDataTestId as St } from "../../../test/getNameDataTestId.js";
+import { CODE_EDITOR_DEFAULT_MAX_LINES as Rt, CODE_EDITOR_DEFAULT_MIN_LINES as _t, CODE_EDITOR_RESIZE_HANDLE_SIZE_PX as W, CODE_EDITOR_DEFAULT_LANGUAGE as Tt, CODE_EDITOR_READ_ONLY_LABEL as Dt, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as Ht, CODE_EDITOR_CLASSES as L, CODE_EDITOR_KEY_COMPONENT as S, CODE_EDITOR_PADDING_PX as Te, CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID as vt } from "./constants.js";
+import { CODE_EDITOR_DICTIONARY as De } from "./dictionary.js";
+import { resolveCodeEditorLanguageIcon as It } from "./helpers/languageIcon.js";
+import { getCodeEditorLineCount as Lt, ensureCodeEditorRuntimeDependencies as bt, createCodeEditorPrismTheme as xt, resolveCodeEditorLanguageTemplate as zt, validateCodeEditorSyntax as Ot, highlightCode as Nt } from "./helpers/highlighting.js";
+import { SkeletonStyled as Mt, BodyResizeShellStyled as At, RootStyled as Bt, HeaderStyled as Vt, LanguageChipStyled as Pt, LanguageChipIconStyled as kt, HeaderBadgesStyled as Gt, ReadOnlyChipStyled as wt, BodyStyled as Ut, LineNumbersStyled as Ft, LineNumberStyled as Yt, EditorScrollerStyled as Xt, PlaceholderStyled as Zt, EditorStyled as jt } from "./slots/CodeEditorSlots.js";
+import { CodeEditorSlots as R } from "./slots/CodeEditorEnum.js";
+import { buildEnableResizing as qt, buildDefaultResizeHandleClasses as $t, buildDefaultResizeHandleStyles as Kt } from "../../DragResizeWindowRND/helpers/resizeHandles.js";
+function Q(t) {
+  return t === "dark" ? "dark" : "light";
 }
-function Dt(L) {
+function Jt(t, n) {
+  return t.length !== n.length ? !1 : t.every((i, s) => i === n[s]);
+}
+function Ie(t, n, i) {
+  const s = i ? Te : Te * 2;
+  return t * n + s;
+}
+function Qt(t, n, i) {
+  return Ie(t, n, i);
+}
+function He(t, n) {
+  return t + n;
+}
+function ve(t, n) {
+  return t + (n ? W : 0);
+}
+function Wt(t, n, i) {
+  return Math.max(
+    Math.round(t - n - W),
+    i
+  );
+}
+function mn(t) {
   const {
-    className: y,
-    customLanguages: S,
-    dataTestId: o,
-    defaultValue: ee,
-    disabled: I = !1,
-    editorClassName: te,
-    error: ae = !1,
-    highlightTheme: B,
-    id: ne,
-    insertSpaces: re,
-    languageIcon: oe,
-    languageLabel: le,
-    languageTemplate: n,
-    languageText: ie,
-    maxLines: se = Be,
-    minLines: O = He,
-    onBlur: de,
-    onChange: v,
-    placeholder: R,
-    preClassName: ce,
-    readOnly: d = !1,
-    readOnlyLabel: ue,
-    runtimeDependencies: c,
-    showLineNumbers: H = !1,
-    showPlaceholder: w = !0,
-    size: G = "medium",
-    syntaxValidator: N,
-    skeleton: me = !1,
-    textareaClassName: ge,
-    validateSyntax: U = !1,
-    value: u,
-    variant: he = "outlined",
-    ...T
-  } = L, Ee = Pe(), Ce = ne || Ee, { getLabel: pe } = Ae(), fe = Me() || me, b = Ve(), m = v === void 0, [A, Le] = J(0), M = ke([]), [ye, Y] = J(
-    u ?? ee ?? ""
-  ), F = E(() => c ? Array.isArray(c) ? c : [c] : [], [c]);
-  ct(
-    M.current,
-    F
-  ) || (M.current = F);
-  const V = M.current;
-  Q(() => {
-    m && u !== void 0 && Y(u);
-  }, [m, u]), Q(() => {
-    if (!V.length)
+    className: n,
+    customLanguages: i,
+    dataTestId: s,
+    defaultValue: Le,
+    disabled: g = !1,
+    editorClassName: be,
+    error: xe = !1,
+    highlightTheme: ee,
+    id: ze,
+    insertSpaces: Oe,
+    languageIcon: Ne,
+    languageLabel: Me,
+    languageTemplate: c,
+    languageText: Ae,
+    maxLines: Be = Rt,
+    minLines: b = _t,
+    onBlur: Ve,
+    onChange: B,
+    placeholder: V,
+    preClassName: Pe,
+    readOnly: m = !1,
+    readOnlyLabel: ke,
+    resizable: l = !0,
+    runtimeDependencies: _,
+    showLineNumbers: te = !1,
+    showPlaceholder: ne = !0,
+    size: P = "medium",
+    syntaxValidator: k,
+    skeleton: Ge = !1,
+    textareaClassName: we,
+    validateSyntax: oe = !1,
+    value: T,
+    variant: Ue = "outlined",
+    ...x
+  } = t, Fe = Ct(), Ye = ze || Fe, G = pt(), { events_add_listener: ae, events_remove_listener: re } = mt(), { getLabel: Xe } = Et(), Ze = ft() || Ge, D = B === void 0, [w, je] = C(0), U = _e([]), ie = _e(null), [F, le] = C(
+    () => Q(G.palette.mode)
+  ), [qe, se] = C(
+    T ?? Le ?? ""
+  ), [z, de] = C(0), [Y, O] = C(!1), [X, ce] = C(null), ue = d(() => _ ? Array.isArray(_) ? _ : [_] : [], [_]);
+  Jt(
+    U.current,
+    ue
+  ) || (U.current = ue);
+  const Z = U.current, u = D ? qe : T ?? "", $e = ne && u.length === 0 && !!V, j = Ht[P], he = Lt(u), ge = Math.max(he, b), q = Math.max(b, Be), me = Math.min(ge, q), $ = he >= q, Ee = Ie(
+    me,
+    j,
+    $
+  ), N = Qt(
+    b,
+    j,
+    $
+  ), Ke = l ? Math.max(X ?? Ee, N) : Ee, Je = d(
+    () => qt(l, ["s"]),
+    [l]
+  ), Qe = d(
+    () => $t(),
+    []
+  ), We = d(() => {
+    const e = Kt();
+    return {
+      ...e,
+      bottom: {
+        ...e.bottom,
+        bottom: "0px",
+        height: `${W}px`,
+        left: "0px",
+        right: "0px"
+      }
+    };
+  }, []), et = d(() => ({
+    display: "block",
+    position: "relative"
+  }), []);
+  y(() => {
+    D && T !== void 0 && se(T);
+  }, [D, T]), y(() => {
+    le(Q(G.palette.mode));
+  }, [G.palette.mode]), y(() => {
+    const e = (a) => {
+      le(Q(a));
+    };
+    return ae(
+      Re.EMMIT_EVENT_HOST_THEME_CHANGE,
+      e
+    ), () => {
+      re(
+        Re.EMMIT_EVENT_HOST_THEME_CHANGE,
+        e
+      );
+    };
+  }, [ae, re]), y(() => {
+    if (!Z.length)
       return;
     let e = !0;
-    return je(V).catch(() => {
+    return bt(Z).catch(() => {
     }).then(() => {
-      e && Le((s) => s + 1);
+      e && je((a) => a + 1);
     }), () => {
       e = !1;
     };
-  }, [V]);
-  const r = m ? ye : u ?? "", Se = w && r.length === 0 && !!R, Ie = Ge[G], j = qe(r), q = Math.max(j, O), P = Math.max(O, se), Te = Math.min(q, P), De = j >= P, K = E(
-    () => B ?? Ke(b),
-    [b, B]
-  ), l = E(
-    () => Xe(n),
-    [n, A]
-  ), g = ie ?? l?.languageText ?? we, X = le ?? l?.languageLabel, Z = !!X, _e = Fe(
-    oe ?? l?.languageIcon
-  ), k = d ? pe(W.readOnly) : void 0, xe = ue ?? (k && k !== W.readOnly ? k : Ue), h = E(() => {
-    if (N)
-      return N({
-        code: r,
-        languageTemplate: l ?? n,
-        languageText: g
+  }, [Z]), y(() => {
+    !l && X !== null && ce(null);
+  }, [X, l]), y(() => {
+    (!l || g) && Y && O(!1);
+  }, [g, Y, l]);
+  const fe = d(
+    () => ee ?? xt(F),
+    [F, ee]
+  ), E = d(
+    () => zt(c),
+    [c, w]
+  ), H = Ae ?? E?.languageText ?? Tt, K = Me ?? E?.languageLabel, Ce = !!K, tt = It(
+    Ne ?? E?.languageIcon
+  ), J = m ? Xe(De.readOnly) : void 0, ye = ke ?? (J && J !== De.readOnly ? J : Dt), h = Ce || m;
+  yt(() => {
+    if (!h) {
+      de(0);
+      return;
+    }
+    const e = Math.round(ie.current?.offsetHeight ?? 0);
+    de((a) => a === e ? a : e);
+  }, [h, K, m, ye, P]);
+  const nt = He(
+    Ke,
+    h ? z : 0
+  ), ot = He(
+    N,
+    h ? z : 0
+  ), at = ve(
+    nt,
+    l
+  ), rt = ve(
+    ot,
+    l
+  ), v = d(() => {
+    if (k)
+      return k({
+        code: u,
+        languageTemplate: E ?? c,
+        languageText: H
       });
-    if (U)
-      return Ze({
-        code: r,
-        languageTemplate: l ?? n,
-        languageText: g
+    if (oe)
+      return Ot({
+        code: u,
+        languageTemplate: E ?? c,
+        languageText: H
       });
   }, [
-    n,
-    l,
-    g,
-    r,
-    A,
-    N,
-    U
-  ]), $ = ae || !!h && !h.isValid, i = h && !h.isValid ? h.errorRange : void 0, Oe = E(() => {
-    if (!i)
+    c,
+    E,
+    H,
+    u,
+    w,
+    k,
+    oe
+  ]), pe = xe || !!v && !v.isValid, f = v && !v.isValid ? v.errorRange : void 0, it = d(() => {
+    if (!f)
       return /* @__PURE__ */ new Set();
-    const e = i.start.line, s = i.end?.line ?? e;
+    const e = f.start.line, a = f.end?.line ?? e;
     return new Set(
       Array.from(
-        { length: Math.max(s - e + 1, 1) },
-        (ut, be) => e + be
+        { length: Math.max(a - e + 1, 1) },
+        (Se, gt) => e + gt
       )
     );
-  }, [i]), t = {
-    colorMode: b,
-    disabled: I,
-    error: $,
-    isLineCapped: De,
-    isEmpty: r.length === 0,
-    isPlaceholderVisible: Se,
-    lineHeight: Ie,
-    maxLines: P,
-    minLines: O,
-    readOnly: d,
-    showLineNumbers: H,
-    size: G,
-    variant: he,
-    visibleLineCount: Te
-  }, ve = z(
-    (e) => $e({
+  }, [f]), o = {
+    colorMode: F,
+    disabled: g,
+    error: pe,
+    isLineCapped: $,
+    isEmpty: u.length === 0,
+    isPlaceholderVisible: $e,
+    isResizeHandleActive: Y,
+    lineHeight: j,
+    maxLines: q,
+    minLines: b,
+    readOnly: m,
+    resizable: l,
+    showLineNumbers: te,
+    size: P,
+    variant: Ue,
+    visibleLineCount: me
+  }, lt = p(
+    (e) => Nt({
       code: e,
-      customLanguages: S,
-      languageTemplate: n,
-      languageText: g,
-      prismTheme: K,
-      syntaxErrorRange: i
+      customLanguages: i,
+      languageTemplate: c,
+      languageText: H,
+      prismTheme: fe,
+      syntaxErrorRange: f
     }),
     [
-      S,
-      n,
-      K,
-      g,
-      A,
-      i
+      i,
+      c,
+      fe,
+      H,
+      w,
+      f
     ]
-  ), Re = z(
+  ), st = p(
     (e) => {
-      m && Y(e), v?.(e);
+      D && se(e), B?.(e);
     },
-    [v, m]
-  ), Ne = z(
+    [B, D]
+  ), dt = p(() => {
+    O(!0);
+  }, []), ct = p(() => {
+    O(!0);
+  }, []), ut = p(
+    (e, a, Se) => {
+      O(!1), ce(
+        Wt(
+          Se.offsetHeight,
+          h ? z : 0,
+          N
+        )
+      );
+    },
+    [h, z, N]
+  ), ht = p(
     (e) => {
-      if (I || e.target instanceof Element && e.target.closest("textarea"))
+      if (g || e.target instanceof Element && e.target.closest("textarea"))
         return;
       e.currentTarget.querySelector("textarea")?.focus();
     },
-    [I]
+    [g]
   );
-  return fe ? /* @__PURE__ */ a(Je, { ownerState: t }) : /* @__PURE__ */ D(
-    Qe,
+  return Ze ? /* @__PURE__ */ r(Mt, { ownerState: o }) : /* @__PURE__ */ r(
+    At,
     {
-      ownerState: t,
-      "aria-disabled": t.disabled || void 0,
-      className: _(C.root, y),
-      ...x(p, f.root, o),
-      children: [
-        Z || d ? /* @__PURE__ */ D(We, { ownerState: t, className: C.header, children: [
-          Z ? /* @__PURE__ */ a(
-            et,
-            {
-              label: X,
-              size: "small",
-              variant: "outlined",
-              color: "default",
-              startIcon: /* @__PURE__ */ a(
-                tt,
-                {
-                  ...x(
-                    p,
-                    f.languageChipIcon,
-                    Ye
-                  ),
-                  children: /* @__PURE__ */ a(_e, { fontSize: "small" })
-                }
-              )
-            }
-          ) : null,
-          /* @__PURE__ */ a(at, { ownerState: t, children: d ? /* @__PURE__ */ a(
-            nt,
-            {
-              label: xe,
-              size: "small"
-            }
-          ) : null })
-        ] }) : null,
-        /* @__PURE__ */ D(
-          rt,
-          {
-            ownerState: t,
-            onClick: Ne,
-            ...x(p, f.body, o),
-            children: [
-              H ? /* @__PURE__ */ a(ot, { ownerState: t, "aria-hidden": "true", children: Array.from({ length: q }, (e, s) => s + 1).map(
-                (e) => /* @__PURE__ */ a(
-                  lt,
-                  {
-                    ownerState: t,
-                    "data-code-editor-error-line": Oe.has(e) || void 0,
-                    children: e
-                  },
-                  `code-editor-line-${e}`
-                )
-              ) }) : null,
-              /* @__PURE__ */ D(it, { ownerState: t, children: [
-                w && t.isEmpty && R ? /* @__PURE__ */ a(
-                  st,
-                  {
-                    ownerState: t,
-                    ...x(
-                      p,
-                      f.placeholder,
-                      o
-                    ),
-                    children: R
-                  }
-                ) : null,
-                /* @__PURE__ */ a(
-                  dt,
-                  {
-                    ...T,
-                    ownerState: t,
-                    "aria-label": T["aria-label"] ?? "Code editor",
-                    "aria-invalid": T["aria-invalid"] ?? ($ || void 0),
-                    className: _(C.editor, te),
-                    "data-testid": ze(
-                      p,
-                      f.textarea,
-                      o
-                    ),
-                    disabled: I,
-                    highlight: ve,
-                    insertSpaces: re,
-                    onBlur: de,
-                    onValueChange: Re,
-                    preClassName: _(C.pre, ce),
-                    readOnly: d,
-                    tabSize: T.tabSize,
-                    textareaClassName: _(
-                      C.textarea,
-                      ge
-                    ),
-                    textareaId: Ce,
-                    value: r
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
+      ownerState: o,
+      disableDragging: !0,
+      dragAxis: "none",
+      enableResizing: Je,
+      minHeight: rt,
+      onResize: ct,
+      onResizeStart: dt,
+      onResizeStop: ut,
+      resizeHandleClasses: Qe,
+      resizeHandleStyles: We,
+      size: { width: "100%", height: at },
+      style: et,
+      ...I(
+        S,
+        R.bodyResizeShell,
+        s
+      ),
+      children: /* @__PURE__ */ M(
+        Bt,
+        {
+          ownerState: o,
+          "aria-disabled": o.disabled || void 0,
+          className: A(L.root, n),
+          ...I(S, R.root, s),
+          children: [
+            h ? /* @__PURE__ */ M(
+              Vt,
+              {
+                ref: ie,
+                ownerState: o,
+                className: L.header,
+                children: [
+                  Ce ? /* @__PURE__ */ r(
+                    Pt,
+                    {
+                      label: K,
+                      size: "small",
+                      variant: "outlined",
+                      color: "default",
+                      startIcon: /* @__PURE__ */ r(
+                        kt,
+                        {
+                          ...I(
+                            S,
+                            R.languageChipIcon,
+                            vt
+                          ),
+                          children: /* @__PURE__ */ r(tt, { fontSize: "small" })
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ r(Gt, { ownerState: o, children: m ? /* @__PURE__ */ r(
+                    wt,
+                    {
+                      label: ye,
+                      size: "small"
+                    }
+                  ) : null })
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ M(
+              Ut,
+              {
+                ownerState: o,
+                onClick: ht,
+                ...I(S, R.body, s),
+                children: [
+                  te ? /* @__PURE__ */ r(Ft, { ownerState: o, "aria-hidden": "true", children: Array.from({ length: ge }, (e, a) => a + 1).map(
+                    (e) => /* @__PURE__ */ r(
+                      Yt,
+                      {
+                        ownerState: o,
+                        "data-code-editor-error-line": it.has(e) || void 0,
+                        children: e
+                      },
+                      `code-editor-line-${e}`
+                    )
+                  ) }) : null,
+                  /* @__PURE__ */ M(Xt, { ownerState: o, children: [
+                    ne && o.isEmpty && V ? /* @__PURE__ */ r(
+                      Zt,
+                      {
+                        ownerState: o,
+                        ...I(
+                          S,
+                          R.placeholder,
+                          s
+                        ),
+                        children: V
+                      }
+                    ) : null,
+                    /* @__PURE__ */ r(
+                      jt,
+                      {
+                        ...x,
+                        ownerState: o,
+                        "aria-label": x["aria-label"] ?? "Code editor",
+                        "aria-invalid": x["aria-invalid"] ?? (pe || void 0),
+                        className: A(L.editor, be),
+                        "data-testid": St(
+                          S,
+                          R.textarea,
+                          s
+                        ),
+                        disabled: g,
+                        highlight: lt,
+                        insertSpaces: Oe,
+                        onBlur: Ve,
+                        onValueChange: st,
+                        preClassName: A(L.pre, Pe),
+                        readOnly: m,
+                        tabSize: x.tabSize,
+                        textareaClassName: A(
+                          L.textarea,
+                          we
+                        ),
+                        textareaId: Ye,
+                        value: u
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
 export {
-  Dt as CodeEditor
+  mn as CodeEditor
 };

package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,eAAO,MAAM,gBAAgB,EAAE,gBAyV9B,CAAC"}
+{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,eAAO,MAAM,gBAAgB,EAAE,gBA0Z9B,CAAC"}