Refactor template canvas

[marcospassos]

Summary

CSS styles are currently being inserted as plain text, causing React to escape HTML characters and break the styling. This PR updates the logic to inject raw CSS using dangerouslySetInnerHTML, ensuring the styles are applied correctly.

This PR also adds a feature that allows the canvas to self embed the current page, including a Next-specific component.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[github-actions]

👋 @marcospassos
Thanks for your contribution!
The approval and merge process is almost fully automated 🧙
Here's how it works:

1. You open a new pull request
2. Automated tests check the code
3. Maintainers review the code
4. Once approved, the PR is ready to merge.

👉 Omit the extended description
Please remove the commit body before merging the pull request.
Instead, include the pull request number in the title to provide the full context
about the change.

☝️ Lastly, the title for the commit will come from the pull request title. So please provide a descriptive title that summarizes the changes in 50 characters or less using the imperative mood.
Happy coding! 🎉

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@croct/template-ui@18

commit: 59e6c49

[github-actions]

🔥 Here is the preview of the pull request:
https://preview.template-ui.croct.dev/pr-18