fix:utility added for styles handlling

Author: csAdityaPachauri

src/visualBuilder/utils/clearStyles.ts

@@ -0,0 +1,34 @@
+const originalStyles = new WeakMap<
+    HTMLElement,
+    {
+        visibility?: string;
+        transition?: string;
+        animation?: string;
+    }
+>();
+
+export function clearVisibelityStyles(element: HTMLElement) {
+    const originalStyleValues = {
+        visibility: element.style.visibility,
+        transition: element.style.transition,
+        animation: element.style.animation,
+    };
+
+    originalStyles.set(element, originalStyleValues);
+
+    element.style.visibility = "hidden";
+    element.style.transition = "none";
+    element.style.animation = "none";
+}
+
+export function restoreVisibelityStyles(element: HTMLElement) {
+    const storedStyles = originalStyles.get(element);
+
+    if (storedStyles) {
+        element.style.visibility = storedStyles.visibility || "";
+        element.style.transition = storedStyles.transition || "";
+        element.style.animation = storedStyles.animation || "";
+
+        originalStyles.delete(element);
+    }
+}

src/visualBuilder/utils/enableInlineEditing.ts

@@ -10,6 +10,7 @@ import { handleFieldInput, handleFieldKeyDown } from "./handleFieldMouseDown";
 import { FieldDataType, VisualBuilderEditContext } from "./types/index.types";
 import { updateFocussedState } from "./updateFocussedState";
 import { pasteAsPlainText } from "./pasteAsPlainText";
+import { clearVisibelityStyles } from "./clearStyles";
 
 export function enableInlineEditing({
     expectedFieldData,
@@ -31,7 +32,6 @@ export function enableInlineEditing({
     const elementComputedDisplay =
         window.getComputedStyle(actualEditableField).display;
 
-    
     let textContent =
         (editableElement as HTMLElement).innerText ||
         editableElement.textContent ||
@@ -42,8 +42,9 @@ export function enableInlineEditing({
         actualEditableField.addEventListener("paste", pasteAsPlainText);
     }
     const expectedTextContent = expectedFieldData;
-    
-    const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
+
+    const isFieldLastEdited =
+        document.querySelector("[data-cs-last-edited]") === editableElement;
     if (
         (expectedTextContent && textContent !== expectedTextContent) ||
         isEllipsisActive(editableElement as HTMLElement) ||
@@ -52,14 +53,12 @@ export function enableInlineEditing({
         // TODO: Testing will be done in the E2E.
         const pseudoEditableField = generatePseudoEditableElement(
             { editableElement: editableElement as HTMLElement },
-            { textContent: expectedFieldData } 
+            { textContent: expectedFieldData }
         );
 
         // Hide original element immediately, disabling any transitions/animations
         const originalElement = editableElement as HTMLElement;
-        originalElement.style.visibility = "hidden";
-        originalElement.style.transition = "none";
-        originalElement.style.animation = "none";
+        clearVisibelityStyles(originalElement);
 
         // set field type attribute to the pseudo editable field
         // ensures proper keydown handling similar to the actual editable field

src/visualBuilder/utils/handleIndividualFields.ts

@@ -16,6 +16,7 @@ import { VisualBuilderEditContext } from "./types/index.types";
 import { pasteAsPlainText } from "./pasteAsPlainText";
 import { removeFieldToolbar } from "../generators/generateToolbar";
 import { fetchEntryPermissionsAndStageDetails } from "./fetchEntryPermissionsAndStageDetails";
+import { restoreVisibelityStyles } from "./clearStyles";
 
 /**
  * It handles all the fields based on their data type and its "multiple" property.
@@ -154,9 +155,7 @@ export function cleanIndividualFieldResidual(elements: {
         pseudoEditableElement.removeEventListener("paste", pasteAsPlainText);
         pseudoEditableElement.remove();
         if (previousSelectedEditableDOM) {
-            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(
-                "visibility"
-            );
+            restoreVisibelityStyles(previousSelectedEditableDOM as HTMLElement);
         }
     }
 

src/visualBuilder/utils/truncateHandler.ts

@@ -6,7 +6,6 @@
 interface LineClampStyles {
     webkitLineClamp?: string;
     overflow?: string;
-    display?: string;
     webkitBoxOrient?: string;
     whiteSpace?: string;
 }
@@ -36,10 +35,6 @@ export function removeTruncateStyles(element: Element): void {
         styles.overflow = computedStyles.overflow;
     }
 
-    if (computedStyles.display && computedStyles.display.includes("box")) {
-        styles.display = computedStyles.display;
-    }
-
     if (
         computedStyles.webkitBoxOrient &&
         computedStyles.webkitBoxOrient !== "horizontal"
@@ -58,10 +53,6 @@ export function removeTruncateStyles(element: Element): void {
         // Remove the styles
         element.style.webkitLineClamp = "none";
         element.style.overflow = "visible";
-        // Reset display if it was -webkit-box
-        if (styles.display?.includes("box")) {
-            element.style.display = "block";
-        }
         if (styles.webkitBoxOrient) {
             element.style.webkitBoxOrient = "horizontal";
         }
@@ -94,12 +85,6 @@ export function restoreTruncateStyles(element: Element): void {
         element.style.removeProperty("overflow");
     }
 
-    if (storedStyles.display) {
-        element.style.display = storedStyles.display;
-    } else {
-        element.style.removeProperty("display");
-    }
-
     if (storedStyles.webkitBoxOrient) {
         element.style.webkitBoxOrient = storedStyles.webkitBoxOrient;
     } else {
@@ -128,7 +113,6 @@ export function hasTruncateStyles(element: Element): boolean {
     return (
         computedStyles.webkitLineClamp !== "none" ||
         (computedStyles.overflow === "hidden" &&
-            computedStyles.display?.includes("box") &&
             computedStyles.webkitBoxOrient === "vertical") ||
         computedStyles.whiteSpace === "nowrap"
     );