@code0-tech/pictor 0.5.0 → 0.6.0
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/dist/assets/components/form/Input.style.css +1 -1
- package/dist/components/editor/Editor.d.ts +3 -1
- package/dist/components/editor/Editor.js +217 -229
- package/dist/components/form/InputMessage.js +10 -10
- package/dist/components/form/PasswordInput.d.ts +1 -0
- package/dist/components/form/PasswordInput.js +65 -16
- package/dist/components/form/index.js +10 -9
- package/dist/components/form/useForm.d.ts +1 -1
- package/dist/components/form/useForm.js +43 -42
- package/dist/index.js +107 -106
- package/dist/utils/reactiveArrayService.js +29 -39
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
.input{display:flex;z-index:1;align-items:center;box-sizing:border-box}.input{background:#
|
|
1
|
+
.input{display:flex;z-index:1;align-items:center;box-sizing:border-box}.input{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input:hover{background:#bfbfbf26;box-shadow:inset 0 1px 1px #ffffff1a}.input:active,.input:focus,.input[aria-selected=true],.input[data-state=open]{background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:1rem}.input:has(.input__control:focus),.input:has(.input__control[contenteditable=true]:focus){background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input--not-valid{background:#1c0516;box-shadow:inset 0 1px 1px #d904291a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input__left,.input__right{display:flex;align-items:stretch;margin:.175rem;gap:.7rem}.input__left>button,.input__right>button{height:100%;padding-left:0;padding-right:0}.input__left--action,.input__right--action{padding:0}.input__left--placeholder,.input__right--placeholder{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:.825rem;padding:.7rem;box-shadow:none}.input__left{padding-left:.7rem}.input__left--icon{align-items:center}.input__right{padding-right:.7rem}.input__right--icon{align-items:center}.input__control{background:none;box-shadow:none;border:none;outline:none;margin:.7rem;vertical-align:middle;flex:1;width:100%;font-size:.8rem;box-sizing:border-box;color:#ffffff80}.input__control{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__token{display:inline-flex;align-items:center;vertical-align:middle;user-select:none;-webkit-user-select:none;-moz-user-select:none}.input__label{text-transform:uppercase;color:#ffffff80;font-size:.7rem;display:block}.input__label{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__description{color:#ffffff80;font-size:.8rem;margin:.35rem 0 .7rem;display:block}.input__description{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__message{z-index:0;display:flex;align-items:center;font-size:.8rem;gap:.35rem;margin-top:.7rem}.input__message{border-radius:1rem;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;box-shadow:none}.input__message>svg{width:1rem;height:1rem}.pin-input{display:flex;justify-content:space-between;gap:.7rem;position:relative;background:transparent}.pin-input__field{flex:1;width:100%;aspect-ratio:1/1;text-align:center}.number-input::-webkit-outer-spin-button,.number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield}.radio-input{background:transparent!important;box-shadow:none!important;display:flex;align-items:center;box-sizing:border-box;gap:.35rem;position:relative}.radio-input__button{top:-1px;width:18px;height:18px;padding:.35rem}.radio-input__button{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.radio-input__button:active,.radio-input__button:focus,.radio-input__button[aria-selected=true],.radio-input__button[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.radio-input__button{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.radio-input__button:disabled,.radio-input__button[data-disabled],.radio-input__button[aria-disabled=true],.radio-input__button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.radio-input__button{border-radius:1rem}.radio-input__button[data-state=checked]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.radio-input__indicator{height:100%;position:relative;display:block;aspect-ratio:1/1}.radio-input__indicator[data-state=checked]{background-color:#70ffb2}.radio-input__indicator[data-state=checked]{border-radius:1rem}.radio-button{padding:0;display:inline-flex}.checkbox-input{background:transparent!important;box-shadow:none!important;align-items:center;box-sizing:border-box;gap:.35rem}.checkbox-input__button{aspect-ratio:1/1;width:1.3rem;height:1.3rem;display:flex;align-items:center;justify-content:center;border-radius:.35rem;cursor:pointer}.checkbox-input__button{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.checkbox-input__button:active,.checkbox-input__button:focus,.checkbox-input__button[aria-selected=true],.checkbox-input__button[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.checkbox-input__button{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.checkbox-input__button:disabled,.checkbox-input__button[data-disabled],.checkbox-input__button[aria-disabled=true],.checkbox-input__button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.checkbox-input__indicator{position:relative;display:flex;align-items:center;justify-content:center;top:1px;color:#70ffb2}.switch-input{box-shadow:none!important;background:transparent!important;width:fit-content}.switch-input .input__control{position:relative;box-sizing:border-box;padding:0;margin:0;height:16px;width:0;appearance:none;outline:none;cursor:pointer;background-color:transparent;border-radius:50%}.switch-input .input__control:checked:after{-webkit-transform:translateX(22px);-ms-transform:translateX(22px);transform:translate(22px);-webkit-transition:.4s;transition:.4s}.switch-input .input__control:checked:before{background:#121e24;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;position:absolute;width:2.6rem;height:1.25rem}.switch-input .input__control:after{width:.9rem;height:.9rem;background-color:#fff;border-radius:50%;position:absolute;content:"";-webkit-transition:.4s;transition:.4s}.switch-input .input__control:before{content:"";z-index:-1;-webkit-transition:.4s;transition:.4s;top:-.175rem;left:-.175rem}.switch-input .input__control:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem;position:absolute;width:2.6rem;height:1.25rem}
|
|
@@ -2,7 +2,7 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { Code0Component } from '../../utils';
|
|
3
3
|
import { ValidationProps } from '../form';
|
|
4
4
|
import { Extension } from '@uiw/react-codemirror';
|
|
5
|
-
import { StreamLanguage } from '@codemirror/language';
|
|
5
|
+
import { StreamLanguage, TagStyle } from '@codemirror/language';
|
|
6
6
|
import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
|
|
7
7
|
import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
|
|
8
8
|
export type EditorTokenizer = (content: string) => string | null;
|
|
@@ -24,6 +24,8 @@ export interface EditorInputProps extends Omit<Code0Component<HTMLDivElement>, '
|
|
|
24
24
|
readonly?: boolean;
|
|
25
25
|
showTooltips?: boolean;
|
|
26
26
|
showValidation?: boolean;
|
|
27
|
+
formatter?: (value: string) => Promise<string>;
|
|
27
28
|
basicSetup?: BasicSetupOptions;
|
|
29
|
+
tokenStyles?: TagStyle[];
|
|
28
30
|
}
|
|
29
31
|
export declare const Editor: React.FC<EditorInputProps>;
|
|
@@ -1,337 +1,325 @@
|
|
|
1
|
-
import { jsxs as s, jsx as
|
|
2
|
-
import m, { isValidElement as
|
|
1
|
+
import { jsxs as s, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import m, { isValidElement as me } from "react";
|
|
3
3
|
import { createPortal as K } from "react-dom";
|
|
4
4
|
import "../../utils/contextStore.js";
|
|
5
|
-
import { hashToColor as
|
|
6
|
-
import
|
|
7
|
-
import { json as
|
|
5
|
+
import { hashToColor as w, mergeCode0Props as he } from "../../utils/utils.js";
|
|
6
|
+
import fe, { Prec as _, keymap as J, ViewPlugin as ge, RangeSetBuilder as pe, Decoration as F, EditorView as ye, WidgetType as be } from "@uiw/react-codemirror";
|
|
7
|
+
import { json as ve, jsonParseLinter as Se } from "@codemirror/lang-json";
|
|
8
8
|
import { syntaxTree as L } from "@codemirror/language";
|
|
9
|
-
import { linter as
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { createTheme as
|
|
14
|
-
import {
|
|
9
|
+
import { linter as we } from "@codemirror/lint";
|
|
10
|
+
import Ce from "../../node_modules/prettier/standalone.js";
|
|
11
|
+
import Te from "../../node_modules/prettier/plugins/babel.js";
|
|
12
|
+
import xe from "../../node_modules/prettier/plugins/estree.js";
|
|
13
|
+
import { createTheme as Ae } from "@uiw/codemirror-themes";
|
|
14
|
+
import { getStyleTags as ke, tags as C } from "../../node_modules/@lezer/highlight/dist/index.js";
|
|
15
15
|
import '../../assets/components/editor/Editor.styles.css';/* empty css */
|
|
16
|
-
import { Badge as
|
|
17
|
-
import { IconExclamationCircle as
|
|
16
|
+
import { Badge as b } from "../badge/Badge.js";
|
|
17
|
+
import { IconExclamationCircle as ze, IconAlertTriangle as je, IconAlertSquareRounded as Pe, IconInfoCircle as Ee, IconSpace as Ve, IconArrowBarToRight as Ne, IconCornerDownLeft as Ie } from "@tabler/icons-react";
|
|
18
18
|
import { Text as a } from "../text/Text.js";
|
|
19
|
-
import { Flex as
|
|
20
|
-
import { Tooltip as
|
|
21
|
-
import { ScrollArea as
|
|
22
|
-
import { autocompletion as
|
|
23
|
-
function
|
|
24
|
-
return (
|
|
19
|
+
import { Flex as x } from "../flex/Flex.js";
|
|
20
|
+
import { Tooltip as A, TooltipTrigger as k, TooltipPortal as z, TooltipContent as j, TooltipArrow as P } from "../tooltip/Tooltip.js";
|
|
21
|
+
import { ScrollArea as Re, ScrollAreaViewport as Me, ScrollAreaScrollbar as G, ScrollAreaThumb as Q } from "../scroll-area/ScrollArea.js";
|
|
22
|
+
import { autocompletion as Be, acceptCompletion as Fe, startCompletion as E } from "@codemirror/autocomplete";
|
|
23
|
+
function Oe(i, t, f) {
|
|
24
|
+
return (t = qe(t)) in i ? Object.defineProperty(i, t, { value: f, enumerable: !0, configurable: !0, writable: !0 }) : i[t] = f, i;
|
|
25
25
|
}
|
|
26
|
-
function
|
|
27
|
-
var
|
|
28
|
-
return typeof
|
|
26
|
+
function qe(i) {
|
|
27
|
+
var t = We(i, "string");
|
|
28
|
+
return typeof t == "symbol" ? t : t + "";
|
|
29
29
|
}
|
|
30
|
-
function
|
|
30
|
+
function We(i, t) {
|
|
31
31
|
if (typeof i != "object" || !i) return i;
|
|
32
|
-
var
|
|
33
|
-
if (
|
|
34
|
-
var
|
|
35
|
-
if (typeof
|
|
32
|
+
var f = i[Symbol.toPrimitive];
|
|
33
|
+
if (f !== void 0) {
|
|
34
|
+
var p = f.call(i, t);
|
|
35
|
+
if (typeof p != "object") return p;
|
|
36
36
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
37
37
|
}
|
|
38
|
-
return (
|
|
38
|
+
return (t === "string" ? String : Number)(i);
|
|
39
39
|
}
|
|
40
|
-
class X extends
|
|
41
|
-
constructor(
|
|
42
|
-
super(), this.type =
|
|
40
|
+
class X extends be {
|
|
41
|
+
constructor(t, f) {
|
|
42
|
+
super(), this.type = t, this.rawValue = f;
|
|
43
43
|
}
|
|
44
44
|
toDOM() {
|
|
45
|
-
const
|
|
46
|
-
return
|
|
45
|
+
const t = document.createElement("span");
|
|
46
|
+
return t.className = "cm-react-anchor", t.dataset.type = this.type, t.dataset.value = this.rawValue, t.contentEditable = "false", t.style.pointerEvents = "none", t.style.verticalAlign = "middle", t.style.display = "inline-block", t;
|
|
47
47
|
}
|
|
48
48
|
ignoreEvent() {
|
|
49
49
|
return !0;
|
|
50
50
|
}
|
|
51
|
-
eq(
|
|
52
|
-
return
|
|
51
|
+
eq(t) {
|
|
52
|
+
return t.type === this.type && t.rawValue === this.rawValue;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
const
|
|
56
|
-
theme: "light",
|
|
57
|
-
settings: {
|
|
58
|
-
background: "transparent",
|
|
59
|
-
backgroundImage: "",
|
|
60
|
-
foreground: "rgba(255,255,255, 0.75)",
|
|
61
|
-
caret: "gray",
|
|
62
|
-
selection: "rgba(112,179,255,0.25)",
|
|
63
|
-
selectionMatch: "rgba(112,179,255,0.1)",
|
|
64
|
-
fontSize: "0.8rem",
|
|
65
|
-
gutterBackground: "transparent",
|
|
66
|
-
gutterForeground: "rgba(255,255,255, 0.5)",
|
|
67
|
-
gutterBorder: "transparent",
|
|
68
|
-
gutterActiveForeground: "rgba(255,255,255, 1)",
|
|
69
|
-
lineHighlight: "rgba(255,255,255, 0.1)"
|
|
70
|
-
},
|
|
71
|
-
styles: [{
|
|
72
|
-
tag: v.squareBracket,
|
|
73
|
-
color: b("squareBracket")
|
|
74
|
-
}, {
|
|
75
|
-
tag: v.bracket,
|
|
76
|
-
color: b("bracket")
|
|
77
|
-
}, {
|
|
78
|
-
tag: v.string,
|
|
79
|
-
color: b("Text")
|
|
80
|
-
}, {
|
|
81
|
-
tag: v.bool,
|
|
82
|
-
color: b("Boolean")
|
|
83
|
-
}, {
|
|
84
|
-
tag: v.number,
|
|
85
|
-
color: b("Number")
|
|
86
|
-
}]
|
|
87
|
-
}), Oe = (i) => ce(i) || typeof i == "string" || typeof i == "number" || Array.isArray(i), at = (i) => {
|
|
55
|
+
const De = (i) => me(i) || typeof i == "string" || typeof i == "number" || Array.isArray(i), ur = (i) => {
|
|
88
56
|
const {
|
|
89
|
-
language:
|
|
90
|
-
tokenizer:
|
|
91
|
-
tokenHighlights:
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
57
|
+
language: t,
|
|
58
|
+
tokenizer: f,
|
|
59
|
+
tokenHighlights: p,
|
|
60
|
+
tokenStyles: O = [],
|
|
61
|
+
suggestions: V,
|
|
62
|
+
onChange: q,
|
|
63
|
+
extensions: Y = [],
|
|
64
|
+
formatter: W,
|
|
65
|
+
initialValue: v,
|
|
66
|
+
formValidation: Z,
|
|
67
|
+
disabled: N,
|
|
68
|
+
showTooltips: $ = !0,
|
|
69
|
+
showValidation: U = !0,
|
|
70
|
+
readonly: ee,
|
|
71
|
+
basicSetup: re,
|
|
102
72
|
customSuggestionComponent: D = !1,
|
|
103
73
|
...te
|
|
104
|
-
} = i, [
|
|
105
|
-
|
|
74
|
+
} = i, [oe, I] = m.useState(), R = m.useRef(null), [ne, ie] = m.useState(/* @__PURE__ */ new Map()), [u, se] = m.useState([]), [T, le] = m.useState(null), [g, y] = m.useState(null), H = m.useRef(null);
|
|
75
|
+
m.useEffect(() => {
|
|
106
76
|
(async () => {
|
|
107
77
|
try {
|
|
108
|
-
const e = await
|
|
109
|
-
parser:
|
|
110
|
-
plugins: [
|
|
78
|
+
const e = W ? await W(v) : t === "json" ? await Ce.format(JSON.stringify(v), {
|
|
79
|
+
parser: "json",
|
|
80
|
+
plugins: [Te, xe],
|
|
111
81
|
printWidth: 1
|
|
112
|
-
});
|
|
113
|
-
|
|
82
|
+
}) : v;
|
|
83
|
+
I(e);
|
|
114
84
|
} catch {
|
|
115
|
-
|
|
85
|
+
I(t == "json" ? JSON.stringify(v) : v);
|
|
116
86
|
}
|
|
117
87
|
})();
|
|
118
|
-
}, [
|
|
119
|
-
const
|
|
120
|
-
const e = [...
|
|
121
|
-
if (
|
|
122
|
-
const
|
|
123
|
-
const
|
|
124
|
-
if (
|
|
125
|
-
const
|
|
126
|
-
return
|
|
127
|
-
component:
|
|
88
|
+
}, []);
|
|
89
|
+
const ae = m.useMemo(() => {
|
|
90
|
+
const e = [...Y];
|
|
91
|
+
if (V) {
|
|
92
|
+
const n = (o) => {
|
|
93
|
+
const c = V(o);
|
|
94
|
+
if (c && De(c)) {
|
|
95
|
+
const l = o.view?.coordsAtPos(o.pos);
|
|
96
|
+
return l && y({
|
|
97
|
+
component: c,
|
|
128
98
|
position: {
|
|
129
|
-
top:
|
|
130
|
-
left:
|
|
99
|
+
top: l.bottom,
|
|
100
|
+
left: l.left
|
|
131
101
|
}
|
|
132
102
|
}), null;
|
|
133
103
|
}
|
|
134
|
-
return
|
|
104
|
+
return y(null), c;
|
|
135
105
|
};
|
|
136
|
-
e.push(
|
|
106
|
+
e.push(Be({
|
|
137
107
|
...D ? {
|
|
138
|
-
override: [
|
|
108
|
+
override: [n]
|
|
139
109
|
} : {
|
|
140
|
-
override: [
|
|
110
|
+
override: [V]
|
|
141
111
|
}
|
|
142
112
|
})), e.push(_.highest(J.of([{
|
|
143
113
|
key: "Tab",
|
|
144
|
-
run:
|
|
114
|
+
run: Fe
|
|
145
115
|
}]))), D && e.push(_.highest(J.of([{
|
|
146
116
|
key: "ArrowUp",
|
|
147
|
-
run: (
|
|
117
|
+
run: (o) => (g || E(o), !0)
|
|
148
118
|
}, {
|
|
149
119
|
key: "ArrowDown",
|
|
150
|
-
run: (
|
|
120
|
+
run: (o) => g ? (R?.current?.querySelector("[tabindex]")?.focus(), !0) : (E(o), !0)
|
|
151
121
|
}])));
|
|
152
122
|
}
|
|
153
|
-
|
|
154
|
-
markerFilter: (
|
|
155
|
-
}))) :
|
|
156
|
-
const
|
|
157
|
-
constructor(
|
|
158
|
-
|
|
123
|
+
t === "json" ? (e.push(ve()), e.push(we(Se(), {
|
|
124
|
+
markerFilter: (n) => (se(n), [])
|
|
125
|
+
}))) : t && e.push(t);
|
|
126
|
+
const d = ge.fromClass(class {
|
|
127
|
+
constructor(n) {
|
|
128
|
+
Oe(this, "decorations", void 0), this.decorations = this.build(n);
|
|
159
129
|
}
|
|
160
|
-
update(
|
|
161
|
-
(
|
|
130
|
+
update(n) {
|
|
131
|
+
(n.docChanged || n.viewportChanged) && (this.decorations = this.build(n.view));
|
|
162
132
|
}
|
|
163
|
-
build(
|
|
164
|
-
const
|
|
165
|
-
return L(
|
|
166
|
-
enter: (
|
|
167
|
-
const
|
|
168
|
-
if (
|
|
133
|
+
build(n) {
|
|
134
|
+
const o = new pe(), c = Object.keys(p || {});
|
|
135
|
+
return L(n.state).iterate({
|
|
136
|
+
enter: (l) => {
|
|
137
|
+
const h = n.state.doc.sliceString(l.from, l.to);
|
|
138
|
+
if (h.includes(`
|
|
169
139
|
`)) return;
|
|
170
|
-
const
|
|
171
|
-
|
|
172
|
-
|
|
140
|
+
const M = f?.(h), de = ke(l)?.tags.map((S) => "name" in S ? S.name : void 0), B = c.find((S) => de?.includes(S));
|
|
141
|
+
B && !M ? p?.[B]({
|
|
142
|
+
content: h
|
|
143
|
+
}) && o.add(l.from, l.to, F.replace({
|
|
144
|
+
widget: new X(B, h),
|
|
173
145
|
point: !0
|
|
174
|
-
})) :
|
|
175
|
-
widget: new X(
|
|
146
|
+
})) : M && o.add(l.from, l.to, F.replace({
|
|
147
|
+
widget: new X(M, h),
|
|
176
148
|
point: !0
|
|
177
149
|
}));
|
|
178
150
|
}
|
|
179
|
-
}),
|
|
151
|
+
}), o.finish();
|
|
180
152
|
}
|
|
181
153
|
}, {
|
|
182
|
-
decorations: (
|
|
154
|
+
decorations: (n) => n.decorations
|
|
183
155
|
});
|
|
184
|
-
return e.push(
|
|
185
|
-
}, [
|
|
156
|
+
return e.push(d), e.push(ye.atomicRanges.of((n) => n.plugin(d)?.decorations || F.none)), e;
|
|
157
|
+
}, [R]), ce = m.useCallback((e) => {
|
|
186
158
|
if (e.docChanged || e.viewportChanged || e.selectionSet) {
|
|
187
159
|
if (e.view) {
|
|
188
160
|
const {
|
|
189
|
-
from:
|
|
190
|
-
to:
|
|
161
|
+
from: o,
|
|
162
|
+
to: c
|
|
191
163
|
} = e.state?.selection?.main ?? {
|
|
192
164
|
from: 0,
|
|
193
165
|
to: 0
|
|
194
166
|
};
|
|
195
167
|
let l = 0;
|
|
196
168
|
L(e.state).iterate({
|
|
197
|
-
from:
|
|
198
|
-
to:
|
|
199
|
-
enter: (
|
|
200
|
-
|
|
169
|
+
from: o,
|
|
170
|
+
to: c,
|
|
171
|
+
enter: (h) => {
|
|
172
|
+
h.from >= o && h.to <= c && l++;
|
|
201
173
|
}
|
|
202
|
-
}), e.selectionSet && l < 2 ? (
|
|
203
|
-
from:
|
|
204
|
-
to:
|
|
174
|
+
}), e.selectionSet && l < 2 ? (o === c && o !== T?.from ? y(null) : o === c && o === T?.from && o != 0 ? y((h) => h) : o === c && o === T?.from && o == 0 && y(null), E(e.view)) : e.selectionSet && l >= 2 && y(null), le({
|
|
175
|
+
from: o,
|
|
176
|
+
to: c
|
|
205
177
|
});
|
|
206
|
-
} else e.selectionSet && (
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
n
|
|
210
|
-
o.
|
|
211
|
-
|
|
212
|
-
value: l.dataset.value
|
|
213
|
-
});
|
|
214
|
-
}), ne(o);
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
}, [T]);
|
|
218
|
-
return m.useEffect(() => {
|
|
219
|
-
if (C.current) {
|
|
220
|
-
const e = window.setTimeout(() => {
|
|
221
|
-
const n = new CustomEvent("scroll");
|
|
222
|
-
C.current?.dispatchEvent(n), M({
|
|
223
|
-
docChanged: !0,
|
|
224
|
-
viewportChanged: !0,
|
|
225
|
-
selectionSet: !1
|
|
178
|
+
} else e.selectionSet && (y(null), E(e.view));
|
|
179
|
+
const d = H.current?.querySelectorAll(".cm-react-anchor"), n = /* @__PURE__ */ new Map();
|
|
180
|
+
d?.forEach((o) => {
|
|
181
|
+
n.set(o, {
|
|
182
|
+
type: o.dataset.type,
|
|
183
|
+
value: o.dataset.value
|
|
226
184
|
});
|
|
227
|
-
},
|
|
228
|
-
return () => clearTimeout(e);
|
|
185
|
+
}), ie(n);
|
|
229
186
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
187
|
+
}, [T]), ue = m.useMemo(() => Ae({
|
|
188
|
+
theme: "light",
|
|
189
|
+
settings: {
|
|
190
|
+
background: "transparent",
|
|
191
|
+
backgroundImage: "",
|
|
192
|
+
foreground: "rgba(255,255,255, 0.75)",
|
|
193
|
+
caret: "gray",
|
|
194
|
+
selection: "rgba(112,179,255,0.25)",
|
|
195
|
+
selectionMatch: "rgba(112,179,255,0.1)",
|
|
196
|
+
fontSize: "0.8rem",
|
|
197
|
+
gutterBackground: "transparent",
|
|
198
|
+
gutterForeground: "rgba(255,255,255, 0.5)",
|
|
199
|
+
gutterBorder: "transparent",
|
|
200
|
+
gutterActiveForeground: "rgba(255,255,255, 1)",
|
|
201
|
+
lineHighlight: "rgba(255,255,255, 0.1)"
|
|
202
|
+
},
|
|
203
|
+
styles: [{
|
|
204
|
+
tag: C.squareBracket,
|
|
205
|
+
color: w("squareBracket")
|
|
206
|
+
}, {
|
|
207
|
+
tag: C.bracket,
|
|
208
|
+
color: w("bracket")
|
|
209
|
+
}, {
|
|
210
|
+
tag: C.string,
|
|
211
|
+
color: w("Text")
|
|
212
|
+
}, {
|
|
213
|
+
tag: C.bool,
|
|
214
|
+
color: w("Boolean")
|
|
215
|
+
}, {
|
|
216
|
+
tag: C.number,
|
|
217
|
+
color: w("Number")
|
|
218
|
+
}, ...O]
|
|
219
|
+
}), [O]);
|
|
220
|
+
return /* @__PURE__ */ s(Re, { h: "100%", type: "scroll", children: [
|
|
221
|
+
U && /* @__PURE__ */ r("div", { className: "editor__diagnostics", children: /* @__PURE__ */ s(x, { style: {
|
|
234
222
|
gap: "0.35rem",
|
|
235
223
|
textWrap: "nowrap"
|
|
236
224
|
}, align: "center", children: [
|
|
237
|
-
|
|
238
|
-
/* @__PURE__ */
|
|
239
|
-
/* @__PURE__ */
|
|
240
|
-
/* @__PURE__ */
|
|
225
|
+
u.filter((e) => e.severity == "error").length > 0 ? /* @__PURE__ */ s(A, { children: [
|
|
226
|
+
/* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "red", children: [
|
|
227
|
+
/* @__PURE__ */ r(ze, { size: 13 }),
|
|
228
|
+
/* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "error").length })
|
|
241
229
|
] }) }),
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
|
|
230
|
+
/* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
|
|
231
|
+
/* @__PURE__ */ r(P, {}),
|
|
232
|
+
u.filter((e) => e.severity == "error").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
|
|
245
233
|
] }) })
|
|
246
234
|
] }) : null,
|
|
247
|
-
|
|
248
|
-
/* @__PURE__ */
|
|
249
|
-
/* @__PURE__ */
|
|
250
|
-
/* @__PURE__ */
|
|
235
|
+
u.filter((e) => e.severity == "warning").length > 0 ? /* @__PURE__ */ s(A, { children: [
|
|
236
|
+
/* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "orange", children: [
|
|
237
|
+
/* @__PURE__ */ r(je, { size: 13 }),
|
|
238
|
+
/* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "warning").length })
|
|
251
239
|
] }) }),
|
|
252
|
-
/* @__PURE__ */
|
|
253
|
-
/* @__PURE__ */
|
|
254
|
-
|
|
240
|
+
/* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
|
|
241
|
+
/* @__PURE__ */ r(P, {}),
|
|
242
|
+
u.filter((e) => e.severity == "warning").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
|
|
255
243
|
] }) })
|
|
256
244
|
] }) : null,
|
|
257
|
-
|
|
258
|
-
/* @__PURE__ */
|
|
259
|
-
/* @__PURE__ */
|
|
260
|
-
/* @__PURE__ */
|
|
245
|
+
u.filter((e) => e.severity == "info").length > 0 ? /* @__PURE__ */ s(A, { children: [
|
|
246
|
+
/* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "#9ca3af", children: [
|
|
247
|
+
/* @__PURE__ */ r(Pe, { size: 13 }),
|
|
248
|
+
/* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "info").length })
|
|
261
249
|
] }) }),
|
|
262
|
-
/* @__PURE__ */
|
|
263
|
-
/* @__PURE__ */
|
|
264
|
-
|
|
250
|
+
/* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
|
|
251
|
+
/* @__PURE__ */ r(P, {}),
|
|
252
|
+
u.filter((e) => e.severity == "info").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
|
|
265
253
|
] }) })
|
|
266
254
|
] }) : null,
|
|
267
|
-
|
|
268
|
-
/* @__PURE__ */
|
|
269
|
-
/* @__PURE__ */
|
|
270
|
-
/* @__PURE__ */
|
|
255
|
+
u.filter((e) => e.severity == "hint").length > 0 ? /* @__PURE__ */ s(A, { children: [
|
|
256
|
+
/* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "#3b82f6", children: [
|
|
257
|
+
/* @__PURE__ */ r(Ee, { size: 13 }),
|
|
258
|
+
/* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "hint").length })
|
|
271
259
|
] }) }),
|
|
272
|
-
/* @__PURE__ */
|
|
273
|
-
/* @__PURE__ */
|
|
274
|
-
|
|
260
|
+
/* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
|
|
261
|
+
/* @__PURE__ */ r(P, {}),
|
|
262
|
+
u.filter((e) => e.severity == "hint").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
|
|
275
263
|
] }) })
|
|
276
264
|
] }) : null
|
|
277
265
|
] }) }),
|
|
278
|
-
|
|
266
|
+
$ && /* @__PURE__ */ r("div", { className: "editor__tools", children: /* @__PURE__ */ s(x, { style: {
|
|
279
267
|
gap: "0.35rem",
|
|
280
268
|
textWrap: "nowrap"
|
|
281
269
|
}, align: "center", children: [
|
|
282
|
-
/* @__PURE__ */ s(
|
|
270
|
+
/* @__PURE__ */ s(x, { style: {
|
|
283
271
|
gap: "0.35rem"
|
|
284
272
|
}, align: "center", children: [
|
|
285
|
-
/* @__PURE__ */ s(
|
|
286
|
-
/* @__PURE__ */
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
/* @__PURE__ */
|
|
273
|
+
/* @__PURE__ */ s(b, { color: "secondary", border: !0, children: [
|
|
274
|
+
/* @__PURE__ */ r(a, { children: navigator !== void 0 && /Mac/.test(navigator.userAgent) ? "⌃" : "strg" }),
|
|
275
|
+
/* @__PURE__ */ r(a, { children: "+" }),
|
|
276
|
+
/* @__PURE__ */ r(Ve, { size: 13 })
|
|
289
277
|
] }),
|
|
290
|
-
/* @__PURE__ */
|
|
278
|
+
/* @__PURE__ */ r(a, { children: "to show" })
|
|
291
279
|
] }),
|
|
292
|
-
/* @__PURE__ */
|
|
293
|
-
/* @__PURE__ */ s(
|
|
280
|
+
/* @__PURE__ */ r(a, { children: "and" }),
|
|
281
|
+
/* @__PURE__ */ s(x, { style: {
|
|
294
282
|
gap: "0.35rem"
|
|
295
283
|
}, align: "center", children: [
|
|
296
|
-
/* @__PURE__ */ s(
|
|
297
|
-
/* @__PURE__ */
|
|
298
|
-
/* @__PURE__ */
|
|
299
|
-
/* @__PURE__ */
|
|
284
|
+
/* @__PURE__ */ s(b, { color: "secondary", border: !0, children: [
|
|
285
|
+
/* @__PURE__ */ r(Ne, { size: 13 }),
|
|
286
|
+
/* @__PURE__ */ r(a, { children: "or" }),
|
|
287
|
+
/* @__PURE__ */ r(Ie, { size: 13 })
|
|
300
288
|
] }),
|
|
301
|
-
/* @__PURE__ */
|
|
289
|
+
/* @__PURE__ */ r(a, { children: "to select" })
|
|
302
290
|
] }),
|
|
303
|
-
/* @__PURE__ */
|
|
291
|
+
/* @__PURE__ */ r(a, { children: "suggestions" })
|
|
304
292
|
] }) }),
|
|
305
|
-
/* @__PURE__ */
|
|
306
|
-
/* @__PURE__ */
|
|
307
|
-
if (
|
|
293
|
+
/* @__PURE__ */ r(Me, { asChild: !0, children: /* @__PURE__ */ s("div", { ref: H, ...he("editor", te), children: [
|
|
294
|
+
/* @__PURE__ */ r(fe, { width: "100%", height: "100%", value: oe, theme: ue, readOnly: N || ee, editable: !N, extensions: ae, "aria-disabled": N, className: "editor__control", onChange: (e) => {
|
|
295
|
+
if (I(e), t === "json")
|
|
308
296
|
try {
|
|
309
|
-
const
|
|
310
|
-
|
|
297
|
+
const d = JSON.parse(e);
|
|
298
|
+
q?.(d), Z?.setValue(d);
|
|
311
299
|
} catch {
|
|
312
300
|
}
|
|
313
301
|
else
|
|
314
|
-
|
|
315
|
-
}, onUpdate:
|
|
316
|
-
|
|
317
|
-
const
|
|
318
|
-
return
|
|
302
|
+
q?.(e);
|
|
303
|
+
}, onUpdate: ce, basicSetup: re }),
|
|
304
|
+
p && Array.from(ne.entries()).map(([e, d]) => {
|
|
305
|
+
const n = p[d.type];
|
|
306
|
+
return n ? K(/* @__PURE__ */ r("div", { style: {
|
|
319
307
|
display: "contents"
|
|
320
|
-
}, children:
|
|
321
|
-
content:
|
|
322
|
-
}) }, e.outerHTML +
|
|
308
|
+
}, children: n({
|
|
309
|
+
content: d.value
|
|
310
|
+
}) }, e.outerHTML + d.value), e) : null;
|
|
323
311
|
}),
|
|
324
|
-
|
|
312
|
+
g && K(/* @__PURE__ */ r("div", { ref: R, style: {
|
|
325
313
|
position: "fixed",
|
|
326
|
-
top:
|
|
327
|
-
left:
|
|
314
|
+
top: g.position.top,
|
|
315
|
+
left: g.position.left,
|
|
328
316
|
zIndex: 9999
|
|
329
|
-
}, children:
|
|
317
|
+
}, children: g.component }, g.position.top + "-" + g.position.left), document.body)
|
|
330
318
|
] }) }),
|
|
331
|
-
/* @__PURE__ */
|
|
332
|
-
/* @__PURE__ */
|
|
319
|
+
/* @__PURE__ */ r(G, { orientation: "vertical", children: /* @__PURE__ */ r(Q, {}) }),
|
|
320
|
+
/* @__PURE__ */ r(G, { orientation: "horizontal", children: /* @__PURE__ */ r(Q, {}) })
|
|
333
321
|
] });
|
|
334
322
|
};
|
|
335
323
|
export {
|
|
336
|
-
|
|
324
|
+
ur as Editor
|
|
337
325
|
};
|