Merge branch 'master' into fixIssue2534

Author: gregueiras

ISSUE_TEMPLATE.md

@@ -5,19 +5,19 @@ Let us know what is currently happening.
 
 Please include some **screenshots** with the **developer tools** open (console tab) when you report a bug.
 
-If your issue is regarding Boostnote mobile, please open an issue in the Boostnote Mobile repo 👉 https://github.com/BoostIO/boostnote-mobile.
+If your issue is regarding the new Boost Note.next, please open an issue in the new repo 👉 https://github.com/BoostIO/BoostNote.next/issues.
 -->
 
 # Expected behavior
 
 <!--
-Let us know what you think should happen!
+Let us know what you think should happen.
 -->
 
 # Steps to reproduce
 
 <!-- 
-Please be thorough, issues we can reproduce are easier to fix!
+Please be thorough, issues we can reproduce are easier to fix.
 -->
 
 1. 
@@ -26,8 +26,8 @@ Please be thorough, issues we can reproduce are easier to fix!
 
 # Environment
 
-- Version :
-- OS Version and name :
+- Boostnote version: <!-- 0.x.x -->
+- OS version and name: <!-- Windows 10 / Ubuntu 18.04 / etc -->
 
 <!--
 Love Boostnote? Please consider supporting us on IssueHunt:

PULL_REQUEST_TEMPLATE.md

@@ -3,13 +3,16 @@ Before submitting this PR, please make sure that:
 - You have read and understand the contributing.md
 - You have checked docs/code_style.md for information on code style
 -->
+
 ## Description
+
 <!--
 Tell us what your PR does.
 Please attach a screenshot/ video/gif image describing your PR if possible.
 -->
 
 ## Issue fixed
+
 <!--
 Please list out all issue fixed with this PR here.
 -->
@@ -20,6 +23,7 @@ your PR will be reviewed faster if we know exactly what it does.
 
 Change :white_circle: to :radio_button: in all the options that apply
 -->
+
 ## Type of changes
 
 - :white_circle: Bug fix (Change that fixed an issue)
@@ -34,3 +38,5 @@ Change :white_circle: to :radio_button: in all the options that apply
 - :white_circle: I have written test for my code and it has been tested
 - :white_circle: All existing tests have been passed
 - :white_circle: I have attached a screenshot/video to visualize my change if possible
+- :white_circle: This PR will modify the UI or affects the UX
+- :white_circle: This PR will add/update/delete a keybinding

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { connect } from 'react-redux'
 import Markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
@@ -21,6 +22,7 @@ import { escapeHtmlCharacters } from 'browser/lib/utils'
 import yaml from 'js-yaml'
 import { render } from 'react-dom'
 import Carousel from 'react-image-carousel'
+import { push } from 'connected-react-router'
 import ConfigManager from '../main/lib/ConfigManager'
 import uiThemes from 'browser/lib/ui-themes'
 import i18n from 'browser/lib/i18n'
@@ -252,7 +254,7 @@ function getSourceLineNumberByElement(element) {
   return parent.dataset.line !== undefined ? parseInt(parent.dataset.line) : -1
 }
 
-export default class MarkdownPreview extends React.Component {
+class MarkdownPreview extends React.Component {
   constructor(props) {
     super(props)
 
@@ -1116,6 +1118,7 @@ export default class MarkdownPreview extends React.Component {
     e.stopPropagation()
 
     const rawHref = e.target.getAttribute('href')
+    const { dispatch } = this.props
     if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()
 
     const parser = document.createElement('a')
@@ -1169,6 +1172,13 @@ export default class MarkdownPreview extends React.Component {
       return
     }
 
+    const regexIsTagLink = /^:tag:([\w]+)$/
+    if (regexIsTagLink.test(rawHref)) {
+      const tag = rawHref.match(regexIsTagLink)[1]
+      dispatch(push(`/tags/${encodeURIComponent(tag)}`))
+      return
+    }
+
     // other case
     this.openExternal(href)
   }
@@ -1213,3 +1223,10 @@ MarkdownPreview.propTypes = {
   smartArrows: PropTypes.bool,
   breaks: PropTypes.bool
 }
+
+export default connect(
+  null,
+  null,
+  null,
+  { forwardRef: true }
+)(MarkdownPreview)

browser/components/MarkdownSplitEditor.js

@@ -215,6 +215,7 @@ class MarkdownSplitEditor extends React.Component {
           <div styleName='slider-hitbox' />
         </div>
         <MarkdownPreview
+          ref='preview'
           style={previewStyle}
           theme={config.ui.theme}
           keyMap={config.editor.keyMap}
@@ -229,7 +230,6 @@ class MarkdownSplitEditor extends React.Component {
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
-          ref='preview'
           tabInde='0'
           value={value}
           onCheckboxClick={e => this.handleCheckboxClick(e)}

browser/components/StorageItem.js

@@ -21,7 +21,9 @@ const FolderIcon = ({ className, color, isActive }) => {
 
 /**
  * @param {boolean} isActive
+ * @param {object} tooltipRef,
  * @param {Function} handleButtonClick
+ * @param {Function} handleMouseEnter
  * @param {Function} handleContextMenu
  * @param {string} folderName
  * @param {string} folderColor
@@ -35,7 +37,9 @@ const FolderIcon = ({ className, color, isActive }) => {
 const StorageItem = ({
   styles,
   isActive,
+  tooltipRef,
   handleButtonClick,
+  handleMouseEnter,
   handleContextMenu,
   folderName,
   folderColor,
@@ -49,6 +53,7 @@ const StorageItem = ({
     <button
       styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
       onClick={handleButtonClick}
+      onMouseEnter={handleMouseEnter}
       onContextMenu={handleContextMenu}
       onDrop={handleDrop}
       onDragEnter={handleDragEnter}
@@ -75,15 +80,19 @@ const StorageItem = ({
         <span styleName='folderList-item-noteCount'>{noteCount}</span>
       )}
       {isFolded && (
-        <span styleName='folderList-item-tooltip'>{folderName}</span>
+        <span styleName='folderList-item-tooltip' ref={tooltipRef}>
+          {folderName}
+        </span>
       )}
     </button>
   )
 }
 
 StorageItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
+  tooltipRef: PropTypes.object,
   handleButtonClick: PropTypes.func,
+  handleMouseEnter: PropTypes.func,
   handleContextMenu: PropTypes.func,
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,

browser/components/StorageItem.styl

@@ -60,6 +60,7 @@
   border-bottom-right-radius 2px
   height 34px
   line-height 32px
+  transition-property opacity
 
 .folderList-item:hover, .folderList-item--active:hover
   .folderList-item-tooltip

browser/components/StorageList.styl

@@ -1,5 +1,7 @@
 .storageList
-  margin-bottom 37px
+  absolute left right
+  bottom 37px
+  top 180px
   overflow-y auto
 
 .storageList-folded

browser/finder/NoteDetail.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}