feat(collab): pause collab mode in preview share

contentstack · Feb 21, 2025 · fd6bd12 · fd6bd12
1 parent e9b135a
commit fd6bd12
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 8 deletions.
diff --git a/src/configManager/config.default.ts b/src/configManager/config.default.ts
@@ -89,6 +89,8 @@ export function getDefaultConfig(): IConfig {
         },
         collab: {
             enable: false,
+            fromShare: false,
+            pauseFeedback: false,
             isFeedbackMode: false,
             inviteMetadata: {
                 currentUser: {

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -90,6 +90,8 @@ export declare interface IConfig {
     };
     collab: {
         enable: boolean;
+        fromShare: boolean;
+        pauseFeedback: boolean;
         isFeedbackMode: boolean;
         inviteMetadata: IInviteMetadata;
     };

diff --git a/src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx b/src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx
@@ -533,13 +533,14 @@ const CommentTextArea: React.FC<ICommentTextArea> = React.memo(
                                         tabIndex={-1}
                                         aria-selected={index === selectedIndex}
                                     >
-                                        <Tooltip
-                                            content={user.display}
-                                        ></Tooltip>
-                                        {user.display.length > 20
-                                            ? user.display.substring(0, 18) +
-                                              "..."
-                                            : user.display}
+                                        {user.display.length > 20 ? (
+                                            <Tooltip content={user.display}>
+                                                {user.display.substring(0, 18) +
+                                                    "..."}
+                                            </Tooltip>
+                                        ) : (
+                                            user.display
+                                        )}
                                     </li>
                                 ))}
                             </ul>

diff --git a/src/visualBuilder/eventManager/useCollab.ts b/src/visualBuilder/eventManager/useCollab.ts
@@ -3,23 +3,38 @@ import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types
 import Config from "../../configManager/configManager";
 import {
     removeAllCollabIcons,
+    hideAllCollabIcons,
     removeCollabIcon,
     HighlightThread,
+    showAllCollabIcons,
 } from "../generators/generateThread";
 import {
     generateThread,
     handleMissingThreads,
 } from "../generators/generateThread";
 import { IThreadDTO } from "../types/collab.types";
 
-const handleRemoveCommentIcons = (): void => {
+const handleRemoveCommentIcons = (fromShare: boolean = false): void => {
+    if (fromShare) {
+        hideAllCollabIcons();
+        return;
+    }
     removeAllCollabIcons();
 };
 
 export const useCollab = () => {
     const collabEnable = visualBuilderPostMessage?.on(
         VisualBuilderPostMessageEvents.COLLAB_ENABLE,
         (data: any) => {
+            if (data?.data?.collab?.fromShare) {
+                Config.set(
+                    "collab.pauseFeedback",
+                    data?.data?.collab?.pauseFeedback
+                );
+                showAllCollabIcons();
+                return;
+            }
+
             if (!data?.data?.collab) {
                 console.error("Invalid collab data structure:", data);
                 return;
@@ -51,6 +66,15 @@ export const useCollab = () => {
     const collabDisable = visualBuilderPostMessage?.on(
         VisualBuilderPostMessageEvents.COLLAB_DISABLE,
         (data: any) => {
+            if (data?.data?.collab?.fromShare) {
+                Config.set(
+                    "collab.pauseFeedback",
+                    data?.data?.collab?.pauseFeedback
+                );
+                handleRemoveCommentIcons(true);
+                return;
+            }
+
             Config.set("collab.enable", false);
             Config.set("collab.isFeedbackMode", false);
 

diff --git a/src/visualBuilder/generators/generateThread.tsx b/src/visualBuilder/generators/generateThread.tsx
@@ -95,6 +95,8 @@ export function updateCollabIconPosition() {
     const icons = document.querySelectorAll(
         ".visual-builder__collab-wrapper .collab-thread"
     );
+    const config = Config.get?.();
+    if (config?.collab?.pauseFeedback) return;
 
     icons.forEach((icon) => {
         if (!(icon instanceof HTMLElement)) return;
@@ -137,6 +139,9 @@ export function updatePopupPositions() {
         ".visual-builder__collab-wrapper .collab-thread .collab-popup"
     );
 
+    const config = Config.get?.();
+    if (config?.collab?.pauseFeedback) return;
+
     popups.forEach((popup) => {
         if (popup && popup instanceof HTMLElement) {
             const parent = popup.closest(
@@ -217,12 +222,29 @@ export function removeAllCollabIcons(): void {
     icons?.forEach((icon) => icon?.remove());
 }
 
+export function hideAllCollabIcons(): void {
+    const icons = document.querySelectorAll(
+        ".visual-builder__collab-wrapper .collab-thread"
+    );
+    icons?.forEach((icon) => icon?.classList.add(hiddenClass));
+}
+
+export function showAllCollabIcons(): void {
+    const icons = document.querySelectorAll(
+        ".visual-builder__collab-wrapper .collab-thread"
+    );
+    icons?.forEach((icon) => icon?.classList.remove(hiddenClass));
+}
+
 export function removeCollabIcon(threadUid: string): void {
     const thread = document.querySelector(`div[threaduid='${threadUid}']`);
     thread?.remove();
 }
 
 export function HighlightThread(threadUid: string): void {
+    const config = Config.get?.();
+    if (config?.collab?.pauseFeedback) return;
+
     document.dispatchEvent(
         new CustomEvent("toggleCollabPopup", {
             detail: { threadUid, action: "open" },

diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts
@@ -87,6 +87,7 @@ async function handleBuilderInteraction(
     const config = Config.get();
 
     if (config?.collab.enable === true) {
+        if (config?.collab.pauseFeedback) return;
         const xpath = getXPath(eventTarget);
         if (!eventTarget) return;
         const rect = eventTarget.getBoundingClientRect();

diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
@@ -124,6 +124,11 @@ async function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {
         const eventDetails = getCsDataOfElement(params.event);
         const eventTarget = params.event.target as HTMLElement | null;
         const config = Config.get();
+
+        if (config?.collab.enable && config?.collab.pauseFeedback) {
+            hideCustomCursor(params.customCursor);
+            return;
+        }
         if (!eventDetails) {
             if (
                 eventTarget &&