lint

client/homebrew/editor/editor.jsx

@@ -1,21 +1,21 @@
-import "./editor.less";
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
-import dedent from "dedent";
+import './editor.less';
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import dedent from 'dedent';
 
-import CodeEditor from "@components/codeEditor/codeEditor.jsx";
-import SnippetBar from "./snippetbar/snippetbar.jsx";
-import MetadataEditor from "./metadataEditor/metadataEditor.jsx";
+import CodeEditor from '@components/codeEditor/codeEditor.jsx';
+import SnippetBar from './snippetbar/snippetbar.jsx';
+import MetadataEditor from './metadataEditor/metadataEditor.jsx';
 
-const EDITOR_THEME_KEY = "HB_editor_theme";
+const EDITOR_THEME_KEY = 'HB_editor_theme';
 
-import defaultCM5Theme from "@themes/codeMirror/default.js";
-import darkbrewery from "@themes/codeMirror/darkbrewery.js";
-import cm5Themes from "codemirror-5-themes";
+import defaultCM5Theme from '@themes/codeMirror/default.js';
+import darkbrewery from '@themes/codeMirror/darkbrewery.js';
+import cm5Themes from 'codemirror-5-themes';
 
 const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
 
 const EditorThemes = Object.entries(themes)
-	.filter(([name, value]) => Array.isArray(value) && !name.endsWith("Init") && !name.endsWith("Style"))
+	.filter(([name, value])=>Array.isArray(value) && !name.endsWith('Init') && !name.endsWith('Style'))
 	.map(([name])=>name);
 
 //const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
@@ -49,8 +49,8 @@ const Editor = forwardRef(
 			onCursorPageChange = ()=>{},
 			onViewPageChange = ()=>{},
 
-			editorTheme = "default",
-			renderer = "legacy",
+			editorTheme = 'default',
+			renderer = 'legacy',
 
 			moveBrew,
 			moveSource,
@@ -69,43 +69,37 @@ const Editor = forwardRef(
 		ref,
 	)=>{
 		const [currentEditorTheme, setEditorTheme] = useState(editorTheme);
-		const [view, setView] = useState("text"); // 'text', 'style', 'meta', 'snippet'
+		const [view, setView] = useState('text'); // 'text', 'style', 'meta', 'snippet'
 		const [snippetBarHeight, setSnippetBarHeight] = useState(26);
 
 		const editor = useRef(null);
 		const codeEditor = useRef(null);
 		const throttleBrewMove = useRef(null);
 
-		const isText = () => {
-			return view === "text";
-		};
-		const isStyle = () => {
-			return view === "style";
-		};
-		const isMeta = () => {
-			return view === "meta";
-		};
-		const isSnip = () => {
-			return view === "snippet";
-		};
+		const isText = ()=>isView('text');
+		const isStyle = ()=>isView('style');
+		const isMeta = ()=>isView('meta');
+		const isSnip = ()=>isView('snippet');
+
+		const isView = (name)=>view === name;
 
 		//componentDidMount equivalent
 		useEffect(()=>{
-			const brewRenderer = document.getElementById("BrewRenderer");
-			brewRenderer.onload = () => brewRenderer.contentDocument?.addEventListener("keydown", handleControlKeys);
-			document.addEventListener("keydown", handleControlKeys);
+			const brewRenderer = document.getElementById('BrewRenderer');
+			brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', handleControlKeys);
+			document.addEventListener('keydown', handleControlKeys);
 
 			const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 			if(editorTheme && EditorThemes.includes(editorTheme)) {
 				setEditorTheme(editorTheme);
 			} else {
-				setEditorTheme("default");
+				setEditorTheme('default');
 			}
-			const snippetBar = document.querySelector(".editor > .snippetBar");
+			const snippetBar = document.querySelector('.editor > .snippetBar');
 			if(!snippetBar) return;
 
 			const resizeObserver = new ResizeObserver((entries)=>{
-				const height = document.querySelector(".editor > .snippetBar").offsetHeight;
+				const height = document.querySelector('.editor > .snippetBar').offsetHeight;
 				setSnippetBarHeight(height);
 			});
 
@@ -187,7 +181,7 @@ const Editor = forwardRef(
 		};
 
 		const handleViewChange = (newView)=>{
-			setMoveArrows(newView === "text");
+			setMoveArrows(newView === 'text');
 			setView(newView);
 		};
 
@@ -196,14 +190,14 @@ const Editor = forwardRef(
 		}, [view]);
 
 		const brewJump = (targetPage = currentEditorCursorPageNum, smooth = true)=>{
-			if (!window || !isText() || isJumping || jumpSource === "source") return;
+			if(!window || !isText() || isJumping || jumpSource === 'source') return;
 
 			const brewRenderer =
-				window.frames["BrewRenderer"].contentDocument.getElementsByClassName("brewRenderer")[0];
+				window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 
 			const currentPos = brewRenderer.scrollTop;
 
-			const targetPos = window.frames["BrewRenderer"].contentDocument
+			const targetPos = window.frames['BrewRenderer'].contentDocument
 				.getElementById(`p${targetPage}`)
 				.getBoundingClientRect().top;
 
@@ -216,16 +210,16 @@ const Editor = forwardRef(
 					isJumping = false;
 					jumpSource = null;
 
-					brewRenderer.removeEventListener("scroll", checkIfScrollComplete);
+					brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
 				}, 150);
 			};
 
 			isJumping = true;
-			jumpSource = "brew";
+			jumpSource = 'brew';
 
 			checkIfScrollComplete();
 
-			brewRenderer.addEventListener("scroll", checkIfScrollComplete);
+			brewRenderer.addEventListener('scroll', checkIfScrollComplete);
 
 			if(smooth) {
 				const bouncePos = targetPos >= 0 ? -30 : 30;
@@ -237,14 +231,14 @@ const Editor = forwardRef(
 						(currentPos, bouncePos, targetPos)=>{
 							brewRenderer.scrollTo({
 								top      : currentPos + bouncePos,
-								behavior: "smooth",
+								behavior : 'smooth',
 							});
 
 							setTimeout(()=>{
 								brewRenderer.scrollTo({
 									top      : currentPos + targetPos,
-									behavior: "smooth",
-									block: "start",
+									behavior : 'smooth',
+									block    : 'start',
 								});
 							}, bounceDelay);
 						},
@@ -260,18 +254,18 @@ const Editor = forwardRef(
 			} else {
 				brewRenderer.scrollTo({
 					top      : currentPos + targetPos,
-					behavior: "instant",
-					block: "start",
+					behavior : 'instant',
+					block    : 'start',
 				});
 			}
 		};
 
 		const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true)=>{
-			if (!isText() || isJumping || jumpSource === "brew") return;
+			if(!isText() || isJumping || jumpSource === 'brew') return;
 
 			const editor = codeEditor.current;
 			if(!editor) return;
-			jumpSource = "source";
+			jumpSource = 'source';
 
 			editor.scrollToPage(targetPage);
 			setTimeout(()=>{
@@ -289,13 +283,13 @@ const Editor = forwardRef(
 				return (
 					<>
 						<CodeEditor
-							key="codeEditor"
+							key='codeEditor'
 							ref={codeEditor}
-							language="gfm"
-							tab="brewText"
+							language='gfm'
+							tab='brewText'
 							view={view}
 							value={brew.text}
-							onChange={onBrewChange("text")}
+							onChange={onBrewChange('text')}
 							onCursorChange={(page)=>updateCurrentCursorPage(page)}
 							onViewChange={(page)=>updateCurrentViewPage(page)}
 							editorTheme={currentEditorTheme}
@@ -309,13 +303,13 @@ const Editor = forwardRef(
 				return (
 					<>
 						<CodeEditor
-							key="codeEditor"
+							key='codeEditor'
 							ref={codeEditor}
-							language="css"
-							tab="brewStyles"
+							language='css'
+							tab='brewStyles'
 							view={view}
 							value={brew.style ?? DEFAULT_STYLE_TEXT}
-							onChange={onBrewChange("style")}
+							onChange={onBrewChange('style')}
 							editorTheme={currentEditorTheme}
 							renderer={brew.renderer}
 							style={{ height: `calc(100% - ${snippetBarHeight}px)` }}
@@ -326,11 +320,11 @@ const Editor = forwardRef(
 			if(isMeta()) {
 				return (
 					<>
-						<CodeEditor key="codeEditor" view={view} style={{ display: "none" }} />
+						<CodeEditor key='codeEditor' view={view} style={{ display: 'none' }} />
 						<MetadataEditor
 							metadata={brew}
 							themeBundle={themeBundle}
-							onChange={onBrewChange("metadata")}
+							onChange={onBrewChange('metadata')}
 							reportError={reportError}
 							userThemes={userThemes}
 						/>
@@ -344,13 +338,13 @@ const Editor = forwardRef(
 				return (
 					<>
 						<CodeEditor
-							key="codeEditor"
+							key='codeEditor'
 							ref={codeEditor}
-							language="gfm"
-							tab="brewSnippets"
+							language='gfm'
+							tab='brewSnippets'
 							view={view}
 							value={brew.snippets}
-							onChange={onBrewChange("snippets")}
+							onChange={onBrewChange('snippets')}
 							enableFolding={true}
 							editorTheme={currentEditorTheme}
 							renderer={brew.renderer}
@@ -392,7 +386,7 @@ const Editor = forwardRef(
 		}));
 
 		return (
-			<div className="editor" ref={editor}>
+			<div className='editor' ref={editor}>
 				<SnippetBar
 					brew={brew}
 					view={view}