diff --git a/changelog.md b/changelog.md index 4ecc8e099..81ce5fd68 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,8 @@ # changelog +### Thursday, 22/10/2020 - v2.10.3 +- Fixed brews with broken code crashing the edit page when loaded (the "blue screen of death" bug). + ### Monday, 19/10/2020 - v2.10.2 - Fixed issue with "recent" item links not updating when transferring between Google Drive. diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 2bbc2f1fa..e01e5f88f 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -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,19 @@ const BrewRenderer = createClass({ height : 0, isMounted : false, - pages : pages, - usePPR : pages.length >= PPR_THRESHOLD, + pages : pages, + usePPR : pages.length >= PPR_THRESHOLD, + visibility : 'hidden', + initialContent : ` + + + +
` }; }, height : 0, lastRender :
, - componentDidMount : function() { - this.updateSize(); - window.addEventListener('resize', this.updateSize); - }, componentWillUnmount : function() { window.removeEventListener('resize', this.updateSize); }, @@ -54,8 +57,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 +89,7 @@ const BrewRenderer = createClass({ }, renderPageInfo : function(){ - return
+ return
{this.state.viewablePageNumber + 1} / {this.state.pages.length}
; }, @@ -125,24 +129,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 ( -
+ +
- -
- - -
+ +
+ + +
-
- {this.renderPages()} +
+ {this.renderPages()} +
-
; + {this.renderPageInfo()} {this.renderPPRmsg()} diff --git a/package-lock.json b/package-lock.json index fbcbdc466..def592ca9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "homebrewery", - "version": "2.10.2", + "version": "2.10.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5829,6 +5829,11 @@ } } }, + "react-frame-component": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.3.tgz", + "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==" + }, "react-is": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", diff --git a/package.json b/package.json index bed7f2c9e..58307d362 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "homebrewery", "description": "Create authentic looking D&D homebrews using only markdown", - "version": "2.10.2", + "version": "2.10.3", "engines": { "node": "12.16.x" }, @@ -63,6 +63,7 @@ "query-string": "6.13.5", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-frame-component": "4.1.3", "react-router-dom": "5.2.0", "superagent": "^6.1.0", "vitreum": "github:calculuschild/vitreum#21a8e1c9421f1d3a3b474c12f480feb2fbd28c5b" diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index a85674663..1da8ea7f4 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -54,7 +54,7 @@ const SplitPane = createClass({ }, */ renderDivider : function(){ - return
+ return
@@ -67,16 +67,11 @@ const SplitPane = createClass({ return
{this.props.children[0]} {this.renderDivider()} - {this.props.children[1]} + {this.props.children[1]}
; } }); - - - - - const Pane = createClass({ getDefaultProps : function() { return { @@ -90,12 +85,16 @@ const Pane = createClass({ flex : 'none', width : `${this.props.width}px` }; + } else { + styles = { + pointerEvents : this.props.isDragging ? 'none' : 'auto' //Disable mouse capture in the rightmost pane; dragging into the iframe drops the divider otherwise + }; } + return
{this.props.children}
; } }); - module.exports = SplitPane;