diff --git a/wax-prosemirror-core/src/config/defaultServices/OverlayService/OverlayComponent.js b/wax-prosemirror-core/src/config/defaultServices/OverlayService/OverlayComponent.js index d324297306e166a9579f57124d9bc346ad96587b..5a5f1cf0b3ffa948bf1d2f02cb2724e12937ff11 100644 --- a/wax-prosemirror-core/src/config/defaultServices/OverlayService/OverlayComponent.js +++ b/wax-prosemirror-core/src/config/defaultServices/OverlayService/OverlayComponent.js @@ -7,6 +7,7 @@ import usePosition from './usePosition'; export default (Component, markType) => props => { const context = useContext(WaxContext); const [position, setPosition, mark] = usePosition(markType); + const component = useMemo( () => ( <Component @@ -18,8 +19,7 @@ export default (Component, markType) => props => { ), [JSON.stringify(mark), position, context.activeViewId], ); - const visible = !!position.left; - + const visible = position.left !== null; return ( <Overlay position={position}> {props.activeViewId === context.activeViewId && visible && component} diff --git a/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js b/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js index 1d17d47a967c28ad9297285874685567ec5382fe..e33fa0a72fa05ddfe977eba00dd78248f4d5ae01 100644 --- a/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js +++ b/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js @@ -111,17 +111,22 @@ const AskAIOverlay = ({ setPosition, position, config }) => { useLayoutEffect(() => { const WaxSurface = activeView.dom.getBoundingClientRect(); const { selection } = activeView.state; - const { to } = selection; + const { from, to } = selection; + const start = activeView.coordsAtPos(from); const end = activeView.coordsAtPos(to - 1); const overLayComponent = document.getElementById('ai-overlay'); const overLayComponentCoords = overLayComponent.getBoundingClientRect(); const top = end.top - WaxSurface.top + 20; - let left = end.left - WaxSurface.left; + let left = end.left - WaxSurface.left - overLayComponentCoords.width / 2; + + if (end.left - overLayComponentCoords.width / 2 < WaxSurface.left) { + left += WaxSurface.left - (end.left - overLayComponentCoords.width / 2); + } // Don't get out of right boundary of the surface - if (end.left + overLayComponentCoords.width > WaxSurface.right) { - left -= end.left + overLayComponentCoords.width - WaxSurface.right; + if (end.left + overLayComponentCoords.width / 2 > WaxSurface.right) { + left -= end.left + overLayComponentCoords.width / 2 - WaxSurface.right; } setPosition({ ...position, left, top });