swagger-ui icon indicating copy to clipboard operation
swagger-ui copied to clipboard
verified publisher icon swagger-api

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

Open luka-dev opened this issue 1 year ago • 1 comments

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...

  • [ ] No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • [ ] Dependency changes (any modification to dependencies in package.json)
  • [ ] Bug fixes (non-breaking change which fixes an issue)
  • [X] Improvements (misc. changes to existing features)
  • [X] Features (non-breaking change which adds functionality)

My changes...

  • [ ] are breaking changes to a public API (config options, System API, major UI change, etc).
  • [ ] are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • [ ] are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • [X] are not breaking changes.

Documentation

  • [X] My changes do not require a change to the project documentation.
  • [ ] My changes require a change to the project documentation.
  • [ ] If yes to above: I have updated the documentation accordingly.

Automated tests

  • [ ] My changes can not or do not need to be tested.
  • [X] My changes can and should be tested by unit and/or integration tests.
  • [ ] If yes to above: I have added tests to cover my changes.
  • [ ] If yes to above: I have taken care to cover edge cases in my tests.
  • [ ] All new and existing tests passed.

luka-dev avatar Jun 21 '24 05:06 luka-dev

Hello. Just wondering if this PR will be ever merged. It would be nice to have this.

danarrib avatar Jun 09 '25 13:06 danarrib