npm - @contentstack/live-preview-utils - Versions diffs - 3.2.0-alpha.1 → 3.2.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (508) hide show

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

	@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AACP,uBAAqC;AAarC,yBAMO;AACP,oBAA6B;AAC7B,uBAAiC;AACjC,6BAA+B;AAC/B,oCAAmC;AAEnC,IAAM,eAA8B;AAAA,EAChC,SAAS;AAAA,EACT,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AACZ;AAEO,IAAM,qBAAqB,CAC9B,WACA,SACA,YACC;AACD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,YAAY;AAE9D,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAC5D,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;AACxE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,EAAE;AAC/C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AACpD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAyB,CAAC,CAAC;AAErE,QAAM,eAAW,qBAA4B,IAAI;AACjD,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,eAAW,qBAAoC,CAAC,CAAC;AAEvD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,QAAI,yBAAW,qCAAc;AAE7B,oCAAAA;AAAA,IACI;AAAA,IACA,MAAM;AAAA,EACV;AAEA,8BAAU,MAAM;AACZ,aAAS,UAAU,SAAS,QAAQ;AAAA,MAChC;AAAA,MACA,UAAU,aAAa;AAAA,IAC3B;AAAA,EACJ,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,8BAAU,MAAM;AACZ,UAAM,oBAAoB,UAAU,aAAa,OAAO,CAAC,SAAS;AAC9D,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,KAAK,QACP,YAAY,EACZ,SAAS,WAAW,YAAY,CAAC;AAAA,IAC1C,CAAC;AACD,qBAAiB,iBAAiB;AAAA,EACtC,GAAG,CAAC,YAAY,UAAU,YAAY,CAAC;AAEvC,8BAAU,MAAM;AACZ,UAAM,WAAW,SAAS;AAAA,MACtB;AAAA,IACJ;AACA,QAAI,CAAC,SAAU;AAEf,UAAM,cAAc;AAAA,MAChB,OAAO;AAAA,QACH,MAAM;AAAA,QACN,YAAQ,4BAAa,EACjB,4CACJ;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACH,MAAM;AAAA,QACN,YAAQ,4BAAa,EACjB,4CACJ;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,cAAc,MAAM;AACtB,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,UAAM,aAAa,MAAM;AACrB,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,UAAM,mBAAmB,MAAM;AAC3B,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,UAAM,mBAAmB,MAAM;AAC3B,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,WAAW;AAC9C,aAAS,iBAAiB,QAAQ,UAAU;AAC5C,aAAS,iBAAiB,cAAc,gBAAgB;AACxD,aAAS,iBAAiB,cAAc,gBAAgB;AAExD,WAAO,MAAM;AACT,eAAS,oBAAoB,SAAS,WAAW;AACjD,eAAS,oBAAoB,QAAQ,UAAU;AAC/C,eAAS,oBAAoB,cAAc,gBAAgB;AAC3D,eAAS,oBAAoB,cAAc,gBAAgB;AAAA,IAC/D;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAS;AAEd,UAAM,UAA+B,CAAC;AAEtC,aAAS,SAAS,QAAQ,CAAC,WAAW;AAClC,YAAM,OAAiB,UAAU,QAAQ,MAAM;AAC/C,cAAQ,KAAK;AAAA,QACT,SAAS,GAAG,KAAK,eAAW,gCAAY,IAAI,CAAC;AAAA,QAC7C,IAAI;AAAA,MACR,CAAC;AAAA,IACL,CAAC;AAED,aAAS;AAAA,MACL,aACI,8CAA0B,SAAS,WAAW,MAAM,KAAK;AAAA,MAC7D;AAAA,MACA,QAAQ,SAAS,UAAU,CAAC;AAAA,MAC5B,WAAW,SAAS,aAAa;AAAA,MACjC,QAAQ,SAAS,UAAU;AAAA,IAC/B,CAAC;AAAA,EACL,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,gCAA4B;AAAA,IAC9B,CAAC,MAAc,cAAsB;AACjC,YAAM,mBAAmB,KAAK,MAAM,GAAG,SAAS;AAChD,YAAM,gBAAgB,iBAAiB,YAAY,GAAG;AAEtD,UAAI,kBAAkB,GAAI,QAAO;AAEjC,YAAM,yBAAyB,iBAAiB;AAAA,QAC5C,gBAAgB;AAAA,MACpB;AACA,UAAI,uBAAuB,SAAS,GAAG,EAAG,QAAO;AAEjD,aAAO;AAAA,QACH,OAAO;AAAA,QACP,YAAY;AAAA,MAChB;AAAA,IACJ;AAAA,IACA,CAAC;AAAA,EACL;AAEA,QAAM,wBAAoB;AAAA,IACtB,CAAC,UAA+BC,oBAA2B;AACvD,YAAM,OAAO,UAAU;AACvB,YAAM,mBAAmB,MAAM,MAAM,GAAGA,eAAc;AACtD,YAAM,QAAQ,kBAAkB,MAAM,IAAI;AAC1C,YAAM,qBAAqB,OAAO,UAAU,KAAK;AACjD,YAAM,cAAc,QAAQ,iBAAiB;AAE7C,YAAM,QAAQ,OAAO,iBAAiB,QAAQ;AAC9C,YAAM,aAAa,SAAS,MAAM,UAAU;AAC5C,YAAM,cAAc,SAAS,MAAM,WAAW;AAC9C,YAAM,aAAa,SAAS,MAAM,UAAU;AAE5C,YAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,WAAK,MAAM,OAAO,MAAM;AACxB,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,WAAW;AACtB,WAAK,MAAM,aAAa;AACxB,WAAK,cAAc,cAAc,cAAc;AAC/C,eAAS,KAAK,YAAY,IAAI;AAE9B,YAAM,OAAO,KAAK;AAAA,QACd,KAAK,cAAc;AAAA,QACnB,SAAS,cAAc;AAAA,MAC3B;AACA,eAAS,KAAK,YAAY,IAAI;AAE9B,YAAM,eAAe,oBAAoB,aAAa;AACtD,YAAM,YAAY,eAAe;AAEjC,YAAM,iBAAiB,OAAO;AAC9B,YAAM,oBAAoB;AAE1B,YAAM,aACF,kBACC,SAAS,sBAAsB,EAAE,MAAM;AAC5C,YAAM,YAAY,aAAa;AAE/B,YAAM,MAAM,YACN,eAAe,oBACf;AAEN,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,CAAC;AAAA,EACL;AAEA,QAAM,oBAAgB;AAAA,IAClB,CAAC,SAAuB;AACpB,YAAM,UAAU;AAAA,QACZ,MAAM;AAAA,QACN,SAAS,SAAS,kBAAkB;AAAA,MACxC;AACA,UAAI,CAAC,QAAS;AAEd,YAAM,gBAAgB,MAAM,QAAQ,MAAM,GAAG,QAAQ,KAAK;AAC1D,YAAM,eAAe,MAAM,QAAQ;AAAA,QAC/B,SAAS,SAAS,kBAAkB;AAAA,MACxC;AACA,YAAM,WAAW,GAAG,aAAa,IAAI,KAAK,OAAO,IAAI,YAAY;AAEjE,YAAM,sBAAkB,6CAAyB,UAAU;AAAA,QACvD,GAAI,MAAM,WAAW,CAAC;AAAA,QACtB,EAAE,SAAS,KAAK,SAAS,IAAI,KAAK,OAAO,GAAG;AAAA,MAChD,CAAC;AAED,eAAS,CAAC,eAAe;AAAA,QACrB,GAAG;AAAA,QACH,SAAS;AAAA,QACT,SAAS,gBAAgB;AAAA,MAC7B,EAAE;AACF,yBAAmB,KAAK;AAExB,YAAM,MAAM,SAAS;AACrB,UAAI,KAAK;AACL,YAAI,MAAM;AAAA,MACd;AAAA,IACJ;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,SAAS,yBAAyB;AAAA,EAC5D;AAEA,QAAM,wBAAoB;AAAA,IACtB,CAAC,UAAkD;AAC/C,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,YAAM,oBAAoB,OAAO;AACjC,YAAM,eAAe,kBAAkB,KAAK;AAC5C,YAAM,cAAc,OAAO;AAE3B,YAAM,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,MACJ;AACA,UAAI,SAAS;AACT,sBAAc,QAAQ,UAAU;AAChC,2BAAmB,IAAI;AACvB;AAAA,UACI;AAAA,YACI,SAAS;AAAA,YACT;AAAA,UACJ;AAAA,QACJ;AACA,yBAAiB,CAAC;AAAA,MACtB,OAAO;AACH,2BAAmB,KAAK;AAAA,MAC5B;AAEA,YAAM,mBAAe;AAAA,QACjB;AAAA,QACA,MAAM,WAAW,CAAC;AAAA,MACtB;AACA,eAAS;AAAA,QACL,UAAU,iBAAiB,MAAM,iBAAiB;AAAA,QAClD,SAAS;AAAA,MACb,CAAC;AAED,eAAS,CAAC,eAAe;AAAA,QACrB,GAAG;AAAA,QACH,SAAS;AAAA,MACb,EAAE;AAAA,IACN;AAAA,IACA,CAAC,MAAM,SAAS,2BAA2B,mBAAmB,QAAQ;AAAA,EAC1E;AAEA,QAAM,oBAAgB;AAAA,IAClB,CAAC,MAAqB;AAClB,UAAI,EAAE,QAAQ,KAAK;AACf,cAAM,WAAW;AAAA,UACb,SAAS;AAAA,UACR,EAAE,OAA+B;AAAA,QACtC;AACA,0BAAkB,QAAQ;AAC1B,yBAAiB,CAAC;AAAA,MACtB;AAEA,UAAI,CAAC,gBAAiB;AAEtB,cAAQ,EAAE,KAAK;AAAA,QACX,KAAK;AACD,YAAE,eAAe;AACjB;AAAA,YAAiB,CAAC,SACd,OAAO,cAAc,SAAS,IAAI,OAAO,IAAI;AAAA,UACjD;AACA;AAAA,QACJ,KAAK;AACD,YAAE,eAAe;AACjB,2BAAiB,CAAC,SAAU,OAAO,IAAI,OAAO,IAAI,IAAK;AACvD;AAAA,QACJ,KAAK;AACD,YAAE,eAAe;AACjB,cAAI,iBAAiB;AACjB,0BAAc,cAAc,aAAa,CAAC;AAAA,UAC9C;AACA;AAAA,QACJ,KAAK;AACD,6BAAmB,KAAK;AACxB,mBAAS,SAAS,MAAM;AACxB;AAAA,MACR;AAAA,IACJ;AAAA,IACA;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,mBAAe,0BAAY,YAAY;AACzC,QAAI,MAAM,SAAU;AAEpB,QAAI;AACA,UAAI,YAAoB,cAAc;AACtC,UAAI,cAAc,OAAO,OAAO;AAC5B,YAAI,gBAAoC,MAAM,gBAAgB;AAC9D,oBAAY,eAAe,QAAQ;AACnC,wBAAgB,eAAe,MAAM;AAAA,MACzC;AAEA,YAAM,eAAe;AAAA,QACjB,GAAG;AAAA,QACH,WAAW,UAAU,YAAY;AAAA,QACjC,QAAQ,UAAU,YAAY;AAAA,MAClC;AAEA,YAAM,iBAAiB;AAAA,QACnB,OAAG,mCAAe,YAAY;AAAA,MAClC;AAEA,YAAM,cAA+B;AAAA,QACjC,WAAW;AAAA,QACX;AAAA,MACJ;AAEA,UAAI,aAAa;AACb,YAAI,kBAAoC,MAAM,cAAc;AAAA,UACxD,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,SAAS;AAAA,QACb,CAAC;AAED,uBAAe,CAAC,cAAiC;AAC7C,gBAAM,sBAAkB,4BAAU,UAAU,QAAQ;AACpD,gBAAM,mBAAe;AAAA,YACjB;AAAA,YACA,CAAC,MAAM,EAAE,QAAQ,SAAS;AAAA,UAC9B;AAEA,0BAAgB;AAAA,YACZ;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,UACrB;AAEA,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,aAAa;AAAA,YACb,UAAU;AAAA,UACd;AAAA,QACJ,CAAC;AACD,gBAAQ,KAAK;AAAA,MACjB,OAAO;AACH,YAAI,kBACA,MAAM,gBAAgB,WAAW;AACrC,uBAAe,CAAC,eAAkC;AAAA,UAC9C,GAAG;AAAA,UACH,UAAU,CAAC,gBAAgB,SAAS,GAAG,UAAU,QAAQ;AAAA,UACzD,cAAc,UAAU,eAAe;AAAA,QAC3C,EAAE;AAEF,iBAAS,YAAY;AACrB,gBAAQ,KAAK;AAAA,MACjB;AAAA,IACJ,SAASC,QAAY;AACjB,cAAQ,MAAM,6BAA6BA,MAAK;AAAA,IACpD;AAAA,EACJ,GAAG,CAAC,MAAM,UAAU,OAAO,YAAY,CAAC;AAExC,8BAAU,MAAM;AACZ,QAAI,MAAM,QAAQ,WAAW,GAAG;AAC5B,eAAS,EAAE,UAAU,MAAM,SAAS,GAAG,CAAC;AAAA,IAC5C;AAAA,EACJ,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;","names":["useDynamicTextareaRows","cursorPosition","error"]}
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({\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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;AAEA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,WAAW,iBAAiB;AAarC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,OAAO,4BAA4B;AAEnC,IAAM,eAA8B;AAAA,EAChC,SAAS;AAAA,EACT,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AACZ;AAEO,IAAM,qBAAqB,CAC9B,WACA,SACA,YACC;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,YAAY;AAE9D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;AACxE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAyB,CAAC,CAAC;AAErE,QAAM,WAAW,OAA4B,IAAI;AACjD,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,WAAW,OAAoC,CAAC,CAAC;AAEvD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI,WAAW,cAAc;AAE7B;AAAA,IACI;AAAA,IACA,MAAM;AAAA,EACV;AAEA,YAAU,MAAM;AACZ,aAAS,UAAU,SAAS,QAAQ;AAAA,MAChC;AAAA,MACA,UAAU,aAAa;AAAA,IAC3B;AAAA,EACJ,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACZ,UAAM,oBAAoB,UAAU,aAAa,OAAO,CAAC,SAAS;AAC9D,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,KAAK,QACP,YAAY,EACZ,SAAS,WAAW,YAAY,CAAC;AAAA,IAC1C,CAAC;AACD,qBAAiB,iBAAiB;AAAA,EACtC,GAAG,CAAC,YAAY,UAAU,YAAY,CAAC;AAEvC,YAAU,MAAM;AACZ,UAAM,WAAW,SAAS;AAAA,MACtB;AAAA,IACJ;AACA,QAAI,CAAC,SAAU;AAEf,UAAM,cAAc;AAAA,MAChB,OAAO;AAAA,QACH,MAAM;AAAA,QACN,QAAQ,aAAa,EACjB,4CACJ;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACH,MAAM;AAAA,QACN,QAAQ,aAAa,EACjB,4CACJ;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,cAAc,MAAM;AACtB,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,UAAM,aAAa,MAAM;AACrB,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,UAAM,mBAAmB,MAAM;AAC3B,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,UAAM,mBAAmB,MAAM;AAC3B,eAAS,UAAU;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,YAAY,MAAM;AAAA,MACtB;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,WAAW;AAC9C,aAAS,iBAAiB,QAAQ,UAAU;AAC5C,aAAS,iBAAiB,cAAc,gBAAgB;AACxD,aAAS,iBAAiB,cAAc,gBAAgB;AAExD,WAAO,MAAM;AACT,eAAS,oBAAoB,SAAS,WAAW;AACjD,eAAS,oBAAoB,QAAQ,UAAU;AAC/C,eAAS,oBAAoB,cAAc,gBAAgB;AAC3D,eAAS,oBAAoB,cAAc,gBAAgB;AAAA,IAC/D;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACZ,QAAI,CAAC,QAAS;AAEd,UAAM,UAA+B,CAAC;AAEtC,aAAS,SAAS,QAAQ,CAAC,WAAW;AAClC,YAAM,OAAiB,UAAU,QAAQ,MAAM;AAC/C,cAAQ,KAAK;AAAA,QACT,SAAS,GAAG,KAAK,WAAW,YAAY,IAAI,CAAC;AAAA,QAC7C,IAAI;AAAA,MACR,CAAC;AAAA,IACL,CAAC;AAED,aAAS;AAAA,MACL,SACI,0BAA0B,SAAS,WAAW,MAAM,KAAK;AAAA,MAC7D;AAAA,MACA,QAAQ,SAAS,UAAU,CAAC;AAAA,MAC5B,WAAW,SAAS,aAAa;AAAA,MACjC,QAAQ,SAAS,UAAU;AAAA,IAC/B,CAAC;AAAA,EACL,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,4BAA4B;AAAA,IAC9B,CAAC,MAAc,cAAsB;AACjC,YAAM,mBAAmB,KAAK,MAAM,GAAG,SAAS;AAChD,YAAM,gBAAgB,iBAAiB,YAAY,GAAG;AAEtD,UAAI,kBAAkB,GAAI,QAAO;AAEjC,YAAM,yBAAyB,iBAAiB;AAAA,QAC5C,gBAAgB;AAAA,MACpB;AACA,UAAI,uBAAuB,SAAS,GAAG,EAAG,QAAO;AAEjD,aAAO;AAAA,QACH,OAAO;AAAA,QACP,YAAY;AAAA,MAChB;AAAA,IACJ;AAAA,IACA,CAAC;AAAA,EACL;AAEA,QAAM,oBAAoB;AAAA,IACtB,CAAC,UAA+BA,oBAA2B;AACvD,YAAM,OAAO,UAAU;AACvB,YAAM,mBAAmB,MAAM,MAAM,GAAGA,eAAc;AACtD,YAAM,QAAQ,kBAAkB,MAAM,IAAI;AAC1C,YAAM,qBAAqB,OAAO,UAAU,KAAK;AACjD,YAAM,cAAc,QAAQ,iBAAiB;AAE7C,YAAM,QAAQ,OAAO,iBAAiB,QAAQ;AAC9C,YAAM,aAAa,SAAS,MAAM,UAAU;AAC5C,YAAM,cAAc,SAAS,MAAM,WAAW;AAC9C,YAAM,aAAa,SAAS,MAAM,UAAU;AAE5C,YAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,WAAK,MAAM,OAAO,MAAM;AACxB,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,WAAW;AACtB,WAAK,MAAM,aAAa;AACxB,WAAK,cAAc,cAAc,cAAc;AAC/C,eAAS,KAAK,YAAY,IAAI;AAE9B,YAAM,OAAO,KAAK;AAAA,QACd,KAAK,cAAc;AAAA,QACnB,SAAS,cAAc;AAAA,MAC3B;AACA,eAAS,KAAK,YAAY,IAAI;AAE9B,YAAM,eAAe,oBAAoB,aAAa;AACtD,YAAM,YAAY,eAAe;AAEjC,YAAM,iBAAiB,OAAO;AAC9B,YAAM,oBAAoB;AAE1B,YAAM,aACF,kBACC,SAAS,sBAAsB,EAAE,MAAM;AAC5C,YAAM,YAAY,aAAa;AAE/B,YAAM,MAAM,YACN,eAAe,oBACf;AAEN,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,CAAC;AAAA,EACL;AAEA,QAAM,gBAAgB;AAAA,IAClB,CAAC,SAAuB;AACpB,YAAM,UAAU;AAAA,QACZ,MAAM;AAAA,QACN,SAAS,SAAS,kBAAkB;AAAA,MACxC;AACA,UAAI,CAAC,QAAS;AAEd,YAAM,gBAAgB,MAAM,QAAQ,MAAM,GAAG,QAAQ,KAAK;AAC1D,YAAM,eAAe,MAAM,QAAQ;AAAA,QAC/B,SAAS,SAAS,kBAAkB;AAAA,MACxC;AACA,YAAM,WAAW,GAAG,aAAa,IAAI,KAAK,OAAO,IAAI,YAAY;AAEjE,YAAM,kBAAkB,yBAAyB,UAAU;AAAA,QACvD,GAAI,MAAM,WAAW,CAAC;AAAA,QACtB,EAAE,SAAS,KAAK,SAAS,IAAI,KAAK,OAAO,GAAG;AAAA,MAChD,CAAC;AAED,eAAS,CAAC,eAAe;AAAA,QACrB,GAAG;AAAA,QACH,SAAS;AAAA,QACT,SAAS,gBAAgB;AAAA,MAC7B,EAAE;AACF,yBAAmB,KAAK;AAExB,YAAM,MAAM,SAAS;AACrB,UAAI,KAAK;AACL,YAAI,MAAM;AAAA,MACd;AAAA,IACJ;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,SAAS,yBAAyB;AAAA,EAC5D;AAEA,QAAM,oBAAoB;AAAA,IACtB,CAAC,UAAkD;AAC/C,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,YAAM,oBAAoB,OAAO;AACjC,YAAM,eAAe,kBAAkB,KAAK;AAC5C,YAAM,cAAc,OAAO;AAE3B,YAAM,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,MACJ;AACA,UAAI,SAAS;AACT,sBAAc,QAAQ,UAAU;AAChC,2BAAmB,IAAI;AACvB;AAAA,UACI;AAAA,YACI,SAAS;AAAA,YACT;AAAA,UACJ;AAAA,QACJ;AACA,yBAAiB,CAAC;AAAA,MACtB,OAAO;AACH,2BAAmB,KAAK;AAAA,MAC5B;AAEA,YAAM,eAAe;AAAA,QACjB;AAAA,QACA,MAAM,WAAW,CAAC;AAAA,MACtB;AACA,eAAS;AAAA,QACL,UAAU,iBAAiB,MAAM,iBAAiB;AAAA,QAClD,SAAS;AAAA,MACb,CAAC;AAED,eAAS,CAAC,eAAe;AAAA,QACrB,GAAG;AAAA,QACH,SAAS;AAAA,MACb,EAAE;AAAA,IACN;AAAA,IACA,CAAC,MAAM,SAAS,2BAA2B,mBAAmB,QAAQ;AAAA,EAC1E;AAEA,QAAM,gBAAgB;AAAA,IAClB,CAAC,MAAqB;AAClB,UAAI,EAAE,QAAQ,KAAK;AACf,cAAM,WAAW;AAAA,UACb,SAAS;AAAA,UACR,EAAE,OAA+B;AAAA,QACtC;AACA,0BAAkB,QAAQ;AAC1B,yBAAiB,CAAC;AAAA,MACtB;AAEA,UAAI,CAAC,gBAAiB;AAEtB,cAAQ,EAAE,KAAK;AAAA,QACX,KAAK;AACD,YAAE,eAAe;AACjB;AAAA,YAAiB,CAAC,SACd,OAAO,cAAc,SAAS,IAAI,OAAO,IAAI;AAAA,UACjD;AACA;AAAA,QACJ,KAAK;AACD,YAAE,eAAe;AACjB,2BAAiB,CAAC,SAAU,OAAO,IAAI,OAAO,IAAI,IAAK;AACvD;AAAA,QACJ,KAAK;AACD,YAAE,eAAe;AACjB,cAAI,iBAAiB;AACjB,0BAAc,cAAc,aAAa,CAAC;AAAA,UAC9C;AACA;AAAA,QACJ,KAAK;AACD,6BAAmB,KAAK;AACxB,mBAAS,SAAS,MAAM;AACxB;AAAA,MACR;AAAA,IACJ;AAAA,IACA;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,eAAe,YAAY,YAAY;AACzC,QAAI,MAAM,SAAU;AAEpB,QAAI;AACA,UAAI,YAAoB,cAAc;AACtC,UAAI,cAAc,OAAO,OAAO;AAC5B,YAAI,gBAAoC,MAAM,gBAAgB;AAC9D,oBAAY,eAAe,QAAQ;AACnC,wBAAgB,eAAe,MAAM;AAAA,MACzC;AAEA,YAAM,eAAe;AAAA,QACjB,GAAG;AAAA,QACH,WAAW,UAAU,YAAY;AAAA,QACjC,QAAQ,UAAU,YAAY;AAAA,MAClC;AAEA,YAAM,iBAAiB;AAAA,QACnB,GAAG,eAAe,YAAY;AAAA,MAClC;AAEA,YAAM,cAA+B;AAAA,QACjC,WAAW;AAAA,QACX;AAAA,MACJ;AAEA,UAAI,aAAa;AACb,YAAI,kBAAoC,MAAM,cAAc;AAAA,UACxD,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,SAAS;AAAA,QACb,CAAC;AAED,uBAAe,CAAC,cAAiC;AAC7C,gBAAM,kBAAkB,UAAU,UAAU,QAAQ;AACpD,gBAAM,eAAe;AAAA,YACjB;AAAA,YACA,CAAC,MAAM,EAAE,QAAQ,SAAS;AAAA,UAC9B;AAEA,0BAAgB;AAAA,YACZ;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,UACrB;AAEA,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,aAAa;AAAA,YACb,UAAU;AAAA,UACd;AAAA,QACJ,CAAC;AACD,gBAAQ,KAAK;AAAA,MACjB,OAAO;AACH,YAAI,kBACA,MAAM,gBAAgB,WAAW;AACrC,uBAAe,CAAC,eAAkC;AAAA,UAC9C,GAAG;AAAA,UACH,UAAU,CAAC,gBAAgB,SAAS,GAAG,UAAU,QAAQ;AAAA,UACzD,cAAc,UAAU,eAAe;AAAA,QAC3C,EAAE;AAEF,iBAAS,YAAY;AACrB,gBAAQ,KAAK;AAAA,MACjB;AAAA,IACJ,SAASC,QAAY;AACjB,cAAQ,MAAM,6BAA6BA,MAAK;AAAA,IACpD;AAAA,EACJ,GAAG,CAAC,MAAM,UAAU,OAAO,YAAY,CAAC;AAExC,YAAU,MAAM;AACZ,QAAI,MAAM,QAAQ,WAAW,GAAG;AAC5B,eAAS,EAAE,UAAU,MAAM,SAAS,GAAG,CAAC;AAAA,IAC5C;AAAA,EACJ,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;","names":["cursorPosition","error"]}
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({\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 CHANGED Viewed

@@ -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:

package/dist/modern/visualBuilder/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/visualBuilder/index.ts"],"sourcesContent":["import { Signal, signal } from \"@preact/signals\";\n\nimport { inIframe } from \"../common/inIframe\";\nimport Config from \"../configManager/configManager\";\nimport {\n useHistoryPostMessageEvent,\n useOnEntryUpdatePostMessageEvent,\n} from \"../livePreview/eventManager/postMessageEvent.hooks\";\nimport {\n ILivePreviewModeConfig,\n ILivePreviewWindowType,\n IVisualBuilderInitEvent,\n} from \"../types/types\";\nimport { generateStartEditingButton } from \"./generators/generateStartEditingButton\";\n\nimport { addFocusOverlay } from \"./generators/generateOverlay\";\nimport { getEntryIdentifiersInCurrentPage } from \"./utils/getEntryIdentifiersInCurrentPage\";\nimport visualBuilderPostMessage from \"./utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./utils/types/postMessage.types\";\n\nimport { setup } from \"goober\";\nimport { debounce, isEqual } from \"lodash-es\";\nimport { h } from \"preact\";\nimport { extractDetailsFromCslp } from \"../cslp\";\nimport initUI from \"./components\";\nimport { useDraftFieldsPostMessageEvent } from \"./eventManager/useDraftFieldsPostMessageEvent\";\nimport { useHideFocusOverlayPostMessageEvent } from \"./eventManager/useHideFocusOverlayPostMessageEvent\";\nimport { useScrollToField } from \"./eventManager/useScrollToField\";\nimport { useVariantFieldsPostMessageEvent } from \"./eventManager/useVariantsPostMessageEvent\";\nimport {\n generateEmptyBlocks,\n removeEmptyBlocks,\n} from \"./generators/generateEmptyBlock\";\nimport { addEventListeners, removeEventListeners } from \"./listeners\";\nimport { addKeyboardShortcuts } from \"./listeners/keyboardShortcuts\";\nimport { FieldSchemaMap } from \"./utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"./utils/isFieldDisabled\";\nimport {\n updateFocussedState,\n updateFocussedStateOnMutation,\n} from \"./utils/updateFocussedState\";\nimport { useHighlightCommentIcon } from \"./eventManager/useHighlightCommentIcon\";\nimport { updateHighlightedCommentIconPosition } from \"./generators/generateHighlightedComment\";\nimport { updateCollabIconPosition } from \"./generators/generateThread\";\nimport { updatePopupPositions } from \"./generators/generateThread\";\nimport { useRecalculateVariantDataCSLPValues } from \"./eventManager/useRecalculateVariantDataCSLPValues\";\nimport { VB_EmptyBlockParentClass } from \"..\";\nimport { useCollab } from \"./eventManager/useCollab\";\nimport {\n handleMissingThreads,\n processThreadsBatch,\n filterUnrenderedThreads,\n clearThreadStatus,\n} from \"./generators/generateThread\";\nimport { IThreadDTO } from \"./types/collab.types\";\n\ninterface VisualBuilderGlobalStateImpl {\n previousSelectedEditableDOM: HTMLElement \| Element \| null;\n previousHoveredTargetDOM: Element \| null;\n previousEmptyBlockParents: Element[] \| [];\n focusFieldValue: string \| null;\n audienceMode: boolean;\n locale: string;\n variant: string \| null;\n}\n\nlet threadsPayload: IThreadDTO[] = [];\n\nexport class VisualBuilder {\n private customCursor: HTMLDivElement \| null = null;\n private overlayWrapper: HTMLDivElement \| null = null;\n private visualBuilderContainer: HTMLDivElement \| null = null;\n private focusedToolbar: HTMLDivElement \| null = null;\n\n static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl> =\n signal({\n previousSelectedEditableDOM: null,\n previousHoveredTargetDOM: null,\n previousEmptyBlockParents: [],\n focusFieldValue: null,\n audienceMode: false,\n locale: Config.get().stackDetails.masterLocale \|\| \"en-us\",\n variant: null,\n });\n\n private handlePositionChange(editableElement: HTMLElement) {\n updateFocussedState({\n editableElement,\n visualBuilderContainer: this.visualBuilderContainer,\n overlayWrapper: this.overlayWrapper,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n });\n }\n\n private scrollEventHandler = () => {\n updateCollabIconPosition();\n updatePopupPositions();\n updateHighlightedCommentIconPosition(); // Update icons position\n };\n\n private resizeEventHandler = () => {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n updateHighlightedCommentIconPosition();\n updateCollabIconPosition();\n updatePopupPositions();\n if (previousSelectedEditableDOM) {\n this.handlePositionChange(\n previousSelectedEditableDOM as HTMLElement\n );\n }\n };\n\n private resizeObserver = new ResizeObserver(([entry]) => {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!this.overlayWrapper \|\| !previousSelectedEditableDOM) {\n return;\n }\n\n // if previous selected editable element is not same as the current\n // target and the target is also not psuedo-editable then return\n if (\n !entry.target.isSameNode(previousSelectedEditableDOM) &&\n !entry.target.classList.contains(\n \"visual-builder__pseudo-editable-element\"\n )\n ) {\n return;\n }\n\n const isPsuedoEditableElement = entry.target.classList.contains(\n \"visual-builder__pseudo-editable-element\"\n );\n\n // the \"actual\" editable element when the current target is psuedo-editable\n // is the previous selected editable element instead of the closest data-cslp element\n // (cant use closest because the psuedo editable is absolute positioned)\n // (Note - why do we even need the closest? we do an early exit if entry.target\n // is not the previous selected editable element, needs more investigation)\n const editableElement = (\n isPsuedoEditableElement\n ? previousSelectedEditableDOM\n : entry.target.closest(\"[data-cslp]\")\n ) as HTMLElement \| null;\n\n if (isPsuedoEditableElement) {\n // if the current target is psuedo-editable, then the resizing occurred by typing\n // into the psuedo editable, simply update the focus overlay\n addFocusOverlay(entry.target, this.overlayWrapper);\n\n // TODO check if we can now resize the actual editable element\n // when psuedo editable element is resized, avoid infinite loops\n } else if (editableElement) {\n this.handlePositionChange(editableElement);\n }\n\n // update the overlay if field is disabled\n const cslpData =\n editableElement && editableElement.getAttribute(\"data-cslp\");\n\n if (!editableElement \|\| !cslpData) {\n return;\n }\n\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n ).then((fieldSchema) => {\n if (!fieldSchema) {\n return;\n }\n const { isDisabled } = isFieldDisabled(fieldSchema, {\n editableElement,\n fieldMetadata,\n });\n if (isDisabled) {\n addFocusOverlay(\n editableElement,\n this.overlayWrapper as HTMLDivElement,\n isDisabled\n );\n }\n });\n });\n\n private mutationObserver = new MutationObserver(\n debounce(\n async () => {\n updateFocussedStateOnMutation(\n this.overlayWrapper,\n this.focusedToolbar,\n this.visualBuilderContainer,\n this.resizeObserver\n );\n\n const emptyBlockParents = Array.from(\n document.querySelectorAll(`.${VB_EmptyBlockParentClass}`)\n );\n\n const previousEmptyBlockParents = VisualBuilder\n .VisualBuilderGlobalState.value\n .previousEmptyBlockParents as Element[];\n\n if (!isEqual(emptyBlockParents, previousEmptyBlockParents)) {\n const noMoreEmptyBlockParent =\n previousEmptyBlockParents.filter(\n (x) => !emptyBlockParents.includes(x)\n );\n const newEmptyBlockParent = emptyBlockParents.filter(\n (x) => !previousEmptyBlockParents.includes(x)\n );\n\n removeEmptyBlocks(noMoreEmptyBlockParent);\n await generateEmptyBlocks(newEmptyBlockParent);\n\n VisualBuilder.VisualBuilderGlobalState.value = {\n ...VisualBuilder.VisualBuilderGlobalState.value,\n previousEmptyBlockParents: emptyBlockParents,\n };\n }\n },\n 100,\n { trailing: true }\n )\n );\n\n private threadMutationObserver = new MutationObserver(\n debounce(() => {\n const container = document.querySelector(\n \".visual-builder__container\"\n );\n if (container && threadsPayload) {\n const unrenderedThreads =\n filterUnrenderedThreads(threadsPayload);\n\n if (unrenderedThreads.length > 0) {\n processThreadsBatch(threadsPayload).then(\n (missingThreadIds) => {\n missingThreadIds.forEach(clearThreadStatus);\n if (missingThreadIds.length > 0) {\n handleMissingThreads({\n payload: { isElementPresent: false },\n threadUids: missingThreadIds,\n });\n }\n }\n );\n }\n\n threadsPayload = [];\n }\n }, 1000)\n );\n\n constructor() {\n // Handles changes in element positions due to sidebar toggling or window resizing,\n // triggering a redraw of the visual builder\n window.addEventListener(\"resize\", this.resizeEventHandler);\n window.addEventListener(\"scroll\", this.scrollEventHandler);\n initUI({\n resizeObserver: this.resizeObserver,\n });\n\n // Initializing goober for css-in-js\n setup(h);\n\n this.visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n );\n this.overlayWrapper = document.querySelector(\n \".visual-builder__overlay__wrapper\"\n );\n this.customCursor = document.querySelector(\".visual-builder__cursor\");\n this.focusedToolbar = document.querySelector(\n \".visual-builder__focused-toolbar\"\n );\n\n const config = Config.get();\n\n if (!config.enable \|\| config.mode < ILivePreviewModeConfig.BUILDER) {\n return;\n }\n visualBuilderPostMessage\n ?.send<IVisualBuilderInitEvent>(\"init\", {\n isSSR: config.ssr,\n href: window.location.href,\n })\n .then((data) => {\n const {\n windowType = ILivePreviewWindowType.BUILDER,\n stackDetails,\n collab,\n } = data \|\| {};\n Config.set(\"windowType\", windowType);\n Config.set(\n \"stackDetails.masterLocale\",\n stackDetails?.masterLocale \|\| \"en-us\"\n );\n\n if (collab) {\n Config.set(\"collab.enable\", collab.enable);\n Config.set(\"collab.isFeedbackMode\", collab.isFeedbackMode);\n Config.set(\"collab.inviteMetadata\", collab.inviteMetadata);\n }\n\n if (collab?.payload) {\n threadsPayload = collab?.payload;\n }\n\n addEventListeners({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n customCursor: this.customCursor,\n });\n\n this.threadMutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n attributes: false,\n });\n\n useHistoryPostMessageEvent();\n useCollab();\n\n if (windowType === ILivePreviewWindowType.BUILDER) {\n addKeyboardShortcuts({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n });\n useScrollToField();\n useHighlightCommentIcon();\n\n this.mutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n });\n\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_ALL_ENTRIES_IN_CURRENT_PAGE,\n getEntryIdentifiersInCurrentPage\n );\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE\n );\n\n useHideFocusOverlayPostMessageEvent({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n });\n\n // These events are used to sync the data when we made some changes in the entry without invoking live preview module.\n useOnEntryUpdatePostMessageEvent();\n useRecalculateVariantDataCSLPValues();\n useDraftFieldsPostMessageEvent();\n useVariantFieldsPostMessageEvent();\n }\n })\n .catch(() => {\n if (!inIframe()) {\n generateStartEditingButton(this.visualBuilderContainer);\n }\n });\n }\n\n // TODO: write test cases\n destroy = (): void => {\n // Remove event listeners\n window.removeEventListener(\"resize\", this.resizeEventHandler);\n window.removeEventListener(\"scroll\", this.scrollEventHandler);\n\n // Remove custom event listeners\n removeEventListeners({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n customCursor: this.customCursor,\n });\n\n // Disconnect observers\n this.resizeObserver.disconnect();\n this.mutationObserver.disconnect();\n this.threadMutationObserver.disconnect();\n\n // Clear global state\n VisualBuilder.VisualBuilderGlobalState.value = {\n previousSelectedEditableDOM: null,\n previousHoveredTargetDOM: null,\n previousEmptyBlockParents: [],\n focusFieldValue: null,\n audienceMode: false,\n locale: \"en-us\",\n variant: null,\n };\n\n // Remove DOM elements\n if (this.visualBuilderContainer) {\n window.document.body.removeChild(this.visualBuilderContainer);\n }\n if (this.customCursor) {\n this.customCursor.remove();\n }\n if (this.overlayWrapper) {\n this.overlayWrapper.remove();\n }\n if (this.focusedToolbar) {\n this.focusedToolbar.remove();\n }\n\n // Nullify references\n this.customCursor = null;\n this.overlayWrapper = null;\n this.visualBuilderContainer = null;\n this.focusedToolbar = null;\n };\n}\n"],"mappings":"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","names":["import_generateThread","initUI","Config","visualBuilderPostMessage"]}
1	+ {"version":3,"sources":["../../../src/visualBuilder/index.ts"],"sourcesContent":["import { Signal, signal } from \"@preact/signals\";\n\nimport { inIframe } from \"../common/inIframe\";\nimport Config from \"../configManager/configManager\";\nimport {\n useHistoryPostMessageEvent,\n useOnEntryUpdatePostMessageEvent,\n} from \"../livePreview/eventManager/postMessageEvent.hooks\";\nimport {\n ILivePreviewModeConfig,\n ILivePreviewWindowType,\n IVisualBuilderInitEvent,\n} from \"../types/types\";\nimport { generateStartEditingButton } from \"./generators/generateStartEditingButton\";\n\nimport { addFocusOverlay } from \"./generators/generateOverlay\";\nimport { getEntryIdentifiersInCurrentPage } from \"./utils/getEntryIdentifiersInCurrentPage\";\nimport visualBuilderPostMessage from \"./utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./utils/types/postMessage.types\";\n\nimport { setup } from \"goober\";\nimport { debounce, isEqual } from \"lodash-es\";\nimport { h } from \"preact\";\nimport { extractDetailsFromCslp } from \"../cslp\";\nimport initUI from \"./components\";\nimport { useDraftFieldsPostMessageEvent } from \"./eventManager/useDraftFieldsPostMessageEvent\";\nimport { useHideFocusOverlayPostMessageEvent } from \"./eventManager/useHideFocusOverlayPostMessageEvent\";\nimport { useScrollToField } from \"./eventManager/useScrollToField\";\nimport { useVariantFieldsPostMessageEvent } from \"./eventManager/useVariantsPostMessageEvent\";\nimport {\n generateEmptyBlocks,\n removeEmptyBlocks,\n} from \"./generators/generateEmptyBlock\";\nimport { addEventListeners, removeEventListeners } from \"./listeners\";\nimport { addKeyboardShortcuts } from \"./listeners/keyboardShortcuts\";\nimport { FieldSchemaMap } from \"./utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"./utils/isFieldDisabled\";\nimport {\n updateFocussedState,\n updateFocussedStateOnMutation,\n} from \"./utils/updateFocussedState\";\nimport { useHighlightCommentIcon } from \"./eventManager/useHighlightCommentIcon\";\nimport { updateHighlightedCommentIconPosition } from \"./generators/generateHighlightedComment\";\nimport {\n updateCollabIconPosition,\n updatePopupPositions,\n updateSuggestionListPosition,\n} from \"./generators/generateThread\";\nimport { useRecalculateVariantDataCSLPValues } from \"./eventManager/useRecalculateVariantDataCSLPValues\";\nimport { VB_EmptyBlockParentClass } from \"..\";\nimport { useCollab } from \"./eventManager/useCollab\";\nimport {\n handleMissingThreads,\n processThreadsBatch,\n filterUnrenderedThreads,\n clearThreadStatus,\n} from \"./generators/generateThread\";\nimport { IThreadDTO } from \"./types/collab.types\";\n\ninterface VisualBuilderGlobalStateImpl {\n previousSelectedEditableDOM: HTMLElement \| Element \| null;\n previousHoveredTargetDOM: Element \| null;\n previousEmptyBlockParents: Element[] \| [];\n focusFieldValue: string \| null;\n audienceMode: boolean;\n locale: string;\n variant: string \| null;\n focusElementObserver: MutationObserver \| null;\n}\n\nlet threadsPayload: IThreadDTO[] = [];\n\nexport class VisualBuilder {\n private customCursor: HTMLDivElement \| null = null;\n private overlayWrapper: HTMLDivElement \| null = null;\n private visualBuilderContainer: HTMLDivElement \| null = null;\n private focusedToolbar: HTMLDivElement \| null = null;\n\n static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl> =\n signal({\n previousSelectedEditableDOM: null,\n previousHoveredTargetDOM: null,\n previousEmptyBlockParents: [],\n focusFieldValue: null,\n audienceMode: false,\n locale: Config.get().stackDetails.masterLocale \|\| \"en-us\",\n variant: null,\n focusElementObserver: null,\n });\n\n private handlePositionChange(editableElement: HTMLElement) {\n updateFocussedState({\n editableElement,\n visualBuilderContainer: this.visualBuilderContainer,\n overlayWrapper: this.overlayWrapper,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n });\n }\n\n private scrollEventHandler = () => {\n updateCollabIconPosition();\n updatePopupPositions();\n updateSuggestionListPosition();\n updateHighlightedCommentIconPosition(); // Update icons position\n };\n\n private resizeEventHandler = () => {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n updateHighlightedCommentIconPosition();\n updateCollabIconPosition();\n updatePopupPositions();\n updateSuggestionListPosition();\n if (previousSelectedEditableDOM) {\n this.handlePositionChange(\n previousSelectedEditableDOM as HTMLElement\n );\n }\n };\n\n private resizeObserver = new ResizeObserver(([entry]) => {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!this.overlayWrapper \|\| !previousSelectedEditableDOM) {\n return;\n }\n\n // if previous selected editable element is not same as the current\n // target and the target is also not psuedo-editable then return\n if (\n !entry.target.isSameNode(previousSelectedEditableDOM) &&\n !entry.target.classList.contains(\n \"visual-builder__pseudo-editable-element\"\n )\n ) {\n return;\n }\n\n const isPsuedoEditableElement = entry.target.classList.contains(\n \"visual-builder__pseudo-editable-element\"\n );\n\n // the \"actual\" editable element when the current target is psuedo-editable\n // is the previous selected editable element instead of the closest data-cslp element\n // (cant use closest because the psuedo editable is absolute positioned)\n // (Note - why do we even need the closest? we do an early exit if entry.target\n // is not the previous selected editable element, needs more investigation)\n const editableElement = (\n isPsuedoEditableElement\n ? previousSelectedEditableDOM\n : entry.target.closest(\"[data-cslp]\")\n ) as HTMLElement \| null;\n\n if (isPsuedoEditableElement) {\n // if the current target is psuedo-editable, then the resizing occurred by typing\n // into the psuedo editable, simply update the focus overlay\n addFocusOverlay(entry.target, this.overlayWrapper);\n\n // TODO check if we can now resize the actual editable element\n // when psuedo editable element is resized, avoid infinite loops\n } else if (editableElement) {\n this.handlePositionChange(editableElement);\n }\n\n // update the overlay if field is disabled\n const cslpData =\n editableElement && editableElement.getAttribute(\"data-cslp\");\n\n if (!editableElement \|\| !cslpData) {\n return;\n }\n\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n ).then((fieldSchema) => {\n if (!fieldSchema) {\n return;\n }\n const { isDisabled } = isFieldDisabled(fieldSchema, {\n editableElement,\n fieldMetadata,\n });\n if (isDisabled) {\n addFocusOverlay(\n editableElement,\n this.overlayWrapper as HTMLDivElement,\n isDisabled\n );\n }\n });\n });\n\n private mutationObserver = new MutationObserver(\n debounce(\n async () => {\n updateFocussedStateOnMutation(\n this.overlayWrapper,\n this.focusedToolbar,\n this.visualBuilderContainer,\n this.resizeObserver\n );\n\n const emptyBlockParents = Array.from(\n document.querySelectorAll(\n `.${VB_EmptyBlockParentClass}`\n )\n );\n\n const previousEmptyBlockParents = VisualBuilder\n .VisualBuilderGlobalState.value\n .previousEmptyBlockParents as Element[];\n\n if (!isEqual(emptyBlockParents, previousEmptyBlockParents)) {\n const noMoreEmptyBlockParent =\n previousEmptyBlockParents.filter(\n (x) => !emptyBlockParents.includes(x)\n );\n const newEmptyBlockParent = emptyBlockParents.filter(\n (x) => !previousEmptyBlockParents.includes(x)\n );\n\n removeEmptyBlocks(noMoreEmptyBlockParent);\n await generateEmptyBlocks(newEmptyBlockParent);\n\n VisualBuilder.VisualBuilderGlobalState.value = {\n ...VisualBuilder.VisualBuilderGlobalState.value,\n previousEmptyBlockParents: emptyBlockParents,\n };\n }\n },\n 100,\n { trailing: true }\n )\n );\n\n private threadMutationObserver = new MutationObserver(\n debounce(() => {\n const container = document.querySelector(\n \".visual-builder__container\"\n );\n if (container && threadsPayload) {\n const unrenderedThreads =\n filterUnrenderedThreads(threadsPayload);\n\n if (unrenderedThreads.length > 0) {\n processThreadsBatch(threadsPayload).then(\n (missingThreadIds) => {\n missingThreadIds.forEach(clearThreadStatus);\n if (missingThreadIds.length > 0) {\n handleMissingThreads({\n payload: { isElementPresent: false },\n threadUids: missingThreadIds,\n });\n }\n }\n );\n }\n\n threadsPayload = [];\n }\n }, 1000)\n );\n\n constructor() {\n // Handles changes in element positions due to sidebar toggling or window resizing,\n // triggering a redraw of the visual builder\n window.addEventListener(\"resize\", this.resizeEventHandler);\n window.addEventListener(\"scroll\", this.scrollEventHandler);\n initUI({\n resizeObserver: this.resizeObserver,\n });\n\n // Initializing goober for css-in-js\n setup(h);\n\n this.visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n );\n this.overlayWrapper = document.querySelector(\n \".visual-builder__overlay__wrapper\"\n );\n this.customCursor = document.querySelector(\".visual-builder__cursor\");\n this.focusedToolbar = document.querySelector(\n \".visual-builder__focused-toolbar\"\n );\n\n const config = Config.get();\n\n if (!config.enable \|\| config.mode < ILivePreviewModeConfig.BUILDER) {\n return;\n }\n\n visualBuilderPostMessage\n ?.send<IVisualBuilderInitEvent>(\"init\", {\n isSSR: config.ssr,\n href: window.location.href,\n })\n .then((data) => {\n const {\n windowType = ILivePreviewWindowType.BUILDER,\n stackDetails,\n collab,\n } = data \|\| {};\n Config.set(\"windowType\", windowType);\n Config.set(\n \"stackDetails.masterLocale\",\n stackDetails?.masterLocale \|\| \"en-us\"\n );\n\n if (collab) {\n Config.set(\"collab.enable\", collab.enable);\n Config.set(\"collab.isFeedbackMode\", collab.isFeedbackMode);\n Config.set(\"collab.inviteMetadata\", collab.inviteMetadata);\n }\n\n if (collab?.payload) {\n threadsPayload = collab?.payload;\n }\n\n addEventListeners({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n customCursor: this.customCursor,\n });\n\n this.threadMutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n attributes: false,\n });\n\n useHistoryPostMessageEvent();\n useCollab();\n\n if (windowType === ILivePreviewWindowType.BUILDER) {\n addKeyboardShortcuts({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n });\n useScrollToField();\n useHighlightCommentIcon();\n\n this.mutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n });\n\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_ALL_ENTRIES_IN_CURRENT_PAGE,\n getEntryIdentifiersInCurrentPage\n );\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE\n );\n\n useHideFocusOverlayPostMessageEvent({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n });\n\n // These events are used to sync the data when we made some changes in the entry without invoking live preview module.\n useOnEntryUpdatePostMessageEvent();\n useRecalculateVariantDataCSLPValues();\n useDraftFieldsPostMessageEvent();\n useVariantFieldsPostMessageEvent();\n }\n })\n .catch(() => {\n if (!inIframe()) {\n generateStartEditingButton(this.visualBuilderContainer);\n }\n });\n }\n\n // TODO: write test cases\n destroy = (): void => {\n // Remove event listeners\n window.removeEventListener(\"resize\", this.resizeEventHandler);\n window.removeEventListener(\"scroll\", this.scrollEventHandler);\n\n // Remove custom event listeners\n removeEventListeners({\n overlayWrapper: this.overlayWrapper,\n visualBuilderContainer: this.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: this.focusedToolbar,\n resizeObserver: this.resizeObserver,\n customCursor: this.customCursor,\n });\n\n // Disconnect observers\n this.resizeObserver.disconnect();\n this.mutationObserver.disconnect();\n this.threadMutationObserver.disconnect();\n\n // Clear global state\n VisualBuilder.VisualBuilderGlobalState.value = {\n previousSelectedEditableDOM: null,\n previousHoveredTargetDOM: null,\n previousEmptyBlockParents: [],\n focusFieldValue: null,\n audienceMode: false,\n locale: \"en-us\",\n variant: null,\n focusElementObserver: null,\n };\n\n // Remove DOM elements\n if (this.visualBuilderContainer) {\n window.document.body.removeChild(this.visualBuilderContainer);\n }\n if (this.customCursor) {\n this.customCursor.remove();\n }\n if (this.overlayWrapper) {\n this.overlayWrapper.remove();\n }\n if (this.focusedToolbar) {\n this.focusedToolbar.remove();\n }\n\n // Nullify references\n this.customCursor = null;\n this.overlayWrapper = null;\n this.visualBuilderContainer = null;\n this.focusedToolbar = null;\n };\n}\n"],"mappings":"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","names":["import_generateThread","initUI","Config","visualBuilderPostMessage"]}

package/dist/modern/visualBuilder/index.d.cts CHANGED Viewed

@@ -8,6 +8,7 @@ interface VisualBuilderGlobalStateImpl {
     audienceMode: boolean;
     locale: string;
     variant: string | null;
+    focusElementObserver: MutationObserver | null;
 }
 declare class VisualBuilder {
     private customCursor;

package/dist/modern/visualBuilder/index.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ interface VisualBuilderGlobalStateImpl {
     audienceMode: boolean;
     locale: string;
     variant: string | null;
+    focusElementObserver: MutationObserver | null;
 }
 declare class VisualBuilder {
     private customCursor;

package/dist/modern/visualBuilder/index.js CHANGED Viewed

@@ -40,8 +40,11 @@ import {
 } from "./utils/updateFocussedState.js";
 import { useHighlightCommentIcon } from "./eventManager/useHighlightCommentIcon.js";
 import { updateHighlightedCommentIconPosition } from "./generators/generateHighlightedComment.js";
-import { updateCollabIconPosition } from "./generators/generateThread.js";
-import { updatePopupPositions } from "./generators/generateThread.js";
+import {
+  updateCollabIconPosition,
+  updatePopupPositions,
+  updateSuggestionListPosition
+} from "./generators/generateThread.js";
 import { useRecalculateVariantDataCSLPValues } from "./eventManager/useRecalculateVariantDataCSLPValues.js";
 import { VB_EmptyBlockParentClass } from "../index.js";
 import { useCollab } from "./eventManager/useCollab.js";
@@ -61,6 +64,7 @@ var _VisualBuilder = class _VisualBuilder {
     this.scrollEventHandler = () => {
       updateCollabIconPosition();
       updatePopupPositions();
+      updateSuggestionListPosition();
       updateHighlightedCommentIconPosition();
     };
     this.resizeEventHandler = () => {
@@ -68,6 +72,7 @@ var _VisualBuilder = class _VisualBuilder {
       updateHighlightedCommentIconPosition();
       updateCollabIconPosition();
       updatePopupPositions();
+      updateSuggestionListPosition();
       if (previousSelectedEditableDOM) {
         this.handlePositionChange(
           previousSelectedEditableDOM
@@ -128,7 +133,9 @@ var _VisualBuilder = class _VisualBuilder {
             this.resizeObserver
           );
           const emptyBlockParents = Array.from(
-            document.querySelectorAll(`.${VB_EmptyBlockParentClass}`)
+            document.querySelectorAll(
+              `.${VB_EmptyBlockParentClass}`
+            )
           );
           const previousEmptyBlockParents = _VisualBuilder.VisualBuilderGlobalState.value.previousEmptyBlockParents;
           if (!isEqual(emptyBlockParents, previousEmptyBlockParents)) {
@@ -196,7 +203,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);
@@ -326,7 +334,8 @@ _VisualBuilder.VisualBuilderGlobalState = signal({
   focusFieldValue: null,
   audienceMode: false,
   locale: Config.get().stackDetails.masterLocale || "en-us",
-  variant: null
+  variant: null,
+  focusElementObserver: null
 });
 var VisualBuilder = _VisualBuilder;
 export {