finished first editor implementation

src/ui/src/components/Ation.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useContext} from "react";
+import React, {useEffect, useState, useContext, useCallback} from "react";
 
 import SlidesList      from "./SlidesList";
 import Mode            from "../models/Mode";
@@ -49,14 +49,14 @@ const Ation = () => {
 
 	const openFile = () => {
 		window.api.openFileDialog();
-	}
+	};
 
-	const toggleEdit = () => {
+	const toggleEdit = useCallback(() => {
 		if (mode === Mode.NORMAL)
 			setMode(Mode.EDIT);
 		else if (mode === Mode.EDIT)
 			setMode(Mode.NORMAL);
-	}
+	}, [mode]);
 
 	return (
 		<>
@@ -65,7 +65,7 @@ const Ation = () => {
 			: (
 				<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath, slideCount : deck.length}}>
 					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
-						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} />
+						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} toggleEdit={toggleEdit} />
 						<SlidesList deck={deck} meta={meta} font={font} />
 						<main className={`main ${mode === Mode.EDIT ? "edit" : ""}`} style={{
 							"--color-hightlight" : meta?.color_highlight || highlightColor,

src/ui/src/components/KeyboardControl.js

@@ -18,6 +18,8 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 		}
 
 		const keyHandler = event => {
+			const commandOrControl = event.metaKey || event.ctrlKey;
+
 			switch(event.key) {
 				case "Escape":
 					setShowTips(false);
@@ -25,7 +27,13 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 				default:
 					break;
 			}
-			if (!mode || !setMode || !deck || !setShowTips)
+			if (!mode || !setMode || !deck || !setShowTips)
+				return;
+
+			if (commandOrControl && event.key === "e")
+				toggleEdit();
+
+			if (mode === Mode.EDIT)
 				return;
 
 			switch (event.key) {
@@ -65,9 +73,6 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 					event.preventDefault();
 					setShowTips(true);
 					break;
-				case "e":
-					toggleEdit();
-					break;
 				default:
 					return;
 			}
@@ -88,7 +93,7 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 			window.removeEventListener("fullscreenchange", fullscreenHandler);
 		}
 
-	}, [slide, setSlide, mode, setMode, deck, setShowTips, openFile]);
+	}, [slide, setSlide, mode, setMode, deck, setShowTips, openFile, toggleEdit]);
 };
 
 export default KeyboardControl;

src/ui/src/components/Tips.js

@@ -6,7 +6,7 @@ const Cheatsheet = Object.freeze([
 	["Open file",          "⌘+O"],
 	["Close file",         "⌘+W"],
 	["Save file",          "⌘+S"],
-	["Toggle editor",      "e"],
+	["Toggle editor",      "⌘+E"],
 	["Next slide",         "→, Page up"],
 	["Last slide",         "←, Page down"],
 	["Black screen out",   "B"],

src/ui/src/components/Toolbar.js

@@ -14,7 +14,7 @@ const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
 		setMode(Mode.PRESENT);
 		setSlide(0);
 		document.documentElement.requestFullscreen();
-	}
+	};
 
 	return (
 		<nav className="toolbar">
@@ -23,7 +23,7 @@ const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
 			<Logo />
 			<button onClick={() => window.api.closeFile()} title="Close file [⌘+W]" disabled={slideCount < 1}><XSquare /></button>
 			<button onClick={() => setShowTips(true)} title="Show tips [TAB]"><InfoCircle /></button>	
-			<button onClick={toggleEdit} title="Toggle editor [e]"><LayoutSplit /></button>	
+			<button onClick={toggleEdit} title="Toggle editor [⌘+E]"><LayoutSplit /></button>	
 			<small>v{version}</small>
 		</nav>
 	);