@contentstack/live-preview-utils 3.2.0-alpha.1 → 3.2.0

package/dist/modern/visualBuilder/hooks/useCollabOperations.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCollabOperations.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    ICommentResponse,\n    IThreadResponseDTO,\n    IDefaultAPIResponse,\n    IFetchCommentsResponse,\n    ICommentPayload,\n    IEditCommentArgs,\n    IDeleteCommentArgs,\n    IThreadResolveArgs,\n    IFetchComments,\n    IThreadPayload,\n    IInviteMetadata,\n    IDeleteThreadArgs,\n} from \"../types/collab.types\";\nimport { removeCollabIcon } from \"../generators/generateThread\";\nimport Config from \"../../configManager/configManager\";\n\nexport const useCollabOperations = () => {\n    const createComment = async (payload: ICommentPayload) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_COMMENT,\n            { payload }\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to create comment\");\n        return data;\n    };\n\n    const editComment = async (payload: IEditCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_EDIT_COMMENT,\n            { payload }\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to update comment\");\n        return data;\n    };\n\n    const deleteComment = async (payload: IDeleteCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_COMMENT,\n            { payload }\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete comment\");\n        return data;\n    };\n\n    const resolveThread = async (payload: IThreadResolveArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_RESOLVE_THREAD,\n            { payload }\n        )) as IThreadResponseDTO;\n        if (!data) throw new Error(\"Failed to resolve thread\");\n        return data;\n    };\n\n    const fetchComments = async (payload: IFetchComments) => {\n        return (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_FETCH_COMMENTS,\n            { payload }\n        )) as IFetchCommentsResponse;\n    };\n\n    const createNewThread = async (\n        buttonRef: React.RefObject<HTMLButtonElement>,\n        inviteMetadata: IInviteMetadata\n    ) => {\n        if (!buttonRef.current) {\n            throw new Error(\"Button ref not found\");\n        }\n\n        const parentDiv = buttonRef.current.closest(\"div[field-path]\");\n\n        if (!parentDiv) {\n            throw new Error(\"Count not find parent div\");\n        }\n\n        const fieldPath = parentDiv.getAttribute(\"field-path\");\n        const relative = parentDiv.getAttribute(\"relative\");\n\n        if (!fieldPath || !relative)\n            throw new Error(\"Invalid field attributes\");\n\n        const match = relative?.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            throw new Error(\"Invalid relative attribute\");\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const payload: IThreadPayload = {\n            elementXPath: fieldPath,\n            position: { x: relativeX, y: relativeY },\n            author: inviteMetadata.currentUser.email,\n            pageRoute: window.location.pathname,\n            inviteUid: inviteMetadata.inviteUid,\n            createdBy: inviteMetadata.currentUser.uid,\n        };\n\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_THREAD,\n            { payload }\n        )) as IThreadResponseDTO;\n\n        parentDiv.setAttribute(\"threaduid\", data.thread._id);\n\n        return data;\n    };\n\n    const deleteThread = async (payload: IDeleteThreadArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_THREAD,\n            { payload }\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete thread\");\n        removeCollabIcon(payload.threadUid);\n        const config = Config.get();\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n        return data;\n    };\n\n    return {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    };\n};\n"],"mappings":"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","names":["visualBuilderPostMessage","Config"]}
+{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCollabOperations.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    ICommentResponse,\n    IThreadResponseDTO,\n    IDefaultAPIResponse,\n    IFetchCommentsResponse,\n    ICommentPayload,\n    IEditCommentArgs,\n    IDeleteCommentArgs,\n    IThreadResolveArgs,\n    IFetchComments,\n    IThreadPayload,\n    IInviteMetadata,\n    IDeleteThreadArgs,\n} from \"../types/collab.types\";\nimport { removeCollabIcon } from \"../generators/generateThread\";\nimport Config from \"../../configManager/configManager\";\nimport { normalizePath } from \"../utils/collabUtils\";\n\nexport const useCollabOperations = () => {\n    const createComment = async (payload: ICommentPayload) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_COMMENT,\n            payload\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to create comment\");\n        return data;\n    };\n\n    const editComment = async (payload: IEditCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_EDIT_COMMENT,\n            payload\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to update comment\");\n        return data;\n    };\n\n    const deleteComment = async (payload: IDeleteCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_COMMENT,\n            payload\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete comment\");\n        return data;\n    };\n\n    const resolveThread = async (payload: IThreadResolveArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_RESOLVE_THREAD,\n            payload\n        )) as IThreadResponseDTO;\n        if (!data) throw new Error(\"Failed to resolve thread\");\n        return data;\n    };\n\n    const fetchComments = async (payload: IFetchComments) => {\n        return (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_FETCH_COMMENTS,\n            payload\n        )) as IFetchCommentsResponse;\n    };\n\n    const createNewThread = async (\n        buttonRef: React.RefObject<HTMLButtonElement>,\n        inviteMetadata: IInviteMetadata\n    ) => {\n        if (!buttonRef.current) {\n            throw new Error(\"Button ref not found\");\n        }\n\n        const parentDiv = buttonRef.current.closest(\"div[field-path]\");\n\n        if (!parentDiv) {\n            throw new Error(\"Count not find parent div\");\n        }\n\n        const fieldPath = parentDiv.getAttribute(\"field-path\");\n        const relative = parentDiv.getAttribute(\"relative\");\n\n        if (!fieldPath || !relative)\n            throw new Error(\"Invalid field attributes\");\n\n        const match = relative?.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            throw new Error(\"Invalid relative attribute\");\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const payload: IThreadPayload = {\n            elementXPath: fieldPath,\n            position: { x: relativeX, y: relativeY },\n            author: inviteMetadata.currentUser.email,\n            pageRoute: normalizePath(window.location.pathname),\n            inviteUid: inviteMetadata.inviteUid,\n            createdBy: inviteMetadata.currentUser.uid,\n        };\n\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_THREAD,\n            payload\n        )) as IThreadResponseDTO;\n\n        parentDiv.setAttribute(\"threaduid\", data.thread._id);\n\n        return data;\n    };\n\n    const deleteThread = async (payload: IDeleteThreadArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_THREAD,\n            payload\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete thread\");\n        removeCollabIcon(payload.threadUid);\n        const config = Config.get();\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n        return data;\n    };\n\n    return {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    };\n};\n"],"mappings":"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","names":["visualBuilderPostMessage","Config"]}

package/dist/modern/visualBuilder/hooks/useCollabOperations.js

@@ -5,11 +5,12 @@ import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { removeCollabIcon } from "../generators/generateThread.js";
 import Config from "../../configManager/configManager.js";
+import { normalizePath } from "../utils/collabUtils.js";
 var useCollabOperations = () => {
   const createComment = async (payload) => {
     const data = await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_CREATE_COMMENT,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to create comment");
     return data;
@@ -17,7 +18,7 @@ var useCollabOperations = () => {
   const editComment = async (payload) => {
     const data = await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_EDIT_COMMENT,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to update comment");
     return data;
@@ -25,7 +26,7 @@ var useCollabOperations = () => {
   const deleteComment = async (payload) => {
     const data = await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_DELETE_COMMENT,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to delete comment");
     return data;
@@ -33,7 +34,7 @@ var useCollabOperations = () => {
   const resolveThread = async (payload) => {
     const data = await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_RESOLVE_THREAD,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to resolve thread");
     return data;
@@ -41,7 +42,7 @@ var useCollabOperations = () => {
   const fetchComments = async (payload) => {
     return await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_FETCH_COMMENTS,
-      { payload }
+      payload
     );
   };
   const createNewThread = async (buttonRef, inviteMetadata) => {
@@ -66,13 +67,13 @@ var useCollabOperations = () => {
       elementXPath: fieldPath,
       position: { x: relativeX, y: relativeY },
       author: inviteMetadata.currentUser.email,
-      pageRoute: window.location.pathname,
+      pageRoute: normalizePath(window.location.pathname),
       inviteUid: inviteMetadata.inviteUid,
       createdBy: inviteMetadata.currentUser.uid
     };
     const data = await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_CREATE_THREAD,
-      { payload }
+      payload
     );
     parentDiv.setAttribute("threaduid", data.thread._id);
     return data;
@@ -80,7 +81,7 @@ var useCollabOperations = () => {
   const deleteThread = async (payload) => {
     const data = await visualBuilderPostMessage?.send(
       VisualBuilderPostMessageEvents.COLLAB_DELETE_THREAD,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to delete thread");
     removeCollabIcon(payload.threadUid);

package/dist/modern/visualBuilder/hooks/useCollabOperations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCollabOperations.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    ICommentResponse,\n    IThreadResponseDTO,\n    IDefaultAPIResponse,\n    IFetchCommentsResponse,\n    ICommentPayload,\n    IEditCommentArgs,\n    IDeleteCommentArgs,\n    IThreadResolveArgs,\n    IFetchComments,\n    IThreadPayload,\n    IInviteMetadata,\n    IDeleteThreadArgs,\n} from \"../types/collab.types\";\nimport { removeCollabIcon } from \"../generators/generateThread\";\nimport Config from \"../../configManager/configManager\";\n\nexport const useCollabOperations = () => {\n    const createComment = async (payload: ICommentPayload) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_COMMENT,\n            { payload }\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to create comment\");\n        return data;\n    };\n\n    const editComment = async (payload: IEditCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_EDIT_COMMENT,\n            { payload }\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to update comment\");\n        return data;\n    };\n\n    const deleteComment = async (payload: IDeleteCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_COMMENT,\n            { payload }\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete comment\");\n        return data;\n    };\n\n    const resolveThread = async (payload: IThreadResolveArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_RESOLVE_THREAD,\n            { payload }\n        )) as IThreadResponseDTO;\n        if (!data) throw new Error(\"Failed to resolve thread\");\n        return data;\n    };\n\n    const fetchComments = async (payload: IFetchComments) => {\n        return (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_FETCH_COMMENTS,\n            { payload }\n        )) as IFetchCommentsResponse;\n    };\n\n    const createNewThread = async (\n        buttonRef: React.RefObject<HTMLButtonElement>,\n        inviteMetadata: IInviteMetadata\n    ) => {\n        if (!buttonRef.current) {\n            throw new Error(\"Button ref not found\");\n        }\n\n        const parentDiv = buttonRef.current.closest(\"div[field-path]\");\n\n        if (!parentDiv) {\n            throw new Error(\"Count not find parent div\");\n        }\n\n        const fieldPath = parentDiv.getAttribute(\"field-path\");\n        const relative = parentDiv.getAttribute(\"relative\");\n\n        if (!fieldPath || !relative)\n            throw new Error(\"Invalid field attributes\");\n\n        const match = relative?.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            throw new Error(\"Invalid relative attribute\");\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const payload: IThreadPayload = {\n            elementXPath: fieldPath,\n            position: { x: relativeX, y: relativeY },\n            author: inviteMetadata.currentUser.email,\n            pageRoute: window.location.pathname,\n            inviteUid: inviteMetadata.inviteUid,\n            createdBy: inviteMetadata.currentUser.uid,\n        };\n\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_THREAD,\n            { payload }\n        )) as IThreadResponseDTO;\n\n        parentDiv.setAttribute(\"threaduid\", data.thread._id);\n\n        return data;\n    };\n\n    const deleteThread = async (payload: IDeleteThreadArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_THREAD,\n            { payload }\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete thread\");\n        removeCollabIcon(payload.threadUid);\n        const config = Config.get();\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n        return data;\n    };\n\n    return {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    };\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCollabOperations.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    ICommentResponse,\n    IThreadResponseDTO,\n    IDefaultAPIResponse,\n    IFetchCommentsResponse,\n    ICommentPayload,\n    IEditCommentArgs,\n    IDeleteCommentArgs,\n    IThreadResolveArgs,\n    IFetchComments,\n    IThreadPayload,\n    IInviteMetadata,\n    IDeleteThreadArgs,\n} from \"../types/collab.types\";\nimport { removeCollabIcon } from \"../generators/generateThread\";\nimport Config from \"../../configManager/configManager\";\nimport { normalizePath } from \"../utils/collabUtils\";\n\nexport const useCollabOperations = () => {\n    const createComment = async (payload: ICommentPayload) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_COMMENT,\n            payload\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to create comment\");\n        return data;\n    };\n\n    const editComment = async (payload: IEditCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_EDIT_COMMENT,\n            payload\n        )) as ICommentResponse;\n        if (!data) throw new Error(\"Failed to update comment\");\n        return data;\n    };\n\n    const deleteComment = async (payload: IDeleteCommentArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_COMMENT,\n            payload\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete comment\");\n        return data;\n    };\n\n    const resolveThread = async (payload: IThreadResolveArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_RESOLVE_THREAD,\n            payload\n        )) as IThreadResponseDTO;\n        if (!data) throw new Error(\"Failed to resolve thread\");\n        return data;\n    };\n\n    const fetchComments = async (payload: IFetchComments) => {\n        return (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_FETCH_COMMENTS,\n            payload\n        )) as IFetchCommentsResponse;\n    };\n\n    const createNewThread = async (\n        buttonRef: React.RefObject<HTMLButtonElement>,\n        inviteMetadata: IInviteMetadata\n    ) => {\n        if (!buttonRef.current) {\n            throw new Error(\"Button ref not found\");\n        }\n\n        const parentDiv = buttonRef.current.closest(\"div[field-path]\");\n\n        if (!parentDiv) {\n            throw new Error(\"Count not find parent div\");\n        }\n\n        const fieldPath = parentDiv.getAttribute(\"field-path\");\n        const relative = parentDiv.getAttribute(\"relative\");\n\n        if (!fieldPath || !relative)\n            throw new Error(\"Invalid field attributes\");\n\n        const match = relative?.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            throw new Error(\"Invalid relative attribute\");\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const payload: IThreadPayload = {\n            elementXPath: fieldPath,\n            position: { x: relativeX, y: relativeY },\n            author: inviteMetadata.currentUser.email,\n            pageRoute: normalizePath(window.location.pathname),\n            inviteUid: inviteMetadata.inviteUid,\n            createdBy: inviteMetadata.currentUser.uid,\n        };\n\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_CREATE_THREAD,\n            payload\n        )) as IThreadResponseDTO;\n\n        parentDiv.setAttribute(\"threaduid\", data.thread._id);\n\n        return data;\n    };\n\n    const deleteThread = async (payload: IDeleteThreadArgs) => {\n        const data = (await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.COLLAB_DELETE_THREAD,\n            payload\n        )) as IDefaultAPIResponse;\n        if (!data) throw new Error(\"Failed to delete thread\");\n        removeCollabIcon(payload.threadUid);\n        const config = Config.get();\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n        return data;\n    };\n\n    return {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    };\n};\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/hooks/useCommentTextArea.cjs

@@ -50,7 +50,11 @@ var initialState = {
 var useCommentTextArea = (userState, comment, onClose) => {
   const [state, setState] = (0, import_hooks.useState)(initialState);
   const [showSuggestions, setShowSuggestions] = (0, import_hooks.useState)(false);
-  const [cursorPosition, setCursorPosition] = (0, import_hooks.useState)({ top: 0, left: 0 });
+  const [cursorPosition, setCursorPosition] = (0, import_hooks.useState)({
+    top: 0,
+    left: 0,
+    showAbove: false
+  });
   const [searchTerm, setSearchTerm] = (0, import_hooks.useState)("");
   const [selectedIndex, setSelectedIndex] = (0, import_hooks.useState)(0);
   const [filteredUsers, setFilteredUsers] = (0, import_hooks.useState)([]);
@@ -192,17 +196,23 @@ var useCommentTextArea = (userState, comment, onClose) => {
         textarea.offsetWidth - 200
       );
       document.body.removeChild(span);
-      const currentLineY = currentLineNumber * lineHeight + paddingTop;
+      const scrollTop = textarea.scrollTop;
+      const currentLineY = currentLineNumber * lineHeight + paddingTop - scrollTop;
       const nextLineY = currentLineY + lineHeight;
       const viewportHeight = window.innerHeight;
       const suggestionsHeight = 160;
-      const spaceBelow = viewportHeight - (textarea.getBoundingClientRect().top + nextLineY);
+      const textareaRect = textarea.getBoundingClientRect();
+      const absoluteTop = textareaRect.top + nextLineY;
+      const spaceBelow = viewportHeight - absoluteTop;
       const showAbove = spaceBelow < suggestionsHeight;
-      const top = showAbove ? currentLineY - suggestionsHeight : nextLineY;
+      const top = showAbove ? currentLineY : nextLineY;
       return {
         top,
         left,
-        showAbove
+        showAbove,
+        absoluteTop,
+        scrollTop,
+        currentLineNumber
       };
     },
     []
@@ -317,6 +327,13 @@ var useCommentTextArea = (userState, comment, onClose) => {
       calculatePosition
     ]
   );
+  (0, import_hooks.useEffect)(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [selectedIndex]);
   const handleSubmit = (0, import_hooks.useCallback)(async () => {
     if (error.hasError) return;
     try {

package/dist/modern/visualBuilder/hooks/useCommentTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCommentTextArea.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport {\n    useState,\n    useEffect,\n    useCallback,\n    useRef,\n    useContext,\n} from \"preact/hooks\";\nimport { cloneDeep, findIndex } from \"lodash-es\";\nimport {\n    ICommentState,\n    IMentionList,\n    IMentionItem,\n    IMessageDTO,\n    IUserState,\n    IUserDTO,\n    IThreadResponseDTO,\n    ICommentResponse,\n    ICommentPayload,\n    IThreadPopupState,\n} from \"../types/collab.types\";\nimport {\n    validateCommentAndMentions,\n    filterOutInvalidMentions,\n    getMessageWithDisplayName,\n    getUserName,\n    getCommentBody,\n} from \"../utils/collabUtils\";\nimport { collabStyles } from \"../collab.style\";\nimport { maxMessageLength } from \"../utils/constants\";\nimport { ThreadProvider } from \"../components/Collab/ThreadPopup/ContextProvider\";\nimport useDynamicTextareaRows from \"../hooks/useDynamicTextareaRows\";\n\nconst initialState: ICommentState = {\n    message: \"\",\n    toUsers: [],\n    images: [],\n    createdBy: \"\",\n    author: \"\",\n};\n\nexport const useCommentTextArea = (\n    userState: IUserState,\n    comment: IMessageDTO | null | undefined,\n    onClose: (isResolved?: boolean) => void\n) => {\n    const [state, setState] = useState<ICommentState>(initialState);\n\n    const [showSuggestions, setShowSuggestions] = useState(false);\n    const [cursorPosition, setCursorPosition] = useState({ top: 0, left: 0 });\n    const [searchTerm, setSearchTerm] = useState(\"\");\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const [filteredUsers, setFilteredUsers] = useState<IMentionList[]>([]);\n\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const itemRefs = useRef<Array<HTMLLIElement | null>>([]);\n\n    const {\n        error,\n        setError,\n        onCreateComment,\n        onEditComment,\n        editComment,\n        setThreadState,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    } = useContext(ThreadProvider)!;\n\n    useDynamicTextareaRows(\n        \".collab-thread-body--input--textarea\",\n        state.message\n    );\n\n    useEffect(() => {\n        itemRefs.current = itemRefs.current.slice(\n            0,\n            userState.mentionsList.length\n        );\n    }, [userState.mentionsList]);\n\n    useEffect(() => {\n        const filteredUsersList = userState.mentionsList.filter((user) => {\n            if (!searchTerm) return true;\n            return user.display\n                .toLowerCase()\n                .includes(searchTerm.toLowerCase());\n        });\n        setFilteredUsers(filteredUsersList);\n    }, [searchTerm, userState.mentionsList]);\n\n    useEffect(() => {\n        const textArea = document.getElementById(\n            \"collab-thread-body--input--textarea\"\n        );\n        if (!textArea) return;\n\n        const baseClasses = {\n            focus: {\n                base: \"collab-thread-body--input--textarea--focus\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--focus\"\n                ],\n            },\n            hover: {\n                base: \"collab-thread-body--input--textarea--hover\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--hover\"\n                ],\n            },\n        };\n\n        const handleFocus = () => {\n            textArea.classList.add(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleBlur = () => {\n            textArea.classList.remove(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleMouseEnter = () => {\n            textArea.classList.add(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        const handleMouseLeave = () => {\n            textArea.classList.remove(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        textArea.addEventListener(\"focus\", handleFocus);\n        textArea.addEventListener(\"blur\", handleBlur);\n        textArea.addEventListener(\"mouseenter\", handleMouseEnter);\n        textArea.addEventListener(\"mouseleave\", handleMouseLeave);\n\n        return () => {\n            textArea.removeEventListener(\"focus\", handleFocus);\n            textArea.removeEventListener(\"blur\", handleBlur);\n            textArea.removeEventListener(\"mouseenter\", handleMouseEnter);\n            textArea.removeEventListener(\"mouseleave\", handleMouseLeave);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!comment) return;\n\n        const toUsers: Array<IMentionItem> = [];\n\n        comment?.toUsers?.forEach((userId) => {\n            const user: IUserDTO = userState.userMap[userId];\n            toUsers.push({\n                display: `${user.display || getUserName(user)}`,\n                id: userId,\n            });\n        });\n\n        setState({\n            message:\n                getMessageWithDisplayName(comment, userState, \"text\") ?? \"\",\n            toUsers,\n            images: comment?.images ?? [],\n            createdBy: comment?.createdBy ?? \"\",\n            author: comment?.author ?? \"\",\n        });\n    }, [comment, userState]);\n\n    const findMentionSearchPosition = useCallback(\n        (text: string, cursorPos: number) => {\n            const textBeforeCursor = text.slice(0, cursorPos);\n            const atSymbolIndex = textBeforeCursor.lastIndexOf(\"@\");\n\n            if (atSymbolIndex === -1) return null;\n\n            const textBetweenAtAndCursor = textBeforeCursor.slice(\n                atSymbolIndex + 1\n            );\n            if (textBetweenAtAndCursor.includes(\" \")) return null;\n\n            return {\n                start: atSymbolIndex,\n                searchTerm: textBetweenAtAndCursor,\n            };\n        },\n        []\n    );\n\n    const calculatePosition = useCallback(\n        (textarea: HTMLTextAreaElement, cursorPosition: number) => {\n            const text = textarea?.value;\n            const textBeforeCursor = text?.slice(0, cursorPosition);\n            const lines = textBeforeCursor?.split(\"\\n\");\n            const currentLineNumber = (lines?.length || 0) - 1;\n            const currentLine = lines?.[currentLineNumber];\n\n            const style = window.getComputedStyle(textarea);\n            const lineHeight = parseInt(style.lineHeight);\n            const paddingLeft = parseInt(style.paddingLeft);\n            const paddingTop = parseInt(style.paddingTop);\n\n            const span = document.createElement(\"span\");\n            span.style.font = style.font;\n            span.style.visibility = \"hidden\";\n            span.style.position = \"absolute\";\n            span.style.whiteSpace = \"pre\";\n            span.textContent = currentLine ? currentLine : \"\";\n            document.body.appendChild(span);\n\n            const left = Math.min(\n                span.offsetWidth + paddingLeft,\n                textarea.offsetWidth - 200\n            );\n            document.body.removeChild(span);\n\n            const currentLineY = currentLineNumber * lineHeight + paddingTop;\n            const nextLineY = currentLineY + lineHeight;\n\n            const viewportHeight = window.innerHeight;\n            const suggestionsHeight = 160;\n\n            const spaceBelow =\n                viewportHeight -\n                (textarea.getBoundingClientRect().top + nextLineY);\n            const showAbove = spaceBelow < suggestionsHeight;\n\n            const top = showAbove\n                ? currentLineY - suggestionsHeight\n                : nextLineY;\n\n            return {\n                top,\n                left,\n                showAbove,\n            };\n        },\n        []\n    );\n\n    const insertMention = useCallback(\n        (user: IMentionList) => {\n            const mention = findMentionSearchPosition(\n                state.message,\n                inputRef.current?.selectionStart || 0\n            );\n            if (!mention) return;\n\n            const beforeMention = state.message.slice(0, mention.start);\n            const afterMention = state.message.slice(\n                inputRef.current?.selectionStart || 0\n            );\n            const newValue = `${beforeMention}@${user.display} ${afterMention}`;\n\n            const updatedMentions = filterOutInvalidMentions(newValue, [\n                ...(state.toUsers || []),\n                { display: user.display, id: user.uid || \"\" },\n            ]);\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newValue,\n                toUsers: updatedMentions.toUsers,\n            }));\n            setShowSuggestions(false);\n\n            const ele = inputRef.current;\n            if (ele) {\n                ele.focus();\n            }\n        },\n        [state.message, state.toUsers, findMentionSearchPosition]\n    );\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const target = event.target as HTMLTextAreaElement | null;\n            if (!target) return;\n            const newPlainTextValue = target.value;\n            const trimmedValue = newPlainTextValue.trim();\n            const newPosition = target.selectionStart;\n\n            const mention = findMentionSearchPosition(\n                newPlainTextValue,\n                newPosition\n            );\n            if (mention) {\n                setSearchTerm(mention.searchTerm);\n                setShowSuggestions(true);\n                setCursorPosition(\n                    calculatePosition(\n                        inputRef.current as HTMLTextAreaElement,\n                        newPosition\n                    )\n                );\n                setSelectedIndex(0);\n            } else {\n                setShowSuggestions(false);\n            }\n\n            const errorMessage = validateCommentAndMentions(\n                newPlainTextValue,\n                state.toUsers ?? []\n            );\n            setError({\n                hasError: errorMessage !== \"\" || trimmedValue === \"\",\n                message: errorMessage,\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newPlainTextValue,\n            }));\n        },\n        [state.toUsers, findMentionSearchPosition, calculatePosition, setError]\n    );\n\n    const handleKeyDown = useCallback(\n        (e: KeyboardEvent) => {\n            if (e.key === \"@\") {\n                const position = calculatePosition(\n                    inputRef.current as HTMLTextAreaElement,\n                    (e.target as HTMLTextAreaElement).selectionStart\n                );\n                setCursorPosition(position);\n                setSelectedIndex(0);\n            }\n\n            if (!showSuggestions) return;\n\n            switch (e.key) {\n                case \"ArrowDown\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) =>\n                        prev < filteredUsers.length - 1 ? prev + 1 : prev\n                    );\n                    break;\n                case \"ArrowUp\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));\n                    break;\n                case \"Enter\":\n                    e.preventDefault();\n                    if (showSuggestions) {\n                        insertMention(filteredUsers[selectedIndex]);\n                    }\n                    break;\n                case \"Escape\":\n                    setShowSuggestions(false);\n                    inputRef.current?.focus();\n                    break;\n            }\n        },\n        [\n            showSuggestions,\n            filteredUsers,\n            selectedIndex,\n            insertMention,\n            calculatePosition,\n        ]\n    );\n\n    const handleSubmit = useCallback(async () => {\n        if (error.hasError) return;\n\n        try {\n            let threadUID: string = activeThread?._id;\n            if (activeThread?._id == \"new\") {\n                let currentThread: IThreadResponseDTO = await createNewThread();\n                threadUID = currentThread?.thread?._id;\n                setActiveThread(currentThread?.thread);\n            }\n\n            const commentState = {\n                ...state,\n                createdBy: userState.currentUser.uid,\n                author: userState.currentUser.email,\n            };\n\n            const commentPayload = {\n                ...getCommentBody(commentState),\n            };\n\n            const commentData: ICommentPayload = {\n                threadUid: threadUID,\n                commentPayload,\n            };\n\n            if (editComment) {\n                let commentResponse: ICommentResponse = await onEditComment({\n                    threadUid: threadUID,\n                    commentUid: editComment,\n                    payload: commentPayload,\n                });\n\n                setThreadState((prevState: IThreadPopupState) => {\n                    const updatedComments = cloneDeep(prevState.comments);\n                    const commentIndex = findIndex(\n                        updatedComments,\n                        (c) => c._id === comment?._id\n                    );\n\n                    updatedComments.splice(\n                        commentIndex,\n                        1,\n                        commentResponse?.comment\n                    );\n\n                    return {\n                        ...prevState,\n                        editComment: \"\",\n                        comments: updatedComments,\n                    };\n                });\n                onClose(false);\n            } else {\n                let commentResponse: ICommentResponse =\n                    await onCreateComment(commentData);\n                setThreadState((prevState: IThreadPopupState) => ({\n                    ...prevState,\n                    comments: [commentResponse.comment, ...prevState.comments],\n                    commentCount: prevState.commentCount + 1,\n                }));\n\n                setState(initialState);\n                onClose(false);\n            }\n        } catch (error: any) {\n            console.error(\"Error submitting comment:\", error);\n        }\n    }, [error.hasError, state, activeThread]);\n\n    useEffect(() => {\n        if (state.message.length === 0) {\n            setError({ hasError: true, message: \"\" });\n        }\n    }, [state.message, setError]);\n\n    return {\n        state,\n        setState,\n        error,\n        showSuggestions,\n        cursorPosition,\n        selectedIndex,\n        filteredUsers,\n        inputRef,\n        listRef,\n        itemRefs,\n        handleInputChange,\n        handleKeyDown,\n        handleSubmit,\n        insertMention,\n        maxMessageLength,\n    };\n};\n"],"mappings":"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","names":["useDynamicTextareaRows","cursorPosition","error"]}
+{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCommentTextArea.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport {\n    useState,\n    useEffect,\n    useCallback,\n    useRef,\n    useContext,\n} from \"preact/hooks\";\nimport { cloneDeep, findIndex } from \"lodash-es\";\nimport {\n    ICommentState,\n    IMentionList,\n    IMentionItem,\n    IMessageDTO,\n    IUserState,\n    IUserDTO,\n    IThreadResponseDTO,\n    ICommentResponse,\n    ICommentPayload,\n    IThreadPopupState,\n} from \"../types/collab.types\";\nimport {\n    validateCommentAndMentions,\n    filterOutInvalidMentions,\n    getMessageWithDisplayName,\n    getUserName,\n    getCommentBody,\n} from \"../utils/collabUtils\";\nimport { collabStyles } from \"../collab.style\";\nimport { maxMessageLength } from \"../utils/constants\";\nimport { ThreadProvider } from \"../components/Collab/ThreadPopup/ContextProvider\";\nimport useDynamicTextareaRows from \"../hooks/useDynamicTextareaRows\";\n\nconst initialState: ICommentState = {\n    message: \"\",\n    toUsers: [],\n    images: [],\n    createdBy: \"\",\n    author: \"\",\n};\n\nexport const useCommentTextArea = (\n    userState: IUserState,\n    comment: IMessageDTO | null | undefined,\n    onClose: (isResolved?: boolean) => void\n) => {\n    const [state, setState] = useState<ICommentState>(initialState);\n\n    const [showSuggestions, setShowSuggestions] = useState(false);\n    const [cursorPosition, setCursorPosition] = useState({\n        top: 0,\n        left: 0,\n        showAbove: false,\n    });\n    const [searchTerm, setSearchTerm] = useState(\"\");\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const [filteredUsers, setFilteredUsers] = useState<IMentionList[]>([]);\n\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const itemRefs = useRef<Array<HTMLLIElement | null>>([]);\n\n    const {\n        error,\n        setError,\n        onCreateComment,\n        onEditComment,\n        editComment,\n        setThreadState,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    } = useContext(ThreadProvider)!;\n\n    useDynamicTextareaRows(\n        \".collab-thread-body--input--textarea\",\n        state.message\n    );\n\n    useEffect(() => {\n        itemRefs.current = itemRefs.current.slice(\n            0,\n            userState.mentionsList.length\n        );\n    }, [userState.mentionsList]);\n\n    useEffect(() => {\n        const filteredUsersList = userState.mentionsList.filter((user) => {\n            if (!searchTerm) return true;\n            return user.display\n                .toLowerCase()\n                .includes(searchTerm.toLowerCase());\n        });\n        setFilteredUsers(filteredUsersList);\n    }, [searchTerm, userState.mentionsList]);\n\n    useEffect(() => {\n        const textArea = document.getElementById(\n            \"collab-thread-body--input--textarea\"\n        );\n        if (!textArea) return;\n\n        const baseClasses = {\n            focus: {\n                base: \"collab-thread-body--input--textarea--focus\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--focus\"\n                ],\n            },\n            hover: {\n                base: \"collab-thread-body--input--textarea--hover\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--hover\"\n                ],\n            },\n        };\n\n        const handleFocus = () => {\n            textArea.classList.add(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleBlur = () => {\n            textArea.classList.remove(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleMouseEnter = () => {\n            textArea.classList.add(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        const handleMouseLeave = () => {\n            textArea.classList.remove(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        textArea.addEventListener(\"focus\", handleFocus);\n        textArea.addEventListener(\"blur\", handleBlur);\n        textArea.addEventListener(\"mouseenter\", handleMouseEnter);\n        textArea.addEventListener(\"mouseleave\", handleMouseLeave);\n\n        return () => {\n            textArea.removeEventListener(\"focus\", handleFocus);\n            textArea.removeEventListener(\"blur\", handleBlur);\n            textArea.removeEventListener(\"mouseenter\", handleMouseEnter);\n            textArea.removeEventListener(\"mouseleave\", handleMouseLeave);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!comment) return;\n\n        const toUsers: Array<IMentionItem> = [];\n\n        comment?.toUsers?.forEach((userId) => {\n            const user: IUserDTO = userState.userMap[userId];\n            toUsers.push({\n                display: `${user.display || getUserName(user)}`,\n                id: userId,\n            });\n        });\n\n        setState({\n            message:\n                getMessageWithDisplayName(comment, userState, \"text\") ?? \"\",\n            toUsers,\n            images: comment?.images ?? [],\n            createdBy: comment?.createdBy ?? \"\",\n            author: comment?.author ?? \"\",\n        });\n    }, [comment, userState]);\n\n    const findMentionSearchPosition = useCallback(\n        (text: string, cursorPos: number) => {\n            const textBeforeCursor = text.slice(0, cursorPos);\n            const atSymbolIndex = textBeforeCursor.lastIndexOf(\"@\");\n\n            if (atSymbolIndex === -1) return null;\n\n            const textBetweenAtAndCursor = textBeforeCursor.slice(\n                atSymbolIndex + 1\n            );\n            if (textBetweenAtAndCursor.includes(\" \")) return null;\n\n            return {\n                start: atSymbolIndex,\n                searchTerm: textBetweenAtAndCursor,\n            };\n        },\n        []\n    );\n\n    const calculatePosition = useCallback(\n        (textarea: HTMLTextAreaElement, cursorPosition: number) => {\n            const text = textarea?.value;\n            const textBeforeCursor = text?.slice(0, cursorPosition);\n            const lines = textBeforeCursor?.split(\"\\n\");\n            const currentLineNumber = (lines?.length || 0) - 1;\n            const currentLine = lines?.[currentLineNumber];\n\n            const style = window.getComputedStyle(textarea);\n            const lineHeight = parseInt(style.lineHeight);\n            const paddingLeft = parseInt(style.paddingLeft);\n            const paddingTop = parseInt(style.paddingTop);\n\n            const span = document.createElement(\"span\");\n            span.style.font = style.font;\n            span.style.visibility = \"hidden\";\n            span.style.position = \"absolute\";\n            span.style.whiteSpace = \"pre\";\n            span.textContent = currentLine ? currentLine : \"\";\n            document.body.appendChild(span);\n\n            const left = Math.min(\n                span.offsetWidth + paddingLeft,\n                textarea.offsetWidth - 200\n            );\n            document.body.removeChild(span);\n\n            const scrollTop = textarea.scrollTop;\n            const currentLineY =\n                currentLineNumber * lineHeight + paddingTop - scrollTop;\n            const nextLineY = currentLineY + lineHeight;\n\n            const viewportHeight = window.innerHeight;\n            const suggestionsHeight = 160;\n\n            const textareaRect = textarea.getBoundingClientRect();\n            const absoluteTop = textareaRect.top + nextLineY;\n            const spaceBelow = viewportHeight - absoluteTop;\n            const showAbove = spaceBelow < suggestionsHeight;\n            const top = showAbove ? currentLineY : nextLineY;\n\n            return {\n                top,\n                left,\n                showAbove,\n                absoluteTop,\n                scrollTop,\n                currentLineNumber,\n            };\n        },\n        []\n    );\n\n    const insertMention = useCallback(\n        (user: IMentionList) => {\n            const mention = findMentionSearchPosition(\n                state.message,\n                inputRef.current?.selectionStart || 0\n            );\n            if (!mention) return;\n\n            const beforeMention = state.message.slice(0, mention.start);\n            const afterMention = state.message.slice(\n                inputRef.current?.selectionStart || 0\n            );\n            const newValue = `${beforeMention}@${user.display} ${afterMention}`;\n\n            const updatedMentions = filterOutInvalidMentions(newValue, [\n                ...(state.toUsers || []),\n                { display: user.display, id: user.uid || \"\" },\n            ]);\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newValue,\n                toUsers: updatedMentions.toUsers,\n            }));\n            setShowSuggestions(false);\n\n            const ele = inputRef.current;\n            if (ele) {\n                ele.focus();\n            }\n        },\n        [state.message, state.toUsers, findMentionSearchPosition]\n    );\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const target = event.target as HTMLTextAreaElement | null;\n            if (!target) return;\n            const newPlainTextValue = target.value;\n            const trimmedValue = newPlainTextValue.trim();\n            const newPosition = target.selectionStart;\n\n            const mention = findMentionSearchPosition(\n                newPlainTextValue,\n                newPosition\n            );\n            if (mention) {\n                setSearchTerm(mention.searchTerm);\n                setShowSuggestions(true);\n                setCursorPosition(\n                    calculatePosition(\n                        inputRef.current as HTMLTextAreaElement,\n                        newPosition\n                    )\n                );\n                setSelectedIndex(0);\n            } else {\n                setShowSuggestions(false);\n            }\n\n            const errorMessage = validateCommentAndMentions(\n                newPlainTextValue,\n                state.toUsers ?? []\n            );\n            setError({\n                hasError: errorMessage !== \"\" || trimmedValue === \"\",\n                message: errorMessage,\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newPlainTextValue,\n            }));\n        },\n        [state.toUsers, findMentionSearchPosition, calculatePosition, setError]\n    );\n\n    const handleKeyDown = useCallback(\n        (e: KeyboardEvent) => {\n            if (e.key === \"@\") {\n                const position = calculatePosition(\n                    inputRef.current as HTMLTextAreaElement,\n                    (e.target as HTMLTextAreaElement).selectionStart\n                );\n                setCursorPosition(position);\n                setSelectedIndex(0);\n            }\n\n            if (!showSuggestions) return;\n\n            switch (e.key) {\n                case \"ArrowDown\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) =>\n                        prev < filteredUsers.length - 1 ? prev + 1 : prev\n                    );\n                    break;\n                case \"ArrowUp\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));\n                    break;\n                case \"Enter\":\n                    e.preventDefault();\n                    if (showSuggestions) {\n                        insertMention(filteredUsers[selectedIndex]);\n                    }\n                    break;\n                case \"Escape\":\n                    setShowSuggestions(false);\n                    inputRef.current?.focus();\n                    break;\n            }\n        },\n        [\n            showSuggestions,\n            filteredUsers,\n            selectedIndex,\n            insertMention,\n            calculatePosition,\n        ]\n    );\n\n    useEffect(() => {\n        itemRefs.current[selectedIndex]?.scrollIntoView({\n            behavior: \"smooth\",\n            block: \"nearest\",\n            inline: \"nearest\",\n        });\n    }, [selectedIndex]);\n\n    const handleSubmit = useCallback(async () => {\n        if (error.hasError) return;\n\n        try {\n            let threadUID: string = activeThread?._id;\n            if (activeThread?._id == \"new\") {\n                let currentThread: IThreadResponseDTO = await createNewThread();\n                threadUID = currentThread?.thread?._id;\n                setActiveThread(currentThread?.thread);\n            }\n\n            const commentState = {\n                ...state,\n                createdBy: userState.currentUser.uid,\n                author: userState.currentUser.email,\n            };\n\n            const commentPayload = {\n                ...getCommentBody(commentState),\n            };\n\n            const commentData: ICommentPayload = {\n                threadUid: threadUID,\n                commentPayload,\n            };\n\n            if (editComment) {\n                let commentResponse: ICommentResponse = await onEditComment({\n                    threadUid: threadUID,\n                    commentUid: editComment,\n                    payload: commentPayload,\n                });\n\n                setThreadState((prevState: IThreadPopupState) => {\n                    const updatedComments = cloneDeep(prevState.comments);\n                    const commentIndex = findIndex(\n                        updatedComments,\n                        (c) => c._id === comment?._id\n                    );\n\n                    updatedComments.splice(\n                        commentIndex,\n                        1,\n                        commentResponse?.comment\n                    );\n\n                    return {\n                        ...prevState,\n                        editComment: \"\",\n                        comments: updatedComments,\n                    };\n                });\n                onClose(false);\n            } else {\n                let commentResponse: ICommentResponse =\n                    await onCreateComment(commentData);\n                setThreadState((prevState: IThreadPopupState) => ({\n                    ...prevState,\n                    comments: [commentResponse.comment, ...prevState.comments],\n                    commentCount: prevState.commentCount + 1,\n                }));\n\n                setState(initialState);\n                onClose(false);\n            }\n        } catch (error: any) {\n            console.error(\"Error submitting comment:\", error);\n        }\n    }, [error.hasError, state, activeThread]);\n\n    useEffect(() => {\n        if (state.message.length === 0) {\n            setError({ hasError: true, message: \"\" });\n        }\n    }, [state.message, setError]);\n\n    return {\n        state,\n        setState,\n        error,\n        showSuggestions,\n        cursorPosition,\n        selectedIndex,\n        filteredUsers,\n        inputRef,\n        listRef,\n        itemRefs,\n        handleInputChange,\n        handleKeyDown,\n        handleSubmit,\n        insertMention,\n        maxMessageLength,\n    };\n};\n"],"mappings":"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","names":["useDynamicTextareaRows","cursorPosition","error"]}

package/dist/modern/visualBuilder/hooks/useCommentTextArea.d.cts

@@ -10,6 +10,7 @@ declare const useCommentTextArea: (userState: IUserState, comment: IMessageDTO |
     cursorPosition: {
         top: number;
         left: number;
+        showAbove: boolean;
     };
     selectedIndex: number;
     filteredUsers: IMentionList[];

package/dist/modern/visualBuilder/hooks/useCommentTextArea.d.ts

@@ -10,6 +10,7 @@ declare const useCommentTextArea: (userState: IUserState, comment: IMessageDTO |
     cursorPosition: {
         top: number;
         left: number;
+        showAbove: boolean;
     };
     selectedIndex: number;
     filteredUsers: IMentionList[];

package/dist/modern/visualBuilder/hooks/useCommentTextArea.js

@@ -30,7 +30,11 @@ var initialState = {
 var useCommentTextArea = (userState, comment, onClose) => {
   const [state, setState] = useState(initialState);
   const [showSuggestions, setShowSuggestions] = useState(false);
-  const [cursorPosition, setCursorPosition] = useState({ top: 0, left: 0 });
+  const [cursorPosition, setCursorPosition] = useState({
+    top: 0,
+    left: 0,
+    showAbove: false
+  });
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [filteredUsers, setFilteredUsers] = useState([]);
@@ -172,17 +176,23 @@ var useCommentTextArea = (userState, comment, onClose) => {
         textarea.offsetWidth - 200
       );
       document.body.removeChild(span);
-      const currentLineY = currentLineNumber * lineHeight + paddingTop;
+      const scrollTop = textarea.scrollTop;
+      const currentLineY = currentLineNumber * lineHeight + paddingTop - scrollTop;
       const nextLineY = currentLineY + lineHeight;
       const viewportHeight = window.innerHeight;
       const suggestionsHeight = 160;
-      const spaceBelow = viewportHeight - (textarea.getBoundingClientRect().top + nextLineY);
+      const textareaRect = textarea.getBoundingClientRect();
+      const absoluteTop = textareaRect.top + nextLineY;
+      const spaceBelow = viewportHeight - absoluteTop;
       const showAbove = spaceBelow < suggestionsHeight;
-      const top = showAbove ? currentLineY - suggestionsHeight : nextLineY;
+      const top = showAbove ? currentLineY : nextLineY;
       return {
         top,
         left,
-        showAbove
+        showAbove,
+        absoluteTop,
+        scrollTop,
+        currentLineNumber
       };
     },
     []
@@ -297,6 +307,13 @@ var useCommentTextArea = (userState, comment, onClose) => {
       calculatePosition
     ]
   );
+  useEffect(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [selectedIndex]);
   const handleSubmit = useCallback(async () => {
     if (error.hasError) return;
     try {

package/dist/modern/visualBuilder/hooks/useCommentTextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCommentTextArea.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport {\n    useState,\n    useEffect,\n    useCallback,\n    useRef,\n    useContext,\n} from \"preact/hooks\";\nimport { cloneDeep, findIndex } from \"lodash-es\";\nimport {\n    ICommentState,\n    IMentionList,\n    IMentionItem,\n    IMessageDTO,\n    IUserState,\n    IUserDTO,\n    IThreadResponseDTO,\n    ICommentResponse,\n    ICommentPayload,\n    IThreadPopupState,\n} from \"../types/collab.types\";\nimport {\n    validateCommentAndMentions,\n    filterOutInvalidMentions,\n    getMessageWithDisplayName,\n    getUserName,\n    getCommentBody,\n} from \"../utils/collabUtils\";\nimport { collabStyles } from \"../collab.style\";\nimport { maxMessageLength } from \"../utils/constants\";\nimport { ThreadProvider } from \"../components/Collab/ThreadPopup/ContextProvider\";\nimport useDynamicTextareaRows from \"../hooks/useDynamicTextareaRows\";\n\nconst initialState: ICommentState = {\n    message: \"\",\n    toUsers: [],\n    images: [],\n    createdBy: \"\",\n    author: \"\",\n};\n\nexport const useCommentTextArea = (\n    userState: IUserState,\n    comment: IMessageDTO | null | undefined,\n    onClose: (isResolved?: boolean) => void\n) => {\n    const [state, setState] = useState<ICommentState>(initialState);\n\n    const [showSuggestions, setShowSuggestions] = useState(false);\n    const [cursorPosition, setCursorPosition] = useState({ top: 0, left: 0 });\n    const [searchTerm, setSearchTerm] = useState(\"\");\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const [filteredUsers, setFilteredUsers] = useState<IMentionList[]>([]);\n\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const itemRefs = useRef<Array<HTMLLIElement | null>>([]);\n\n    const {\n        error,\n        setError,\n        onCreateComment,\n        onEditComment,\n        editComment,\n        setThreadState,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    } = useContext(ThreadProvider)!;\n\n    useDynamicTextareaRows(\n        \".collab-thread-body--input--textarea\",\n        state.message\n    );\n\n    useEffect(() => {\n        itemRefs.current = itemRefs.current.slice(\n            0,\n            userState.mentionsList.length\n        );\n    }, [userState.mentionsList]);\n\n    useEffect(() => {\n        const filteredUsersList = userState.mentionsList.filter((user) => {\n            if (!searchTerm) return true;\n            return user.display\n                .toLowerCase()\n                .includes(searchTerm.toLowerCase());\n        });\n        setFilteredUsers(filteredUsersList);\n    }, [searchTerm, userState.mentionsList]);\n\n    useEffect(() => {\n        const textArea = document.getElementById(\n            \"collab-thread-body--input--textarea\"\n        );\n        if (!textArea) return;\n\n        const baseClasses = {\n            focus: {\n                base: \"collab-thread-body--input--textarea--focus\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--focus\"\n                ],\n            },\n            hover: {\n                base: \"collab-thread-body--input--textarea--hover\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--hover\"\n                ],\n            },\n        };\n\n        const handleFocus = () => {\n            textArea.classList.add(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleBlur = () => {\n            textArea.classList.remove(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleMouseEnter = () => {\n            textArea.classList.add(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        const handleMouseLeave = () => {\n            textArea.classList.remove(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        textArea.addEventListener(\"focus\", handleFocus);\n        textArea.addEventListener(\"blur\", handleBlur);\n        textArea.addEventListener(\"mouseenter\", handleMouseEnter);\n        textArea.addEventListener(\"mouseleave\", handleMouseLeave);\n\n        return () => {\n            textArea.removeEventListener(\"focus\", handleFocus);\n            textArea.removeEventListener(\"blur\", handleBlur);\n            textArea.removeEventListener(\"mouseenter\", handleMouseEnter);\n            textArea.removeEventListener(\"mouseleave\", handleMouseLeave);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!comment) return;\n\n        const toUsers: Array<IMentionItem> = [];\n\n        comment?.toUsers?.forEach((userId) => {\n            const user: IUserDTO = userState.userMap[userId];\n            toUsers.push({\n                display: `${user.display || getUserName(user)}`,\n                id: userId,\n            });\n        });\n\n        setState({\n            message:\n                getMessageWithDisplayName(comment, userState, \"text\") ?? \"\",\n            toUsers,\n            images: comment?.images ?? [],\n            createdBy: comment?.createdBy ?? \"\",\n            author: comment?.author ?? \"\",\n        });\n    }, [comment, userState]);\n\n    const findMentionSearchPosition = useCallback(\n        (text: string, cursorPos: number) => {\n            const textBeforeCursor = text.slice(0, cursorPos);\n            const atSymbolIndex = textBeforeCursor.lastIndexOf(\"@\");\n\n            if (atSymbolIndex === -1) return null;\n\n            const textBetweenAtAndCursor = textBeforeCursor.slice(\n                atSymbolIndex + 1\n            );\n            if (textBetweenAtAndCursor.includes(\" \")) return null;\n\n            return {\n                start: atSymbolIndex,\n                searchTerm: textBetweenAtAndCursor,\n            };\n        },\n        []\n    );\n\n    const calculatePosition = useCallback(\n        (textarea: HTMLTextAreaElement, cursorPosition: number) => {\n            const text = textarea?.value;\n            const textBeforeCursor = text?.slice(0, cursorPosition);\n            const lines = textBeforeCursor?.split(\"\\n\");\n            const currentLineNumber = (lines?.length || 0) - 1;\n            const currentLine = lines?.[currentLineNumber];\n\n            const style = window.getComputedStyle(textarea);\n            const lineHeight = parseInt(style.lineHeight);\n            const paddingLeft = parseInt(style.paddingLeft);\n            const paddingTop = parseInt(style.paddingTop);\n\n            const span = document.createElement(\"span\");\n            span.style.font = style.font;\n            span.style.visibility = \"hidden\";\n            span.style.position = \"absolute\";\n            span.style.whiteSpace = \"pre\";\n            span.textContent = currentLine ? currentLine : \"\";\n            document.body.appendChild(span);\n\n            const left = Math.min(\n                span.offsetWidth + paddingLeft,\n                textarea.offsetWidth - 200\n            );\n            document.body.removeChild(span);\n\n            const currentLineY = currentLineNumber * lineHeight + paddingTop;\n            const nextLineY = currentLineY + lineHeight;\n\n            const viewportHeight = window.innerHeight;\n            const suggestionsHeight = 160;\n\n            const spaceBelow =\n                viewportHeight -\n                (textarea.getBoundingClientRect().top + nextLineY);\n            const showAbove = spaceBelow < suggestionsHeight;\n\n            const top = showAbove\n                ? currentLineY - suggestionsHeight\n                : nextLineY;\n\n            return {\n                top,\n                left,\n                showAbove,\n            };\n        },\n        []\n    );\n\n    const insertMention = useCallback(\n        (user: IMentionList) => {\n            const mention = findMentionSearchPosition(\n                state.message,\n                inputRef.current?.selectionStart || 0\n            );\n            if (!mention) return;\n\n            const beforeMention = state.message.slice(0, mention.start);\n            const afterMention = state.message.slice(\n                inputRef.current?.selectionStart || 0\n            );\n            const newValue = `${beforeMention}@${user.display} ${afterMention}`;\n\n            const updatedMentions = filterOutInvalidMentions(newValue, [\n                ...(state.toUsers || []),\n                { display: user.display, id: user.uid || \"\" },\n            ]);\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newValue,\n                toUsers: updatedMentions.toUsers,\n            }));\n            setShowSuggestions(false);\n\n            const ele = inputRef.current;\n            if (ele) {\n                ele.focus();\n            }\n        },\n        [state.message, state.toUsers, findMentionSearchPosition]\n    );\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const target = event.target as HTMLTextAreaElement | null;\n            if (!target) return;\n            const newPlainTextValue = target.value;\n            const trimmedValue = newPlainTextValue.trim();\n            const newPosition = target.selectionStart;\n\n            const mention = findMentionSearchPosition(\n                newPlainTextValue,\n                newPosition\n            );\n            if (mention) {\n                setSearchTerm(mention.searchTerm);\n                setShowSuggestions(true);\n                setCursorPosition(\n                    calculatePosition(\n                        inputRef.current as HTMLTextAreaElement,\n                        newPosition\n                    )\n                );\n                setSelectedIndex(0);\n            } else {\n                setShowSuggestions(false);\n            }\n\n            const errorMessage = validateCommentAndMentions(\n                newPlainTextValue,\n                state.toUsers ?? []\n            );\n            setError({\n                hasError: errorMessage !== \"\" || trimmedValue === \"\",\n                message: errorMessage,\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newPlainTextValue,\n            }));\n        },\n        [state.toUsers, findMentionSearchPosition, calculatePosition, setError]\n    );\n\n    const handleKeyDown = useCallback(\n        (e: KeyboardEvent) => {\n            if (e.key === \"@\") {\n                const position = calculatePosition(\n                    inputRef.current as HTMLTextAreaElement,\n                    (e.target as HTMLTextAreaElement).selectionStart\n                );\n                setCursorPosition(position);\n                setSelectedIndex(0);\n            }\n\n            if (!showSuggestions) return;\n\n            switch (e.key) {\n                case \"ArrowDown\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) =>\n                        prev < filteredUsers.length - 1 ? prev + 1 : prev\n                    );\n                    break;\n                case \"ArrowUp\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));\n                    break;\n                case \"Enter\":\n                    e.preventDefault();\n                    if (showSuggestions) {\n                        insertMention(filteredUsers[selectedIndex]);\n                    }\n                    break;\n                case \"Escape\":\n                    setShowSuggestions(false);\n                    inputRef.current?.focus();\n                    break;\n            }\n        },\n        [\n            showSuggestions,\n            filteredUsers,\n            selectedIndex,\n            insertMention,\n            calculatePosition,\n        ]\n    );\n\n    const handleSubmit = useCallback(async () => {\n        if (error.hasError) return;\n\n        try {\n            let threadUID: string = activeThread?._id;\n            if (activeThread?._id == \"new\") {\n                let currentThread: IThreadResponseDTO = await createNewThread();\n                threadUID = currentThread?.thread?._id;\n                setActiveThread(currentThread?.thread);\n            }\n\n            const commentState = {\n                ...state,\n                createdBy: userState.currentUser.uid,\n                author: userState.currentUser.email,\n            };\n\n            const commentPayload = {\n                ...getCommentBody(commentState),\n            };\n\n            const commentData: ICommentPayload = {\n                threadUid: threadUID,\n                commentPayload,\n            };\n\n            if (editComment) {\n                let commentResponse: ICommentResponse = await onEditComment({\n                    threadUid: threadUID,\n                    commentUid: editComment,\n                    payload: commentPayload,\n                });\n\n                setThreadState((prevState: IThreadPopupState) => {\n                    const updatedComments = cloneDeep(prevState.comments);\n                    const commentIndex = findIndex(\n                        updatedComments,\n                        (c) => c._id === comment?._id\n                    );\n\n                    updatedComments.splice(\n                        commentIndex,\n                        1,\n                        commentResponse?.comment\n                    );\n\n                    return {\n                        ...prevState,\n                        editComment: \"\",\n                        comments: updatedComments,\n                    };\n                });\n                onClose(false);\n            } else {\n                let commentResponse: ICommentResponse =\n                    await onCreateComment(commentData);\n                setThreadState((prevState: IThreadPopupState) => ({\n                    ...prevState,\n                    comments: [commentResponse.comment, ...prevState.comments],\n                    commentCount: prevState.commentCount + 1,\n                }));\n\n                setState(initialState);\n                onClose(false);\n            }\n        } catch (error: any) {\n            console.error(\"Error submitting comment:\", error);\n        }\n    }, [error.hasError, state, activeThread]);\n\n    useEffect(() => {\n        if (state.message.length === 0) {\n            setError({ hasError: true, message: \"\" });\n        }\n    }, [state.message, setError]);\n\n    return {\n        state,\n        setState,\n        error,\n        showSuggestions,\n        cursorPosition,\n        selectedIndex,\n        filteredUsers,\n        inputRef,\n        listRef,\n        itemRefs,\n        handleInputChange,\n        handleKeyDown,\n        handleSubmit,\n        insertMention,\n        maxMessageLength,\n    };\n};\n"],"mappings":"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","names":["cursorPosition","error"]}
+{"version":3,"sources":["../../../../src/visualBuilder/hooks/useCommentTextArea.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport {\n    useState,\n    useEffect,\n    useCallback,\n    useRef,\n    useContext,\n} from \"preact/hooks\";\nimport { cloneDeep, findIndex } from \"lodash-es\";\nimport {\n    ICommentState,\n    IMentionList,\n    IMentionItem,\n    IMessageDTO,\n    IUserState,\n    IUserDTO,\n    IThreadResponseDTO,\n    ICommentResponse,\n    ICommentPayload,\n    IThreadPopupState,\n} from \"../types/collab.types\";\nimport {\n    validateCommentAndMentions,\n    filterOutInvalidMentions,\n    getMessageWithDisplayName,\n    getUserName,\n    getCommentBody,\n} from \"../utils/collabUtils\";\nimport { collabStyles } from \"../collab.style\";\nimport { maxMessageLength } from \"../utils/constants\";\nimport { ThreadProvider } from \"../components/Collab/ThreadPopup/ContextProvider\";\nimport useDynamicTextareaRows from \"../hooks/useDynamicTextareaRows\";\n\nconst initialState: ICommentState = {\n    message: \"\",\n    toUsers: [],\n    images: [],\n    createdBy: \"\",\n    author: \"\",\n};\n\nexport const useCommentTextArea = (\n    userState: IUserState,\n    comment: IMessageDTO | null | undefined,\n    onClose: (isResolved?: boolean) => void\n) => {\n    const [state, setState] = useState<ICommentState>(initialState);\n\n    const [showSuggestions, setShowSuggestions] = useState(false);\n    const [cursorPosition, setCursorPosition] = useState({\n        top: 0,\n        left: 0,\n        showAbove: false,\n    });\n    const [searchTerm, setSearchTerm] = useState(\"\");\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const [filteredUsers, setFilteredUsers] = useState<IMentionList[]>([]);\n\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const itemRefs = useRef<Array<HTMLLIElement | null>>([]);\n\n    const {\n        error,\n        setError,\n        onCreateComment,\n        onEditComment,\n        editComment,\n        setThreadState,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    } = useContext(ThreadProvider)!;\n\n    useDynamicTextareaRows(\n        \".collab-thread-body--input--textarea\",\n        state.message\n    );\n\n    useEffect(() => {\n        itemRefs.current = itemRefs.current.slice(\n            0,\n            userState.mentionsList.length\n        );\n    }, [userState.mentionsList]);\n\n    useEffect(() => {\n        const filteredUsersList = userState.mentionsList.filter((user) => {\n            if (!searchTerm) return true;\n            return user.display\n                .toLowerCase()\n                .includes(searchTerm.toLowerCase());\n        });\n        setFilteredUsers(filteredUsersList);\n    }, [searchTerm, userState.mentionsList]);\n\n    useEffect(() => {\n        const textArea = document.getElementById(\n            \"collab-thread-body--input--textarea\"\n        );\n        if (!textArea) return;\n\n        const baseClasses = {\n            focus: {\n                base: \"collab-thread-body--input--textarea--focus\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--focus\"\n                ],\n            },\n            hover: {\n                base: \"collab-thread-body--input--textarea--hover\",\n                goober: collabStyles()[\n                    \"collab-thread-body--input--textarea--hover\"\n                ],\n            },\n        };\n\n        const handleFocus = () => {\n            textArea.classList.add(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleBlur = () => {\n            textArea.classList.remove(\n                baseClasses.focus.base,\n                baseClasses.focus.goober\n            );\n        };\n\n        const handleMouseEnter = () => {\n            textArea.classList.add(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        const handleMouseLeave = () => {\n            textArea.classList.remove(\n                baseClasses.hover.base,\n                baseClasses.hover.goober\n            );\n        };\n\n        textArea.addEventListener(\"focus\", handleFocus);\n        textArea.addEventListener(\"blur\", handleBlur);\n        textArea.addEventListener(\"mouseenter\", handleMouseEnter);\n        textArea.addEventListener(\"mouseleave\", handleMouseLeave);\n\n        return () => {\n            textArea.removeEventListener(\"focus\", handleFocus);\n            textArea.removeEventListener(\"blur\", handleBlur);\n            textArea.removeEventListener(\"mouseenter\", handleMouseEnter);\n            textArea.removeEventListener(\"mouseleave\", handleMouseLeave);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!comment) return;\n\n        const toUsers: Array<IMentionItem> = [];\n\n        comment?.toUsers?.forEach((userId) => {\n            const user: IUserDTO = userState.userMap[userId];\n            toUsers.push({\n                display: `${user.display || getUserName(user)}`,\n                id: userId,\n            });\n        });\n\n        setState({\n            message:\n                getMessageWithDisplayName(comment, userState, \"text\") ?? \"\",\n            toUsers,\n            images: comment?.images ?? [],\n            createdBy: comment?.createdBy ?? \"\",\n            author: comment?.author ?? \"\",\n        });\n    }, [comment, userState]);\n\n    const findMentionSearchPosition = useCallback(\n        (text: string, cursorPos: number) => {\n            const textBeforeCursor = text.slice(0, cursorPos);\n            const atSymbolIndex = textBeforeCursor.lastIndexOf(\"@\");\n\n            if (atSymbolIndex === -1) return null;\n\n            const textBetweenAtAndCursor = textBeforeCursor.slice(\n                atSymbolIndex + 1\n            );\n            if (textBetweenAtAndCursor.includes(\" \")) return null;\n\n            return {\n                start: atSymbolIndex,\n                searchTerm: textBetweenAtAndCursor,\n            };\n        },\n        []\n    );\n\n    const calculatePosition = useCallback(\n        (textarea: HTMLTextAreaElement, cursorPosition: number) => {\n            const text = textarea?.value;\n            const textBeforeCursor = text?.slice(0, cursorPosition);\n            const lines = textBeforeCursor?.split(\"\\n\");\n            const currentLineNumber = (lines?.length || 0) - 1;\n            const currentLine = lines?.[currentLineNumber];\n\n            const style = window.getComputedStyle(textarea);\n            const lineHeight = parseInt(style.lineHeight);\n            const paddingLeft = parseInt(style.paddingLeft);\n            const paddingTop = parseInt(style.paddingTop);\n\n            const span = document.createElement(\"span\");\n            span.style.font = style.font;\n            span.style.visibility = \"hidden\";\n            span.style.position = \"absolute\";\n            span.style.whiteSpace = \"pre\";\n            span.textContent = currentLine ? currentLine : \"\";\n            document.body.appendChild(span);\n\n            const left = Math.min(\n                span.offsetWidth + paddingLeft,\n                textarea.offsetWidth - 200\n            );\n            document.body.removeChild(span);\n\n            const scrollTop = textarea.scrollTop;\n            const currentLineY =\n                currentLineNumber * lineHeight + paddingTop - scrollTop;\n            const nextLineY = currentLineY + lineHeight;\n\n            const viewportHeight = window.innerHeight;\n            const suggestionsHeight = 160;\n\n            const textareaRect = textarea.getBoundingClientRect();\n            const absoluteTop = textareaRect.top + nextLineY;\n            const spaceBelow = viewportHeight - absoluteTop;\n            const showAbove = spaceBelow < suggestionsHeight;\n            const top = showAbove ? currentLineY : nextLineY;\n\n            return {\n                top,\n                left,\n                showAbove,\n                absoluteTop,\n                scrollTop,\n                currentLineNumber,\n            };\n        },\n        []\n    );\n\n    const insertMention = useCallback(\n        (user: IMentionList) => {\n            const mention = findMentionSearchPosition(\n                state.message,\n                inputRef.current?.selectionStart || 0\n            );\n            if (!mention) return;\n\n            const beforeMention = state.message.slice(0, mention.start);\n            const afterMention = state.message.slice(\n                inputRef.current?.selectionStart || 0\n            );\n            const newValue = `${beforeMention}@${user.display} ${afterMention}`;\n\n            const updatedMentions = filterOutInvalidMentions(newValue, [\n                ...(state.toUsers || []),\n                { display: user.display, id: user.uid || \"\" },\n            ]);\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newValue,\n                toUsers: updatedMentions.toUsers,\n            }));\n            setShowSuggestions(false);\n\n            const ele = inputRef.current;\n            if (ele) {\n                ele.focus();\n            }\n        },\n        [state.message, state.toUsers, findMentionSearchPosition]\n    );\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const target = event.target as HTMLTextAreaElement | null;\n            if (!target) return;\n            const newPlainTextValue = target.value;\n            const trimmedValue = newPlainTextValue.trim();\n            const newPosition = target.selectionStart;\n\n            const mention = findMentionSearchPosition(\n                newPlainTextValue,\n                newPosition\n            );\n            if (mention) {\n                setSearchTerm(mention.searchTerm);\n                setShowSuggestions(true);\n                setCursorPosition(\n                    calculatePosition(\n                        inputRef.current as HTMLTextAreaElement,\n                        newPosition\n                    )\n                );\n                setSelectedIndex(0);\n            } else {\n                setShowSuggestions(false);\n            }\n\n            const errorMessage = validateCommentAndMentions(\n                newPlainTextValue,\n                state.toUsers ?? []\n            );\n            setError({\n                hasError: errorMessage !== \"\" || trimmedValue === \"\",\n                message: errorMessage,\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                message: newPlainTextValue,\n            }));\n        },\n        [state.toUsers, findMentionSearchPosition, calculatePosition, setError]\n    );\n\n    const handleKeyDown = useCallback(\n        (e: KeyboardEvent) => {\n            if (e.key === \"@\") {\n                const position = calculatePosition(\n                    inputRef.current as HTMLTextAreaElement,\n                    (e.target as HTMLTextAreaElement).selectionStart\n                );\n                setCursorPosition(position);\n                setSelectedIndex(0);\n            }\n\n            if (!showSuggestions) return;\n\n            switch (e.key) {\n                case \"ArrowDown\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) =>\n                        prev < filteredUsers.length - 1 ? prev + 1 : prev\n                    );\n                    break;\n                case \"ArrowUp\":\n                    e.preventDefault();\n                    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));\n                    break;\n                case \"Enter\":\n                    e.preventDefault();\n                    if (showSuggestions) {\n                        insertMention(filteredUsers[selectedIndex]);\n                    }\n                    break;\n                case \"Escape\":\n                    setShowSuggestions(false);\n                    inputRef.current?.focus();\n                    break;\n            }\n        },\n        [\n            showSuggestions,\n            filteredUsers,\n            selectedIndex,\n            insertMention,\n            calculatePosition,\n        ]\n    );\n\n    useEffect(() => {\n        itemRefs.current[selectedIndex]?.scrollIntoView({\n            behavior: \"smooth\",\n            block: \"nearest\",\n            inline: \"nearest\",\n        });\n    }, [selectedIndex]);\n\n    const handleSubmit = useCallback(async () => {\n        if (error.hasError) return;\n\n        try {\n            let threadUID: string = activeThread?._id;\n            if (activeThread?._id == \"new\") {\n                let currentThread: IThreadResponseDTO = await createNewThread();\n                threadUID = currentThread?.thread?._id;\n                setActiveThread(currentThread?.thread);\n            }\n\n            const commentState = {\n                ...state,\n                createdBy: userState.currentUser.uid,\n                author: userState.currentUser.email,\n            };\n\n            const commentPayload = {\n                ...getCommentBody(commentState),\n            };\n\n            const commentData: ICommentPayload = {\n                threadUid: threadUID,\n                commentPayload,\n            };\n\n            if (editComment) {\n                let commentResponse: ICommentResponse = await onEditComment({\n                    threadUid: threadUID,\n                    commentUid: editComment,\n                    payload: commentPayload,\n                });\n\n                setThreadState((prevState: IThreadPopupState) => {\n                    const updatedComments = cloneDeep(prevState.comments);\n                    const commentIndex = findIndex(\n                        updatedComments,\n                        (c) => c._id === comment?._id\n                    );\n\n                    updatedComments.splice(\n                        commentIndex,\n                        1,\n                        commentResponse?.comment\n                    );\n\n                    return {\n                        ...prevState,\n                        editComment: \"\",\n                        comments: updatedComments,\n                    };\n                });\n                onClose(false);\n            } else {\n                let commentResponse: ICommentResponse =\n                    await onCreateComment(commentData);\n                setThreadState((prevState: IThreadPopupState) => ({\n                    ...prevState,\n                    comments: [commentResponse.comment, ...prevState.comments],\n                    commentCount: prevState.commentCount + 1,\n                }));\n\n                setState(initialState);\n                onClose(false);\n            }\n        } catch (error: any) {\n            console.error(\"Error submitting comment:\", error);\n        }\n    }, [error.hasError, state, activeThread]);\n\n    useEffect(() => {\n        if (state.message.length === 0) {\n            setError({ hasError: true, message: \"\" });\n        }\n    }, [state.message, setError]);\n\n    return {\n        state,\n        setState,\n        error,\n        showSuggestions,\n        cursorPosition,\n        selectedIndex,\n        filteredUsers,\n        inputRef,\n        listRef,\n        itemRefs,\n        handleInputChange,\n        handleKeyDown,\n        handleSubmit,\n        insertMention,\n        maxMessageLength,\n    };\n};\n"],"mappings":"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","names":["cursorPosition","error"]}

package/dist/modern/visualBuilder/index.cjs

@@ -61,11 +61,10 @@ var import_updateFocussedState = require("./utils/updateFocussedState.cjs");
 var import_useHighlightCommentIcon = require("./eventManager/useHighlightCommentIcon.cjs");
 var import_generateHighlightedComment = require("./generators/generateHighlightedComment.cjs");
 var import_generateThread = require("./generators/generateThread.cjs");
-var import_generateThread2 = require("./generators/generateThread.cjs");
 var import_useRecalculateVariantDataCSLPValues = require("./eventManager/useRecalculateVariantDataCSLPValues.cjs");
 var import__ = require("../index.cjs");
 var import_useCollab = require("./eventManager/useCollab.cjs");
-var import_generateThread3 = require("./generators/generateThread.cjs");
+var import_generateThread2 = require("./generators/generateThread.cjs");
 var threadsPayload = [];
 var _VisualBuilder = class _VisualBuilder {
   constructor() {
@@ -75,14 +74,16 @@ var _VisualBuilder = class _VisualBuilder {
     this.focusedToolbar = null;
     this.scrollEventHandler = () => {
       (0, import_generateThread.updateCollabIconPosition)();
-      (0, import_generateThread2.updatePopupPositions)();
+      (0, import_generateThread.updatePopupPositions)();
+      (0, import_generateThread.updateSuggestionListPosition)();
       (0, import_generateHighlightedComment.updateHighlightedCommentIconPosition)();
     };
     this.resizeEventHandler = () => {
       const previousSelectedEditableDOM = _VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
       (0, import_generateHighlightedComment.updateHighlightedCommentIconPosition)();
       (0, import_generateThread.updateCollabIconPosition)();
-      (0, import_generateThread2.updatePopupPositions)();
+      (0, import_generateThread.updatePopupPositions)();
+      (0, import_generateThread.updateSuggestionListPosition)();
       if (previousSelectedEditableDOM) {
         this.handlePositionChange(
           previousSelectedEditableDOM
@@ -143,7 +144,9 @@ var _VisualBuilder = class _VisualBuilder {
             this.resizeObserver
           );
           const emptyBlockParents = Array.from(
-            document.querySelectorAll(`.${import__.VB_EmptyBlockParentClass}`)
+            document.querySelectorAll(
+              `.${import__.VB_EmptyBlockParentClass}`
+            )
           );
           const previousEmptyBlockParents = _VisualBuilder.VisualBuilderGlobalState.value.previousEmptyBlockParents;
           if (!(0, import_lodash_es.isEqual)(emptyBlockParents, previousEmptyBlockParents)) {
@@ -171,13 +174,13 @@ var _VisualBuilder = class _VisualBuilder {
           ".visual-builder__container"
         );
         if (container && threadsPayload) {
-          const unrenderedThreads = (0, import_generateThread3.filterUnrenderedThreads)(threadsPayload);
+          const unrenderedThreads = (0, import_generateThread2.filterUnrenderedThreads)(threadsPayload);
           if (unrenderedThreads.length > 0) {
-            (0, import_generateThread3.processThreadsBatch)(threadsPayload).then(
+            (0, import_generateThread2.processThreadsBatch)(threadsPayload).then(
               (missingThreadIds) => {
-                missingThreadIds.forEach(import_generateThread3.clearThreadStatus);
+                missingThreadIds.forEach(import_generateThread2.clearThreadStatus);
                 if (missingThreadIds.length > 0) {
-                  (0, import_generateThread3.handleMissingThreads)({
+                  (0, import_generateThread2.handleMissingThreads)({
                     payload: { isElementPresent: false },
                     threadUids: missingThreadIds
                   });
@@ -211,7 +214,8 @@ var _VisualBuilder = class _VisualBuilder {
         focusFieldValue: null,
         audienceMode: false,
         locale: "en-us",
-        variant: null
+        variant: null,
+        focusElementObserver: null
       };
       if (this.visualBuilderContainer) {
         window.document.body.removeChild(this.visualBuilderContainer);
@@ -341,7 +345,8 @@ _VisualBuilder.VisualBuilderGlobalState = (0, import_signals.signal)({
   focusFieldValue: null,
   audienceMode: false,
   locale: import_configManager.default.get().stackDetails.masterLocale || "en-us",
-  variant: null
+  variant: null,
+  focusElementObserver: null
 });
 var VisualBuilder = _VisualBuilder;
 // Annotate the CommonJS export names for ESM import in node: