From b29a8ed78a77af07ca1442fdbed59eaf5910f289 Mon Sep 17 00:00:00 2001
From: Michael Ochmann <michael.ochmann@propeller.de>
Date: Sat, 3 Feb 2024 00:05:34 +0100
Subject: [PATCH] finished first editor implementation

---
 src/ui/src/components/Ation.js           | 10 +++++-----
 src/ui/src/components/KeyboardControl.js | 15 ++++++++++-----
 src/ui/src/components/Tips.js            |  2 +-
 src/ui/src/components/Toolbar.js         |  4 ++--
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js
index aa91ad8..233485c 100644
--- a/src/ui/src/components/Ation.js
+++ b/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,
diff --git a/src/ui/src/components/KeyboardControl.js b/src/ui/src/components/KeyboardControl.js
index 314a789..6ace6dd 100644
--- a/src/ui/src/components/KeyboardControl.js
+++ b/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;
\ No newline at end of file
diff --git a/src/ui/src/components/Tips.js b/src/ui/src/components/Tips.js
index de9c84e..37faa38 100644
--- a/src/ui/src/components/Tips.js
+++ b/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"],
diff --git a/src/ui/src/components/Toolbar.js b/src/ui/src/components/Toolbar.js
index 2bf4a10..d64c392 100644
--- a/src/ui/src/components/Toolbar.js
+++ 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>
 	);