expandable in height bottom pane in the editor (needs to got to seperate file)

app/components/SimpleEditor/Editor.js

@@ -22,6 +22,8 @@ class Editor extends ProseEditor {
   constructor (parent, props) {
     super(parent, props)
 
+    this.stopResize = this.stopResize.bind(this)
+
     this.handleActions({
       'showComments': function () { this.toggleCommentsArea(true) },
       'hideComments': function () { this.toggleCommentsArea(false) },
@@ -54,10 +56,31 @@ class Editor extends ProseEditor {
     this.extendState({ editorReady: true })
   }
 
+  initResize (e) {
+    window.addEventListener('mousemove', this.resize, false)
+    window.addEventListener('mouseup', this.stopResize, false)
+  }
+
+  resize (e) {
+    const notesContainer = document.getElementsByClassName('notes-container')
+    notesContainer[0].style.height = (notesContainer[0].offsetHeight + notesContainer[0].offsetTop - e.clientY) + 'px'
+  }
+
+  stopResize (e) {
+    window.removeEventListener('mousemove', this.resize, false)
+    window.removeEventListener('mouseup', this.stopResize, false)
+  }
+
   render ($$) {
     // const { trackChangesView } = this.state
     // const canToggleTrackChanges = this.canToggleTrackChanges()
 
+    const resizer = $$('div').addClass('resize-area')
+    const notesContainer = $$('div')
+         .addClass('notes-container').append(resizer)
+
+    resizer.addEventListener('mousedown', this.initResize, false)
+
     const el = $$('div').addClass('sc-prose-editor')
 
     // left side: editor and toolbar
@@ -86,7 +109,8 @@ class Editor extends ProseEditor {
     var editorWithFooter = $$('div')
       .append(
         editor,
-        footerNotes
+        footerNotes,
+        // notesContainer
       )
 
     var commentsPane = this.state.editorReady
@@ -116,7 +140,8 @@ class Editor extends ProseEditor {
       $$(Overlay),
       $$(ContextMenu),
       // $$(Dropzones)
-      sideNav
+      sideNav,
+      notesContainer
     )
     .attr('id', 'content-panel')
     .ref('contentPanel')

app/components/SimpleEditor/SimpleEditor.scss

@@ -230,8 +230,9 @@ $active-blue: #4a90e2;
       overflow-x: hidden;
       position: fixed;
       top: 0;
+      user-select: none;
       width: 128px;
-      z-index: 1;
+      z-index: 100;
 
       .sc-toolbar {
         background: transparent;
@@ -332,4 +333,24 @@ $active-blue: #4a90e2;
     flex-wrap: wrap;
     margin-left: 8%;
   }
+
+  .notes-container {
+    background-color: $white;
+    bottom: 0;
+    height: 95px;
+    left: 130px;
+    max-height: 700px;
+    min-height: 10px;
+    position: fixed;
+    width: 67.4%;
+    z-index: 0;
+     .resize-area {
+       background-color: red;
+       cursor: row-resize;
+       height: 5px;
+       position: absolute;
+       top: 0;
+       width: 100%;
+     }
+  }
 }