Remove dom access for runBtn

src/components/MainHeader.jsx

@@ -7,6 +7,11 @@ const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
 
 export function MainHeader(props) {
+	const isAutoPreviewOn =
+		window.forcedSettings.autoPreview !== undefined
+			? window.forcedSettings
+			: props.isAutoPreviewOn;
+
 	return (
 		<I18n>
 			{({ i18n }) => (
@@ -20,19 +25,20 @@ export function MainHeader(props) {
 						onBlur={props.titleInputBlurHandler}
 					/>
 					<div class="main-header__btn-wrap  flex  flex-v-center">
-						<button
-							id="runBtn"
-							class="hide btn btn btn--dark flex flex-v-center hint--rounded hint--bottom-left"
-							aria-label={i18n._(t`Run preview (Ctrl/⌘ + Shift + 5)`)}
-							onClick={props.runBtnClickHandler}
-						>
-							<svg>
-								<use xlinkHref="#play-icon" />
-							</svg>
-							<Trans>Run</Trans>
-						</button>
+						{!isAutoPreviewOn && (
+							<button
+								class="btn btn btn--dark flex flex-v-center hint--rounded hint--bottom-left"
+								aria-label={i18n._(t`Run preview (Ctrl/⌘ + Shift + 5)`)}
+								onClick={props.runBtnClickHandler}
+							>
+								<svg>
+									<use xlinkHref="#play-icon" />
+								</svg>
+								<Trans>Run</Trans>
+							</button>
+						)}
 
-						{!this.props.isFileMode && (
+						{!props.isFileMode && (
 							<Button
 								onClick={props.addLibraryBtnHandler}
 								data-event-category="ui"

src/components/app.jsx

@@ -1,4 +1,4 @@
-/* global htmlCodeEl, cssCodeEl, jsCodeEl, runBtn
+/* global htmlCodeEl, cssCodeEl, jsCodeEl
  */
 
 import { h, Component } from 'preact';
@@ -973,12 +973,6 @@ export default class App extends Component {
 		}
 
 		const prefs = this.state.prefs;
-		// Show/hide RUN button based on autoPreview setting.
-		let autoPreview =
-			window.forcedSettings.autoPreview !== undefined
-				? window.forcedSettings
-				: prefs.autoPreview;
-		runBtn.classList[autoPreview ? 'add' : 'remove']('hide');
 
 		this.contentWrap.applyCodemirrorSettings(this.state.prefs);
 
@@ -1594,6 +1588,7 @@ export default class App extends Component {
 							title={this.state.currentItem.title}
 							titleInputBlurHandler={this.titleInputBlurHandler.bind(this)}
 							user={this.state.user}
+							isAutoPreviewOn={this.state.prefs.autoPreview}
 							unsavedEditCount={this.state.unsavedEditCount}
 							isFileMode={
 								this.state.currentItem && this.state.currentItem.files