self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

Desktop: Fixes #3286: Disable editor toolbar when editor is not in focus

Browse Source
This commit is contained in:
Laurent Cozic 2020-06-01 21:01:10 +00:00
parent 3b40de1962
commit 3f1c9c989b
7 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -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

1
.gitignore vendored
View File

@ -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

6
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx
View File

@ -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) {
<Toolbar
theme={props.theme}
dispatch={props.dispatch}
disabled={!focused}
/>
{props.noteToolbar}
</div>

3
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx
View File

@ -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 <ToolbarBase style={styles.root} items={createToolbarItems()} />;
return <ToolbarBase disabled={props.disabled} style={styles.root} items={createToolbarItems()} />;
}

15
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useFocus.ts Normal file
View File

@ -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 };
}

2
ElectronClient/gui/Toolbar.jsx
View File

@ -35,6 +35,8 @@ class ToolbarComponent extends React.Component {
o
);
if (this.props.disabled) props.disabled = true;
if (itemType === 'button') {
itemComps.push(<ToolbarButton {...props} />);
} else if (itemType === 'separator') {

5
ElectronClient/gui/ToolbarButton.jsx
View File

@ -20,7 +20,10 @@ class ToolbarButton extends React.Component {
icon = <i style={iconStyle} className={`fas ${this.props.iconName}`}></i>;
}
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');