@stoplight/elements-core 8.1.4 → 8.3.1

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');
@@ -43,6 +46,7 @@ var uniq = require('lodash/uniq.js');
 var orderBy = require('lodash/orderBy.js');
 var uniqBy = require('lodash/uniqBy.js');
 var formatXml = require('xml-formatter');
+var memoize = require('lodash/memoize.js');
 var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
 var sortBy = require('lodash/sortBy.js');
@@ -83,6 +87,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 +100,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);
@@ -100,6 +107,7 @@ var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
 var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var formatXml__default = /*#__PURE__*/_interopDefaultLegacy(formatXml);
+var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
 var entries__default = /*#__PURE__*/_interopDefaultLegacy(entries);
 var keys__default = /*#__PURE__*/_interopDefaultLegacy(keys);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
@@ -218,8 +226,8 @@ const ElementsOptionsContext = React__namespace.createContext(DEFAULT_CONTEXT);
 const useOptionsCtx = () => {
     return React__namespace.useContext(ElementsOptionsContext) || DEFAULT_CONTEXT;
 };
-function ElementsOptionsProvider({ children, nodeHasChanged }) {
-    return (React__namespace.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged }) }, children));
+function ElementsOptionsProvider({ children, nodeHasChanged, renderExtensionAddon }) {
+    return (React__namespace.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged, renderExtensionAddon }) }, children));
 }
 
 function isSMDASTRoot(maybeAst) {
@@ -504,6 +512,9 @@ const HttpMethodColors = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 const HttpCodeColor = {
     0: 'red',
@@ -677,6 +688,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 +916,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 +2322,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 +2452,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,14 +2500,41 @@ 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))));
 };
 
+const getVendorExtensions = memoize__default["default"]((data) => {
+    const vendorExtensionNames = Object.keys(data).filter(item => item.startsWith('x-'));
+    const vendorExtensions = vendorExtensionNames.reduce((previousValue, currentValue, currentIndex) => {
+        return Object.assign(Object.assign({}, previousValue), { [currentValue]: data[currentValue] });
+    }, {});
+    return vendorExtensions;
+});
+const NodeVendorExtensions = React__namespace.memo(({ data }) => {
+    const { renderExtensionAddon } = useOptionsCtx();
+    if (!renderExtensionAddon) {
+        return null;
+    }
+    const originalObject = getOriginalObject(data);
+    const vendorExtensions = originalObject.extensions ? originalObject.extensions : getVendorExtensions(originalObject);
+    const vendorExtensionKeys = Object.keys(vendorExtensions);
+    if (vendorExtensionKeys.length === 0) {
+        return null;
+    }
+    return (React__namespace.createElement(React__namespace.Fragment, null, renderExtensionAddon({
+        nestingLevel: -1,
+        schemaNode: originalObject,
+        vendorExtensions,
+    })));
+});
+NodeVendorExtensions.displayName = 'NodeVendorExtensions';
+
 const TwoColumnLayout = React__default["default"].forwardRef(({ header, right, left, className }, ref) => (React__default["default"].createElement(mosaic.VStack, { ref: ref, w: "full", className: className, spacing: 8 },
     header,
     React__default["default"].createElement(mosaic.Flex, null,
@@ -2557,7 +2692,7 @@ const Body = ({ body, onChange }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     React__namespace.useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
@@ -2572,7 +2707,7 @@ const Body = ({ body, onChange }) => {
         description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { markdown: description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2596,12 +2731,12 @@ const defaultStyle = {
     cookie: types.HttpParamStyles.Form,
 };
 const Parameters = ({ parameters, parameterType }) => {
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React__namespace.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
+    return (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2741,7 +2876,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React__namespace.useEffect(() => {
@@ -2759,7 +2894,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
                     React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2835,6 +2970,7 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
         data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
+        React__namespace.createElement(NodeVendorExtensions, { data: data }),
         React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React__namespace.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
@@ -3086,7 +3222,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
@@ -3109,8 +3245,9 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         data.description && data.type === 'object' && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
+        React__namespace.createElement(NodeVendorExtensions, { data: data }),
         isCompact && modelExamples,
-        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
     return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) => {
@@ -3133,7 +3270,7 @@ const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverable
 
 const Docs = React__namespace.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -3143,7 +3280,7 @@ const Docs = React__namespace.memo((_a) => {
     if (useNodeForRefResolving) {
         elem = (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
-    return React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
+    return (React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
 const ParsedDocs = (_a) => {
     var { node, nodeUnsupported } = _a, commonProps = tslib.__rest(_a, ["node", "nodeUnsupported"]);
@@ -3249,6 +3386,9 @@ const NODE_META_COLOR = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 
 function getHtmlIdFromItemId(id) {
@@ -3602,12 +3742,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+    const { renderExtensionAddon } = useOptionsCtx();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default["default"].createElement(mosaic.Box, { py: 2 },
         title && (React__default["default"].createElement(mosaic.Flex, { alignItems: "center", p: 2 },
             React__default["default"].createElement(mosaic.Icon, { icon: NodeTypeIconDefs[types.NodeType.Model], color: NodeTypeColors[types.NodeType.Model] }),
             React__default["default"].createElement(mosaic.Box, { color: "muted", px: 2 }, title))),
-        React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
+        React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), renderExtensionAddon: renderExtensionAddon })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -3958,6 +4099,7 @@ Object.defineProperty(exports, 'DefaultSMDComponents', {
 });
 exports.DeprecatedBadge = DeprecatedBadge;
 exports.Docs = Docs;
+exports.ElementsOptionsProvider = ElementsOptionsProvider;
 exports.ExportButton = ExportButton;
 exports.HttpMethodColors = HttpMethodColors;
 exports.InlineRefResolverProvider = InlineRefResolverProvider;