Hey.

I'm not sure it is a good place for the preview, as the output may break the overall UI. Maybe we can add an additional tab and the user will click on it to see the preview? What do you think?

Example for single code output:

p.s. as a future enhancement - I think it is better to use iframe for such previews, but I'm not sure yet if it's worth bothering.

As for the tab I am not sure if it is that helpful. The great thing about doing a preview there, is it live updates. So you know when you have an issue and you can see the look and feel as you type. I was constantly updating a block and switching to a post to see if it looked good, and the same thing would happen here, ie. clicking back and forth between tabs.

Also if the UI is going to break putting it in a tab to prevent it is not an adequate solution. Since it is at the end of the page, a missing tag or bracket shouldn't affect to much, but I agree an iframe solution is better as it would prevent bad code from affecting the parent page.

I have added the an iframe for the preview in the last commit. I have also thrown an error boundary around the preview component. The boundary should prevent an issues that might pop up from the preview functionality, and the iframe should prevent any html issues.

Thank you. I really appreciate your help.

Let's move preview here maybe? The boxes will be visually delimited and will not interfere with each other:

p.s. you already did a great job, and this change I can make by myself. Just let me know if this preview position will be good for your type of work? I personally, in most cases, don't need to see this preview at all, but I understand that for other users it may be helpful.

Not a problem, that works for me. Feel free to modify it, otherwise ill try to get the change in within the next couple days.