options tool in progress

editors/editoria/src/layout/EditoriaLayout.js

@@ -122,18 +122,21 @@ const CommentsContainerNotes = styled.div`
   height: 100%;
 `;
 
-const CommentTrackTools = styled.div`
+const CommentTrackToolsContainer = styled.div`
   padding: ${grid(2)}0 0 0;
   position: fixed;
   display: flex;
   margin-left: 5px;
   z-index: 1;
   height: 30px;
-  width: 29.4%;
+  width: 27%;
   background: #fff;
-  span {
-    margin-left: auto;
-  }
+`;
+
+const CommentTrackTools = styled.div`
+  margin-left: 10px;
+  display: flex;
+  position: relative;
 `;
 
 const NotesAreaContainer = styled.div`
@@ -290,13 +293,13 @@ const EditoriaLayout = ({ editor }) => {
               <WaxSurfaceScroll>
                 <EditorContainer>{editor}</EditorContainer>
                 <CommentsContainer>
-                  <CommentTrackTools>
-                    <span>
+                  <CommentTrackToolsContainer>
+                    <CommentTrackTools>
                       {commentsTracks + trackBlockNodes} COMMENTS AND
                       SUGGESTIONS
                       <CommentTrackToolBar />
-                    </span>
-                  </CommentTrackTools>
+                    </CommentTrackTools>
+                  </CommentTrackToolsContainer>
                   <RightArea area="main" />
                 </CommentsContainer>
               </WaxSurfaceScroll>

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js

+import React from 'react';
+
+const TrackChangeOptionsComponent = ({ view = {}, groups }) => {
+  console.log(groups);
+  return <span>Options</span>;
+};
+
+export default TrackChangeOptionsComponent;

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js

@@ -20,8 +20,8 @@ const DropWrapper = styled.div`
   top: 32px;
 `;
 
-const TrackChangeOptionsTool = ({ view = {}, item }) => {
-  const { icon, title } = item;
+const TrackChangeOptionsTool = ({ view = {}, item, groups }) => {
+  // const { icon, title } = item;
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef();
 
@@ -33,16 +33,17 @@ const TrackChangeOptionsTool = ({ view = {}, item }) => {
         <MenuButton
           active={isOpen}
           disabled={false}
-          iconName={icon}
+          iconName="more"
           onMouseDown={() => {
             setIsOpen(!isOpen);
           }}
-          title={title}
+          // title={title}
         />
 
         {isOpen && (
           <DropWrapper>
             <TrackChangeOptionsComponent
+              groups={groups}
               close={() => {
                 setIsOpen(false);
               }}

wax-prosemirror-services/src/WaxToolGroups/TrackCommentOptionsToolGroupService/TrackCommentOptions.js

 import React, { useMemo } from 'react';
 import { injectable, inject } from 'inversify';
-import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components';
+import { TrackChangeOptionsTool } from 'wax-prosemirror-components';
 import { isEmpty } from 'lodash';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import ToolGroup from '../../lib/ToolGroup';
 
-const Empty = styled.div`
-  background: khaki;
-  height: 100%;
-`;
-
 @injectable()
 class TrackCommentOptions extends ToolGroup {
   tools = [];
   toolGroups = [];
 
-  constructor(@inject('TrackOptions') trackOptions, @inject('Text') text) {
+  constructor(@inject('TrackOptions') trackOptions) {
     super();
     this.toolGroups = [
       {
-        groups: [trackOptions, text],
+        groups: [trackOptions],
       },
     ];
   }
 
   renderTools(view) {
     if (isEmpty(view)) return null;
-
-    return <span>Options</span>;
+    return (
+      <TrackChangeOptionsTool
+        view={view}
+        groups={this._toolGroups[0].groups.map(group => ({
+          //   groupName: group.title.props.title,
+          items: group._tools,
+        }))}
+      />
+    );
   }
 }
 

wax-prosemirror-services/src/WaxToolGroups/TrackOptionsToolGroupService/TrackOptions.js

@@ -5,11 +5,12 @@ import ToolGroup from '../../lib/ToolGroup';
 class TrackOptions extends ToolGroup {
   tools = [];
   constructor(
+    @inject('ShowHideTrackChange') showHideTrackChange,
     @inject('AcceptTrackChange') acceptTrackChange,
     @inject('RejectTrackChange') rejectTrackChange,
   ) {
     super();
-    this.tools = [acceptTrackChange, rejectTrackChange];
+    this.tools = [showHideTrackChange, acceptTrackChange, rejectTrackChange];
   }
 }