diff --git a/.changeset/sixty-planets-fly.md b/.changeset/sixty-planets-fly.md new file mode 100644 index 000000000..bf80d19ac --- /dev/null +++ b/.changeset/sixty-planets-fly.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Add support for anchor links in OpenAPI blocks diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx index 7f1c3b2f9..ff50d6cc8 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx @@ -3,12 +3,12 @@ import { Icon } from '@gitbook/icons'; import { OpenAPIOperation } from '@gitbook/react-openapi'; import React from 'react'; -import { LoadingPane } from '@/components/primitives'; import { fetchOpenAPIBlock } from '@/lib/openapi/fetch'; import { tcls } from '@/lib/tailwind'; import { BlockProps } from '../Block'; import { PlainCodeBlock } from '../CodeBlock'; +import { Heading } from '../Heading'; import './style.css'; import './scalar.css'; @@ -54,6 +54,31 @@ async function OpenAPIBody(props: BlockProps) { plus: , }, CodeBlock: PlainCodeBlock, + renderHeading: (headingProps) => ( + + ), defaultInteractiveOpened: context.mode === 'print', id: block.meta?.id, blockKey: block.key, @@ -62,32 +87,3 @@ async function OpenAPIBody(props: BlockProps) { /> ); } - -function OpenAPIFallback() { - return ( -
- - -
-
- - -
-
- - -
-
-
- ); -} diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index f19ca02d6..170c61cdc 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -1,7 +1,5 @@ /* Layout Components */ .openapi-operation { - content-visibility: auto; - contain-intrinsic-height: 600px; @apply flex-1 flex flex-col gap-4 mb-14; } @@ -18,16 +16,8 @@ @apply flex flex-col items-start justify-start gap-2; } -.openapi-summary-title { - @apply font-semibold text-xl; -} - -.openapi-summary-title[data-deprecated='true'] { - @apply line-through; -} - .openapi-deprecated { - @apply py-0.5 px-1.5 min-w-[1.625rem] font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded-full text-sm leading-[calc(max(1.20em,1.25rem))] before:!content-none after:!content-none; + @apply py-0.5 px-1.5 min-w-[1.625rem] font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded text-sm leading-[calc(max(1.20em,1.25rem))] before:!content-none after:!content-none; } .openapi-deprecated-sunset-date { diff --git a/packages/gitbook/src/components/DocumentView/Text.tsx b/packages/gitbook/src/components/DocumentView/Text.tsx index f96a93d8d..478feeb5e 100644 --- a/packages/gitbook/src/components/DocumentView/Text.tsx +++ b/packages/gitbook/src/components/DocumentView/Text.tsx @@ -15,31 +15,29 @@ import { ClassValue, tcls } from '@/lib/tailwind'; export function Text(props: { text: DocumentText }) { const { text } = props; - return ( - <> - {text.leaves.map((leaf, index) => { - return ( - - {leaf.marks - // Sort to have code marks at the end, so that they don't interfere with other marks - .sort( - (a, b) => (a.type === 'code' ? 1 : 0) - (b.type === 'code' ? 1 : 0), - ) - .reduce((children, mark, index) => { - const Mark = MARK_STYLES[mark.type]; + return text.leaves.map((leaf, index) => { + return ( + + {leaf.marks + // Sort to have code marks at the end, so that they don't interfere with other marks + .sort((a, b) => (a.type === 'code' ? 1 : 0) - (b.type === 'code' ? 1 : 0)) + .reduce((children, mark, index) => { + const Mark = MARK_STYLES[mark.type]; - if (!Mark) { - return children; - } + if (!Mark) { + return children; + } - // @ts-ignore - return {children}; - }, leaf.text)} - - ); - })} - - ); + return ( + // @ts-ignore + + {children} + + ); + }, leaf.text)} + + ); + }); } const MARK_STYLES = { diff --git a/packages/react-openapi/src/OpenAPIOperation.tsx b/packages/react-openapi/src/OpenAPIOperation.tsx index 778e3a924..e1712a33b 100644 --- a/packages/react-openapi/src/OpenAPIOperation.tsx +++ b/packages/react-openapi/src/OpenAPIOperation.tsx @@ -25,14 +25,17 @@ export function OpenAPIOperation(props: { blockKey: context.blockKey, }; - const description = resolveDescription(operation)?.trim(); + const description = resolveDescription(operation); return (
-
-

- {operation.summary} -

+
+ {operation.summary + ? context.renderHeading({ + deprecated: operation.deprecated ?? false, + title: operation.summary, + }) + : null} {operation.deprecated &&
Deprecated
}
diff --git a/packages/react-openapi/src/types.ts b/packages/react-openapi/src/types.ts index b3a9ed0e3..331da6b69 100644 --- a/packages/react-openapi/src/types.ts +++ b/packages/react-openapi/src/types.ts @@ -6,6 +6,7 @@ import type { export interface OpenAPIContextProps extends OpenAPIClientContext { CodeBlock: React.ComponentType<{ code: string; syntax: string }>; + renderHeading: (props: { deprecated: boolean; title: string }) => React.ReactNode; /** Spec url for the Scalar Api Client */ specUrl: string; diff --git a/packages/react-openapi/src/utils.ts b/packages/react-openapi/src/utils.ts index 6bebf2f58..5130c35ab 100644 --- a/packages/react-openapi/src/utils.ts +++ b/packages/react-openapi/src/utils.ts @@ -16,9 +16,9 @@ export function createStateKey(key: string, scope?: string) { export function resolveDescription(object: AnyObject) { return 'x-gitbook-description-html' in object && typeof object['x-gitbook-description-html'] === 'string' - ? object['x-gitbook-description-html'] + ? object['x-gitbook-description-html'].trim() : typeof object.description === 'string' - ? object.description + ? object.description.trim() : undefined; }