fixed eslint error & integrated with prettier as well as formatted the whole codebase (#3450)

browser/main/Detail/MarkdownNoteDetail.js

@@ -34,16 +34,19 @@ import { replace } from 'connected-react-router'
 import ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton'
 
 class MarkdownNoteDetail extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
       isMovingNote: false,
-      note: Object.assign({
-        title: '',
-        content: '',
-        linesHighlighted: []
-      }, props.note),
+      note: Object.assign(
+        {
+          title: '',
+          content: '',
+          linesHighlighted: []
+        },
+        props.note
+      ),
       isLockButtonShown: props.config.editor.type !== 'SPLIT',
       isLocked: false,
       editorType: props.config.editor.type,
@@ -57,37 +60,42 @@ class MarkdownNoteDetail extends React.Component {
     this.generateToc = () => this.handleGenerateToc()
   }
 
-  focus () {
+  focus() {
     this.refs.content.focus()
   }
 
-  componentDidMount () {
+  componentDidMount() {
     ee.on('topbar:togglelockbutton', this.toggleLockButton)
     ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection())
     ee.on('topbar:togglemodebutton', () => {
-      const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
+      const reversedType =
+        this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
       this.handleSwitchMode(reversedType)
     })
     ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))
     ee.on('code:generate-toc', this.generateToc)
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     const isNewNote = nextProps.note.key !== this.props.note.key
-    const hasDeletedTags = nextProps.note.tags.length < this.props.note.tags.length
+    const hasDeletedTags =
+      nextProps.note.tags.length < this.props.note.tags.length
     if (!this.state.isMovingNote && (isNewNote || hasDeletedTags)) {
       if (this.saveQueue != null) this.saveNow()
-      this.setState({
-        note: Object.assign({linesHighlighted: []}, nextProps.note)
-      }, () => {
-        this.refs.content.reload()
-        if (this.refs.tags) this.refs.tags.reset()
-      })
+      this.setState(
+        {
+          note: Object.assign({ linesHighlighted: [] }, nextProps.note)
+        },
+        () => {
+          this.refs.content.reload()
+          if (this.refs.tags) this.refs.tags.reset()
+        }
+      )
     }
 
     // Focus content if using blur or double click
     // --> Moved here from componentDidMount so a re-render during search won't set focus to the editor
-    const {switchPreview} = nextProps.config.editor
+    const { switchPreview } = nextProps.config.editor
 
     if (this.state.switchPreview !== switchPreview) {
       this.setState({
@@ -100,24 +108,28 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
     ee.on('topbar:toggledirectionbutton', this.handleSwitchDirection)
     ee.off('code:generate-toc', this.generateToc)
     if (this.saveQueue != null) this.saveNow()
   }
 
-  handleUpdateTag () {
+  handleUpdateTag() {
     const { note } = this.state
     if (this.refs.tags) note.tags = this.refs.tags.value
     this.updateNote(note)
   }
 
-  handleUpdateContent () {
+  handleUpdateContent() {
     const { note } = this.state
     note.content = this.refs.content.value
 
-    let title = findNoteTitle(note.content, this.props.config.editor.enableFrontMatterTitle, this.props.config.editor.frontMatterTitleField)
+    let title = findNoteTitle(
+      note.content,
+      this.props.config.editor.enableFrontMatterTitle,
+      this.props.config.editor.frontMatterTitleField
+    )
     title = striptags(title)
     title = markdown.strip(title)
     note.title = title
@@ -125,37 +137,35 @@ class MarkdownNoteDetail extends React.Component {
     this.updateNote(note)
   }
 
-  updateNote (note) {
+  updateNote(note) {
     note.updatedAt = new Date()
-    this.setState({note}, () => {
+    this.setState({ note }, () => {
       this.save()
     })
   }
 
-  save () {
+  save() {
     clearTimeout(this.saveQueue)
     this.saveQueue = setTimeout(() => {
       this.saveNow()
     }, 1000)
   }
 
-  saveNow () {
+  saveNow() {
     const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
-    dataApi
-      .updateNote(note.storage, note.key, this.state.note)
-      .then((note) => {
-        dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+    dataApi.updateNote(note.storage, note.key, this.state.note).then(note => {
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: note
       })
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+    })
   }
 
-  handleFolderChange (e) {
+  handleFolderChange(e) {
     const { note } = this.state
     const value = this.refs.folder.value
     const splitted = value.split('-')
@@ -164,64 +174,71 @@ class MarkdownNoteDetail extends React.Component {
 
     dataApi
       .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
-      .then((newNote) => {
-        this.setState({
-          isMovingNote: true,
-          note: Object.assign({}, newNote)
-        }, () => {
-          const { dispatch, location } = this.props
-          dispatch({
-            type: 'MOVE_NOTE',
-            originNote: note,
-            note: newNote
-          })
-          dispatch(replace({
-            pathname: location.pathname,
-            search: queryString.stringify({
-              key: newNote.key
+      .then(newNote => {
+        this.setState(
+          {
+            isMovingNote: true,
+            note: Object.assign({}, newNote)
+          },
+          () => {
+            const { dispatch, location } = this.props
+            dispatch({
+              type: 'MOVE_NOTE',
+              originNote: note,
+              note: newNote
             })
-          }))
-          this.setState({
-            isMovingNote: false
-          })
-        })
+            dispatch(
+              replace({
+                pathname: location.pathname,
+                search: queryString.stringify({
+                  key: newNote.key
+                })
+              })
+            )
+            this.setState({
+              isMovingNote: false
+            })
+          }
+        )
       })
   }
 
-  handleStarButtonClick (e) {
+  handleStarButtonClick(e) {
     const { note } = this.state
-    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
+    if (!note.isStarred)
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
-    this.setState({
-      note
-    }, () => {
-      this.save()
-    })
+    this.setState(
+      {
+        note
+      },
+      () => {
+        this.save()
+      }
+    )
   }
 
-  exportAsFile () {
+  exportAsFile() {}
 
-  }
-
-  exportAsMd () {
+  exportAsMd() {
     ee.emit('export:save-md')
   }
 
-  exportAsTxt () {
+  exportAsTxt() {
     ee.emit('export:save-text')
   }
 
-  exportAsHtml () {
+  exportAsHtml() {
     ee.emit('export:save-html')
   }
 
-  exportAsPdf () {
+  exportAsPdf() {
     ee.emit('export:save-pdf')
   }
 
-  handleKeyDown (e) {
+  handleKeyDown(e) {
     switch (e.keyCode) {
       // tab key
       case 9:
@@ -231,7 +248,11 @@ class MarkdownNoteDetail extends React.Component {
         } else if (e.ctrlKey && e.shiftKey) {
           e.preventDefault()
           this.jumpPrevTab()
-        } else if (!e.ctrlKey && !e.shiftKey && e.target === this.refs.description) {
+        } else if (
+          !e.ctrlKey &&
+          !e.shiftKey &&
+          e.target === this.refs.description
+        ) {
           e.preventDefault()
           this.focusEditor()
         }
@@ -239,9 +260,8 @@ class MarkdownNoteDetail extends React.Component {
       // I key
       case 73:
         {
-          const isSuper = global.process.platform === 'darwin'
-            ? e.metaKey
-            : e.ctrlKey
+          const isSuper =
+            global.process.platform === 'darwin' ? e.metaKey : e.ctrlKey
           if (isSuper) {
             e.preventDefault()
             this.handleInfoButtonClick(e)
@@ -251,17 +271,17 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
-  handleTrashButtonClick (e) {
+  handleTrashButtonClick(e) {
     const { note } = this.state
     const { isTrashed } = note
     const { confirmDeletion } = this.props.config.ui
 
     if (isTrashed) {
       if (confirmDeleteNote(confirmDeletion, true)) {
-        const {note, dispatch} = this.props
+        const { note, dispatch } = this.props
         dataApi
           .deleteNote(note.storage, note.key)
-          .then((data) => {
+          .then(data => {
             const dispatchHandler = () => {
               dispatch({
                 type: 'DELETE_NOTE',
@@ -277,109 +297,124 @@ class MarkdownNoteDetail extends React.Component {
       if (confirmDeleteNote(confirmDeletion, false)) {
         note.isTrashed = true
 
-        this.setState({
-          note
-        }, () => {
-          this.save()
-        })
+        this.setState(
+          {
+            note
+          },
+          () => {
+            this.save()
+          }
+        )
 
         ee.emit('list:next')
       }
     }
   }
 
-  handleUndoButtonClick (e) {
+  handleUndoButtonClick(e) {
     const { note } = this.state
 
     note.isTrashed = false
 
-    this.setState({
-      note
-    }, () => {
-      this.save()
-      this.refs.content.reload()
-      ee.emit('list:next')
-    })
+    this.setState(
+      {
+        note
+      },
+      () => {
+        this.save()
+        this.refs.content.reload()
+        ee.emit('list:next')
+      }
+    )
   }
 
-  handleFullScreenButton (e) {
+  handleFullScreenButton(e) {
     ee.emit('editor:fullscreen')
   }
 
-  handleLockButtonMouseDown (e) {
+  handleLockButtonMouseDown(e) {
     e.preventDefault()
     ee.emit('editor:lock')
     this.setState({ isLocked: !this.state.isLocked })
     if (this.state.isLocked) this.focus()
   }
 
-  getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
+  getToggleLockButton() {
+    return this.state.isLocked
+      ? '../resources/icon/icon-lock.svg'
+      : '../resources/icon/icon-unlock.svg'
   }
 
-  handleDeleteKeyDown (e) {
+  handleDeleteKeyDown(e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
-  handleToggleLockButton (event, noteStatus) {
+  handleToggleLockButton(event, noteStatus) {
     // first argument event is not used
     if (noteStatus === 'CODE') {
-      this.setState({isLockButtonShown: true})
+      this.setState({ isLockButtonShown: true })
     } else {
-      this.setState({isLockButtonShown: false})
+      this.setState({ isLockButtonShown: false })
     }
   }
 
-  handleGenerateToc () {
+  handleGenerateToc() {
     const editor = this.refs.content.refs.code.editor
     markdownToc.generateInEditor(editor)
   }
 
-  handleFocus (e) {
+  handleFocus(e) {
     this.focus()
   }
 
-  handleInfoButtonClick (e) {
+  handleInfoButtonClick(e) {
     const infoPanel = document.querySelector('.infoPanel')
-    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+    if (infoPanel.style)
+      infoPanel.style.display =
+        infoPanel.style.display === 'none' ? 'inline' : 'none'
   }
 
-  print (e) {
+  print(e) {
     ee.emit('print')
   }
 
-  handleSwitchMode (type) {
+  handleSwitchMode(type) {
     // If in split mode, hide the lock button
-    this.setState({ editorType: type, isLockButtonShown: !(type === 'SPLIT') }, () => {
-      this.focus()
-      const newConfig = Object.assign({}, this.props.config)
-      newConfig.editor.type = type
-      ConfigManager.set(newConfig)
-    })
+    this.setState(
+      { editorType: type, isLockButtonShown: !(type === 'SPLIT') },
+      () => {
+        this.focus()
+        const newConfig = Object.assign({}, this.props.config)
+        newConfig.editor.type = type
+        ConfigManager.set(newConfig)
+      }
+    )
   }
 
-  handleSwitchDirection () {
+  handleSwitchDirection() {
     // If in split mode, hide the lock button
     const direction = this.state.RTL
     this.setState({ RTL: !direction })
   }
 
-  handleDeleteNote () {
+  handleDeleteNote() {
     this.handleTrashButtonClick()
   }
 
-  handleClearTodo () {
+  handleClearTodo() {
     const { note } = this.state
     const splitted = note.content.split('\n')
 
-    const clearTodoContent = splitted.map((line) => {
-      const trimmedLine = line.trim()
-      if (trimmedLine.match(/\[x\]/i)) {
-        return line.replace(/\[x\]/i, '[ ]')
-      } else {
-        return line
-      }
-    }).join('\n')
+    const clearTodoContent = splitted
+      .map(line => {
+        const trimmedLine = line.trim()
+        if (trimmedLine.match(/\[x\]/i)) {
+          return line.replace(/\[x\]/i, '[ ]')
+        } else {
+          return line
+        }
+      })
+      .join('\n')
 
     note.content = clearTodoContent
     this.refs.content.setValue(note.content)
@@ -387,40 +422,44 @@ class MarkdownNoteDetail extends React.Component {
     this.updateNote(note)
   }
 
-  renderEditor () {
+  renderEditor() {
     const { config, ignorePreviewPointerEvents } = this.props
     const { note } = this.state
 
     if (this.state.editorType === 'EDITOR_PREVIEW') {
-      return <MarkdownEditor
-        ref='content'
-        styleName='body-noteEditor'
-        config={config}
-        value={note.content}
-        storageKey={note.storage}
-        noteKey={note.key}
-        linesHighlighted={note.linesHighlighted}
-        onChange={this.handleUpdateContent.bind(this)}
-        isLocked={this.state.isLocked}
-        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
-        RTL={this.state.RTL}
-      />
+      return (
+        <MarkdownEditor
+          ref='content'
+          styleName='body-noteEditor'
+          config={config}
+          value={note.content}
+          storageKey={note.storage}
+          noteKey={note.key}
+          linesHighlighted={note.linesHighlighted}
+          onChange={this.handleUpdateContent.bind(this)}
+          isLocked={this.state.isLocked}
+          ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+          RTL={this.state.RTL}
+        />
+      )
     } else {
-      return <MarkdownSplitEditor
-        ref='content'
-        config={config}
-        value={note.content}
-        storageKey={note.storage}
-        noteKey={note.key}
-        linesHighlighted={note.linesHighlighted}
-        onChange={this.handleUpdateContent.bind(this)}
-        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
-        RTL={this.state.RTL}
-      />
+      return (
+        <MarkdownSplitEditor
+          ref='content'
+          config={config}
+          value={note.content}
+          storageKey={note.storage}
+          noteKey={note.key}
+          linesHighlighted={note.linesHighlighted}
+          onChange={this.handleUpdateContent.bind(this)}
+          ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+          RTL={this.state.RTL}
+        />
+      )
     }
   }
 
-  render () {
+  render() {
     const { data, dispatch, location, config } = this.props
     const { note, editorType } = this.state
     const storageKey = note.storage
@@ -428,123 +467,141 @@ class MarkdownNoteDetail extends React.Component {
 
     const options = []
     data.storageMap.forEach((storage, index) => {
-      storage.folders.forEach((folder) => {
+      storage.folders.forEach(folder => {
         options.push({
           storage: storage,
           folder: folder
         })
       })
     })
-    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter(
+      option =>
+        option.storage.key === storageKey && option.folder.key === folderKey
+    )[0]
 
-    const trashTopBar = <div styleName='info'>
-      <div styleName='info-left'>
-        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
-      </div>
-      <div styleName='info-right'>
-        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-        <InfoPanelTrashed
-          storageName={currentOption.storage.name}
-          folderName={currentOption.folder.name}
-          updatedAt={formatDate(note.updatedAt)}
-          createdAt={formatDate(note.createdAt)}
-          exportAsHtml={this.exportAsHtml}
-          exportAsMd={this.exportAsMd}
-          exportAsTxt={this.exportAsTxt}
-          exportAsPdf={this.exportAsPdf}
-        />
-      </div>
-    </div>
-
-    const detailTopBar = <div styleName='info'>
-      <div styleName='info-left'>
-        <div>
-          <FolderSelect styleName='info-left-top-folderSelect'
-            value={this.state.note.storage + '-' + this.state.note.folder}
-            ref='folder'
-            data={data}
-            onChange={(e) => this.handleFolderChange(e)}
+    const trashTopBar = (
+      <div styleName='info'>
+        <div styleName='info-left'>
+          <RestoreButton onClick={e => this.handleUndoButtonClick(e)} />
+        </div>
+        <div styleName='info-right'>
+          <PermanentDeleteButton
+            onClick={e => this.handleTrashButtonClick(e)}
+          />
+          <InfoButton onClick={e => this.handleInfoButtonClick(e)} />
+          <InfoPanelTrashed
+            storageName={currentOption.storage.name}
+            folderName={currentOption.folder.name}
+            updatedAt={formatDate(note.updatedAt)}
+            createdAt={formatDate(note.createdAt)}
+            exportAsHtml={this.exportAsHtml}
+            exportAsMd={this.exportAsMd}
+            exportAsTxt={this.exportAsTxt}
+            exportAsPdf={this.exportAsPdf}
           />
         </div>
-
-        <TagSelect
-          ref='tags'
-          value={this.state.note.tags}
-          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
-          showTagsAlphabetically={config.ui.showTagsAlphabetically}
-          data={data}
-          dispatch={dispatch}
-          onChange={this.handleUpdateTag.bind(this)}
-          coloredTags={config.coloredTags}
-        />
-        <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
-      <div styleName='info-right'>
-        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
-        <ToggleDirectionButton onClick={(e) => this.handleSwitchDirection(e)} isRTL={this.state.RTL} />
-        <StarButton
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
+    )
 
-        {(() => {
-          const imgSrc = `${this.getToggleLockButton()}`
-          const lockButtonComponent =
-            <button styleName='control-lockButton'
-              onFocus={(e) => this.handleFocus(e)}
-              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
-            >
-              <img src={imgSrc} />
-              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
-            </button>
+    const detailTopBar = (
+      <div styleName='info'>
+        <div styleName='info-left'>
+          <div>
+            <FolderSelect
+              styleName='info-left-top-folderSelect'
+              value={this.state.note.storage + '-' + this.state.note.folder}
+              ref='folder'
+              data={data}
+              onChange={e => this.handleFolderChange(e)}
+            />
+          </div>
 
-          return (
-            this.state.isLockButtonShown ? lockButtonComponent : ''
-          )
-        })()}
+          <TagSelect
+            ref='tags'
+            value={this.state.note.tags}
+            saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+            showTagsAlphabetically={config.ui.showTagsAlphabetically}
+            data={data}
+            dispatch={dispatch}
+            onChange={this.handleUpdateTag.bind(this)}
+            coloredTags={config.coloredTags}
+          />
+          <TodoListPercentage
+            onClearCheckboxClick={e => this.handleClearTodo(e)}
+            percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
+          />
+        </div>
+        <div styleName='info-right'>
+          <ToggleModeButton
+            onClick={e => this.handleSwitchMode(e)}
+            editorType={editorType}
+          />
+          <ToggleDirectionButton
+            onClick={e => this.handleSwitchDirection(e)}
+            isRTL={this.state.RTL}
+          />
+          <StarButton
+            onClick={e => this.handleStarButtonClick(e)}
+            isActive={note.isStarred}
+          />
 
-        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
+          {(() => {
+            const imgSrc = `${this.getToggleLockButton()}`
+            const lockButtonComponent = (
+              <button
+                styleName='control-lockButton'
+                onFocus={e => this.handleFocus(e)}
+                onMouseDown={e => this.handleLockButtonMouseDown(e)}
+              >
+                <img src={imgSrc} />
+                {this.state.isLocked ? (
+                  <span styleName='tooltip'>Unlock</span>
+                ) : (
+                  <span styleName='tooltip'>Lock</span>
+                )}
+              </button>
+            )
 
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+            return this.state.isLockButtonShown ? lockButtonComponent : ''
+          })()}
 
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
+          <FullscreenButton onClick={e => this.handleFullScreenButton(e)} />
 
-        <InfoPanel
-          storageName={currentOption.storage.name}
-          folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](:note:${queryString.parse(location.search).key})`}
-          updatedAt={formatDate(note.updatedAt)}
-          createdAt={formatDate(note.createdAt)}
-          exportAsMd={this.exportAsMd}
-          exportAsTxt={this.exportAsTxt}
-          exportAsHtml={this.exportAsHtml}
-          exportAsPdf={this.exportAsPdf}
-          wordCount={note.content.trim().split(/\s+/g).length}
-          letterCount={note.content.replace(/\r?\n/g, '').length}
-          type={note.type}
-          print={this.print}
-        />
+          <TrashButton onClick={e => this.handleTrashButtonClick(e)} />
+
+          <InfoButton onClick={e => this.handleInfoButtonClick(e)} />
+
+          <InfoPanel
+            storageName={currentOption.storage.name}
+            folderName={currentOption.folder.name}
+            noteLink={`[${note.title}](:note:${
+              queryString.parse(location.search).key
+            })`}
+            updatedAt={formatDate(note.updatedAt)}
+            createdAt={formatDate(note.createdAt)}
+            exportAsMd={this.exportAsMd}
+            exportAsTxt={this.exportAsTxt}
+            exportAsHtml={this.exportAsHtml}
+            exportAsPdf={this.exportAsPdf}
+            wordCount={note.content.trim().split(/\s+/g).length}
+            letterCount={note.content.replace(/\r?\n/g, '').length}
+            type={note.type}
+            print={this.print}
+          />
+        </div>
       </div>
-
-    </div>
+    )
 
     return (
-      <div className='NoteDetail'
+      <div
+        className='NoteDetail'
         style={this.props.style}
         styleName='root'
-        onKeyDown={(e) => this.handleKeyDown(e)}
+        onKeyDown={e => this.handleKeyDown(e)}
       >
-
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
-        <div styleName='body'>
-          {this.renderEditor()}
-        </div>
+        <div styleName='body'>{this.renderEditor()}</div>
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
@@ -558,9 +615,7 @@ class MarkdownNoteDetail extends React.Component {
 MarkdownNoteDetail.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array,
-  note: PropTypes.shape({
-
-  }),
+  note: PropTypes.shape({}),
   style: PropTypes.shape({
     left: PropTypes.number
   }),