VB-248 fixed the cursor moving to the start with a explicitly adding pseudo element on second time a field is visited

Author: SahilCs15

src/visualBuilder/utils/enableInlineEditing.ts

@@ -31,6 +31,7 @@ export function enableInlineEditing({
     const elementComputedDisplay =
         window.getComputedStyle(actualEditableField).display;
 
+    
     let textContent =
         (editableElement as HTMLElement).innerText ||
         editableElement.textContent ||
@@ -41,14 +42,17 @@ export function enableInlineEditing({
         actualEditableField.addEventListener("paste", pasteAsPlainText);
     }
     const expectedTextContent = expectedFieldData;
+    
+    const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
     if (
         (expectedTextContent && textContent !== expectedTextContent) ||
-        isEllipsisActive(editableElement as HTMLElement)
+        isEllipsisActive(editableElement as HTMLElement) ||
+        isFieldLastEdited
     ) {
         // TODO: Testing will be done in the E2E.
         const pseudoEditableField = generatePseudoEditableElement(
             { editableElement: editableElement as HTMLElement },
-            { textContent: expectedFieldData }
+            { textContent: expectedFieldData } 
         );
 
         (editableElement as HTMLElement).style.visibility = "hidden";
@@ -90,6 +94,9 @@ export function enableInlineEditing({
     actualEditableField.setAttribute("contenteditable", "true");
     actualEditableField.addEventListener("input", handleFieldInput);
     actualEditableField.addEventListener("keydown", handleFieldKeyDown);
+
+    editableElement.setAttribute("data-cs-last-edited", "true");
+
     // focus on the contenteditable element to start accepting input
     actualEditableField.focus();
 

src/visualBuilder/utils/handleFieldMouseDown.ts

@@ -16,6 +16,12 @@ export function handleFieldInput(e: Event): void {
     const fieldType = targetElement.getAttribute(
         VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
     ) as FieldDataType | null;
+
+    const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
+    if (previousLastEditedElement !== targetElement) {
+        previousLastEditedElement?.removeAttribute("data-cs-last-edited");
+        targetElement.setAttribute("data-cs-last-edited", "true");
+    }
     if (
         event.type === "input" &&
         ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)