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

.talismanrc

@@ -10,6 +10,8 @@ fileignoreconfig:
       checksum: d0ef271ee5381d9feab06bda6e7e89bd0a882fee87495627bd811c1f0a5459c7
     - filename: package-lock.json
       checksum: fd06363871d0ee16ebfb5d9d0cc479e0922a615bb76584b80bb6933ee6c3e237
+    - filename: src/visualBuilder/utils/__test__/handleFieldMouseDown.test.ts
+      checksum: dc20802eab76834de7aadb797b14076f1f1a9c0662b32493563fe68fd5cd6e16
     - filename: CHANGELOG.md
       checksum: 873106e25dafe0355c55724936cfe0ecc9d0192a2a82c98eddaf5648f23d5ee7
 version: "1.0"

src/visualBuilder/utils/__test__/enableInlineEditing.test.ts

@@ -40,6 +40,7 @@ vi.mock("../../generators/generatePseudoEditableField", () => ({
     generatePseudoEditableElement: vi.fn(() => {
         const pseudoElement = document.createElement("div");
         pseudoElement.setAttribute("data-testid", "pseudo-element");
+        pseudoElement.className = "visual-builder__pseudo-editable-element";
         return pseudoElement;
     }),
     isEllipsisActive: vi.fn(() => false),
@@ -276,4 +277,116 @@ describe("enableInlineEditing", () => {
             VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue
         ).toBe("Test content");
     });
+
+    it("should create pseudo element when field is last edited", () => {
+        document.body.appendChild(editableElement);
+        editableElement.setAttribute("data-cs-last-edited", "true");
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("hidden");
+        expect(resizeObserver.observe).toHaveBeenCalled();
+
+        document.body.removeChild(editableElement);
+    });
+
+    it("should set data-cs-last-edited attribute on editable element", () => {
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(editableElement.getAttribute("data-cs-last-edited")).toBe("true");
+    });
+
+    it("should create pseudo element when field is last edited even with same content", () => {
+        document.body.appendChild(editableElement);
+        editableElement.setAttribute("data-cs-last-edited", "true");
+        editableElement.textContent = "Test content";
+        editableElement.innerText = "Test content";
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("hidden");
+
+        document.body.removeChild(editableElement);
+    });
+
+    it("should not create pseudo element when field is not last edited and content matches", () => {
+        const otherElement = document.createElement("div");
+        otherElement.setAttribute("data-cs-last-edited", "true");
+        document.body.appendChild(otherElement);
+
+        editableElement.textContent = "Test content";
+        editableElement.innerText = "Test content";
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).not.toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("");
+        expect(editableElement.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(otherElement);
+    });
+
+    it("should not create nested pseudo elements when pseudo element is clicked", () => {
+        document.body.appendChild(editableElement);
+        editableElement.setAttribute("data-cs-last-edited", "true");
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("hidden");
+
+        const pseudoElement = visualBuilderContainer.querySelector(".visual-builder__pseudo-editable-element");
+        expect(pseudoElement).toBeTruthy();
+        expect(pseudoElement?.getAttribute("data-cslp")).toBeNull();
+        expect(editableElement.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(editableElement);
+    });
 });

src/visualBuilder/utils/__test__/handleFieldMouseDown.test.ts

@@ -328,4 +328,69 @@ describe("`handleFieldInput`", () => {
             VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput
         ).toBe(true);
     });
+
+    test("should manage data-cs-last-edited attribute when field receives input", () => {
+        const previousField = document.createElement("div");
+        previousField.setAttribute("data-cs-last-edited", "true");
+        document.body.appendChild(previousField);
+
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(previousField.getAttribute("data-cs-last-edited")).toBeNull();
+        expect(h1.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(previousField);
+    });
+
+    test("should not change data-cs-last-edited attribute when same field receives input", () => {
+        h1.setAttribute("data-cs-last-edited", "true");
+
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(h1.getAttribute("data-cs-last-edited")).toBe("true");
+    });
+
+    test("should set data-cs-last-edited attribute on new field when no previous field exists", () => {
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(h1.getAttribute("data-cs-last-edited")).toBe("true");
+    });
+
+    test("should transfer data-cs-last-edited attribute between multiple fields", () => {
+        const field1 = document.createElement("div");
+        const field2 = document.createElement("div");
+        field1.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, "number");
+        field2.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, "number");
+        field1.setAttribute("data-cs-last-edited", "true");
+
+        field1.addEventListener("input", handleFieldInput);
+        field2.addEventListener("input", handleFieldInput);
+
+        document.body.appendChild(field1);
+        document.body.appendChild(field2);
+
+        const inputEvent1 = new InputEvent("input", { bubbles: true });
+        field1.dispatchEvent(inputEvent1);
+
+        expect(field1.getAttribute("data-cs-last-edited")).toBe("true");
+        expect(field2.getAttribute("data-cs-last-edited")).toBeNull();
+
+        const inputEvent2 = new InputEvent("input", { bubbles: true });
+        field2.dispatchEvent(inputEvent2);
+
+        expect(field1.getAttribute("data-cs-last-edited")).toBeNull();
+        expect(field2.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(field1);
+        document.body.removeChild(field2);
+    });
 });

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)