@m4l/components 9.24.0-beta-feature-731-m4l-components-code-editor.5 → 9.24.0-beta-feature-731-m4l-components-code-editor.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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;AAyBjB;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAwXhD"}
1
+ {"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,SAAS,CAAC;AAyBjB;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAwXhD"}
@@ -1,26 +1,26 @@
1
- import { jsx as a, jsxs as D } from "@emotion/react/jsx-runtime";
1
+ import { jsx as a, jsxs as T } from "@emotion/react/jsx-runtime";
2
2
  import { useModuleDictionary as Me, useModuleSkeleton as Ve } from "@m4l/core";
3
3
  import _ from "clsx";
4
- import { useId as ke, useState as Q, useRef as ze, useMemo as C, useEffect as W, useCallback as B } from "react";
5
- import { useTheme as Pe } from "@mui/material/styles";
6
- import { getPropDataTestId as x, getNameDataTestId as Be } from "../../../test/getNameDataTestId.js";
7
- import { CODE_EDITOR_DEFAULT_MAX_LINES as He, CODE_EDITOR_DEFAULT_MIN_LINES as we, CODE_EDITOR_DEFAULT_LANGUAGE as Ge, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as Ue, CODE_EDITOR_CLASSES as p, CODE_EDITOR_KEY_COMPONENT as f, CODE_EDITOR_READ_ONLY_LABEL as Ye, CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID as Fe } from "./constants.js";
4
+ import { useId as ke, useState as Q, useRef as Pe, useMemo as E, useEffect as W, useCallback as B } from "react";
5
+ import { getPropDataTestId as x, getNameDataTestId as ze } from "../../../test/getNameDataTestId.js";
6
+ 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";
8
7
  import { CODE_EDITOR_DICTIONARY as ee } from "./dictionary.js";
9
- import { resolveCodeEditorLanguageIcon as je } from "./helpers/languageIcon.js";
10
- import { ensureCodeEditorRuntimeDependencies as qe, getCodeEditorLineCount as Ke, createCodeEditorPrismTheme as Xe, resolveCodeEditorLanguageTemplate as Ze, validateCodeEditorSyntax as $e, highlightCode as Je } from "./helpers/highlighting.js";
11
- import { SkeletonStyled as Qe, RootStyled as We, HeaderStyled as et, LanguageChipStyled as tt, LanguageChipIconStyled as at, HeaderBadgesStyled as nt, ReadOnlyChipStyled as rt, BodyStyled as ot, LineNumbersStyled as lt, LineNumberStyled as it, EditorScrollerStyled as st, PlaceholderStyled as dt, EditorStyled as ct } from "./slots/CodeEditorSlots.js";
12
- import { CodeEditorSlots as L } from "./slots/CodeEditorEnum.js";
13
- function ut(o) {
8
+ import { resolveCodeEditorLanguageIcon as Fe } from "./helpers/languageIcon.js";
9
+ import { ensureCodeEditorRuntimeDependencies as je, getCodeEditorLineCount as qe, createCodeEditorPrismTheme as Ke, resolveCodeEditorLanguageTemplate as Xe, validateCodeEditorSyntax as Ze, highlightCode as $e } from "./helpers/highlighting.js";
10
+ 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";
11
+ import { CodeEditorSlots as f } from "./slots/CodeEditorEnum.js";
12
+ function ct(o) {
14
13
  return o === "dark" ? "dark" : "light";
15
14
  }
16
- function mt(o, y) {
17
- return o.length !== y.length ? !1 : o.every((S, l) => S === y[l]);
15
+ function ut(o, L) {
16
+ return o.length !== L.length ? !1 : o.every((O, y) => O === L[y]);
18
17
  }
19
- function xt(o) {
18
+ function Tt(o) {
20
19
  const {
21
- className: y,
22
- customLanguages: S,
23
- dataTestId: l,
20
+ className: L,
21
+ colorMode: O = "light",
22
+ customLanguages: y,
23
+ dataTestId: S,
24
24
  defaultValue: te,
25
25
  disabled: I = !1,
26
26
  editorClassName: ae,
@@ -32,122 +32,122 @@ function xt(o) {
32
32
  languageLabel: ie,
33
33
  languageTemplate: n,
34
34
  languageText: se,
35
- maxLines: de = He,
36
- minLines: O = we,
35
+ maxLines: de = Be,
36
+ minLines: v = He,
37
37
  onBlur: ce,
38
- onChange: v,
39
- placeholder: R,
38
+ onChange: R,
39
+ placeholder: N,
40
40
  preClassName: ue,
41
- readOnly: c = !1,
42
- readOnlyLabel: me,
43
- runtimeDependencies: u,
41
+ readOnly: d = !1,
42
+ readOnlyLabel: ge,
43
+ runtimeDependencies: c,
44
44
  showLineNumbers: w = !1,
45
45
  showPlaceholder: G = !0,
46
46
  size: U = "medium",
47
- syntaxValidator: N,
48
- skeleton: ge = !1,
47
+ syntaxValidator: b,
48
+ skeleton: me = !1,
49
49
  textareaClassName: he,
50
50
  validateSyntax: Y = !1,
51
- value: m,
51
+ value: u,
52
52
  variant: Ee = "outlined",
53
- ...T
54
- } = o, Ce = ke(), pe = re || Ce, b = Pe(), { getLabel: fe } = Me(), Le = Ve() || ge, g = v === void 0, [A, ye] = Q(0), M = ze([]), [Se, F] = Q(
55
- m ?? te ?? ""
56
- ), V = ut(b.palette.mode), j = C(() => u ? Array.isArray(u) ? u : [u] : [], [u]);
57
- mt(
53
+ ...D
54
+ } = o, Ce = ke(), pe = re || Ce, { getLabel: fe } = Me(), Le = Ve() || me, g = R === void 0, [A, ye] = Q(0), M = Pe([]), [Se, F] = Q(
55
+ u ?? te ?? ""
56
+ ), V = ct(O), j = E(() => c ? Array.isArray(c) ? c : [c] : [], [c]);
57
+ ut(
58
58
  M.current,
59
59
  j
60
60
  ) || (M.current = j);
61
61
  const k = M.current;
62
62
  W(() => {
63
- g && m !== void 0 && F(m);
64
- }, [g, m]), W(() => {
63
+ g && u !== void 0 && F(u);
64
+ }, [g, u]), W(() => {
65
65
  if (!k.length)
66
66
  return;
67
67
  let e = !0;
68
- return qe(k).catch(() => {
68
+ return je(k).catch(() => {
69
69
  }).then(() => {
70
- e && ye((d) => d + 1);
70
+ e && ye((s) => s + 1);
71
71
  }), () => {
72
72
  e = !1;
73
73
  };
74
74
  }, [k]);
75
- const r = g ? Se : m ?? "", Ie = G && r.length === 0 && !!R, Te = Ue[U], q = Ke(r), K = Math.max(q, O), z = Math.max(O, de), De = Math.min(K, z), _e = q >= z, X = C(
76
- () => H ?? Xe(b, V),
77
- [V, H, b]
78
- ), i = C(
79
- () => Ze(n),
75
+ const r = g ? Se : u ?? "", Ie = G && r.length === 0 && !!N, De = Ge[U], q = qe(r), K = Math.max(q, v), P = Math.max(v, de), Te = Math.min(K, P), _e = q >= P, X = E(
76
+ () => H ?? Ke(V),
77
+ [V, H]
78
+ ), l = E(
79
+ () => Xe(n),
80
80
  [n, A]
81
- ), h = se ?? i?.languageText ?? Ge, Z = ie ?? i?.languageLabel, $ = !!Z, xe = je(
82
- le ?? i?.languageIcon
83
- ), P = c ? fe(ee.readOnly) : void 0, Oe = me ?? (P && P !== ee.readOnly ? P : Ye), E = C(() => {
84
- if (N)
85
- return N({
81
+ ), m = se ?? l?.languageText ?? we, Z = ie ?? l?.languageLabel, $ = !!Z, xe = Fe(
82
+ le ?? l?.languageIcon
83
+ ), z = d ? fe(ee.readOnly) : void 0, Oe = ge ?? (z && z !== ee.readOnly ? z : Ue), h = E(() => {
84
+ if (b)
85
+ return b({
86
86
  code: r,
87
- languageTemplate: i ?? n,
88
- languageText: h
87
+ languageTemplate: l ?? n,
88
+ languageText: m
89
89
  });
90
90
  if (Y)
91
- return $e({
91
+ return Ze({
92
92
  code: r,
93
- languageTemplate: i ?? n,
94
- languageText: h
93
+ languageTemplate: l ?? n,
94
+ languageText: m
95
95
  });
96
96
  }, [
97
97
  n,
98
- i,
99
- h,
98
+ l,
99
+ m,
100
100
  r,
101
101
  A,
102
- N,
102
+ b,
103
103
  Y
104
- ]), J = ne || !!E && !E.isValid, s = E && !E.isValid ? E.errorRange : void 0, ve = C(() => {
105
- if (!s)
104
+ ]), J = ne || !!h && !h.isValid, i = h && !h.isValid ? h.errorRange : void 0, ve = E(() => {
105
+ if (!i)
106
106
  return /* @__PURE__ */ new Set();
107
- const e = s.start.line, d = s.end?.line ?? e;
107
+ const e = i.start.line, s = i.end?.line ?? e;
108
108
  return new Set(
109
109
  Array.from(
110
- { length: Math.max(d - e + 1, 1) },
110
+ { length: Math.max(s - e + 1, 1) },
111
111
  (gt, Ae) => e + Ae
112
112
  )
113
113
  );
114
- }, [s]), t = {
114
+ }, [i]), t = {
115
115
  colorMode: V,
116
116
  disabled: I,
117
117
  error: J,
118
118
  isLineCapped: _e,
119
119
  isEmpty: r.length === 0,
120
120
  isPlaceholderVisible: Ie,
121
- lineHeight: Te,
122
- maxLines: z,
123
- minLines: O,
124
- readOnly: c,
121
+ lineHeight: De,
122
+ maxLines: P,
123
+ minLines: v,
124
+ readOnly: d,
125
125
  showLineNumbers: w,
126
126
  size: U,
127
127
  variant: Ee,
128
- visibleLineCount: De
128
+ visibleLineCount: Te
129
129
  }, Re = B(
130
- (e) => Je({
130
+ (e) => $e({
131
131
  code: e,
132
- customLanguages: S,
132
+ customLanguages: y,
133
133
  languageTemplate: n,
134
- languageText: h,
134
+ languageText: m,
135
135
  prismTheme: X,
136
- syntaxErrorRange: s
136
+ syntaxErrorRange: i
137
137
  }),
138
138
  [
139
- S,
139
+ y,
140
140
  n,
141
141
  X,
142
- h,
142
+ m,
143
143
  A,
144
- s
144
+ i
145
145
  ]
146
146
  ), Ne = B(
147
147
  (e) => {
148
- g && F(e), v?.(e);
148
+ g && F(e), R?.(e);
149
149
  },
150
- [v, g]
150
+ [R, g]
151
151
  ), be = B(
152
152
  (e) => {
153
153
  if (I || e.target instanceof Element && e.target.closest("textarea"))
@@ -156,53 +156,53 @@ function xt(o) {
156
156
  },
157
157
  [I]
158
158
  );
159
- return Le ? /* @__PURE__ */ a(Qe, { ownerState: t }) : /* @__PURE__ */ D(
160
- We,
159
+ return Le ? /* @__PURE__ */ a(Je, { ownerState: t }) : /* @__PURE__ */ T(
160
+ Qe,
161
161
  {
162
162
  ownerState: t,
163
163
  "aria-disabled": t.disabled || void 0,
164
- className: _(p.root, y),
165
- ...x(f, L.root, l),
164
+ className: _(C.root, L),
165
+ ...x(p, f.root, S),
166
166
  children: [
167
- $ || c ? /* @__PURE__ */ D(et, { ownerState: t, className: p.header, children: [
167
+ $ || d ? /* @__PURE__ */ T(We, { ownerState: t, className: C.header, children: [
168
168
  $ ? /* @__PURE__ */ a(
169
- tt,
169
+ et,
170
170
  {
171
171
  label: Z,
172
172
  size: "small",
173
173
  variant: "outlined",
174
174
  color: "default",
175
175
  startIcon: /* @__PURE__ */ a(
176
- at,
176
+ tt,
177
177
  {
178
178
  ...x(
179
- f,
180
- L.languageChipIcon,
181
- Fe
179
+ p,
180
+ f.languageChipIcon,
181
+ Ye
182
182
  ),
183
183
  children: /* @__PURE__ */ a(xe, { fontSize: "small" })
184
184
  }
185
185
  )
186
186
  }
187
187
  ) : null,
188
- /* @__PURE__ */ a(nt, { ownerState: t, children: c ? /* @__PURE__ */ a(
189
- rt,
188
+ /* @__PURE__ */ a(at, { ownerState: t, children: d ? /* @__PURE__ */ a(
189
+ nt,
190
190
  {
191
191
  label: Oe,
192
192
  size: "small"
193
193
  }
194
194
  ) : null })
195
195
  ] }) : null,
196
- /* @__PURE__ */ D(
197
- ot,
196
+ /* @__PURE__ */ T(
197
+ rt,
198
198
  {
199
199
  ownerState: t,
200
200
  onClick: be,
201
- ...x(f, L.body, l),
201
+ ...x(p, f.body, S),
202
202
  children: [
203
- w ? /* @__PURE__ */ a(lt, { ownerState: t, "aria-hidden": "true", children: Array.from({ length: K }, (e, d) => d + 1).map(
203
+ w ? /* @__PURE__ */ a(ot, { ownerState: t, "aria-hidden": "true", children: Array.from({ length: K }, (e, s) => s + 1).map(
204
204
  (e) => /* @__PURE__ */ a(
205
- it,
205
+ lt,
206
206
  {
207
207
  ownerState: t,
208
208
  "data-code-editor-error-line": ve.has(e) || void 0,
@@ -211,42 +211,42 @@ function xt(o) {
211
211
  `code-editor-line-${e}`
212
212
  )
213
213
  ) }) : null,
214
- /* @__PURE__ */ D(st, { ownerState: t, children: [
215
- G && t.isEmpty && R ? /* @__PURE__ */ a(
216
- dt,
214
+ /* @__PURE__ */ T(it, { ownerState: t, children: [
215
+ G && t.isEmpty && N ? /* @__PURE__ */ a(
216
+ st,
217
217
  {
218
218
  ownerState: t,
219
219
  ...x(
220
- f,
221
- L.placeholder,
222
- l
220
+ p,
221
+ f.placeholder,
222
+ S
223
223
  ),
224
- children: R
224
+ children: N
225
225
  }
226
226
  ) : null,
227
227
  /* @__PURE__ */ a(
228
- ct,
228
+ dt,
229
229
  {
230
- ...T,
230
+ ...D,
231
231
  ownerState: t,
232
- "aria-label": T["aria-label"] ?? "Code editor",
233
- "aria-invalid": T["aria-invalid"] ?? (J || void 0),
234
- className: _(p.editor, ae),
235
- "data-testid": Be(
236
- f,
237
- L.textarea,
238
- l
232
+ "aria-label": D["aria-label"] ?? "Code editor",
233
+ "aria-invalid": D["aria-invalid"] ?? (J || void 0),
234
+ className: _(C.editor, ae),
235
+ "data-testid": ze(
236
+ p,
237
+ f.textarea,
238
+ S
239
239
  ),
240
240
  disabled: I,
241
241
  highlight: Re,
242
242
  insertSpaces: oe,
243
243
  onBlur: ce,
244
244
  onValueChange: Ne,
245
- preClassName: _(p.pre, ue),
246
- readOnly: c,
247
- tabSize: T.tabSize,
245
+ preClassName: _(C.pre, ue),
246
+ readOnly: d,
247
+ tabSize: D.tabSize,
248
248
  textareaClassName: _(
249
- p.textarea,
249
+ C.textarea,
250
250
  he
251
251
  ),
252
252
  textareaId: pe,
@@ -262,5 +262,5 @@ function xt(o) {
262
262
  );
263
263
  }
264
264
  export {
265
- xt as CodeEditor
265
+ Tt as CodeEditor
266
266
  };
@@ -1 +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,gBA6U9B,CAAC"}
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"}