From b92ad4c0243b23dc01ba354f4df5df51082a2ee2 Mon Sep 17 00:00:00 2001 From: ckoegel Date: Thu, 5 Dec 2024 13:58:05 -0500 Subject: [PATCH 1/5] update prism syntax highlighting --- src/common-elements/fields.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index 2b41e4803..59b3d301b 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -87,6 +87,16 @@ export const RequiredLabel = styled(FieldLabel).attrs({ line-height: 1; `; +export const ReadOnlyLabel = styled(FieldLabel).attrs({ + as: 'div', +})` + color: ${props => props.theme.schema.readOnlyLabelColor}; + font-size: ${props => props.theme.schema.labelsTextSize}; + font-weight: normal; + margin-left: 20px; + line-height: 1; +`; + export const PropertyLabel = styled(RequiredLabel)` color: ${props => props.theme.colors.primary.light}; `; From 2953a84dc5bb0ed34a049f2c025e7252f0f9aa64 Mon Sep 17 00:00:00 2001 From: ckoegel Date: Thu, 5 Dec 2024 13:58:45 -0500 Subject: [PATCH 2/5] add label for `read-only` property --- src/common-elements/PrismDiv.tsx | 407 +++++++++++++++++++++++++++---- src/components/Fields/Field.tsx | 3 + src/theme.ts | 20 +- 3 files changed, 358 insertions(+), 72 deletions(-) diff --git a/src/common-elements/PrismDiv.tsx b/src/common-elements/PrismDiv.tsx index c5b6b06ea..b7f19cea4 100644 --- a/src/common-elements/PrismDiv.tsx +++ b/src/common-elements/PrismDiv.tsx @@ -2,36 +2,45 @@ import styled, { extensionsHook } from '../styled-components'; export const PrismDiv = styled.div` /** - * Based on prism-dark.css + * Taken from prism-one-dark.css */ code[class*='language-'], pre[class*='language-'] { - /* color: white; - background: none; */ - text-shadow: 0 -0.1em 0.2em black; + background: hsl(220, 13%, 18%); + color: hsl(220, 14%, 71%); + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; - word-wrap: normal; line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } - @media print { - code[class*='language-'], - pre[class*='language-'] { - text-shadow: none; - } + /* Selection */ + code[class*='language-']::-moz-selection, + code[class*='language-'] *::-moz-selection, + pre[class*='language-'] *::-moz-selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; + } + + code[class*='language-']::selection, + code[class*='language-'] *::selection, + pre[class*='language-'] *::selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; } /* Code blocks */ @@ -39,75 +48,175 @@ export const PrismDiv = styled.div` padding: 1em; margin: 0.5em 0; overflow: auto; + border-radius: 0.3em; + } + + /* Inline code */ + :not(pre) > code[class*='language-'] { + padding: 0.2em 0.3em; + border-radius: 0.3em; + white-space: normal; + } + + /* Print */ + @media print { + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } } .token.comment, .token.prolog, - .token.doctype, .token.cdata { - color: hsl(30, 20%, 50%); + color: hsl(220, 10%, 40%); } - .token.punctuation { - opacity: 0.7; + .token.doctype, + .token.punctuation, + .token.entity { + color: hsl(220, 14%, 71%); } - .namespace { - opacity: 0.7; + .token.attr-name, + .token.class-name, + .token.boolean, + .token.constant, + .token.number, + .token.atrule { + color: hsl(29, 54%, 61%); } - .token.property, - .token.tag, - .token.number, - .token.constant, - .token.symbol { - color: #4a8bb3; + .token.keyword { + color: hsl(286, 60%, 67%); } - .token.boolean { - color: #e64441; + .token.property, + .token.tag, + .token.symbol, + .token.deleted, + .token.important { + color: hsl(355, 65%, 65%); } .token.selector, - .token.attr-name, .token.string, .token.char, .token.builtin, - .token.inserted { - color: #a0fbaa; - & + a, - & + a:visited { - color: #4ed2ba; - text-decoration: underline; - } + .token.inserted, + .token.regex, + .token.attr-value, + .token.attr-value > .token.punctuation { + color: hsl(95, 38%, 62%); } - .token.property.string { - color: white; + .token.variable, + .token.operator, + .token.function { + color: hsl(207, 82%, 66%); } - .token.operator, - .token.entity, - .token.url, - .token.variable { - color: hsl(40, 90%, 60%); + .token.url { + color: hsl(187, 47%, 55%); } - .token.atrule, - .token.attr-value, - .token.keyword { - color: hsl(350, 40%, 70%); + /* HTML overrides */ + .token.attr-value > .token.punctuation.attr-equals, + .token.special-attr > .token.attr-value > .token.value.css { + color: hsl(220, 14%, 71%); } - .token.regex, - .token.important { - color: #e90; + /* CSS overrides */ + .language-css .token.selector { + color: hsl(355, 65%, 65%); + } + + .language-css .token.property { + color: hsl(220, 14%, 71%); + } + + .language-css .token.function, + .language-css .token.url > .token.function { + color: hsl(187, 47%, 55%); + } + + .language-css .token.url > .token.string.url { + color: hsl(95, 38%, 62%); + } + + .language-css .token.important, + .language-css .token.atrule .token.rule { + color: hsl(286, 60%, 67%); + } + + /* JS overrides */ + .language-javascript .token.operator { + color: hsl(286, 60%, 67%); + } + + .language-javascript + .token.template-string + > .token.interpolation + > .token.interpolation-punctuation.punctuation { + color: hsl(5, 48%, 51%); + } + + /* JSON overrides */ + .language-json .token.operator { + color: hsl(220, 14%, 71%); + } + + .language-json .token.null.keyword { + color: hsl(29, 54%, 61%); + } + + /* MD overrides */ + .language-markdown .token.url, + .language-markdown .token.url > .token.operator, + .language-markdown .token.url-reference.url > .token.string { + color: hsl(220, 14%, 71%); + } + + .language-markdown .token.url > .token.content { + color: hsl(207, 82%, 66%); + } + + .language-markdown .token.url > .token.url, + .language-markdown .token.url-reference.url { + color: hsl(187, 47%, 55%); + } + + .language-markdown .token.blockquote.punctuation, + .language-markdown .token.hr.punctuation { + color: hsl(220, 10%, 40%); + font-style: italic; + } + + .language-markdown .token.code-snippet { + color: hsl(95, 38%, 62%); + } + + .language-markdown .token.bold .token.content { + color: hsl(29, 54%, 61%); + } + + .language-markdown .token.italic .token.content { + color: hsl(286, 60%, 67%); + } + + .language-markdown .token.strike .token.content, + .language-markdown .token.strike .token.punctuation, + .language-markdown .token.list.punctuation, + .language-markdown .token.title.important > .token.punctuation { + color: hsl(355, 65%, 65%); } - .token.important, + /* General */ .token.bold { font-weight: bold; } + + .token.comment, .token.italic { font-style: italic; } @@ -116,8 +225,198 @@ export const PrismDiv = styled.div` cursor: help; } - .token.deleted { - color: red; + .token.namespace { + opacity: 0.8; + } + + /* Plugin overrides */ + /* Selectors should have higher specificity than those in the plugins' default stylesheets */ + + /* Show Invisibles plugin overrides */ + .token.token.tab:not(:empty):before, + .token.token.cr:before, + .token.token.lf:before, + .token.token.space:before { + color: hsla(220, 14%, 71%, 0.15); + text-shadow: none; + } + + /* Toolbar plugin overrides */ + /* Space out all buttons and move them away from the right edge of the code block */ + div.code-toolbar > .toolbar.toolbar > .toolbar-item { + margin-right: 0.4em; + } + + /* Styling the buttons */ + div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { + background: hsl(220, 13%, 26%); + color: hsl(220, 9%, 55%); + padding: 0.1em 0.4em; + border-radius: 0.3em; + } + + div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { + background: hsl(220, 13%, 28%); + color: hsl(220, 14%, 71%); + } + + /* Line Highlight plugin overrides */ + /* The highlighted line itself */ + .line-highlight.line-highlight { + background: hsla(220, 100%, 80%, 0.04); + } + + /* Default line numbers in Line Highlight plugin */ + .line-highlight.line-highlight:before, + .line-highlight.line-highlight[data-end]:after { + background: hsl(220, 13%, 26%); + color: hsl(220, 14%, 71%); + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ + } + + /* Hovering over a linkable line number (in the gutter area) */ + /* Requires Line Numbers plugin as well */ + pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: hsla(220, 100%, 80%, 0.04); + } + + /* Line Numbers and Command Line plugins overrides */ + /* Line separating gutter from coding area */ + .line-numbers.line-numbers .line-numbers-rows, + .command-line .command-line-prompt { + border-right-color: hsla(220, 14%, 71%, 0.15); + } + + /* Stuff in the gutter */ + .line-numbers .line-numbers-rows > span:before, + .command-line .command-line-prompt > span:before { + color: hsl(220, 14%, 45%); + } + + /* Match Braces plugin overrides */ + /* Note: Outline colour is inherited from the braces */ + .rainbow-braces .token.token.punctuation.brace-level-1, + .rainbow-braces .token.token.punctuation.brace-level-5, + .rainbow-braces .token.token.punctuation.brace-level-9 { + color: hsl(355, 65%, 65%); + } + + .rainbow-braces .token.token.punctuation.brace-level-2, + .rainbow-braces .token.token.punctuation.brace-level-6, + .rainbow-braces .token.token.punctuation.brace-level-10 { + color: hsl(95, 38%, 62%); + } + + .rainbow-braces .token.token.punctuation.brace-level-3, + .rainbow-braces .token.token.punctuation.brace-level-7, + .rainbow-braces .token.token.punctuation.brace-level-11 { + color: hsl(207, 82%, 66%); + } + + .rainbow-braces .token.token.punctuation.brace-level-4, + .rainbow-braces .token.token.punctuation.brace-level-8, + .rainbow-braces .token.token.punctuation.brace-level-12 { + color: hsl(286, 60%, 67%); + } + + /* Diff Highlight plugin overrides */ + /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ + pre.diff-highlight > code .token.token.deleted:not(.prefix), + pre > code.diff-highlight .token.token.deleted:not(.prefix) { + background-color: hsla(353, 100%, 66%, 0.15); + } + + pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, + pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { + background-color: hsla(353, 95%, 66%, 0.25); + } + + pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, + pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { + background-color: hsla(353, 95%, 66%, 0.25); + } + + pre.diff-highlight > code .token.token.inserted:not(.prefix), + pre > code.diff-highlight .token.token.inserted:not(.prefix) { + background-color: hsla(137, 100%, 55%, 0.15); + } + + pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, + pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { + background-color: hsla(135, 73%, 55%, 0.25); + } + + pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, + pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { + background-color: hsla(135, 73%, 55%, 0.25); + } + + /* Previewers plugin overrides */ + /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ + /* Border around popup */ + .prism-previewer.prism-previewer:before, + .prism-previewer-gradient.prism-previewer-gradient div { + border-color: hsl(224, 13%, 17%); + } + + /* Angle and time should remain as circles and are hence not included */ + .prism-previewer-color.prism-previewer-color:before, + .prism-previewer-gradient.prism-previewer-gradient div, + .prism-previewer-easing.prism-previewer-easing:before { + border-radius: 0.3em; + } + + /* Triangles pointing to the code */ + .prism-previewer.prism-previewer:after { + border-top-color: hsl(224, 13%, 17%); + } + + .prism-previewer-flipped.prism-previewer-flipped.after { + border-bottom-color: hsl(224, 13%, 17%); + } + + /* Background colour within the popup */ + .prism-previewer-angle.prism-previewer-angle:before, + .prism-previewer-time.prism-previewer-time:before, + .prism-previewer-easing.prism-previewer-easing { + background: hsl(219, 13%, 22%); + } + + /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ + /* For time, this is the alternate colour */ + .prism-previewer-angle.prism-previewer-angle circle, + .prism-previewer-time.prism-previewer-time circle { + stroke: hsl(220, 14%, 71%); + stroke-opacity: 1; + } + + /* Stroke colours of the handle, direction point, and vector itself */ + .prism-previewer-easing.prism-previewer-easing circle, + .prism-previewer-easing.prism-previewer-easing path, + .prism-previewer-easing.prism-previewer-easing line { + stroke: hsl(220, 14%, 71%); + } + + /* Fill colour of the handle */ + .prism-previewer-easing.prism-previewer-easing circle { + fill: transparent; } ${extensionsHook('Prism')}; diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index 367eae672..493ca2143 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { ClickablePropertyNameCell, PropertyLabel, + ReadOnlyLabel, RequiredLabel, } from '../../common-elements/fields'; import { FieldDetails } from './FieldDetails'; @@ -52,6 +53,7 @@ export class Field extends React.Component { const { className = '', field, isLast, expandByDefault } = this.props; const { name, deprecated, required, kind } = field; const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular; + const readOnly = field.schema?.readOnly; const expanded = field.expanded === undefined ? expandByDefault : field.expanded; @@ -60,6 +62,7 @@ export class Field extends React.Component { {kind === 'additionalProperties' && additional property} {kind === 'patternProperties' && pattern property} {required && required} + {readOnly && read-only} ); diff --git a/src/theme.ts b/src/theme.ts index 4fca8a65b..1a90d871c 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -37,24 +37,6 @@ const defaultTheme: ThemeInterface = { dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main), contrastText: ({ colors }) => readableColor(colors.error.main), }, - global: { - main: '#7c1cfc', - light: ({ colors }) => lighten(colors.tonalOffset, colors.global.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.global.main), - contrastText: ({ colors }) => readableColor(colors.global.main), - }, - usonly: { - main: '#079cee', - light: ({ colors }) => lighten(colors.tonalOffset, colors.usonly.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.usonly.main), - contrastText: ({ colors }) => readableColor(colors.global.main), - }, - experimental: { - main: '#8c03fc', - light: ({ colors }) => lighten(colors.tonalOffset, colors.experimental.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.experimental.main), - contrastText: ({ colors }) => readableColor(colors.experimental.main), - }, gray: { 50: '#FAFAFA', 100: '#F5F5F5', @@ -111,6 +93,7 @@ const defaultTheme: ThemeInterface = { typeNameColor: theme => theme.colors.text.secondary, typeTitleColor: theme => theme.schema.typeNameColor, requireLabelColor: theme => theme.colors.error.main, + readOnlyLabelColor: theme => theme.colors.responses.info.color, labelsTextSize: '0.9em', nestingSpacing: '1em', nestedBackground: '#fafafa', @@ -324,6 +307,7 @@ export interface ResolvedThemeInterface { typeNameColor: string; typeTitleColor: string; requireLabelColor: string; + readOnlyLabelColor: string; labelsTextSize: string; nestingSpacing: string; nestedBackground: string; From 25eb29359561a0a7be5141128377b9e50e8a4de5 Mon Sep 17 00:00:00 2001 From: ckoegel Date: Wed, 12 Nov 2025 11:37:19 -0500 Subject: [PATCH 3/5] SWI-9039 Update Webhook Badges --- package-lock.json | 58 ++++++++++++++++---------- package.json | 4 +- src/components/Operation/Operation.tsx | 2 +- src/components/SideMenu/MenuItem.tsx | 4 +- src/services/RedocNormalizedOptions.ts | 3 ++ 5 files changed, 43 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index fab4e016c..31c55c025 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@redocly/openapi-core": "^1.4.0", "classnames": "^2.3.2", "decko": "^1.2.0", - "dompurify": "^3.0.6", + "dompurify": "^3.3.0", "eventemitter3": "^5.0.1", "json-pointer": "^0.6.2", "lunr": "^2.3.9", @@ -24,7 +24,7 @@ "path-browserify": "^1.0.1", "perfect-scrollbar": "^1.5.5", "polished": "^4.2.2", - "prismjs": "^1.29.0", + "prismjs": "^1.30.0", "prop-types": "^15.8.1", "react-tabs": "^6.0.2", "slugify": "~1.4.7", @@ -4121,10 +4121,11 @@ "dev": true }, "node_modules/@types/trusted-types": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.0.tgz", - "integrity": "sha512-I8MnZqNXsOLHsU111oHbn3khtvKMi5Bn4qVFsIWSJcCP1KKDiXX5AEw8UPk0nSopeC+Hvxt6yAy1/a5PailFqg==", - "dev": true + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "devOptional": true, + "license": "MIT" }, "node_modules/@types/webpack": { "version": "5.28.0", @@ -7535,9 +7536,13 @@ } }, "node_modules/dompurify": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.3.tgz", - "integrity": "sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz", + "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } }, "node_modules/domutils": { "version": "2.7.0", @@ -15451,9 +15456,10 @@ } }, "node_modules/prismjs": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", - "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", "engines": { "node": ">=6" } @@ -22240,10 +22246,10 @@ "dev": true }, "@types/trusted-types": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.0.tgz", - "integrity": "sha512-I8MnZqNXsOLHsU111oHbn3khtvKMi5Bn4qVFsIWSJcCP1KKDiXX5AEw8UPk0nSopeC+Hvxt6yAy1/a5PailFqg==", - "dev": true + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "devOptional": true }, "@types/webpack": { "version": "5.28.0", @@ -24757,9 +24763,12 @@ } }, "dompurify": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.3.tgz", - "integrity": "sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz", + "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==", + "requires": { + "@types/trusted-types": "^2.0.7" + } }, "domutils": { "version": "2.7.0", @@ -25731,7 +25740,10 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", - "dev": true + "dev": true, + "requires": { + "side-channel": "^1.0.4" + } } } }, @@ -30604,9 +30616,9 @@ } }, "prismjs": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", - "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==" + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==" }, "process": { "version": "0.11.10", diff --git a/package.json b/package.json index 551d6aaa1..09903bb3b 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "@redocly/openapi-core": "^1.4.0", "classnames": "^2.3.2", "decko": "^1.2.0", - "dompurify": "^3.0.6", + "dompurify": "^3.3.0", "eventemitter3": "^5.0.1", "json-pointer": "^0.6.2", "lunr": "^2.3.9", @@ -152,7 +152,7 @@ "path-browserify": "^1.0.1", "perfect-scrollbar": "^1.5.5", "polished": "^4.2.2", - "prismjs": "^1.29.0", + "prismjs": "^1.30.0", "prop-types": "^15.8.1", "react-tabs": "^6.0.2", "slugify": "~1.4.7", diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index 9ce0aab1f..27ff24c70 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -56,7 +56,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element = ))} {summary} {deprecated && Deprecated } {isWebhook && ( - + {' '} Webhook {showWebhookVerb && httpVerb && '| ' + httpVerb.toUpperCase()} diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 4c72cc440..7ef6e4be6 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -86,7 +86,7 @@ export interface OperationMenuItemContentProps { export const OperationMenuItemContent = observer((props: OperationMenuItemContentProps) => { const { item } = props; const ref = React.createRef(); - const { showWebhookVerb } = React.useContext(OptionsContext); + const { showWebhookVerb, webhookBadgeColor } = React.useContext(OptionsContext); React.useEffect(() => { if (props.item.active && ref.current) { @@ -108,7 +108,7 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten ))} {item.isWebhook ? ( - + {showWebhookVerb ? item.httpVerb : l('webhook')} ) : ( diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index fd162b91d..ec60b94d5 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -39,6 +39,7 @@ export interface RedocRawOptions { showObjectSchemaExamples?: boolean | string; showSecuritySchemeType?: boolean; hideSecuritySection?: boolean; + webhookBadgeColor?: string; unstable_ignoreMimeParameters?: boolean; @@ -244,6 +245,7 @@ export class RedocNormalizedOptions { showObjectSchemaExamples: boolean; showSecuritySchemeType?: boolean; hideSecuritySection?: boolean; + webhookBadgeColor?: string; /* tslint:disable-next-line */ unstable_ignoreMimeParameters: boolean; @@ -318,6 +320,7 @@ export class RedocNormalizedOptions { this.showObjectSchemaExamples = argValueToBoolean(raw.showObjectSchemaExamples); this.showSecuritySchemeType = argValueToBoolean(raw.showSecuritySchemeType); this.hideSecuritySection = argValueToBoolean(raw.hideSecuritySection); + this.webhookBadgeColor = raw.webhookBadgeColor; this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters); From bdfb67eed45aad8260a89b7bac3a62e606e1e1a8 Mon Sep 17 00:00:00 2001 From: ckoegel Date: Wed, 12 Nov 2025 13:27:58 -0500 Subject: [PATCH 4/5] update snapshot --- .../__tests__/__snapshots__/FieldDetails.test.tsx.snap | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap index 90cb6c356..4eabd3442 100644 --- a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap @@ -174,10 +174,12 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty class="sc-kpDqfm sc-dAlyuH sc-gvZAcH cGRfjn gHomYR eXivNJ" > [ items - + <= 128 characters From 7175377d75e04cad011fc7228f554e1537c901c3 Mon Sep 17 00:00:00 2001 From: ckoegel Date: Wed, 12 Nov 2025 13:31:52 -0500 Subject: [PATCH 5/5] update snapshot --- .../__snapshots__/DiscriminatorDropdown.test.tsx.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index adad16913..5614b0af3 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -294,6 +294,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Dog/properties/packSize", @@ -567,6 +568,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Dog/properties/type", @@ -827,6 +829,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Dog", @@ -1149,6 +1152,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Cat/properties/type", @@ -1434,6 +1438,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Cat/properties/packSize", @@ -1690,6 +1695,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Cat", @@ -1971,6 +1977,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Pet", @@ -2282,6 +2289,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Dog/properties/packSize", @@ -2555,6 +2563,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Dog/properties/type", @@ -2815,6 +2824,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, "unstable_ignoreMimeParameters": false, "untrustedSpec": false, + "webhookBadgeColor": undefined, }, "pattern": undefined, "pointer": "#/components/schemas/Dog",