Introduce Code Mirror editing of templates in the debug tool

To start with I have added the codeMirror editor inside the debug tool with a random twig template for editing.

So currently this MR contains 2 approaches:-
1)24644f4c commit adds the codeMirror as a standalone app which is not integrated with Drupal.
2)In the second approach i have used this codeMirror wrapper and added to the debug tool.This also loads the twig templates in the codeMirrror dynamically as soon as an element rendered with twig is clicked.

Re #5 this will ultimately need to have the ability to load and save files. For the time being, this might be easiest to accomplish by having the Codemirror integration run as a standalone Vite application so fs can be used. Eventually it would be nice to not have a separate app running on a different port - perhaps the file edits/saves can happen via server side endpoints. That could happen here but it could also happen in a followup.

yash.rode → made their first commit to this issue’s fork.

We are not able to read using fs so we have used fetch to do so. In the Stand alone react app we are able to read a file, within the react app. what should be the next step on this?

We are not able to read using fs so we have used fetch to do so. In the Stand alone react app we are able to read a file, within the react app. what should be the next step on this?

Create a Drupal controller that returns the contents of the file requested (probably have the path as a query arg?), and return it as JSON. That controller implementation doesn't have to have major access restructions for the time being, but it should only allow loading of files with the extensions related to Twig and JSX templates.

Added the controller for fetching the files from Drupal.Currently the MR is rendering on the twig files which are overriden in umami_jsx theme.

I might be missing something obvious, but I'm not sure how to manually test this (so far everything has been based on just looking at the code). Can someone document some basic steps to do this? It's possible something else on my local is making this unavailable - running dev or build in web/themes/contrib/jsx/modules/jsx_devel/codeMirror results in an error, but perhaps that's not even what I'm supposed to be doing. Excited to see what has been built!

Steps to get the codeMirror running in the debug tool:-
1) cd web/themes/contrib/jsx/modules/jsx_devel/app
2) npm install
3)npm run build
4) Open the twig mode.
Now yo can get the codeMirror once you select the component to edit and then click the Edit button.