Ghost/ghost/admin/app/components/gh-html-iframe.hbs

<div
    {{did-insert this.replaceIframeContents}}
    {{did-update this.replaceIframeContents @html}}
    ...attributes
>
    <iframe class="w-100 h-100" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>
    <iframe class="w-100 h-100" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>
</div>
Improved rendering/re-rendering of `<GhHtmlIframe>` no issue There was noticeable flickering as content is loaded into the iframe or re-rendered because we show everything from the moment html is injected in, meaning the full loading and layout process is shown. - changed to using two iframes with one being hidden - when `@html` changes we inject the html into the hidden iframe - once all loading finishes on the hidden iframe (or 500ms timeout occurs to account for slower connections) we swap the iframe visibility so we end up switching between two fully (mostly) rendered displays resulting in much less flicker 2021-10-13 14:21:41 +03:00			`<div`
Added basic reset to design preview on nav bar interaction refs https://github.com/TryGhost/Team/issues/1130 - when opening/closing sections or interacting with the general design or custom theme settings we want to switch back to showing the preview so the sidebar acts more like typical navigation and so form changes show their effect 2021-10-11 23:09:42 +03:00			`{{did-insert this.replaceIframeContents}}`
Fixed design preview and settings not updating when changing theme refs https://github.com/TryGhost/Team/issues/1111 We now have a situation where we have modals on modals and we've lost the straightforward built-in "Data down, actions up" communication methods that we'd have workaround across nested routes/controllers. The upshot of that is we didn't have a way to trigger a refresh of the preview when a new theme was activated. - moved the task responsible for fetching preview html from the design modal onto the `theme-management` service and adjusted it to set a tracked `previewHtml` property rather than updating an iframe directly - added a `<GhHtmlIframe>` component that renders a basic iframe element and updates it's contents each time the `@html` argument changes - updated design modal preview to use the new iframe component 2021-10-05 23:32:42 +03:00			`{{did-update this.replaceIframeContents @html}}`
Improved rendering/re-rendering of `<GhHtmlIframe>` no issue There was noticeable flickering as content is loaded into the iframe or re-rendered because we show everything from the moment html is injected in, meaning the full loading and layout process is shown. - changed to using two iframes with one being hidden - when `@html` changes we inject the html into the hidden iframe - once all loading finishes on the hidden iframe (or 500ms timeout occurs to account for slower connections) we swap the iframe visibility so we end up switching between two fully (mostly) rendered displays resulting in much less flicker 2021-10-13 14:21:41 +03:00			`...attributes`
			`>`
			`<iframe class="w-100 h-100" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>`
			`<iframe class="w-100 h-100" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>`
			`</div>`