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

package/components/extended/ReactSimpleCodeEditor/CodeEditor.js

@@ -0,0 +1,405 @@
+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 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: 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 bt(Z).catch(() => {
+    }).then(() => {
+      e && je((a) => a + 1);
+    }), () => {
+      e = !1;
+    };
+  }, [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 (oe)
+      return Ot({
+        code: u,
+        languageTemplate: E ?? c,
+        languageText: H
+      });
+  }, [
+    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 = f.start.line, a = f.end?.line ?? e;
+    return new Set(
+      Array.from(
+        { length: Math.max(a - e + 1, 1) },
+        (Se, gt) => e + gt
+      )
+    );
+  }, [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: i,
+      languageTemplate: c,
+      languageText: H,
+      prismTheme: fe,
+      syntaxErrorRange: f
+    }),
+    [
+      i,
+      c,
+      fe,
+      H,
+      w,
+      f
+    ]
+  ), st = p(
+    (e) => {
+      D && se(e), B?.(e);
+    },
+    [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 (g || e.target instanceof Element && e.target.closest("textarea"))
+        return;
+      e.currentTarget.querySelector("textarea")?.focus();
+    },
+    [g]
+  );
+  return Ze ? /* @__PURE__ */ r(Mt, { ownerState: o }) : /* @__PURE__ */ r(
+    At,
+    {
+      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 {
+  mn as CodeEditor
+};

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

@@ -0,0 +1,3 @@
+import { CodeEditorStyles } from './types';
+export declare const codeEditorStyles: CodeEditorStyles;
+//# sourceMappingURL=CodeEditor.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}