Merge branch 'master' into fixIssue2534

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/Detail/ToggleDirectionButton.js

@@ -20,7 +20,7 @@ const ToggleDirectionButton = ({ onClick, isRTL }) => (
 
 ToggleDirectionButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  isRTL: PropTypes.string.isRequired
+  isRTL: PropTypes.bool.isRequired
 }
 
 export default CSSModules(ToggleDirectionButton, styles)

browser/main/Main.js

@@ -183,6 +183,7 @@ class Main extends React.Component {
       'menubar:togglemenubar',
       this.toggleMenuBarVisible.bind(this)
     )
+    eventEmitter.on('dispatch:push', this.changeRoutePush.bind(this))
   }
 
   componentWillUnmount() {
@@ -191,9 +192,15 @@ class Main extends React.Component {
       'menubar:togglemenubar',
       this.toggleMenuBarVisible.bind(this)
     )
+    eventEmitter.off('dispatch:push', this.changeRoutePush.bind(this))
     clearInterval(this.refreshTheme)
   }
 
+  changeRoutePush(event, destination) {
+    const { dispatch } = this.props
+    dispatch(push(destination))
+  }
+
   toggleMenuBarVisible() {
     const { config } = this.props
     const { ui } = config

browser/main/SideNav/StorageItem.js

@@ -144,6 +144,15 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleFolderMouseEnter(e, tooltipRef, isFolded) {
+    if (isFolded) {
+      const buttonEl = e.currentTarget
+      const tooltipEl = tooltipRef.current
+
+      tooltipEl.style.top = buttonEl.getBoundingClientRect().y + 'px'
+    }
+  }
+
   handleFolderButtonContextMenu(e, folder) {
     context.popup([
       {
@@ -316,6 +325,7 @@ class StorageItem extends React.Component {
           folder.key
       )
       const isActive = !!location.pathname.match(folderRegex)
+      const tooltipRef = React.createRef(null)
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = 0
@@ -339,7 +349,11 @@ class StorageItem extends React.Component {
           key={folder.key}
           index={index}
           isActive={isActive || folder.key === this.state.draggedOver}
+          tooltipRef={tooltipRef}
           handleButtonClick={e => this.handleFolderButtonClick(folder.key)(e)}
+          handleMouseEnter={e =>
+            this.handleFolderMouseEnter(e, tooltipRef, isFolded)
+          }
           handleContextMenu={e => this.handleFolderButtonContextMenu(e, folder)}
           folderName={folder.name}
           folderColor={folder.color}

browser/main/lib/ConfigManager.js

@@ -32,7 +32,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',
@@ -89,7 +89,8 @@ export const DEFAULT_CONFIG = {
       "semi": false,
       "singleQuote": true
     }`,
-    deleteUnusedAttachments: true
+    deleteUnusedAttachments: true,
+    rtlEnabled: false
   },
   preview: {
     fontSize: '14',

browser/main/modals/PreferencesModal/UiTab.js

@@ -133,7 +133,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,
@@ -861,6 +862,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'>