comment bubble position calculated based on vontent panel

app/components/SimpleEditor/Editor.js

@@ -111,7 +111,7 @@ class Editor extends ProseEditor {
       $$(ContextMenu),
       sideNav
     )
-    .attr('id', 'content-panel')
+    .attr('id', 'content-panel-' + this.props.containerId)
     .ref('contentPanel')
 
     const contentPanelWithSplitPane = $$(SplitPane, { sizeA: '95%', splitType: 'vertical' })

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

@@ -54,22 +54,14 @@ class CommentBubble extends Tool {
     // without this check, the editor will break on first load
     const surface = this.getSurface()
     if (!surface) return
+    const containerId = this.context.editor.props.containerId
+    const contentPanel = '#content-panel-' + containerId
 
     setTimeout(() => { // read comment below
-      let documentElement = document.querySelector('.se-content')
-      let overlayContainer = document.querySelector('.sc-overlay')
+      let documentElement = document.querySelector(contentPanel + ' .se-content')
+      let overlayContainer = document.querySelector(contentPanel + ' .sc-overlay')
       let fix = 15
 
-      const minEditorContentPanelChildren = document.getElementById('notes-editor-content-panel').children
-      const temp = minEditorContentPanelChildren[0].children
-      documentElement = temp[0]
-      const children = temp[0].children
-
-      if (parseInt(overlayContainer.offsetLeft) === 0 ||
-      overlayContainer.style.left !== 0 && parseInt(children[1].offsetLeft) !== 0) {
-        overlayContainer = children[1]
-      }
-
       const documentElementWidth = documentElement.offsetWidth / 1.85
       const overlayContainerLeft = overlayContainer.offsetLeft
       const left = documentElementWidth - overlayContainerLeft - fix

app/components/SimpleEditor/notesEditor/NotesEditor.js

@@ -45,7 +45,7 @@ class NotesEditor extends ProseEditor {
       scrollbarPosition: 'right'
     })
       .append(editorWithComments, $$(Overlay))
-      .attr('id', 'notes-editor-content-panel')
+      .attr('id', 'content-panel-' + this.props.containerId)
       .ref('notesEditorContentPanel')
 
     el.append($$(SplitPane, { sizeA: '100%', splitType: 'horizontal' })

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

@@ -133,8 +133,9 @@ class Notes extends Component {
 
   // TODO -- should be cleaner
   resize (e) {
+    const {containerId} = this.props
     this.notesPaneHeight = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY)
-    const scrollPane = document.getElementById('notes-editor-content-panel').children
+    const scrollPane = document.getElementById('content-panel-' + containerId).children
     scrollPane[0].style.minHeight = this.notesPaneHeight - 40 + 'px'
 
     this.el.el.style.height = this.notesPaneHeight + 'px'
@@ -151,7 +152,8 @@ class Notes extends Component {
   // compute what of main pane?
   // and what is the main pane? the notes pane?
   computeMainPane () {
-    const mainPane = document.getElementById('content-panel')
+    const {containerId} = this.context.editor.props
+    const mainPane = document.getElementById('content-panel-' + containerId)
     mainPane.style.height = this.el.el.offsetTop - 175 + 'px'
   }