Merge branch 'master' into spellchecker

2025-12-23 06:31:51 +00:00 · 2018-11-02 10:41:30 +01:00
parent 786675a99b d0c5592855
commit 88ac2a98e8
113 changed files with 4066 additions and 765 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -5,7 +5,7 @@ import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import convertModeName from 'browser/lib/convertModeName'
-import { options, TableEditor } from '@susisu/mte-kernel'
+import { options, TableEditor, Alignment } from '@susisu/mte-kernel'
 import TextEditorInterface from 'browser/lib/TextEditorInterface'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
@@ -17,6 +17,8 @@ const { ipcRenderer, remote } = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 const spellcheck = require('browser/lib/spellcheck')
 const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
+import TurndownService from 'turndown'
+import { gfm } from 'turndown-plugin-gfm'

 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'

@@ -60,15 +62,16 @@ export default class CodeEditor extends React.Component {
    }
    this.searchHandler = (e, msg) => this.handleSearch(msg)
    this.searchState = null
+    this.scrollToLineHandeler = this.scrollToLine.bind(this)

    this.formatTable = () => this.handleFormatTable()
-
    this.contextMenuHandler = function (editor, event) {
      const menu = buildEditorContextMenu(editor, event)
      if (menu != null) {
        setTimeout(() => menu.popup(remote.getCurrentWindow()), 30)
      }
    }
+    this.editorActivityHandler = () => this.handleEditorActivity()
  }

  handleSearch (msg) {
@@ -109,9 +112,32 @@ export default class CodeEditor extends React.Component {
    this.tableEditor.formatAll(options({textWidthOptions: {}}))
  }

+  handleEditorActivity () {
+    if (!this.textEditorInterface.transaction) {
+      this.updateTableEditorState()
+    }
+  }
+
+  updateTableEditorState () {
+    const active = this.tableEditor.cursorIsInTable(this.tableEditorOptions)
+    if (active) {
+      if (this.extraKeysMode !== 'editor') {
+        this.extraKeysMode = 'editor'
+        this.editor.setOption('extraKeys', this.editorKeyMap)
+      }
+    } else {
+      if (this.extraKeysMode !== 'default') {
+        this.extraKeysMode = 'default'
+        this.editor.setOption('extraKeys', this.defaultKeyMap)
+        this.tableEditor.resetSmartCursor()
+      }
+    }
+  }
+
  componentDidMount () {
    const { rulers, enableRulers } = this.props
    const expandSnippet = this.expandSnippet.bind(this)
+    eventEmitter.on('line:jump', this.scrollToLineHandeler)

    const defaultSnippet = [
      {
@@ -129,6 +155,59 @@ export default class CodeEditor extends React.Component {
      )
    }

+    this.defaultKeyMap = CodeMirror.normalizeKeyMap({
+      Tab: function (cm) {
+        const cursor = cm.getCursor()
+        const line = cm.getLine(cursor.line)
+        const cursorPosition = cursor.ch
+        const charBeforeCursor = line.substr(cursorPosition - 1, 1)
+        if (cm.somethingSelected()) cm.indentSelection('add')
+        else {
+          const tabs = cm.getOption('indentWithTabs')
+          if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)] )?$/)) {
+            cm.execCommand('goLineStart')
+            if (tabs) {
+              cm.execCommand('insertTab')
+            } else {
+              cm.execCommand('insertSoftTab')
+            }
+            cm.execCommand('goLineEnd')
+          } else if (
+            !charBeforeCursor.match(/\t|\s|\r|\n/) &&
+            cursor.ch > 1
+          ) {
+            // text expansion on tab key if the char before is alphabet
+            const snippets = JSON.parse(
+              fs.readFileSync(consts.SNIPPET_FILE, 'utf8')
+            )
+            if (expandSnippet(line, cursor, cm, snippets) === false) {
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+            }
+          } else {
+            if (tabs) {
+              cm.execCommand('insertTab')
+            } else {
+              cm.execCommand('insertSoftTab')
+            }
+          }
+        }
+      },
+      'Cmd-T': function (cm) {
+        // Do nothing
+      },
+      Enter: 'boostNewLineAndIndentContinueMarkdownList',
+      'Ctrl-C': cm => {
+        if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+          document.execCommand('copy')
+        }
+        return CodeMirror.Pass
+      }
+    })
+
    this.value = this.props.value
    this.editor = CodeMirror(this.refs.root, {
      rulers: buildCMRulers(rulers, enableRulers),
@@ -151,58 +230,7 @@ export default class CodeEditor extends React.Component {
        explode: '[]{}``$$',
        override: true
      },
-      extraKeys: {
-        Tab: function (cm) {
-          const cursor = cm.getCursor()
-          const line = cm.getLine(cursor.line)
-          const cursorPosition = cursor.ch
-          const charBeforeCursor = line.substr(cursorPosition - 1, 1)
-          if (cm.somethingSelected()) cm.indentSelection('add')
-          else {
-            const tabs = cm.getOption('indentWithTabs')
-            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)] )?$/)) {
-              cm.execCommand('goLineStart')
-              if (tabs) {
-                cm.execCommand('insertTab')
-              } else {
-                cm.execCommand('insertSoftTab')
-              }
-              cm.execCommand('goLineEnd')
-            } else if (
-              !charBeforeCursor.match(/\t|\s|\r|\n/) &&
-              cursor.ch > 1
-            ) {
-              // text expansion on tab key if the char before is alphabet
-              const snippets = JSON.parse(
-                fs.readFileSync(consts.SNIPPET_FILE, 'utf8')
-              )
-              if (expandSnippet(line, cursor, cm, snippets) === false) {
-                if (tabs) {
-                  cm.execCommand('insertTab')
-                } else {
-                  cm.execCommand('insertSoftTab')
-                }
-              }
-            } else {
-              if (tabs) {
-                cm.execCommand('insertTab')
-              } else {
-                cm.execCommand('insertSoftTab')
-              }
-            }
-          }
-        },
-        'Cmd-T': function (cm) {
-          // Do nothing
-        },
-        Enter: 'boostNewLineAndIndentContinueMarkdownList',
-        'Ctrl-C': cm => {
-          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
-            document.execCommand('copy')
-          }
-          return CodeMirror.Pass
-        }
-      }
+      extraKeys: this.defaultKeyMap
    })

    this.setMode(this.props.mode)
@@ -226,11 +254,66 @@ export default class CodeEditor extends React.Component {
    CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
    CodeMirror.Vim.map('ZZ', ':q', 'normal')

-    this.tableEditor = new TableEditor(new TextEditorInterface(this.editor))
+    this.textEditorInterface = new TextEditorInterface(this.editor)
+    this.tableEditor = new TableEditor(this.textEditorInterface)
    if (this.props.spellCheck) {
      this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
    }
+
    eventEmitter.on('code:format-table', this.formatTable)
+
+    this.tableEditorOptions = options({
+      smartCursor: true
+    })
+
+    this.editorKeyMap = CodeMirror.normalizeKeyMap({
+      'Tab': () => { this.tableEditor.nextCell(this.tableEditorOptions) },
+      'Shift-Tab': () => { this.tableEditor.previousCell(this.tableEditorOptions) },
+      'Enter': () => { this.tableEditor.nextRow(this.tableEditorOptions) },
+      'Ctrl-Enter': () => { this.tableEditor.escape(this.tableEditorOptions) },
+      'Cmd-Enter': () => { this.tableEditor.escape(this.tableEditorOptions) },
+      'Shift-Ctrl-Left': () => { this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions) },
+      'Shift-Cmd-Left': () => { this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions) },
+      'Shift-Ctrl-Right': () => { this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions) },
+      'Shift-Cmd-Right': () => { this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions) },
+      'Shift-Ctrl-Up': () => { this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions) },
+      'Shift-Cmd-Up': () => { this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions) },
+      'Shift-Ctrl-Down': () => { this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions) },
+      'Shift-Cmd-Down': () => { this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions) },
+      'Ctrl-Left': () => { this.tableEditor.moveFocus(0, -1, this.tableEditorOptions) },
+      'Cmd-Left': () => { this.tableEditor.moveFocus(0, -1, this.tableEditorOptions) },
+      'Ctrl-Right': () => { this.tableEditor.moveFocus(0, 1, this.tableEditorOptions) },
+      'Cmd-Right': () => { this.tableEditor.moveFocus(0, 1, this.tableEditorOptions) },
+      'Ctrl-Up': () => { this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions) },
+      'Cmd-Up': () => { this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions) },
+      'Ctrl-Down': () => { this.tableEditor.moveFocus(1, 0, this.tableEditorOptions) },
+      'Cmd-Down': () => { this.tableEditor.moveFocus(1, 0, this.tableEditorOptions) },
+      'Ctrl-K Ctrl-I': () => { this.tableEditor.insertRow(this.tableEditorOptions) },
+      'Cmd-K Cmd-I': () => { this.tableEditor.insertRow(this.tableEditorOptions) },
+      'Ctrl-L Ctrl-I': () => { this.tableEditor.deleteRow(this.tableEditorOptions) },
+      'Cmd-L Cmd-I': () => { this.tableEditor.deleteRow(this.tableEditorOptions) },
+      'Ctrl-K Ctrl-J': () => { this.tableEditor.insertColumn(this.tableEditorOptions) },
+      'Cmd-K Cmd-J': () => { this.tableEditor.insertColumn(this.tableEditorOptions) },
+      'Ctrl-L Ctrl-J': () => { this.tableEditor.deleteColumn(this.tableEditorOptions) },
+      'Cmd-L Cmd-J': () => { this.tableEditor.deleteColumn(this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Left': () => { this.tableEditor.moveColumn(-1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Left': () => { this.tableEditor.moveColumn(-1, this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Right': () => { this.tableEditor.moveColumn(1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Right': () => { this.tableEditor.moveColumn(1, this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Up': () => { this.tableEditor.moveRow(-1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Up': () => { this.tableEditor.moveRow(-1, this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Down': () => { this.tableEditor.moveRow(1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Down': () => { this.tableEditor.moveRow(1, this.tableEditorOptions) }
+    })
+
+    if (this.props.enableTableEditor) {
+      this.editor.on('cursorActivity', this.editorActivityHandler)
+      this.editor.on('changes', this.editorActivityHandler)
+    }
+
+    this.setState({
+      clientWidth: this.refs.root.clientWidth
+    })
  }

  expandSnippet (line, cursor, cm, snippets) {
@@ -369,6 +452,27 @@ export default class CodeEditor extends React.Component {
      this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
    }

+    if (prevProps.enableTableEditor !== this.props.enableTableEditor) {
+      if (this.props.enableTableEditor) {
+        this.editor.on('cursorActivity', this.editorActivityHandler)
+        this.editor.on('changes', this.editorActivityHandler)
+      } else {
+        this.editor.off('cursorActivity', this.editorActivityHandler)
+        this.editor.off('changes', this.editorActivityHandler)
+      }
+
+      this.extraKeysMode = 'default'
+      this.editor.setOption('extraKeys', this.defaultKeyMap)
+    }
+
+    if (this.state.clientWidth !== this.refs.root.clientWidth) {
+      this.setState({
+        clientWidth: this.refs.root.clientWidth
+      })
+
+      needRefresh = true
+    }
+
    if (needRefresh) {
      this.editor.refresh()
    }
@@ -392,7 +496,13 @@ export default class CodeEditor extends React.Component {

  moveCursorTo (row, col) {}

-  scrollToLine (num) {}
+  scrollToLine (event, num) {
+    const cursor = {
+      line: num,
+      ch: 1
+    }
+    this.editor.setCursor(cursor)
+  }

  focus () {
    this.editor.focus()
@@ -455,7 +565,11 @@ export default class CodeEditor extends React.Component {
      )
      return prevChar === '](' && nextChar === ')'
    }
-    if (dataTransferItem.type.match('image')) {
+
+    const pastedHtml = clipboardData.getData('text/html')
+    if (pastedHtml !== '') {
+      this.handlePasteHtml(e, editor, pastedHtml)
+    } else if (dataTransferItem.type.match('image')) {
      attachmentManagement.handlePastImageEvent(
        this,
        storageKey,
@@ -525,6 +639,12 @@ export default class CodeEditor extends React.Component {
      })
  }

+  handlePasteHtml (e, editor, pastedHtml) {
+    e.preventDefault()
+    const markdown = this.turndownService.turndown(pastedHtml)
+    editor.replaceSelection(markdown)
+  }
+
  mapNormalResponse (response, pastedTxt) {
    return this.decodeResponse(response).then(body => {
      return new Promise((resolve, reject) => {
@@ -533,7 +653,10 @@ export default class CodeEditor extends React.Component {
            body,
            'text/html'
          )
-          const linkWithTitle = `[${parsedBody.title}](${pastedTxt})`
+          const escapePipe = (str) => {
+            return str.replace('|', '\\|')
+          }
+          const linkWithTitle = `[${escapePipe(parsedBody.title)}](${pastedTxt})`
          resolve(linkWithTitle)
        } catch (e) {
          reject(e)
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -64,6 +64,10 @@ class MarkdownEditor extends React.Component {
    })
  }

+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
  handleChange (e) {
    this.value = this.refs.code.value
    this.props.onChange(e)
@@ -250,7 +254,7 @@ class MarkdownEditor extends React.Component {
            : 'codeEditor--hide'
          }
          ref='code'
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
          value={value}
          theme={config.editor.theme}
          keyMap={config.editor.keyMap}
@@ -265,6 +269,7 @@ class MarkdownEditor extends React.Component {
          storageKey={storageKey}
          noteKey={noteKey}
          fetchUrlTitle={config.editor.fetchUrlTitle}
+          enableTableEditor={config.editor.enableTableEditor}
          onChange={(e) => this.handleChange(e)}
          onBlur={(e) => this.handleBlur(e)}
          spellCheck
@@ -300,6 +305,7 @@ class MarkdownEditor extends React.Component {
          noteKey={noteKey}
          customCSS={config.preview.customCSS}
          allowCustomCSS={config.preview.allowCustomCSS}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
        />
      </div>
    )
--- a/browser/components/MarkdownEditor.styl
+++ b/browser/components/MarkdownEditor.styl
@@ -16,7 +16,6 @@
 .preview
  display block
  absolute top bottom left right
-  z-index 100
  background-color white
  height 100%
  width 100%
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -17,8 +17,11 @@ import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
 import { escapeHtmlCharacters } from 'browser/lib/utils'
+import context from 'browser/lib/context'
+import i18n from 'browser/lib/i18n'
+import fs from 'fs'

-const { remote } = require('electron')
+const { remote, shell } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')

 const { app } = remote
@@ -27,6 +30,8 @@ const fileUrl = require('file-url')

 const dialog = remote.dialog

+const uri2path = require('file-uri-to-path')
+
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = fileUrl(
  process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve()
@@ -75,7 +80,6 @@ function buildStyle (
       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
       url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
 }
-${allowCustomCSS ? customCSS : ''}
 ${markdownStyle}

 body {
@@ -83,6 +87,11 @@ body {
  font-size: ${fontSize}px;
  ${scrollPastEnd && 'padding-bottom: 90vh;'}
 }
+@media print {
+  body {
+    padding-bottom: initial;
+  }
+}
 code {
  font-family: '${codeBlockFontFamily.join("','")}';
  background-color: rgba(0,0,0,0.04);
@@ -139,6 +148,8 @@ body p {
    display: none
  }
 }
+
+${allowCustomCSS ? customCSS : ''}
 `
 }

@@ -161,7 +172,6 @@ const scrollBarDarkStyle = `
 }
 `

-const { shell } = require('electron')
 const OSX = global.process.platform === 'darwin'

 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -219,8 +229,32 @@ export default class MarkdownPreview extends React.Component {
    }
  }

-  handleContextMenu (e) {
-    this.props.onContextMenu(e)
+  handleContextMenu (event) {
+    // If a contextMenu handler was passed to us, use it instead of the self-defined one -> return
+    if (_.isFunction(this.props.onContextMenu)) {
+      this.props.onContextMenu(event)
+      return
+    }
+    // No contextMenu was passed to us -> execute our own link-opener
+    if (event.target.tagName.toLowerCase() === 'a') {
+      const href = event.target.href
+      const isLocalFile = href.startsWith('file:')
+      if (isLocalFile) {
+        const absPath = uri2path(href)
+        try {
+          if (fs.lstatSync(absPath).isFile()) {
+            context.popup([
+              {
+                label: i18n.__('Show in explorer'),
+                click: (e) => shell.showItemInFolder(absPath)
+              }
+            ])
+          }
+        } catch (e) {
+          console.log('Error while evaluating if the file is locally available', e)
+        }
+      }
+    }
  }

  handleDoubleClick (e) {
@@ -397,6 +431,7 @@ export default class MarkdownPreview extends React.Component {
      case 'dark':
      case 'solarized-dark':
      case 'monokai':
+      case 'dracula':
        return scrollBarDarkStyle
      default:
        return scrollBarStyle
@@ -498,7 +533,8 @@ export default class MarkdownPreview extends React.Component {
      prevProps.smartQuotes !== this.props.smartQuotes ||
      prevProps.sanitize !== this.props.sanitize ||
      prevProps.smartArrows !== this.props.smartArrows ||
-      prevProps.breaks !== this.props.breaks
+      prevProps.breaks !== this.props.breaks ||
+      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
    ) {
      this.initMarkdown()
      this.rewriteIframe()
@@ -827,6 +863,15 @@ export default class MarkdownPreview extends React.Component {
      return
    }

+    const regexIsLine = /^:line:[0-9]/
+    if (regexIsLine.test(linkHash)) {
+      const numberPattern = /\d+/g
+
+      const lineNumber = parseInt(linkHash.match(numberPattern)[0])
+      eventEmitter.emit('line:jump', lineNumber)
+      return
+    }
+
    // this will match the old link format storage.key-note.key
    // e.g.
    // 877f99c3268608328037-1c211eb7dcb463de6490
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -20,12 +20,18 @@ class MarkdownSplitEditor extends React.Component {
    }
  }

+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
  handleOnChange () {
    this.value = this.refs.code.value
    this.props.onChange()
  }

  handleScroll (e) {
+    if (!this.props.config.preview.scrollSync) return
+
    const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
    const codeDoc = _.get(this, 'refs.code.editor.doc')
    let srcTop, srcHeight, targetTop, targetHeight
@@ -145,7 +151,7 @@ class MarkdownSplitEditor extends React.Component {
          styleName='codeEditor'
          ref='code'
          width={this.state.codeEditorWidthInPercent + '%'}
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
          value={value}
          theme={config.editor.theme}
          keyMap={config.editor.keyMap}
@@ -158,6 +164,7 @@ class MarkdownSplitEditor extends React.Component {
          rulers={config.editor.rulers}
          scrollPastEnd={config.editor.scrollPastEnd}
          fetchUrlTitle={config.editor.fetchUrlTitle}
+          enableTableEditor={config.editor.enableTableEditor}
          storageKey={storageKey}
          noteKey={noteKey}
          onChange={this.handleOnChange.bind(this)}
@@ -192,6 +199,7 @@ class MarkdownSplitEditor extends React.Component {
          noteKey={noteKey}
          customCSS={config.preview.customCSS}
          allowCustomCSS={config.preview.allowCustomCSS}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
       />
      </div>
    )
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -74,24 +74,22 @@ const NoteItem = ({
          ? note.title
          : <span styleName='item-title-empty'>{i18n.__('Empty note')}</span>}
      </div>
-      {['ALL', 'STORAGE'].includes(viewType) &&
-        <div styleName='item-middle'>
-          <div styleName='item-middle-time'>{dateDisplay}</div>
-          <div styleName='item-middle-app-meta'>
-            <div
-              title={
-                viewType === 'ALL'
-                  ? storageName
-                  : viewType === 'STORAGE' ? folderName : null
-              }
-              styleName='item-middle-app-meta-label'
-            >
-              {viewType === 'ALL' && storageName}
-              {viewType === 'STORAGE' && folderName}
-            </div>
+      <div styleName='item-middle'>
+        <div styleName='item-middle-time'>{dateDisplay}</div>
+        <div styleName='item-middle-app-meta'>
+          <div
+            title={
+              viewType === 'ALL'
+                ? storageName
+                : viewType === 'STORAGE' ? folderName : null
+            }
+            styleName='item-middle-app-meta-label'
+          >
+            {viewType === 'ALL' && storageName}
+            {viewType === 'STORAGE' && folderName}
          </div>
-        </div>}
-
+        </div>
+      </div>
      <div styleName='item-bottom'>
        <div styleName='item-bottom-tagList'>
          {note.tags.length > 0
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -368,13 +368,13 @@ body[data-theme="monokai"]
    .item-title
    .item-title-icon
    .item-bottom-time
-      color $ui-monokai-text-color
+      color $ui-monokai-active-color
    .item-bottom-tagList-item
      background-color alpha(white, 10%)
      color $ui-monokai-text-color
    &:hover
      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
-      color #c0392b
+      color #f92672
      .item-bottom-tagList-item
        background-color alpha(#fff, 20%)

@@ -394,3 +394,76 @@ body[data-theme="monokai"]
  .item-bottom-tagList-empty
    color $ui-inactive-text-color
    vertical-align middle
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .item
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+      color $ui-dracula-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+        color $ui-dracula-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
+        color $ui-dracula-text-color
+
+  .item-wrapper
+    border-color alpha($ui-dracula-button-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dracula-active-color
+    .item-bottom-tagList-item
+      background-color alpha(#f8f8f2, 10%)
+      color $ui-dracula-text-color
+    &:hover
+      // background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
+      color #ff79c6
+      .item-bottom-tagList-item
+        background-color alpha(#f8f8f2, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -240,7 +240,7 @@ body[data-theme="monokai"]
      .item-simple-title-icon
      .item-simple-bottom-time
        transition 0.15s
-        color $ui-solarized-dark-text-color
+        color $ui-monokai-text-color
      .item-simple-bottom-tagList-item
        transition 0.15s
        background-color alpha(#fff, 20%)
@@ -286,3 +286,67 @@ body[data-theme="monokai"]
    .item-simple-right-storageName
      padding-left 4px
      opacity 0.4
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dracula-button-backgroundColor, 60%)
+      color $ui-dracula-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#f8f8f2, 20%)
+        color $ui-dracula-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dracula-button--active-backgroundColor
+      color $ui-dracula-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#f8f8f2, 10%)
+        color $ui-dracula-text-color
+
+  .item-simple--active
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dracula-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(#f8f8f2, 10%)
+      color $ui-dracula-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#f8f8f2, 20%)
+  .item-simple-title
+    color $ui-dark-text-color
+    border-bottom $ui-dark-borderColor
+  .item-simple-right
+    float right
+    .item-simple-right-storageName
+      padding-left 4px
+      opacity 0.4
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -51,4 +51,15 @@ body[data-theme="monokai"]
    border none
    background-color $ui-monokai-button-backgroundColor
    &:hover
-      color #5CB85C
+      color #5CB85C
+
+body[data-theme="dracula"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-dracula-text-color
+    border none
+    background-color $ui-dracula-button-backgroundColor
+    &:hover
+      color #ff79c6
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -263,4 +263,46 @@ body[data-theme="monokai"]
      background-color $ui-monokai-button-backgroundColor
      color $ui-monokai-text-color
      .menu-button-label
-        color $ui-monokai-text-color
+        color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .menu-button
+    &:active
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+
+  .menu-button--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
+
+  .menu-button-star--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
+
+  .menu-button-trash--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -180,4 +180,48 @@ body[data-theme="monokai"]
    color $ui-monokai-text-color

  .deleteButton
-    color alpha($ui-monokai-text-color, 30%)
+    color alpha($ui-monokai-text-color, 30%)
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dracula-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-dracula-text-color
+        &:hover
+          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-dracula-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+    &:hover
+      background-color $ui-dracula-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-dracula-text-color
+        &:hover
+          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-dracula-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-dracula-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
+
+  .deleteButton
+    color alpha($ui-dracula-text-color, 30%)
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -156,4 +156,23 @@ body[data-theme="monokai"]
      background-color $ui-monokai-button-backgroundColor
    &:hover
      color $ui-monokai-text-color
-      background-color $ui-monokai-button-backgroundColor
+      background-color $ui-monokai-button-backgroundColor
+
+body[data-theme="dracula"]
+  .folderList-item
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+    &:active
+      color $ui-dracula-text-color
+      background-color $ui-dracula-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    &:active
+      background-color $ui-dracula-button-backgroundColor
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-button-backgroundColor
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -14,8 +14,8 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {bool} isRelated
 */

-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
-  <div styleName='tagList-itemContainer'>
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count}) => (
+  <div styleName='tagList-itemContainer' onContextMenu={e => handleContextMenu(e, name)}>
    {isRelated
      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
        <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
--- a/browser/components/TodoListPercentage.js
+++ b/browser/components/TodoListPercentage.js
@@ -12,7 +12,7 @@ import styles from './TodoListPercentage.styl'
 */

 const TodoListPercentage = ({
-  percentageOfTodo
+  percentageOfTodo, onClearCheckboxClick
 }) => (
  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
@@ -20,11 +20,15 @@ const TodoListPercentage = ({
        <p styleName='percentageText'>{percentageOfTodo}%</p>
      </div>
    </div>
+    <div styleName='todoClear'>
+      <p styleName='todoClearText' onClick={(e) => onClearCheckboxClick(e)}>clear</p>
+    </div>
  </div>
 )

 TodoListPercentage.propTypes = {
-  percentageOfTodo: PropTypes.number.isRequired
+  percentageOfTodo: PropTypes.number.isRequired,
+  onClearCheckboxClick: PropTypes.func.isRequired
 }

 export default CSSModules(TodoListPercentage, styles)
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -1,4 +1,5 @@
 .percentageBar
+  display: flex
  position absolute
  top 72px
  right 0px
@@ -30,6 +31,20 @@
  color #f4f4f4
  font-weight 600

+.todoClear
+  display flex
+  justify-content: flex-end
+  position absolute
+  z-index 120
+  width 100%
+  height 100%
+  padding 2px 10px
+
+.todoClearText
+  color #f4f4f4
+  cursor pointer
+  font-weight 500
+
 body[data-theme="dark"]
  .percentageBar
    background-color #444444
@@ -39,7 +54,10 @@ body[data-theme="dark"]

  .percentageText
    color $ui-dark-text-color
-    
+  
+  .todoClearText
+    color $ui-dark-text-color
+
 body[data-theme="solarized-dark"]
  .percentageBar
    background-color #002b36
@@ -50,12 +68,28 @@ body[data-theme="solarized-dark"]
  .percentageText
    color #fdf6e3

+  .todoClearText
+    color #fdf6e3
+
 body[data-theme="monokai"]
  .percentageBar
-    background-color #f92672
+    background-color: $ui-monokai-borderColor

  .progressBar
-    background-color: #373831
+    background-color $ui-monokai-active-color

  .percentageText
-    color #fdf6e3
+    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .percentageBar
+    background-color $ui-dracula-borderColor
+
+  .progressBar
+    background-color: $ui-dracula-active-color
+
+  .percentageText
+    color $ui-dracula-text-color
+
+  .percentageText
+    color $ui-dracula-text-color
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -80,6 +80,9 @@ li
    &.checked
      text-decoration line-through
      opacity 0.5
+  &.taskListItem.checked
+    text-decoration line-through
+    opacity 0.5
 div.math-rendered
  text-align center
 .math-failed
@@ -361,7 +364,7 @@ for name, val in admonition_types
    .admonition.{name}
        @extend $admonition
        border-left-color: val[color]
-    
+
    .admonition.{name}>.admonition-title
        @extend $admonition-title
        border-bottom-color: .1rem solid rgba(val[color], 0.2)
@@ -476,5 +479,34 @@ body[data-theme="monokai"]
        border-color themeMonokaiTableBorder
        &:last-child
          border-right solid 1px themeMonokaiTableBorder
+  kbd
+    background-color themeDarkBackground
+
+themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
+themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
+themeDraculaTableHead = themeDraculaTableEven
+themeDraculaTableBorder = themeDarkBorder
+
+body[data-theme="dracula"]
+  color $ui-dracula-text-color
+  border-color themeDarkBorder
+  background-color $ui-dracula-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeDraculaTableHead
+      th
+        border-color themeDraculaTableBorder
+        &:last-child
+          border-right solid 1px themeDraculaTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeDraculaTableOdd
+      tr:nth-child(2n)
+        background-color themeDraculaTableEven
+      td
+        border-color themeDraculaTableBorder
+        &:last-child
+          border-right solid 1px themeDraculaTableBorder
  kbd
    background-color themeDarkBackground
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -2,8 +2,8 @@ import mermaidAPI from 'mermaid'

 // fixes bad styling in the mermaid dark theme
 const darkThemeStyling = `
-.loopText tspan { 
-  fill: white; 
+.loopText tspan {
+  fill: white;
 }`

 function getRandomInt (min, max) {
@@ -21,7 +21,7 @@ function getId () {

 function render (element, content, theme) {
  try {
-    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai'
+    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
    mermaidAPI.initialize({
      theme: isDarkTheme ? 'dark' : 'default',
      themeCSS: isDarkTheme ? darkThemeStyling : ''