move resizable note pane to panes/notes

app/components/SimpleEditor/Editor.js

@@ -22,8 +22,6 @@ 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) },
@@ -56,31 +54,10 @@ 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
@@ -108,9 +85,7 @@ class Editor extends ProseEditor {
 
     var editorWithFooter = $$('div')
       .append(
-        editor,
-        footerNotes,
-        // notesContainer
+        editor
       )
 
     var commentsPane = this.state.editorReady
@@ -141,7 +116,7 @@ class Editor extends ProseEditor {
       $$(ContextMenu),
       // $$(Dropzones)
       sideNav,
-      notesContainer
+      footerNotes
     )
     .attr('id', 'content-panel')
     .ref('contentPanel')

app/components/SimpleEditor/SimpleEditor.scss

@@ -333,24 +333,4 @@ $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%;
-     }
-  }
 }

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

 import { Component } from 'substance'
 
 class Notes extends Component {
+  constructor (props) {
+    super(props)
+
+    this.resize = this.resize.bind(this)
+    this.stopResize = this.stopResize.bind(this)
+  }
   // use toc:updated to avoid rewriting TOCProvider's this.handleDocumentChange
   didMount () {
     this.context.editorSession.onUpdate('document', this.onNotesUpdated, this)
   }
 
-  render ($$) {
-    const provider = this.getProvider()
-    const entries = provider.getEntries()
-    let self = this
-
-    const listItems = entries.map(function (entry, i) {
-      let extractedElement = ''
-      if (entry.content) {
-        extractedElement = self.parseEntryContent($$, entry.content)
-        return extractedElement
-          .attr('data-id', entry.id)
-          .addClass('sc-notes-footer-item')
-      }
-      return $$('li')
-        .attr('data-id', entry.id)
-        .addClass('sc-notes-footer-item')
-        .append(extractedElement)
-    })
-
-    if (listItems.length === 0) return $$('div')
-    return $$('ol')
-        .addClass('sc-notes-footer')
-        .append(listItems)
+  initResize (e) {
+    window.addEventListener('mousemove', this.resize, false)
+    window.addEventListener('mouseup', this.stopResize, false)
   }
 
-  parseEntryContent ($$, content) {
-    let parser = new DOMParser()
-    let parsedContent = parser.parseFromString(content, 'text/html').body
-    let parentElement = parsedContent.childNodes[0]
-    let children = parentElement.childNodes
-    let constructedElement = $$('li')
-
-    for (let i = 0; i < children.length; i++) {
-      if (children[i].nodeName === '#text') {
-        constructedElement.append(children[i].data)
-      } else {
-        let contructedChildElement = $$(children[i].nodeName)
-        // Case of nested styling, first contruct the sub child node
-        if (children[i].children.length === 1) {
-          let contructedSubChildElement = $$(children[i].children[0].nodeName)
-          this.assignVirtualElementClass(children[i].children[0], contructedSubChildElement)
-          this.assignVirtualElementClass(children[i], contructedChildElement)
+  resize (e) {
+    this.el.el.style.height = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY) + 'px'
+  }
 
-          contructedSubChildElement.append(children[i].children[0].innerText)
-          contructedChildElement.append(contructedSubChildElement)
-        } else {
-          this.assignVirtualElementClass(children[i], contructedChildElement)
-          contructedChildElement.append(children[i].innerText)
-        }
+  stopResize (e) {
+    window.removeEventListener('mousemove', this.resize, false)
+    window.removeEventListener('mouseup', this.stopResize, false)
+  }
 
-        constructedElement.append(contructedChildElement)
-      }
-    }
+  render ($$) {
+    const resizer = $$('div').addClass('resize-area')
+    const notesContainer = $$('div')
+         .addClass('notes-container').append(resizer)
 
-    return constructedElement
-  }
+    resizer.addEventListener('mousedown', this.initResize, false)
 
-  assignVirtualElementClass (DOMElement, virtualElement) {
-    switch (DOMElement.nodeName) {
-      case 'STRONG':
-        virtualElement.addClass('sc-strong')
-        break
-      case 'EM':
-        virtualElement.addClass('sc-emphasis')
-        break
-    }
+    return notesContainer
   }
 
   getProvider () {

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

-$gray: #ddd;
+$white: #fff;
 
-.sc-notes-footer {
-  border-top: 1px solid $gray;
-  counter-reset: note-footer;
-  font-size: 14px;
-  list-style-type: none;
-  padding-top: 25px;
-}
+.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;
 
-.sc-notes-footer-item::before {
-  content: ''counter(note-footer)'. ';
-  counter-increment: note-footer;
-}
+  .resize-area {
+    background-color: red;
+    cursor: row-resize;
+    height: 5px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+   }
+  }