diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index fa9924a1..d6d48b36 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -295,7 +295,7 @@ export default class CodeEditor extends React.Component {
       inputStyle: 'textarea',
       dragDrop: false,
       direction: RTL ? 'rtl' : 'ltr',
-      rtlMoveVisually: RTL ? 'true' : 'false',
+      rtlMoveVisually: RTL,
       foldGutter: true,
       lint: enableMarkdownLint ? this.getCodeEditorLintConfig() : false,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
@@ -559,7 +559,7 @@ export default class CodeEditor extends React.Component {
     }
     if (prevProps.RTL !== this.props.RTL) {
       this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr')
-      this.editor.setOption('rtlMoveVisually', this.props.RTL ? 'true' : 'false')
+      this.editor.setOption('rtlMoveVisually', this.props.RTL)
     }
     if (prevProps.enableMarkdownLint !== enableMarkdownLint || prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) {
       if (!enableMarkdownLint) {
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 3765493e..db7914f2 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -107,8 +107,6 @@ body {
   ${optimizeOverflowScroll ? 'height: 100%;' : ''}
   ${RTL ? 'direction: rtl;' : ''}
   ${RTL ? 'text-align: right;' : ''}
-  
-  
 }
 @media print {
   body {
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index ba774dda..083259d8 100755
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -484,7 +484,7 @@ class MarkdownNoteDetail extends React.Component {
       </div>
       <div styleName='info-right'>
         <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
-        <ToggleDirectionButton onClick={(e) => this.handleSwitchDirection(e)} editorDirection={this.state.RTL} />
+        <ToggleDirectionButton onClick={(e) => this.handleSwitchDirection(e)} isRTL={this.state.RTL} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
diff --git a/browser/main/Detail/ToggleDirectionButton.js b/browser/main/Detail/ToggleDirectionButton.js
index d0cf57bb..6584d4fa 100644
--- a/browser/main/Detail/ToggleDirectionButton.js
+++ b/browser/main/Detail/ToggleDirectionButton.js
@@ -5,14 +5,14 @@ import styles from './ToggleDirectionButton.styl'
 import i18n from 'browser/lib/i18n'
 
 const ToggleDirectionButton = ({
-  onClick, editorDirection
+  onClick, isRTL
 }) => (
   <div styleName='control-toggleModeButton'>
-    <div styleName={editorDirection ? 'active' : undefined} onClick={() => onClick()}>
-      <img src={!editorDirection ? '../resources/icon/icon-left-to-right.svg' : ''} />
+    <div styleName={isRTL ? 'active' : undefined} onClick={() => onClick()}>
+      <img src={!isRTL ? '../resources/icon/icon-left-to-right.svg' : ''} />
     </div>
-    <div styleName={!editorDirection ? 'active' : undefined} onClick={() => onClick()}>
-      <img src={!editorDirection ? '' : '../resources/icon/icon-right-to-left.svg'} />
+    <div styleName={!isRTL ? 'active' : undefined} onClick={() => onClick()}>
+      <img src={!isRTL ? '' : '../resources/icon/icon-right-to-left.svg'} />
     </div>
     <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Direction')}</span>
   </div>
@@ -20,7 +20,7 @@ const ToggleDirectionButton = ({
 
 ToggleDirectionButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  editorDirection: PropTypes.string.isRequired
+  isRTL: PropTypes.string.isRequired
 }
 
 export default CSSModules(ToggleDirectionButton, styles)