diff --git a/.changeset/yellow-jobs-nail.md b/.changeset/yellow-jobs-nail.md new file mode 100644 index 0000000000..c066da6b08 --- /dev/null +++ b/.changeset/yellow-jobs-nail.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Improve OpenAPI circular references diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index 53602c41df..ca2eb3e9d6 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -182,7 +182,7 @@ /* Schema Presentation */ .openapi-schema-presentation { - @apply flex flex-col gap-1 font-normal; + @apply flex flex-col gap-1 font-normal scroll-mt-[calc(var(--toc-top-offset)+0.5rem)]; } .openapi-schema-properties:last-child { @@ -249,7 +249,7 @@ } .openapi-schema-circular { - @apply text-xs text-tint; + @apply text-sm text-tint; } .openapi-schema-circular a { @@ -257,7 +257,7 @@ } .openapi-schema-circular-glyph { - @apply text-base; + @apply text-base mr-1; } /* Schema Enum */ diff --git a/packages/react-openapi/src/OpenAPISchema.tsx b/packages/react-openapi/src/OpenAPISchema.tsx index 63821b0193..7f9d0217ac 100644 --- a/packages/react-openapi/src/OpenAPISchema.tsx +++ b/packages/react-openapi/src/OpenAPISchema.tsx @@ -47,7 +47,13 @@ function OpenAPISchemaProperty( const circularRefId = parentCircularRefs.get(schema); // Avoid recursing infinitely, and instead render a link to the parent schema if (circularRefId) { - return ; + return ( + + ); } const circularRefs = new Map(parentCircularRefs); @@ -58,7 +64,7 @@ function OpenAPISchemaProperty( const ancestors = new Set(circularRefs.keys()); const alternatives = getSchemaAlternatives(schema, ancestors); - const header = ; + const header = ; const content = (() => { if (alternatives?.schemas) { const { schemas, discriminator } = alternatives; @@ -101,10 +107,8 @@ function OpenAPISchemaProperty( return ( getDisclosureLabel({ schema, isExpanded, context })} - {...rest} > {content} @@ -289,8 +293,8 @@ function OpenAPISchemaCircularRef(props: { id: string; schema: OpenAPIV3.SchemaO return (
+ Circular reference to {getSchemaTitle(schema)}{' '} -
); } @@ -359,11 +363,15 @@ function OpenAPISchemaEnum(props: { * Render the top row of a schema. e.g: name, type, and required status. */ export function OpenAPISchemaPresentation(props: { + id?: string; property: OpenAPISchemaPropertyEntry; context: OpenAPIClientContext; + circularRefId?: string; }) { const { + id, property: { schema, propertyName, required, isDiscriminatorProperty }, + circularRefId, context, } = props; @@ -371,7 +379,7 @@ export function OpenAPISchemaPresentation(props: { const example = resolveFirstExample(schema); return ( -
+
- {typeof schema['x-deprecated-sunset'] === 'string' ? ( -
- Sunset date:{' '} - - {schema['x-deprecated-sunset']} - -
- ) : null} - {description ? ( - - ) : null} - {schema.default !== undefined ? ( - - Default:{' '} - - {typeof schema.default === 'string' && schema.default - ? schema.default - : stringifyOpenAPI(schema.default)} - - - ) : null} - {typeof example === 'string' ? ( - - Example: {example} - - ) : null} - {schema.pattern ? ( - - Pattern: {schema.pattern} - - ) : null} - + {circularRefId ? ( + + ) : ( + <> + {typeof schema['x-deprecated-sunset'] === 'string' ? ( +
+ Sunset date:{' '} + + {schema['x-deprecated-sunset']} + +
+ ) : null} + {description ? ( + + ) : null} + {schema.default !== undefined ? ( + + Default:{' '} + + {typeof schema.default === 'string' && schema.default + ? schema.default + : stringifyOpenAPI(schema.default)} + + + ) : null} + {typeof example === 'string' ? ( + + Example: {example} + + ) : null} + {schema.pattern ? ( + + Pattern: {schema.pattern} + + ) : null} + + + )}
); }