add portals for modal

package.json

@@ -55,6 +55,7 @@
 		"firebase": "^5.0.4",
 		"preact": "^8.2.6",
 		"preact-compat": "^3.17.0",
+		"preact-portal": "^1.1.3",
 		"preact-router": "^2.5.7",
 		"split.js": "^1.3.5"
 	},

src/components/CssSettingsModal.jsx

@@ -37,6 +37,11 @@ export default class CssSettingsModal extends Component {
 						onBlur={cm => this.props.onChange(cm.getValue())}
 					/>
 				</div>
+				<div class="flex flex-h-end">
+					<button class="btn" onClick={this.props.closeHandler}>
+						Apply and Close
+					</button>
+				</div>
 			</Modal>
 		);
 	}

src/components/Modal.jsx

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import Portal from 'preact-portal';
 
 export default class Modal extends Component {
 	componentDidMount() {
@@ -18,18 +19,23 @@ export default class Modal extends Component {
 		}
 	}
 	componentDidUpdate(prevProps) {
+		if (this.props.show != prevProps.show) {
 			document.body.classList[this.props.show ? 'add' : 'remove'](
 				'overlay-visible'
 			);
-
+			if (this.props.show) {
-		if (this.props.show && !prevProps.show) {
+				// HACK: refs will evaluate on next tick due to portals
+				setTimeout(() => {
 					this.overlayEl.querySelector('.js-modal__close-btn').focus();
+				}, 0);
+			}
 		}
 	}
 	render() {
 		if (!this.props.show) return null;
 
 		return (
+			<Portal into="body">
 				<div
 					class={`${this.props.extraClasses || ''} modal is-modal-visible`}
 					ref={el => (this.overlayEl = el)}
@@ -48,6 +54,7 @@ export default class Modal extends Component {
 						{this.props.children}
 					</div>
 				</div>
+			</Portal>
 		);
 	}
 }

src/components/app.jsx

@@ -34,6 +34,7 @@ import KeyboardShortcutsModal from './KeyboardShortcutsModal';
 import { takeScreenshot } from '../takeScreenshot';
 import AskToImportModal from './AskToImportModal';
 import { Alerts } from './Alerts';
+import Portal from 'preact-portal';
 
 if (module.hot) {
 	require('preact/debug');
@@ -342,10 +343,6 @@ export default class App extends Component {
 			window.searchInput.focus();
 		} else {
 			window.searchInput.value = '';
-			// Give last focused editor, focus again
-			// if (editorWithFocus) {
-			// editorWithFocus.focus();
-			// }
 		}
 		document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
 			'overlay-visible'
@@ -413,12 +410,15 @@ export default class App extends Component {
 		this.setState({ isAddLibraryModalOpen: true });
 	}
 	closeSavedItemsPane() {
-		if (this.editorWithFocus) {
+		document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
-			this.editorWithFocus.focus();
+			'overlay-visible'
-		}
+		);
 		this.setState({
 			isSavedItemPaneOpen: false
 		});
+		if (this.editorWithFocus) {
+			this.editorWithFocus.focus();
+		}
 	}
 	componentDidMount() {
 		document.body.style.height = `${window.innerHeight}px`;
@@ -1095,7 +1095,9 @@ export default class App extends Component {
 					dontAskBtnClickHandler={this.dontAskToImportAnymore.bind(this)}
 				/>
 
+				<Portal into="body">
 					<div class="modal-overlay" />
+				</Portal>
 
 				<svg
 					version="1.1"

src/style.css

@@ -15,7 +15,8 @@ body {
 	font-size: 87.5%;
 	/* speocifically for mobile when keyboard is open */
 	position: relative;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+		sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
 h1 {
@@ -196,7 +197,8 @@ textarea {
 }
 
 .btn--primary {
-	background: var(--color-button) linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px, transparent);
+	background: var(--color-button)
+		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px, transparent);
 	color: white;
 }
 
@@ -566,7 +568,11 @@ body>#demo-frame {
 	margin-left: 10px;
 	padding: 0px 8px;
 	border: 1px solid rgba(0, 0, 0, 0.9);
-	background: linear-gradient( 180deg, rgba(0, 0, 0, 0.5) 0, rgba(255, 255, 255, 0.1) 100%);
+	background: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0.5) 0,
+		rgba(255, 255, 255, 0.1) 100%
+	);
 	/*text-shadow: 0px 1px 1px rgba(0,0,0,1);*/
 	box-shadow: 0 -1px 0px 0 rgba(255, 255, 255, 0.15);
 	text-transform: uppercase;
@@ -832,6 +838,7 @@ body>#demo-frame {
 	transform: translateX(0);
 }
 
+.overlay-visible .modal-overlay,
 .is-modal-visible ~ .modal-overlay,
 .saved-items-pane.is-open ~ .modal-overlay {
 	opacity: 1;
@@ -1440,7 +1447,8 @@ body:not(.is-app) .show-when-app {
 	width: 80px;
 	height: 80px;
 	border-radius: 50%;
-	background: white url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
+	background: white
+		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
 }
 
 .bookmarklet {

yarn.lock

@@ -7597,6 +7597,10 @@ preact-compat@^3.14.3, preact-compat@^3.17.0:
     prop-types "^15.5.8"
     standalone-react-addons-pure-render-mixin "^0.1.1"
 
+preact-portal@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/preact-portal/-/preact-portal-1.1.3.tgz#22cdd3ecf6ad9aaa3f830607a9c6591de90aedb7"
+
 preact-render-spy@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/preact-render-spy/-/preact-render-spy-1.3.0.tgz#f64b83f4de33d9696e69e5b08c4ae5e29decd6d1"