Fix to use by preventDefault

browser/components/MarkdownEditor.js

@@ -15,7 +15,7 @@ class MarkdownEditor extends React.Component {
       status: 'PREVIEW',
       renderValue: props.value,
       keyPressed: {},
-      locked: false
+      isLocked: false
     }
 
     this.lockEditorCode = () => this.handleLockEditor()
@@ -74,18 +74,17 @@ class MarkdownEditor extends React.Component {
       }, () => {
         if (newStatus === 'CODE') {
           this.refs.code.focus()
-          eventEmitter.emit('topbar:lock')
         } else {
           this.refs.code.blur()
           this.refs.preview.focus()
-          eventEmitter.emit('topbar:lock')
         }
+        eventEmitter.emit('topbar:showlockbutton')
       })
     }
   }
 
   handleBlur (e) {
-    if (this.state.locked) return
+    if (this.state.isLocked) return
     this.setState({ keyPressed: [] })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
@@ -95,8 +94,8 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
-        eventEmitter.emit('topbar:lock')
       })
+      eventEmitter.emit('topbar:showlockbutton')
     }
   }
 
@@ -111,8 +110,8 @@ class MarkdownEditor extends React.Component {
         status: 'CODE'
       }, () => {
         this.refs.code.focus()
-        eventEmitter.emit('topbar:lock')
       })
+      eventEmitter.emit('topbar:showlockbutton')
     }
   }
 
@@ -144,13 +143,12 @@ class MarkdownEditor extends React.Component {
       this.setState({
         status: 'CODE'
       }, () => {
-        eventEmitter.emit('topbar:lock')
         this.refs.code.focus()
       })
     } else {
-      eventEmitter.emit('topbar:lock')
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:showlockbutton')
   }
 
   reload () {
@@ -165,7 +163,7 @@ class MarkdownEditor extends React.Component {
     })
     this.setState({ keyPressed })
     let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
-    if (!this.state.locked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+    if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
       document.activeElement.blur()
     }
   }
@@ -178,7 +176,7 @@ class MarkdownEditor extends React.Component {
   }
 
   handleLockEditor () {
-    this.setState({ locked: !this.state.locked })
+    this.setState({ isLocked: !this.state.isLocked })
   }
 
   render () {

browser/main/Detail/MarkdownNoteDetail.js

@@ -27,7 +27,7 @@ class MarkdownNoteDetail extends React.Component {
         content: ''
       }, props.note),
       editorStatus: false,
-      locked: false
+      isLocked: false
     }
     this.dispatchTimer = null
 
@@ -39,7 +39,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   componentDidMount () {
-    ee.on('topbar:lock', this.showLockButton)
+    ee.on('topbar:showlockbutton', this.showLockButton)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -212,14 +212,14 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
-  handleLockButtonClick () {
-    this.focus()
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
     ee.emit('editor:lock')
-    this.setState({ locked: !this.state.locked })
+    this.setState({ isLocked: !this.state.isLocked })
   }
 
   toggleLockButton () {
-    return this.state.locked ? 'fa-lock' : 'fa-unlock-alt'
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
   }
 
   handleDeleteKeyDown (e) {
@@ -271,7 +271,7 @@ class MarkdownNoteDetail extends React.Component {
                 return(
                   <button styleName='info-right-button'
                     onFocus={(e) => this.handleFocus(e)}
-                    onClick={(e) => this.handleLockButtonClick(e)}
+                    onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
                   >
                     <i className={faClassName}/>
                   </button>