Merge branch 'fix-overloay' into 'master'

fix temo link position

See merge request !362

editors/demo/src/Editoria/layout/EditoriaLayout.js

@@ -282,6 +282,7 @@ const EditoriaLayout = ({ editor }) => {
                   </CommentTrackToolsContainer>
                   <RightArea area="main" />
                 </CommentsContainer>
+                <WaxOverlays />
               </WaxSurfaceScroll>
 
               {hasNotes && (
@@ -297,7 +298,7 @@ const EditoriaLayout = ({ editor }) => {
             </PanelGroup>
           </EditorArea>
         </Main>
-        <WaxOverlays />
+
         <WaxBottomRightInfo>
           <InfoContainer id="info-container">
             <BottomRightInfo />

wax-prosemirror-components/src/components/link/LinkComponent.js

 /* eslint react/prop-types: 0 */
 import React, { useRef, useEffect, useState, useContext } from 'react';
 import styled from 'styled-components';
-import { grid, th } from '@pubsweet/ui-toolkit';
+import { grid, th, override } from '@pubsweet/ui-toolkit';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
@@ -17,12 +17,15 @@ const Wrapper = styled.div`
     color: #3a4863;
     text-decoration: none;
   }
+  ${override('Wax.LinkContainer')}
 `;
 
 const LinkWrapper = styled.div`
   display: inline-block;
   width: 250px;
   margin-right: 12px;
+
+  ${override('Wax.LinkWrapper')}
 `;
 
 const Input = styled.input`
@@ -32,6 +35,7 @@ const Input = styled.input`
   :focus {
     outline: none;
   }
+  ${override('Wax.LinkInput')}
 `;
 
 const ButtonGroup = styled.div`
@@ -43,13 +47,18 @@ const StyledButton = styled.button`
   background: ${th('colorPrimary')};
   cursor: pointer;
   color: #fff;
+
+  ${override('Wax.LinkCreate')}
 `;
 
 const StyledButtonCancel = styled.button`
   margin-right: 10px;
   background: #fff
   cursor: pointer;
-  color:${th('colorPrimary')};;
+  color:${th('colorPrimary')};
+
+    ${override('Wax.LinkCancel')}
+
 `;
 
 const LinkComponent = ({ mark, setPosition, position }) => {

wax-prosemirror-services/src/OverlayService/usePosition.js

@@ -33,8 +33,15 @@ export default options => {
     const WaxSurface = focusedView.dom.getBoundingClientRect();
     const start = focusedView.coordsAtPos(from);
     const end = focusedView.coordsAtPos(to);
+    // const { left } = end;
+    // const top = end.top + 20;
+
+    // TEMP FIX
+
+    const parent = focusedView.dom.parentNode.getBoundingClientRect();
+
     const { left } = end;
-    const top = end.top + 20;
+    const top = parent.top + 20;
     return {
       top,
       left,