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

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

@@ -0,0 +1,406 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/hooks/useCommentTextArea.ts
+var useCommentTextArea_exports = {};
+__export(useCommentTextArea_exports, {
+  useCommentTextArea: () => useCommentTextArea
+});
+module.exports = __toCommonJS(useCommentTextArea_exports);
+var import_hooks = require("preact/hooks");
+var import_lodash_es = require("lodash-es");
+var import_collabUtils = require("../utils/collabUtils.cjs");
+var import_collab = require("../collab.style.cjs");
+var import_constants = require("../utils/constants.cjs");
+var import_ContextProvider = require("../components/Collab/ThreadPopup/ContextProvider/index.cjs");
+var import_useDynamicTextareaRows = __toESM(require("../hooks/useDynamicTextareaRows.cjs"), 1);
+var initialState = {
+  message: "",
+  toUsers: [],
+  images: [],
+  createdBy: "",
+  author: ""
+};
+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 [searchTerm, setSearchTerm] = (0, import_hooks.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_hooks.useState)(0);
+  const [filteredUsers, setFilteredUsers] = (0, import_hooks.useState)([]);
+  const inputRef = (0, import_hooks.useRef)(null);
+  const listRef = (0, import_hooks.useRef)(null);
+  const itemRefs = (0, import_hooks.useRef)([]);
+  const {
+    error,
+    setError,
+    onCreateComment,
+    onEditComment,
+    editComment,
+    setThreadState,
+    activeThread,
+    setActiveThread,
+    createNewThread
+  } = (0, import_hooks.useContext)(import_ContextProvider.ThreadProvider);
+  (0, import_useDynamicTextareaRows.default)(
+    ".collab-thread-body--input--textarea",
+    state.message
+  );
+  (0, import_hooks.useEffect)(() => {
+    itemRefs.current = itemRefs.current.slice(
+      0,
+      userState.mentionsList.length
+    );
+  }, [userState.mentionsList]);
+  (0, import_hooks.useEffect)(() => {
+    const filteredUsersList = userState.mentionsList.filter((user) => {
+      if (!searchTerm) return true;
+      return user.display.toLowerCase().includes(searchTerm.toLowerCase());
+    });
+    setFilteredUsers(filteredUsersList);
+  }, [searchTerm, userState.mentionsList]);
+  (0, import_hooks.useEffect)(() => {
+    const textArea = document.getElementById(
+      "collab-thread-body--input--textarea"
+    );
+    if (!textArea) return;
+    const baseClasses = {
+      focus: {
+        base: "collab-thread-body--input--textarea--focus",
+        goober: (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--focus"]
+      },
+      hover: {
+        base: "collab-thread-body--input--textarea--hover",
+        goober: (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--hover"]
+      }
+    };
+    const handleFocus = () => {
+      textArea.classList.add(
+        baseClasses.focus.base,
+        baseClasses.focus.goober
+      );
+    };
+    const handleBlur = () => {
+      textArea.classList.remove(
+        baseClasses.focus.base,
+        baseClasses.focus.goober
+      );
+    };
+    const handleMouseEnter = () => {
+      textArea.classList.add(
+        baseClasses.hover.base,
+        baseClasses.hover.goober
+      );
+    };
+    const handleMouseLeave = () => {
+      textArea.classList.remove(
+        baseClasses.hover.base,
+        baseClasses.hover.goober
+      );
+    };
+    textArea.addEventListener("focus", handleFocus);
+    textArea.addEventListener("blur", handleBlur);
+    textArea.addEventListener("mouseenter", handleMouseEnter);
+    textArea.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      textArea.removeEventListener("focus", handleFocus);
+      textArea.removeEventListener("blur", handleBlur);
+      textArea.removeEventListener("mouseenter", handleMouseEnter);
+      textArea.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, []);
+  (0, import_hooks.useEffect)(() => {
+    if (!comment) return;
+    const toUsers = [];
+    comment?.toUsers?.forEach((userId) => {
+      const user = userState.userMap[userId];
+      toUsers.push({
+        display: `${user.display || (0, import_collabUtils.getUserName)(user)}`,
+        id: userId
+      });
+    });
+    setState({
+      message: (0, import_collabUtils.getMessageWithDisplayName)(comment, userState, "text") ?? "",
+      toUsers,
+      images: comment?.images ?? [],
+      createdBy: comment?.createdBy ?? "",
+      author: comment?.author ?? ""
+    });
+  }, [comment, userState]);
+  const findMentionSearchPosition = (0, import_hooks.useCallback)(
+    (text, cursorPos) => {
+      const textBeforeCursor = text.slice(0, cursorPos);
+      const atSymbolIndex = textBeforeCursor.lastIndexOf("@");
+      if (atSymbolIndex === -1) return null;
+      const textBetweenAtAndCursor = textBeforeCursor.slice(
+        atSymbolIndex + 1
+      );
+      if (textBetweenAtAndCursor.includes(" ")) return null;
+      return {
+        start: atSymbolIndex,
+        searchTerm: textBetweenAtAndCursor
+      };
+    },
+    []
+  );
+  const calculatePosition = (0, import_hooks.useCallback)(
+    (textarea, cursorPosition2) => {
+      const text = textarea?.value;
+      const textBeforeCursor = text?.slice(0, cursorPosition2);
+      const lines = textBeforeCursor?.split("\n");
+      const currentLineNumber = (lines?.length || 0) - 1;
+      const currentLine = lines?.[currentLineNumber];
+      const style = window.getComputedStyle(textarea);
+      const lineHeight = parseInt(style.lineHeight);
+      const paddingLeft = parseInt(style.paddingLeft);
+      const paddingTop = parseInt(style.paddingTop);
+      const span = document.createElement("span");
+      span.style.font = style.font;
+      span.style.visibility = "hidden";
+      span.style.position = "absolute";
+      span.style.whiteSpace = "pre";
+      span.textContent = currentLine ? currentLine : "";
+      document.body.appendChild(span);
+      const left = Math.min(
+        span.offsetWidth + paddingLeft,
+        textarea.offsetWidth - 200
+      );
+      document.body.removeChild(span);
+      const currentLineY = currentLineNumber * lineHeight + paddingTop;
+      const nextLineY = currentLineY + lineHeight;
+      const viewportHeight = window.innerHeight;
+      const suggestionsHeight = 160;
+      const spaceBelow = viewportHeight - (textarea.getBoundingClientRect().top + nextLineY);
+      const showAbove = spaceBelow < suggestionsHeight;
+      const top = showAbove ? currentLineY - suggestionsHeight : nextLineY;
+      return {
+        top,
+        left,
+        showAbove
+      };
+    },
+    []
+  );
+  const insertMention = (0, import_hooks.useCallback)(
+    (user) => {
+      const mention = findMentionSearchPosition(
+        state.message,
+        inputRef.current?.selectionStart || 0
+      );
+      if (!mention) return;
+      const beforeMention = state.message.slice(0, mention.start);
+      const afterMention = state.message.slice(
+        inputRef.current?.selectionStart || 0
+      );
+      const newValue = `${beforeMention}@${user.display} ${afterMention}`;
+      const updatedMentions = (0, import_collabUtils.filterOutInvalidMentions)(newValue, [
+        ...state.toUsers || [],
+        { display: user.display, id: user.uid || "" }
+      ]);
+      setState((prevState) => ({
+        ...prevState,
+        message: newValue,
+        toUsers: updatedMentions.toUsers
+      }));
+      setShowSuggestions(false);
+      const ele = inputRef.current;
+      if (ele) {
+        ele.focus();
+      }
+    },
+    [state.message, state.toUsers, findMentionSearchPosition]
+  );
+  const handleInputChange = (0, import_hooks.useCallback)(
+    (event) => {
+      const target = event.target;
+      if (!target) return;
+      const newPlainTextValue = target.value;
+      const trimmedValue = newPlainTextValue.trim();
+      const newPosition = target.selectionStart;
+      const mention = findMentionSearchPosition(
+        newPlainTextValue,
+        newPosition
+      );
+      if (mention) {
+        setSearchTerm(mention.searchTerm);
+        setShowSuggestions(true);
+        setCursorPosition(
+          calculatePosition(
+            inputRef.current,
+            newPosition
+          )
+        );
+        setSelectedIndex(0);
+      } else {
+        setShowSuggestions(false);
+      }
+      const errorMessage = (0, import_collabUtils.validateCommentAndMentions)(
+        newPlainTextValue,
+        state.toUsers ?? []
+      );
+      setError({
+        hasError: errorMessage !== "" || trimmedValue === "",
+        message: errorMessage
+      });
+      setState((prevState) => ({
+        ...prevState,
+        message: newPlainTextValue
+      }));
+    },
+    [state.toUsers, findMentionSearchPosition, calculatePosition, setError]
+  );
+  const handleKeyDown = (0, import_hooks.useCallback)(
+    (e) => {
+      if (e.key === "@") {
+        const position = calculatePosition(
+          inputRef.current,
+          e.target.selectionStart
+        );
+        setCursorPosition(position);
+        setSelectedIndex(0);
+      }
+      if (!showSuggestions) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex(
+            (prev) => prev < filteredUsers.length - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => prev > 0 ? prev - 1 : prev);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (showSuggestions) {
+            insertMention(filteredUsers[selectedIndex]);
+          }
+          break;
+        case "Escape":
+          setShowSuggestions(false);
+          inputRef.current?.focus();
+          break;
+      }
+    },
+    [
+      showSuggestions,
+      filteredUsers,
+      selectedIndex,
+      insertMention,
+      calculatePosition
+    ]
+  );
+  const handleSubmit = (0, import_hooks.useCallback)(async () => {
+    if (error.hasError) return;
+    try {
+      let threadUID = activeThread?._id;
+      if (activeThread?._id == "new") {
+        let currentThread = await createNewThread();
+        threadUID = currentThread?.thread?._id;
+        setActiveThread(currentThread?.thread);
+      }
+      const commentState = {
+        ...state,
+        createdBy: userState.currentUser.uid,
+        author: userState.currentUser.email
+      };
+      const commentPayload = {
+        ...(0, import_collabUtils.getCommentBody)(commentState)
+      };
+      const commentData = {
+        threadUid: threadUID,
+        commentPayload
+      };
+      if (editComment) {
+        let commentResponse = await onEditComment({
+          threadUid: threadUID,
+          commentUid: editComment,
+          payload: commentPayload
+        });
+        setThreadState((prevState) => {
+          const updatedComments = (0, import_lodash_es.cloneDeep)(prevState.comments);
+          const commentIndex = (0, import_lodash_es.findIndex)(
+            updatedComments,
+            (c) => c._id === comment?._id
+          );
+          updatedComments.splice(
+            commentIndex,
+            1,
+            commentResponse?.comment
+          );
+          return {
+            ...prevState,
+            editComment: "",
+            comments: updatedComments
+          };
+        });
+        onClose(false);
+      } else {
+        let commentResponse = await onCreateComment(commentData);
+        setThreadState((prevState) => ({
+          ...prevState,
+          comments: [commentResponse.comment, ...prevState.comments],
+          commentCount: prevState.commentCount + 1
+        }));
+        setState(initialState);
+        onClose(false);
+      }
+    } catch (error2) {
+      console.error("Error submitting comment:", error2);
+    }
+  }, [error.hasError, state, activeThread]);
+  (0, import_hooks.useEffect)(() => {
+    if (state.message.length === 0) {
+      setError({ hasError: true, message: "" });
+    }
+  }, [state.message, setError]);
+  return {
+    state,
+    setState,
+    error,
+    showSuggestions,
+    cursorPosition,
+    selectedIndex,
+    filteredUsers,
+    inputRef,
+    listRef,
+    itemRefs,
+    handleInputChange,
+    handleKeyDown,
+    handleSubmit,
+    insertMention,
+    maxMessageLength: import_constants.maxMessageLength
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCommentTextArea
+});
+//# sourceMappingURL=useCommentTextArea.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,26 @@
+import * as preact_hooks from 'preact/hooks';
+import { IUserState, IMessageDTO, ICommentState, IErrorState, IMentionList } from '../types/collab.types.cjs';
+import React from 'preact/compat';
+
+declare const useCommentTextArea: (userState: IUserState, comment: IMessageDTO | null | undefined, onClose: (isResolved?: boolean) => void) => {
+    state: ICommentState;
+    setState: React.SetStateAction<ICommentState>;
+    error: IErrorState;
+    showSuggestions: boolean;
+    cursorPosition: {
+        top: number;
+        left: number;
+    };
+    selectedIndex: number;
+    filteredUsers: IMentionList[];
+    inputRef: React.Ref<HTMLTextAreaElement>;
+    listRef: React.Ref<HTMLUListElement>;
+    itemRefs: preact_hooks.MutableRef<(HTMLLIElement | null)[]>;
+    handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleSubmit: () => Promise<void>;
+    insertMention: (user: IMentionList) => void;
+    maxMessageLength: number;
+};
+
+export { useCommentTextArea };

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

@@ -0,0 +1,26 @@
+import * as preact_hooks from 'preact/hooks';
+import { IUserState, IMessageDTO, ICommentState, IErrorState, IMentionList } from '../types/collab.types.js';
+import React from 'preact/compat';
+
+declare const useCommentTextArea: (userState: IUserState, comment: IMessageDTO | null | undefined, onClose: (isResolved?: boolean) => void) => {
+    state: ICommentState;
+    setState: React.SetStateAction<ICommentState>;
+    error: IErrorState;
+    showSuggestions: boolean;
+    cursorPosition: {
+        top: number;
+        left: number;
+    };
+    selectedIndex: number;
+    filteredUsers: IMentionList[];
+    inputRef: React.Ref<HTMLTextAreaElement>;
+    listRef: React.Ref<HTMLUListElement>;
+    itemRefs: preact_hooks.MutableRef<(HTMLLIElement | null)[]>;
+    handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleSubmit: () => Promise<void>;
+    insertMention: (user: IMentionList) => void;
+    maxMessageLength: number;
+};
+
+export { useCommentTextArea };