fixes

wax-prosemirror-components/src/components/comments/CommentComponent.js

@@ -36,7 +36,9 @@ export default ({ area }) => {
       //annotation top
       if (area === "main") {
         commentEl = document.querySelector(`span[data-id="${id}"]`);
-        annotationTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+        if (commentEl)
+          annotationTop =
+            commentEl.getBoundingClientRect().top - WaxSurface.top;
       } else {
         const panelWrapper = document.getElementsByClassName("panelWrapper");
         const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
@@ -44,8 +46,9 @@ export default ({ area }) => {
         commentEl = document
           .querySelector("#notes-container")
           .querySelector(`span[data-id="${id}"]`);
-        annotationTop =
-          commentEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+        if (commentEl)
+          annotationTop =
+            commentEl.getBoundingClientRect().top - panelWrapperHeight - 50;
       }
 
       // get height of this comment box
@@ -148,7 +151,6 @@ const updateComments = view => {
         groupedComments[comment[0].attrs.group].push(comment[0]);
       }
     });
-
     return groupedComments;
   }
   return [];

wax-prosemirror-components/src/components/notes/NoteEditorContainer.js

@@ -9,6 +9,7 @@ const NoteEditorContainerStyled = styled.div`
   min-height: 28px;
   width: 100%;
   position: relative;
+  margin-bottom: 5px;
 `;
 
 const NoteStyled = styled.div`

wax-prosemirror-core/src/ioc-react.js

@@ -19,7 +19,7 @@ export default props => {
       setContext({
         ...context,
         view: Object.assign(context.view, view),
-        activeView: view.main || view,
+        activeView: view.activeView || view,
         activeViewId: view.activeViewId
       });
     },

wax-prosemirror-core/src/services/LayoutService/Layout.js

 import { injectable } from "inversify";
-import { DefaultLayout } from "wax-prosemirror-layouts";
+import DefaultLayout from "wax-prosemirror-layouts/src/layouts/DefaultLayout";
 import LayoutFactory from "./components/LayoutFactory";
 
 @injectable()

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

@@ -200,10 +200,17 @@ const hasNotes = main => {
   return notes;
 };
 
+const LeftSideBar = componentPlugin("leftSideBar");
+const RightSideBar = componentPlugin("rightSideBar");
+const TopBar = componentPlugin("topBar");
+const NotesArea = componentPlugin("notesArea");
+const CommentsArea = componentPlugin("commentsArea");
+const WaxOverlays = componentPlugin("waxOverlays");
+
 const withNotes = () => {
   return (
     <NotesAreaContainer>
-      <NotesContainer id="notes-container">
+      <NotesContainer>
         <NotesArea />
       </NotesContainer>
       <CommentsContainer>
@@ -214,13 +221,6 @@ const withNotes = () => {
 };
 
 const EditoriaLayout = ({ editor }) => {
-  const LeftSideBar = componentPlugin("leftSideBar");
-  const RightSideBar = componentPlugin("rightSideBar");
-  const TopBar = componentPlugin("topBar");
-  const NotesArea = componentPlugin("notesArea");
-  const CommentsArea = componentPlugin("commentsArea");
-  const WaxOverlays = componentPlugin("waxOverlays");
-
   const { view: { main } } = useContext(WaxContext);
   let AreasWithNotes = null;