@stoplight/elements-core 8.1.3 → 8.2.0

package/__fixtures__/operations/x-code-samples.d.ts

@@ -0,0 +1,2 @@
+import { IHttpOperation } from '@stoplight/types';
+export declare const xcodeSamples: IHttpOperation;

package/components/Docs/HttpOperation/HttpOperation.stories.d.ts

@@ -5,3 +5,6 @@ export default meta;
 export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const StoryWithCustomCodeSamples: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/RequestSamples/RequestSamples.d.ts

@@ -1,7 +1,9 @@
 import { Request } from 'har-format';
 import React from 'react';
+import { CodeSample } from './extractCodeSamples';
 export interface RequestSamplesProps {
     request: Request;
+    customCodeSamples?: CodeSample[];
     embeddedInMd?: boolean;
 }
 export declare const RequestSamples: React.NamedExoticComponent<RequestSamplesProps>;

package/components/RequestSamples/RequestSamples.stories.d.ts

@@ -2,3 +2,4 @@ import { RequestSamplesProps } from './RequestSamples';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;
 export default _default;
 export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;
+export declare const RequestSampleWithCustomCodes: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;

package/components/RequestSamples/extractCodeSamples.d.ts

@@ -0,0 +1,7 @@
+export declare type CodeSample = {
+    lang: string;
+    lib?: string;
+    label: string;
+    source: string;
+};
+export declare const extractCodeSamples: (obj: unknown) => CodeSample[];

package/components/RequestSamples/index.d.ts

@@ -1 +1,2 @@
+export * from './extractCodeSamples';
 export * from './RequestSamples';

package/components/RequestSamples/requestSampleConfigs.d.ts

@@ -1,16 +1,14 @@
 import { CodeViewerLanguage } from '@stoplight/mosaic-code-viewer';
 import { Dictionary } from '@stoplight/types';
-declare type SupportedLanguage = string;
-declare type SupportedLibrary = string;
-interface LibraryConfig {
+export declare type SupportedLanguage = string;
+export declare type SupportedLibrary = string;
+export interface LibraryConfig {
     httpSnippetLibrary: string;
 }
-interface LanguageConfig {
+export interface LanguageConfig {
     mosaicCodeViewerLanguage: CodeViewerLanguage;
     httpSnippetLanguage: string;
     libraries?: Dictionary<LibraryConfig, SupportedLibrary>;
 }
-declare type RequestSampleConfigs = Dictionary<LanguageConfig, SupportedLanguage>;
+export declare type RequestSampleConfigs = Dictionary<LanguageConfig, SupportedLanguage>;
 export declare const requestSampleConfigs: RequestSampleConfigs;
-export declare const getConfigFor: (language: string, library: string) => LanguageConfig & Partial<LibraryConfig>;
-export {};

package/index.esm.js

@@ -1,6 +1,6 @@
 import { __rest, __awaiter } from 'tslib';
 import * as React from 'react';
-import React__default, { useContext, useMemo } from 'react';
+import React__default, { useContext, memo, useMemo, useState, useEffect } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
 import { resolveInlineRef, hasRef, isPlainObject as isPlainObject$1, safeParse, safeStringify } from '@stoplight/json';
 import isArray from 'lodash/isArray.js';
@@ -17,7 +17,11 @@ import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
+import isString from 'lodash/isString.js';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
+import cloneDeep from 'lodash/cloneDeep.js';
+import find from 'lodash/find.js';
+import findKey from 'lodash/findKey.js';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
 import { hash } from '@stoplight/http-spec/hash';
 import capitalize from 'lodash/capitalize.js';
@@ -32,7 +36,6 @@ import keyBy from 'lodash/keyBy.js';
 import last from 'lodash/last.js';
 import map from 'lodash/map.js';
 import mapValues from 'lodash/mapValues.js';
-import isString from 'lodash/isString.js';
 import pickBy from 'lodash/pickBy.js';
 import { CodeEditor } from '@stoplight/mosaic-code-editor';
 import * as Sampler from '@stoplight/json-schema-sampler';
@@ -620,6 +623,29 @@ const getServerUrlWithVariableValues = (server, values) => {
     return urlString;
 };
 
+const extractCodeSamples = (obj) => {
+    if (!isPlainObject$1(obj) || !isPlainObject$1(obj.extensions)) {
+        return [];
+    }
+    const codeSamples = obj.extensions['x-codeSamples'];
+    if (!Array.isArray(codeSamples)) {
+        return [];
+    }
+    return codeSamples.reduce((extracted, item) => {
+        if (isPlainObject$1(item) && isString(item['lang']) && isString(item['source'])) {
+            const lib = isString(item['lib']) ? item['lib'] : undefined;
+            const label = isString(item['label']) ? item['label'] : lib !== null && lib !== void 0 ? lib : item['lang'];
+            extracted.push({
+                lang: item['lang'],
+                lib,
+                label,
+                source: item['source'],
+            });
+        }
+        return extracted;
+    }, []);
+};
+
 const persistAtom = (key, atomInstance) => {
     if (typeof window === 'undefined' || window.localStorage === undefined) {
         return atomInstance;
@@ -825,76 +851,149 @@ const requestSampleConfigs = {
         mosaicCodeViewerLanguage: 'swift',
         httpSnippetLanguage: 'swift',
     },
-};
-const getConfigFor = (language, library) => {
-    var _a;
-    const languageConfig = requestSampleConfigs[language];
-    const libraryConfig = ((_a = languageConfig.libraries) === null || _a === void 0 ? void 0 : _a[library]) || {};
-    return Object.assign(Object.assign({}, languageConfig), libraryConfig);
 };
 
-const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', atom('Shell'));
-const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', atom('cURL'));
+const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', atom('shell'));
+const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', atom('curl'));
 const fallbackText = 'Unable to generate code example';
-const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) => {
+const RequestSamples = memo(({ request, embeddedInMd = false, customCodeSamples = [] }) => {
     const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
-    const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const [requestSample, setRequestSample] = React__default.useState(null);
-    React__default.useEffect(() => {
-        let isStale = false;
-        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
-            .then(example => {
-            if (!isStale) {
-                setRequestSample(example);
+    const allRequestSamples = useMemo(() => {
+        var _a;
+        const requestSamples = cloneDeep(requestSampleConfigs);
+        Object.entries(requestSamples).forEach(([languageKey, value]) => {
+            var _a;
+            value.displayText = languageKey;
+            Object.entries(((_a = value.libraries) !== null && _a !== void 0 ? _a : (value.libraries = {}))).forEach(([libKey, value]) => {
+                value.displayText = `${languageKey} / ${libKey}`;
+            });
+        });
+        for (const customCodeSample of customCodeSamples) {
+            const existingLanguageSampleKey = findKey(requestSamples, {
+                httpSnippetLanguage: customCodeSample.lang.toLowerCase(),
+            });
+            const existingLanguageSample = requestSamples[existingLanguageSampleKey];
+            if (!existingLanguageSample) {
+                const newLanguageSample = {
+                    displayText: customCodeSample.lang,
+                    mosaicCodeViewerLanguage: customCodeSample.lang,
+                    httpSnippetLanguage: customCodeSample.lang,
+                    libraries: {},
+                };
+                if (customCodeSample.lib) {
+                    newLanguageSample.libraries[customCodeSample.lib] = {
+                        displayText: `${customCodeSample.lang} / ${customCodeSample.lib}`,
+                        httpSnippetLibrary: customCodeSample.lib,
+                        sampleCode: customCodeSample.source,
+                    };
+                }
+                else {
+                    newLanguageSample.sampleCode = customCodeSample.source;
+                }
+                requestSamples[customCodeSample.label] = newLanguageSample;
             }
-        })
-            .catch(() => {
-            if (!isStale) {
-                setRequestSample(fallbackText);
+            else {
+                (_a = existingLanguageSample.libraries) !== null && _a !== void 0 ? _a : (existingLanguageSample.libraries = {});
+                if (customCodeSample.lib) {
+                    const existingLibrarySampleKey = findKey(existingLanguageSample.libraries, {
+                        httpSnippetLibrary: customCodeSample.lib,
+                    });
+                    const existingLibrarySample = existingLanguageSample.libraries[existingLibrarySampleKey];
+                    if (!existingLibrarySample) {
+                        const newLibrarySample = {
+                            displayText: `${existingLanguageSample} / ${customCodeSample.lib}`,
+                            httpSnippetLibrary: customCodeSample.lib,
+                            sampleCode: customCodeSample.source,
+                        };
+                        existingLanguageSample.libraries[customCodeSample.lib] = newLibrarySample;
+                    }
+                    else {
+                        existingLibrarySample.displayText = `${existingLanguageSampleKey} / ${existingLibrarySampleKey}`;
+                        existingLibrarySample.sampleCode = customCodeSample.source;
+                    }
+                }
+                else {
+                    existingLanguageSample.sampleCode = customCodeSample.source;
+                }
             }
-        });
-        return () => {
-            isStale = true;
-        };
-    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
-    const menuItems = useMemo(() => {
-        const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
-            const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
+        }
+        return requestSamples;
+    }, [customCodeSamples]);
+    const [menuItems, selectedSampleConfig] = useMemo(() => {
+        var _a, _b;
+        const items = Object.entries(allRequestSamples).map(([languageLabel, languageConfig]) => {
+            var _a;
+            const hasLibraries = Object.keys((_a = languageConfig.libraries) !== null && _a !== void 0 ? _a : {}).length > 0;
             return {
-                id: language,
-                title: language,
-                isChecked: selectedLanguage === language,
+                id: languageLabel,
+                title: languageLabel,
+                isChecked: selectedLanguage === languageConfig.httpSnippetLanguage,
+                closeOnPress: !hasLibraries,
                 onPress: hasLibraries
                     ? undefined
                     : () => {
-                        setSelectedLanguage(language);
+                        setSelectedLanguage(languageConfig.httpSnippetLanguage);
                         setSelectedLibrary('');
                     },
-                children: config.libraries
-                    ? Object.keys(config.libraries).map(library => ({
-                        id: `${language}-${library}`,
-                        title: library,
-                        isChecked: selectedLanguage === language && selectedLibrary === library,
+                children: hasLibraries
+                    ? Object.entries(languageConfig.libraries).map(([libraryLabel, libraryConfig]) => ({
+                        id: `${languageLabel}-${libraryLabel}`,
+                        title: libraryLabel,
+                        isChecked: selectedLanguage === languageConfig.httpSnippetLanguage &&
+                            selectedLibrary === libraryConfig.httpSnippetLibrary,
                         onPress: () => {
-                            setSelectedLanguage(language);
-                            setSelectedLibrary(library);
+                            setSelectedLanguage(languageConfig.httpSnippetLanguage);
+                            setSelectedLibrary(libraryConfig.httpSnippetLibrary);
                         },
                     }))
                     : undefined,
             };
         });
-        return items;
-    }, [selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+        const selectedLanguageSample = find(allRequestSamples, { httpSnippetLanguage: selectedLanguage });
+        const selectedLibrarySample = find((_a = selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.libraries) !== null && _a !== void 0 ? _a : {}, {
+            httpSnippetLibrary: selectedLibrary,
+        });
+        return [
+            items,
+            Object.assign(Object.assign(Object.assign({}, selectedLibrarySample), selectedLanguageSample), { displayText: (_b = selectedLibrarySample === null || selectedLibrarySample === void 0 ? void 0 : selectedLibrarySample.displayText) !== null && _b !== void 0 ? _b : selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.displayText }),
+        ];
+    }, [allRequestSamples, selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+    const [requestSample, setRequestSample] = useState(null);
+    useEffect(() => {
+        let isStale = false;
+        if (selectedSampleConfig) {
+            if (selectedSampleConfig.sampleCode) {
+                setRequestSample(selectedSampleConfig.sampleCode);
+            }
+            else {
+                convertRequestToSample(selectedSampleConfig.httpSnippetLanguage, selectedSampleConfig.httpSnippetLibrary, request)
+                    .then(example => {
+                    if (!isStale) {
+                        setRequestSample(example);
+                    }
+                })
+                    .catch(() => {
+                    if (!isStale) {
+                        setRequestSample(fallbackText);
+                    }
+                });
+            }
+        }
+        else {
+            setRequestSample(fallbackText);
+        }
+        return () => {
+            isStale = true;
+        };
+    }, [request, selectedSampleConfig]);
     return (React__default.createElement(Panel, { rounded: embeddedInMd ? undefined : true, isCollapsible: embeddedInMd },
         React__default.createElement(Panel.Titlebar, { rightComponent: React__default.createElement(CopyButton, { size: "sm", copyValue: requestSample || '' }) },
             React__default.createElement(Box, { ml: -2 },
                 React__default.createElement(Menu, { "aria-label": "Request Sample Language", closeOnPress: true, items: menuItems, renderTrigger: ({ isOpen }) => (React__default.createElement(Button, { size: "sm", iconRight: "chevron-down", appearance: "minimal", active: isOpen },
                         "Request Sample: ",
-                        selectedLanguage,
-                        " ",
-                        selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                        selectedSampleConfig.displayText)) }))),
+        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: selectedSampleConfig === null || selectedSampleConfig === void 0 ? void 0 : selectedSampleConfig.mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
                 ? undefined
                 :
                     {
@@ -2158,6 +2257,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
+    const customCodeSamples = extractCodeSamples(httpOperation);
     const getValues = () => Object.keys(bodyParameterValues)
         .filter(param => { var _a; return (_a = !isAllowedEmptyValues[param]) !== null && _a !== void 0 ? _a : true; })
         .reduce((previousValue, currentValue) => {
@@ -2287,11 +2387,11 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             tryItPanelContents));
     }
     else {
-        tryItPanelElem = (React.createElement(Box, { className: "TryItPanel", bg: "canvas-100", rounded: "lg" }, tryItPanelContents));
+        tryItPanelElem = (React.createElement(Box, { className: "TryItPanel", bg: "canvas-100" }, tryItPanelContents));
     }
     return (React.createElement(Box, { rounded: "lg", overflowY: "hidden" },
         tryItPanelElem,
-        requestData && embeddedInMd && React.createElement(RequestSamples, { request: requestData, embeddedInMd: true }),
+        requestData && embeddedInMd && (React.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples, embeddedInMd: true })),
         response && !('error' in response) && React.createElement(TryItResponse, { response: response }),
         response && 'error' in response && React.createElement(ResponseError, { state: response })));
 };
@@ -2335,11 +2435,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
 const TryItWithRequestSamples = (_a) => {
     var { hideTryIt } = _a, props = __rest(_a, ["hideTryIt"]);
     const [requestData, setRequestData] = React.useState();
+    const customCodeSamples = extractCodeSamples(props.httpOperation);
     return (React.createElement(VStack, { spacing: 6 },
         !hideTryIt && (React.createElement(InvertTheme, null,
             React.createElement(Box, null,
                 React.createElement(TryIt, Object.assign({}, props, { onRequestChange: setRequestData }))))),
-        requestData && React.createElement(RequestSamples, { request: requestData }),
+        requestData && React.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples }),
         React.createElement(ResponseExamples, Object.assign({}, props))));
 };
 

package/index.js

@@ -19,7 +19,11 @@ var cn = require('classnames');
 var utils = require('jotai/utils');
 var jotai = require('jotai');
 var URI = require('urijs');
+var isString = require('lodash/isString.js');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
+var cloneDeep = require('lodash/cloneDeep.js');
+var find = require('lodash/find.js');
+var findKey = require('lodash/findKey.js');
 var httpsnippetLite = require('httpsnippet-lite');
 var hash = require('@stoplight/http-spec/hash');
 var capitalize = require('lodash/capitalize.js');
@@ -34,7 +38,6 @@ var keyBy = require('lodash/keyBy.js');
 var last = require('lodash/last.js');
 var map = require('lodash/map.js');
 var mapValues = require('lodash/mapValues.js');
-var isString = require('lodash/isString.js');
 var pickBy = require('lodash/pickBy.js');
 var mosaicCodeEditor = require('@stoplight/mosaic-code-editor');
 var Sampler = require('@stoplight/json-schema-sampler');
@@ -83,6 +86,10 @@ var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
+var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
+var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
+var find__default = /*#__PURE__*/_interopDefaultLegacy(find);
+var findKey__default = /*#__PURE__*/_interopDefaultLegacy(findKey);
 var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
 var filter__default = /*#__PURE__*/_interopDefaultLegacy(filter);
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
@@ -92,7 +99,6 @@ var keyBy__default = /*#__PURE__*/_interopDefaultLegacy(keyBy);
 var last__default = /*#__PURE__*/_interopDefaultLegacy(last);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
 var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
-var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var pickBy__default = /*#__PURE__*/_interopDefaultLegacy(pickBy);
 var Sampler__namespace = /*#__PURE__*/_interopNamespace(Sampler);
 var compact__default = /*#__PURE__*/_interopDefaultLegacy(compact);
@@ -677,6 +683,29 @@ const getServerUrlWithVariableValues = (server, values) => {
     return urlString;
 };
 
+const extractCodeSamples = (obj) => {
+    if (!json.isPlainObject(obj) || !json.isPlainObject(obj.extensions)) {
+        return [];
+    }
+    const codeSamples = obj.extensions['x-codeSamples'];
+    if (!Array.isArray(codeSamples)) {
+        return [];
+    }
+    return codeSamples.reduce((extracted, item) => {
+        if (json.isPlainObject(item) && isString__default["default"](item['lang']) && isString__default["default"](item['source'])) {
+            const lib = isString__default["default"](item['lib']) ? item['lib'] : undefined;
+            const label = isString__default["default"](item['label']) ? item['label'] : lib !== null && lib !== void 0 ? lib : item['lang'];
+            extracted.push({
+                lang: item['lang'],
+                lib,
+                label,
+                source: item['source'],
+            });
+        }
+        return extracted;
+    }, []);
+};
+
 const persistAtom = (key, atomInstance) => {
     if (typeof window === 'undefined' || window.localStorage === undefined) {
         return atomInstance;
@@ -882,76 +911,149 @@ const requestSampleConfigs = {
         mosaicCodeViewerLanguage: 'swift',
         httpSnippetLanguage: 'swift',
     },
-};
-const getConfigFor = (language, library) => {
-    var _a;
-    const languageConfig = requestSampleConfigs[language];
-    const libraryConfig = ((_a = languageConfig.libraries) === null || _a === void 0 ? void 0 : _a[library]) || {};
-    return Object.assign(Object.assign({}, languageConfig), libraryConfig);
 };
 
-const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', jotai.atom('Shell'));
-const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', jotai.atom('cURL'));
+const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', jotai.atom('shell'));
+const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', jotai.atom('curl'));
 const fallbackText = 'Unable to generate code example';
-const RequestSamples = React__default["default"].memo(({ request, embeddedInMd = false }) => {
+const RequestSamples = React.memo(({ request, embeddedInMd = false, customCodeSamples = [] }) => {
     const [selectedLanguage, setSelectedLanguage] = jotai.useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = jotai.useAtom(selectedLibraryAtom);
-    const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const [requestSample, setRequestSample] = React__default["default"].useState(null);
-    React__default["default"].useEffect(() => {
-        let isStale = false;
-        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
-            .then(example => {
-            if (!isStale) {
-                setRequestSample(example);
+    const allRequestSamples = React.useMemo(() => {
+        var _a;
+        const requestSamples = cloneDeep__default["default"](requestSampleConfigs);
+        Object.entries(requestSamples).forEach(([languageKey, value]) => {
+            var _a;
+            value.displayText = languageKey;
+            Object.entries(((_a = value.libraries) !== null && _a !== void 0 ? _a : (value.libraries = {}))).forEach(([libKey, value]) => {
+                value.displayText = `${languageKey} / ${libKey}`;
+            });
+        });
+        for (const customCodeSample of customCodeSamples) {
+            const existingLanguageSampleKey = findKey__default["default"](requestSamples, {
+                httpSnippetLanguage: customCodeSample.lang.toLowerCase(),
+            });
+            const existingLanguageSample = requestSamples[existingLanguageSampleKey];
+            if (!existingLanguageSample) {
+                const newLanguageSample = {
+                    displayText: customCodeSample.lang,
+                    mosaicCodeViewerLanguage: customCodeSample.lang,
+                    httpSnippetLanguage: customCodeSample.lang,
+                    libraries: {},
+                };
+                if (customCodeSample.lib) {
+                    newLanguageSample.libraries[customCodeSample.lib] = {
+                        displayText: `${customCodeSample.lang} / ${customCodeSample.lib}`,
+                        httpSnippetLibrary: customCodeSample.lib,
+                        sampleCode: customCodeSample.source,
+                    };
+                }
+                else {
+                    newLanguageSample.sampleCode = customCodeSample.source;
+                }
+                requestSamples[customCodeSample.label] = newLanguageSample;
             }
-        })
-            .catch(() => {
-            if (!isStale) {
-                setRequestSample(fallbackText);
+            else {
+                (_a = existingLanguageSample.libraries) !== null && _a !== void 0 ? _a : (existingLanguageSample.libraries = {});
+                if (customCodeSample.lib) {
+                    const existingLibrarySampleKey = findKey__default["default"](existingLanguageSample.libraries, {
+                        httpSnippetLibrary: customCodeSample.lib,
+                    });
+                    const existingLibrarySample = existingLanguageSample.libraries[existingLibrarySampleKey];
+                    if (!existingLibrarySample) {
+                        const newLibrarySample = {
+                            displayText: `${existingLanguageSample} / ${customCodeSample.lib}`,
+                            httpSnippetLibrary: customCodeSample.lib,
+                            sampleCode: customCodeSample.source,
+                        };
+                        existingLanguageSample.libraries[customCodeSample.lib] = newLibrarySample;
+                    }
+                    else {
+                        existingLibrarySample.displayText = `${existingLanguageSampleKey} / ${existingLibrarySampleKey}`;
+                        existingLibrarySample.sampleCode = customCodeSample.source;
+                    }
+                }
+                else {
+                    existingLanguageSample.sampleCode = customCodeSample.source;
+                }
             }
-        });
-        return () => {
-            isStale = true;
-        };
-    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
-    const menuItems = React.useMemo(() => {
-        const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
-            const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
+        }
+        return requestSamples;
+    }, [customCodeSamples]);
+    const [menuItems, selectedSampleConfig] = React.useMemo(() => {
+        var _a, _b;
+        const items = Object.entries(allRequestSamples).map(([languageLabel, languageConfig]) => {
+            var _a;
+            const hasLibraries = Object.keys((_a = languageConfig.libraries) !== null && _a !== void 0 ? _a : {}).length > 0;
             return {
-                id: language,
-                title: language,
-                isChecked: selectedLanguage === language,
+                id: languageLabel,
+                title: languageLabel,
+                isChecked: selectedLanguage === languageConfig.httpSnippetLanguage,
+                closeOnPress: !hasLibraries,
                 onPress: hasLibraries
                     ? undefined
                     : () => {
-                        setSelectedLanguage(language);
+                        setSelectedLanguage(languageConfig.httpSnippetLanguage);
                         setSelectedLibrary('');
                     },
-                children: config.libraries
-                    ? Object.keys(config.libraries).map(library => ({
-                        id: `${language}-${library}`,
-                        title: library,
-                        isChecked: selectedLanguage === language && selectedLibrary === library,
+                children: hasLibraries
+                    ? Object.entries(languageConfig.libraries).map(([libraryLabel, libraryConfig]) => ({
+                        id: `${languageLabel}-${libraryLabel}`,
+                        title: libraryLabel,
+                        isChecked: selectedLanguage === languageConfig.httpSnippetLanguage &&
+                            selectedLibrary === libraryConfig.httpSnippetLibrary,
                         onPress: () => {
-                            setSelectedLanguage(language);
-                            setSelectedLibrary(library);
+                            setSelectedLanguage(languageConfig.httpSnippetLanguage);
+                            setSelectedLibrary(libraryConfig.httpSnippetLibrary);
                         },
                     }))
                     : undefined,
             };
         });
-        return items;
-    }, [selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+        const selectedLanguageSample = find__default["default"](allRequestSamples, { httpSnippetLanguage: selectedLanguage });
+        const selectedLibrarySample = find__default["default"]((_a = selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.libraries) !== null && _a !== void 0 ? _a : {}, {
+            httpSnippetLibrary: selectedLibrary,
+        });
+        return [
+            items,
+            Object.assign(Object.assign(Object.assign({}, selectedLibrarySample), selectedLanguageSample), { displayText: (_b = selectedLibrarySample === null || selectedLibrarySample === void 0 ? void 0 : selectedLibrarySample.displayText) !== null && _b !== void 0 ? _b : selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.displayText }),
+        ];
+    }, [allRequestSamples, selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+    const [requestSample, setRequestSample] = React.useState(null);
+    React.useEffect(() => {
+        let isStale = false;
+        if (selectedSampleConfig) {
+            if (selectedSampleConfig.sampleCode) {
+                setRequestSample(selectedSampleConfig.sampleCode);
+            }
+            else {
+                convertRequestToSample(selectedSampleConfig.httpSnippetLanguage, selectedSampleConfig.httpSnippetLibrary, request)
+                    .then(example => {
+                    if (!isStale) {
+                        setRequestSample(example);
+                    }
+                })
+                    .catch(() => {
+                    if (!isStale) {
+                        setRequestSample(fallbackText);
+                    }
+                });
+            }
+        }
+        else {
+            setRequestSample(fallbackText);
+        }
+        return () => {
+            isStale = true;
+        };
+    }, [request, selectedSampleConfig]);
     return (React__default["default"].createElement(mosaic.Panel, { rounded: embeddedInMd ? undefined : true, isCollapsible: embeddedInMd },
         React__default["default"].createElement(mosaic.Panel.Titlebar, { rightComponent: React__default["default"].createElement(mosaic.CopyButton, { size: "sm", copyValue: requestSample || '' }) },
             React__default["default"].createElement(mosaic.Box, { ml: -2 },
                 React__default["default"].createElement(mosaic.Menu, { "aria-label": "Request Sample Language", closeOnPress: true, items: menuItems, renderTrigger: ({ isOpen }) => (React__default["default"].createElement(mosaic.Button, { size: "sm", iconRight: "chevron-down", appearance: "minimal", active: isOpen },
                         "Request Sample: ",
-                        selectedLanguage,
-                        " ",
-                        selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, requestSample !== null && (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                        selectedSampleConfig.displayText)) }))),
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, requestSample !== null && (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: selectedSampleConfig === null || selectedSampleConfig === void 0 ? void 0 : selectedSampleConfig.mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
                 ? undefined
                 :
                     {
@@ -2215,6 +2317,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
+    const customCodeSamples = extractCodeSamples(httpOperation);
     const getValues = () => Object.keys(bodyParameterValues)
         .filter(param => { var _a; return (_a = !isAllowedEmptyValues[param]) !== null && _a !== void 0 ? _a : true; })
         .reduce((previousValue, currentValue) => {
@@ -2344,11 +2447,11 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             tryItPanelContents));
     }
     else {
-        tryItPanelElem = (React__namespace.createElement(mosaic.Box, { className: "TryItPanel", bg: "canvas-100", rounded: "lg" }, tryItPanelContents));
+        tryItPanelElem = (React__namespace.createElement(mosaic.Box, { className: "TryItPanel", bg: "canvas-100" }, tryItPanelContents));
     }
     return (React__namespace.createElement(mosaic.Box, { rounded: "lg", overflowY: "hidden" },
         tryItPanelElem,
-        requestData && embeddedInMd && React__namespace.createElement(RequestSamples, { request: requestData, embeddedInMd: true }),
+        requestData && embeddedInMd && (React__namespace.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples, embeddedInMd: true })),
         response && !('error' in response) && React__namespace.createElement(TryItResponse, { response: response }),
         response && 'error' in response && React__namespace.createElement(ResponseError, { state: response })));
 };
@@ -2392,11 +2495,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
 const TryItWithRequestSamples = (_a) => {
     var { hideTryIt } = _a, props = tslib.__rest(_a, ["hideTryIt"]);
     const [requestData, setRequestData] = React__namespace.useState();
+    const customCodeSamples = extractCodeSamples(props.httpOperation);
     return (React__namespace.createElement(mosaic.VStack, { spacing: 6 },
         !hideTryIt && (React__namespace.createElement(mosaic.InvertTheme, null,
             React__namespace.createElement(mosaic.Box, null,
                 React__namespace.createElement(TryIt, Object.assign({}, props, { onRequestChange: setRequestData }))))),
-        requestData && React__namespace.createElement(RequestSamples, { request: requestData }),
+        requestData && React__namespace.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples }),
         React__namespace.createElement(ResponseExamples, Object.assign({}, props))));
 };
 

package/index.mjs

@@ -1,6 +1,6 @@
 import { __rest, __awaiter } from 'tslib';
 import * as React from 'react';
-import React__default, { useContext, useMemo } from 'react';
+import React__default, { useContext, memo, useMemo, useState, useEffect } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
 import { resolveInlineRef, hasRef, isPlainObject as isPlainObject$1, safeParse, safeStringify } from '@stoplight/json';
 import isArray from 'lodash/isArray.js';
@@ -17,7 +17,11 @@ import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
+import isString from 'lodash/isString.js';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
+import cloneDeep from 'lodash/cloneDeep.js';
+import find from 'lodash/find.js';
+import findKey from 'lodash/findKey.js';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
 import { hash } from '@stoplight/http-spec/hash';
 import capitalize from 'lodash/capitalize.js';
@@ -32,7 +36,6 @@ import keyBy from 'lodash/keyBy.js';
 import last from 'lodash/last.js';
 import map from 'lodash/map.js';
 import mapValues from 'lodash/mapValues.js';
-import isString from 'lodash/isString.js';
 import pickBy from 'lodash/pickBy.js';
 import { CodeEditor } from '@stoplight/mosaic-code-editor';
 import * as Sampler from '@stoplight/json-schema-sampler';
@@ -620,6 +623,29 @@ const getServerUrlWithVariableValues = (server, values) => {
     return urlString;
 };
 
+const extractCodeSamples = (obj) => {
+    if (!isPlainObject$1(obj) || !isPlainObject$1(obj.extensions)) {
+        return [];
+    }
+    const codeSamples = obj.extensions['x-codeSamples'];
+    if (!Array.isArray(codeSamples)) {
+        return [];
+    }
+    return codeSamples.reduce((extracted, item) => {
+        if (isPlainObject$1(item) && isString(item['lang']) && isString(item['source'])) {
+            const lib = isString(item['lib']) ? item['lib'] : undefined;
+            const label = isString(item['label']) ? item['label'] : lib !== null && lib !== void 0 ? lib : item['lang'];
+            extracted.push({
+                lang: item['lang'],
+                lib,
+                label,
+                source: item['source'],
+            });
+        }
+        return extracted;
+    }, []);
+};
+
 const persistAtom = (key, atomInstance) => {
     if (typeof window === 'undefined' || window.localStorage === undefined) {
         return atomInstance;
@@ -825,76 +851,149 @@ const requestSampleConfigs = {
         mosaicCodeViewerLanguage: 'swift',
         httpSnippetLanguage: 'swift',
     },
-};
-const getConfigFor = (language, library) => {
-    var _a;
-    const languageConfig = requestSampleConfigs[language];
-    const libraryConfig = ((_a = languageConfig.libraries) === null || _a === void 0 ? void 0 : _a[library]) || {};
-    return Object.assign(Object.assign({}, languageConfig), libraryConfig);
 };
 
-const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', atom('Shell'));
-const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', atom('cURL'));
+const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', atom('shell'));
+const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', atom('curl'));
 const fallbackText = 'Unable to generate code example';
-const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) => {
+const RequestSamples = memo(({ request, embeddedInMd = false, customCodeSamples = [] }) => {
     const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
-    const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const [requestSample, setRequestSample] = React__default.useState(null);
-    React__default.useEffect(() => {
-        let isStale = false;
-        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
-            .then(example => {
-            if (!isStale) {
-                setRequestSample(example);
+    const allRequestSamples = useMemo(() => {
+        var _a;
+        const requestSamples = cloneDeep(requestSampleConfigs);
+        Object.entries(requestSamples).forEach(([languageKey, value]) => {
+            var _a;
+            value.displayText = languageKey;
+            Object.entries(((_a = value.libraries) !== null && _a !== void 0 ? _a : (value.libraries = {}))).forEach(([libKey, value]) => {
+                value.displayText = `${languageKey} / ${libKey}`;
+            });
+        });
+        for (const customCodeSample of customCodeSamples) {
+            const existingLanguageSampleKey = findKey(requestSamples, {
+                httpSnippetLanguage: customCodeSample.lang.toLowerCase(),
+            });
+            const existingLanguageSample = requestSamples[existingLanguageSampleKey];
+            if (!existingLanguageSample) {
+                const newLanguageSample = {
+                    displayText: customCodeSample.lang,
+                    mosaicCodeViewerLanguage: customCodeSample.lang,
+                    httpSnippetLanguage: customCodeSample.lang,
+                    libraries: {},
+                };
+                if (customCodeSample.lib) {
+                    newLanguageSample.libraries[customCodeSample.lib] = {
+                        displayText: `${customCodeSample.lang} / ${customCodeSample.lib}`,
+                        httpSnippetLibrary: customCodeSample.lib,
+                        sampleCode: customCodeSample.source,
+                    };
+                }
+                else {
+                    newLanguageSample.sampleCode = customCodeSample.source;
+                }
+                requestSamples[customCodeSample.label] = newLanguageSample;
             }
-        })
-            .catch(() => {
-            if (!isStale) {
-                setRequestSample(fallbackText);
+            else {
+                (_a = existingLanguageSample.libraries) !== null && _a !== void 0 ? _a : (existingLanguageSample.libraries = {});
+                if (customCodeSample.lib) {
+                    const existingLibrarySampleKey = findKey(existingLanguageSample.libraries, {
+                        httpSnippetLibrary: customCodeSample.lib,
+                    });
+                    const existingLibrarySample = existingLanguageSample.libraries[existingLibrarySampleKey];
+                    if (!existingLibrarySample) {
+                        const newLibrarySample = {
+                            displayText: `${existingLanguageSample} / ${customCodeSample.lib}`,
+                            httpSnippetLibrary: customCodeSample.lib,
+                            sampleCode: customCodeSample.source,
+                        };
+                        existingLanguageSample.libraries[customCodeSample.lib] = newLibrarySample;
+                    }
+                    else {
+                        existingLibrarySample.displayText = `${existingLanguageSampleKey} / ${existingLibrarySampleKey}`;
+                        existingLibrarySample.sampleCode = customCodeSample.source;
+                    }
+                }
+                else {
+                    existingLanguageSample.sampleCode = customCodeSample.source;
+                }
             }
-        });
-        return () => {
-            isStale = true;
-        };
-    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
-    const menuItems = useMemo(() => {
-        const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
-            const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
+        }
+        return requestSamples;
+    }, [customCodeSamples]);
+    const [menuItems, selectedSampleConfig] = useMemo(() => {
+        var _a, _b;
+        const items = Object.entries(allRequestSamples).map(([languageLabel, languageConfig]) => {
+            var _a;
+            const hasLibraries = Object.keys((_a = languageConfig.libraries) !== null && _a !== void 0 ? _a : {}).length > 0;
             return {
-                id: language,
-                title: language,
-                isChecked: selectedLanguage === language,
+                id: languageLabel,
+                title: languageLabel,
+                isChecked: selectedLanguage === languageConfig.httpSnippetLanguage,
+                closeOnPress: !hasLibraries,
                 onPress: hasLibraries
                     ? undefined
                     : () => {
-                        setSelectedLanguage(language);
+                        setSelectedLanguage(languageConfig.httpSnippetLanguage);
                         setSelectedLibrary('');
                     },
-                children: config.libraries
-                    ? Object.keys(config.libraries).map(library => ({
-                        id: `${language}-${library}`,
-                        title: library,
-                        isChecked: selectedLanguage === language && selectedLibrary === library,
+                children: hasLibraries
+                    ? Object.entries(languageConfig.libraries).map(([libraryLabel, libraryConfig]) => ({
+                        id: `${languageLabel}-${libraryLabel}`,
+                        title: libraryLabel,
+                        isChecked: selectedLanguage === languageConfig.httpSnippetLanguage &&
+                            selectedLibrary === libraryConfig.httpSnippetLibrary,
                         onPress: () => {
-                            setSelectedLanguage(language);
-                            setSelectedLibrary(library);
+                            setSelectedLanguage(languageConfig.httpSnippetLanguage);
+                            setSelectedLibrary(libraryConfig.httpSnippetLibrary);
                         },
                     }))
                     : undefined,
             };
         });
-        return items;
-    }, [selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+        const selectedLanguageSample = find(allRequestSamples, { httpSnippetLanguage: selectedLanguage });
+        const selectedLibrarySample = find((_a = selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.libraries) !== null && _a !== void 0 ? _a : {}, {
+            httpSnippetLibrary: selectedLibrary,
+        });
+        return [
+            items,
+            Object.assign(Object.assign(Object.assign({}, selectedLibrarySample), selectedLanguageSample), { displayText: (_b = selectedLibrarySample === null || selectedLibrarySample === void 0 ? void 0 : selectedLibrarySample.displayText) !== null && _b !== void 0 ? _b : selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.displayText }),
+        ];
+    }, [allRequestSamples, selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+    const [requestSample, setRequestSample] = useState(null);
+    useEffect(() => {
+        let isStale = false;
+        if (selectedSampleConfig) {
+            if (selectedSampleConfig.sampleCode) {
+                setRequestSample(selectedSampleConfig.sampleCode);
+            }
+            else {
+                convertRequestToSample(selectedSampleConfig.httpSnippetLanguage, selectedSampleConfig.httpSnippetLibrary, request)
+                    .then(example => {
+                    if (!isStale) {
+                        setRequestSample(example);
+                    }
+                })
+                    .catch(() => {
+                    if (!isStale) {
+                        setRequestSample(fallbackText);
+                    }
+                });
+            }
+        }
+        else {
+            setRequestSample(fallbackText);
+        }
+        return () => {
+            isStale = true;
+        };
+    }, [request, selectedSampleConfig]);
     return (React__default.createElement(Panel, { rounded: embeddedInMd ? undefined : true, isCollapsible: embeddedInMd },
         React__default.createElement(Panel.Titlebar, { rightComponent: React__default.createElement(CopyButton, { size: "sm", copyValue: requestSample || '' }) },
             React__default.createElement(Box, { ml: -2 },
                 React__default.createElement(Menu, { "aria-label": "Request Sample Language", closeOnPress: true, items: menuItems, renderTrigger: ({ isOpen }) => (React__default.createElement(Button, { size: "sm", iconRight: "chevron-down", appearance: "minimal", active: isOpen },
                         "Request Sample: ",
-                        selectedLanguage,
-                        " ",
-                        selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                        selectedSampleConfig.displayText)) }))),
+        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: selectedSampleConfig === null || selectedSampleConfig === void 0 ? void 0 : selectedSampleConfig.mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
                 ? undefined
                 :
                     {
@@ -2158,6 +2257,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
+    const customCodeSamples = extractCodeSamples(httpOperation);
     const getValues = () => Object.keys(bodyParameterValues)
         .filter(param => { var _a; return (_a = !isAllowedEmptyValues[param]) !== null && _a !== void 0 ? _a : true; })
         .reduce((previousValue, currentValue) => {
@@ -2287,11 +2387,11 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             tryItPanelContents));
     }
     else {
-        tryItPanelElem = (React.createElement(Box, { className: "TryItPanel", bg: "canvas-100", rounded: "lg" }, tryItPanelContents));
+        tryItPanelElem = (React.createElement(Box, { className: "TryItPanel", bg: "canvas-100" }, tryItPanelContents));
     }
     return (React.createElement(Box, { rounded: "lg", overflowY: "hidden" },
         tryItPanelElem,
-        requestData && embeddedInMd && React.createElement(RequestSamples, { request: requestData, embeddedInMd: true }),
+        requestData && embeddedInMd && (React.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples, embeddedInMd: true })),
         response && !('error' in response) && React.createElement(TryItResponse, { response: response }),
         response && 'error' in response && React.createElement(ResponseError, { state: response })));
 };
@@ -2335,11 +2435,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
 const TryItWithRequestSamples = (_a) => {
     var { hideTryIt } = _a, props = __rest(_a, ["hideTryIt"]);
     const [requestData, setRequestData] = React.useState();
+    const customCodeSamples = extractCodeSamples(props.httpOperation);
     return (React.createElement(VStack, { spacing: 6 },
         !hideTryIt && (React.createElement(InvertTheme, null,
             React.createElement(Box, null,
                 React.createElement(TryIt, Object.assign({}, props, { onRequestChange: setRequestData }))))),
-        requestData && React.createElement(RequestSamples, { request: requestData }),
+        requestData && React.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples }),
         React.createElement(ResponseExamples, Object.assign({}, props))));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.1.3",
+  "version": "8.2.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -29,7 +29,7 @@
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.3",
     "@stoplight/json-schema-tree": "^4.0.0",
-    "@stoplight/json-schema-viewer": "^4.15.1",
+    "@stoplight/json-schema-viewer": "4.16.1",
     "@stoplight/markdown-viewer": "^5.7.0",
     "@stoplight/mosaic": "^1.53.1",
     "@stoplight/mosaic-code-editor": "^1.53.1",