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

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

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 (484) hide show

package/dist/legacy/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":"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","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/legacy/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/legacy/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/legacy/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([]);
@@ -173,17 +177,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
       };
     },
     []
@@ -300,6 +310,14 @@ var useCommentTextArea = (userState, comment, onClose) => {
       calculatePosition
     ]
   );
+  useEffect(() => {
+    var _a;
+    (_a = itemRefs.current[selectedIndex]) == null ? void 0 : _a.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [selectedIndex]);
   const handleSubmit = useCallback(async () => {
     var _a;
     if (error.hasError) return;

package/dist/legacy/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":"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","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/legacy/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);
@@ -343,7 +347,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/legacy/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","_a"]}
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 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","_a"]}

package/dist/legacy/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/legacy/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/legacy/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);
@@ -328,7 +336,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 {