@sanity/code-input 3.0.0-v3-studio.1 → 3.0.0-v3-studio.4
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/README.md +8 -15
- package/lib/cjs/index.js +145 -79
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/index.js +145 -76
- package/lib/esm/index.js.map +1 -1
- package/lib/types/index.d.ts +6 -2
- package/lib/types/index.d.ts.map +1 -1
- package/package.json +25 -8
- package/src/CodeInput.tsx +50 -32
- package/src/PreviewCode.tsx +1 -1
- package/src/ace-editor/AceEditor-client.test.tsx +24 -0
- package/src/ace-editor/AceEditor-server.test.tsx +18 -0
- package/src/ace-editor/AceEditorLazy.tsx +19 -0
- package/src/{editorSupport.ts → ace-editor/editorSupport.ts} +3 -0
- package/src/{groq.ts → ace-editor/groq.ts} +0 -0
- package/src/schema.tsx +5 -9
package/lib/esm/index.js
CHANGED
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
import {createPlugin as $gGrEF$createPlugin, useColorScheme as $gGrEF$useColorScheme} from "sanity";
|
|
2
|
-
import {jsx as $gGrEF$jsx, jsxs as $gGrEF$jsxs} from "react/jsx-runtime";
|
|
3
|
-
import {useRef as $gGrEF$useRef, useMemo as $gGrEF$useMemo, useImperativeHandle as $gGrEF$useImperativeHandle, useCallback as $gGrEF$useCallback, useEffect as $gGrEF$useEffect} from "react";
|
|
4
|
-
import {CodeBlockIcon as $gGrEF$CodeBlockIcon} from "@sanity/icons";
|
|
5
|
-
import {set as $gGrEF$set, setIfMissing as $gGrEF$setIfMissing, unset as $gGrEF$unset, MemberField as $gGrEF$MemberField} from "sanity/form";
|
|
6
|
-
import {Card as $gGrEF$Card, Select as $gGrEF$Select, Stack as $gGrEF$Stack, Box as $gGrEF$Box} from "@sanity/ui";
|
|
7
1
|
import $gGrEF$reactace from "react-ace";
|
|
8
|
-
import $gGrEF$styledcomponents, {css as $gGrEF$css} from "styled-components";
|
|
9
2
|
import "ace-builds/src-noconflict/mode-batchfile";
|
|
10
3
|
import "ace-builds/src-noconflict/mode-csharp";
|
|
11
4
|
import "ace-builds/src-noconflict/mode-css";
|
|
@@ -32,6 +25,68 @@ import "ace-builds/src-noconflict/theme-github";
|
|
|
32
25
|
import "ace-builds/src-noconflict/theme-monokai";
|
|
33
26
|
import "ace-builds/src-noconflict/theme-terminal";
|
|
34
27
|
import "ace-builds/src-noconflict/theme-tomorrow";
|
|
28
|
+
import {createPlugin as $gGrEF$createPlugin, defineType as $gGrEF$defineType, useColorScheme as $gGrEF$useColorScheme} from "sanity";
|
|
29
|
+
import {CodeBlockIcon as $gGrEF$CodeBlockIcon} from "@sanity/icons";
|
|
30
|
+
import {jsx as $gGrEF$jsx, jsxs as $gGrEF$jsxs} from "react/jsx-runtime";
|
|
31
|
+
import $gGrEF$react, {useRef as $gGrEF$useRef, useMemo as $gGrEF$useMemo, useImperativeHandle as $gGrEF$useImperativeHandle, useCallback as $gGrEF$useCallback, useEffect as $gGrEF$useEffect, Suspense as $gGrEF$Suspense, useState as $gGrEF$useState} from "react";
|
|
32
|
+
import {set as $gGrEF$set, setIfMissing as $gGrEF$setIfMissing, unset as $gGrEF$unset, MemberField as $gGrEF$MemberField} from "sanity/form";
|
|
33
|
+
import {Card as $gGrEF$Card, Select as $gGrEF$Select, Stack as $gGrEF$Stack, Box as $gGrEF$Box} from "@sanity/ui";
|
|
34
|
+
import $gGrEF$styledcomponents, {css as $gGrEF$css} from "styled-components";
|
|
35
|
+
|
|
36
|
+
function $parcel$defineInteropFlag(a) {
|
|
37
|
+
Object.defineProperty(a, '__esModule', {value: true, configurable: true});
|
|
38
|
+
}
|
|
39
|
+
function $parcel$export(e, n, v, s) {
|
|
40
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
41
|
+
}
|
|
42
|
+
var $parcel$global =
|
|
43
|
+
typeof globalThis !== 'undefined'
|
|
44
|
+
? globalThis
|
|
45
|
+
: typeof self !== 'undefined'
|
|
46
|
+
? self
|
|
47
|
+
: typeof window !== 'undefined'
|
|
48
|
+
? window
|
|
49
|
+
: typeof global !== 'undefined'
|
|
50
|
+
? global
|
|
51
|
+
: {};
|
|
52
|
+
var $parcel$modules = {};
|
|
53
|
+
var $parcel$inits = {};
|
|
54
|
+
|
|
55
|
+
var parcelRequire = $parcel$global["parcelRequire07ce"];
|
|
56
|
+
if (parcelRequire == null) {
|
|
57
|
+
parcelRequire = function(id) {
|
|
58
|
+
if (id in $parcel$modules) {
|
|
59
|
+
return $parcel$modules[id].exports;
|
|
60
|
+
}
|
|
61
|
+
if (id in $parcel$inits) {
|
|
62
|
+
var init = $parcel$inits[id];
|
|
63
|
+
delete $parcel$inits[id];
|
|
64
|
+
var module = {id: id, exports: {}};
|
|
65
|
+
$parcel$modules[id] = module;
|
|
66
|
+
init.call(module.exports, module, module.exports);
|
|
67
|
+
return module.exports;
|
|
68
|
+
}
|
|
69
|
+
var err = new Error("Cannot find module '" + id + "'");
|
|
70
|
+
err.code = 'MODULE_NOT_FOUND';
|
|
71
|
+
throw err;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
parcelRequire.register = function register(id, init) {
|
|
75
|
+
$parcel$inits[id] = init;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
$parcel$global["parcelRequire07ce"] = parcelRequire;
|
|
79
|
+
}
|
|
80
|
+
parcelRequire.register("f97Qe", function(module, exports) {
|
|
81
|
+
|
|
82
|
+
$parcel$defineInteropFlag(module.exports);
|
|
83
|
+
|
|
84
|
+
$parcel$export(module.exports, "default", () => $1e18485111e06c65$export$2e2bcd8739ae039);
|
|
85
|
+
|
|
86
|
+
parcelRequire("5F5Py");
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
35
90
|
|
|
36
91
|
|
|
37
92
|
|
|
@@ -44,30 +99,23 @@ import "ace-builds/src-noconflict/theme-tomorrow";
|
|
|
44
99
|
|
|
45
100
|
|
|
46
101
|
|
|
47
|
-
const $b67a72b22aed35f4$export$ac98e174937d3154 = (0, $gGrEF$css)`
|
|
48
|
-
.ace_editor_markers_highlight {
|
|
49
|
-
position: absolute;
|
|
50
|
-
background-color: ${({ theme: theme })=>theme.sanity.color.solid.primary.enabled.bg};
|
|
51
|
-
opacity: 0.2;
|
|
52
|
-
width: 100% !important;
|
|
53
|
-
border-radius: 0 !important;
|
|
54
|
-
}
|
|
55
|
-
`;
|
|
56
|
-
function $b67a72b22aed35f4$export$2e2bcd8739ae039(rows) {
|
|
57
|
-
return rows.map((row)=>({
|
|
58
|
-
startRow: Number(row) - 1,
|
|
59
|
-
startCol: 0,
|
|
60
|
-
endRow: Number(row) - 1,
|
|
61
|
-
endCol: Infinity,
|
|
62
|
-
className: "ace_editor_markers_highlight",
|
|
63
|
-
type: "screenLine",
|
|
64
|
-
inFront: true
|
|
65
|
-
}));
|
|
66
|
-
}
|
|
67
102
|
|
|
68
103
|
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
var $1e18485111e06c65$export$2e2bcd8739ae039 = (0, $gGrEF$reactace);
|
|
114
|
+
|
|
115
|
+
});
|
|
116
|
+
parcelRequire.register("5F5Py", function(module, exports) {
|
|
69
117
|
// Grammar from https://github.com/sanity-io/vscode-sanity
|
|
70
|
-
const $
|
|
118
|
+
const $25b57fb107cb438e$var$rules = {
|
|
71
119
|
start: [
|
|
72
120
|
{
|
|
73
121
|
include: "#query"
|
|
@@ -652,7 +700,7 @@ ace.define("ace/mode/groq_highlight_rules", [
|
|
|
652
700
|
const TextHighlightRules = acequire("./text_highlight_rules").TextHighlightRules;
|
|
653
701
|
const GroqHighlightRules = function() {
|
|
654
702
|
/* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-ignore
|
|
655
|
-
this.$rules = $
|
|
703
|
+
this.$rules = $25b57fb107cb438e$var$rules;
|
|
656
704
|
// @ts-ignore
|
|
657
705
|
this.normalizeRules();
|
|
658
706
|
/* eslint-enable @typescript-eslint/ban-ts-comment */ };
|
|
@@ -693,6 +741,7 @@ ace.define("ace/mode/groq", [
|
|
|
693
741
|
exports.Mode = Mode;
|
|
694
742
|
});
|
|
695
743
|
|
|
744
|
+
});
|
|
696
745
|
|
|
697
746
|
|
|
698
747
|
|
|
@@ -704,22 +753,26 @@ ace.define("ace/mode/groq", [
|
|
|
704
753
|
|
|
705
754
|
|
|
706
755
|
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
756
|
+
const $b67a72b22aed35f4$export$ac98e174937d3154 = (0, $gGrEF$css)`
|
|
757
|
+
.ace_editor_markers_highlight {
|
|
758
|
+
position: absolute;
|
|
759
|
+
background-color: ${({ theme: theme })=>theme.sanity.color.solid.primary.enabled.bg};
|
|
760
|
+
opacity: 0.2;
|
|
761
|
+
width: 100% !important;
|
|
762
|
+
border-radius: 0 !important;
|
|
763
|
+
}
|
|
764
|
+
`;
|
|
765
|
+
function $b67a72b22aed35f4$export$2e2bcd8739ae039(rows) {
|
|
766
|
+
return rows.map((row)=>({
|
|
767
|
+
startRow: Number(row) - 1,
|
|
768
|
+
startCol: 0,
|
|
769
|
+
endRow: Number(row) - 1,
|
|
770
|
+
endCol: Infinity,
|
|
771
|
+
className: "ace_editor_markers_highlight",
|
|
772
|
+
type: "screenLine",
|
|
773
|
+
inFront: true
|
|
774
|
+
}));
|
|
775
|
+
}
|
|
723
776
|
|
|
724
777
|
|
|
725
778
|
const $513a6452b1f07fd5$export$7c77c3a9bb93870d = [
|
|
@@ -846,6 +899,17 @@ const $513a6452b1f07fd5$export$4f74600301fa25db = [
|
|
|
846
899
|
|
|
847
900
|
|
|
848
901
|
|
|
902
|
+
|
|
903
|
+
const $7a6230964e09fbf7$export$476686f2cdb5577f = /*#__PURE__*/ (0, $gGrEF$react).lazy(()=>Promise.resolve((parcelRequire("f97Qe"))));
|
|
904
|
+
function $7a6230964e09fbf7$export$99999bc9085b44fd() {
|
|
905
|
+
const [mounted, setMounted] = (0, $gGrEF$useState)(false);
|
|
906
|
+
(0, $gGrEF$useEffect)(()=>{
|
|
907
|
+
setMounted(true);
|
|
908
|
+
}, []);
|
|
909
|
+
return mounted ? $7a6230964e09fbf7$export$476686f2cdb5577f : null;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
|
|
849
913
|
const $a1d4bfd2763f687f$var$EditorContainer = (0, $gGrEF$styledcomponents)((0, $gGrEF$Card))`
|
|
850
914
|
position: relative;
|
|
851
915
|
box-sizing: border-box;
|
|
@@ -1012,31 +1076,42 @@ function $a1d4bfd2763f687f$export$20d4ca75cb144ab0(props) {
|
|
|
1012
1076
|
}, [
|
|
1013
1077
|
languages
|
|
1014
1078
|
]);
|
|
1079
|
+
const AceEditor = (0, $7a6230964e09fbf7$export$99999bc9085b44fd)();
|
|
1015
1080
|
const renderCodeInput = (0, $gGrEF$useCallback)((inputProps)=>{
|
|
1016
1081
|
return /*#__PURE__*/ (0, $gGrEF$jsx)($a1d4bfd2763f687f$var$EditorContainer, {
|
|
1017
1082
|
radius: 1,
|
|
1018
1083
|
shadow: 1,
|
|
1019
1084
|
readOnly: readOnly,
|
|
1020
|
-
children: /*#__PURE__*/ (0, $gGrEF$
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1085
|
+
children: AceEditor && /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Suspense), {
|
|
1086
|
+
fallback: /*#__PURE__*/ (0, $gGrEF$jsx)("div", {
|
|
1087
|
+
children: "Loading code editor..."
|
|
1088
|
+
}),
|
|
1089
|
+
children: [
|
|
1090
|
+
"(",
|
|
1091
|
+
/*#__PURE__*/ (0, $gGrEF$jsx)(AceEditor, {
|
|
1092
|
+
ref: aceEditorRef,
|
|
1093
|
+
mode: mode1,
|
|
1094
|
+
theme: theme,
|
|
1095
|
+
width: "100%",
|
|
1096
|
+
onChange: handleCodeChange,
|
|
1097
|
+
name: inputProps.id,
|
|
1098
|
+
value: inputProps.value,
|
|
1099
|
+
markers: value && value.highlightedLines ? (0, $b67a72b22aed35f4$export$2e2bcd8739ae039)(value.highlightedLines) : undefined,
|
|
1100
|
+
onLoad: handleEditorLoad,
|
|
1101
|
+
readOnly: readOnly,
|
|
1102
|
+
tabSize: 2,
|
|
1103
|
+
wrapEnabled: true,
|
|
1104
|
+
setOptions: (0, $513a6452b1f07fd5$export$1d910bb34606e145),
|
|
1105
|
+
editorProps: (0, $513a6452b1f07fd5$export$24aa1be5d8c3cd08),
|
|
1106
|
+
onFocus: handleCodeFocus,
|
|
1107
|
+
onBlur: onBlur
|
|
1108
|
+
}),
|
|
1109
|
+
")"
|
|
1110
|
+
]
|
|
1037
1111
|
})
|
|
1038
1112
|
});
|
|
1039
1113
|
}, [
|
|
1114
|
+
AceEditor,
|
|
1040
1115
|
theme,
|
|
1041
1116
|
handleCodeChange,
|
|
1042
1117
|
handleCodeFocus,
|
|
@@ -1044,7 +1119,7 @@ function $a1d4bfd2763f687f$export$20d4ca75cb144ab0(props) {
|
|
|
1044
1119
|
mode1,
|
|
1045
1120
|
onBlur,
|
|
1046
1121
|
readOnly,
|
|
1047
|
-
value
|
|
1122
|
+
value,
|
|
1048
1123
|
]);
|
|
1049
1124
|
return /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Stack), {
|
|
1050
1125
|
space: 4,
|
|
@@ -1082,7 +1157,7 @@ function $a1d4bfd2763f687f$export$20d4ca75cb144ab0(props) {
|
|
|
1082
1157
|
|
|
1083
1158
|
|
|
1084
1159
|
|
|
1085
|
-
|
|
1160
|
+
parcelRequire("f97Qe");
|
|
1086
1161
|
const $0fe3fd43374a598c$var$PreviewContainer = (0, $gGrEF$styledcomponents)((0, $gGrEF$Box))`
|
|
1087
1162
|
position: relative;
|
|
1088
1163
|
`;
|
|
@@ -1267,17 +1342,14 @@ function $a7f1af2d8cb566bf$export$a854ab43349813f2(language) {
|
|
|
1267
1342
|
}
|
|
1268
1343
|
|
|
1269
1344
|
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
...props
|
|
1273
|
-
});
|
|
1274
|
-
};
|
|
1275
|
-
var $8907530ce2ae75d0$export$2e2bcd8739ae039 = {
|
|
1345
|
+
|
|
1346
|
+
var $8907530ce2ae75d0$export$2e2bcd8739ae039 = (0, $gGrEF$defineType)({
|
|
1276
1347
|
name: "code",
|
|
1277
1348
|
type: "object",
|
|
1278
1349
|
title: "Code",
|
|
1279
1350
|
components: {
|
|
1280
|
-
input: (0, $a1d4bfd2763f687f$export$20d4ca75cb144ab0)
|
|
1351
|
+
input: (0, $a1d4bfd2763f687f$export$20d4ca75cb144ab0),
|
|
1352
|
+
preview: (0, $0fe3fd43374a598c$export$2e2bcd8739ae039)
|
|
1281
1353
|
},
|
|
1282
1354
|
icon: (0, $gGrEF$CodeBlockIcon),
|
|
1283
1355
|
fields: [
|
|
@@ -1318,14 +1390,11 @@ var $8907530ce2ae75d0$export$2e2bcd8739ae039 = {
|
|
|
1318
1390
|
prepare: (value)=>{
|
|
1319
1391
|
return {
|
|
1320
1392
|
title: value.filename || (value.language || "unknown").toUpperCase(),
|
|
1321
|
-
media: (0, $a7f1af2d8cb566bf$export$a854ab43349813f2)(value?.language)
|
|
1322
|
-
extendedPreview: /*#__PURE__*/ (0, $gGrEF$jsx)($8907530ce2ae75d0$var$Preview, {
|
|
1323
|
-
value: value
|
|
1324
|
-
})
|
|
1393
|
+
media: (0, $a7f1af2d8cb566bf$export$a854ab43349813f2)(value?.language)
|
|
1325
1394
|
};
|
|
1326
1395
|
}
|
|
1327
1396
|
}
|
|
1328
|
-
};
|
|
1397
|
+
});
|
|
1329
1398
|
|
|
1330
1399
|
|
|
1331
1400
|
|