Customize blocks using code editor

How to test:

1. Run npm install and drush cr, then npm run drupaldev

2. Add the astro bundled files that are in the /ui/src/components/code-editor/astro-files-see-read-me/ directory to
/sites/default/files/xb/astro/. You do not need to add MenuBlock.js, MenuBlock.css, MenuContent.js, MenuContent.css since this MR can generate and add that for you by going through the below steps. I just included them in case there's trouble with the below steps. But if you want to skip steps 3-4, feel free to add those files too.

2. Drag a main navigation to your canvas from the Library tab in the primary panel. Or you can create your own menu to test in Drupal and drag that in.

3. Go to the tab in the primary menu and click Menu Block and the code editor should open. Click the Upload button in the top bar to add the MenuBlock.js and MenuBlock.css files to your /sites/default/files/xb/astro.

4. Do the same thing for MenuContent in to add MenuContent.js and MenuContent.css to your /sites/default/files/xb/astro.

5. Close the editor by clicking the Menu item in or refreshing (the routing/closing of the menu is not great right now) and you should see your menu in the canvas using the block--system-menu-block--foo.html.twig and menu--foo.html.

Troubleshooting

If you don't see your menus using are *--foo.html.twig templates or you don't see what you expect,

In the Developer Tools in Chrome, in the Console tab there is a dropdown in that bar that allows you to select the frame context in which the console will operate. Select the iframe of the canvas for the console and see if there are any errors. An example error could be the path to the component files and the astro bundled files that the is pointing to might be different on your machine. Or check the network tab to see if there are any 404s for the component files and the astro bundled files it is requesting and check if the path is correct.

Known issue, I wasn't able to look into yet

1. Didn't have enough time to get the preview working for the code editor so that's not working right now.

2. Passing in a React element like like h1 tag with {drupalProps.label} inside to the Title errors out. It looks to be a compatibility issue between how Astro's hydration script handles radix's Slot component.
"[astro-island] Error hydrating /src/components/App.jsx Error: Invalid type passed to createElement():