notes editor with notes-comment pane

app/components/SimpleEditor/Editor.js

@@ -83,11 +83,6 @@ class Editor extends ProseEditor {
 
     const toc = $$(TableOfContents, props)
 
-    var editorWithFooter = $$('div')
-      .append(
-        editor
-      )
-
     var commentsPane = this.state.editorReady
     ? $$(Comments, {
       // TODO -- should probably remove the || {}
@@ -98,15 +93,15 @@ class Editor extends ProseEditor {
     }).addClass('sc-comments-pane')
     : $$('div')
 
-    var editorWithComments = $$(SplitPane, { sizeA: '100%', splitType: 'vertical' })
+    const editorWithComments = $$(SplitPane, { sizeA: '100%', splitType: 'vertical' })
       .append(
-        editorWithFooter,
+        editor,
         commentsPane
       )
 
-    let sideNav = $$('div').addClass('sidenav').append(toolbarLeft)
+    const sideNav = $$('div').addClass('sidenav').append(toolbarLeft)
 
-    var contentPanel = $$(ScrollPane, {
+    const contentPanel = $$(ScrollPane, {
       name: 'contentPanel',
       // contextMenu: 'custom',
       scrollbarPosition: 'right'

app/components/SimpleEditor/SimpleEditor.scss

@@ -331,6 +331,6 @@ $active-blue: #4a90e2;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
-    margin-left: 8%;
+    margin-left: 4%;
   }
 }

app/components/SimpleEditor/miniEditor/miniEditor.js

@@ -5,6 +5,7 @@ import {
 
 import ContainerEditor from '../ContainerEditor'
 
+
 class MiniEditor extends ProseEditor {
   render ($$) {
     const el = $$('div').addClass('sc-mini-editor')
@@ -13,11 +14,19 @@ class MiniEditor extends ProseEditor {
     let SplitPane = this.componentRegistry.get('split-pane')
     let ScrollPane = this.componentRegistry.get('scroll-pane')
 
+    const commentsPane = $$('ul').addClass('sc-comment-pane-list').addClass('sc-comments-pane').append('notes Editor Comments')
+
+    const editorWithComments = $$(SplitPane, { sizeA: '100%', splitType: 'vertical' })
+      .append(
+        editor,
+        commentsPane
+      )
+
     const contentPanel = $$(ScrollPane, {
       name: 'miniEditorContentPanel',
       scrollbarPosition: 'right'
     })
-      .append(editor)
+      .append(editorWithComments)
       .attr('id', 'content-panel')
       .ref('miniEditorContentPanel')
 

app/components/SimpleEditor/miniEditor/miniEditor.scss

-$gray: #591818;
-$background: #eee;
+$red: #ff0000;
+$background: #fff;
 
-.sc-prose-editor .sc-mini-editor {
-  border: 1px solid $gray;
-  height: 160px;
-  width: 360px;
+.notes-container {
+  .sc-mini-editor {
+    margin-top: 6px;
 
-  .se-toolbar-wrapper {
-    .sc-toolbar {
-      background-color: $background;
-      border: 0;
+    .se-toolbar-wrapper {
+      .sc-toolbar {
+        background-color: $background;
+        border: 0;
+     }
+   }
 
-      .sc-tool-group.sm-layout-horizontal > * {
-        margin: 0;
-      }
-    }
-  }
+    .se-scrollable {
+      margin-top: 0;
+      min-height: 500px;
 
-  .se-scrollable {
-    height: 120px;
-    margin-top: 0;
+     .se-content {
+       background: $background;
+       line-height: 20px;
+       margin: 0;
+       min-height: 110px;
 
-    .se-content {
-      background: $background;
-      color: $gray;
-      line-height: 20px;
-      margin: 0;
-      min-height: 110px;
+       .sc-container-editor {
+         padding: 0;
+       }
 
-      .sc-container-editor {
-        padding: 0;
-      }
-
-    }
-  }
+       .sc-comment-pane-list {
+         border-left: 1px dashed $red;
+         margin-left: 8%;
+       }
+     }
+   }
+ }
 }

app/components/SimpleEditor/panes/Notes/Notes.js

@@ -37,9 +37,11 @@ class Notes extends Component {
 
     const el = $$('div')
          .addClass('notes-container').append(resizer)
+
     el.append($$(MiniEditor, {
       editorSession: miniEditorSession
     }))
+
     resizer.addEventListener('mousedown', this.initResize, false)
 
     return el

app/components/SimpleEditor/panes/Notes/notes.scss

@@ -19,4 +19,6 @@ $white: #fff;
     top: 0;
     width: 100%;
    }
+   .notes-editor{}
+   .notes-comments{}
   }