✨ Enhancement: Review the implementation of the JSON editor to better management of state/style #560
Description
Is your feature request related to a problem? Please describe
Related: #417
As of now we are using 2 different code editors: 1 JSON and JSON Schema (json editor) and another for the rest of languages based on react-syntax-highlighter library.
This is providing an inconsistent experience in terms of formatting but also in terms of features. Ideally we'll use one single document that provides:
- Consistent formating/color/linting
- Availability of copy/pasting
- In cases of JSON and availability to add labels to express that is a valid JSON. See:
Describe the solution you'd like
Use or extend a code editor or improve the current implementation using 2 different editors.
Use only the react-syntax-highlighter and explore how to better do the customizations required:
- Lang labels for JSON and JSON Schema.
- Copy paste button.
- line number
- line highlight
- For json instances availability to highlight if is a valid instance, like the previous custom instance.
For copy paste see: https://www.bojanjagetic.com/post/react-syntaxhighlighter-copy-clipboard
For line numbers and line highlight see https://www.dhiwise.com/post/crafting-beautiful-code-blocks-with-react-syntax-highlighter
Describe alternatives you've considered
No response
Additional context
No response
Are you working on this?
No