@stoplight/elements-core 7.5.5 → 7.5.9

package/components/Docs/Article/index.d.ts

@@ -1,5 +1,5 @@
-import { MDAST } from '@stoplight/markdown';
+import { IMarkdownViewerProps } from '@stoplight/markdown-viewer';
 import { DocsComponentProps } from '..';
-declare type ArticleProps = DocsComponentProps<string | MDAST.Root>;
+declare type ArticleProps = DocsComponentProps<IMarkdownViewerProps['markdown']>;
 export declare const Article: import("react").FunctionComponent<ArticleProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export {};

package/components/Docs/Docs.d.ts

@@ -2,6 +2,7 @@ import { NodeType } from '@stoplight/types';
 import { Location } from 'history';
 import * as React from 'react';
 import { ParsedNode } from '../../types';
+import { ReferenceResolver } from '../../utils/ref-resolving/ReferenceResolver';
 import { ExportButtonProps } from './HttpService/ExportButton';
 interface BaseDocsProps {
     className?: string;
@@ -27,6 +28,7 @@ export interface DocsProps extends BaseDocsProps {
     nodeType: NodeType;
     nodeData: unknown;
     useNodeForRefResolving?: boolean;
+    refResolver?: ReferenceResolver;
 }
 export interface DocsComponentProps<T = unknown> extends BaseDocsProps {
     data: T;

package/components/MarkdownViewer/CustomComponents/ReactRouterLink.d.ts

@@ -1,2 +1,3 @@
-import { CustomComponentMapping } from '@stoplight/markdown-viewer';
-export declare const ReactRouterMarkdownLink: CustomComponentMapping['link'];
+export declare const ReactRouterMarkdownLink: ({ title, to, href: _href, children, }: import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+    to?: string | undefined;
+}) => JSX.Element;

package/components/MarkdownViewer/CustomComponents/ResolvedImage.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { BundledBranchNode } from '../../../types';
-export declare const createResolvedImageComponent: (branchNode: BundledBranchNode) => React.NamedExoticComponent<import("react").ImgHTMLAttributes<unknown> & import("@stoplight/markdown/ast-types/hast").ImageProperties>;
+export declare const createResolvedImageComponent: (branchNode: BundledBranchNode) => React.NamedExoticComponent<import("react").ImgHTMLAttributes<HTMLImageElement> & import("@stoplight/markdown/ast-types/hast").ImageProperties>;

package/index.esm.js

@@ -5,18 +5,15 @@ import { resolveInlineRef, isPlainObject as isPlainObject$1, safeParse, safeStri
 import isArray from 'lodash/isArray.js';
 import isObject from 'lodash/isObject.js';
 import isPlainObject from 'lodash/isPlainObject.js';
-import { parse } from '@stoplight/markdown';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
-import { parse as parse$1 } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Flex, Icon, Button, Popover, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { parse } from '@stoplight/yaml';
+import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
-import { faStream, faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
-import throttle from 'lodash/throttle.js';
-import { selectAll } from 'unist-util-select';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
+import { faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
@@ -164,13 +161,7 @@ const parserMap = {
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
-    if (typeof rawData === 'string') {
-        return {
-            type: NodeType.Article,
-            data: parse(rawData),
-        };
-    }
-    if (isSMDASTRoot(rawData)) {
+    if (typeof rawData === 'string' || isSMDASTRoot(rawData)) {
         return {
             type: NodeType.Article,
             data: rawData,
@@ -213,7 +204,7 @@ function tryParseYamlOrObject(yamlOrObject) {
         return yamlOrObject;
     if (typeof yamlOrObject === 'string') {
         try {
-            return parse$1(yamlOrObject);
+            return parse(yamlOrObject);
         }
         catch (e) { }
     }
@@ -228,94 +219,9 @@ const MarkdownViewer = (props) => {
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
-function useComponentSize(container) {
-    const [componentSize, setComponentSize] = React.useState({ width: 0, height: 0 });
-    React.useEffect(() => {
-        if (!container) {
-            return;
-        }
-        const updateComponentSize = throttle(() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
-            trailing: true,
-        });
-        updateComponentSize();
-        window.addEventListener('resize', updateComponentSize);
-        return () => {
-            updateComponentSize.cancel();
-            window.removeEventListener('resize', updateComponentSize);
-        };
-    }, [container]);
-    return componentSize;
-}
-
-function useComputeMarkdownHeadings(tree) {
-    return React.useMemo(() => computeMarkdownHeadings(tree), [tree]);
-}
-function computeMarkdownHeadings(tree) {
-    return selectAll(':root > [type=heading]', tree)
-        .map((heading) => {
-        var _a;
-        return ({
-            title: findTitle(heading),
-            id: ((_a = heading.data) === null || _a === void 0 ? void 0 : _a.id) || '',
-            depth: heading.depth - 1,
-        });
-    })
-        .filter((item) => item.depth >= 1 && item.depth <= 2);
-}
-const findTitle = (parent) => {
-    return selectAll('[type=text]', parent).map(textNode => String(textNode.value)).join(' ');
-};
-
-function useLocationHash() {
-    const isBrowser = typeof window !== 'undefined';
-    const [locationHash, setLocationHash] = React.useState(isBrowser && window.location.hash);
-    React.useEffect(() => {
-        if (!isBrowser)
-            return;
-        const hashChange = () => setLocationHash(window.location.hash);
-        window.addEventListener('hashchange', hashChange, false);
-        return () => window.removeEventListener('hashchange', hashChange);
-    }, [isBrowser]);
-    return locationHash;
-}
-
-const ArticleHeadings = ({ tree, container }) => {
-    const { width } = useComponentSize(container);
-    const showHeadings = width >= 768;
-    const headings = useComputeMarkdownHeadings(tree);
-    return React.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
-};
-const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
-    const locationHash = useLocationHash();
-    if (!headings || !headings.length)
-        return null;
-    const component = (React.createElement(Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
-        title && (React.createElement(Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React.createElement(Box, { as: Icon, icon: faStream, mr: 2 }),
-            title)),
-        headings.map((heading, i) => (React.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
-    const button = React.createElement(Button, { pos: "sticky", size: "sm", borderColor: "light", icon: faStream, style: { top: 10 } });
-    if (minimal) {
-        return (React.createElement(Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
-            React.createElement(Popover, { renderTrigger: button, placement: "bottom" },
-                React.createElement(Box, { className: className }, component))));
-    }
-    return (React.createElement(Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
-        React.createElement(Box, { borderL: true, borderColor: "light" }, component)));
-};
-const Heading = ({ item, isSelected }) => {
-    return (React.createElement(Box, { as: "a", href: `#${item.id}`, textOverflow: "truncate", display: "block", py: 2, pr: 8, fontWeight: "medium", fontSize: "sm", color: isSelected ? 'primary' : 'muted', style: { paddingLeft: `${3 + item.depth * 15}px` } }, item.title));
-};
-
 const ArticleComponent = React.memo(({ data }) => {
-    const [container, setContainer] = React.useState(null);
-    const tree = React.useMemo(() => (typeof data === 'object' ? data : parse(data)), [data]);
-    if (tree === null)
-        return null;
-    return (React.createElement(Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
-        React.createElement(Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
-            React.createElement(MarkdownViewer, { markdown: tree })),
-        React.createElement(ArticleHeadings, { tree: tree, container: container })));
+    return (React.createElement(Box, { className: "sl-elements-article" },
+        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -1015,7 +921,11 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function exampleValue(example) {
-    return 'value' in example ? String(example.value) : String(example.externalValue);
+    const value = 'value' in example ? example.value : example.externalValue;
+    return escapeQuotes(String(value));
+}
+function escapeQuotes(value) {
+    return value.replace(/"/g, '\\"');
 }
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
@@ -1316,7 +1226,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
         const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security).map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); });
+        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security)
+            .map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); })
+            .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
         const url = new URL(URI(serverUrl).segment(expandedPath).toString());
@@ -1604,9 +1516,9 @@ const bodyFormatMap = {
     text: ['raw'],
 };
 const regex = {
-    image: /image\/(.+)*(jpeg|gif|png|svg)/,
-    json: /application\/(.+)*json/,
-    xml: /(text|application)\/(.+)*(xml|html)/,
+    image: /image\/(.?)*(jpeg|gif|png|svg)/,
+    json: /application\/(.?)*json/,
+    xml: /(text|application)\/(.?)*(xml|html)/,
     text: /text\/.*/,
 };
 function getResponseType(contentType) {
@@ -2171,7 +2083,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const hasBadges = isDeprecated || isInternal;
     const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React.createElement(VStack, { spacing: 5 },
         React.createElement(HStack, { spacing: 5 },
-            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
+            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
             React.createElement(HStack, { spacing: 2 },
                 isDeprecated && React.createElement(DeprecatedBadge, null),
                 isInternal && React.createElement(InternalBadge, { isHttpService: true }))),
@@ -2295,7 +2207,7 @@ const HttpServiceComponent = React.memo(({ data, location = {}, layoutOptions, e
     const query = new URLSearchParams(search);
     return (React.createElement(Box, { mb: 10 },
         data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
-            React.createElement(Heading$1, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
+            React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
             exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React.createElement(Box, { mb: 5 },
             React.createElement(VersionBadge, { value: data.version }))),
@@ -2326,7 +2238,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(HStack, { spacing: 5 },
-            title && (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, title)),
+            title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
             React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const description = (React.createElement(VStack, { spacing: 10 },
@@ -2341,14 +2253,14 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
-    var { nodeType, nodeData, useNodeForRefResolving = false } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         return null;
     }
     const parsedDocs = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        return React.createElement(InlineRefResolverProvider, { document: parsedNode.data }, parsedDocs);
+        return (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, parsedDocs));
     }
     return parsedDocs;
 });
@@ -2383,7 +2295,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
             React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2412,7 +2324,7 @@ function useParsedValue(value) {
         let parsedValue = value;
         if (typeof value === 'string') {
             try {
-                parsedValue = parse$1(value);
+                parsedValue = parse(value);
             }
             catch (error) {
             }
@@ -2506,7 +2418,8 @@ const MarkdownComponentsProvider = ({ value, children }) => {
 };
 
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const ReactRouterMarkdownLink = ({ title, href, children }) => {
+const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
+    const href = to || _href;
     const isExternal = href !== undefined && externalRegex.test(href);
     if (isExternal) {
         return (React__default.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
@@ -2685,7 +2598,7 @@ const Version = ({ value }) => {
 const NonIdealState = ({ description, icon, title }) => {
     return (React.createElement(Flex, { flexDirection: "col", alignItems: "center", justifyContent: "center", textAlign: "center", w: "full", h: "full" },
         React.createElement(Box, { as: Icon, icon: icon || faExclamationTriangle, color: "light", fontSize: "6xl", mb: 4 }),
-        React.createElement(Heading$1, { size: 4, mb: 4 }, title),
+        React.createElement(Heading, { size: 4, mb: 4 }, title),
         React.createElement(Text, null, description)));
 };
 
@@ -2752,7 +2665,7 @@ function withRouter(WrappedComponent) {
         const { Router, routerProps } = useRouter((_c = props.router) !== null && _c !== void 0 ? _c : 'history', basePath, staticRouterPath);
         return (React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
             React.createElement(Route, { path: "/" },
-                React.createElement(MarkdownComponentsProvider, { value: { link: ReactRouterMarkdownLink } },
+                React.createElement(MarkdownComponentsProvider, { value: { a: ReactRouterMarkdownLink } },
                     React.createElement(WrappedComponent, Object.assign({}, props))))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;

package/index.js

@@ -8,17 +8,14 @@ var json = require('@stoplight/json');
 var isArray = require('lodash/isArray.js');
 var isObject = require('lodash/isObject.js');
 var isPlainObject = require('lodash/isPlainObject.js');
-var markdown = require('@stoplight/markdown');
 var types = require('@stoplight/types');
 var yaml = require('@stoplight/yaml');
 var mosaic = require('@stoplight/mosaic');
 var reactErrorBoundary = require('@stoplight/react-error-boundary');
 var markdownViewer = require('@stoplight/markdown-viewer');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var throttle = require('lodash/throttle.js');
-var unistUtilSelect = require('unist-util-select');
 var cn = require('classnames');
 var utils = require('jotai/utils');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var jotai = require('jotai');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
@@ -78,7 +75,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
 var HTTPSnippet__default = /*#__PURE__*/_interopDefaultLegacy(HTTPSnippet);
@@ -219,13 +215,7 @@ const parserMap = {
     [types.NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
-    if (typeof rawData === 'string') {
-        return {
-            type: types.NodeType.Article,
-            data: markdown.parse(rawData),
-        };
-    }
-    if (isSMDASTRoot(rawData)) {
+    if (typeof rawData === 'string' || isSMDASTRoot(rawData)) {
         return {
             type: types.NodeType.Article,
             data: rawData,
@@ -283,94 +273,9 @@ const MarkdownViewer = (props) => {
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
-function useComponentSize(container) {
-    const [componentSize, setComponentSize] = React__namespace.useState({ width: 0, height: 0 });
-    React__namespace.useEffect(() => {
-        if (!container) {
-            return;
-        }
-        const updateComponentSize = throttle__default["default"](() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
-            trailing: true,
-        });
-        updateComponentSize();
-        window.addEventListener('resize', updateComponentSize);
-        return () => {
-            updateComponentSize.cancel();
-            window.removeEventListener('resize', updateComponentSize);
-        };
-    }, [container]);
-    return componentSize;
-}
-
-function useComputeMarkdownHeadings(tree) {
-    return React__namespace.useMemo(() => computeMarkdownHeadings(tree), [tree]);
-}
-function computeMarkdownHeadings(tree) {
-    return unistUtilSelect.selectAll(':root > [type=heading]', tree)
-        .map((heading) => {
-        var _a;
-        return ({
-            title: findTitle(heading),
-            id: ((_a = heading.data) === null || _a === void 0 ? void 0 : _a.id) || '',
-            depth: heading.depth - 1,
-        });
-    })
-        .filter((item) => item.depth >= 1 && item.depth <= 2);
-}
-const findTitle = (parent) => {
-    return unistUtilSelect.selectAll('[type=text]', parent).map(textNode => String(textNode.value)).join(' ');
-};
-
-function useLocationHash() {
-    const isBrowser = typeof window !== 'undefined';
-    const [locationHash, setLocationHash] = React__namespace.useState(isBrowser && window.location.hash);
-    React__namespace.useEffect(() => {
-        if (!isBrowser)
-            return;
-        const hashChange = () => setLocationHash(window.location.hash);
-        window.addEventListener('hashchange', hashChange, false);
-        return () => window.removeEventListener('hashchange', hashChange);
-    }, [isBrowser]);
-    return locationHash;
-}
-
-const ArticleHeadings = ({ tree, container }) => {
-    const { width } = useComponentSize(container);
-    const showHeadings = width >= 768;
-    const headings = useComputeMarkdownHeadings(tree);
-    return React__namespace.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
-};
-const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
-    const locationHash = useLocationHash();
-    if (!headings || !headings.length)
-        return null;
-    const component = (React__namespace.createElement(mosaic.Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
-        title && (React__namespace.createElement(mosaic.Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faStream, mr: 2 }),
-            title)),
-        headings.map((heading, i) => (React__namespace.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
-    const button = React__namespace.createElement(mosaic.Button, { pos: "sticky", size: "sm", borderColor: "light", icon: freeSolidSvgIcons.faStream, style: { top: 10 } });
-    if (minimal) {
-        return (React__namespace.createElement(mosaic.Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
-            React__namespace.createElement(mosaic.Popover, { renderTrigger: button, placement: "bottom" },
-                React__namespace.createElement(mosaic.Box, { className: className }, component))));
-    }
-    return (React__namespace.createElement(mosaic.Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
-        React__namespace.createElement(mosaic.Box, { borderL: true, borderColor: "light" }, component)));
-};
-const Heading = ({ item, isSelected }) => {
-    return (React__namespace.createElement(mosaic.Box, { as: "a", href: `#${item.id}`, textOverflow: "truncate", display: "block", py: 2, pr: 8, fontWeight: "medium", fontSize: "sm", color: isSelected ? 'primary' : 'muted', style: { paddingLeft: `${3 + item.depth * 15}px` } }, item.title));
-};
-
 const ArticleComponent = React__namespace.memo(({ data }) => {
-    const [container, setContainer] = React__namespace.useState(null);
-    const tree = React__namespace.useMemo(() => (typeof data === 'object' ? data : markdown.parse(data)), [data]);
-    if (tree === null)
-        return null;
-    return (React__namespace.createElement(mosaic.Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
-        React__namespace.createElement(mosaic.Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
-            React__namespace.createElement(MarkdownViewer, { markdown: tree })),
-        React__namespace.createElement(ArticleHeadings, { tree: tree, container: container })));
+    return (React__namespace.createElement(mosaic.Box, { className: "sl-elements-article" },
+        React__namespace.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
 });
 const Article = reactErrorBoundary.withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -1070,7 +975,11 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function exampleValue(example) {
-    return 'value' in example ? String(example.value) : String(example.externalValue);
+    const value = 'value' in example ? example.value : example.externalValue;
+    return escapeQuotes(String(value));
+}
+function escapeQuotes(value) {
+    return value.replace(/"/g, '\\"');
 }
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
@@ -1371,7 +1280,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
         const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security).map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); });
+        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security)
+            .map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); })
+            .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
         const url = new URL(URI__default["default"](serverUrl).segment(expandedPath).toString());
@@ -1659,9 +1570,9 @@ const bodyFormatMap = {
     text: ['raw'],
 };
 const regex = {
-    image: /image\/(.+)*(jpeg|gif|png|svg)/,
-    json: /application\/(.+)*json/,
-    xml: /(text|application)\/(.+)*(xml|html)/,
+    image: /image\/(.?)*(jpeg|gif|png|svg)/,
+    json: /application\/(.?)*json/,
+    xml: /(text|application)\/(.?)*(xml|html)/,
     text: /text\/.*/,
 };
 function getResponseType(contentType) {
@@ -2396,14 +2307,14 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React__namespace.memo((_a) => {
-    var { nodeType, nodeData, useNodeForRefResolving = false } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         return null;
     }
     const parsedDocs = React__namespace.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        return React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data }, parsedDocs);
+        return (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, parsedDocs));
     }
     return parsedDocs;
 });
@@ -2438,7 +2349,7 @@ const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxConte
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
             React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2561,7 +2472,8 @@ const MarkdownComponentsProvider = ({ value, children }) => {
 };
 
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const ReactRouterMarkdownLink = ({ title, href, children }) => {
+const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
+    const href = to || _href;
     const isExternal = href !== undefined && externalRegex.test(href);
     if (isExternal) {
         return (React__default["default"].createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
@@ -2807,7 +2719,7 @@ function withRouter(WrappedComponent) {
         const { Router, routerProps } = useRouter((_c = props.router) !== null && _c !== void 0 ? _c : 'history', basePath, staticRouterPath);
         return (React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
             React__namespace.createElement(reactRouterDom.Route, { path: "/" },
-                React__namespace.createElement(MarkdownComponentsProvider, { value: { link: ReactRouterMarkdownLink } },
+                React__namespace.createElement(MarkdownComponentsProvider, { value: { a: ReactRouterMarkdownLink } },
                     React__namespace.createElement(WrappedComponent, Object.assign({}, props))))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;

package/index.mjs

@@ -5,18 +5,15 @@ import { resolveInlineRef, isPlainObject as isPlainObject$1, safeParse, safeStri
 import isArray from 'lodash/isArray.js';
 import isObject from 'lodash/isObject.js';
 import isPlainObject from 'lodash/isPlainObject.js';
-import { parse } from '@stoplight/markdown';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
-import { parse as parse$1 } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Flex, Icon, Button, Popover, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { parse } from '@stoplight/yaml';
+import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
-import { faStream, faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
-import throttle from 'lodash/throttle.js';
-import { selectAll } from 'unist-util-select';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
+import { faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
@@ -164,13 +161,7 @@ const parserMap = {
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
-    if (typeof rawData === 'string') {
-        return {
-            type: NodeType.Article,
-            data: parse(rawData),
-        };
-    }
-    if (isSMDASTRoot(rawData)) {
+    if (typeof rawData === 'string' || isSMDASTRoot(rawData)) {
         return {
             type: NodeType.Article,
             data: rawData,
@@ -213,7 +204,7 @@ function tryParseYamlOrObject(yamlOrObject) {
         return yamlOrObject;
     if (typeof yamlOrObject === 'string') {
         try {
-            return parse$1(yamlOrObject);
+            return parse(yamlOrObject);
         }
         catch (e) { }
     }
@@ -228,94 +219,9 @@ const MarkdownViewer = (props) => {
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
-function useComponentSize(container) {
-    const [componentSize, setComponentSize] = React.useState({ width: 0, height: 0 });
-    React.useEffect(() => {
-        if (!container) {
-            return;
-        }
-        const updateComponentSize = throttle(() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
-            trailing: true,
-        });
-        updateComponentSize();
-        window.addEventListener('resize', updateComponentSize);
-        return () => {
-            updateComponentSize.cancel();
-            window.removeEventListener('resize', updateComponentSize);
-        };
-    }, [container]);
-    return componentSize;
-}
-
-function useComputeMarkdownHeadings(tree) {
-    return React.useMemo(() => computeMarkdownHeadings(tree), [tree]);
-}
-function computeMarkdownHeadings(tree) {
-    return selectAll(':root > [type=heading]', tree)
-        .map((heading) => {
-        var _a;
-        return ({
-            title: findTitle(heading),
-            id: ((_a = heading.data) === null || _a === void 0 ? void 0 : _a.id) || '',
-            depth: heading.depth - 1,
-        });
-    })
-        .filter((item) => item.depth >= 1 && item.depth <= 2);
-}
-const findTitle = (parent) => {
-    return selectAll('[type=text]', parent).map(textNode => String(textNode.value)).join(' ');
-};
-
-function useLocationHash() {
-    const isBrowser = typeof window !== 'undefined';
-    const [locationHash, setLocationHash] = React.useState(isBrowser && window.location.hash);
-    React.useEffect(() => {
-        if (!isBrowser)
-            return;
-        const hashChange = () => setLocationHash(window.location.hash);
-        window.addEventListener('hashchange', hashChange, false);
-        return () => window.removeEventListener('hashchange', hashChange);
-    }, [isBrowser]);
-    return locationHash;
-}
-
-const ArticleHeadings = ({ tree, container }) => {
-    const { width } = useComponentSize(container);
-    const showHeadings = width >= 768;
-    const headings = useComputeMarkdownHeadings(tree);
-    return React.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
-};
-const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
-    const locationHash = useLocationHash();
-    if (!headings || !headings.length)
-        return null;
-    const component = (React.createElement(Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
-        title && (React.createElement(Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React.createElement(Box, { as: Icon, icon: faStream, mr: 2 }),
-            title)),
-        headings.map((heading, i) => (React.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
-    const button = React.createElement(Button, { pos: "sticky", size: "sm", borderColor: "light", icon: faStream, style: { top: 10 } });
-    if (minimal) {
-        return (React.createElement(Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
-            React.createElement(Popover, { renderTrigger: button, placement: "bottom" },
-                React.createElement(Box, { className: className }, component))));
-    }
-    return (React.createElement(Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
-        React.createElement(Box, { borderL: true, borderColor: "light" }, component)));
-};
-const Heading = ({ item, isSelected }) => {
-    return (React.createElement(Box, { as: "a", href: `#${item.id}`, textOverflow: "truncate", display: "block", py: 2, pr: 8, fontWeight: "medium", fontSize: "sm", color: isSelected ? 'primary' : 'muted', style: { paddingLeft: `${3 + item.depth * 15}px` } }, item.title));
-};
-
 const ArticleComponent = React.memo(({ data }) => {
-    const [container, setContainer] = React.useState(null);
-    const tree = React.useMemo(() => (typeof data === 'object' ? data : parse(data)), [data]);
-    if (tree === null)
-        return null;
-    return (React.createElement(Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
-        React.createElement(Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
-            React.createElement(MarkdownViewer, { markdown: tree })),
-        React.createElement(ArticleHeadings, { tree: tree, container: container })));
+    return (React.createElement(Box, { className: "sl-elements-article" },
+        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -1015,7 +921,11 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function exampleValue(example) {
-    return 'value' in example ? String(example.value) : String(example.externalValue);
+    const value = 'value' in example ? example.value : example.externalValue;
+    return escapeQuotes(String(value));
+}
+function escapeQuotes(value) {
+    return value.replace(/"/g, '\\"');
 }
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
@@ -1316,7 +1226,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
         const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security).map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); });
+        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security)
+            .map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); })
+            .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
         const url = new URL(URI(serverUrl).segment(expandedPath).toString());
@@ -1604,9 +1516,9 @@ const bodyFormatMap = {
     text: ['raw'],
 };
 const regex = {
-    image: /image\/(.+)*(jpeg|gif|png|svg)/,
-    json: /application\/(.+)*json/,
-    xml: /(text|application)\/(.+)*(xml|html)/,
+    image: /image\/(.?)*(jpeg|gif|png|svg)/,
+    json: /application\/(.?)*json/,
+    xml: /(text|application)\/(.?)*(xml|html)/,
     text: /text\/.*/,
 };
 function getResponseType(contentType) {
@@ -2171,7 +2083,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const hasBadges = isDeprecated || isInternal;
     const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React.createElement(VStack, { spacing: 5 },
         React.createElement(HStack, { spacing: 5 },
-            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
+            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
             React.createElement(HStack, { spacing: 2 },
                 isDeprecated && React.createElement(DeprecatedBadge, null),
                 isInternal && React.createElement(InternalBadge, { isHttpService: true }))),
@@ -2295,7 +2207,7 @@ const HttpServiceComponent = React.memo(({ data, location = {}, layoutOptions, e
     const query = new URLSearchParams(search);
     return (React.createElement(Box, { mb: 10 },
         data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
-            React.createElement(Heading$1, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
+            React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
             exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React.createElement(Box, { mb: 5 },
             React.createElement(VersionBadge, { value: data.version }))),
@@ -2326,7 +2238,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(HStack, { spacing: 5 },
-            title && (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, title)),
+            title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
             React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const description = (React.createElement(VStack, { spacing: 10 },
@@ -2341,14 +2253,14 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
-    var { nodeType, nodeData, useNodeForRefResolving = false } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         return null;
     }
     const parsedDocs = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        return React.createElement(InlineRefResolverProvider, { document: parsedNode.data }, parsedDocs);
+        return (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, parsedDocs));
     }
     return parsedDocs;
 });
@@ -2383,7 +2295,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
             React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2412,7 +2324,7 @@ function useParsedValue(value) {
         let parsedValue = value;
         if (typeof value === 'string') {
             try {
-                parsedValue = parse$1(value);
+                parsedValue = parse(value);
             }
             catch (error) {
             }
@@ -2506,7 +2418,8 @@ const MarkdownComponentsProvider = ({ value, children }) => {
 };
 
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const ReactRouterMarkdownLink = ({ title, href, children }) => {
+const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
+    const href = to || _href;
     const isExternal = href !== undefined && externalRegex.test(href);
     if (isExternal) {
         return (React__default.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
@@ -2685,7 +2598,7 @@ const Version = ({ value }) => {
 const NonIdealState = ({ description, icon, title }) => {
     return (React.createElement(Flex, { flexDirection: "col", alignItems: "center", justifyContent: "center", textAlign: "center", w: "full", h: "full" },
         React.createElement(Box, { as: Icon, icon: icon || faExclamationTriangle, color: "light", fontSize: "6xl", mb: 4 }),
-        React.createElement(Heading$1, { size: 4, mb: 4 }, title),
+        React.createElement(Heading, { size: 4, mb: 4 }, title),
         React.createElement(Text, null, description)));
 };
 
@@ -2752,7 +2665,7 @@ function withRouter(WrappedComponent) {
         const { Router, routerProps } = useRouter((_c = props.router) !== null && _c !== void 0 ? _c : 'history', basePath, staticRouterPath);
         return (React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
             React.createElement(Route, { path: "/" },
-                React.createElement(MarkdownComponentsProvider, { value: { link: ReactRouterMarkdownLink } },
+                React.createElement(MarkdownComponentsProvider, { value: { a: ReactRouterMarkdownLink } },
                     React.createElement(WrappedComponent, Object.assign({}, props))))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.5.5",
+  "version": "7.5.9",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -28,9 +28,8 @@
     "@stoplight/json": "^3.10.0",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.2",
-    "@stoplight/json-schema-viewer": "^4.4.2",
-    "@stoplight/markdown": "^3.1.1",
-    "@stoplight/markdown-viewer": "^5.3.2",
+    "@stoplight/json-schema-viewer": "^4.5.0",
+    "@stoplight/markdown-viewer": "^5.4.1",
     "@stoplight/mosaic": "^1.15.2",
     "@stoplight/mosaic-code-editor": "^1.15.2",
     "@stoplight/mosaic-code-viewer": "^1.15.2",
@@ -49,7 +48,6 @@
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.1.0",
     "tslib": "^2.1.0",
-    "unist-util-select": "^3.0.1",
     "urijs": "^1.19.6",
     "util": "^0.12.4",
     "xml-formatter": "^2.4.0"

package/types.d.ts

@@ -1,10 +1,10 @@
-import { MDAST } from '@stoplight/markdown';
+import type { IMarkdownViewerProps } from '@stoplight/markdown-viewer';
 import { IHttpOperation, IHttpService, NodeType } from '@stoplight/types';
 import { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema';
 export declare type JSONSchema = JSONSchema4 | JSONSchema6 | JSONSchema7;
 export declare type ParsedNode = {
     type: NodeType.Article;
-    data: string | MDAST.Root;
+    data: IMarkdownViewerProps['markdown'];
 } | {
     type: NodeType.HttpOperation;
     data: IHttpOperation;
@@ -105,15 +105,3 @@ export declare type ParamField = {
     description: string;
     example: string;
 };
-export interface IArticleHeading {
-    id: string;
-    title: string;
-    depth: number;
-}
-export interface IArticleHeadings {
-    headings: IArticleHeading[];
-    title?: string;
-    className?: string;
-    minimal?: boolean;
-    maxWidth?: number;
-}

package/utils/guards.d.ts

@@ -1,7 +1,7 @@
-import { MDAST } from '@stoplight/markdown';
+import type { IMarkdownViewerProps } from '@stoplight/markdown-viewer';
 import { IHttpOperation, IHttpService } from '@stoplight/types';
 import { JSONSchema7 } from 'json-schema';
-export declare function isSMDASTRoot(maybeAst: unknown): maybeAst is MDAST.Root;
+export declare function isSMDASTRoot(maybeAst: unknown): maybeAst is IMarkdownViewerProps['markdown'];
 export declare function isJSONSchema(maybeSchema: unknown): maybeSchema is JSONSchema7;
 export declare function isHttpService(maybeHttpService: unknown): maybeHttpService is IHttpService;
 export declare function isHttpOperation(maybeHttpOperation: unknown): maybeHttpOperation is IHttpOperation;

package/components/Docs/Article/Headings.d.ts

@@ -1,5 +0,0 @@
-import { MDAST } from '@stoplight/markdown';
-export declare const ArticleHeadings: ({ tree, container }: {
-    tree: MDAST.Root;
-    container: HTMLDivElement | null;
-}) => JSX.Element;

package/hooks/useComponentSize.d.ts

@@ -1,4 +0,0 @@
-export declare function useComponentSize(container: HTMLDivElement | null): {
-    readonly width: number;
-    readonly height: number;
-};

package/hooks/useComputeMarkdownHeadings.d.ts

@@ -1,4 +0,0 @@
-import { MDAST } from '@stoplight/markdown';
-import { IArticleHeading } from '../types';
-export declare function useComputeMarkdownHeadings(tree: MDAST.Root): IArticleHeading[];
-export declare function computeMarkdownHeadings(tree: MDAST.Root): IArticleHeading[];

package/hooks/useLocationHash.d.ts

@@ -1 +0,0 @@
-export declare function useLocationHash(): string | false;