Infisical
Code editor / syntax highlighting in secrets editor
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.
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 />)
Hi @maidul98 / @sheensantoscapadngan 👋, I’d love to take this issue.
I’ve explored integrating the Monaco code editor to improve the secrets editing experience. Here’s a short demo video of my initial attempt: Loom Recording.
Please let me know what you think . If this approach looks good, I’d be happy to open a PR to implement it fully.
Just pushed the PR—happy to hear any thoughts whenever there's a chance