@sanity/code-input 7.2.3 → 7.2.5

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,589 +0,0 @@
1
- import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
2
- import { set, unset, MemberField, setIfMissing, defineType, definePlugin } from "sanity";
3
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
4
- import { c } from "react/compiler-runtime";
5
- import { Portal, Layer, Card, Tooltip, Button, Text, Box, Select, Stack, Flex, Label } from "@sanity/ui";
6
- import { useState, useRef, useEffect, lazy, startTransition, Suspense, createContext } from "react";
7
- import { CollapseIcon } from "@sanity/icons/Collapse";
8
- import { ExpandIcon } from "@sanity/icons/Expand";
9
- import { styled, css } from "styled-components";
10
- function focusRingBorderStyle(border) {
11
- return `inset 0 0 0 ${border.width}px ${border.color}`;
12
- }
13
- function focusRingStyle(opts) {
14
- const {
15
- base,
16
- border,
17
- focusRing
18
- } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
19
- return [focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`, border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`, focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`].filter(Boolean).join(",");
20
- }
21
- const TOOLTIP_DELAY = {
22
- open: 400
23
- }, EDITOR_HEIGHT = 250, DOCUMENT_PANE_SELECTOR = '[data-testid="document-pane"]', DOCUMENT_PANEL_SCROLLER_SELECTOR = '[data-testid="document-panel-scroller"]', SELECTED_PANE_SCROLLER_SELECTOR = `${DOCUMENT_PANE_SELECTOR}[data-pane-selected="true"] ${DOCUMENT_PANEL_SCROLLER_SELECTOR}`;
24
- function getScrollParent(node) {
25
- let current = node?.parentElement ?? null;
26
- for (; current; ) {
27
- const {
28
- overflowY
29
- } = window.getComputedStyle(current);
30
- if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay")
31
- return current;
32
- current = current.parentElement;
33
- }
34
- return null;
35
- }
36
- function getDocumentPaneElement(node) {
37
- if (!node) return null;
38
- const ownPane = node.closest(DOCUMENT_PANE_SELECTOR);
39
- if (ownPane instanceof HTMLElement) {
40
- const scroller2 = ownPane.querySelector(DOCUMENT_PANEL_SCROLLER_SELECTOR);
41
- return scroller2 instanceof HTMLElement ? scroller2 : ownPane;
42
- }
43
- const selectedScroller = document.querySelector(SELECTED_PANE_SCROLLER_SELECTOR);
44
- if (selectedScroller instanceof HTMLElement) return selectedScroller;
45
- const scroller = document.querySelector(DOCUMENT_PANEL_SCROLLER_SELECTOR);
46
- return scroller instanceof HTMLElement ? scroller : getScrollParent(node);
47
- }
48
- const FullscreenRoot = /* @__PURE__ */ styled.div.withConfig({
49
- displayName: "FullscreenRoot",
50
- componentId: "sc-1794wkw-0"
51
- })(["position:relative;"]), FullscreenOverlay = /* @__PURE__ */ styled.div.withConfig({
52
- displayName: "FullscreenOverlay",
53
- componentId: "sc-1794wkw-1"
54
- })(({
55
- theme
56
- }) => {
57
- const {
58
- input
59
- } = theme.sanity, borderColor = theme.sanity.color.input.default.enabled.border;
60
- return css`
61
- box-sizing: border-box;
62
- overflow: hidden;
63
- border-top: ${input.border.width}px solid ${borderColor};
64
- border-bottom: ${input.border.width}px solid ${borderColor};
65
- `;
66
- }), ToggleButtonBox = /* @__PURE__ */ styled(Box).withConfig({
67
- displayName: "ToggleButtonBox",
68
- componentId: "sc-1794wkw-2"
69
- })(["position:absolute;top:0;right:0;z-index:2;"]), EditorContainer = /* @__PURE__ */ styled(Card).withConfig({
70
- displayName: "EditorContainer",
71
- componentId: "sc-1794wkw-3"
72
- })(({
73
- theme,
74
- $fullscreen
75
- }) => {
76
- const {
77
- focusRing,
78
- input
79
- } = theme.sanity, base = theme.sanity.color.base, border = {
80
- color: theme.sanity.color.input.default.enabled.border,
81
- width: input.border.width
82
- };
83
- return css`
84
- --input-box-shadow: ${focusRingBorderStyle(border)};
85
-
86
- box-shadow: var(--input-box-shadow);
87
- height: ${EDITOR_HEIGHT}px;
88
- min-height: 80px;
89
- overflow-y: auto;
90
- position: relative;
91
- resize: vertical;
92
- z-index: 0;
93
-
94
- & > .cm-theme {
95
- height: 100%;
96
- }
97
-
98
- &:focus-within {
99
- --input-box-shadow: ${focusRingStyle({
100
- base,
101
- border,
102
- focusRing
103
- })};
104
- }
105
-
106
- ${$fullscreen && css`
107
- height: 100%;
108
- border-radius: 0;
109
- resize: none;
110
- background-color: ${base.bg};
111
- /* Divider drawn on the overlay so the sides sit flush with the pane */
112
- box-shadow: none;
113
- `}
114
- `;
115
- });
116
- function FullscreenEditor(t0) {
117
- const $ = c(25), {
118
- enabled,
119
- children
120
- } = t0, [isFullscreen, setIsFullscreen] = useState(!1), rootRef = useRef(null), overlayRef = useRef(null), [overlayElement, setOverlayElement] = useState(null);
121
- let t1;
122
- $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = (node) => {
123
- overlayRef.current = node, setOverlayElement(node);
124
- }, $[0] = t1) : t1 = $[0];
125
- const setOverlayRef = t1, [paneRect, setPaneRect] = useState(null), [placeholderHeight, setPlaceholderHeight] = useState(EDITOR_HEIGHT), showFullscreen = isFullscreen && paneRect !== null;
126
- let t2;
127
- $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => {
128
- setPaneRect(null), setIsFullscreen(!1);
129
- }, $[1] = t2) : t2 = $[1];
130
- const collapse = t2;
131
- let t3;
132
- $[2] !== isFullscreen ? (t3 = () => {
133
- if (isFullscreen) {
134
- collapse();
135
- return;
136
- }
137
- setPlaceholderHeight(rootRef.current?.offsetHeight ?? EDITOR_HEIGHT), setIsFullscreen(!0);
138
- }, $[2] = isFullscreen, $[3] = t3) : t3 = $[3];
139
- const handleToggle = t3;
140
- let t4;
141
- $[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = (event) => {
142
- event.key === "Escape" && (event.preventDefault(), event.stopPropagation(), event.nativeEvent.stopImmediatePropagation(), collapse());
143
- }, $[4] = t4) : t4 = $[4];
144
- const handleKeyDown = t4;
145
- let t5, t6;
146
- $[5] !== isFullscreen ? (t5 = () => {
147
- if (!isFullscreen)
148
- return;
149
- const paneElement = getDocumentPaneElement(rootRef.current), update = () => {
150
- const {
151
- top,
152
- left,
153
- width,
154
- height
155
- } = paneElement ? paneElement.getBoundingClientRect() : {
156
- top: 0,
157
- left: 0,
158
- width: window.innerWidth,
159
- height: window.innerHeight
160
- };
161
- setPaneRect((prev) => prev && prev.top === top && prev.left === left && prev.width === width && prev.height === height ? prev : {
162
- top,
163
- left,
164
- width,
165
- height
166
- });
167
- }, raf = requestAnimationFrame(update);
168
- let resizeObserver;
169
- return paneElement && (resizeObserver = new ResizeObserver(update), resizeObserver.observe(paneElement)), window.addEventListener("resize", update), window.addEventListener("scroll", update, !0), () => {
170
- cancelAnimationFrame(raf), resizeObserver?.disconnect(), window.removeEventListener("resize", update), window.removeEventListener("scroll", update, !0);
171
- };
172
- }, t6 = [isFullscreen], $[5] = isFullscreen, $[6] = t5, $[7] = t6) : (t5 = $[6], t6 = $[7]), useEffect(t5, t6);
173
- let t7, t8;
174
- $[8] !== showFullscreen ? (t7 = () => {
175
- if (!showFullscreen)
176
- return;
177
- const raf_0 = requestAnimationFrame(() => {
178
- const overlay = overlayRef.current;
179
- overlay && (overlay.querySelector(".cm-content") ?? overlay).focus();
180
- });
181
- return () => cancelAnimationFrame(raf_0);
182
- }, t8 = [showFullscreen], $[8] = showFullscreen, $[9] = t7, $[10] = t8) : (t7 = $[9], t8 = $[10]), useEffect(t7, t8);
183
- let t9;
184
- $[11] !== enabled || $[12] !== handleToggle || $[13] !== overlayElement || $[14] !== showFullscreen ? (t9 = enabled && /* @__PURE__ */ jsx(ToggleButtonBox, { padding: 1, children: /* @__PURE__ */ jsx(Tooltip, { animate: !0, arrow: !1, boundaryElement: overlayElement, content: /* @__PURE__ */ jsx(Text, { size: 1, children: showFullscreen ? "Collapse editor" : "Expand editor" }), delay: TOOLTIP_DELAY, placement: "bottom", portal: !0, children: /* @__PURE__ */ jsx(Button, { "aria-label": showFullscreen ? "Collapse editor" : "Expand editor", icon: showFullscreen ? CollapseIcon : ExpandIcon, mode: "ghost", onClick: handleToggle, padding: 2 }) }) }), $[11] = enabled, $[12] = handleToggle, $[13] = overlayElement, $[14] = showFullscreen, $[15] = t9) : t9 = $[15];
185
- const toggleButton = t9;
186
- let t10;
187
- $[16] !== paneRect || $[17] !== showFullscreen ? (t10 = showFullscreen && paneRect ? {
188
- position: "fixed",
189
- top: paneRect.top,
190
- left: paneRect.left,
191
- width: paneRect.width,
192
- height: paneRect.height
193
- } : void 0, $[16] = paneRect, $[17] = showFullscreen, $[18] = t10) : t10 = $[18];
194
- const fullscreenStyle = t10;
195
- let t11;
196
- return $[19] !== children || $[20] !== fullscreenStyle || $[21] !== placeholderHeight || $[22] !== showFullscreen || $[23] !== toggleButton ? (t11 = /* @__PURE__ */ jsx(FullscreenRoot, { ref: rootRef, children: showFullscreen ? /* @__PURE__ */ jsxs(Fragment, { children: [
197
- /* @__PURE__ */ jsx("div", { "aria-hidden": !0, style: {
198
- height: placeholderHeight
199
- } }),
200
- /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Layer, { children: /* @__PURE__ */ jsxs(FullscreenOverlay, { onKeyDown: handleKeyDown, ref: setOverlayRef, style: fullscreenStyle, tabIndex: -1, children: [
201
- toggleButton,
202
- children({
203
- isFullscreen: showFullscreen
204
- })
205
- ] }) }) })
206
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
207
- toggleButton,
208
- children({
209
- isFullscreen: showFullscreen
210
- })
211
- ] }) }), $[19] = children, $[20] = fullscreenStyle, $[21] = placeholderHeight, $[22] = showFullscreen, $[23] = toggleButton, $[24] = t11) : t11 = $[24], t11;
212
- }
213
- const CodeMirrorProxy = lazy(() => import("./CodeMirrorProxy.js"));
214
- function useMounted() {
215
- const $ = c(2), [mounted, setMounted] = useState(!1);
216
- let t0, t1;
217
- return $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
218
- requestAnimationFrame(() => startTransition(() => setMounted(!0)));
219
- }, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1), mounted;
220
- }
221
- const SUPPORTED_LANGUAGES = [{
222
- title: "Batch file",
223
- value: "batchfile"
224
- }, {
225
- title: "C#",
226
- value: "csharp"
227
- }, {
228
- title: "CSS",
229
- value: "css"
230
- }, {
231
- title: "Go",
232
- value: "golang"
233
- }, {
234
- title: "GROQ",
235
- value: "groq"
236
- }, {
237
- title: "HTML",
238
- value: "html"
239
- }, {
240
- title: "Java",
241
- value: "java"
242
- }, {
243
- title: "JavaScript",
244
- value: "javascript"
245
- }, {
246
- title: "JSON",
247
- value: "json"
248
- }, {
249
- title: "JSX",
250
- value: "jsx"
251
- }, {
252
- title: "Markdown",
253
- value: "markdown"
254
- }, {
255
- title: "MySQL",
256
- value: "mysql"
257
- }, {
258
- title: "PHP",
259
- value: "php"
260
- }, {
261
- title: "Plain text",
262
- value: "text"
263
- }, {
264
- title: "Python",
265
- value: "python"
266
- }, {
267
- title: "Ruby",
268
- value: "ruby"
269
- }, {
270
- title: "SASS",
271
- value: "sass"
272
- }, {
273
- title: "SCSS",
274
- value: "scss"
275
- }, {
276
- title: "sh",
277
- value: "sh"
278
- }, {
279
- title: "SQL",
280
- value: "sql"
281
- }, {
282
- title: "TSX",
283
- value: "tsx"
284
- }, {
285
- title: "TypeScript",
286
- value: "typescript"
287
- }, {
288
- title: "XML",
289
- value: "xml"
290
- }, {
291
- title: "YAML",
292
- value: "yaml"
293
- }], LANGUAGE_ALIASES = {
294
- js: "javascript"
295
- }, PATH_CODE = ["code"], defaultLanguageMode = "text";
296
- function useLanguageMode(schemaType, value) {
297
- const $ = c(12), languages = useLanguageAlternatives(schemaType), fixedLanguage = schemaType.options?.language, language = value?.language ?? fixedLanguage ?? defaultLanguageMode;
298
- let t0;
299
- if ($[0] !== language || $[1] !== languages) {
300
- let t12;
301
- $[3] !== language ? (t12 = (entry) => entry.value === language, $[3] = language, $[4] = t12) : t12 = $[4], t0 = languages.find(t12), $[0] = language, $[1] = languages, $[2] = t0;
302
- } else
303
- t0 = $[2];
304
- const configured = t0;
305
- let t1;
306
- $[5] !== configured?.mode || $[6] !== language ? (t1 = configured?.mode ?? resolveAliasedLanguage(language) ?? defaultLanguageMode, $[5] = configured?.mode, $[6] = language, $[7] = t1) : t1 = $[7];
307
- const languageMode = t1;
308
- let t2;
309
- return $[8] !== language || $[9] !== languageMode || $[10] !== languages ? (t2 = {
310
- language,
311
- languageMode,
312
- languages
313
- }, $[8] = language, $[9] = languageMode, $[10] = languages, $[11] = t2) : t2 = $[11], t2;
314
- }
315
- function resolveAliasedLanguage(lang) {
316
- return (lang && LANGUAGE_ALIASES[lang]) ?? lang;
317
- }
318
- function useLanguageAlternatives(type) {
319
- const $ = c(2);
320
- let t0;
321
- bb0: {
322
- const languageAlternatives = type.options?.languageAlternatives;
323
- if (!languageAlternatives) {
324
- t0 = SUPPORTED_LANGUAGES;
325
- break bb0;
326
- }
327
- if (!Array.isArray(languageAlternatives))
328
- throw new Error(`'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`);
329
- let t1;
330
- $[0] !== languageAlternatives ? (t1 = languageAlternatives.reduce(_temp$1, []), $[0] = languageAlternatives, $[1] = t1) : t1 = $[1], t0 = t1;
331
- }
332
- return t0;
333
- }
334
- function _temp$1(acc, t0) {
335
- const {
336
- title,
337
- value: val,
338
- mode
339
- } = t0, alias = LANGUAGE_ALIASES[val];
340
- return alias ? (console.warn(`'options.languageAlternatives' lists a language with value "%s", which is an alias of "%s" - please replace the value to read "%s"`, val, alias, alias), acc.concat({
341
- title,
342
- value: alias,
343
- mode
344
- })) : acc.concat({
345
- title,
346
- value: val,
347
- mode
348
- });
349
- }
350
- function LanguageInput(props) {
351
- const $ = c(9), {
352
- language,
353
- languages,
354
- onChange,
355
- elementProps
356
- } = props;
357
- let t0;
358
- $[0] !== onChange ? (t0 = (e) => {
359
- const newValue = e.currentTarget.value;
360
- onChange(newValue ? set(newValue) : unset());
361
- }, $[0] = onChange, $[1] = t0) : t0 = $[1];
362
- const handleChange = t0;
363
- let t1;
364
- $[2] !== languages ? (t1 = languages.map(_temp), $[2] = languages, $[3] = t1) : t1 = $[3];
365
- let t2;
366
- return $[4] !== elementProps || $[5] !== handleChange || $[6] !== language || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsx(Select, { ...elementProps, value: language, onChange: handleChange, children: t1 }), $[4] = elementProps, $[5] = handleChange, $[6] = language, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
367
- }
368
- function _temp(lang) {
369
- return /* @__PURE__ */ jsx("option", { value: lang.value, children: lang.title }, lang.value);
370
- }
371
- function LanguageField(props) {
372
- const $ = c(9), {
373
- member,
374
- languages,
375
- language,
376
- renderItem,
377
- renderField,
378
- renderPreview
379
- } = props;
380
- let t0;
381
- $[0] !== language || $[1] !== languages ? (t0 = (t12) => {
382
- const {
383
- elementProps,
384
- onChange
385
- } = t12;
386
- return /* @__PURE__ */ jsx(LanguageInput, { onChange, elementProps, language, languages });
387
- }, $[0] = language, $[1] = languages, $[2] = t0) : t0 = $[2];
388
- const renderInput = t0;
389
- let t1;
390
- return $[3] !== member || $[4] !== renderField || $[5] !== renderInput || $[6] !== renderItem || $[7] !== renderPreview ? (t1 = /* @__PURE__ */ jsx(MemberField, { member, renderItem, renderField, renderInput, renderPreview }), $[3] = member, $[4] = renderField, $[5] = renderInput, $[6] = renderItem, $[7] = renderPreview, $[8] = t1) : t1 = $[8], t1;
391
- }
392
- function useFieldMember(members, fieldName) {
393
- const $ = c(5);
394
- let t0;
395
- if ($[0] !== fieldName || $[1] !== members) {
396
- let t1;
397
- $[3] !== fieldName ? (t1 = (member) => member.kind === "field" && member.name === fieldName, $[3] = fieldName, $[4] = t1) : t1 = $[4], t0 = members.find(t1), $[0] = fieldName, $[1] = members, $[2] = t0;
398
- } else
399
- t0 = $[2];
400
- return t0;
401
- }
402
- function CodeInput(props) {
403
- const $ = c(43), {
404
- members,
405
- elementProps,
406
- onChange,
407
- readOnly,
408
- renderField,
409
- renderInput,
410
- renderItem,
411
- renderPreview,
412
- schemaType: type,
413
- value,
414
- onPathFocus
415
- } = props, languageFieldMember = useFieldMember(members, "language"), filenameMember = useFieldMember(members, "filename"), codeFieldMember = useFieldMember(members, "code");
416
- let t0;
417
- $[0] !== onPathFocus ? (t0 = () => {
418
- onPathFocus(PATH_CODE);
419
- }, $[0] = onPathFocus, $[1] = t0) : t0 = $[1];
420
- const handleCodeFocus = t0;
421
- let t1;
422
- $[2] !== onChange ? (t1 = (lines) => onChange(set(lines, ["highlightedLines"])), $[2] = onChange, $[3] = t1) : t1 = $[3];
423
- const onHighlightChange = t1;
424
- let t2;
425
- $[4] !== onChange || $[5] !== type.name || $[6] !== type.options?.language ? (t2 = (code) => {
426
- const fixedLanguage = type.options?.language;
427
- onChange([setIfMissing({
428
- _type: type.name,
429
- language: fixedLanguage
430
- }), code ? set(code, PATH_CODE) : unset(PATH_CODE)]);
431
- }, $[4] = onChange, $[5] = type.name, $[6] = type.options?.language, $[7] = t2) : t2 = $[7];
432
- const handleCodeChange = t2, {
433
- languages,
434
- language,
435
- languageMode
436
- } = useLanguageMode(props.schemaType, props.value), mounted = useMounted(), fullscreenEnabled = !type.options?.disableFullscreen;
437
- let t3;
438
- $[8] !== elementProps.onBlur || $[9] !== fullscreenEnabled || $[10] !== handleCodeChange || $[11] !== handleCodeFocus || $[12] !== languageMode || $[13] !== mounted || $[14] !== onHighlightChange || $[15] !== readOnly || $[16] !== value?.highlightedLines ? (t3 = (inputProps) => /* @__PURE__ */ jsx(FullscreenEditor, { enabled: fullscreenEnabled, children: (t42) => {
439
- const {
440
- isFullscreen
441
- } = t42;
442
- return /* @__PURE__ */ jsx(EditorContainer, { $fullscreen: isFullscreen, border: !isFullscreen, overflow: "hidden", radius: 1, sizing: "border", readOnly, children: mounted && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { children: "Loading code editor..." }) }), children: /* @__PURE__ */ jsx(CodeMirrorProxy, { languageMode, onChange: handleCodeChange, value: inputProps.value, highlightLines: value?.highlightedLines, onHighlightChange, readOnly, onFocus: handleCodeFocus, onBlur: elementProps.onBlur }) }) });
443
- } }), $[8] = elementProps.onBlur, $[9] = fullscreenEnabled, $[10] = handleCodeChange, $[11] = handleCodeFocus, $[12] = languageMode, $[13] = mounted, $[14] = onHighlightChange, $[15] = readOnly, $[16] = value?.highlightedLines, $[17] = t3) : t3 = $[17], value?.highlightedLines;
444
- const renderCodeInput = t3;
445
- let t4;
446
- $[18] !== language || $[19] !== languageFieldMember || $[20] !== languages || $[21] !== renderField || $[22] !== renderInput || $[23] !== renderItem || $[24] !== renderPreview ? (t4 = languageFieldMember && /* @__PURE__ */ jsx(LanguageField, { member: languageFieldMember, language, languages, renderField, renderItem, renderInput, renderPreview }), $[18] = language, $[19] = languageFieldMember, $[20] = languages, $[21] = renderField, $[22] = renderInput, $[23] = renderItem, $[24] = renderPreview, $[25] = t4) : t4 = $[25];
447
- let t5;
448
- $[26] !== filenameMember || $[27] !== renderField || $[28] !== renderInput || $[29] !== renderItem || $[30] !== renderPreview || $[31] !== type.options?.withFilename ? (t5 = type.options?.withFilename && filenameMember && /* @__PURE__ */ jsx(MemberField, { member: filenameMember, renderItem, renderField, renderInput, renderPreview }), $[26] = filenameMember, $[27] = renderField, $[28] = renderInput, $[29] = renderItem, $[30] = renderPreview, $[31] = type.options?.withFilename, $[32] = t5) : t5 = $[32];
449
- let t6;
450
- $[33] !== codeFieldMember || $[34] !== renderCodeInput || $[35] !== renderField || $[36] !== renderItem || $[37] !== renderPreview ? (t6 = codeFieldMember && /* @__PURE__ */ jsx(MemberField, { member: codeFieldMember, renderInput: renderCodeInput, renderItem, renderField, renderPreview }), $[33] = codeFieldMember, $[34] = renderCodeInput, $[35] = renderField, $[36] = renderItem, $[37] = renderPreview, $[38] = t6) : t6 = $[38];
451
- let t7;
452
- return $[39] !== t4 || $[40] !== t5 || $[41] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
453
- t4,
454
- t5,
455
- t6
456
- ] }), $[39] = t4, $[40] = t5, $[41] = t6, $[42] = t7) : t7 = $[42], t7;
457
- }
458
- function getMedia(language) {
459
- if (language === "jsx")
460
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", children: /* @__PURE__ */ jsxs("g", { fill: "#61DAFB", children: [
461
- /* @__PURE__ */ jsx("circle", { cx: "64", cy: "64", r: "11.4" }),
462
- /* @__PURE__ */ jsx("path", { d: "M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z" })
463
- ] }) });
464
- if (language === "javascript")
465
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", children: [
466
- /* @__PURE__ */ jsx("path", { fill: "#F0DB4F", d: "M1.408 1.408h125.184v125.185H1.408z" }),
467
- /* @__PURE__ */ jsx("path", { fill: "#323330", d: "M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z" })
468
- ] });
469
- if (language === "php")
470
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 800 400", children: /* @__PURE__ */ jsx("g", { transform: "translate(-44.632 -141.55)", children: /* @__PURE__ */ jsxs("g", { transform: "matrix(8.3528 0 0 8.3119 -727.13 -3759.5)", children: [
471
- /* @__PURE__ */ jsx("path", { d: "m99.974 479.48h14.204c4.1693 0.0354 7.1903 1.2367 9.063 3.604 1.8726 2.3674 2.491 5.6004 1.855 9.699-0.24737 1.8727-0.79504 3.71-1.643 5.512-0.8127 1.802-1.9434 3.4273-3.392 4.876-1.7667 1.8373-3.657 3.0033-5.671 3.498-2.014 0.49467-4.0987 0.742-6.254 0.742h-6.36l-2.014 10.07h-7.367l7.579-38.001m6.201 6.042-3.18 15.9c0.21198 0.0353 0.42398 0.053 0.636 0.053h0.742c3.392 0.0353 6.2186-0.30033 8.48-1.007 2.2613-0.74199 3.7806-3.3213 4.558-7.738 0.63597-3.71-0.00003-5.8476-1.908-6.413-1.8727-0.56531-4.2224-0.83031-7.049-0.795-0.42402 0.0353-0.83035 0.053-1.219 0.053-0.35335 0.00002-0.72435 0.00002-1.113 0l0.053-0.053" }),
472
- /* @__PURE__ */ jsx("path", { d: "m133.49 469.36h7.314l-2.067 10.123h6.572c3.604 0.0707 6.2893 0.81269 8.056 2.226 1.802 1.4134 2.332 4.0987 1.59 8.056l-3.551 17.649h-7.42l3.392-16.854c0.35328-1.7666 0.2473-3.021-0.318-3.763-0.56536-0.74198-1.7844-1.113-3.657-1.113l-5.883-0.053-4.346 21.783h-7.314l7.632-38.054" }),
473
- /* @__PURE__ */ jsx("path", { d: "m162.81 479.48h14.204c4.1693 0.0354 7.1903 1.2367 9.063 3.604 1.8726 2.3674 2.491 5.6004 1.855 9.699-0.24737 1.8727-0.79503 3.71-1.643 5.512-0.8127 1.802-1.9434 3.4273-3.392 4.876-1.7667 1.8373-3.657 3.0033-5.671 3.498-2.014 0.49467-4.0987 0.742-6.254 0.742h-6.36l-2.014 10.07h-7.367l7.579-38.001m6.201 6.042-3.18 15.9c0.21199 0.0353 0.42399 0.053 0.636 0.053h0.742c3.392 0.0353 6.2186-0.30033 8.48-1.007 2.2613-0.74199 3.7806-3.3213 4.558-7.738 0.63597-3.71-0.00003-5.8476-1.908-6.413-1.8727-0.56531-4.2224-0.83031-7.049-0.795-0.42402 0.0353-0.83035 0.053-1.219 0.053-0.35335 0.00002-0.72435 0.00002-1.113 0l0.053-0.053" })
474
- ] }) }) });
475
- if (language === "json")
476
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 160 160", children: [
477
- /* @__PURE__ */ jsxs("defs", { children: [
478
- /* @__PURE__ */ jsxs("linearGradient", { id: "a", children: [
479
- /* @__PURE__ */ jsx("stop", { offset: "0" }),
480
- /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#fff" })
481
- ] }),
482
- /* @__PURE__ */ jsx("linearGradient", { x1: "-553.27", y1: "525.908", x2: "-666.116", y2: "413.045", id: "c", xlinkHref: "#a", gradientUnits: "userSpaceOnUse", gradientTransform: "matrix(.99884 0 0 .9987 689.008 -388.844)" }),
483
- /* @__PURE__ */ jsx("linearGradient", { x1: "-666.117", y1: "413.045", x2: "-553.27", y2: "525.908", id: "b", xlinkHref: "#a", gradientUnits: "userSpaceOnUse", gradientTransform: "matrix(.99884 0 0 .9987 689.008 -388.844)" })
484
- ] }),
485
- /* @__PURE__ */ jsx("path", { d: "M79.865 119.1c35.397 48.255 70.04-13.469 69.988-50.587-.06-43.886-44.54-68.414-70.017-68.414C38.943.1 0 33.895 0 80.135 0 131.531 44.64 160 79.836 160c-7.965-1.147-34.507-6.834-34.863-67.967-.24-41.346 13.487-57.865 34.805-50.599.477.177 23.514 9.265 23.514 38.95 0 29.56-23.427 38.716-23.427 38.716z", style: {
486
- marker: "none"
487
- }, color: "#000", fill: "url(#b)", fillRule: "evenodd", overflow: "visible" }),
488
- /* @__PURE__ */ jsx("path", { d: "M79.823 41.4C56.433 33.34 27.78 52.618 27.78 91.23c0 63.048 46.72 68.77 52.384 68.77C121.057 160 160 126.204 160 79.964 160 28.568 115.36.1 80.164.1c9.749-1.35 52.541 10.55 52.541 69.037 0 38.141-31.953 58.905-52.735 50.033-.478-.177-23.514-9.264-23.514-38.95 0-29.56 23.367-38.818 23.367-38.818z", style: {
489
- marker: "none"
490
- }, color: "#000", fill: "url(#c)", fillRule: "evenodd", overflow: "visible" })
491
- ] });
492
- }
493
- const PreviewContainer = /* @__PURE__ */ styled(Box).withConfig({
494
- displayName: "PreviewContainer",
495
- componentId: "sc-14g49ds-0"
496
- })(["position:relative;"]);
497
- function PreviewCode(props) {
498
- const $ = c(10), {
499
- selection,
500
- schemaType: type
501
- } = props, {
502
- languageMode
503
- } = useLanguageMode(type, props.selection), mounted = useMounted();
504
- let t0;
505
- $[0] !== selection ? (t0 = selection?.filename || selection?.language ? /* @__PURE__ */ jsx(Card, { paddingBottom: 4, marginBottom: selection.code ? 4 : 0, borderBottom: !!selection.code, children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "flex-end", children: [
506
- selection?.filename ? /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("code", { children: selection.filename }) }) }) : null,
507
- selection?.language ? /* @__PURE__ */ jsx(Label, { muted: !0, children: selection.language }) : null
508
- ] }) }) : null, $[0] = selection, $[1] = t0) : t0 = $[1];
509
- let t1;
510
- $[2] !== languageMode || $[3] !== mounted || $[4] !== selection?.code || $[5] !== selection?.highlightedLines ? (t1 = mounted && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Card, { padding: 2, children: "Loading code preview..." }), children: /* @__PURE__ */ jsx(CodeMirrorProxy, { readOnly: !0, editable: !1, value: selection?.code || "", highlightLines: selection?.highlightedLines || [], basicSetup: {
511
- lineNumbers: !1,
512
- foldGutter: !1,
513
- highlightSelectionMatches: !1,
514
- highlightActiveLineGutter: !1,
515
- highlightActiveLine: !1
516
- }, languageMode }) }), $[2] = languageMode, $[3] = mounted, $[4] = selection?.code, $[5] = selection?.highlightedLines, $[6] = t1) : t1 = $[6];
517
- let t2;
518
- return $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx(PreviewContainer, { children: /* @__PURE__ */ jsxs(Card, { padding: 4, children: [
519
- t0,
520
- t1
521
- ] }) }), $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
522
- }
523
- const codeTypeName = "code", codeSchema = defineType({
524
- name: "code",
525
- type: "object",
526
- title: "Code",
527
- components: {
528
- input: CodeInput,
529
- preview: PreviewCode
530
- },
531
- icon: CodeBlockIcon,
532
- fields: [{
533
- name: "language",
534
- title: "Language",
535
- type: "string"
536
- }, {
537
- name: "filename",
538
- title: "Filename",
539
- type: "string"
540
- }, {
541
- title: "Code",
542
- name: "code",
543
- type: "text"
544
- }, {
545
- title: "Highlighted lines",
546
- name: "highlightedLines",
547
- type: "array",
548
- of: [{
549
- type: "number",
550
- title: "Highlighted line"
551
- }]
552
- }],
553
- preview: {
554
- select: {
555
- language: "language",
556
- code: "code",
557
- filename: "filename",
558
- highlightedLines: "highlightedLines"
559
- },
560
- prepare: (value) => ({
561
- title: value.filename || (value.language || "unknown").toUpperCase(),
562
- media: getMedia(value?.language),
563
- selection: value
564
- })
565
- }
566
- }), CodeInputConfigContext = createContext(void 0), codeInput = definePlugin((config) => {
567
- const codeModes = config && config.codeModes, basePlugin = {
568
- name: "@sanity/code-input",
569
- schema: {
570
- types: [codeSchema]
571
- }
572
- };
573
- return codeModes ? {
574
- ...basePlugin,
575
- form: {
576
- components: {
577
- input: (props) => props.id !== "root" ? props.renderDefault(props) : /* @__PURE__ */ jsx(CodeInputConfigContext.Provider, { value: config, children: props.renderDefault(props) })
578
- }
579
- }
580
- } : basePlugin;
581
- });
582
- export {
583
- CodeInputConfigContext,
584
- PreviewCode,
585
- codeInput,
586
- codeSchema,
587
- codeTypeName
588
- };
589
- //# sourceMappingURL=index.js.map