Merge branch 'master' into table-editor

browser/components/CodeEditor.js

@@ -24,7 +24,6 @@ export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
 
-    this.state = { isReady: false }
     this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {
       leading: false,
       trailing: true
@@ -240,7 +239,6 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
     CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
     CodeMirror.Vim.map('ZZ', ':q', 'normal')
-    this.setState({ isReady: true })
 
     this.textEditorInterface = new TextEditorInterface(this.editor)
     this.tableEditor = new TableEditor(this.textEditorInterface)
@@ -671,8 +669,7 @@ export default class CodeEditor extends React.Component {
         style={{
           fontFamily,
           fontSize: fontSize,
-          width: width,
-          opacity: this.state.isReady ? '1' : '0'
+          width: width
         }}
         onDrop={e => this.handleDropImage(e)}
       />

browser/components/MarkdownEditor.js

@@ -6,7 +6,6 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { findStorage } from 'browser/lib/findStorage'
-import debounceRender from 'react-debounce-render'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -314,4 +313,4 @@ MarkdownEditor.propTypes = {
   ignorePreviewPointerEvents: PropTypes.bool
 }
 
-export default debounceRender(CSSModules(MarkdownEditor, styles))
+export default CSSModules(MarkdownEditor, styles)

browser/components/MarkdownPreview.js

@@ -180,9 +180,7 @@ const defaultCodeBlockFontFamily = [
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
-    this.state = {
-      isReady: false
-    }
+
     this.contextMenuHandler = e => this.handleContextMenu(e)
     this.mouseDownHandler = e => this.handleMouseDown(e)
     this.mouseUpHandler = e => this.handleMouseUp(e)
@@ -457,7 +455,6 @@ export default class MarkdownPreview extends React.Component {
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
     eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
     eventEmitter.on('print', this.printHandler)
-    setTimeout(() => this.setState({ isReady: true }))
   }
 
   componentWillUnmount () {
@@ -850,11 +847,7 @@ export default class MarkdownPreview extends React.Component {
         className={
           className != null ? 'MarkdownPreview ' + className : 'MarkdownPreview'
         }
-        style={
-          this.state.isReady
-            ? Object.assign(style, { opacity: '1' })
-            : Object.assign(style, { opacity: '0' })
-        }
+        style={style}
         tabIndex={tabIndex}
         ref='root'
       />

browser/components/SnippetTab.styl

@@ -136,4 +136,48 @@ body[data-theme="solarized-dark"]
     color $ui-solarized-dark-text-color
 
   .deleteButton
-    color alpha($ui-solarized-dark-text-color, 30%)
+    color alpha($ui-solarized-dark-text-color, 30%)
+
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-monokai-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-monokai-text-color
+        &:hover
+          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-monokai-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-monokai-text-color
+    border-color $ui-monokai-borderColor
+    &:hover
+      background-color $ui-monokai-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-monokai-text-color
+        &:hover
+          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-monokai-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-monokai-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+
+  .deleteButton
+    color alpha($ui-monokai-text-color, 30%)

browser/components/markdown.styl

@@ -257,6 +257,7 @@ table
   display block
   width 100%
   margin 0 0 1em
+  overflow-x auto
   thead
     tr
       background-color tableHeadBgColor