Make RTL optional

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}
         />
         <MarkdownPreview
+          ref={this.previewRef}
           styleName={
             this.state.status === 'PREVIEW' ? 'preview' : 'preview--hide'
           }
@@ -397,7 +405,6 @@ class MarkdownEditor extends React.Component {
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
-          ref='preview'
           onContextMenu={e => this.handleContextMenu(e)}
           onDoubleClick={e => this.handleDoubleClick(e)}
           tabIndex='0'

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)

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}
           />
-          <ToggleDirectionButton
-            onClick={e => this.handleSwitchDirection(e)}
-            isRTL={this.state.RTL}
-          />
+          {this.props.config.editor.rtlEnabled && (
+            <ToggleDirectionButton
+              onClick={e => this.handleSwitchDirection(e)}
+              isRTL={this.state.RTL}
+            />
+          )}
           <StarButton
             onClick={e => this.handleStarButtonClick(e)}
             isActive={note.isStarred}

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',

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 {
               )}
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input
+                onChange={e => this.handleUIChange(e)}
+                checked={this.state.config.editor.rtlEnabled}
+                ref='rtlEnabled'
+                type='checkbox'
+              />
+              &nbsp;
+              {i18n.__('Enable right to left direction(RTL)')}
+            </label>
+          </div>
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>