find inline comments in the whole document

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

 import React, { useEffect, useRef, useContext } from "react";
+import styled from "styled-components";
 
-export default ({ node, view }) => {
-  useEffect(() => {}, []);
-};
+// export default ({ node, view }) => {
+//   useEffect(() => {}, []);
+// };
+
+const CommentBoxStyled = styled.div`
+  height: 50px;
+  width: 50px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  background: black;
+`;
+
+const CommentBox = () => <CommentBoxStyled />;
+export default CommentBox;

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

@@ -30,7 +30,11 @@ export default () => {
 
 const updateComments = view => {
   if (view) {
-    // TODO find comments
+    return DocumentHelpers.findChildrenByMark(
+      view.state.doc,
+      view.state.schema.marks.comment,
+      true
+    );
   }
   return [];
 };

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

@@ -171,7 +171,7 @@ const NotesContainer = styled.div`
 
 const CommentsContainer = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   width: 35%;
   height: 100%;
 `;

wax-prosemirror-utilities/src/document/DocumentHelpers.js

@@ -55,9 +55,14 @@ const findInlineNodes = (node, descend) => {
   return findChildren(node, child => child.isInline, descend);
 };
 
+const findChildrenByMark = (node, markType, descend) => {
+  return findChildren(node, child => markType.isInSet(child.marks), descend);
+};
+
 export default {
   findMark,
   findBlockNodes,
   findChildrenByType,
-  findInlineNodes
+  findInlineNodes,
+  findChildrenByMark
 };