From f4092c08243f2263b37afd6232f07bd5132263ab Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Wed, 3 Jun 2020 23:59:45 +0100
Subject: [PATCH] Desktop: Dev fix: Only disable editor toolbar in preview mode

Reverts 468261906a4e4b9e0675c0ea8325870e37c16900

Disabling the toolbar when the editor is not in focus means it
was disabled when trying to click on one of the button, because
the editor loses focus before the click event is processed.
---
 .../NoteEditor/NoteBody/AceEditor/AceEditor.tsx   | 11 ++++-------
 .../NoteBody/AceEditor/utils/useFocus.ts          | 15 ---------------
 2 files changed, 4 insertions(+), 22 deletions(-)
 delete mode 100644 ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts

diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx
index 49c256b184..55dfa8240f 100644
--- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx
+++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx
@@ -7,7 +7,6 @@ import { commandAttachFileToBody, handlePasteEvent } from '../../utils/resourceH
 import { ScrollOptions, ScrollOptionTypes } from '../../utils/types';
 import { textOffsetToCursorPosition, useScrollHandler, useRootWidth, usePrevious, lineLeftSpaces, selectionRange, selectionRangeCurrentLine, selectionRangePreviousLine, currentTextOffset, textOffsetSelection, selectedText } from './utils';
 import useListIdent from './utils/useListIdent';
-import useFocus from './utils/useFocus';
 import Toolbar from './Toolbar';
 import styles_ from './styles';
 import { RenderedBody, defaultRenderedBody } from './utils/types';
@@ -553,8 +552,6 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
 		}
 	}, [props.searchMarkers, renderedBody]);
 
-	const { focused, onBlur, onFocus } = useFocus();
-
 	const cellEditorStyle = useMemo(() => {
 		const output = { ...styles.cellEditor };
 		if (!props.visiblePanes.includes('editor')) {
@@ -590,6 +587,8 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
 		return output;
 	}, [styles.cellViewer, props.visiblePanes]);
 
+	const editorReadOnly = props.visiblePanes.indexOf('editor') < 0;
+
 	function renderEditor() {
 		// Need to hard-code the editor width, otherwise various bugs pops up
 		let width = 0;
@@ -603,13 +602,11 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
 					value={props.content}
 					mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'text' : 'markdown'}
 					theme={styles.editor.editorTheme}
-					onFocus={onFocus}
-					onBlur={onBlur}
 					style={styles.editor}
 					width={`${width}px`}
 					fontSize={styles.editor.fontSize}
 					showGutter={false}
-					readOnly={props.visiblePanes.indexOf('editor') < 0}
+					readOnly={editorReadOnly}
 					name="note-editor"
 					wrapEnabled={true}
 					onScroll={editor_scroll}
@@ -654,7 +651,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
 				<Toolbar
 					theme={props.theme}
 					dispatch={props.dispatch}
-					disabled={!focused}
+					disabled={editorReadOnly}
 				/>
 				{props.noteToolbar}
 			</div>
diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts
deleted file mode 100644
index 7e13239621..0000000000
--- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useState, useCallback } from 'react';
-
-export default function useFocus() {
-	const [focused, setFocused] = useState(false);
-
-	const onFocus = useCallback(() => {
-		setFocused(true);
-	}, []);
-
-	const onBlur = useCallback(() => {
-		setFocused(false);
-	}, []);
-
-	return { focused, onFocus, onBlur };
-}