fix: fixed changes in hover

Author: SahilCs15

src/visualBuilder/generators/generateOverlay.tsx

@@ -109,6 +109,14 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
     } = elements;
 
     if (visualBuilderOverlayWrapper) {
+        const previousSelectedEditableDOM =
+            VisualBuilder.VisualBuilderGlobalState.value
+                .previousSelectedEditableDOM;
+
+        if (previousSelectedEditableDOM) {
+            sendUnlockFieldEvent(previousSelectedEditableDOM);
+        }
+
         visualBuilderOverlayWrapper.classList.remove("visible");
 
         // Cleanup overlay styles: Top, Right, Bottom, Left & Outline
@@ -128,7 +136,7 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
                 eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
             });
         } else if (noTrigger) {
-            const { previousSelectedEditableDOM, focusFieldValue } =
+            const { focusFieldValue } =
                 VisualBuilder.VisualBuilderGlobalState.value || {};
             if (
                 previousSelectedEditableDOM &&
@@ -209,6 +217,38 @@ export function sendFieldEvent(options: ISendFieldEventParams): void {
             });
     }
 }
+
+export function sendUnlockFieldEvent(editableElement: Element | null): void {
+    if (!editableElement) {
+        return;
+    }
+
+    const cslpData = editableElement.getAttribute("data-cslp");
+    if (!cslpData) {
+        return;
+    }
+
+    const isLocked =
+        editableElement.getAttribute("data-field-locked") === "true";
+    if (!isLocked) {
+        return;
+    }
+
+    const fieldMetadata = extractDetailsFromCslp(cslpData);
+
+    visualBuilderPostMessage?.send(
+        VisualBuilderPostMessageEvents.UNLOCK_FIELD,
+        {
+            fieldMetadata: {
+                content_type_uid: fieldMetadata.content_type_uid,
+                entry_uid: fieldMetadata.entry_uid,
+                fieldPath: fieldMetadata.fieldPath,
+                locale: fieldMetadata.locale,
+                variant: fieldMetadata.variant,
+            },
+        }
+    );
+}
 interface HideOverlayParams
     extends Pick<
         EventListenerHandlerParams,

src/visualBuilder/generators/generateToolbar.tsx

@@ -24,7 +24,7 @@ export function appendFocusedToolbar(
     }
 ): void {
     appendFieldPathDropdown(eventDetails, focusedToolbarElement, options);
-    if(options?.isHover) {
+    if (options?.isHover) {
         return;
     }
     appendFieldToolbar(
@@ -79,9 +79,10 @@ export function appendFieldPathDropdown(
     focusedToolbarElement: HTMLDivElement,
     options?: {
         isHover?: boolean;
+        isLocked?: boolean;
     }
 ): void {
-    const { isHover } = options || {};
+    const { isHover, isLocked: providedIsLocked } = options || {};
     const fieldLabelWrapper = document.querySelector(
         ".visual-builder__focused-toolbar__field-label-wrapper"
     ) as HTMLDivElement | null;
@@ -134,7 +135,10 @@ export function appendFieldPathDropdown(
     focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;
 
     const parentPaths = collectParentCSLPPaths(targetElement, 2);
-    const isLocked = targetElement.getAttribute("data-field-locked") === "true";
+    const isLocked =
+        providedIsLocked !== undefined
+            ? providedIsLocked
+            : targetElement.getAttribute("data-field-locked") === "true";
 
     const wrapper = document.createDocumentFragment();
     render(

src/visualBuilder/listeners/mouseClick.ts

@@ -10,7 +10,11 @@ import {
 
 import { appendFocusedToolbar } from "../generators/generateToolbar";
 
-import { addFocusOverlay, hideOverlay } from "../generators/generateOverlay";
+import {
+    addFocusOverlay,
+    hideOverlay,
+    sendUnlockFieldEvent,
+} from "../generators/generateOverlay";
 
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
 
@@ -32,6 +36,7 @@ import { fixSvgXPath } from "../utils/collabUtils";
 import { v4 as uuidV4 } from "uuid";
 import { CslpData } from "../../cslp/types/cslp.types";
 import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
+import { checkAndApplyFieldLockStatus } from "./mouseHover";
 
 export type HandleBuilderInteractionParams = Omit<
     EventListenerHandlerParams,
@@ -173,8 +178,24 @@ export async function handleBuilderInteraction(
 
     const { editableElement, fieldMetadata } = eventDetails;
 
+    const previousSelectedEditableDOM =
+        VisualBuilder.VisualBuilderGlobalState.value
+            .previousSelectedEditableDOM;
+
+    if (
+        previousSelectedEditableDOM &&
+        previousSelectedEditableDOM !== editableElement
+    ) {
+        sendUnlockFieldEvent(previousSelectedEditableDOM);
+    }
+
     const isFieldLocked = await checkFieldLockStatus(fieldMetadata);
     if (isFieldLocked) {
+        await checkAndApplyFieldLockStatus(
+            editableElement,
+            fieldMetadata,
+            "click"
+        );
         return;
     }
 
@@ -322,14 +343,17 @@ async function handleFieldSchemaAndIndividualFields(
         content_type_uid,
         fieldPath
     );
-    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
-        await fetchEntryPermissionsAndStageDetails({
-            entryUid: entry_uid,
-            contentTypeUid: content_type_uid,
-            locale,
-            variantUid,
-            fieldPathWithIndex,
-        });
+    const {
+        acl: entryAcl,
+        workflowStage: entryWorkflowStageDetails,
+        resolvedVariantPermissions,
+    } = await fetchEntryPermissionsAndStageDetails({
+        entryUid: entry_uid,
+        contentTypeUid: content_type_uid,
+        locale,
+        variantUid,
+        fieldPathWithIndex,
+    });
 
     if (fieldSchema) {
         const { isDisabled } = isFieldDisabled(