New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML examples: output escapes from its pane #706

Closed
wbamberg opened this Issue Apr 12, 2018 · 10 comments

Comments

@wbamberg
Member

wbamberg commented Apr 12, 2018

CSS added to the CSS pane are applied to the entire page, not just the output:

html-examples-escape

Similarly, clicking links loads the page into the entire example, not just the output:

html-examples-escape-2

@a2sheppy

This comment has been minimized.

Collaborator

a2sheppy commented Apr 17, 2018

Couldn't this be solved by just making it so the editing is in one iframe and the output is in a second iframe, and the editor periodically updates the HTML or CSS contained in the iframe? That shouldn't be hard to do, in theory, although I don't know details of the implementation already in place.

@chrisdavidmills

This comment has been minimized.

Contributor

chrisdavidmills commented Apr 17, 2018

Or could you do it so that the CSS applied to the output is put through an intermediary stage where it has a namespacing selector put at the start of the chain in each case, like .output-pane ?

@a2sheppy

This comment has been minimized.

Collaborator

a2sheppy commented Apr 17, 2018

@chrisdavidmills The trick there is that once scripting gets involved in these examples, which eventually we're going to need to be able to do (add a "JavaScript" tab with code that runs on the example content), making any changes to the selector chain can break the script.

@chrisdavidmills

This comment has been minimized.

Contributor

chrisdavidmills commented Apr 18, 2018

@a2sheppy yeah, I guess it does get tricky at that point. I would love to find time to play with this.

@schalkneethling

This comment has been minimized.

Collaborator

schalkneethling commented Apr 18, 2018

@a2sheppy I was thinking another iframe as well at first but, that means a different doc to use as the source. We also need to be sure we do not run into scripting issues where we are prevented from updating the CSS and HTML. Currently updates to this happens almost instantly(200ms delay once you stop typing) as you type.

While it is not impossible to generate two separate docs, it will make authoring and testing these locally... hard ;)

@chrisdavidmills I also thought of preprocessing but, once someone chains a couple of selectors i.e. .class .another .another, .someother { ... } things can quickly become fragile. We also need to constantly be aware of the over all byte size to avoid performance issues.

One solution that would work great is using shadow DOM for the output but, unfortunately only Chrome has support for it currently :(

@schalkneethling

This comment has been minimized.

Collaborator

schalkneethling commented Apr 18, 2018

The link portion of this is easy thankfully. I am simply going to attach an event listener to the output container and listen for any clicks on an anchor link that has a value that starts with at least http.

Once this happens, preventDefault and call window.open(url);

@chrisdavidmills

This comment has been minimized.

Contributor

chrisdavidmills commented Apr 18, 2018

One solution that would work great is using shadow DOM for the output but, unfortunately only Chrome has support for it currently :(

Could you use Polymer to polyfill it? I guess performance is then an issue.

@schalkneethling

This comment has been minimized.

Collaborator

schalkneethling commented Apr 18, 2018

@chrisdavidmills I will have a look at the weight it will add to the component. Thanks for the suggestion.

@a2sheppy

This comment has been minimized.

Collaborator

a2sheppy commented Apr 18, 2018

Yet another reason to regret that shadow DOM has taken so long to get widely implemented.

Makes me wish the <div> element had a sandbox attribute, to allow you to tell the browser to basically treat it like a mini-iframe. :)

@schalkneethling

This comment has been minimized.

Collaborator

schalkneethling commented May 10, 2018

Being worked on here: #860 - Closing as duplicate.

All the Boogz automation moved this from In progress to Done May 10, 2018

interactive editor v2 automation moved this from Backlog to Done May 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment