@sanity/code-input 7.2.4 → 7.2.5

package/dist/index.js

@@ -1,8 +1,665 @@
-import { PreviewCode, codeInput, codeSchema, codeTypeName } from "./_chunks-es/index.js";
-export {
-  PreviewCode,
-  codeInput,
-  codeSchema,
-  codeTypeName
-};
-//# sourceMappingURL=index.js.map
+import { t as CodeInputConfigContext } from "./CodeModeContext.js";
+import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
+import { MemberField, definePlugin, defineType, set, setIfMissing, unset } from "sanity";
+import { c } from "react/compiler-runtime";
+import { Box, Button, Card, Flex, Label, Layer, Portal, Select, Stack, Text, Tooltip } from "@sanity/ui";
+import { Suspense, lazy, startTransition, useEffect, useRef, useState } from "react";
+import { CollapseIcon } from "@sanity/icons/Collapse";
+import { ExpandIcon } from "@sanity/icons/Expand";
+import { css, styled } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+/** @internal */
+function focusRingBorderStyle(border) {
+	return `inset 0 0 0 ${border.width}px ${border.color}`;
+}
+/** @internal */
+function focusRingStyle(opts) {
+	let { base, border, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
+	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(",");
+}
+const TOOLTIP_DELAY = { open: 400 }, 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}`;
+function getScrollParent(node) {
+	let current = node?.parentElement ?? null;
+	for (; current;) {
+		let { overflowY } = window.getComputedStyle(current);
+		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return current;
+		current = current.parentElement;
+	}
+	return null;
+}
+function getDocumentPaneElement(node) {
+	if (!node) return null;
+	let ownPane = node.closest(DOCUMENT_PANE_SELECTOR);
+	if (ownPane instanceof HTMLElement) {
+		let scroller = ownPane.querySelector(DOCUMENT_PANEL_SCROLLER_SELECTOR);
+		return scroller instanceof HTMLElement ? scroller : ownPane;
+	}
+	let selectedScroller = document.querySelector(SELECTED_PANE_SCROLLER_SELECTOR);
+	if (selectedScroller instanceof HTMLElement) return selectedScroller;
+	let scroller = document.querySelector(DOCUMENT_PANEL_SCROLLER_SELECTOR);
+	return scroller instanceof HTMLElement ? scroller : getScrollParent(node);
+}
+const FullscreenRoot = styled.div.withConfig({
+	displayName: "FullscreenRoot",
+	componentId: "sc-ozhpzk-0"
+})`position:relative;`, FullscreenOverlay = /* @__PURE__ */ styled.div.withConfig({
+	displayName: "FullscreenOverlay",
+	componentId: "sc-ozhpzk-1"
+})(({ theme }) => {
+	let { input } = theme.sanity, borderColor = theme.sanity.color.input.default.enabled.border;
+	return css`box-sizing:border-box;overflow:hidden;border-top:${input.border.width}px solid ${borderColor};border-bottom:${input.border.width}px solid ${borderColor};`;
+}), ToggleButtonBox = styled(Box).withConfig({
+	displayName: "ToggleButtonBox",
+	componentId: "sc-ozhpzk-2"
+})`position:absolute;top:0;right:0;z-index:2;`, EditorContainer = /* @__PURE__ */ styled(Card).withConfig({
+	displayName: "EditorContainer",
+	componentId: "sc-ozhpzk-3"
+})(({ theme, $fullscreen }) => {
+	let { focusRing, input } = theme.sanity, base = theme.sanity.color.base, border = {
+		color: theme.sanity.color.input.default.enabled.border,
+		width: input.border.width
+	};
+	return css`--input-box-shadow:${focusRingBorderStyle(border)};box-shadow:var(--input-box-shadow);height:${250}px;min-height:80px;overflow-y:auto;position:relative;resize:vertical;z-index:0;& > .cm-theme{height:100%;}&:focus-within{--input-box-shadow:${focusRingStyle({
+		base,
+		border,
+		focusRing
+	})};}${$fullscreen && css`height:100%;border-radius:0;resize:none;background-color:${base.bg};box-shadow:none;`}`;
+});
+/** Wraps the editor with an "Expand editor" toggle that fills the document pane. */
+function FullscreenEditor(t0) {
+	let $ = c(25), { enabled, children } = t0, [isFullscreen, setIsFullscreen] = useState(!1), rootRef = useRef(null), overlayRef = useRef(null), [overlayElement, setOverlayElement] = useState(null), t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (node) => {
+		overlayRef.current = node, setOverlayElement(node);
+	}, $[0] = t1) : t1 = $[0];
+	let setOverlayRef = t1, [paneRect, setPaneRect] = useState(null), [placeholderHeight, setPlaceholderHeight] = useState(250), showFullscreen = isFullscreen && paneRect !== null, t2;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => {
+		setPaneRect(null), setIsFullscreen(!1);
+	}, $[1] = t2) : t2 = $[1];
+	let collapse = t2, t3;
+	$[2] === isFullscreen ? t3 = $[3] : (t3 = () => {
+		if (isFullscreen) {
+			collapse();
+			return;
+		}
+		setPlaceholderHeight(rootRef.current?.offsetHeight ?? 250), setIsFullscreen(!0);
+	}, $[2] = isFullscreen, $[3] = t3);
+	let handleToggle = t3, t4;
+	$[4] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event) => {
+		event.key === "Escape" && (event.preventDefault(), event.stopPropagation(), event.nativeEvent.stopImmediatePropagation(), collapse());
+	}, $[4] = t4) : t4 = $[4];
+	let handleKeyDown = t4, t5, t6;
+	$[5] === isFullscreen ? (t5 = $[6], t6 = $[7]) : (t5 = () => {
+		if (!isFullscreen) return;
+		let paneElement = getDocumentPaneElement(rootRef.current), update = () => {
+			let { top, left, width, height } = paneElement ? paneElement.getBoundingClientRect() : {
+				top: 0,
+				left: 0,
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
+			setPaneRect((prev) => prev && prev.top === top && prev.left === left && prev.width === width && prev.height === height ? prev : {
+				top,
+				left,
+				width,
+				height
+			});
+		}, raf = requestAnimationFrame(update), resizeObserver;
+		return paneElement && (resizeObserver = new ResizeObserver(update), resizeObserver.observe(paneElement)), window.addEventListener("resize", update), window.addEventListener("scroll", update, !0), () => {
+			cancelAnimationFrame(raf), resizeObserver?.disconnect(), window.removeEventListener("resize", update), window.removeEventListener("scroll", update, !0);
+		};
+	}, t6 = [isFullscreen], $[5] = isFullscreen, $[6] = t5, $[7] = t6), useEffect(t5, t6);
+	let t7, t8;
+	$[8] === showFullscreen ? (t7 = $[9], t8 = $[10]) : (t7 = () => {
+		if (!showFullscreen) return;
+		let raf_0 = requestAnimationFrame(() => {
+			let overlay = overlayRef.current;
+			overlay && (overlay.querySelector(".cm-content") ?? overlay).focus();
+		});
+		return () => cancelAnimationFrame(raf_0);
+	}, t8 = [showFullscreen], $[8] = showFullscreen, $[9] = t7, $[10] = t8), useEffect(t7, t8);
+	let t9;
+	$[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];
+	let toggleButton = t9, t10;
+	$[16] !== paneRect || $[17] !== showFullscreen ? (t10 = showFullscreen && paneRect ? {
+		position: "fixed",
+		top: paneRect.top,
+		left: paneRect.left,
+		width: paneRect.width,
+		height: paneRect.height
+	} : void 0, $[16] = paneRect, $[17] = showFullscreen, $[18] = t10) : t10 = $[18];
+	let fullscreenStyle = t10, t11;
+	return $[19] !== children || $[20] !== fullscreenStyle || $[21] !== placeholderHeight || $[22] !== showFullscreen || $[23] !== toggleButton ? (t11 = /* @__PURE__ */ jsx(FullscreenRoot, {
+		ref: rootRef,
+		children: showFullscreen ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": !0,
+			style: { height: placeholderHeight }
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Layer, { children: /* @__PURE__ */ jsxs(FullscreenOverlay, {
+			onKeyDown: handleKeyDown,
+			ref: setOverlayRef,
+			style: fullscreenStyle,
+			tabIndex: -1,
+			children: [toggleButton, children({ isFullscreen: showFullscreen })]
+		}) }) })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [toggleButton, children({ isFullscreen: showFullscreen })] })
+	}), $[19] = children, $[20] = fullscreenStyle, $[21] = placeholderHeight, $[22] = showFullscreen, $[23] = toggleButton, $[24] = t11) : t11 = $[24], t11;
+}
+const CodeMirrorProxy = lazy(() => import("./CodeMirrorProxy.js"));
+function useMounted() {
+	let $ = c(2), [mounted, setMounted] = useState(!1), t0, t1;
+	return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+		requestAnimationFrame(() => startTransition(() => setMounted(!0)));
+	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1), mounted;
+}
+const SUPPORTED_LANGUAGES = [
+	{
+		title: "Batch file",
+		value: "batchfile"
+	},
+	{
+		title: "C#",
+		value: "csharp"
+	},
+	{
+		title: "CSS",
+		value: "css"
+	},
+	{
+		title: "Go",
+		value: "golang"
+	},
+	{
+		title: "GROQ",
+		value: "groq"
+	},
+	{
+		title: "HTML",
+		value: "html"
+	},
+	{
+		title: "Java",
+		value: "java"
+	},
+	{
+		title: "JavaScript",
+		value: "javascript"
+	},
+	{
+		title: "JSON",
+		value: "json"
+	},
+	{
+		title: "JSX",
+		value: "jsx"
+	},
+	{
+		title: "Markdown",
+		value: "markdown"
+	},
+	{
+		title: "MySQL",
+		value: "mysql"
+	},
+	{
+		title: "PHP",
+		value: "php"
+	},
+	{
+		title: "Plain text",
+		value: "text"
+	},
+	{
+		title: "Python",
+		value: "python"
+	},
+	{
+		title: "Ruby",
+		value: "ruby"
+	},
+	{
+		title: "SASS",
+		value: "sass"
+	},
+	{
+		title: "SCSS",
+		value: "scss"
+	},
+	{
+		title: "sh",
+		value: "sh"
+	},
+	{
+		title: "SQL",
+		value: "sql"
+	},
+	{
+		title: "TSX",
+		value: "tsx"
+	},
+	{
+		title: "TypeScript",
+		value: "typescript"
+	},
+	{
+		title: "XML",
+		value: "xml"
+	},
+	{
+		title: "YAML",
+		value: "yaml"
+	}
+], LANGUAGE_ALIASES = { js: "javascript" }, PATH_CODE = ["code"], defaultLanguageMode = "text";
+function useLanguageMode(schemaType, value) {
+	let $ = c(12), languages = useLanguageAlternatives(schemaType), fixedLanguage = schemaType.options?.language, language = value?.language ?? fixedLanguage ?? defaultLanguageMode, t0;
+	if ($[0] !== language || $[1] !== languages) {
+		let t1;
+		$[3] === language ? t1 = $[4] : (t1 = (entry) => entry.value === language, $[3] = language, $[4] = t1), t0 = languages.find(t1), $[0] = language, $[1] = languages, $[2] = t0;
+	} else t0 = $[2];
+	let configured = t0, t1;
+	$[5] !== configured?.mode || $[6] !== language ? (t1 = configured?.mode ?? resolveAliasedLanguage(language) ?? defaultLanguageMode, $[5] = configured?.mode, $[6] = language, $[7] = t1) : t1 = $[7];
+	let languageMode = t1, t2;
+	return $[8] !== language || $[9] !== languageMode || $[10] !== languages ? (t2 = {
+		language,
+		languageMode,
+		languages
+	}, $[8] = language, $[9] = languageMode, $[10] = languages, $[11] = t2) : t2 = $[11], t2;
+}
+function resolveAliasedLanguage(lang) {
+	return (lang && LANGUAGE_ALIASES[lang]) ?? lang;
+}
+function useLanguageAlternatives(type) {
+	let $ = c(2), t0;
+	bb0: {
+		let languageAlternatives = type.options?.languageAlternatives;
+		if (!languageAlternatives) {
+			t0 = SUPPORTED_LANGUAGES;
+			break bb0;
+		}
+		if (!Array.isArray(languageAlternatives)) throw Error(`'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`);
+		let t1;
+		$[0] === languageAlternatives ? t1 = $[1] : (t1 = languageAlternatives.reduce(_temp$1, []), $[0] = languageAlternatives, $[1] = t1), t0 = t1;
+	}
+	return t0;
+}
+function _temp$1(acc, t0) {
+	let { title, value: val, mode } = t0, alias = LANGUAGE_ALIASES[val];
+	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({
+		title,
+		value: alias,
+		mode
+	})) : acc.concat({
+		title,
+		value: val,
+		mode
+	});
+}
+/** @internal */
+function LanguageInput(props) {
+	let $ = c(9), { language, languages, onChange, elementProps } = props, t0;
+	$[0] === onChange ? t0 = $[1] : (t0 = (e) => {
+		let newValue = e.currentTarget.value;
+		onChange(newValue ? set(newValue) : unset());
+	}, $[0] = onChange, $[1] = t0);
+	let handleChange = t0, t1;
+	$[2] === languages ? t1 = $[3] : (t1 = languages.map(_temp), $[2] = languages, $[3] = t1);
+	let t2;
+	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;
+}
+function _temp(lang) {
+	return /* @__PURE__ */ jsx("option", {
+		value: lang.value,
+		children: lang.title
+	}, lang.value);
+}
+function LanguageField(props) {
+	let $ = c(9), { member, languages, language, renderItem, renderField, renderPreview } = props, t0;
+	$[0] !== language || $[1] !== languages ? (t0 = (t1) => {
+		let { elementProps, onChange } = t1;
+		return /* @__PURE__ */ jsx(LanguageInput, {
+			onChange,
+			elementProps,
+			language,
+			languages
+		});
+	}, $[0] = language, $[1] = languages, $[2] = t0) : t0 = $[2];
+	let renderInput = t0, t1;
+	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;
+}
+/** @internal */
+function useFieldMember(members, fieldName) {
+	let $ = c(5), t0;
+	if ($[0] !== fieldName || $[1] !== members) {
+		let t1;
+		$[3] === fieldName ? t1 = $[4] : (t1 = (member) => member.kind === "field" && member.name === fieldName, $[3] = fieldName, $[4] = t1), t0 = members.find(t1), $[0] = fieldName, $[1] = members, $[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/** @public */
+function CodeInput(props) {
+	let $ = c(43), { members, elementProps, onChange, readOnly, renderField, renderInput, renderItem, renderPreview, schemaType: type, value, onPathFocus } = props, languageFieldMember = useFieldMember(members, "language"), filenameMember = useFieldMember(members, "filename"), codeFieldMember = useFieldMember(members, "code"), t0;
+	$[0] === onPathFocus ? t0 = $[1] : (t0 = () => {
+		onPathFocus(PATH_CODE);
+	}, $[0] = onPathFocus, $[1] = t0);
+	let handleCodeFocus = t0, t1;
+	$[2] === onChange ? t1 = $[3] : (t1 = (lines) => onChange(set(lines, ["highlightedLines"])), $[2] = onChange, $[3] = t1);
+	let onHighlightChange = t1, t2;
+	$[4] !== onChange || $[5] !== type.name || $[6] !== type.options?.language ? (t2 = (code) => {
+		let fixedLanguage = type.options?.language;
+		onChange([setIfMissing({
+			_type: type.name,
+			language: fixedLanguage
+		}), code ? set(code, PATH_CODE) : unset(PATH_CODE)]);
+	}, $[4] = onChange, $[5] = type.name, $[6] = type.options?.language, $[7] = t2) : t2 = $[7];
+	let handleCodeChange = t2, { languages, language, languageMode } = useLanguageMode(props.schemaType, props.value), mounted = useMounted(), fullscreenEnabled = !type.options?.disableFullscreen, t3;
+	$[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: (t4) => {
+			let { isFullscreen } = t4;
+			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
+					})
+				})
+			});
+		}
+	}), $[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;
+	let renderCodeInput = t3, t4;
+	$[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];
+	let t5;
+	$[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];
+	let t6;
+	$[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];
+	let t7;
+	return $[39] !== t4 || $[40] !== t5 || $[41] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 4,
+		children: [
+			t4,
+			t5,
+			t6
+		]
+	}), $[39] = t4, $[40] = t5, $[41] = t6, $[42] = t7) : t7 = $[42], t7;
+}
+function getMedia(language) {
+	if (language === "jsx") return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 128 128",
+		children: /* @__PURE__ */ jsxs("g", {
+			fill: "#61DAFB",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "64",
+				cy: "64",
+				r: "11.4"
+			}), /* @__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" })]
+		})
+	});
+	if (language === "javascript") return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 128 128",
+		children: [/* @__PURE__ */ jsx("path", {
+			fill: "#F0DB4F",
+			d: "M1.408 1.408h125.184v125.185H1.408z"
+		}), /* @__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"
+		})]
+	});
+	if (language === "php") 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: [
+					/* @__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" }),
+					/* @__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" }),
+					/* @__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" })
+				]
+			})
+		})
+	});
+	if (language === "json") return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		xmlnsXlink: "http://www.w3.org/1999/xlink",
+		viewBox: "0 0 160 160",
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsxs("linearGradient", {
+					id: "a",
+					children: [/* @__PURE__ */ jsx("stop", { offset: "0" }), /* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: "#fff"
+					})]
+				}),
+				/* @__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)"
+				}),
+				/* @__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)"
+				})
+			] }),
+			/* @__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: { marker: "none" },
+				color: "#000",
+				fill: "url(#b)",
+				fillRule: "evenodd",
+				overflow: "visible"
+			}),
+			/* @__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: { marker: "none" },
+				color: "#000",
+				fill: "url(#c)",
+				fillRule: "evenodd",
+				overflow: "visible"
+			})
+		]
+	});
+}
+const PreviewContainer = styled(Box).withConfig({
+	displayName: "PreviewContainer",
+	componentId: "sc-o2s7d4-0"
+})`position:relative;`;
+/**
+* @public
+*/
+function PreviewCode(props) {
+	let $ = c(10), { selection, schemaType: type } = props, { languageMode } = useLanguageMode(type, props.selection), mounted = useMounted(), t0;
+	$[0] === selection ? t0 = $[1] : (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: [selection?.filename ? /* @__PURE__ */ jsx(Box, {
+				flex: 1,
+				children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("code", { children: selection.filename }) })
+			}) : null, selection?.language ? /* @__PURE__ */ jsx(Label, {
+				muted: !0,
+				children: selection.language
+			}) : null]
+		})
+	}) : null, $[0] = selection, $[1] = t0);
+	let t1;
+	$[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: {
+				lineNumbers: !1,
+				foldGutter: !1,
+				highlightSelectionMatches: !1,
+				highlightActiveLineGutter: !1,
+				highlightActiveLine: !1
+			},
+			languageMode
+		})
+	}), $[2] = languageMode, $[3] = mounted, $[4] = selection?.code, $[5] = selection?.highlightedLines, $[6] = t1) : t1 = $[6];
+	let t2;
+	return $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx(PreviewContainer, { children: /* @__PURE__ */ jsxs(Card, {
+		padding: 4,
+		children: [t0, t1]
+	}) }), $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
+}
+/**
+* @public
+*/
+const codeTypeName = "code", codeSchema = defineType({
+	name: "code",
+	type: "object",
+	title: "Code",
+	components: {
+		input: CodeInput,
+		preview: PreviewCode
+	},
+	icon: CodeBlockIcon,
+	fields: [
+		{
+			name: "language",
+			title: "Language",
+			type: "string"
+		},
+		{
+			name: "filename",
+			title: "Filename",
+			type: "string"
+		},
+		{
+			title: "Code",
+			name: "code",
+			type: "text"
+		},
+		{
+			title: "Highlighted lines",
+			name: "highlightedLines",
+			type: "array",
+			of: [{
+				type: "number",
+				title: "Highlighted line"
+			}]
+		}
+	],
+	preview: {
+		select: {
+			language: "language",
+			code: "code",
+			filename: "filename",
+			highlightedLines: "highlightedLines"
+		},
+		prepare: (value) => ({
+			title: value.filename || (value.language || "unknown").toUpperCase(),
+			media: getMedia(value?.language),
+			selection: value
+		})
+	}
+}), codeInput = definePlugin((config) => {
+	let codeModes = config && config.codeModes, basePlugin = {
+		name: "@sanity/code-input",
+		schema: { types: [codeSchema] }
+	};
+	return codeModes ? {
+		...basePlugin,
+		form: { components: { input: (props) => props.id === "root" ? /* @__PURE__ */ jsx(CodeInputConfigContext.Provider, {
+			value: config,
+			children: props.renderDefault(props)
+		}) : props.renderDefault(props) } }
+	} : basePlugin;
+});
+export { PreviewCode, codeInput, codeSchema, codeTypeName };
+
+//# sourceMappingURL=index.js.map