Code editor / syntax highlighting in secrets editor

[tvtr04]

Feature description

It would be really cool if user would be able to have some small code editor / IDE in the secrets editor in infisical’s website.
For example, when editing JSON secret:

• Adding new keys/lines will have auto-indentation (instead of manually adding spaces now).
• If you don’t close a bracket, the secret editor will highlight in red that you have syntax error.

Why would it be useful?

Some of the secrets are not just plain text, they can be a JSON object, or an XML.
Currently if you want to edit it, you have to copy the secret to an IDE, edit it and than copy back to the infisical’s website.
Having small editing capabilities will allow users to edit secrets more conveniently and it will be a great UX improvement.

Additional context

This change shouldn't be complicated, you just need to replace the editing component in the frontend to a library that supports code editing, for example: react-simple-code-editor (https://www.npmjs.com/package/react-simple-code-editor) or any other package.

[FurquanAnwer]

Can I work on this ?

[user-64bit]

Hey @maidul98

I was looking into this issue and got one question.
is it good idea to add toggle between SecretInput(or InfisicalSecretInput) and something like codemirror for JSON support?

I was thinking something like below image. (clicking on JSON icon toggle between SecretInput and <CodeMirror />)