Use monaco-editor for code display

[carbonrobot]

Use monaco-editor for code display instead of @microlink/react-json-view.

We want to remove the current editor to resolve the dependency issues with npm. See #171 for more information. Monaco Editor is the tool that powers the VS Code Editor. Having a lightweight editor allows us the opportunity to allow editing and replaying in the UX in a future update and provides built in language support/syntax highlighting for multiple response types.

• Provides a <CodeDisplay> component that uses the content-type header value to determine the language for syntax highlighting
• Fixes an issue where large auth tokens that are large expand vertically
• Sets a fixed height for the decoded token view. The editor is lazy loaded and can't determine its height with flex. This also prevents it from expanding infinitely with large token data sets

Before

After

Also fixes an issue where large auth tokens that are large expand vertically

Before

After

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: c3b16d6b28a371ddf737fc13a643e0d280fc13f2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

| Name | Type | | -------------- | ----- | | @envyjs/webui | Minor | | @envyjs/apollo | Minor | | @envyjs/core | Minor | | @envyjs/nextjs | Minor | | @envyjs/node | Minor | | @envyjs/web | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[carbonrobot]

@kgpax good call, will see what we can do here

[carbonrobot]

@kgpax Updated. I was unable to find a solution to "Automatically truncate large values". The only options are word wrap, but thats not really the same thing. Play around with the current build and let me know what you think.

[kgpax]

@kgpax Updated. I was unable to find a solution to "Automatically truncate large values". The only options are word wrap, but thats not really the same thing. Play around with the current build and let me know what you think.

I think the truncation in the previous component was there because the default behaviour was to wrap the text (i.e., a long value would wrap over multiple lines)... therefore the truncation made it better because each line was a different property.

Given that this editor has word-wrap disabled, we kind of get that same overall experience, so on reflection I'd say that the truncation isn't really necessary any more.

[carbonrobot]

Preview Package Publishing

🦋  success packages published successfully:
🦋  @envyjs/apollo@0.9.0-next.0
🦋  @envyjs/core@0.9.0-next.0
🦋  @envyjs/nextjs@0.9.0-next.0
🦋  @envyjs/node@0.9.0-next.0
🦋  @envyjs/web@0.9.0-next.0
🦋  @envyjs/webui@0.9.0-next.0