@contentstack/live-preview-utils/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n    ICommentTextAreaProps,\n    IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n    errorMessage,\n}) => (\n    <div\n        className={classNames(\n            \"collab-thread-input-indicator--error\",\n            collabStyles()[\"collab-thread-input-indicator--error\"]\n        )}\n    >\n        {errorMessage}\n    </div>\n);\n\nconst CharacterCounter: React.FC<{\n    currentLength: number;\n    maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n    <div\n        className={classNames(\n            \"collab-thread-input-indicator--count\",\n            collabStyles()[\"collab-thread-input-indicator--count\"]\n        )}\n    >\n        {currentLength}/{maxLength}\n    </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n    filteredUsers: IMentionList[];\n    selectedIndex: number;\n    cursorPosition: { top: number; showAbove: boolean };\n    inputRef: React.RefObject<HTMLTextAreaElement>;\n    listRef: React.RefObject<HTMLUListElement>;\n    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n    insertMention: (user: IMentionList) => void;\n    handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n    filteredUsers,\n    selectedIndex,\n    cursorPosition,\n    inputRef,\n    listRef,\n    itemRefs,\n    insertMention,\n    handleKeyDown,\n}) => {\n    if (filteredUsers.length === 0) return null;\n\n    return (\n        <ul\n            className={classNames(\n                \"collab-thread-body--input--textarea--suggestionsList\",\n                collabStyles()[\n                    \"collab-thread-body--input--textarea--suggestionsList\"\n                ]\n            )}\n            style={{\n                ...(cursorPosition.showAbove\n                    ? {\n                          bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top || 0) - cursorPosition.top}px`,\n                          top: \"auto\",\n                      }\n                    : {\n                          top: `${(inputRef.current?.getBoundingClientRect().top || 0) + cursorPosition.top}px`,\n                      }),\n            }}\n            ref={listRef}\n        >\n            {filteredUsers.map((user, index) => (\n                <li\n                    key={user.uid}\n                    onClick={() => insertMention(user)}\n                    className={classNames(\n                        \"collab-thread-body--input--textarea--suggestionsList--item\",\n                        collabStyles()[\n                            \"collab-thread-body--input--textarea--suggestionsList--item\"\n                        ],\n                        index === selectedIndex\n                            ? collabStyles()[\n                                  \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n                              ]\n                            : \"\"\n                    )}\n                    ref={(el) => {\n                        itemRefs.current[index] = el;\n                    }}\n                    onKeyDown={(e) =>\n                        e.key === \"Enter\"\n                            ? insertMention(user)\n                            : handleKeyDown(e as KeyboardEvent)\n                    }\n                    tabIndex={-1}\n                    aria-selected={index === selectedIndex}\n                >\n                    {user.display === user.email ? (\n                        user.display.length > 20 ? (\n                            <Tooltip content={user.display || \"\"}>\n                                {(user.display || \"\").substring(0, 18) + \"...\"}\n                            </Tooltip>\n                        ) : (\n                            user.display\n                        )\n                    ) : (\n                        <Tooltip\n                            content={user.display + \" - \" + user.email || \"\"}\n                        >\n                            {user.display.length > 20\n                                ? (user.display || \"\").substring(0, 18) + \"...\"\n                                : user.display}\n                        </Tooltip>\n                    )}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n    ({ userState, handleOnSaveRef, comment, onClose }) => {\n        const {\n            state,\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        } = useCommentTextArea(userState, comment, onClose);\n\n        const onChangeHandler = (event: Event) =>\n            handleInputChange(event as any);\n        const onKeyDownHandler = (event: KeyboardEvent) =>\n            handleKeyDown(event as any);\n\n        useEffect(() => {\n            handleOnSaveRef.current = handleSubmit;\n        }, [handleSubmit, handleOnSaveRef]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-body--input--wrapper\",\n                    collabStyles()[\"collab-thread-body--input--wrapper\"]\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-body--input\",\n                        collabStyles()[\"collab-thread-body--input\"]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-body--input--textarea--wrapper\",\n                            collabStyles()[\n                                \"collab-thread-body--input--textarea--wrapper\"\n                            ]\n                        )}\n                    >\n                        <textarea\n                            name=\"collab-thread-body--input--textarea\"\n                            id=\"collab-thread-body--input--textarea\"\n                            rows={1}\n                            className={classNames(\n                                \"collab-thread-body--input--textarea\",\n                                collabStyles()[\n                                    \"collab-thread-body--input--textarea\"\n                                ]\n                            )}\n                            value={state.message}\n                            onChange={onChangeHandler}\n                            onKeyDown={onKeyDownHandler}\n                            maxLength={maxMessageLength}\n                            placeholder=\"Enter a comment or tag others using “@”\"\n                            ref={inputRef}\n                        />\n                        {showSuggestions && (\n                            <MentionSuggestionsList\n                                filteredUsers={filteredUsers}\n                                selectedIndex={selectedIndex}\n                                cursorPosition={cursorPosition}\n                                inputRef={inputRef}\n                                listRef={listRef}\n                                itemRefs={itemRefs}\n                                insertMention={insertMention}\n                                handleKeyDown={handleKeyDown}\n                            />\n                        )}\n                    </div>\n                </div>\n\n                <div\n                    className={classNames(\n                        \"collab-thread-input-indicator--wrapper\",\n                        \"flex-v-center\",\n                        collabStyles()[\n                            \"collab-thread-input-indicator--wrapper\"\n                        ],\n                        flexAlignCenter\n                    )}\n                >\n                    <ErrorIndicator errorMessage={error.message} />\n                    <CharacterCounter\n                        currentLength={state.message.length}\n                        maxLength={maxMessageLength}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["classNames","Tooltip","React"]}