Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

luka-dev
Copy link

@luka-dev luka-dev commented Jun 21, 2024

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. Button to toggle a preview of html returned in a response #6847
  3. Swagger UI shows raw html in Response Body frame #1748 (feature not imeplemeted)
  4. Rendered html body viewer for text/html response body. #1962 (dup)
  5. vdwees@1344e49

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)
  • Improvements (misc. changes to existing features)
  • 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).
  • are not breaking changes.

Documentation

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant