swagger-api / swagger-ui

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
https://swagger.io
Apache License 2.0
25.96k stars 8.85k forks source link

feat(swagger-ui-react): add HTML preview functionality to response #10042

Open luka-dev opened 1 week ago

luka-dev commented 1 week ago

Add feature to preview HTML in response

Description

Implemented Show/Hide Preview button in HighlightCode component. Frame height set to 400px as max-height for SyntaxHighlighter. Button appears, only if Content-Type header is text/html, it's reasonable to be able preview HTML. For safety reason, iframe using sandbox.

Motivation and Context

  1. Lack of сonvenient feature in compare to API clients like Postman and Insomnia
  2. https://github.com/swagger-api/swagger-ui/issues/6847
  3. https://github.com/swagger-api/swagger-ui/issues/1748 (feature not imeplemeted)
  4. https://github.com/swagger-api/swagger-ui/issues/1962 (dup)
  5. https://github.com/vdwees/swagger-ui/commit/1344e49ca471c5eb4b546c7353a1efcff4456c2d

Screenshots:

image image

My PR contains...

My changes...

Documentation

Automated tests