@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.
- package/components/extended/ReactSimpleCodeEditor/CodeEditor.d.ts.map +1 -1
- package/components/extended/ReactSimpleCodeEditor/CodeEditor.js +110 -110
- package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.d.ts.map +1 -1
- package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.js +100 -88
- package/components/extended/ReactSimpleCodeEditor/constants.d.ts +2 -2
- package/components/extended/ReactSimpleCodeEditor/constants.d.ts.map +1 -1
- package/components/extended/ReactSimpleCodeEditor/constants.js +28 -29
- package/components/extended/ReactSimpleCodeEditor/helpers/highlighting.d.ts +1 -2
- package/components/extended/ReactSimpleCodeEditor/helpers/highlighting.d.ts.map +1 -1
- package/components/extended/ReactSimpleCodeEditor/helpers/highlighting.js +51 -51
- package/components/extended/ReactSimpleCodeEditor/types.d.ts +324 -0
- package/components/extended/ReactSimpleCodeEditor/types.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.tsx"],"names":[],"mappings":"
|
|
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
|
|
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
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
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
|
|
10
|
-
import { ensureCodeEditorRuntimeDependencies as
|
|
11
|
-
import { SkeletonStyled as
|
|
12
|
-
import { CodeEditorSlots as
|
|
13
|
-
function
|
|
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
|
|
17
|
-
return o.length !==
|
|
15
|
+
function ut(o, L) {
|
|
16
|
+
return o.length !== L.length ? !1 : o.every((O, y) => O === L[y]);
|
|
18
17
|
}
|
|
19
|
-
function
|
|
18
|
+
function Tt(o) {
|
|
20
19
|
const {
|
|
21
|
-
className:
|
|
22
|
-
|
|
23
|
-
|
|
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 =
|
|
36
|
-
minLines:
|
|
35
|
+
maxLines: de = Be,
|
|
36
|
+
minLines: v = He,
|
|
37
37
|
onBlur: ce,
|
|
38
|
-
onChange:
|
|
39
|
-
placeholder:
|
|
38
|
+
onChange: R,
|
|
39
|
+
placeholder: N,
|
|
40
40
|
preClassName: ue,
|
|
41
|
-
readOnly:
|
|
42
|
-
readOnlyLabel:
|
|
43
|
-
runtimeDependencies:
|
|
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:
|
|
48
|
-
skeleton:
|
|
47
|
+
syntaxValidator: b,
|
|
48
|
+
skeleton: me = !1,
|
|
49
49
|
textareaClassName: he,
|
|
50
50
|
validateSyntax: Y = !1,
|
|
51
|
-
value:
|
|
51
|
+
value: u,
|
|
52
52
|
variant: Ee = "outlined",
|
|
53
|
-
...
|
|
54
|
-
} = o, Ce = ke(), pe = re || Ce,
|
|
55
|
-
|
|
56
|
-
), V =
|
|
57
|
-
|
|
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 &&
|
|
64
|
-
}, [g,
|
|
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
|
|
68
|
+
return je(k).catch(() => {
|
|
69
69
|
}).then(() => {
|
|
70
|
-
e && ye((
|
|
70
|
+
e && ye((s) => s + 1);
|
|
71
71
|
}), () => {
|
|
72
72
|
e = !1;
|
|
73
73
|
};
|
|
74
74
|
}, [k]);
|
|
75
|
-
const r = g ? Se :
|
|
76
|
-
() => H ??
|
|
77
|
-
[V, H
|
|
78
|
-
),
|
|
79
|
-
() =>
|
|
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
|
-
),
|
|
82
|
-
le ??
|
|
83
|
-
),
|
|
84
|
-
if (
|
|
85
|
-
return
|
|
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:
|
|
88
|
-
languageText:
|
|
87
|
+
languageTemplate: l ?? n,
|
|
88
|
+
languageText: m
|
|
89
89
|
});
|
|
90
90
|
if (Y)
|
|
91
|
-
return
|
|
91
|
+
return Ze({
|
|
92
92
|
code: r,
|
|
93
|
-
languageTemplate:
|
|
94
|
-
languageText:
|
|
93
|
+
languageTemplate: l ?? n,
|
|
94
|
+
languageText: m
|
|
95
95
|
});
|
|
96
96
|
}, [
|
|
97
97
|
n,
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
l,
|
|
99
|
+
m,
|
|
100
100
|
r,
|
|
101
101
|
A,
|
|
102
|
-
|
|
102
|
+
b,
|
|
103
103
|
Y
|
|
104
|
-
]), J = ne || !!
|
|
105
|
-
if (!
|
|
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 =
|
|
107
|
+
const e = i.start.line, s = i.end?.line ?? e;
|
|
108
108
|
return new Set(
|
|
109
109
|
Array.from(
|
|
110
|
-
{ length: Math.max(
|
|
110
|
+
{ length: Math.max(s - e + 1, 1) },
|
|
111
111
|
(gt, Ae) => e + Ae
|
|
112
112
|
)
|
|
113
113
|
);
|
|
114
|
-
}, [
|
|
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:
|
|
122
|
-
maxLines:
|
|
123
|
-
minLines:
|
|
124
|
-
readOnly:
|
|
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:
|
|
128
|
+
visibleLineCount: Te
|
|
129
129
|
}, Re = B(
|
|
130
|
-
(e) =>
|
|
130
|
+
(e) => $e({
|
|
131
131
|
code: e,
|
|
132
|
-
customLanguages:
|
|
132
|
+
customLanguages: y,
|
|
133
133
|
languageTemplate: n,
|
|
134
|
-
languageText:
|
|
134
|
+
languageText: m,
|
|
135
135
|
prismTheme: X,
|
|
136
|
-
syntaxErrorRange:
|
|
136
|
+
syntaxErrorRange: i
|
|
137
137
|
}),
|
|
138
138
|
[
|
|
139
|
-
|
|
139
|
+
y,
|
|
140
140
|
n,
|
|
141
141
|
X,
|
|
142
|
-
|
|
142
|
+
m,
|
|
143
143
|
A,
|
|
144
|
-
|
|
144
|
+
i
|
|
145
145
|
]
|
|
146
146
|
), Ne = B(
|
|
147
147
|
(e) => {
|
|
148
|
-
g && F(e),
|
|
148
|
+
g && F(e), R?.(e);
|
|
149
149
|
},
|
|
150
|
-
[
|
|
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(
|
|
160
|
-
|
|
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: _(
|
|
165
|
-
...x(
|
|
164
|
+
className: _(C.root, L),
|
|
165
|
+
...x(p, f.root, S),
|
|
166
166
|
children: [
|
|
167
|
-
$ ||
|
|
167
|
+
$ || d ? /* @__PURE__ */ T(We, { ownerState: t, className: C.header, children: [
|
|
168
168
|
$ ? /* @__PURE__ */ a(
|
|
169
|
-
|
|
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
|
-
|
|
176
|
+
tt,
|
|
177
177
|
{
|
|
178
178
|
...x(
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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(
|
|
189
|
-
|
|
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__ */
|
|
197
|
-
|
|
196
|
+
/* @__PURE__ */ T(
|
|
197
|
+
rt,
|
|
198
198
|
{
|
|
199
199
|
ownerState: t,
|
|
200
200
|
onClick: be,
|
|
201
|
-
...x(
|
|
201
|
+
...x(p, f.body, S),
|
|
202
202
|
children: [
|
|
203
|
-
w ? /* @__PURE__ */ a(
|
|
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
|
-
|
|
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__ */
|
|
215
|
-
G && t.isEmpty &&
|
|
216
|
-
|
|
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
|
-
|
|
221
|
-
|
|
222
|
-
|
|
220
|
+
p,
|
|
221
|
+
f.placeholder,
|
|
222
|
+
S
|
|
223
223
|
),
|
|
224
|
-
children:
|
|
224
|
+
children: N
|
|
225
225
|
}
|
|
226
226
|
) : null,
|
|
227
227
|
/* @__PURE__ */ a(
|
|
228
|
-
|
|
228
|
+
dt,
|
|
229
229
|
{
|
|
230
|
-
...
|
|
230
|
+
...D,
|
|
231
231
|
ownerState: t,
|
|
232
|
-
"aria-label":
|
|
233
|
-
"aria-invalid":
|
|
234
|
-
className: _(
|
|
235
|
-
"data-testid":
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
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: _(
|
|
246
|
-
readOnly:
|
|
247
|
-
tabSize:
|
|
245
|
+
preClassName: _(C.pre, ue),
|
|
246
|
+
readOnly: d,
|
|
247
|
+
tabSize: D.tabSize,
|
|
248
248
|
textareaClassName: _(
|
|
249
|
-
|
|
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
|
-
|
|
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,
|
|
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"}
|