fix: psuedo-editable element re-positioning logic

Author: faraazb-contentstack

src/visualBuilder/components/pseudoEditableField.tsx

@@ -1,8 +1,7 @@
 import classNames from "classnames";
-import getCamelCaseStyles from "../utils/getCamelCaseStyles";
-import getStyleOfAnElement from "../utils/getStyleOfAnElement";
 import React from "preact/compat";
 import { visualBuilderStyles } from "../visualBuilder.style";
+import { getPsuedoEditableElementStyles } from "../utils/getPsuedoEditableStylesElement";
 
 interface PseudoEditableFieldProps {
     editableElement: HTMLElement;
@@ -12,27 +11,14 @@ interface PseudoEditableFieldProps {
 function PseudoEditableFieldComponent(
     props: PseudoEditableFieldProps
 ): JSX.Element {
-    const styles = getCamelCaseStyles(
-        getStyleOfAnElement(props.editableElement)
-    );
-    // 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 rect = props.editableElement.getBoundingClientRect();
-
-    styles.position = "absolute";
-    styles.top = `${rect.top + window.scrollY}px`;
-    styles.left = `${rect.left + window.scrollX}px`;
-    // setting height to auto so that the element can grow based on the content
-    // and the resize observer can detect the change in height
-    styles.height = "auto";
-    styles.whiteSpace = "pre-line"
-    styles.textTransform = "none"
+    const styles = getPsuedoEditableElementStyles(props.editableElement, true);
 
     return (
         <div
-            className={
-                classNames("visual-builder__pseudo-editable-element", visualBuilderStyles()["visual-builder__pseudo-editable-element"])
-            }
+            className={classNames(
+                "visual-builder__pseudo-editable-element",
+                visualBuilderStyles()["visual-builder__pseudo-editable-element"]
+            )}
             data-testid="visual-builder__pseudo-editable-element"
             style={styles}
         >

src/visualBuilder/index.ts

@@ -76,7 +76,6 @@ export class VisualBuilder {
             visualBuilderContainer: this.visualBuilderContainer,
             overlayWrapper: this.overlayWrapper,
             focusedToolbar: this.focusedToolbar,
-            resizeObserver: this.resizeObserver,
         });
     }
 

src/visualBuilder/utils/getPsuedoEditableStylesElement.ts

@@ -0,0 +1,26 @@
+import getCamelCaseStyles from "./getCamelCaseStyles";
+import getStyleOfAnElement from "./getStyleOfAnElement";
+
+export function getPsuedoEditableElementStyles(
+    psuedoEditableElement: HTMLElement,
+    camelCase?: boolean
+): { [key: string]: string } {
+    let styles = getStyleOfAnElement(psuedoEditableElement);
+    if (camelCase) {
+        styles = getCamelCaseStyles(styles);
+    }
+    // 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 rect = psuedoEditableElement.getBoundingClientRect();
+
+    styles.position = "absolute";
+    styles.top = `${rect.top + window.scrollY}px`;
+    styles.left = `${rect.left + window.scrollX}px`;
+    // setting height to auto so that the element can grow based on the content
+    // and the resize observer can detect the change in height
+    styles.height = "auto";
+    styles.whiteSpace = "pre-line";
+    styles.textTransform = "none";
+
+    return styles;
+}

src/visualBuilder/utils/getStyleOfAnElement.ts

@@ -17,6 +17,8 @@ export default function getStyleOfAnElement(element: HTMLElement): {
         "right",
         "bottom",
         "text-overflow",
+        // allows seeing the text from CMS field as-is
+        "text-transform",
         "margin",
         "margin-block-end",
         "margin-block-start",

src/visualBuilder/utils/handleIndividualFields.ts

@@ -200,7 +200,6 @@ export async function handleIndividualFields(
                         editableElement: actualEditableField,
                         visualBuilderContainer,
                         overlayWrapper,
-                        resizeObserver,
                         focusedToolbar,
                     });
                 }, 200);