I would like to purpose the ability to render or visualise vendor extensions within the JSON Schema Viewer.

Context

I have vendor extensions which I want to visualise or show up in the schema definition

Current Behavior

No ability to display vendor extensions

Expected Behavior

I want to have function similar to renderRowAddon to allow render vendor extensions

Possible Solution(s)

I have been working on implementing a function named renderExtensionAddon with the signature:

({ schemaNode: SchemaNode; nestingLevel: number; vendorExtensions: Record<string, unknown>}) => React.ReactNode

As you can see the function will return a React node back which can be rendered by the component, and the responsibility for returning the component is off loaded to the consumer of JsonSchemaViewer.

This would be used by the TopLevelSchemaRow and SchemaRow components, in a way, such as:

// Add around line 40-41
{hasVendorProperties && renderExtensionAddon
          ? renderExtensionAddon({ schemaNode, nestingLevel, vendorExtensions })
          : null}

Note: Currently, there is no way to easily extract vendor extensions from a schema node, only way is to grab it from fragment-property and then get all properties prefixed with x-.

In the SchemaRow-component a similar code can be added as above:

// Add around line 180-181
{hasVendorProperties && renderExtensionAddon ? (
              <Box>{renderExtensionAddon({ schemaNode, nestingLevel, vendorExtensions })}</Box>
            ) : null}

A potential implementation of the renderExtensionAddon could be:

/**
 * @private
 * A helper function to render vendor extensions of an OpenaPI schema definition
 */
export function renderExtensions({ schemaNode, nestingLevel, vendorExtensions }: ExtensionRowProps) {
  // Avoid rendering vendor extensions for the zero nesting level or root of a schema
  if (nestingLevel === 0) {
    return null;
  }
  return <VendorExtensions node={schemaNode} vendorExtensions={vendorExtensions} />;
}

I am happy to raise a pull request for these changes. I have been using it in a fork of the component and so far it works as expected.