Skip to content

Commit

Permalink
Fix pusedoEditableElement's position
Browse files Browse the repository at this point in the history
  • Loading branch information
SAYAN BAKSHI committed May 15, 2024
1 parent 821b341 commit 0987d48
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions src/liveEditor/components/pseudoEditableField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ function PseudoEditableFieldComponent(
const styles = getCamelCaseStyles(
getStyleOfAnElement(props.editableElement)
);
const { top, left } = props.editableElement.getBoundingClientRect();
// Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
// The pseudo editable element is positioned absolutely at the same location as the editable element
const { offsetTop, offsetLeft } = props.editableElement;

styles.position = "absolute";
styles.top = `${top}px`;
styles.left = `${left}px`;
styles.top = `${offsetTop}px`;
styles.left = `${offsetLeft}px`;

return (
<div
Expand Down

1 comment on commit 0987d48

@sayan-contentstack
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially, top and left gave values based on the viewport, i.e relative to the canvas.
However the psuedoEditableElement is being pushed into the visual-editor__container, which is inside the body of the client app. Now putting the position absolute to its parent, that is the editor container, we get the psuedoEditableElement in the wrong position.

To fix this, we can use the offsetTop and offsetLeft to get the editableElement's absolute position and use that instead to properly render over the div.

Please sign in to comment.