From 6dc633c2a18afc0800296109a58adb2e41705d69 Mon Sep 17 00:00:00 2001
From: JianXu <zhouxiaoxiao.xujian@gmail.com>
Date: Sun, 10 Jun 2018 23:46:01 +0800
Subject: [PATCH 1/5] Add new future resize editor & Preview Panes by
 dragging.(#1977)

---
 browser/components/CodeEditor.js            |  4 +-
 browser/components/MarkdownSplitEditor.js   | 51 ++++++++++++++++++++-
 browser/components/MarkdownSplitEditor.styl | 17 +++++--
 3 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index d12e17ac1..92bc65994 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -499,6 +499,7 @@ export default class CodeEditor extends React.Component {
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily
+    let width = this.props.width
     return (
       <div
         className={className == null
@@ -509,7 +510,8 @@ export default class CodeEditor extends React.Component {
         tabIndex='-1'
         style={{
           fontFamily: fontFamily.join(', '),
-          fontSize: fontSize
+          fontSize: fontSize,
+          width: width
         }}
         onDrop={(e) => this.handleDropImage(e)}
       />
diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js
index 5c35c22c4..8fa3cc07b 100644
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -14,6 +14,10 @@ class MarkdownSplitEditor extends React.Component {
     this.focus = () => this.refs.code.focus()
     this.reload = () => this.refs.code.reload()
     this.userScroll = true
+    this.state = {
+      isSliderFocused: false,
+      codeEditorWidthInPercent: 50
+    }
   }
 
   handleOnChange () {
@@ -87,6 +91,42 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
+  handleMouseMove (e) {
+    if (this.state.isSliderFocused) {
+      const rootRect = this.refs.root.getBoundingClientRect()
+      const rootWidth = rootRect.width
+      const offset = rootRect.left
+      let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
+
+      // limit minSize to 10%, maxSize to 90%
+      if (newCodeEditorWidthInPercent <= 10) {
+        newCodeEditorWidthInPercent = 10
+      }
+
+      if (newCodeEditorWidthInPercent >= 90) {
+        newCodeEditorWidthInPercent = 90
+      }
+
+      this.setState({
+        codeEditorWidthInPercent: newCodeEditorWidthInPercent
+      })
+    }
+  }
+
+  handleMouseUp (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: false
+    })
+  }
+
+  handleMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: true
+    })
+  }
+
   render () {
     const {config, value, storageKey, noteKey} = this.props
     const storage = findStorage(storageKey)
@@ -95,12 +135,16 @@ class MarkdownSplitEditor extends React.Component {
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
     const previewStyle = {}
-    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+    previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+    if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
     return (
-      <div styleName='root'>
+      <div styleName='root' ref='root'
+        onMouseMove={e => this.handleMouseMove(e)}
+        onMouseUp={e => this.handleMouseUp(e)}>
         <CodeEditor
           styleName='codeEditor'
           ref='code'
+          width={this.state.codeEditorWidthInPercent + '%'}
           mode='GitHub Flavored Markdown'
           value={value}
           theme={config.editor.theme}
@@ -119,6 +163,9 @@ class MarkdownSplitEditor extends React.Component {
           onChange={this.handleOnChange.bind(this)}
           onScroll={this.handleScroll.bind(this)}
        />
+        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
+          <div styleName='slider-hitbox' />
+        </div>
         <MarkdownPreview
           style={previewStyle}
           styleName='preview'
diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl
index c9afd22fe..5649854b8 100644
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -3,7 +3,16 @@
   height 100%
   font-size 30px
   display flex
-  .codeEditor
-    width 50%
-  .preview
-    width 50%
+  .slider
+    absolute top bottom
+    top -2px
+    width 0
+    z-index 0
+  .slider-hitbox
+    absolute top bottom left right
+    width 7px
+    left -3px
+    z-index 10
+    cursor col-resize
+
+

From 0bd34453701e8795701f026d90cd05138623603f Mon Sep 17 00:00:00 2001
From: JianXu <zhouxiaoxiao.xujian@gmail.com>
Date: Mon, 11 Jun 2018 17:49:20 +0800
Subject: [PATCH 2/5] use 'const' instead of 'let'

---
 browser/components/CodeEditor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 92bc65994..91e7683a4 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -499,7 +499,7 @@ export default class CodeEditor extends React.Component {
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily
-    let width = this.props.width
+    const width = this.props.width
     return (
       <div
         className={className == null

From 214ed388f2c7ab929a309d5abeded45319cf4aca Mon Sep 17 00:00:00 2001
From: JianXu <zhouxiaoxiao.xujian@gmail.com>
Date: Mon, 11 Jun 2018 17:49:36 +0800
Subject: [PATCH 3/5] remove unnecessary lines

---
 browser/components/MarkdownSplitEditor.styl | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl
index 5649854b8..ed15421f8 100644
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -13,6 +13,4 @@
     width 7px
     left -3px
     z-index 10
-    cursor col-resize
-
-
+    cursor col-resize
\ No newline at end of file

From c22b69234f024743b987065b6fdfb0c75368dbbf Mon Sep 17 00:00:00 2001
From: JianXu <zhouxiaoxiao.xujian@gmail.com>
Date: Tue, 12 Jun 2018 14:11:19 +0800
Subject: [PATCH 4/5] fix review code style ,add new line at end of file

---
 browser/components/MarkdownSplitEditor.styl | 3 ++-
 browser/lib/markdown2.js                    | 0
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 browser/lib/markdown2.js

diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl
index ed15421f8..88f22e152 100644
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -13,4 +13,5 @@
     width 7px
     left -3px
     z-index 10
-    cursor col-resize
\ No newline at end of file
+    cursor col-resize
+    
\ No newline at end of file
diff --git a/browser/lib/markdown2.js b/browser/lib/markdown2.js
new file mode 100644
index 000000000..e69de29bb

From 84e670e71c0f73c15bae24b055e5362b589dd61c Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 12 Jun 2018 16:42:18 +0900
Subject: [PATCH 5/5] remove unnecesarray line

---
 browser/components/MarkdownSplitEditor.styl | 1 -
 1 file changed, 1 deletion(-)

diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl
index 88f22e152..f7e2ccb15 100644
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -14,4 +14,3 @@
     left -3px
     z-index 10
     cursor col-resize
-    
\ No newline at end of file