comments--> not disaplying comments pane

app/components/SimpleEditor/ContainerEditor.js

@@ -44,6 +44,13 @@ class ContainerEditor extends SubstanceContainerEditor {
     if (this.isEmpty()) this.createText()
     this.el.focus() // TODO notworking
 
+    let editorSession = this.getEditorSession()
+    editorSession.onUpdate('document', this._onContainerChanged, this, {
+      path: [this.getContainerId(), 'nodes']
+    })
+
+    editorSession.onUpdate('document', this.rerender, this, {})
+
     // if (this.isReadOnlyMode()) {
     //   const documentSession = this.getDocumentSession()
     //   documentSession.on('didUpdate', this.disableToolbar, this)
@@ -173,7 +180,6 @@ class ContainerEditor extends SubstanceContainerEditor {
         endOffset: 0
       })
     }.bind(this))
-    console.log(newSel)
     this.rerender()
     this.editorSession.setSelection(newSel)
   }

app/components/SimpleEditor/Editor.js

@@ -27,7 +27,7 @@ class Editor extends ProseEditor {
 
   domSelectionRendered () {
     // TODO what to handle here????
-    console.log('rendered')
+    // console.log('rendered')
   }
 
   updateTrackChange () {
@@ -43,6 +43,8 @@ class Editor extends ProseEditor {
   willUpdateState () {}
 
   didMount () {
+    console.log(this.editorSession)
+    this.editorSession.onUpdate('document', this.rerender, this, {})
     // this.documentSession.on('didUpdate', this.documentSessionUpdated, this)
     // this.documentSession.on('fileUploadTrigger', this.handleUpload, this)
     this.extendState({ editorReady: true })
@@ -84,16 +86,16 @@ class Editor extends ProseEditor {
         footerNotes
       )
 
-    // var commentsPane = this.state.editorReady
-    // ? $$(Comments, {
-    //   // TODO -- should probably remove the || {}
-    //   comments: this.props.fragment.comments || {},
-    //   fragment: this.props.fragment,
-    //   update: this.props.update,
-    //   user: this.props.user
-    // }).addClass('sc-comments-pane')
-    // : $$('div')
-    const commentsPane = $$('div')
+    var commentsPane = this.state.editorReady
+    ? $$(Comments, {
+      // TODO -- should probably remove the || {}
+      comments: this.props.fragment.comments || {},
+      fragment: this.props.fragment,
+      update: this.props.update,
+      user: this.props.user
+    }).addClass('sc-comments-pane')
+    : $$('div')
+
     var editorWithComments = $$(SplitPane, { sizeA: '100%', splitType: 'vertical' })
       .append(
         editorWithFooter,
@@ -103,7 +105,7 @@ class Editor extends ProseEditor {
     var contentPanel = $$(ScrollPane, {
       name: 'contentPanel',
       // contextMenu: 'custom',
-      scrollbarPosition: 'right',
+      scrollbarPosition: 'right'
     })
     .append(editorWithComments,
       $$(Overlay),
@@ -206,18 +208,18 @@ class Editor extends ProseEditor {
     // notes provider
     const notesProvider = new NotesProvider(doc)
 
-    // // comments provider
-    // const commentsProvider = new CommentsProvider(doc, {
-    //   commandManager: this.commandManager,
-    //   comments: this.props.fragment.comments,
-    //   containerId: this.props.containerId,
-    //   controller: this,
-    //   documentSession: this.documentSession,
-    //   fragment: this.props.fragment,
-    //   surfaceManager: this.surfaceManager,
-    //   toggleCommentsArea: this.toggleCommentsArea,
-    //   update: this.props.update
-    // })
+    // comments provider
+    const commentsProvider = new CommentsProvider(doc, {
+      commandManager: this.commandManager,
+      comments: this.props.fragment.comments,
+      containerId: this.props.containerId,
+      controller: this,
+      editorSession: this.editorSession,
+      fragment: this.props.fragment,
+      surfaceManager: this.surfaceManager,
+      toggleCommentsArea: this.toggleCommentsArea,
+      update: this.props.update
+    })
 
     // TODO -- do I need all of these?
     // track changes provider
@@ -234,9 +236,9 @@ class Editor extends ProseEditor {
     return {
       ...oldContext,
       tocProvider,
-      notesProvider
-      // commentsProvider,
-      // trackChangesProvider
+      notesProvider,
+      commentsProvider,
+      trackChangesProvider
     }
   }
 }

app/components/SimpleEditor/config.js

@@ -13,12 +13,13 @@ import {
   SubscriptPackage,
   SuperscriptPackage,
   SwitchTextTypePackage,
-  SpellCheckPackage
+  SpellCheckPackage,
+  ListPackage
 } from 'substance'
 
 // My Elements
 // import CodeblockPackage from './elements/codeblock/CodeblockPackage'
-// import CommentPackage from './elements/comment/CommentPackage'
+import CommentPackage from './elements/comment/CommentPackage'
 // import ExtractPackage from './elements/extract/ExtractPackage'
 import NotePackage from './elements/note/NotePackage'
 // import SourceNotePackage from './elements/source_note/SourceNotePackage'
@@ -56,12 +57,13 @@ let config = {
 
     config.import(LinkPackage)
     config.import(SpellCheckPackage)
+    config.import(ListPackage)
     // config.import(CodeblockPackage)
     // // config.import(DialoguePackage)
     // config.import(ExtractPackage)
     config.import(NotePackage)
     // config.import(SourceNotePackage)
-    // config.import(CommentPackage)
+    config.import(CommentPackage)
     // config.import(ImagePackage)
     //
     // config.import(TrackChangePackage)

app/components/SimpleEditor/elements/comment/CommentBubble.js

 import {
-  createAnnotation,
   DefaultDOMElement,
   FontAwesomeIcon as Icon,
   Tool
@@ -52,25 +51,27 @@ class CommentBubble extends Tool {
     if (!surface) return
 
     const documentElement = document.querySelector('.se-content')
-    const overlayContainer = document.querySelector('.sc-overlay-container')
+    const overlayContainer = document.querySelector('.sc-overlay')
 
     setTimeout(() => { // read comment below
       const documentElementWidth = documentElement.offsetWidth
       const overlayContainerLeft = overlayContainer.offsetLeft
       const left = documentElementWidth - overlayContainerLeft - 15
-
+      const selection = this.getSelection()
+      const container = surface.getContainer()
+      const position = container.getPosition(selection.end.path[0])
       // unhide it first, as the bubble has no height otherwise
       this.el.removeClass('sc-overlay-bubble-hidden')
-
-      const hints = surface.getBoundingRectangleForSelection()
-      const selectionHeight = hints.height
-      const bubbleHeight = this.el.getHeight()
-      const cheat = 3
-      const moveUp = (selectionHeight / 2) + (bubbleHeight / 2) + cheat
-      const top = '-' + moveUp + 'px'
+      console.log('positionposition', position)
+      // const hints = surface.getBoundingRectangleForSelection()
+      // const selectionHeight = hints.height
+      // const bubbleHeight = this.el.getHeight()
+      // const cheat = 3
+      // const moveUp = (selectionHeight / 2) + (bubbleHeight / 2) + cheat
+      // const top = '-' + moveUp + 'px'
 
       this.el.css('left', left)
-      this.el.css('top', top)
+      // this.el.css('top', top)
     })
 
     /*
@@ -89,8 +90,8 @@ class CommentBubble extends Tool {
     return commandStates.comment
   }
 
-  getDocumentSession () {
-    return this.context.documentSession
+  getEditorSession () {
+    return this.context.editorSession
   }
 
   getMode () {
@@ -103,8 +104,8 @@ class CommentBubble extends Tool {
   }
 
   getSelection () {
-    const documentSession = this.getDocumentSession()
-    return documentSession.getSelection()
+    const editorSession = this.getEditorSession()
+    return editorSession.getSelection()
   }
 
   // TODO -- get from provider
@@ -137,12 +138,15 @@ class CommentBubble extends Tool {
 
     const newNode = {
       selection: selection,
-      node: { type: 'comment' }
+      type: 'comment',
+      path: selection.path,
+      start: selection.start,
+      end: selection.end
     }
 
-    surface.transaction((tx, args) => {
-      const annotation = createAnnotation(tx, newNode)
-      provider.focusTextArea(annotation.node.id)
+    surface.editorSession.transaction((tx, args) => {
+      const annotation = tx.create(newNode)
+      provider.focusTextArea(annotation.id)
     })
   }
 }

app/components/SimpleEditor/elements/comment/comment.scss

@@ -17,7 +17,7 @@ $white: #fff;
   background-color: $light-green;
 }
 
-.sc-prose-editor-overlay-tools {
+.sc-overlay {
   .se-active-tools {
     .sc-overlay-bubble {
       background: $white;

app/components/SimpleEditor/panes/Comments/CommentBox.js

@@ -15,6 +15,7 @@ class CommentBox extends Component {
 
   // TODO -- fix class names
   render ($$) {
+    console.log('in comment box')
     const active = this.props.active
     const entry = this.props.entry
 

app/components/SimpleEditor/panes/Comments/CommentBoxList.js

@@ -24,14 +24,14 @@ class CommentBoxList extends Component {
 
   render ($$) {
     const self = this
-
+    console.log('in render')
     const provider = self.getProvider()
     const entries = provider.getEntries()
     const activeEntry = provider.activeEntry
 
+    console.log('entries', entries)
     const listItems = entries.map(function (entry, i) {
       const active = (entry.id === activeEntry)
-
       return $$(CommentBox, {
         active: active,
         comments: self.props.comments[entry.id] || { data: [] },
@@ -66,6 +66,7 @@ class CommentBoxList extends Component {
   setTops () {
     const provider = this.getProvider()
     const entries = provider.getEntries()
+
     const activeEntry = provider.activeEntry
 
     this.calculateTops(entries, activeEntry)

app/components/SimpleEditor/panes/Comments/CommentsProvider.js

@@ -6,11 +6,10 @@ class CommentsProvider extends TocProvider {
   constructor (document, props) {
     super(document, props)
     this.activeEntry = null
+    const editorSession = props.editorSession
+    editorSession.onUpdate('document', this.updateActiveEntry, this)
 
-    const documentSession = props.documentSession
-    documentSession.on('didUpdate', this.updateActiveEntry, this)
-
-    const doc = documentSession.getDocument()
+    const doc = editorSession.getDocument()
     doc.on('document:changed', this.update, this)
 
     const editor = props.controller
@@ -65,6 +64,7 @@ class CommentsProvider extends TocProvider {
 
   // runs when document session is updated
   updateActiveEntry () {
+    console.log('updateActiveEntry')
     const activeEntry = this.getActiveEntry()
     const selectionContainsComments = this.selectionContainsComments()
 
@@ -214,7 +214,7 @@ class CommentsProvider extends TocProvider {
 
   // returns an array of all comments in selection
   getSelectionComments () {
-    const selectionState = this.config.documentSession.getSelectionState()
+    const selectionState = this.config.editorSession.getSelectionState()
     return selectionState.getAnnotationsForType('comment')
   }
 
@@ -246,8 +246,8 @@ class CommentsProvider extends TocProvider {
     return doc.get(id)
   }
 
-  getDocumentSession () {
-    return this.config.documentSession
+  getEditorSession () {
+    return this.config.editorSession
   }
 
   // returns the combined borders of all comment annotations in selection
@@ -268,8 +268,8 @@ class CommentsProvider extends TocProvider {
   }
 
   getSelection () {
-    const documentSession = this.getDocumentSession()
-    return documentSession.getSelection()
+    const editorSession = this.getEditorSession()
+    return editorSession.getSelection()
   }
 
   getSurface () {