From 7e5b9b0d3373ab1ae1fa0f6a156564c0a8ece983 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 12 Mar 2021 09:23:38 +0200
Subject: [PATCH] correct top for comment boxes
---
editors/editoria/src/Editoria.js | 3 ++-
editors/editoria/src/layout/EditoriaLayout.js | 2 +-
.../src/components/rightArea/RightArea.js | 13 +++++++++++--
3 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 33d5439b3..f63c5021f 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,5 +1,5 @@
import React, { useLayoutEffect, useState, useMemo } from 'react';
-import { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
import { Wax } from 'wax-prosemirror-core';
@@ -56,6 +56,7 @@ const Editoria = () => {
() => (
<>
<GlobalStyle />
+ <div>Hello</div>
<Wax
key={key}
config={finalConfig}
diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js
index f64c6cce5..ae7008ab4 100644
--- a/editors/editoria/src/layout/EditoriaLayout.js
+++ b/editors/editoria/src/layout/EditoriaLayout.js
@@ -248,7 +248,7 @@ const EditoriaLayout = ({ editor }) => {
return (
<ThemeProvider theme={cokoTheme}>
- <Wrapper style={fullScreenStyles}>
+ <Wrapper style={fullScreenStyles} id="wax-container">
<TopMenu>
<MainMenuToolBar />
</TopMenu>
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index b4c21bdaa..9fcbe9529 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -58,15 +58,24 @@ export default ({ area }) => {
annotationTop =
markNodeEl.getBoundingClientRect().top - WaxSurface.top;
} else {
+ // Notes
panelWrapper = document.getElementsByClassName('panelWrapper');
panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
markNodeEl = document
.querySelector('#notes-container')
.querySelector(`[data-id="${id}"]`);
- if (markNodeEl)
+ if (markNodeEl) {
+ const WaxContainerTop = document
+ .querySelector('#wax-container')
+ .getBoundingClientRect().top;
+
annotationTop =
- markNodeEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+ markNodeEl.getBoundingClientRect().top -
+ panelWrapperHeight -
+ WaxContainerTop -
+ 50;
+ }
}
let boxEl = null;
--
GitLab