f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-30 00:12:56 +00:00
Code Wiki Activity

Render brew in Iframe to not crash editor

Browse Source
This commit is contained in:
Trevor Buckner
2020-10-21 20:39:43 -04:00
parent ac2d6fe9a8
commit c75ac3c0f5
4 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -10,6 +10,7 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
//TODO: move to the brew renderer
const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
const Frame = require('react-frame-component').default;
const PAGE_HEIGHT = 1056;
const PPR_THRESHOLD = 50;
@@ -29,17 +30,15 @@ const BrewRenderer = createClass({
height : 0,
isMounted : false,
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD,
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD,
visibility : 'hidden',
initialContent : `<!DOCTYPE html><html><head><link href='/homebrew/bundle.css' rel='stylesheet'></link></head><body style='overflow: hidden'><div></div></body></html>`
};
},
height : 0,
lastRender : <div></div>,
componentDidMount : function() {
this.updateSize();
window.addEventListener('resize', this.updateSize);
},
componentWillUnmount : function() {
window.removeEventListener('resize', this.updateSize);
},
@@ -54,8 +53,9 @@ const BrewRenderer = createClass({
updateSize : function() {
this.setState({
height : this.refs.main.parentNode.clientHeight,
isMounted : true
height : this.refs.main.parentNode.clientHeight,
isMounted : true,
visibility : 'visible'
});
},
@@ -85,7 +85,7 @@ const BrewRenderer = createClass({
},
renderPageInfo : function(){
return <div className='pageInfo'>
return <div className='pageInfo' ref='main'>
{this.state.viewablePageNumber + 1} / {this.state.pages.length}
</div>;
},
@@ -125,24 +125,33 @@ const BrewRenderer = createClass({
return this.lastRender;
},
frameDidMount : function(){ //This triggers when iFrame finishes internal "componentDidMount"
setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
this.updateSize();
window.addEventListener('resize', this.updateSize);
}, 100);
},
render : function(){
//render in iFrame so broken code doesn't crash the site.
return (
<React.Fragment>
<div className='brewRenderer'
onScroll={this.handleScroll}
ref='main'
style={{ height: this.state.height }}>
<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
<div className='brewRenderer'
onScroll={this.handleScroll}
style={{ height: this.state.height }}>
<ErrorBar errors={this.props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
<ErrorBar errors={this.props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
<div className='pages' ref='pages'>
{this.renderPages()}
<div className='pages' ref='pages'>
{this.renderPages()}
</div>
</div>
</div>;
</Frame>
{this.renderPageInfo()}
{this.renderPPRmsg()}
</React.Fragment>