From 045f4f36befaaa9211d99755b0e0c0ae72399707 Mon Sep 17 00:00:00 2001 From: Junyoung Choi Date: Wed, 4 Mar 2020 05:34:35 +0900 Subject: [PATCH 1/2] Fix ref --- browser/components/MarkdownPreview.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 9e7f72287..a2816d65a 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -1226,4 +1226,9 @@ MarkdownPreview.propTypes = { breaks: PropTypes.bool } -export default connect()(MarkdownPreview) +export default connect( + null, + null, + null, + { forwardRef: true } +)(MarkdownPreview) From 2dcd7c827c35903388c0594054c610108123e717 Mon Sep 17 00:00:00 2001 From: Junyoung Choi Date: Wed, 4 Mar 2020 05:35:09 +0900 Subject: [PATCH 2/2] Make rtl optional --- browser/components/MarkdownEditor.js | 23 ++++++++++------ browser/main/Detail/MarkdownNoteDetail.js | 27 ++++++++++++------- browser/main/lib/ConfigManager.js | 5 ++-- browser/main/modals/PreferencesModal/UiTab.js | 15 ++++++++++- 4 files changed, 49 insertions(+), 21 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index a8b888914..d07ffb0e0 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ import PropTypes from 'prop-types' import React from 'react' import CSSModules from 'browser/lib/CSSModules' @@ -29,20 +30,23 @@ class MarkdownEditor extends React.Component { isLocked: props.isLocked } - this.lockEditorCode = () => this.handleLockEditor() + this.lockEditorCode = this.handleLockEditor.bind(this) + this.focusEditor = this.focusEditor.bind(this) + + this.previewRef = React.createRef() } componentDidMount() { this.value = this.refs.code.value eventEmitter.on('editor:lock', this.lockEditorCode) - eventEmitter.on('editor:focus', this.focusEditor.bind(this)) + eventEmitter.on('editor:focus', this.focusEditor) } componentDidUpdate() { this.value = this.refs.code.value } - componentWillReceiveProps(props) { + UNSAFE_componentWillReceiveProps(props) { if (props.value !== this.props.value) { this.queueRendering(props.value) } @@ -51,7 +55,7 @@ class MarkdownEditor extends React.Component { componentWillUnmount() { this.cancelQueue() eventEmitter.off('editor:lock', this.lockEditorCode) - eventEmitter.off('editor:focus', this.focusEditor.bind(this)) + eventEmitter.off('editor:focus', this.focusEditor) } focusEditor() { @@ -60,6 +64,9 @@ class MarkdownEditor extends React.Component { status: 'CODE' }, () => { + if (this.refs.code == null) { + return + } this.refs.code.focus() } ) @@ -104,7 +111,7 @@ class MarkdownEditor extends React.Component { if (newStatus === 'CODE') { this.refs.code.focus() } else { - this.refs.preview.focus() + this.previewRef.current.focus() } eventEmitter.emit('topbar:togglelockbutton', this.state.status) @@ -131,8 +138,8 @@ class MarkdownEditor extends React.Component { status: 'PREVIEW' }, () => { - this.refs.preview.focus() - this.refs.preview.scrollToRow(cursorPosition.line) + this.previewRef.current.focus() + this.previewRef.current.scrollToRow(cursorPosition.line) } ) eventEmitter.emit('topbar:togglelockbutton', this.state.status) @@ -379,6 +386,7 @@ class MarkdownEditor extends React.Component { RTL={RTL} /> this.handleContextMenu(e)} onDoubleClick={e => this.handleDoubleClick(e)} tabIndex='0' diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index e71e78410..d9f5f2564 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ import PropTypes from 'prop-types' import React from 'react' import CSSModules from 'browser/lib/CSSModules' @@ -57,7 +58,8 @@ class MarkdownNoteDetail extends React.Component { this.dispatchTimer = null this.toggleLockButton = this.handleToggleLockButton.bind(this) - this.generateToc = () => this.handleGenerateToc() + this.generateToc = this.handleGenerateToc.bind(this) + this.handleUpdateContent = this.handleUpdateContent.bind(this) } focus() { @@ -76,7 +78,7 @@ class MarkdownNoteDetail extends React.Component { ee.on('code:generate-toc', this.generateToc) } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const isNewNote = nextProps.note.key !== this.props.note.key const hasDeletedTags = nextProps.note.tags.length < this.props.note.tags.length @@ -392,6 +394,9 @@ class MarkdownNoteDetail extends React.Component { } handleSwitchDirection() { + if (!this.props.config.editor.rtlEnabled) { + return + } // If in split mode, hide the lock button const direction = this.state.RTL this.setState({ RTL: !direction }) @@ -436,10 +441,10 @@ class MarkdownNoteDetail extends React.Component { storageKey={note.storage} noteKey={note.key} linesHighlighted={note.linesHighlighted} - onChange={this.handleUpdateContent.bind(this)} + onChange={this.handleUpdateContent} isLocked={this.state.isLocked} ignorePreviewPointerEvents={ignorePreviewPointerEvents} - RTL={this.state.RTL} + RTL={config.editor.rtlEnabled && this.state.RTL} /> ) } else { @@ -451,9 +456,9 @@ class MarkdownNoteDetail extends React.Component { storageKey={note.storage} noteKey={note.key} linesHighlighted={note.linesHighlighted} - onChange={this.handleUpdateContent.bind(this)} + onChange={this.handleUpdateContent} ignorePreviewPointerEvents={ignorePreviewPointerEvents} - RTL={this.state.RTL} + RTL={config.editor.rtlEnabled && this.state.RTL} /> ) } @@ -536,10 +541,12 @@ class MarkdownNoteDetail extends React.Component { onClick={e => this.handleSwitchMode(e)} editorType={editorType} /> - this.handleSwitchDirection(e)} - isRTL={this.state.RTL} - /> + {this.props.config.editor.rtlEnabled && ( + this.handleSwitchDirection(e)} + isRTL={this.state.RTL} + /> + )} this.handleStarButtonClick(e)} isActive={note.isStarred} diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 486785d7b..3a6546d16 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -33,7 +33,7 @@ export const DEFAULT_CONFIG = { hotkey: { toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E', toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M', - toggleDirection: OSX ? 'Command + Alt + Right' : 'Ctrl + Right', + toggleDirection: OSX ? 'Command + Alt + Right' : 'Ctrl + Alt + Right', deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace', @@ -85,7 +85,8 @@ export const DEFAULT_CONFIG = { "semi": false, "singleQuote": true }`, - deleteUnusedAttachments: true + deleteUnusedAttachments: true, + rtlEnabled: false }, preview: { fontSize: '14', diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index b5753d8f3..881bcf3b6 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -127,7 +127,8 @@ class UiTab extends React.Component { .getCodeMirror() .getValue(), prettierConfig: this.prettierConfigCM.getCodeMirror().getValue(), - deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked + deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked, + rtlEnabled: this.refs.rtlEnabled.checked }, preview: { fontSize: this.refs.previewFontSize.value, @@ -742,6 +743,18 @@ class UiTab extends React.Component { )} +
+ +