@pibit.ai/cure-design-system 0.6.49 → 0.6.50
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/code-editor/chrome.d.ts +9 -0
- package/dist/code-editor/chrome.d.ts.map +1 -0
- package/dist/code-editor/chrome.js +77 -0
- package/dist/code-editor/code-editor.d.ts.map +1 -1
- package/dist/code-editor/code-editor.js +97 -161
- package/dist/code-editor/diff-editor.d.ts +46 -0
- package/dist/code-editor/diff-editor.d.ts.map +1 -0
- package/dist/code-editor/diff-editor.js +178 -0
- package/dist/code-editor/index.d.ts +1 -0
- package/dist/code-editor/index.d.ts.map +1 -1
- package/dist/code-editor/index.js +10 -8
- package/dist/styles/components.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { HighlightStyle } from '@codemirror/language';
|
|
2
|
+
export declare const PRIMARY_TEXT = "var(--color-text-primary)";
|
|
3
|
+
export declare const SYNTAX_KEY = "var(--color-utility-warning-600)";
|
|
4
|
+
export declare const SYNTAX_BOOL = "var(--color-utility-blue-600)";
|
|
5
|
+
export declare const SYNTAX_NUMBER = "var(--color-utility-success-600)";
|
|
6
|
+
export declare const MONOSPACE_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
|
|
7
|
+
export declare const codeSyntaxHighlight: HighlightStyle;
|
|
8
|
+
export declare const codeEditorChromeTheme: import('@codemirror/state').Extension;
|
|
9
|
+
//# sourceMappingURL=chrome.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../src/code-editor/chrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAUtD,eAAO,MAAM,YAAY,8BAA8B,CAAC;AACxD,eAAO,MAAM,UAAU,qCAAqC,CAAC;AAC7D,eAAO,MAAM,WAAW,kCAAkC,CAAC;AAC3D,eAAO,MAAM,aAAa,qCAAqC,CAAC;AAEhE,eAAO,MAAM,eAAe,qEACwC,CAAC;AAErE,eAAO,MAAM,mBAAmB,gBA0B9B,CAAC;AAEH,eAAO,MAAM,qBAAqB,uCAsChC,CAAC"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { HighlightStyle as a } from "@codemirror/language";
|
|
2
|
+
import { EditorView as e } from "@codemirror/view";
|
|
3
|
+
import { tags as o } from "@lezer/highlight";
|
|
4
|
+
const r = "var(--color-text-primary)", t = "var(--color-utility-warning-600)", c = "var(--color-utility-blue-600)", l = "var(--color-utility-success-600)", m = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", p = a.define([
|
|
5
|
+
{ tag: o.propertyName, color: t },
|
|
6
|
+
{ tag: o.definition(o.propertyName), color: t },
|
|
7
|
+
{ tag: o.string, color: t },
|
|
8
|
+
{ tag: o.special(o.string), color: t },
|
|
9
|
+
{ tag: o.attributeValue, color: t },
|
|
10
|
+
{ tag: o.bool, color: c },
|
|
11
|
+
{ tag: o.null, color: c },
|
|
12
|
+
{ tag: o.number, color: l },
|
|
13
|
+
{ tag: o.keyword, color: r },
|
|
14
|
+
{ tag: o.controlKeyword, color: r },
|
|
15
|
+
{ tag: o.operator, color: r },
|
|
16
|
+
{ tag: o.variableName, color: r },
|
|
17
|
+
{ tag: o.typeName, color: r },
|
|
18
|
+
{ tag: o.className, color: r },
|
|
19
|
+
{ tag: o.comment, color: r },
|
|
20
|
+
{ tag: o.meta, color: r },
|
|
21
|
+
{ tag: o.tagName, color: r },
|
|
22
|
+
{ tag: o.attributeName, color: t },
|
|
23
|
+
{ tag: o.bracket, color: r },
|
|
24
|
+
{ tag: o.punctuation, color: r },
|
|
25
|
+
{ tag: o.regexp, color: t },
|
|
26
|
+
{ tag: o.name, color: r },
|
|
27
|
+
{ tag: o.atom, color: r },
|
|
28
|
+
{ tag: o.labelName, color: r },
|
|
29
|
+
{ tag: o.content, color: r }
|
|
30
|
+
]), d = e.theme({
|
|
31
|
+
"&": {
|
|
32
|
+
backgroundColor: "var(--color-bg-primary)"
|
|
33
|
+
},
|
|
34
|
+
".cm-scroller": {
|
|
35
|
+
backgroundColor: "var(--color-bg-primary)"
|
|
36
|
+
},
|
|
37
|
+
".cm-content": {
|
|
38
|
+
padding: "8px 12px",
|
|
39
|
+
caretColor: r
|
|
40
|
+
},
|
|
41
|
+
".cm-gutters": {
|
|
42
|
+
backgroundColor: "var(--color-bg-primary)",
|
|
43
|
+
color: "var(--color-text-tertiary)",
|
|
44
|
+
borderRight: "1px solid var(--color-border-secondary)"
|
|
45
|
+
},
|
|
46
|
+
".cm-lineNumbers .cm-gutterElement": {
|
|
47
|
+
padding: "0 8px 0 12px",
|
|
48
|
+
minWidth: "24px"
|
|
49
|
+
},
|
|
50
|
+
".cm-foldGutter .cm-gutterElement": {
|
|
51
|
+
padding: "0 2px"
|
|
52
|
+
},
|
|
53
|
+
".cm-activeLine": {
|
|
54
|
+
backgroundColor: "var(--color-bg-primary_hover)"
|
|
55
|
+
},
|
|
56
|
+
".cm-activeLineGutter": {
|
|
57
|
+
backgroundColor: "var(--color-bg-primary)"
|
|
58
|
+
},
|
|
59
|
+
".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
|
|
60
|
+
backgroundColor: "var(--color-bg-secondary) !important"
|
|
61
|
+
},
|
|
62
|
+
".cm-cursor": {
|
|
63
|
+
borderLeftColor: r
|
|
64
|
+
},
|
|
65
|
+
".cm-placeholder": {
|
|
66
|
+
color: "var(--color-text-placeholder)"
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
export {
|
|
70
|
+
m as MONOSPACE_STACK,
|
|
71
|
+
r as PRIMARY_TEXT,
|
|
72
|
+
c as SYNTAX_BOOL,
|
|
73
|
+
t as SYNTAX_KEY,
|
|
74
|
+
l as SYNTAX_NUMBER,
|
|
75
|
+
d as codeEditorChromeTheme,
|
|
76
|
+
p as codeSyntaxHighlight
|
|
77
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../src/code-editor/code-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAgC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAmB,EACjB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EAChB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../src/code-editor/code-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAgC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAmB,EACjB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EAChB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO9C,OAAO,EAAyB,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAEpD,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+EAA+E;IAC/E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAElC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,sGAAsG;IACtG,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IAEzB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAE/B,oDAAoD;IACpD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEhE,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAExC,oFAAoF;IACpF,SAAS,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAEpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,iDAAiD;IACjD,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IAEzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA2CD,eAAO,MAAM,UAAU,GAAI,uXA8BxB,eAAe,4CA6HjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,76 +1,12 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useMemo as A, useState as
|
|
3
|
-
import
|
|
4
|
-
import { syntaxHighlighting as
|
|
5
|
-
import { EditorView as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { loadLanguageExtension as
|
|
9
|
-
const
|
|
10
|
-
{ tag: o.propertyName, color: n },
|
|
11
|
-
{ tag: o.definition(o.propertyName), color: n },
|
|
12
|
-
{ tag: o.string, color: n },
|
|
13
|
-
{ tag: o.special(o.string), color: n },
|
|
14
|
-
{ tag: o.attributeValue, color: n },
|
|
15
|
-
{ tag: o.bool, color: R },
|
|
16
|
-
{ tag: o.null, color: R },
|
|
17
|
-
{ tag: o.number, color: lo },
|
|
18
|
-
{ tag: o.keyword, color: r },
|
|
19
|
-
{ tag: o.controlKeyword, color: r },
|
|
20
|
-
{ tag: o.operator, color: r },
|
|
21
|
-
{ tag: o.variableName, color: r },
|
|
22
|
-
{ tag: o.typeName, color: r },
|
|
23
|
-
{ tag: o.className, color: r },
|
|
24
|
-
{ tag: o.comment, color: r },
|
|
25
|
-
{ tag: o.meta, color: r },
|
|
26
|
-
{ tag: o.tagName, color: r },
|
|
27
|
-
{ tag: o.attributeName, color: n },
|
|
28
|
-
{ tag: o.bracket, color: r },
|
|
29
|
-
{ tag: o.punctuation, color: r },
|
|
30
|
-
{ tag: o.regexp, color: n },
|
|
31
|
-
{ tag: o.name, color: r },
|
|
32
|
-
{ tag: o.atom, color: r },
|
|
33
|
-
{ tag: o.labelName, color: r },
|
|
34
|
-
{ tag: o.content, color: r }
|
|
35
|
-
]), no = X.theme({
|
|
36
|
-
"&": {
|
|
37
|
-
backgroundColor: "var(--color-bg-primary)"
|
|
38
|
-
},
|
|
39
|
-
".cm-scroller": {
|
|
40
|
-
backgroundColor: "var(--color-bg-primary)"
|
|
41
|
-
},
|
|
42
|
-
".cm-content": {
|
|
43
|
-
padding: "8px 12px",
|
|
44
|
-
caretColor: r
|
|
45
|
-
},
|
|
46
|
-
".cm-gutters": {
|
|
47
|
-
backgroundColor: "var(--color-bg-primary)",
|
|
48
|
-
color: "var(--color-text-tertiary)",
|
|
49
|
-
borderRight: "1px solid var(--color-border-secondary)"
|
|
50
|
-
},
|
|
51
|
-
".cm-lineNumbers .cm-gutterElement": {
|
|
52
|
-
padding: "0 8px 0 12px",
|
|
53
|
-
minWidth: "24px"
|
|
54
|
-
},
|
|
55
|
-
".cm-foldGutter .cm-gutterElement": {
|
|
56
|
-
padding: "0 2px"
|
|
57
|
-
},
|
|
58
|
-
".cm-activeLine": {
|
|
59
|
-
backgroundColor: "var(--color-bg-primary_hover)"
|
|
60
|
-
},
|
|
61
|
-
".cm-activeLineGutter": {
|
|
62
|
-
backgroundColor: "var(--color-bg-primary)"
|
|
63
|
-
},
|
|
64
|
-
".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
|
|
65
|
-
backgroundColor: "var(--color-bg-secondary) !important"
|
|
66
|
-
},
|
|
67
|
-
".cm-cursor": {
|
|
68
|
-
borderLeftColor: r
|
|
69
|
-
},
|
|
70
|
-
".cm-placeholder": {
|
|
71
|
-
color: "var(--color-text-placeholder)"
|
|
72
|
-
}
|
|
73
|
-
}), ao = (e, l) => l || {
|
|
1
|
+
import { jsx as H, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as A, useState as J, useEffect as K } from "react";
|
|
3
|
+
import Q from "@uiw/react-codemirror";
|
|
4
|
+
import { syntaxHighlighting as V } from "@codemirror/language";
|
|
5
|
+
import { EditorView as Y } from "@codemirror/view";
|
|
6
|
+
import { cx as g } from "../utils/cn.js";
|
|
7
|
+
import { codeEditorChromeTheme as U, codeSyntaxHighlight as Z, MONOSPACE_STACK as W } from "./chrome.js";
|
|
8
|
+
import { loadLanguageExtension as ee } from "./languages.js";
|
|
9
|
+
const C = 22, te = (e, o) => o || {
|
|
74
10
|
javascript: "// Enter your JavaScript code here",
|
|
75
11
|
typescript: "// Enter your TypeScript code here",
|
|
76
12
|
python: "# Enter your Python code here",
|
|
@@ -85,125 +21,125 @@ const to = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", H
|
|
|
85
21
|
markdown: "# Enter your Markdown here",
|
|
86
22
|
bash: "# Enter your bash script here",
|
|
87
23
|
shell: "# Enter your shell script here"
|
|
88
|
-
}[e],
|
|
89
|
-
const [
|
|
90
|
-
return
|
|
91
|
-
let
|
|
92
|
-
return
|
|
93
|
-
|
|
24
|
+
}[e], oe = (e) => {
|
|
25
|
+
const [o, l] = J(null);
|
|
26
|
+
return K(() => {
|
|
27
|
+
let c = !1;
|
|
28
|
+
return ee(e).then((d) => {
|
|
29
|
+
c || l({ language: e, extension: d });
|
|
94
30
|
}), () => {
|
|
95
|
-
|
|
31
|
+
c = !0;
|
|
96
32
|
};
|
|
97
|
-
}, [e]), (
|
|
98
|
-
},
|
|
33
|
+
}, [e]), (o == null ? void 0 : o.language) === e ? o.extension : null;
|
|
34
|
+
}, ue = ({
|
|
99
35
|
value: e = "",
|
|
100
|
-
onChange:
|
|
101
|
-
language:
|
|
102
|
-
placeholder:
|
|
103
|
-
isDisabled:
|
|
104
|
-
isReadOnly:
|
|
36
|
+
onChange: o,
|
|
37
|
+
language: l = "python",
|
|
38
|
+
placeholder: c,
|
|
39
|
+
isDisabled: d = !1,
|
|
40
|
+
isReadOnly: T = !1,
|
|
105
41
|
isInvalid: j = !1,
|
|
106
|
-
rows:
|
|
107
|
-
className:
|
|
108
|
-
showLineNumbers:
|
|
109
|
-
autoClosePairs:
|
|
110
|
-
theme:
|
|
111
|
-
fillHeight:
|
|
112
|
-
growWithContent:
|
|
113
|
-
showFooter:
|
|
114
|
-
lineWrapping:
|
|
115
|
-
highlightActiveLine:
|
|
116
|
-
fitContent:
|
|
117
|
-
minRows:
|
|
118
|
-
extensions:
|
|
119
|
-
lint:
|
|
42
|
+
rows: E = 12,
|
|
43
|
+
className: v = "",
|
|
44
|
+
showLineNumbers: s = !1,
|
|
45
|
+
autoClosePairs: w = !0,
|
|
46
|
+
theme: u = "none",
|
|
47
|
+
fillHeight: i = !1,
|
|
48
|
+
growWithContent: f = !1,
|
|
49
|
+
showFooter: k = !0,
|
|
50
|
+
lineWrapping: M = !1,
|
|
51
|
+
highlightActiveLine: P,
|
|
52
|
+
fitContent: a = !1,
|
|
53
|
+
minRows: G = 1,
|
|
54
|
+
extensions: p,
|
|
55
|
+
lint: m,
|
|
120
56
|
onCreateEditor: I,
|
|
121
|
-
onUpdate:
|
|
122
|
-
editorRef:
|
|
57
|
+
onUpdate: N,
|
|
58
|
+
editorRef: q,
|
|
123
59
|
chromeless: t = !1,
|
|
124
|
-
height:
|
|
125
|
-
basicSetup:
|
|
126
|
-
onFocus:
|
|
127
|
-
onBlur:
|
|
60
|
+
height: O,
|
|
61
|
+
basicSetup: S,
|
|
62
|
+
onFocus: R,
|
|
63
|
+
onBlur: X
|
|
128
64
|
}) => {
|
|
129
|
-
const
|
|
130
|
-
const
|
|
131
|
-
return
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
),
|
|
135
|
-
}, [
|
|
136
|
-
() =>
|
|
137
|
-
lineNumbers:
|
|
138
|
-
foldGutter:
|
|
139
|
-
closeBrackets:
|
|
140
|
-
highlightActiveLine:
|
|
141
|
-
highlightActiveLineGutter:
|
|
142
|
-
bracketMatching:
|
|
143
|
-
autocompletion:
|
|
144
|
-
indentOnInput:
|
|
65
|
+
const r = !d && !T, x = P ?? r, y = oe(l), b = !t && u === "none", $ = A(() => {
|
|
66
|
+
const n = [];
|
|
67
|
+
return y && n.push(y), M && n.push(Y.lineWrapping), b && n.push(
|
|
68
|
+
U,
|
|
69
|
+
V(Z)
|
|
70
|
+
), m && n.push(m), p && n.push(...p), n;
|
|
71
|
+
}, [y, M, b, m, p]), z = A(
|
|
72
|
+
() => S ?? {
|
|
73
|
+
lineNumbers: s,
|
|
74
|
+
foldGutter: s,
|
|
75
|
+
closeBrackets: w && r,
|
|
76
|
+
highlightActiveLine: x,
|
|
77
|
+
highlightActiveLineGutter: s && x,
|
|
78
|
+
bracketMatching: r,
|
|
79
|
+
autocompletion: r,
|
|
80
|
+
indentOnInput: r
|
|
145
81
|
},
|
|
146
82
|
[
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
83
|
+
S,
|
|
84
|
+
s,
|
|
85
|
+
w,
|
|
86
|
+
r,
|
|
87
|
+
x
|
|
152
88
|
]
|
|
153
|
-
), _ = `${
|
|
154
|
-
`).length),
|
|
155
|
-
|
|
89
|
+
), _ = `${E * C}px`, B = te(l, c), D = Math.max(G, (e ?? "").split(`
|
|
90
|
+
`).length), F = `${Math.min(E, D) * C}px`, L = /* @__PURE__ */ H(
|
|
91
|
+
Q,
|
|
156
92
|
{
|
|
157
|
-
ref:
|
|
93
|
+
ref: q,
|
|
158
94
|
value: e,
|
|
159
|
-
onChange:
|
|
160
|
-
onFocus:
|
|
161
|
-
onBlur:
|
|
95
|
+
onChange: o,
|
|
96
|
+
onFocus: R,
|
|
97
|
+
onBlur: X,
|
|
162
98
|
onCreateEditor: I,
|
|
163
|
-
onUpdate:
|
|
164
|
-
theme: t ?
|
|
99
|
+
onUpdate: N,
|
|
100
|
+
theme: t ? u === "none" ? "light" : u : "none",
|
|
165
101
|
extensions: $,
|
|
166
102
|
basicSetup: z,
|
|
167
|
-
placeholder:
|
|
168
|
-
editable:
|
|
169
|
-
height:
|
|
170
|
-
minHeight: t ? void 0 :
|
|
171
|
-
maxHeight: !t &&
|
|
172
|
-
className:
|
|
173
|
-
!t &&
|
|
174
|
-
!t &&
|
|
175
|
-
!t &&
|
|
176
|
-
t &&
|
|
103
|
+
placeholder: B,
|
|
104
|
+
editable: r,
|
|
105
|
+
height: O ?? (i ? "100%" : a ? F : void 0),
|
|
106
|
+
minHeight: t ? void 0 : i ? "100%" : a || f ? void 0 : _,
|
|
107
|
+
maxHeight: !t && a ? _ : void 0,
|
|
108
|
+
className: g(
|
|
109
|
+
!t && i && "h-full min-h-0 w-full [&_.cm-editor]:h-full [&_.cm-editor]:w-full [&_.cm-scroller]:overflow-auto",
|
|
110
|
+
!t && f && "flex w-full grow flex-col [&_.cm-editor]:w-full [&_.cm-editor]:grow [&_.cm-scroller]:overflow-visible",
|
|
111
|
+
!t && a && "[&_.cm-scroller]:overflow-auto",
|
|
112
|
+
t && v
|
|
177
113
|
),
|
|
178
|
-
style: t ? void 0 : { fontSize: 13, fontFamily:
|
|
114
|
+
style: t ? void 0 : { fontSize: 13, fontFamily: W }
|
|
179
115
|
}
|
|
180
116
|
);
|
|
181
|
-
return t ? L : /* @__PURE__ */
|
|
117
|
+
return t ? L : /* @__PURE__ */ h(
|
|
182
118
|
"div",
|
|
183
119
|
{
|
|
184
|
-
className:
|
|
185
|
-
|
|
186
|
-
|
|
120
|
+
className: g(
|
|
121
|
+
i ? "flex h-full min-h-0 flex-1 flex-col" : f ? "flex grow flex-col" : "space-y-2",
|
|
122
|
+
v
|
|
187
123
|
),
|
|
188
124
|
children: [
|
|
189
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ H(
|
|
190
126
|
"div",
|
|
191
127
|
{
|
|
192
|
-
className:
|
|
128
|
+
className: g(
|
|
193
129
|
"overflow-hidden rounded-lg border border-secondary",
|
|
194
|
-
|
|
195
|
-
|
|
130
|
+
i && "flex min-h-0 w-full flex-1 flex-col",
|
|
131
|
+
f && "flex w-full grow flex-col",
|
|
196
132
|
j ? "border-error-500" : "border-secondary"
|
|
197
133
|
),
|
|
198
134
|
children: L
|
|
199
135
|
}
|
|
200
136
|
),
|
|
201
|
-
|
|
202
|
-
/* @__PURE__ */
|
|
137
|
+
k && e && /* @__PURE__ */ h("div", { className: "flex justify-between text-xs text-tertiary", children: [
|
|
138
|
+
/* @__PURE__ */ h("span", { children: [
|
|
203
139
|
e.length,
|
|
204
140
|
" characters"
|
|
205
141
|
] }),
|
|
206
|
-
/* @__PURE__ */
|
|
142
|
+
/* @__PURE__ */ h("span", { children: [
|
|
207
143
|
e.split(`
|
|
208
144
|
`).length,
|
|
209
145
|
" lines"
|
|
@@ -214,6 +150,6 @@ const to = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", H
|
|
|
214
150
|
);
|
|
215
151
|
};
|
|
216
152
|
export {
|
|
217
|
-
|
|
218
|
-
|
|
153
|
+
ue as CodeEditor,
|
|
154
|
+
ue as default
|
|
219
155
|
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Extension } from '@codemirror/state';
|
|
2
|
+
import { EditorView } from '@codemirror/view';
|
|
3
|
+
import { CodeLanguage } from './languages';
|
|
4
|
+
export interface DiffEditorViews {
|
|
5
|
+
/** The original (left) editor in side-by-side layout; null in unified. */
|
|
6
|
+
a: EditorView | null;
|
|
7
|
+
/** The modified editor: right side, or the single unified editor. */
|
|
8
|
+
b: EditorView | null;
|
|
9
|
+
}
|
|
10
|
+
export interface DiffEditorProps {
|
|
11
|
+
/** The original version (left / deleted side). */
|
|
12
|
+
original: string;
|
|
13
|
+
/** The modified version (right side, or the unified document). */
|
|
14
|
+
modified: string;
|
|
15
|
+
/** Same languages as CodeEditor; the pack loads on demand. */
|
|
16
|
+
language?: CodeLanguage;
|
|
17
|
+
/** @default "side-by-side" */
|
|
18
|
+
layout?: "side-by-side" | "unified";
|
|
19
|
+
/** @default true — set false to edit `modified` and receive onChange. */
|
|
20
|
+
readOnly?: boolean;
|
|
21
|
+
/** Changes to the modified document (readOnly={false}). */
|
|
22
|
+
onChange?: (value: string) => void;
|
|
23
|
+
/** Hide unchanged regions. Pass true or @codemirror/merge's options. */
|
|
24
|
+
collapseUnchanged?: boolean | {
|
|
25
|
+
margin?: number;
|
|
26
|
+
minSize?: number;
|
|
27
|
+
};
|
|
28
|
+
/** @default true */
|
|
29
|
+
showLineNumbers?: boolean;
|
|
30
|
+
lineWrapping?: boolean;
|
|
31
|
+
/** Character-level change highlighting inside changed lines. @default true */
|
|
32
|
+
highlightChanges?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Extra extensions, applied to every pane. Compared by reference — memoize
|
|
35
|
+
* the array (or hoist it) or the editors rebuild on every render.
|
|
36
|
+
*/
|
|
37
|
+
extensions?: Extension[];
|
|
38
|
+
/** The created view(s), for scroll control; called again on rebuild. */
|
|
39
|
+
onCreateViews?: (views: DiffEditorViews) => void;
|
|
40
|
+
className?: string;
|
|
41
|
+
/** Explicit height for the container (e.g. "100%"). */
|
|
42
|
+
height?: string;
|
|
43
|
+
}
|
|
44
|
+
export declare const DiffEditor: ({ original, modified, language, layout, readOnly, onChange, collapseUnchanged, showLineNumbers, lineWrapping, highlightChanges, extensions: extraExtensions, onCreateViews, className, height, }: DiffEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export default DiffEditor;
|
|
46
|
+
//# sourceMappingURL=diff-editor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"diff-editor.d.ts","sourceRoot":"","sources":["../../src/code-editor/diff-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAO3D,OAAO,EAAyB,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACrB,qEAAqE;IACrE,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACpC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,wEAAwE;IACxE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2CD,eAAO,MAAM,UAAU,GAAI,kMAexB,eAAe,4CA0KjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import { jsx as A } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as m, useState as F, useEffect as C, useMemo as G } from "react";
|
|
3
|
+
import { syntaxHighlighting as H } from "@codemirror/language";
|
|
4
|
+
import { MergeView as N, unifiedMergeView as V, getOriginalDoc as K, originalDocChangeEffect as P } from "@codemirror/merge";
|
|
5
|
+
import { EditorState as j, ChangeSet as q } from "@codemirror/state";
|
|
6
|
+
import { EditorView as s, lineNumbers as B } from "@codemirror/view";
|
|
7
|
+
import { cx as J } from "../utils/cn.js";
|
|
8
|
+
import { codeEditorChromeTheme as Q, codeSyntaxHighlight as U, MONOSPACE_STACK as W } from "./chrome.js";
|
|
9
|
+
import { loadLanguageExtension as X } from "./languages.js";
|
|
10
|
+
const Y = s.theme({
|
|
11
|
+
// Modified side: added / changed lines and characters.
|
|
12
|
+
"&.cm-merge-b .cm-changedLine, & .cm-insertedLine": {
|
|
13
|
+
backgroundColor: "color-mix(in srgb, var(--color-utility-success-100) 65%, transparent)"
|
|
14
|
+
},
|
|
15
|
+
"&.cm-merge-b .cm-changedText, & ins.cm-insertedLine": {
|
|
16
|
+
backgroundImage: "none",
|
|
17
|
+
backgroundColor: "color-mix(in srgb, var(--color-utility-success-200) 70%, transparent)",
|
|
18
|
+
textDecoration: "none"
|
|
19
|
+
},
|
|
20
|
+
"&.cm-merge-b .cm-changedLineGutter": {
|
|
21
|
+
backgroundColor: "var(--color-utility-success-500)"
|
|
22
|
+
},
|
|
23
|
+
// Original side: removed / changed lines and characters.
|
|
24
|
+
"&.cm-merge-a .cm-changedLine, & .cm-deletedChunk": {
|
|
25
|
+
backgroundColor: "color-mix(in srgb, var(--color-utility-error-50) 65%, transparent)"
|
|
26
|
+
},
|
|
27
|
+
"&.cm-merge-a .cm-changedText, & .cm-deletedChunk .cm-deletedText": {
|
|
28
|
+
backgroundImage: "none",
|
|
29
|
+
backgroundColor: "color-mix(in srgb, var(--color-utility-error-100) 80%, transparent)",
|
|
30
|
+
textDecoration: "none"
|
|
31
|
+
},
|
|
32
|
+
"&.cm-merge-a .cm-changedLineGutter": {
|
|
33
|
+
backgroundColor: "var(--color-utility-error-500)"
|
|
34
|
+
},
|
|
35
|
+
".cm-collapsedLines": {
|
|
36
|
+
color: "var(--color-text-tertiary)",
|
|
37
|
+
background: "var(--color-bg-secondary)"
|
|
38
|
+
}
|
|
39
|
+
}), Z = s.theme({
|
|
40
|
+
"&": { fontSize: "13px" },
|
|
41
|
+
".cm-content": { fontFamily: W }
|
|
42
|
+
}), ae = ({
|
|
43
|
+
original: o,
|
|
44
|
+
modified: d,
|
|
45
|
+
language: f = "json",
|
|
46
|
+
layout: i = "side-by-side",
|
|
47
|
+
readOnly: x = !0,
|
|
48
|
+
onChange: E,
|
|
49
|
+
collapseUnchanged: y = !1,
|
|
50
|
+
showLineNumbers: L = !0,
|
|
51
|
+
lineWrapping: v = !1,
|
|
52
|
+
highlightChanges: k = !0,
|
|
53
|
+
extensions: D,
|
|
54
|
+
onCreateViews: T,
|
|
55
|
+
className: w,
|
|
56
|
+
height: O
|
|
57
|
+
}) => {
|
|
58
|
+
const M = m(null), [g, z] = F(null), b = m(E);
|
|
59
|
+
b.current = E;
|
|
60
|
+
const p = m(T);
|
|
61
|
+
p.current = T;
|
|
62
|
+
const a = m({ a: null, b: null }), l = m({ original: o, modified: d });
|
|
63
|
+
l.current = { original: o, modified: d }, C(() => {
|
|
64
|
+
let n = !1;
|
|
65
|
+
return X(f).then((e) => {
|
|
66
|
+
n || z({ language: f, extension: e });
|
|
67
|
+
}), () => {
|
|
68
|
+
n = !0;
|
|
69
|
+
};
|
|
70
|
+
}, [f]);
|
|
71
|
+
const S = (g == null ? void 0 : g.language) === f, h = G(
|
|
72
|
+
() => y === !0 ? { margin: 3, minSize: 4 } : y || void 0,
|
|
73
|
+
[y]
|
|
74
|
+
);
|
|
75
|
+
return C(() => {
|
|
76
|
+
var I;
|
|
77
|
+
const n = M.current;
|
|
78
|
+
if (!n || !S) return;
|
|
79
|
+
const e = [
|
|
80
|
+
g.extension,
|
|
81
|
+
Q,
|
|
82
|
+
H(U),
|
|
83
|
+
Y,
|
|
84
|
+
Z,
|
|
85
|
+
...L ? [B()] : [],
|
|
86
|
+
...v ? [s.lineWrapping] : [],
|
|
87
|
+
...D ?? []
|
|
88
|
+
], c = [
|
|
89
|
+
j.readOnly.of(!0),
|
|
90
|
+
s.editable.of(!1)
|
|
91
|
+
], r = s.updateListener.of((R) => {
|
|
92
|
+
var _;
|
|
93
|
+
R.docChanged && ((_ = b.current) == null || _.call(b, R.state.doc.toString()));
|
|
94
|
+
});
|
|
95
|
+
let t = null, u = null;
|
|
96
|
+
return i === "side-by-side" ? (t = new N({
|
|
97
|
+
parent: n,
|
|
98
|
+
a: {
|
|
99
|
+
doc: l.current.original,
|
|
100
|
+
extensions: [...e, ...c]
|
|
101
|
+
},
|
|
102
|
+
b: {
|
|
103
|
+
doc: l.current.modified,
|
|
104
|
+
extensions: [
|
|
105
|
+
...e,
|
|
106
|
+
...x ? c : [r]
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
gutter: !0,
|
|
110
|
+
highlightChanges: k,
|
|
111
|
+
collapseUnchanged: h
|
|
112
|
+
}), a.current = { a: t.a, b: t.b }) : (u = new s({
|
|
113
|
+
parent: n,
|
|
114
|
+
state: j.create({
|
|
115
|
+
doc: l.current.modified,
|
|
116
|
+
extensions: [
|
|
117
|
+
...e,
|
|
118
|
+
...V({
|
|
119
|
+
original: l.current.original,
|
|
120
|
+
highlightChanges: k,
|
|
121
|
+
gutter: !0,
|
|
122
|
+
allowInlineDiffs: !0,
|
|
123
|
+
mergeControls: !1,
|
|
124
|
+
...h ? { collapseUnchanged: h } : {}
|
|
125
|
+
}),
|
|
126
|
+
...x ? c : [r]
|
|
127
|
+
]
|
|
128
|
+
})
|
|
129
|
+
}), a.current = { a: null, b: u }), (I = p.current) == null || I.call(p, a.current), () => {
|
|
130
|
+
t == null || t.destroy(), u == null || u.destroy(), a.current = { a: null, b: null };
|
|
131
|
+
};
|
|
132
|
+
}, [
|
|
133
|
+
i,
|
|
134
|
+
x,
|
|
135
|
+
S,
|
|
136
|
+
L,
|
|
137
|
+
v,
|
|
138
|
+
k,
|
|
139
|
+
h,
|
|
140
|
+
D
|
|
141
|
+
]), C(() => {
|
|
142
|
+
const { a: n, b: e } = a.current, c = (r, t) => {
|
|
143
|
+
r && r.state.doc.toString() !== t && r.dispatch({
|
|
144
|
+
changes: { from: 0, to: r.state.doc.length, insert: t }
|
|
145
|
+
});
|
|
146
|
+
};
|
|
147
|
+
if (i === "side-by-side")
|
|
148
|
+
c(n, o);
|
|
149
|
+
else if (e) {
|
|
150
|
+
const r = K(e.state).toString();
|
|
151
|
+
r !== o && e.dispatch({
|
|
152
|
+
effects: P(
|
|
153
|
+
e.state,
|
|
154
|
+
q.of(
|
|
155
|
+
{ from: 0, to: r.length, insert: o },
|
|
156
|
+
r.length
|
|
157
|
+
)
|
|
158
|
+
)
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
c(e, d);
|
|
162
|
+
}, [o, d, i, S]), /* @__PURE__ */ A(
|
|
163
|
+
"div",
|
|
164
|
+
{
|
|
165
|
+
ref: M,
|
|
166
|
+
style: O ? { height: O } : void 0,
|
|
167
|
+
className: J(
|
|
168
|
+
"cure-diff-editor overflow-hidden",
|
|
169
|
+
i === "side-by-side" && "[&_.cm-mergeView]:h-full [&_.cm-mergeViewEditors]:h-full",
|
|
170
|
+
w
|
|
171
|
+
)
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
};
|
|
175
|
+
export {
|
|
176
|
+
ae as DiffEditor,
|
|
177
|
+
ae as default
|
|
178
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { cureCodeMirrorTheme, cureEditorChrome, cureHighlightStyle, } from './theme';
|
|
2
2
|
export { CodeEditor, type CodeEditorProps } from './code-editor';
|
|
3
|
+
export { DiffEditor, type DiffEditorProps, type DiffEditorViews, } from './diff-editor';
|
|
3
4
|
export { type CodeLanguage, loadLanguageExtension } from './languages';
|
|
4
5
|
export { JsonCodeEditor, type JsonCodeEditorProps } from './json-code-editor';
|
|
5
6
|
export { formatJsonEditorValue } from './formatJsonEditorValue';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/code-editor/index.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,KAAK,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/code-editor/index.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
|