@redocly/theme 0.58.0-next.10 → 0.58.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -48,10 +48,10 @@ const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntit
48
48
  const MAX_INITIAL_ITEMS = 4;
49
49
  function renderMetadataValue(value) {
50
50
  if ((0, utils_1.isPlainObject)(value)) {
51
- return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, hideHeader: true });
51
+ return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, controls: false });
52
52
  }
53
53
  if (Array.isArray(value)) {
54
- return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, hideHeader: true })) : (react_1.default.createElement("span", null, String(item))))))));
54
+ return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, controls: false })) : (react_1.default.createElement("span", null, String(item))))))));
55
55
  }
56
56
  return react_1.default.createElement("span", null, String(value));
57
57
  }
@@ -49,7 +49,7 @@ function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider
49
49
  react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },
50
50
  react_1.default.createElement(RedocSchema, { schema: parsedSchema })))),
51
51
  !isGraphql && (react_1.default.createElement(SchemaSampleWrapper, null,
52
- react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3, hideHeader: false }))))));
52
+ react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3 }))))));
53
53
  }
54
54
  const MetadataWrapper = styled_components_1.default.div `
55
55
  display: flex;
@@ -38,7 +38,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
38
38
  tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
39
39
  react_1.default.createElement(ControlsWrapper, null,
40
40
  dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
41
- report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
41
+ report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
42
42
  react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
43
43
  expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
44
44
  react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
@@ -3,11 +3,11 @@ import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBloc
3
3
  export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
4
4
  export type JsonProps = {
5
5
  title?: CodeBlockControlsProps['title'];
6
+ controls?: CodeBlockControlsProps['controls'];
6
7
  data: any;
7
8
  className?: string;
8
9
  expandLevel: number;
9
10
  startLineNumber?: number;
10
- hideHeader?: boolean;
11
11
  onCopyClick?: () => void;
12
12
  onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
13
13
  };
@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
31
31
  const styled_components_1 = __importDefault(require("styled-components"));
32
32
  const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
33
33
  const helpers_1 = require("./helpers");
34
- function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, hideHeader, }) {
34
+ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
35
35
  const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
36
36
  const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
37
37
  const expandAll = () => {
@@ -49,18 +49,17 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
49
49
  });
50
50
  };
51
51
  const source = JSON.stringify(data, null, 2);
52
+ const hasHeader = title || controls;
52
53
  return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
53
- react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hideHeader
54
- ? undefined
55
- : {
54
+ react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hasHeader
55
+ ? {
56
56
  title,
57
57
  className: 'code-block-header',
58
- controls: {
59
- copy: { data, onClick: onCopyClick, handleOutside: true },
60
- expand: showFoldingButtons ? { onClick: expandAll } : undefined,
61
- collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
62
- },
63
- }, source: source },
58
+ controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: showFoldingButtons
59
+ ? Object.assign(Object.assign({}, controls.expand), { onClick: expandAll }) : undefined, collapse: showFoldingButtons
60
+ ? Object.assign(Object.assign({}, controls.collapse), { onClick: collapseAll }) : undefined }),
61
+ }
62
+ : undefined, source: source },
64
63
  react_1.default.createElement(FoldingWrap, null,
65
64
  react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
66
65
  }
@@ -1,6 +1,9 @@
1
1
  import type { JSX } from 'react';
2
+ import { PageActionType } from '../../core/hooks';
2
3
  type PageActionProps = {
3
- pageSlug: string;
4
+ pageSlug?: string;
5
+ mcpUrl?: string;
6
+ actions?: PageActionType[];
4
7
  };
5
8
  export declare function PageActions(props: PageActionProps): JSX.Element | null;
6
9
  export {};
@@ -49,8 +49,8 @@ const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/Checkmark
49
49
  const hooks_1 = require("../../core/hooks");
50
50
  const ACTION_DONE_DISPLAY_DURATION = 1000;
51
51
  function PageActions(props) {
52
- const { pageSlug } = props;
53
- const actions = (0, hooks_1.usePageActions)(pageSlug || '/');
52
+ const { pageSlug, mcpUrl } = props;
53
+ const actions = (0, hooks_1.usePageActions)(pageSlug || '/', mcpUrl, props.actions);
54
54
  const [actionState, setActionState] = (0, react_1.useState)('idle');
55
55
  if (!actions.length) {
56
56
  return null;
@@ -1,2 +1,3 @@
1
1
  import type { PageAction } from '../types';
2
- export declare function usePageActions(pageSlug: string): PageAction[];
2
+ export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
3
+ export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];
@@ -19,9 +19,11 @@ const use_theme_hooks_1 = require("./use-theme-hooks");
19
19
  const use_theme_config_1 = require("./use-theme-config");
20
20
  const clipboard_service_1 = require("../utils/clipboard-service");
21
21
  const dom_1 = require("../utils/dom");
22
+ const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
22
23
  const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'];
23
- function usePageActions(pageSlug) {
24
- var _a;
24
+ const CURSOR_URL = 'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
25
+ function usePageActions(pageSlug, mcpUrl, actions) {
26
+ var _a, _b, _c;
25
27
  const { useTranslate, usePageData, usePageProps, usePageSharedData } = (0, use_theme_hooks_1.useThemeHooks)();
26
28
  const { translate } = useTranslate();
27
29
  const themeConfig = (0, use_theme_config_1.useThemeConfig)();
@@ -29,7 +31,7 @@ function usePageActions(pageSlug) {
29
31
  const openApiSharedData = usePageSharedData('openAPIDocsStore');
30
32
  const shouldHideAllActions = shouldHidePageActions(pageProps, themeConfig, (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch);
31
33
  const { isPublic } = usePageData() || {};
32
- const actions = (0, react_1.useMemo)(() => {
34
+ const result = (0, react_1.useMemo)(() => {
33
35
  var _a, _b;
34
36
  if (shouldHideAllActions) {
35
37
  return [];
@@ -43,9 +45,41 @@ function usePageActions(pageSlug) {
43
45
  url.searchParams.set('q', externalAiPrompt);
44
46
  return url.toString();
45
47
  }
46
- return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || DEFAULT_ENABLED_ACTIONS)
48
+ return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
47
49
  .map((action) => {
50
+ function generateMCPConfig(isCursor) {
51
+ const jsonConfig = {
52
+ 'mcp-server': {
53
+ url: mcpUrl,
54
+ description: 'MCP Server',
55
+ },
56
+ };
57
+ if (isCursor) {
58
+ const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace('$BASE64_ENCODED_CONFIG', btoa(JSON.stringify(jsonConfig['mcp-server'])));
59
+ return url;
60
+ }
61
+ return JSON.stringify(jsonConfig, null, 2);
62
+ }
48
63
  switch (action) {
64
+ case 'mcp-cursor':
65
+ if (!mcpUrl) {
66
+ return null;
67
+ }
68
+ return {
69
+ buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
70
+ title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
71
+ description: translate('page.actions.cursorMcpDescription', 'Install MCP server on Cursor'),
72
+ iconComponent: CursorIcon_1.CursorIcon,
73
+ onClick: () => {
74
+ try {
75
+ const url = generateMCPConfig(true);
76
+ window.open(url, '_blank');
77
+ }
78
+ catch (error) {
79
+ console.error(error);
80
+ }
81
+ },
82
+ };
49
83
  case 'copy':
50
84
  return {
51
85
  buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -99,8 +133,16 @@ function usePageActions(pageSlug) {
99
133
  }
100
134
  })
101
135
  .filter((action) => action !== null);
102
- }, [themeConfig, translate, pageSlug, isPublic, shouldHideAllActions]);
103
- return actions;
136
+ }, [
137
+ shouldHideAllActions,
138
+ pageSlug,
139
+ (_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items,
140
+ actions,
141
+ mcpUrl,
142
+ translate,
143
+ isPublic,
144
+ ]);
145
+ return result;
104
146
  }
105
147
  function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
106
148
  var _a, _b, _c, _d, _e, _f;
@@ -4,6 +4,7 @@ export type { TFunction, TOptions } from '../types/l10n';
4
4
  export type { SelectOption, SelectProps } from '../types/select';
5
5
  export { IS_BROWSER } from '../utils/dom';
6
6
  export { addLeadingSlash, removeLeadingSlash, getPathPrefix, combineUrls, addTrailingSlash, withPathPrefix, } from '../utils/urls';
7
+ export { capitalize } from '../utils/string';
7
8
  export { typedMemo } from '../hoc/typedMemo';
8
9
  export { useMount } from '../hooks/use-mount';
9
10
  export { GlobalStyle } from '../styles/global';
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
3
+ exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
4
4
  var dom_1 = require("../utils/dom");
5
5
  Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
6
6
  var urls_1 = require("../utils/urls");
@@ -10,6 +10,8 @@ Object.defineProperty(exports, "getPathPrefix", { enumerable: true, get: functio
10
10
  Object.defineProperty(exports, "combineUrls", { enumerable: true, get: function () { return urls_1.combineUrls; } });
11
11
  Object.defineProperty(exports, "addTrailingSlash", { enumerable: true, get: function () { return urls_1.addTrailingSlash; } });
12
12
  Object.defineProperty(exports, "withPathPrefix", { enumerable: true, get: function () { return urls_1.withPathPrefix; } });
13
+ var string_1 = require("../utils/string");
14
+ Object.defineProperty(exports, "capitalize", { enumerable: true, get: function () { return string_1.capitalize; } });
13
15
  var typedMemo_1 = require("../hoc/typedMemo");
14
16
  Object.defineProperty(exports, "typedMemo", { enumerable: true, get: function () { return typedMemo_1.typedMemo; } });
15
17
  var use_mount_1 = require("../hooks/use-mount");
@@ -1,5 +1,5 @@
1
1
  import type { TOptions } from 'i18next';
2
- export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
2
+ export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
3
3
  export type Locale = {
4
4
  code: string;
5
5
  name: string;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { IconProps } from '../../icons/types';
3
+ export declare const CursorIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
4
+ 'data-component-name': string;
5
+ } & {
6
+ color?: string;
7
+ size?: string;
8
+ className?: string;
9
+ } & React.SVGProps<SVGSVGElement>, "data-component-name">;
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CursorIcon = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const styled_components_1 = __importDefault(require("styled-components"));
9
+ const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
10
+ react_1.default.createElement("path", { d: "M7.99956 15V8.0001L2 11.4999L7.99956 15Z", fill: "#939393" }),
11
+ react_1.default.createElement("path", { d: "M14 4.49979L7.99956 15V8.0001L14 4.49979Z", fill: "#E3E3E3" }),
12
+ react_1.default.createElement("path", { d: "M2 4.49979H14L7.99956 8.0001L2 4.49979Z", fill: "white" }),
13
+ react_1.default.createElement("path", { d: "M8.00025 1V4.49995L14 4.49979L8.00025 1Z", fill: "#444444" }),
14
+ react_1.default.createElement("path", { d: "M2 4.49979L8.00025 4.49995V1L2 4.49979ZM13.9999 11.4998L10.9999 9.74987L7.99956 15L13.9999 11.4998Z", fill: "#939393" }),
15
+ react_1.default.createElement("path", { d: "M14 4.49979L10.9999 9.74987L13.9999 11.4998L14 4.49979ZM7.99956 8.0001L2 11.4999V4.49979L7.99956 8.0001Z", fill: "#444444" })));
16
+ exports.CursorIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
17
+ 'data-component-name': 'icons/CursorIcon/CursorIcon',
18
+ })) `
19
+ height: ${({ size }) => size || '16px'};
20
+ width: ${({ size }) => size || '16px'};
21
+ `;
22
+ //# sourceMappingURL=CursorIcon.js.map
@@ -63,6 +63,8 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
63
63
  const { label } = childrenArray[index].props;
64
64
  const tabId = getTabId(label, index);
65
65
  return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
66
+ var _a, _b;
67
+ (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
66
68
  onTabClick(index);
67
69
  }, disabled: childrenArray[index].props.disable }, label));
68
70
  })))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.58.0-next.10",
3
+ "version": "0.58.0-next.11",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -16,7 +16,7 @@ export type CatalogEntityMetadataProps = {
16
16
 
17
17
  function renderMetadataValue(value: any): React.JSX.Element {
18
18
  if (isPlainObject(value)) {
19
- return <JsonViewerWrapper data={value} expandLevel={3} hideHeader={true} />;
19
+ return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;
20
20
  }
21
21
 
22
22
  if (Array.isArray(value)) {
@@ -25,7 +25,7 @@ function renderMetadataValue(value: any): React.JSX.Element {
25
25
  {value.map((item, index) => (
26
26
  <div key={index}>
27
27
  {isPlainObject(item) ? (
28
- <JsonViewerWrapper data={item} expandLevel={3} hideHeader={true} />
28
+ <JsonViewerWrapper data={item} expandLevel={3} controls={false} />
29
29
  ) : (
30
30
  <span>{String(item)}</span>
31
31
  )}
@@ -57,11 +57,7 @@ export function CatalogEntitySchema({
57
57
 
58
58
  {!isGraphql && (
59
59
  <SchemaSampleWrapper>
60
- <JsonViewer
61
- data={Sampler.sample({ ...parsedSchema })}
62
- expandLevel={3}
63
- hideHeader={false}
64
- />
60
+ <JsonViewer data={Sampler.sample({ ...parsedSchema })} expandLevel={3} />
65
61
  </SchemaSampleWrapper>
66
62
  )}
67
63
  </SplitViewWrapper>
@@ -84,7 +84,7 @@ export function CodeBlockControls({
84
84
  {tabs && <CodeBlockTabs tabs={tabs} />}
85
85
  <ControlsWrapper>
86
86
  {dropdown && <CodeBlockDropdown {...dropdown} />}
87
- {report && !report?.props?.hide ? (
87
+ {report && !report.hidden && !report?.props?.hide ? (
88
88
  <TooltipWrapper
89
89
  tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
90
90
  placement="top"
@@ -12,11 +12,11 @@ export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-
12
12
 
13
13
  export type JsonProps = {
14
14
  title?: CodeBlockControlsProps['title'];
15
+ controls?: CodeBlockControlsProps['controls'];
15
16
  data: any;
16
17
  className?: string;
17
18
  expandLevel: number;
18
19
  startLineNumber?: number;
19
- hideHeader?: boolean;
20
20
  onCopyClick?: () => void;
21
21
  onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
22
22
  };
@@ -28,7 +28,7 @@ function JsonComponent({
28
28
  onCopyClick,
29
29
  onPanelToggle,
30
30
  title,
31
- hideHeader,
31
+ controls = {},
32
32
  }: JsonProps): JSX.Element {
33
33
  const showFoldingButtons =
34
34
  data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
@@ -53,6 +53,8 @@ function JsonComponent({
53
53
 
54
54
  const source = JSON.stringify(data, null, 2);
55
55
 
56
+ const hasHeader = title || controls;
57
+
56
58
  return (
57
59
  <JsonViewerWrap
58
60
  data-testid="json-viewer"
@@ -61,17 +63,22 @@ function JsonComponent({
61
63
  >
62
64
  <CodeBlock
63
65
  header={
64
- hideHeader
65
- ? undefined
66
- : {
66
+ hasHeader
67
+ ? {
67
68
  title,
68
69
  className: 'code-block-header',
69
- controls: {
70
- copy: { data, onClick: onCopyClick, handleOutside: true },
71
- expand: showFoldingButtons ? { onClick: expandAll } : undefined,
72
- collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
70
+ controls: controls && {
71
+ ...controls,
72
+ copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
73
+ expand: showFoldingButtons
74
+ ? { ...controls.expand, onClick: expandAll }
75
+ : undefined,
76
+ collapse: showFoldingButtons
77
+ ? { ...controls.collapse, onClick: collapseAll }
78
+ : undefined,
73
79
  },
74
80
  }
81
+ : undefined
75
82
  }
76
83
  source={source}
77
84
  >
@@ -13,20 +13,22 @@ import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
13
13
  import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
14
14
  import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
15
15
  import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
16
- import { usePageActions } from '@redocly/theme/core/hooks';
16
+ import { PageActionType, usePageActions } from '@redocly/theme/core/hooks';
17
17
 
18
18
  type ActionState = 'idle' | 'processing' | 'done';
19
19
 
20
20
  type PageActionProps = {
21
- pageSlug: string;
21
+ pageSlug?: string;
22
+ mcpUrl?: string;
23
+ actions?: PageActionType[];
22
24
  };
23
25
 
24
26
  const ACTION_DONE_DISPLAY_DURATION = 1000;
25
27
 
26
28
  export function PageActions(props: PageActionProps): JSX.Element | null {
27
- const { pageSlug } = props;
29
+ const { pageSlug, mcpUrl } = props;
28
30
 
29
- const actions = usePageActions(pageSlug || '/');
31
+ const actions = usePageActions(pageSlug || '/', mcpUrl, props.actions);
30
32
 
31
33
  const [actionState, setActionState] = useState<ActionState>('idle');
32
34
 
@@ -12,10 +12,19 @@ import { useThemeHooks } from './use-theme-hooks';
12
12
  import { useThemeConfig } from './use-theme-config';
13
13
  import { ClipboardService } from '../utils/clipboard-service';
14
14
  import { IS_BROWSER } from '../utils/dom';
15
+ import { CursorIcon } from '../../icons/CursorIcon/CursorIcon';
15
16
 
16
17
  const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'] as const;
18
+ const CURSOR_URL =
19
+ 'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
17
20
 
18
- export function usePageActions(pageSlug: string): PageAction[] {
21
+ export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
22
+
23
+ export function usePageActions(
24
+ pageSlug: string,
25
+ mcpUrl?: string,
26
+ actions?: PageActionType[],
27
+ ): PageAction[] {
19
28
  const { useTranslate, usePageData, usePageProps, usePageSharedData } = useThemeHooks();
20
29
  const { translate } = useTranslate();
21
30
 
@@ -32,7 +41,7 @@ export function usePageActions(pageSlug: string): PageAction[] {
32
41
  );
33
42
  const { isPublic } = usePageData() || {};
34
43
 
35
- const actions: PageAction[] = useMemo(() => {
44
+ const result: PageAction[] = useMemo(() => {
36
45
  if (shouldHideAllActions) {
37
46
  return [];
38
47
  }
@@ -54,9 +63,49 @@ export function usePageActions(pageSlug: string): PageAction[] {
54
63
  return url.toString();
55
64
  }
56
65
 
57
- return (themeConfig.navigation?.actions?.items || DEFAULT_ENABLED_ACTIONS)
66
+ return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
58
67
  .map((action) => {
68
+ function generateMCPConfig(isCursor?: boolean): string {
69
+ const jsonConfig = {
70
+ 'mcp-server': {
71
+ url: mcpUrl,
72
+ description: 'MCP Server',
73
+ },
74
+ };
75
+ if (isCursor) {
76
+ const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace(
77
+ '$BASE64_ENCODED_CONFIG',
78
+ btoa(JSON.stringify(jsonConfig['mcp-server'])),
79
+ );
80
+ return url;
81
+ }
82
+
83
+ return JSON.stringify(jsonConfig, null, 2);
84
+ }
85
+
59
86
  switch (action) {
87
+ case 'mcp-cursor':
88
+ if (!mcpUrl) {
89
+ return null;
90
+ }
91
+
92
+ return {
93
+ buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
94
+ title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
95
+ description: translate(
96
+ 'page.actions.cursorMcpDescription',
97
+ 'Install MCP server on Cursor',
98
+ ),
99
+ iconComponent: CursorIcon,
100
+ onClick: () => {
101
+ try {
102
+ const url = generateMCPConfig(true);
103
+ window.open(url, '_blank');
104
+ } catch (error) {
105
+ console.error(error);
106
+ }
107
+ },
108
+ };
60
109
  case 'copy':
61
110
  return {
62
111
  buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -121,9 +170,17 @@ export function usePageActions(pageSlug: string): PageAction[] {
121
170
  }
122
171
  })
123
172
  .filter((action) => action !== null);
124
- }, [themeConfig, translate, pageSlug, isPublic, shouldHideAllActions]);
125
-
126
- return actions;
173
+ }, [
174
+ shouldHideAllActions,
175
+ pageSlug,
176
+ themeConfig.navigation?.actions?.items,
177
+ actions,
178
+ mcpUrl,
179
+ translate,
180
+ isPublic,
181
+ ]);
182
+
183
+ return result;
127
184
  }
128
185
 
129
186
  function shouldHidePageActions(
@@ -17,6 +17,7 @@ export {
17
17
  addTrailingSlash,
18
18
  withPathPrefix,
19
19
  } from '../utils/urls';
20
+ export { capitalize } from '../utils/string';
20
21
  export { typedMemo } from '../hoc/typedMemo';
21
22
  export { useMount } from '../hooks/use-mount';
22
23
  export { GlobalStyle } from '../styles/global';
@@ -206,6 +206,9 @@ export type TranslationKey =
206
206
  | 'page.actions.claudeTitle'
207
207
  | 'page.actions.claudeButtonText'
208
208
  | 'page.actions.claudeDescription'
209
+ | 'page.actions.cursorMcpButtonText'
210
+ | 'page.actions.cursorMcpTitle'
211
+ | 'page.actions.cursorMcpDescription'
209
212
  | 'openapi.download.description.title'
210
213
  | 'openapi.info.title'
211
214
  | 'openapi.info.contact.url'
@@ -283,6 +286,16 @@ export type TranslationKey =
283
286
  | 'openapi.schemaCatalogLink.title'
284
287
  | 'openapi.schemaCatalogLink.copyButtonTooltip'
285
288
  | 'openapi.schemaCatalogLink.copiedTooltip'
289
+ | 'openapi.mcp.title'
290
+ | 'openapi.mcp.endpoint'
291
+ | 'openapi.mcp.tools'
292
+ | 'openapi.mcp.protocolVersion'
293
+ | 'openapi.mcp.capabilities'
294
+ | 'openapi.mcp.experimentalCapabilities'
295
+ | 'openapi.mcp.inputSchema'
296
+ | 'openapi.mcp.inputExample'
297
+ | 'openapi.mcp.outputSchema'
298
+ | 'openapi.mcp.outputExample'
286
299
  | 'asyncapi.download.description.title'
287
300
  | 'asyncapi.info.title'
288
301
  | 'graphql.queries'
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ import type { IconProps } from '@redocly/theme/icons/types';
5
+
6
+ const Icon = (props: IconProps) => (
7
+ <svg
8
+ width="16"
9
+ height="16"
10
+ viewBox="0 0 16 16"
11
+ fill="none"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ {...props}
14
+ >
15
+ <path d="M7.99956 15V8.0001L2 11.4999L7.99956 15Z" fill="#939393" />
16
+ <path d="M14 4.49979L7.99956 15V8.0001L14 4.49979Z" fill="#E3E3E3" />
17
+ <path d="M2 4.49979H14L7.99956 8.0001L2 4.49979Z" fill="white" />
18
+ <path d="M8.00025 1V4.49995L14 4.49979L8.00025 1Z" fill="#444444" />
19
+ <path
20
+ d="M2 4.49979L8.00025 4.49995V1L2 4.49979ZM13.9999 11.4998L10.9999 9.74987L7.99956 15L13.9999 11.4998Z"
21
+ fill="#939393"
22
+ />
23
+ <path
24
+ d="M14 4.49979L10.9999 9.74987L13.9999 11.4998L14 4.49979ZM7.99956 8.0001L2 11.4999V4.49979L7.99956 8.0001Z"
25
+ fill="#444444"
26
+ />
27
+ </svg>
28
+ );
29
+
30
+ export const CursorIcon = styled(Icon).attrs(() => ({
31
+ 'data-component-name': 'icons/CursorIcon/CursorIcon',
32
+ }))<IconProps>`
33
+ height: ${({ size }) => size || '16px'};
34
+ width: ${({ size }) => size || '16px'};
35
+ `;
@@ -104,6 +104,7 @@ export function TabList({
104
104
  key={`more-${tabId}`}
105
105
  active={activeTab === label}
106
106
  onAction={() => {
107
+ childrenArray[index].props.onClick?.();
107
108
  onTabClick(index);
108
109
  }}
109
110
  disabled={childrenArray[index].props.disable}