Describe your feature request
Replit recently patched a bug with the tutorial feature in the IDE. Before, we could embed custom interactive tutorials, which was really cool and helpful. This was done for the Tutorial Jam and it won first place (video here). Now, we can only embed YouTube, Vimeo, and Wistia videos.
What problem(s) would this feature solve?
This would allow users to make better tutorials to help people in templates or to make some very cool projects that can be controlled right inside the Replit IDE.
Explain what you were trying to do when you came across the problem leading to this feature request
Iβ’β’β’β’ββ€ββ’ββ’ββ’ββ’β’β‘β€ββ’β‘ββ€ββ’β£β£β€β’β£ββ’β£β’ββ’ββ’ββ€ββ’β‘β’β£β£β€β’β£ββ‘β€β‘β’β£β£ββ‘β’β’ββ€ββ£ββ€β£ββ’ββ’ββ£ββ‘β€ββ’ββ’ββ’ββ€β’β£β’β£β£ββ£β’ββ’β£β£ββ’ββ’ββ’β‘β’β’ββ€β£ββ’ββ’ββ£ββ’ββ’ββ€β’β£β’β£β£ββ£β‘ββ€β’β’β’β‘ββ€ββ’ββ€β was making a Discord bot template and wanted the tutorial to have a page with an admin page, etc.
How I suggest that Replit fixes this
This is just for Replit engineers to know, and it's also very technical so you don't really have to read it.
Instead of restricting the URLs of the tutorial embed to certain websites, you can do like in the WebView and use Cross-Origin iFrames to prevent the tutorial from accessing the Replit website. Therefore, any URL can be safely put into the tutorial iFrame and no harm can be done.
Hereβs an example of what could be done:
<!-- This first iFrame is Cross-Origin so the JavaScript in the second iFrame can't access the Replit window -->
<iframe src="https://REPL_ID.id.repl.co/__tutorial">
<!-- This iFrame has the actual URL of the tutorial video -->
<iframe src="The tutorial URL"></iframe>
</iframe>