search

contentful / live-preview

Preview SDK for both the field tagging connection + live content updates
https://www.contentful.com/developers/docs/tutorials/general/live-preview/
MIT License
65 stars 15 forks source link

Issue in isElementOverlapped with getting topRight element causing InspectorMode to hide edditing overlay #942

Open johollmann opened 3 days ago

johollmann commented 3 days ago

Describe the bug The calculation in isElementOverlapped for getting the topRight element is not working as expected and resulting in hiding the edditing overlay in inspection mode. In the current implementation it returns always the element next to element which is be testing. It is a problem with using "document.elementFromPoint(x, y)" together with the right/top coordinates from "getBoundingClientRect" in utils.ts: https://github.com/contentful/live-preview/blob/3604517d40c15ea0e07277b9a4405a421feb78cf/packages/live-preview-sdk/src/inspectorMode/utils.ts#L364

To Reproduce I have tried to build a jsfiddle for demonstraiting this behaviour: https://jsfiddle.net/y2xmLq7p/2/

Expected behavior Testing in isElementOverlapped for topRight-element is working when there is no overlapping element.

Context (please complete the following information):

aodhagan-cf commented 3 days ago

Hey @johollmann, thanks for highlighting this issue to us. We have it on our radar now and are working on a fix

dndrsn commented 2 days ago

I think this is the same issue. I noticed today that the Live Preview inspect overlay no longer appears for elements with a block child that has the top left coordinates...

The inspect overlay will not appear for something like this:

<div data-contentful-field-id="XXX" data-contentful-entry-id="XXX">
  <div>test</div>
</div>

Add a padding to the parent or margin to the child and the inspect overlay will appear:

<div data-contentful-field-id="XXX" data-contentful-entry-id="XXX" style="padding: 1px;">
  <div>test</div>
</div>

or

<div data-contentful-field-id="XXX" data-contentful-entry-id="XXX">
  <div style="margin: 1px;">test</div>
</div>