Enhance Secrets Code Editor with Inline Editing and Syntax Highlighting

[MohitGupta14]

#Description 📣

This PR adds a Monaco-based code editor to the secrets editor, addressing Issue #2915.

#Key features implemented:

• Integrated Monaco Editor with a custom dark theme for consistency with Infisical’s UI.
• Enabled syntax highlighting and auto-indentation for JSON, YAML, and .env files.
• Added basic error highlighting (e.g., unmatched brackets, invalid syntax).
• Improved overall UX by allowing users to edit secrets directly without switching to an external IDE.

This work is complete and ready for review ✅.

Type ✨

• New feature

Tests 🛠️

• Demo Recording: [Loom Video](https://www.loom.com/share/3c4cec58a9ae419bad5b0c025ab93a3c?sid=a7a29d24-c709-40c5-bac2-a40edc5e715b) showing the editor in action.

• I have read the [contributing guide](https://infisical.com/docs/contributing/getting-started/overview), agreed and acknowledged the [code of conduct](https://infisical.com/docs/contributing/getting-started/code-of-conduct). 📝

[maidul98]

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

[greptile-apps]

Greptile Summary

This PR introduces a Monaco-based code editor to enhance the secrets editing experience in Infisical. The implementation adds comprehensive code editing capabilities including syntax highlighting, auto-indentation, and error detection for JSON, YAML, and ENV file formats.

The core change replaces the basic TextArea component in PasteSecretEnvModal.tsx with a new CodeEditor component that leverages Monaco Editor (the same editor used in VS Code). The implementation includes:

• New CodeEditor component (/frontend/src/components/v2/CodeEditor/CodeEditor.tsx) with automatic language detection using regex patterns
• Custom ENV language definition registered with Monaco for .env file syntax highlighting
• Dark theme configuration matching Infisical's UI design
• Comprehensive editor features including IntelliSense, bracket matching, auto-completion, and minimap
• Dynamic language switching based on content analysis during editing

The integration replaces the previous simple text input in the secret paste modal, allowing users to edit structured secrets (JSON, YAML, environment variables) with IDE-like functionality directly within the application. This addresses the workflow inefficiency where users previously had to copy secrets to external editors for proper formatting and validation.

The component is properly exported through the v2 component index and includes the @monaco-editor/react dependency addition to support the Monaco integration.

Confidence score: 2/5

• This PR has significant security and performance concerns that could cause production issues
• Score lowered due to regex patterns vulnerable to ReDoS attacks, missing cleanup logic, and potential memory leaks
• Pay close attention to the CodeEditor component implementation, especially regex patterns and useEffect cleanup

Context used:

Context - For better readability, consider splitting complex expressions into multiple variables. (link)

_{5 files reviewed, 4 comments}

_{Edit Code Review Bot Settings | Greptile}

[MohitGupta14]

@greptile review this

[greptile-apps]

Greptile Summary

This review covers only the changes made since the last review, not the entire PR. The most recent changes address the missing newline issue that was flagged in the previous review.

The developer added a trailing newline to the frontend/src/components/v2/CodeEditor/index.tsx file, which is a simple export module that makes the CodeEditor component available throughout the application. This file serves as the entry point for the new Monaco-based code editor functionality that was introduced in this PR.

The CodeEditor component itself provides comprehensive IDE-like features for editing secrets containing structured data (JSON, YAML, ENV files). It includes syntax highlighting, auto-indentation, bracket matching, and error detection capabilities. The implementation uses a singleton pattern for Monaco initialization and includes language auto-detection with a scoring system to determine the appropriate syntax highlighting.

Confidence score: 5/5

• This change is extremely safe to merge as it only adds a missing newline character
• Score reflects a trivial formatting fix that poses zero risk to functionality
• No files require special attention as this is a cosmetic change only

_{2 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[MohitGupta14]

@sheensantoscapadngan could you review this PR?

CC : @akhilmhdh