fix styles

editors/demo/src/Editors.js

@@ -18,7 +18,13 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
+const ProjectContainer = styled.div`
+  display: flex;
+  height: calc(100% - 55px);
+`;
+
 const ChooseProject = styled.div`
+  background: #fff;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -48,7 +54,7 @@ const Editors = () => {
       case 'ncbi':
         break;
       default:
-        return <HHMI />;
+        return <Editoria />;
     }
   };
 
@@ -65,7 +71,7 @@ const Editors = () => {
           {/* <ProjectButton onClick={() => setProject('ncbi')}>NCBI</ProjectButton> */}
         </Projects>
       </ChooseProject>
-      {displayProject()}
+      <ProjectContainer>{displayProject()}</ProjectContainer>
     </>
   );
 };

editors/demo/src/HHMI/HHMI.js

@@ -4,7 +4,6 @@ import { Wax } from 'wax-prosemirror-core';
 
 import { HhmiLayout } from './layout';
 import { config } from './config';
-import TestComponent from './MultipleChoiceQuestionService/components/TestComponent';
 
 const renderImage = file => {
   const reader = new FileReader();

editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestionService.js

 import { Service } from 'wax-prosemirror-services';
-// import { MultipleChoicePlugin } from 'wax-prosemirror-plugins';
 import MultipleChoiceQuestion from './MultipleChoiceQuestion';
 import multipleChoiceNode from './schema/multipleChoiceNode';
 import TestComponent from './components/TestComponent';
 
 class MultipleChoiceQuestionService extends Service {
-  boot() {
-
-  }
+  boot() {}
 
   register() {
     this.container.bind('MultipleChoiceQuestion').to(MultipleChoiceQuestion);
@@ -17,7 +14,7 @@ class MultipleChoiceQuestionService extends Service {
     });
     const addPortal = this.container.get('AddPortal');
 
-    addPortal({name: 'multiple_choice', component: TestComponent})
+    addPortal({ name: 'multiple_choice', component: TestComponent });
   }
 }
 

editors/demo/src/HHMI/layout/HhmiLayout.js

@@ -35,7 +35,7 @@ const TopMenu = styled.div`
   border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
   border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
   display: flex;
-  min-height: 40px;
+  height: 40px;
   user-select: none;
 
   > div:not(:last-child) {
@@ -66,7 +66,8 @@ const WaxSurfaceScroll = styled.div`
   display: flex;
   height: 100%;
   overflow-y: auto;
-  position: absolute;
+  position: fixed;
+  top: 95px;
   width: 100%;
   /* PM styles  for main content*/
   ${EditorElements};
@@ -74,11 +75,10 @@ const WaxSurfaceScroll = styled.div`
 
 const EditorContainer = styled.div`
   height: 100%;
-  width: 65%;
+  width: 100%;
 
   .ProseMirror {
-    box-shadow: 0 0 8px #ecedf1;
-    min-height: 98%;
+    height: 100%;
     padding: ${grid(10)};
   }
 `;
@@ -111,7 +111,6 @@ const HhmiLayout = ({ editor }) => {
         <TopMenu>
           <MainMenuToolBar />
         </TopMenu>
-
         <Main>
           <EditorArea>
             <WaxSurfaceScroll>
@@ -119,7 +118,6 @@ const HhmiLayout = ({ editor }) => {
             </WaxSurfaceScroll>
           </EditorArea>
         </Main>
-        WaxOverlays
         <WaxOverlays />
       </Wrapper>
     </ThemeProvider>