@m4l/components 9.24.0-beta-feature-731-m4l-components-code-editor.1 → 9.24.0-beta-feature-731-m4l-components-code-editor.3

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,oDA8VhD"}
+{"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,oDAsXhD"}

package/components/extended/ReactSimpleCodeEditor/CodeEditor.js

@@ -1,243 +1,258 @@
-import { jsx as a, jsxs as S } from "@emotion/react/jsx-runtime";
-import { useModuleDictionary as be, useModuleSkeleton as Ae } from "@m4l/core";
-import y from "clsx";
-import { useId as Me, useState as $, useRef as Ve, useMemo as E, useEffect as J, useCallback as Q } from "react";
-import { useTheme as Pe } from "@mui/material/styles";
-import { getPropDataTestId as V, getNameDataTestId as ze } from "../../../test/getNameDataTestId.js";
-import { CODE_EDITOR_DEFAULT_MAX_LINES as He, CODE_EDITOR_DEFAULT_MIN_LINES as ke, CODE_EDITOR_DEFAULT_LANGUAGE as we, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as Be, CODE_EDITOR_CLASSES as p, CODE_EDITOR_KEY_COMPONENT as D, CODE_EDITOR_READ_ONLY_LABEL as Ge, CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID as Ue } from "./constants.js";
+import { jsx as a, jsxs as D } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as Ae, useModuleSkeleton as Me } from "@m4l/core";
+import _ from "clsx";
+import { useId as Ve, useState as J, useRef as Pe, useMemo as E, useEffect as Q, useCallback as k } from "react";
+import { useTheme as ke } from "@mui/material/styles";
+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 Ye } from "./helpers/languageIcon.js";
-import { ensureCodeEditorRuntimeDependencies as Fe, getCodeEditorLineCount as je, createCodeEditorPrismTheme as qe, resolveCodeEditorLanguageTemplate as Ke, validateCodeEditorSyntax as Xe, highlightCode as Ze } from "./helpers/highlighting.js";
-import { SkeletonStyled as $e, RootStyled as Je, HeaderStyled as Qe, LanguageChipStyled as We, LanguageChipIconStyled as et, HeaderBadgesStyled as tt, ReadOnlyChipStyled as at, BodyStyled as nt, LineNumbersStyled as rt, LineNumberStyled as lt, EditorScrollerStyled as ot, PlaceholderStyled as it, EditorStyled as st } from "./slots/CodeEditorSlots.js";
-import { CodeEditorSlots as T } from "./slots/CodeEditorEnum.js";
-function dt(C, L) {
-  return C.length !== L.length ? !1 : C.every((f, i) => f === L[i]);
+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]);
 }
-function Dt(C) {
+function Dt(L) {
   const {
-    className: L,
-    customLanguages: f,
-    dataTestId: i,
+    className: y,
+    customLanguages: S,
+    dataTestId: o,
     defaultValue: ee,
-    disabled: P = !1,
+    disabled: I = !1,
     editorClassName: te,
     error: ae = !1,
     highlightTheme: z,
     id: ne,
     insertSpaces: re,
-    languageIcon: le,
-    languageLabel: oe,
+    languageIcon: oe,
+    languageLabel: le,
     languageTemplate: n,
     languageText: ie,
-    maxLines: se = He,
-    minLines: _ = ke,
+    maxLines: se = Be,
+    minLines: O = He,
     onBlur: de,
-    onChange: O,
-    placeholder: v,
-    preClassName: ue,
-    readOnly: s = !1,
-    readOnlyLabel: ce,
-    runtimeDependencies: d,
-    showLineNumbers: H = !1,
-    showPlaceholder: k = !0,
+    onChange: v,
+    placeholder: R,
+    preClassName: ce,
+    readOnly: d = !1,
+    readOnlyLabel: ue,
+    runtimeDependencies: c,
+    showLineNumbers: B = !1,
+    showPlaceholder: H = !0,
     size: w = "medium",
-    syntaxValidator: x,
+    syntaxValidator: N,
     skeleton: me = !1,
     textareaClassName: ge,
-    validateSyntax: B = !1,
+    validateSyntax: G = !1,
     value: u,
     variant: he = "outlined",
-    ...I
-  } = C, Ee = Me(), pe = ne || Ee, G = Pe(), { getLabel: Ce } = be(), Le = Ae() || me, c = O === void 0, [R, fe] = $(0), N = Ve([]), [Ie, U] = $(
+    ...T
+  } = L, Ee = Ve(), Ce = ne || Ee, U = ke(), { getLabel: pe } = Ae(), fe = Me() || me, m = v === void 0, [b, Le] = J(0), A = Pe([]), [ye, Y] = J(
     u ?? ee ?? ""
-  ), Y = E(() => d ? Array.isArray(d) ? d : [d] : [], [d]);
-  dt(
-    N.current,
-    Y
-  ) || (N.current = Y);
-  const b = N.current;
-  J(() => {
-    c && u !== void 0 && U(u);
-  }, [c, u]), J(() => {
-    if (!b.length)
+  ), F = E(() => c ? Array.isArray(c) ? c : [c] : [], [c]);
+  ct(
+    A.current,
+    F
+  ) || (A.current = F);
+  const M = A.current;
+  Q(() => {
+    m && u !== void 0 && Y(u);
+  }, [m, u]), Q(() => {
+    if (!M.length)
       return;
     let e = !0;
-    return Fe(b).catch(() => {
+    return je(M).catch(() => {
     }).then(() => {
-      e && fe((h) => h + 1);
+      e && Le((s) => s + 1);
     }), () => {
       e = !1;
     };
-  }, [b]);
-  const r = c ? Ie : u ?? "", Se = k && r.length === 0 && !!v, ye = Be[w], F = je(r), j = Math.max(F, _), A = Math.max(_, se), De = Math.min(j, A), Te = F >= A, q = E(
-    () => z ?? qe(G),
-    [z, G]
+  }, [M]);
+  const r = m ? ye : u ?? "", Se = H && r.length === 0 && !!R, Ie = Ge[w], j = qe(r), q = Math.max(j, O), V = Math.max(O, se), Te = Math.min(q, V), De = j >= V, K = E(
+    () => z ?? Ke(U),
+    [z, U]
   ), l = E(
-    () => Ke(n),
-    [n, R]
-  ), m = ie ?? l?.languageText ?? we, K = oe ?? l?.languageLabel, X = !!K, _e = Ye(
-    le ?? l?.languageIcon
-  ), M = s ? Ce(W.readOnly) : void 0, Oe = ce ?? (M && M !== W.readOnly ? M : Ge), g = E(() => {
-    if (x)
-      return x({
+    () => Xe(n),
+    [n, b]
+  ), g = ie ?? l?.languageText ?? we, X = le ?? l?.languageLabel, Z = !!X, _e = Fe(
+    oe ?? l?.languageIcon
+  ), P = d ? pe(W.readOnly) : void 0, xe = ue ?? (P && P !== W.readOnly ? P : Ue), h = E(() => {
+    if (N)
+      return N({
         code: r,
         languageTemplate: l ?? n,
-        languageText: m
+        languageText: g
       });
-    if (B)
-      return Xe({
+    if (G)
+      return Ze({
         code: r,
         languageTemplate: l ?? n,
-        languageText: m
+        languageText: g
       });
   }, [
     n,
     l,
-    m,
+    g,
     r,
-    R,
-    x,
-    B
-  ]), Z = ae || !!g && !g.isValid, o = g && !g.isValid ? g.errorRange : void 0, ve = E(() => {
-    if (!o)
+    b,
+    N,
+    G
+  ]), $ = ae || !!h && !h.isValid, i = h && !h.isValid ? h.errorRange : void 0, Oe = E(() => {
+    if (!i)
       return /* @__PURE__ */ new Set();
-    const e = o.start.line, h = o.end?.line ?? e;
+    const e = i.start.line, s = i.end?.line ?? e;
     return new Set(
       Array.from(
-        { length: Math.max(h - e + 1, 1) },
-        (ut, Ne) => e + Ne
+        { length: Math.max(s - e + 1, 1) },
+        (ut, be) => e + be
       )
     );
-  }, [o]), t = {
-    disabled: P,
-    error: Z,
-    isLineCapped: Te,
+  }, [i]), t = {
+    disabled: I,
+    error: $,
+    isLineCapped: De,
     isEmpty: r.length === 0,
     isPlaceholderVisible: Se,
-    lineHeight: ye,
-    maxLines: A,
-    minLines: _,
-    readOnly: s,
-    showLineNumbers: H,
+    lineHeight: Ie,
+    maxLines: V,
+    minLines: O,
+    readOnly: d,
+    showLineNumbers: B,
     size: w,
     variant: he,
-    visibleLineCount: De
-  }, xe = Q(
-    (e) => Ze({
+    visibleLineCount: Te
+  }, ve = k(
+    (e) => $e({
       code: e,
-      customLanguages: f,
+      customLanguages: S,
       languageTemplate: n,
-      languageText: m,
-      prismTheme: q,
-      syntaxErrorRange: o
+      languageText: g,
+      prismTheme: K,
+      syntaxErrorRange: i
     }),
     [
-      f,
+      S,
       n,
-      q,
-      m,
-      R,
-      o
+      K,
+      g,
+      b,
+      i
     ]
-  ), Re = Q(
+  ), Re = k(
     (e) => {
-      c && U(e), O?.(e);
+      m && Y(e), v?.(e);
     },
-    [O, c]
+    [v, m]
+  ), Ne = k(
+    (e) => {
+      if (I || e.target instanceof Element && e.target.closest("textarea"))
+        return;
+      e.currentTarget.querySelector("textarea")?.focus();
+    },
+    [I]
   );
-  return Le ? /* @__PURE__ */ a($e, { ownerState: t }) : /* @__PURE__ */ S(
-    Je,
+  return fe ? /* @__PURE__ */ a(Je, { ownerState: t }) : /* @__PURE__ */ D(
+    Qe,
     {
       ownerState: t,
       "aria-disabled": t.disabled || void 0,
-      className: y(p.root, L),
-      ...V(D, T.root, i),
+      className: _(C.root, y),
+      ...x(p, f.root, o),
       children: [
-        X || s ? /* @__PURE__ */ S(Qe, { ownerState: t, className: p.header, children: [
-          X ? /* @__PURE__ */ a(
-            We,
+        Z || d ? /* @__PURE__ */ D(We, { ownerState: t, className: C.header, children: [
+          Z ? /* @__PURE__ */ a(
+            et,
             {
-              label: K,
+              label: X,
               size: "small",
               variant: "outlined",
               color: "default",
               startIcon: /* @__PURE__ */ a(
-                et,
+                tt,
                 {
-                  ...V(
-                    D,
-                    T.languageChipIcon,
-                    Ue
+                  ...x(
+                    p,
+                    f.languageChipIcon,
+                    Ye
                   ),
                   children: /* @__PURE__ */ a(_e, { fontSize: "small" })
                 }
               )
             }
           ) : null,
-          /* @__PURE__ */ a(tt, { ownerState: t, children: s ? /* @__PURE__ */ a(
-            at,
+          /* @__PURE__ */ a(at, { ownerState: t, children: d ? /* @__PURE__ */ a(
+            nt,
             {
-              label: Oe,
+              label: xe,
               size: "small"
             }
           ) : null })
         ] }) : null,
-        /* @__PURE__ */ S(nt, { ownerState: t, children: [
-          H ? /* @__PURE__ */ a(rt, { ownerState: t, "aria-hidden": "true", children: Array.from({ length: j }, (e, h) => h + 1).map(
-            (e) => /* @__PURE__ */ a(
-              lt,
-              {
-                ownerState: t,
-                "data-code-editor-error-line": ve.has(e) || void 0,
-                children: e
-              },
-              `code-editor-line-${e}`
-            )
-          ) }) : null,
-          /* @__PURE__ */ S(ot, { ownerState: t, children: [
-            k && t.isEmpty && v ? /* @__PURE__ */ a(
-              it,
-              {
-                ownerState: t,
-                ...V(
-                  D,
-                  T.placeholder,
-                  i
-                ),
-                children: v
-              }
-            ) : null,
-            /* @__PURE__ */ a(
-              st,
-              {
-                ...I,
-                ownerState: t,
-                "aria-label": I["aria-label"] ?? "Code editor",
-                "aria-invalid": I["aria-invalid"] ?? (Z || void 0),
-                className: y(p.editor, te),
-                "data-testid": ze(
-                  D,
-                  T.textarea,
-                  i
-                ),
-                disabled: P,
-                highlight: xe,
-                insertSpaces: re,
-                onBlur: de,
-                onValueChange: Re,
-                preClassName: y(p.pre, ue),
-                readOnly: s,
-                tabSize: I.tabSize,
-                textareaClassName: y(
-                  p.textarea,
-                  ge
-                ),
-                textareaId: pe,
-                value: r
-              }
-            )
-          ] })
-        ] })
+        /* @__PURE__ */ D(
+          rt,
+          {
+            ownerState: t,
+            onClick: Ne,
+            ...x(p, f.body, o),
+            children: [
+              B ? /* @__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: [
+                H && 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
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       ]
     }
   );

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":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,eAAO,MAAM,gBAAgB,EAAE,gBA2U9B,CAAC"}
+{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,eAAO,MAAM,gBAAgB,EAAE,gBA6U9B,CAAC"}

package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.js

@@ -1,5 +1,5 @@
 import { getTypographyStyles as d } from "../../../utils/getTypographyStyles.js";
-import { getCodeEditorVSCodeModernPalette as s, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as n, CODE_EDITOR_MONO_FONT_FAMILY as l, CODE_EDITOR_PADDING_PX as i } from "./constants.js";
+import { getCodeEditorVSCodeModernPalette as s, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as n, CODE_EDITOR_MONO_FONT_FAMILY as t, CODE_EDITOR_PADDING_PX as i } from "./constants.js";
 import { getSizeStyles as p } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const b = {
   /** Resolve the interactive shell colors and focus treatment for the editor root. */
@@ -115,6 +115,7 @@ const b = {
       "&&& .M4LTypography-root": {
         ...d(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
         color: o.surface.languageChipForeground,
+        lineHeight: "normal",
         textTransform: "uppercase"
       }
     };
@@ -155,14 +156,14 @@ const b = {
   }),
   /** Build the two-column layout used by the gutter and editor scroller. */
   body: ({ theme: r, ownerState: e }) => {
-    const o = e?.visibleLineCount || e?.minLines || 1, a = e?.lineHeight || n.medium, t = e?.isLineCapped ? i : i * 2;
+    const o = e?.visibleLineCount || e?.minLines || 1, a = e?.lineHeight || n.medium, l = e?.isLineCapped ? i : i * 2;
     return {
       display: "grid",
       gridTemplateColumns: e?.showLineNumbers ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
       width: "100%",
       alignItems: "start",
       columnGap: 0,
-      maxHeight: `${o * a + t}px`,
+      maxHeight: `${o * a + l}px`,
       minHeight: 0,
       overflow: "auto",
       pointerEvents: e?.disabled ? "none" : "auto",
@@ -182,7 +183,7 @@ const b = {
       color: e?.disabled ? o.surface.placeholderForeground : o.surface.lineNumberForeground,
       userSelect: "none",
       ...d(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
-      fontFamily: l,
+      fontFamily: t,
       lineHeight: `${n[e?.size || "medium"]}px`
     };
   },
@@ -204,7 +205,8 @@ const b = {
   /** Provide horizontal overflow for long code lines without wrapping them. */
   editorScroller: ({ theme: r, ownerState: e }) => ({
     position: "relative",
-    width: e?.isPlaceholderVisible ? "100%" : "fit-content",
+    width: "fit-content",
+    minWidth: "100%",
     paddingTop: r.vars.size.baseSpacings.sp3,
     paddingBottom: r.vars.size.baseSpacings.sp3,
     paddingRight: r.vars.size.baseSpacings.sp2,
@@ -213,21 +215,21 @@ const b = {
   }),
   /** Style the underlying react-simple-code-editor surface and its inner elements. */
   editor: ({ theme: r, ownerState: e }) => {
-    const o = s(r), a = e?.isLineCapped ? 0 : i, t = i + a;
+    const o = s(r), a = e?.isLineCapped ? 0 : i, l = i + a;
     return {
       position: "relative",
       zIndex: 0,
       width: "max-content",
       minWidth: "100%",
-      minHeight: `calc(${e?.minLines || 1} * ${e?.lineHeight || n.medium}px + ${t}px)`,
+      minHeight: `calc(${e?.minLines || 1} * ${e?.lineHeight || n.medium}px + ${l}px)`,
       backgroundColor: "transparent",
-      fontFamily: l,
+      fontFamily: t,
       fontSize: "11px",
       lineHeight: `${e?.lineHeight || n.medium}px`,
       fontWeight: 400,
       "& textarea, & pre": {
         ...d(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
-        fontFamily: l,
+        fontFamily: t,
         lineHeight: `${e?.lineHeight || n.medium}px`,
         whiteSpace: "pre !important",
         wordBreak: "normal",
@@ -278,7 +280,7 @@ const b = {
       pointerEvents: "none",
       color: o.surface.placeholderForeground,
       ...d(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
-      fontFamily: l,
+      fontFamily: t,
       lineHeight: `${e?.lineHeight || n.medium}px`,
       whiteSpace: "pre-wrap"
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.24.0-beta-feature-731-m4l-components-code-editor.1",
+  "version": "9.24.0-beta-feature-731-m4l-components-code-editor.3",
   "publishConfig": {
     "access": "public"
   },
@@ -53,19 +53,19 @@
     "@hookform/resolvers": "2.9.11",
     "nprogress": "0.2.0",
     "react-transition-group": "4.4.5",
+    "react-dropzone": "14.4.1",
     "react-color": "2.19.3",
-    "@mui/x-date-pickers": "6.20.2",
     "react-rnd": "10.5.2",
+    "@mui/x-date-pickers": "6.20.2",
+    "react-draggable": "4.5.0",
     "date-fns": "2.30.0",
-    "react-dropzone": "14.4.1",
     "react-spinners": "0.13.8",
-    "react-draggable": "4.5.0",
     "chart.js": "4.5.1",
     "chartjs-chart-error-bars": "4.4.5",
     "qrcode.react": "3.2.0",
-    "simplebar-react": "3.2.6",
     "react-resizable-panels": "2.1.9",
     "react-simple-code-editor": "0.14.1",
+    "simplebar-react": "3.2.6",
     "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",