From 3f1c9c989b7190f0cda7bceff923557e92a7b165 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Mon, 1 Jun 2020 21:01:10 +0000 Subject: [PATCH] Desktop: Fixes #3286: Disable editor toolbar when editor is not in focus --- .eslintignore | 1 + .gitignore | 1 + .../NoteEditor/NoteBody/AceEditor/AceEditor.tsx | 6 ++++++ .../gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx | 3 ++- .../NoteBody/AceEditor/utils/useFocus.ts | 15 +++++++++++++++ ElectronClient/gui/Toolbar.jsx | 2 ++ ElectronClient/gui/ToolbarButton.jsx | 5 ++++- 7 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts diff --git a/.eslintignore b/.eslintignore index 443d34d99..cef63e252 100644 --- a/.eslintignore +++ b/.eslintignore @@ -68,6 +68,7 @@ ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js +ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useListIdent.js ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js diff --git a/.gitignore b/.gitignore index 75b322edc..bb67c6c31 100644 --- a/.gitignore +++ b/.gitignore @@ -58,6 +58,7 @@ ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js +ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.js ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useListIdent.js ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx index 589f79e26..1553eaf08 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx @@ -7,6 +7,7 @@ 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'; @@ -544,6 +545,8 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) { } }, [props.searchMarkers, renderedBody]); + const { focused, onBlur, onFocus } = useFocus({ editor }); + const cellEditorStyle = useMemo(() => { const output = { ...styles.cellEditor }; if (!props.visiblePanes.includes('editor')) { @@ -592,6 +595,8 @@ 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} @@ -641,6 +646,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) { {props.noteToolbar} diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx index a813e79ea..e6eaa7dfb 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx @@ -7,6 +7,7 @@ const { buildStyle, themeStyle } = require('../../../../theme.js'); interface ToolbarProps { theme: number, dispatch: Function, + disabled: boolean, } function styles_(props:ToolbarProps) { @@ -164,5 +165,5 @@ export default function Toolbar(props:ToolbarProps) { return toolbarItems; } - return ; + return ; } diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts new file mode 100644 index 000000000..7e1323962 --- /dev/null +++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts @@ -0,0 +1,15 @@ +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 }; +} diff --git a/ElectronClient/gui/Toolbar.jsx b/ElectronClient/gui/Toolbar.jsx index f70ed9336..8d5522179 100644 --- a/ElectronClient/gui/Toolbar.jsx +++ b/ElectronClient/gui/Toolbar.jsx @@ -35,6 +35,8 @@ class ToolbarComponent extends React.Component { o ); + if (this.props.disabled) props.disabled = true; + if (itemType === 'button') { itemComps.push(); } else if (itemType === 'separator') { diff --git a/ElectronClient/gui/ToolbarButton.jsx b/ElectronClient/gui/ToolbarButton.jsx index d297fccdc..ab9f9663b 100644 --- a/ElectronClient/gui/ToolbarButton.jsx +++ b/ElectronClient/gui/ToolbarButton.jsx @@ -20,7 +20,10 @@ class ToolbarButton extends React.Component { icon = ; } - const isEnabled = !('enabled' in this.props) || this.props.enabled === true; + // Keep this for legacy compatibility but for consistency we should use "disabled" prop + let isEnabled = !('enabled' in this.props) || this.props.enabled === true; + if (this.props.disabled) isEnabled = false; + const classes = ['button']; if (!isEnabled) classes.push('disabled');