@chayns-components/emoji-input 5.0.0-beta.349 → 5.0.0-beta.350

package/lib/components/emoji-input/EmojiInput.js

@@ -67,6 +67,28 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       (0, _selection.restoreSelection)(editorRef.current);
     }
   }, []);
+  const handleBeforeInput = (0, _react.useCallback)(event => {
+    if (!editorRef.current) {
+      return;
+    }
+    const {
+      data,
+      type
+    } = event.nativeEvent;
+    if (type === 'textInput' && data && data.length > 1 && data.includes('\n')) {
+      event.preventDefault();
+      event.stopPropagation();
+      const text = (0, _emoji.convertEmojisToUnicode)(data);
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text
+      });
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, []);
 
   /**
    * This function handles the 'input' events of the 'contentEditable' element and also passes the
@@ -134,7 +156,6 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       event.preventDefault();
       let text = event.clipboardData.getData('text/plain');
       text = (0, _emoji.convertEmojisToUnicode)(text);
-      console.debug('handlePaste', text);
       (0, _insert.insertTextAtCursorPosition)({
         editorElement: editorRef.current,
         text
@@ -268,6 +289,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     },
     contentEditable: !isDisabled,
     id: inputId,
+    onBeforeInput: handleBeforeInput,
     onBlur: handleBlur,
     onFocus: handleFocus,
     onInput: handleInput,

package/lib/components/emoji-input/EmojiInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","EmojiInput","forwardRef","_ref","ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","editorRef","useRef","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","preventDefault","stopPropagation","document","execCommand","text","convertHTMLToText","handleKeyDown","key","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","console","debug","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","useLayoutEffect","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","useMemo","handleFocus","handleBlur","createElement","StyledEmojiInput","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","type","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onPaste","StyledEmojiInputLabel","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\n    getCharCodeThatWillBeDeleted,\n    restoreSelection,\n    saveSelection,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputLabel,\n    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\n    StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * HTML id of the input element\n     */\n    inputId?: string;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets the maximum height of the input field.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that is executed when the input field loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the input field gets the focus.\n     */\n    onFocus?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the text of the input changes. In addition to the original\n     * event, the original text is returned as second parameter, in which the internally used HTML\n     * elements have been converted back to BB codes.\n     */\n    onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n    /**\n     * Function that is executed when a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the visibility of the popup changes.\n     * @param {boolean} isVisible - Whether the popup is visible or not\n     */\n    onPopupVisibilityChange?: (isVisible: boolean) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the placeholder should be shown after the input has focus.\n     */\n    shouldHidePlaceholderOnFocus?: boolean;\n    /**\n     * Prevents the EmojiPickerPopup icon from being displayed\n     */\n    shouldPreventEmojiPicker?: boolean;\n    /**\n     * The plain text value of the input field. Instead of HTML elements BB codes must be used at\n     * this point. These are then converted by the input field into corresponding HTML elements.\n     */\n    value: string;\n};\n\nexport type EmojiInputRef = {\n    startProgress: (durationInSeconds: number) => void;\n    stopProgress: () => void;\n};\n\nconst EmojiInput = forwardRef<EmojiInputRef, EmojiInputProps>(\n    (\n        {\n            accessToken,\n            height,\n            inputId,\n            isDisabled,\n            maxHeight = '190px',\n            onBlur,\n            onFocus,\n            onInput,\n            onKeyDown,\n            onPopupVisibilityChange,\n            personId,\n            placeholder,\n            popupAlignment,\n            rightElement,\n            shouldHidePlaceholderOnFocus = true,\n            shouldPreventEmojiPicker,\n            value,\n        },\n        ref,\n    ) => {\n        const [isMobile] = useState(getIsMobile());\n        const [plainTextValue, setPlainTextValue] = useState(value);\n        const [hasFocus, setHasFocus] = useState(false);\n        const [progressDuration, setProgressDuration] = useState(0);\n\n        const editorRef = useRef<HTMLDivElement>(null);\n\n        const shouldDeleteOneMoreBackwards = useRef(false);\n        const shouldDeleteOneMoreForwards = useRef(false);\n\n        const valueRef = useRef(value);\n\n        /**\n         * This function updates the content of the 'contentEditable' element if the new text is\n         * different from the previous content. So this is only true if, for example, a text like \":-)\"\n         * has been replaced to the corresponding emoji.\n         *\n         * When updating the HTML, the current cursor position is saved before replacing the content, so\n         * that it can be set again afterward.\n         */\n        const handleUpdateHTML = useCallback((html: string) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            let newInnerHTML = convertEmojisToUnicode(html);\n\n            newInnerHTML = convertTextToHTML(newInnerHTML);\n\n            if (newInnerHTML !== editorRef.current.innerHTML) {\n                saveSelection(editorRef.current, { shouldIgnoreEmptyTextNodes: true });\n\n                editorRef.current.innerHTML = newInnerHTML;\n\n                restoreSelection(editorRef.current);\n            }\n        }, []);\n\n        /**\n         * This function handles the 'input' events of the 'contentEditable' element and also passes the\n         * respective event up accordingly if the 'onInput' property is a function.\n         */\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (shouldDeleteOneMoreBackwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('delete', false);\n\n                    return;\n                }\n\n                if (shouldDeleteOneMoreForwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('forwardDelete', false);\n\n                    return;\n                }\n\n                handleUpdateHTML(editorRef.current.innerHTML);\n\n                const text = convertHTMLToText(editorRef.current.innerHTML);\n\n                setPlainTextValue(text);\n\n                if (typeof onInput === 'function') {\n                    onInput(event, text);\n                }\n            },\n            [handleUpdateHTML, onInput],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n\n                if (\n                    event.key === 'Enter' &&\n                    !event.shiftKey &&\n                    !event.isPropagationStopped() &&\n                    editorRef.current\n                ) {\n                    event.preventDefault();\n\n                    document.execCommand('insertLineBreak', false);\n                }\n\n                if (event.key === 'Backspace' || event.key === 'Delete') {\n                    const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n                    if (charCodeThatWillBeDeleted === 8203) {\n                        if (event.key === 'Backspace') {\n                            shouldDeleteOneMoreBackwards.current = true;\n                        } else {\n                            shouldDeleteOneMoreForwards.current = true;\n                        }\n                    }\n                }\n            },\n            [isDisabled, onKeyDown],\n        );\n\n        /**\n         * This function prevents formatting from being adopted when texts are inserted. To do this, the\n         * plain text is read from the event after the default behavior has been prevented. The plain\n         * text is then inserted at the correct position in the input field using the\n         * 'insertTextAtCursorPosition' function.\n         */\n        const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n            if (editorRef.current) {\n                event.preventDefault();\n\n                let text = event.clipboardData.getData('text/plain');\n\n                text = convertEmojisToUnicode(text);\n\n                console.debug('handlePaste', text);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n         * correct position in the editor element.\n         *\n         * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n         * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n         * the event is also passed through to the top when inserting via the popup.\n         */\n        const handlePopupSelect = useCallback((emoji: string) => {\n            if (editorRef.current) {\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n                const event = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(event);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (value !== plainTextValue) {\n                setPlainTextValue(value);\n\n                handleUpdateHTML(value);\n            }\n        }, [handleUpdateHTML, plainTextValue, value]);\n\n        // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n        // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n        // the HTML content correctly when the component is rendered for the first time.\n        useLayoutEffect(() => {\n            handleUpdateHTML(valueRef.current);\n        }, [handleUpdateHTML]);\n\n        const handleStartProgress = useCallback((duration: number) => {\n            setProgressDuration(duration);\n        }, []);\n\n        const handleStopProgress = useCallback(() => {\n            setProgressDuration(0);\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                startProgress: handleStartProgress,\n                stopProgress: handleStopProgress,\n            }),\n            [handleStartProgress, handleStopProgress],\n        );\n\n        useEffect(() => {\n            /**\n             * This function ensures that the input field does not lose focus when the popup is opened\n             * or an emoji is selected in it. For this purpose the corresponding elements get the class\n             * 'prevent-lose-focus'.\n             *\n             * The class can also be set to any other elements that should also not cause the input\n             * field to lose focus.\n             */\n            const handlePreventLoseFocus = (event: MouseEvent) => {\n                const element = event.target as Element;\n\n                if (\n                    element.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            };\n\n            document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n            return () => {\n                document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n            };\n        }, []);\n\n        const shouldShowPlaceholder = useMemo(() => {\n            if (shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n                return false;\n            }\n\n            if (!shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n                return true;\n            }\n\n            if (!shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue) {\n                return true;\n            }\n\n            return shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue;\n        }, [hasFocus, plainTextValue, shouldHidePlaceholderOnFocus]);\n\n        const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onFocus === 'function') {\n                onFocus(event);\n            }\n\n            setHasFocus(true);\n        };\n\n        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n\n            setHasFocus(false);\n        };\n\n        return (\n            <StyledEmojiInput isDisabled={isDisabled}>\n                <AnimatePresence initial>\n                    {progressDuration > 0 && (\n                        <StyledMotionEmojiInputProgress\n                            animate={{ width: '100%' }}\n                            exit={{ opacity: 0 }}\n                            initial={{ opacity: 1, width: '0%' }}\n                            transition={{\n                                width: {\n                                    ease: 'linear',\n                                    duration: progressDuration,\n                                },\n                                opacity: {\n                                    type: 'tween',\n                                    duration: 0.3,\n                                },\n                            }}\n                        />\n                    )}\n                </AnimatePresence>\n\n                <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                    <StyledMotionEmojiInputEditor\n                        animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                        contentEditable={!isDisabled}\n                        id={inputId}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        onInput={handleInput}\n                        onKeyDown={handleKeyDown}\n                        onPaste={handlePaste}\n                        ref={editorRef}\n                        transition={{ type: 'tween', duration: 0.2 }}\n                    />\n                    {shouldShowPlaceholder && (\n                        <StyledEmojiInputLabel>{placeholder}</StyledEmojiInputLabel>\n                    )}\n                    {!isMobile && !shouldPreventEmojiPicker && (\n                        <EmojiPickerPopup\n                            accessToken={accessToken}\n                            alignment={popupAlignment}\n                            onSelect={handlePopupSelect}\n                            onPopupVisibilityChange={onPopupVisibilityChange}\n                            personId={personId}\n                        />\n                    )}\n                </StyledEmojiInputContent>\n                {rightElement && (\n                    <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n                )}\n            </StyledEmojiInput>\n        );\n    },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","EmojiInput","forwardRef","_ref","ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","editorRef","useRef","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleBeforeInput","event","data","type","nativeEvent","length","includes","preventDefault","stopPropagation","text","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","document","execCommand","convertHTMLToText","handleKeyDown","key","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","handlePopupSelect","emoji","useEffect","useLayoutEffect","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","useMemo","handleFocus","handleBlur","createElement","StyledEmojiInput","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onBeforeInput","onPaste","StyledEmojiInputLabel","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type FormEvent,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\n    getCharCodeThatWillBeDeleted,\n    restoreSelection,\n    saveSelection,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputLabel,\n    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\n    StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * HTML id of the input element\n     */\n    inputId?: string;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets the maximum height of the input field.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that is executed when the input field loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the input field gets the focus.\n     */\n    onFocus?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the text of the input changes. In addition to the original\n     * event, the original text is returned as second parameter, in which the internally used HTML\n     * elements have been converted back to BB codes.\n     */\n    onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n    /**\n     * Function that is executed when a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the visibility of the popup changes.\n     * @param {boolean} isVisible - Whether the popup is visible or not\n     */\n    onPopupVisibilityChange?: (isVisible: boolean) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the placeholder should be shown after the input has focus.\n     */\n    shouldHidePlaceholderOnFocus?: boolean;\n    /**\n     * Prevents the EmojiPickerPopup icon from being displayed\n     */\n    shouldPreventEmojiPicker?: boolean;\n    /**\n     * The plain text value of the input field. Instead of HTML elements BB codes must be used at\n     * this point. These are then converted by the input field into corresponding HTML elements.\n     */\n    value: string;\n};\n\nexport type EmojiInputRef = {\n    startProgress: (durationInSeconds: number) => void;\n    stopProgress: () => void;\n};\n\nconst EmojiInput = forwardRef<EmojiInputRef, EmojiInputProps>(\n    (\n        {\n            accessToken,\n            height,\n            inputId,\n            isDisabled,\n            maxHeight = '190px',\n            onBlur,\n            onFocus,\n            onInput,\n            onKeyDown,\n            onPopupVisibilityChange,\n            personId,\n            placeholder,\n            popupAlignment,\n            rightElement,\n            shouldHidePlaceholderOnFocus = true,\n            shouldPreventEmojiPicker,\n            value,\n        },\n        ref,\n    ) => {\n        const [isMobile] = useState(getIsMobile());\n        const [plainTextValue, setPlainTextValue] = useState(value);\n        const [hasFocus, setHasFocus] = useState(false);\n        const [progressDuration, setProgressDuration] = useState(0);\n\n        const editorRef = useRef<HTMLDivElement>(null);\n\n        const shouldDeleteOneMoreBackwards = useRef(false);\n        const shouldDeleteOneMoreForwards = useRef(false);\n\n        const valueRef = useRef(value);\n\n        /**\n         * This function updates the content of the 'contentEditable' element if the new text is\n         * different from the previous content. So this is only true if, for example, a text like \":-)\"\n         * has been replaced to the corresponding emoji.\n         *\n         * When updating the HTML, the current cursor position is saved before replacing the content, so\n         * that it can be set again afterward.\n         */\n        const handleUpdateHTML = useCallback((html: string) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            let newInnerHTML = convertEmojisToUnicode(html);\n\n            newInnerHTML = convertTextToHTML(newInnerHTML);\n\n            if (newInnerHTML !== editorRef.current.innerHTML) {\n                saveSelection(editorRef.current, { shouldIgnoreEmptyTextNodes: true });\n\n                editorRef.current.innerHTML = newInnerHTML;\n\n                restoreSelection(editorRef.current);\n            }\n        }, []);\n\n        const handleBeforeInput = useCallback((event: FormEvent<HTMLDivElement>) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            const { data, type } = event.nativeEvent as InputEvent;\n\n            if (type === 'textInput' && data && data.length > 1 && data.includes('\\n')) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const text = convertEmojisToUnicode(data);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function handles the 'input' events of the 'contentEditable' element and also passes the\n         * respective event up accordingly if the 'onInput' property is a function.\n         */\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (shouldDeleteOneMoreBackwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('delete', false);\n\n                    return;\n                }\n\n                if (shouldDeleteOneMoreForwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('forwardDelete', false);\n\n                    return;\n                }\n\n                handleUpdateHTML(editorRef.current.innerHTML);\n\n                const text = convertHTMLToText(editorRef.current.innerHTML);\n\n                setPlainTextValue(text);\n\n                if (typeof onInput === 'function') {\n                    onInput(event, text);\n                }\n            },\n            [handleUpdateHTML, onInput],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n\n                if (\n                    event.key === 'Enter' &&\n                    !event.shiftKey &&\n                    !event.isPropagationStopped() &&\n                    editorRef.current\n                ) {\n                    event.preventDefault();\n\n                    document.execCommand('insertLineBreak', false);\n                }\n\n                if (event.key === 'Backspace' || event.key === 'Delete') {\n                    const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n                    if (charCodeThatWillBeDeleted === 8203) {\n                        if (event.key === 'Backspace') {\n                            shouldDeleteOneMoreBackwards.current = true;\n                        } else {\n                            shouldDeleteOneMoreForwards.current = true;\n                        }\n                    }\n                }\n            },\n            [isDisabled, onKeyDown],\n        );\n\n        /**\n         * This function prevents formatting from being adopted when texts are inserted. To do this, the\n         * plain text is read from the event after the default behavior has been prevented. The plain\n         * text is then inserted at the correct position in the input field using the\n         * 'insertTextAtCursorPosition' function.\n         */\n        const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n            if (editorRef.current) {\n                event.preventDefault();\n\n                let text = event.clipboardData.getData('text/plain');\n\n                text = convertEmojisToUnicode(text);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n         * correct position in the editor element.\n         *\n         * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n         * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n         * the event is also passed through to the top when inserting via the popup.\n         */\n        const handlePopupSelect = useCallback((emoji: string) => {\n            if (editorRef.current) {\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n                const event = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(event);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (value !== plainTextValue) {\n                setPlainTextValue(value);\n\n                handleUpdateHTML(value);\n            }\n        }, [handleUpdateHTML, plainTextValue, value]);\n\n        // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n        // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n        // the HTML content correctly when the component is rendered for the first time.\n        useLayoutEffect(() => {\n            handleUpdateHTML(valueRef.current);\n        }, [handleUpdateHTML]);\n\n        const handleStartProgress = useCallback((duration: number) => {\n            setProgressDuration(duration);\n        }, []);\n\n        const handleStopProgress = useCallback(() => {\n            setProgressDuration(0);\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                startProgress: handleStartProgress,\n                stopProgress: handleStopProgress,\n            }),\n            [handleStartProgress, handleStopProgress],\n        );\n\n        useEffect(() => {\n            /**\n             * This function ensures that the input field does not lose focus when the popup is opened\n             * or an emoji is selected in it. For this purpose the corresponding elements get the class\n             * 'prevent-lose-focus'.\n             *\n             * The class can also be set to any other elements that should also not cause the input\n             * field to lose focus.\n             */\n            const handlePreventLoseFocus = (event: MouseEvent) => {\n                const element = event.target as Element;\n\n                if (\n                    element.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            };\n\n            document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n            return () => {\n                document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n            };\n        }, []);\n\n        const shouldShowPlaceholder = useMemo(() => {\n            if (shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n                return false;\n            }\n\n            if (!shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n                return true;\n            }\n\n            if (!shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue) {\n                return true;\n            }\n\n            return shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue;\n        }, [hasFocus, plainTextValue, shouldHidePlaceholderOnFocus]);\n\n        const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onFocus === 'function') {\n                onFocus(event);\n            }\n\n            setHasFocus(true);\n        };\n\n        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n\n            setHasFocus(false);\n        };\n\n        return (\n            <StyledEmojiInput isDisabled={isDisabled}>\n                <AnimatePresence initial>\n                    {progressDuration > 0 && (\n                        <StyledMotionEmojiInputProgress\n                            animate={{ width: '100%' }}\n                            exit={{ opacity: 0 }}\n                            initial={{ opacity: 1, width: '0%' }}\n                            transition={{\n                                width: {\n                                    ease: 'linear',\n                                    duration: progressDuration,\n                                },\n                                opacity: {\n                                    type: 'tween',\n                                    duration: 0.3,\n                                },\n                            }}\n                        />\n                    )}\n                </AnimatePresence>\n\n                <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                    <StyledMotionEmojiInputEditor\n                        animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                        contentEditable={!isDisabled}\n                        id={inputId}\n                        onBeforeInput={handleBeforeInput}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        onInput={handleInput}\n                        onKeyDown={handleKeyDown}\n                        onPaste={handlePaste}\n                        ref={editorRef}\n                        transition={{ type: 'tween', duration: 0.2 }}\n                    />\n                    {shouldShowPlaceholder && (\n                        <StyledEmojiInputLabel>{placeholder}</StyledEmojiInputLabel>\n                    )}\n                    {!isMobile && !shouldPreventEmojiPicker && (\n                        <EmojiPickerPopup\n                            accessToken={accessToken}\n                            alignment={popupAlignment}\n                            onSelect={handlePopupSelect}\n                            onPopupVisibilityChange={onPopupVisibilityChange}\n                            personId={personId}\n                        />\n                    )}\n                </StyledEmojiInputContent>\n                {rightElement && (\n                    <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n                )}\n            </StyledEmojiInput>\n        );\n    },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAqBA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AAKA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,iBAAA,GAAAC,sBAAA,CAAAT,OAAA;AACA,IAAAU,WAAA,GAAAV,OAAA;AAO6B,SAAAS,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAb,wBAAAa,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAoF7B,MAAMY,UAAU,gBAAG,IAAAC,iBAAU,EACzB,CAAAC,IAAA,EAoBIC,GAAG,KACF;EAAA,IApBD;IACIC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVC,SAAS,GAAG,OAAO;IACnBC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,SAAS;IACTC,uBAAuB;IACvBC,QAAQ;IACRC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,4BAA4B,GAAG,IAAI;IACnCC,wBAAwB;IACxBC;EACJ,CAAC,GAAAlB,IAAA;EAGD,MAAM,CAACmB,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAAC,wBAAW,EAAC,CAAC,CAAC;EAC1C,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAH,eAAQ,EAACF,KAAK,CAAC;EAC3D,MAAM,CAACM,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAL,eAAQ,EAAC,KAAK,CAAC;EAC/C,MAAM,CAACM,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAP,eAAQ,EAAC,CAAC,CAAC;EAE3D,MAAMQ,SAAS,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAE9C,MAAMC,4BAA4B,GAAG,IAAAD,aAAM,EAAC,KAAK,CAAC;EAClD,MAAME,2BAA2B,GAAG,IAAAF,aAAM,EAAC,KAAK,CAAC;EAEjD,MAAMG,QAAQ,GAAG,IAAAH,aAAM,EAACX,KAAK,CAAC;;EAE9B;AACR;AACA;AACA;AACA;AACA;AACA;AACA;EACQ,MAAMe,gBAAgB,GAAG,IAAAC,kBAAW,EAAEC,IAAY,IAAK;IACnD,IAAI,CAACP,SAAS,CAACQ,OAAO,EAAE;MACpB;IACJ;IAEA,IAAIC,YAAY,GAAG,IAAAC,6BAAsB,EAACH,IAAI,CAAC;IAE/CE,YAAY,GAAG,IAAAE,uBAAiB,EAACF,YAAY,CAAC;IAE9C,IAAIA,YAAY,KAAKT,SAAS,CAACQ,OAAO,CAACI,SAAS,EAAE;MAC9C,IAAAC,wBAAa,EAACb,SAAS,CAACQ,OAAO,EAAE;QAAEM,0BAA0B,EAAE;MAAK,CAAC,CAAC;MAEtEd,SAAS,CAACQ,OAAO,CAACI,SAAS,GAAGH,YAAY;MAE1C,IAAAM,2BAAgB,EAACf,SAAS,CAACQ,OAAO,CAAC;IACvC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMQ,iBAAiB,GAAG,IAAAV,kBAAW,EAAEW,KAAgC,IAAK;IACxE,IAAI,CAACjB,SAAS,CAACQ,OAAO,EAAE;MACpB;IACJ;IAEA,MAAM;MAAEU,IAAI;MAAEC;IAAK,CAAC,GAAGF,KAAK,CAACG,WAAyB;IAEtD,IAAID,IAAI,KAAK,WAAW,IAAID,IAAI,IAAIA,IAAI,CAACG,MAAM,GAAG,CAAC,IAAIH,IAAI,CAACI,QAAQ,CAAC,IAAI,CAAC,EAAE;MACxEL,KAAK,CAACM,cAAc,CAAC,CAAC;MACtBN,KAAK,CAACO,eAAe,CAAC,CAAC;MAEvB,MAAMC,IAAI,GAAG,IAAAf,6BAAsB,EAACQ,IAAI,CAAC;MAEzC,IAAAQ,kCAA0B,EAAC;QAAEC,aAAa,EAAE3B,SAAS,CAACQ,OAAO;QAAEiB;MAAK,CAAC,CAAC;MAEtE,MAAMG,QAAQ,GAAG,IAAIC,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEtD9B,SAAS,CAACQ,OAAO,CAACuB,aAAa,CAACH,QAAQ,CAAC;IAC7C;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACR;AACA;AACA;EACQ,MAAMI,WAAW,GAAG,IAAA1B,kBAAW,EAC1BW,KAAkC,IAAK;IACpC,IAAI,CAACjB,SAAS,CAACQ,OAAO,EAAE;MACpB;IACJ;IAEA,IAAIN,4BAA4B,CAACM,OAAO,EAAE;MACtCN,4BAA4B,CAACM,OAAO,GAAG,KAAK;MAC5CL,2BAA2B,CAACK,OAAO,GAAG,KAAK;MAE3CS,KAAK,CAACM,cAAc,CAAC,CAAC;MACtBN,KAAK,CAACO,eAAe,CAAC,CAAC;MAEvBS,QAAQ,CAACC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC;MAErC;IACJ;IAEA,IAAI/B,2BAA2B,CAACK,OAAO,EAAE;MACrCN,4BAA4B,CAACM,OAAO,GAAG,KAAK;MAC5CL,2BAA2B,CAACK,OAAO,GAAG,KAAK;MAE3CS,KAAK,CAACM,cAAc,CAAC,CAAC;MACtBN,KAAK,CAACO,eAAe,CAAC,CAAC;MAEvBS,QAAQ,CAACC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC;MAE5C;IACJ;IAEA7B,gBAAgB,CAACL,SAAS,CAACQ,OAAO,CAACI,SAAS,CAAC;IAE7C,MAAMa,IAAI,GAAG,IAAAU,uBAAiB,EAACnC,SAAS,CAACQ,OAAO,CAACI,SAAS,CAAC;IAE3DjB,iBAAiB,CAAC8B,IAAI,CAAC;IAEvB,IAAI,OAAO5C,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACoC,KAAK,EAAEQ,IAAI,CAAC;IACxB;EACJ,CAAC,EACD,CAACpB,gBAAgB,EAAExB,OAAO,CAC9B,CAAC;EAED,MAAMuD,aAAa,GAAG,IAAA9B,kBAAW,EAC5BW,KAAoC,IAAK;IACtC,IAAIxC,UAAU,EAAE;MACZwC,KAAK,CAACM,cAAc,CAAC,CAAC;MACtBN,KAAK,CAACO,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAO1C,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACmC,KAAK,CAAC;IACpB;IAEA,IACIA,KAAK,CAACoB,GAAG,KAAK,OAAO,IACrB,CAACpB,KAAK,CAACqB,QAAQ,IACf,CAACrB,KAAK,CAACsB,oBAAoB,CAAC,CAAC,IAC7BvC,SAAS,CAACQ,OAAO,EACnB;MACES,KAAK,CAACM,cAAc,CAAC,CAAC;MAEtBU,QAAQ,CAACC,WAAW,CAAC,iBAAiB,EAAE,KAAK,CAAC;IAClD;IAEA,IAAIjB,KAAK,CAACoB,GAAG,KAAK,WAAW,IAAIpB,KAAK,CAACoB,GAAG,KAAK,QAAQ,EAAE;MACrD,MAAMG,yBAAyB,GAAG,IAAAC,uCAA4B,EAACxB,KAAK,CAAC;MAErE,IAAIuB,yBAAyB,KAAK,IAAI,EAAE;QACpC,IAAIvB,KAAK,CAACoB,GAAG,KAAK,WAAW,EAAE;UAC3BnC,4BAA4B,CAACM,OAAO,GAAG,IAAI;QAC/C,CAAC,MAAM;UACHL,2BAA2B,CAACK,OAAO,GAAG,IAAI;QAC9C;MACJ;IACJ;EACJ,CAAC,EACD,CAAC/B,UAAU,EAAEK,SAAS,CAC1B,CAAC;;EAED;AACR;AACA;AACA;AACA;AACA;EACQ,MAAM4D,WAAW,GAAG,IAAApC,kBAAW,EAAEW,KAAqC,IAAK;IACvE,IAAIjB,SAAS,CAACQ,OAAO,EAAE;MACnBS,KAAK,CAACM,cAAc,CAAC,CAAC;MAEtB,IAAIE,IAAI,GAAGR,KAAK,CAAC0B,aAAa,CAACC,OAAO,CAAC,YAAY,CAAC;MAEpDnB,IAAI,GAAG,IAAAf,6BAAsB,EAACe,IAAI,CAAC;MAEnC,IAAAC,kCAA0B,EAAC;QAAEC,aAAa,EAAE3B,SAAS,CAACQ,OAAO;QAAEiB;MAAK,CAAC,CAAC;MAEtE,MAAMG,QAAQ,GAAG,IAAIC,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEtD9B,SAAS,CAACQ,OAAO,CAACuB,aAAa,CAACH,QAAQ,CAAC;IAC7C;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACR;AACA;AACA;AACA;AACA;AACA;AACA;EACQ,MAAMiB,iBAAiB,GAAG,IAAAvC,kBAAW,EAAEwC,KAAa,IAAK;IACrD,IAAI9C,SAAS,CAACQ,OAAO,EAAE;MACnB,IAAAkB,kCAA0B,EAAC;QAAEC,aAAa,EAAE3B,SAAS,CAACQ,OAAO;QAAEiB,IAAI,EAAEqB;MAAM,CAAC,CAAC;MAE7E,MAAM7B,KAAK,GAAG,IAAIY,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEnD9B,SAAS,CAACQ,OAAO,CAACuB,aAAa,CAACd,KAAK,CAAC;IAC1C;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA8B,gBAAS,EAAC,MAAM;IACZ,IAAIzD,KAAK,KAAKI,cAAc,EAAE;MAC1BC,iBAAiB,CAACL,KAAK,CAAC;MAExBe,gBAAgB,CAACf,KAAK,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACe,gBAAgB,EAAEX,cAAc,EAAEJ,KAAK,CAAC,CAAC;;EAE7C;EACA;EACA;EACA,IAAA0D,sBAAe,EAAC,MAAM;IAClB3C,gBAAgB,CAACD,QAAQ,CAACI,OAAO,CAAC;EACtC,CAAC,EAAE,CAACH,gBAAgB,CAAC,CAAC;EAEtB,MAAM4C,mBAAmB,GAAG,IAAA3C,kBAAW,EAAE4C,QAAgB,IAAK;IAC1DnD,mBAAmB,CAACmD,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAG,IAAA7C,kBAAW,EAAC,MAAM;IACzCP,mBAAmB,CAAC,CAAC,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAqD,0BAAmB,EACf/E,GAAG,EACH,OAAO;IACHgF,aAAa,EAAEJ,mBAAmB;IAClCK,YAAY,EAAEH;EAClB,CAAC,CAAC,EACF,CAACF,mBAAmB,EAAEE,kBAAkB,CAC5C,CAAC;EAED,IAAAJ,gBAAS,EAAC,MAAM;IACZ;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;IACY,MAAMQ,sBAAsB,GAAItC,KAAiB,IAAK;MAClD,MAAMuC,OAAO,GAAGvC,KAAK,CAACwC,MAAiB;MAEvC,IACID,OAAO,CAACE,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,IAChDH,OAAO,CAACI,aAAa,EAAEF,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,IAC/DH,OAAO,CAACI,aAAa,EAAEA,aAAa,EAAEF,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,EAChF;QACE1C,KAAK,CAACM,cAAc,CAAC,CAAC;QACtBN,KAAK,CAACO,eAAe,CAAC,CAAC;MAC3B;IACJ,CAAC;IAEDS,QAAQ,CAAC4B,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEP,sBAAsB,CAAC;IAEnE,OAAO,MAAM;MACTtB,QAAQ,CAAC4B,IAAI,CAACE,mBAAmB,CAAC,WAAW,EAAER,sBAAsB,CAAC;IAC1E,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,qBAAqB,GAAG,IAAAC,cAAO,EAAC,MAAM;IACxC,IAAI7E,4BAA4B,IAAIQ,QAAQ,IAAI,CAACF,cAAc,EAAE;MAC7D,OAAO,KAAK;IAChB;IAEA,IAAI,CAACN,4BAA4B,IAAIQ,QAAQ,IAAI,CAACF,cAAc,EAAE;MAC9D,OAAO,IAAI;IACf;IAEA,IAAI,CAACN,4BAA4B,IAAI,CAACQ,QAAQ,IAAI,CAACF,cAAc,EAAE;MAC/D,OAAO,IAAI;IACf;IAEA,OAAON,4BAA4B,IAAI,CAACQ,QAAQ,IAAI,CAACF,cAAc;EACvE,CAAC,EAAE,CAACE,QAAQ,EAAEF,cAAc,EAAEN,4BAA4B,CAAC,CAAC;EAE5D,MAAM8E,WAAW,GAAIjD,KAAiC,IAAK;IACvD,IAAI,OAAOrC,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACqC,KAAK,CAAC;IAClB;IAEApB,WAAW,CAAC,IAAI,CAAC;EACrB,CAAC;EAED,MAAMsE,UAAU,GAAIlD,KAAiC,IAAK;IACtD,IAAI,OAAOtC,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAACsC,KAAK,CAAC;IACjB;IAEApB,WAAW,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,oBACI3D,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACzH,WAAA,CAAA0H,gBAAgB;IAAC5F,UAAU,EAAEA;EAAW,gBACrCvC,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACpI,aAAA,CAAAsI,eAAe;IAACC,OAAO;EAAA,GACnBzE,gBAAgB,GAAG,CAAC,iBACjB5D,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACzH,WAAA,CAAA6H,8BAA8B;IAC3BC,OAAO,EAAE;MAAEC,KAAK,EAAE;IAAO,CAAE;IAC3BC,IAAI,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACrBL,OAAO,EAAE;MAAEK,OAAO,EAAE,CAAC;MAAEF,KAAK,EAAE;IAAK,CAAE;IACrCG,UAAU,EAAE;MACRH,KAAK,EAAE;QACHI,IAAI,EAAE,QAAQ;QACd5B,QAAQ,EAAEpD;MACd,CAAC;MACD8E,OAAO,EAAE;QACLzD,IAAI,EAAE,OAAO;QACb+B,QAAQ,EAAE;MACd;IACJ;EAAE,CACL,CAEQ,CAAC,eAElBhH,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACzH,WAAA,CAAAoI,uBAAuB;IAACC,mBAAmB,EAAE,CAAC,CAAC7F;EAAa,gBACzDjD,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACzH,WAAA,CAAAsI,4BAA4B;IACzBR,OAAO,EAAE;MAAE/F,SAAS,EAAEH,MAAM,IAAIG,SAAS;MAAEwG,SAAS,EAAE3G,MAAM,IAAI;IAAO,CAAE;IACzE4G,eAAe,EAAE,CAAC1G,UAAW;IAC7B2G,EAAE,EAAE5G,OAAQ;IACZ6G,aAAa,EAAErE,iBAAkB;IACjCrC,MAAM,EAAEwF,UAAW;IACnBvF,OAAO,EAAEsF,WAAY;IACrBrF,OAAO,EAAEmD,WAAY;IACrBlD,SAAS,EAAEsD,aAAc;IACzBkD,OAAO,EAAE5C,WAAY;IACrBrE,GAAG,EAAE2B,SAAU;IACf6E,UAAU,EAAE;MAAE1D,IAAI,EAAE,OAAO;MAAE+B,QAAQ,EAAE;IAAI;EAAE,CAChD,CAAC,EACDc,qBAAqB,iBAClB9H,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACzH,WAAA,CAAA4I,qBAAqB,QAAEtG,WAAmC,CAC9D,EACA,CAACM,QAAQ,IAAI,CAACF,wBAAwB,iBACnCnD,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAAC3H,iBAAA,CAAAK,OAAgB;IACbwB,WAAW,EAAEA,WAAY;IACzBkH,SAAS,EAAEtG,cAAe;IAC1BuG,QAAQ,EAAE5C,iBAAkB;IAC5B9D,uBAAuB,EAAEA,uBAAwB;IACjDC,QAAQ,EAAEA;EAAS,CACtB,CAEgB,CAAC,EACzBG,YAAY,iBACTjD,MAAA,CAAAY,OAAA,CAAAsH,aAAA,CAACzH,WAAA,CAAA+I,4BAA4B,QAAEvG,YAA2C,CAEhE,CAAC;AAE3B,CACJ,CAAC;AAEDjB,UAAU,CAACyH,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/I,OAAA,GAEvBoB,UAAU"}

package/lib/utils/insert.js

@@ -30,12 +30,6 @@ const insertTextAtCursorPosition = _ref => {
     const parts = text.split(/\r\n|\r|\n/);
     const firstPart = parts.shift();
     const textNodes = parts.map(part => document.createTextNode(part));
-    console.debug('insertTextAtCursorPosition', {
-      firstPart,
-      textNodes,
-      range,
-      selection
-    });
     range.deleteContents();
     if (firstPart) {
       if (selection.anchorNode.nodeType === Node.TEXT_NODE) {

package/lib/utils/insert.js.map

@@ -1 +1 @@
-{"version":3,"file":"insert.js","names":["_selection","require","insertTextAtCursorPosition","_ref","editorElement","text","selection","window","getSelection","saveSelection","anchorNode","contains","range","getRangeAt","parts","split","firstPart","shift","textNodes","map","part","document","createTextNode","console","debug","deleteContents","nodeType","Node","TEXT_NODE","nodeValue","slice","startOffset","moveSelectionOffset","length","textNode","appendChild","textNodeIndex","Array","from","childNodes","indexOf","setChildIndex","restoreSelection","brElement","createElement","insertNode","setEndAfter","setStartAfter","forEach","index","collapse","removeAllRanges","addRange","innerText","exports"],"sources":["../../src/utils/insert.ts"],"sourcesContent":["import { moveSelectionOffset, restoreSelection, saveSelection, setChildIndex } from './selection';\n\ninterface InsertTextAtCursorPositionOptions {\n    editorElement: HTMLDivElement;\n    text: string;\n}\n\n/**\n * This function inserts the passed text at the correct position in the editor element. If the\n * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n * will be appended to the back of the input field content.\n *\n * In addition, this function also sets the cursor to the correct position when the input field\n * has the focus. For this purpose, the current position of the cursor or a selection is read to\n * calculate the cursor position after inserting the text.\n *\n * @param {Object} options - Object with element and text to insert\n * @param {HTMLDivElement} options.editorElement - Element to insert text into\n * @param {string} options.text - Text to insert into element\n */\nexport const insertTextAtCursorPosition = ({\n    editorElement,\n    text,\n}: InsertTextAtCursorPositionOptions) => {\n    const selection = window.getSelection();\n\n    saveSelection(editorElement);\n\n    if (selection?.anchorNode && editorElement.contains(selection.anchorNode)) {\n        let range = selection.getRangeAt(0);\n\n        const parts = text.split(/\\r\\n|\\r|\\n/);\n\n        const firstPart = parts.shift();\n\n        const textNodes = parts.map((part) => document.createTextNode(part));\n\n        console.debug('insertTextAtCursorPosition', {\n            firstPart,\n            textNodes,\n            range,\n            selection,\n        });\n\n        range.deleteContents();\n\n        if (firstPart) {\n            if (selection.anchorNode.nodeType === Node.TEXT_NODE) {\n                const { nodeValue } = selection.anchorNode;\n\n                if (typeof nodeValue === 'string') {\n                    selection.anchorNode.nodeValue =\n                        nodeValue.slice(0, range.startOffset) +\n                        firstPart +\n                        nodeValue.slice(range.startOffset);\n\n                    moveSelectionOffset(firstPart.length);\n                }\n            } else if (selection.anchorNode === editorElement) {\n                const textNode = document.createTextNode(firstPart);\n\n                editorElement.appendChild(textNode);\n\n                const textNodeIndex = Array.from(editorElement.childNodes).indexOf(textNode);\n\n                moveSelectionOffset(firstPart.length);\n                setChildIndex(textNodeIndex);\n            }\n        }\n\n        restoreSelection(editorElement);\n\n        if (textNodes.length > 0) {\n            range = selection.getRangeAt(0);\n\n            let brElement = document.createElement('br');\n\n            range.insertNode(brElement);\n            range.setEndAfter(brElement);\n            range.setStartAfter(brElement);\n\n            textNodes.forEach((textNode, index) => {\n                range.insertNode(textNode);\n                range.setEndAfter(textNode);\n                range.setStartAfter(textNode);\n\n                if (index !== textNodes.length - 1) {\n                    brElement = document.createElement('br');\n\n                    range.insertNode(brElement);\n                    range.setEndAfter(brElement);\n                    range.setStartAfter(brElement);\n                }\n            });\n\n            range.collapse(false);\n\n            selection.removeAllRanges();\n            selection.addRange(range);\n        }\n    } else {\n        // eslint-disable-next-line no-param-reassign\n        editorElement.innerText += text;\n    }\n};\n"],"mappings":"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"}
+{"version":3,"file":"insert.js","names":["_selection","require","insertTextAtCursorPosition","_ref","editorElement","text","selection","window","getSelection","saveSelection","anchorNode","contains","range","getRangeAt","parts","split","firstPart","shift","textNodes","map","part","document","createTextNode","deleteContents","nodeType","Node","TEXT_NODE","nodeValue","slice","startOffset","moveSelectionOffset","length","textNode","appendChild","textNodeIndex","Array","from","childNodes","indexOf","setChildIndex","restoreSelection","brElement","createElement","insertNode","setEndAfter","setStartAfter","forEach","index","collapse","removeAllRanges","addRange","innerText","exports"],"sources":["../../src/utils/insert.ts"],"sourcesContent":["import { moveSelectionOffset, restoreSelection, saveSelection, setChildIndex } from './selection';\n\ninterface InsertTextAtCursorPositionOptions {\n    editorElement: HTMLDivElement;\n    text: string;\n}\n\n/**\n * This function inserts the passed text at the correct position in the editor element. If the\n * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n * will be appended to the back of the input field content.\n *\n * In addition, this function also sets the cursor to the correct position when the input field\n * has the focus. For this purpose, the current position of the cursor or a selection is read to\n * calculate the cursor position after inserting the text.\n *\n * @param {Object} options - Object with element and text to insert\n * @param {HTMLDivElement} options.editorElement - Element to insert text into\n * @param {string} options.text - Text to insert into element\n */\nexport const insertTextAtCursorPosition = ({\n    editorElement,\n    text,\n}: InsertTextAtCursorPositionOptions) => {\n    const selection = window.getSelection();\n\n    saveSelection(editorElement);\n\n    if (selection?.anchorNode && editorElement.contains(selection.anchorNode)) {\n        let range = selection.getRangeAt(0);\n\n        const parts = text.split(/\\r\\n|\\r|\\n/);\n\n        const firstPart = parts.shift();\n\n        const textNodes = parts.map((part) => document.createTextNode(part));\n\n        range.deleteContents();\n\n        if (firstPart) {\n            if (selection.anchorNode.nodeType === Node.TEXT_NODE) {\n                const { nodeValue } = selection.anchorNode;\n\n                if (typeof nodeValue === 'string') {\n                    selection.anchorNode.nodeValue =\n                        nodeValue.slice(0, range.startOffset) +\n                        firstPart +\n                        nodeValue.slice(range.startOffset);\n\n                    moveSelectionOffset(firstPart.length);\n                }\n            } else if (selection.anchorNode === editorElement) {\n                const textNode = document.createTextNode(firstPart);\n\n                editorElement.appendChild(textNode);\n\n                const textNodeIndex = Array.from(editorElement.childNodes).indexOf(textNode);\n\n                moveSelectionOffset(firstPart.length);\n                setChildIndex(textNodeIndex);\n            }\n        }\n\n        restoreSelection(editorElement);\n\n        if (textNodes.length > 0) {\n            range = selection.getRangeAt(0);\n\n            let brElement = document.createElement('br');\n\n            range.insertNode(brElement);\n            range.setEndAfter(brElement);\n            range.setStartAfter(brElement);\n\n            textNodes.forEach((textNode, index) => {\n                range.insertNode(textNode);\n                range.setEndAfter(textNode);\n                range.setStartAfter(textNode);\n\n                if (index !== textNodes.length - 1) {\n                    brElement = document.createElement('br');\n\n                    range.insertNode(brElement);\n                    range.setEndAfter(brElement);\n                    range.setStartAfter(brElement);\n                }\n            });\n\n            range.collapse(false);\n\n            selection.removeAllRanges();\n            selection.addRange(range);\n        }\n    } else {\n        // eslint-disable-next-line no-param-reassign\n        editorElement.innerText += text;\n    }\n};\n"],"mappings":"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"}

package/lib/utils/text.js

@@ -22,7 +22,6 @@ const convertTextToHTML = text => {
 exports.convertTextToHTML = convertTextToHTML;
 const convertHTMLToText = text => {
   let result = text;
-  console.debug('convertHTMLToText 1', text);
   result = result.replace(_regex.HTML_LC_MENTION_REGEX, '[lc_mention id="$1"]$2[/lc_mention]');
   // eslint-disable-next-line no-irregular-whitespace
   result = result.replace(/​/g, '');
@@ -35,7 +34,6 @@ const convertHTMLToText = text => {
   document.body.appendChild(element);
   result = element.innerText;
   document.body.removeChild(element);
-  console.debug('convertHTMLToText 2', result);
   return result;
 };
 exports.convertHTMLToText = convertHTMLToText;

package/lib/utils/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":["_regex","require","_emoji","convertTextToHTML","text","element","document","createElement","style","position","opacity","contentEditable","innerText","body","appendChild","result","innerHTML","removeChild","unescapeHTML","replace","BB_LC_MENTION_REGEX","exports","convertHTMLToText","console","debug","HTML_LC_MENTION_REGEX","escapeHTML","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import { BB_LC_MENTION_REGEX, HTML_LC_MENTION_REGEX } from '../constants/regex';\nimport { escapeHTML, unescapeHTML } from './emoji';\n\nexport const convertTextToHTML = (text: string) => {\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\n    element.contentEditable = 'true';\n    element.innerText = text;\n\n    document.body.appendChild(element);\n\n    let result = element.innerHTML;\n\n    document.body.removeChild(element);\n\n    result = unescapeHTML(result);\n\n    result = result.replace(\n        BB_LC_MENTION_REGEX,\n        '<lc_mention contenteditable=\"false\" id=\"$1\"><span>@</span>$2</lc_mention>',\n    );\n\n    return result;\n};\n\nexport const convertHTMLToText = (text: string) => {\n    let result = text;\n\n    console.debug('convertHTMLToText 1', text);\n\n    result = result.replace(HTML_LC_MENTION_REGEX, '[lc_mention id=\"$1\"]$2[/lc_mention]');\n    // eslint-disable-next-line no-irregular-whitespace\n    result = result.replace(/​/g, '');\n\n    result = escapeHTML(result);\n\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\n    element.contentEditable = 'true';\n    element.innerHTML = result;\n\n    document.body.appendChild(element);\n\n    result = element.innerText;\n\n    document.body.removeChild(element);\n\n    console.debug('convertHTMLToText 2', result);\n\n    return result;\n};\n\nexport const getElementTextLength = (element: Element) => {\n    let textLength = 0;\n\n    try {\n        textLength = convertHTMLToText(element.outerHTML).length;\n    } catch (e) {\n        // Do nothing\n    }\n\n    return textLength;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAIC,IAAY,IAAK;EAC/C,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,UAAU;EACnCJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAE3BL,OAAO,CAACM,eAAe,GAAG,MAAM;EAChCN,OAAO,CAACO,SAAS,GAAGR,IAAI;EAExBE,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,OAAO,CAAC;EAElC,IAAIU,MAAM,GAAGV,OAAO,CAACW,SAAS;EAE9BV,QAAQ,CAACO,IAAI,CAACI,WAAW,CAACZ,OAAO,CAAC;EAElCU,MAAM,GAAG,IAAAG,mBAAY,EAACH,MAAM,CAAC;EAE7BA,MAAM,GAAGA,MAAM,CAACI,OAAO,CACnBC,0BAAmB,EACnB,2EACJ,CAAC;EAED,OAAOL,MAAM;AACjB,CAAC;AAACM,OAAA,CAAAlB,iBAAA,GAAAA,iBAAA;AAEK,MAAMmB,iBAAiB,GAAIlB,IAAY,IAAK;EAC/C,IAAIW,MAAM,GAAGX,IAAI;EAEjBmB,OAAO,CAACC,KAAK,CAAC,qBAAqB,EAAEpB,IAAI,CAAC;EAE1CW,MAAM,GAAGA,MAAM,CAACI,OAAO,CAACM,4BAAqB,EAAE,qCAAqC,CAAC;EACrF;EACAV,MAAM,GAAGA,MAAM,CAACI,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;EAEjCJ,MAAM,GAAG,IAAAW,iBAAU,EAACX,MAAM,CAAC;EAE3B,MAAMV,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,UAAU;EACnCJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAE3BL,OAAO,CAACM,eAAe,GAAG,MAAM;EAChCN,OAAO,CAACW,SAAS,GAAGD,MAAM;EAE1BT,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,OAAO,CAAC;EAElCU,MAAM,GAAGV,OAAO,CAACO,SAAS;EAE1BN,QAAQ,CAACO,IAAI,CAACI,WAAW,CAACZ,OAAO,CAAC;EAElCkB,OAAO,CAACC,KAAK,CAAC,qBAAqB,EAAET,MAAM,CAAC;EAE5C,OAAOA,MAAM;AACjB,CAAC;AAACM,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAEK,MAAMK,oBAAoB,GAAItB,OAAgB,IAAK;EACtD,IAAIuB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGN,iBAAiB,CAACjB,OAAO,CAACwB,SAAS,CAAC,CAACC,MAAM;EAC5D,CAAC,CAAC,OAAOC,CAAC,EAAE;IACR;EAAA;EAGJ,OAAOH,UAAU;AACrB,CAAC;AAACP,OAAA,CAAAM,oBAAA,GAAAA,oBAAA"}
+{"version":3,"file":"text.js","names":["_regex","require","_emoji","convertTextToHTML","text","element","document","createElement","style","position","opacity","contentEditable","innerText","body","appendChild","result","innerHTML","removeChild","unescapeHTML","replace","BB_LC_MENTION_REGEX","exports","convertHTMLToText","HTML_LC_MENTION_REGEX","escapeHTML","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import { BB_LC_MENTION_REGEX, HTML_LC_MENTION_REGEX } from '../constants/regex';\nimport { escapeHTML, unescapeHTML } from './emoji';\n\nexport const convertTextToHTML = (text: string) => {\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\n    element.contentEditable = 'true';\n    element.innerText = text;\n\n    document.body.appendChild(element);\n\n    let result = element.innerHTML;\n\n    document.body.removeChild(element);\n\n    result = unescapeHTML(result);\n\n    result = result.replace(\n        BB_LC_MENTION_REGEX,\n        '<lc_mention contenteditable=\"false\" id=\"$1\"><span>@</span>$2</lc_mention>',\n    );\n\n    return result;\n};\n\nexport const convertHTMLToText = (text: string) => {\n    let result = text;\n\n    result = result.replace(HTML_LC_MENTION_REGEX, '[lc_mention id=\"$1\"]$2[/lc_mention]');\n    // eslint-disable-next-line no-irregular-whitespace\n    result = result.replace(/​/g, '');\n\n    result = escapeHTML(result);\n\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\n    element.contentEditable = 'true';\n    element.innerHTML = result;\n\n    document.body.appendChild(element);\n\n    result = element.innerText;\n\n    document.body.removeChild(element);\n\n    return result;\n};\n\nexport const getElementTextLength = (element: Element) => {\n    let textLength = 0;\n\n    try {\n        textLength = convertHTMLToText(element.outerHTML).length;\n    } catch (e) {\n        // Do nothing\n    }\n\n    return textLength;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAIC,IAAY,IAAK;EAC/C,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,UAAU;EACnCJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAE3BL,OAAO,CAACM,eAAe,GAAG,MAAM;EAChCN,OAAO,CAACO,SAAS,GAAGR,IAAI;EAExBE,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,OAAO,CAAC;EAElC,IAAIU,MAAM,GAAGV,OAAO,CAACW,SAAS;EAE9BV,QAAQ,CAACO,IAAI,CAACI,WAAW,CAACZ,OAAO,CAAC;EAElCU,MAAM,GAAG,IAAAG,mBAAY,EAACH,MAAM,CAAC;EAE7BA,MAAM,GAAGA,MAAM,CAACI,OAAO,CACnBC,0BAAmB,EACnB,2EACJ,CAAC;EAED,OAAOL,MAAM;AACjB,CAAC;AAACM,OAAA,CAAAlB,iBAAA,GAAAA,iBAAA;AAEK,MAAMmB,iBAAiB,GAAIlB,IAAY,IAAK;EAC/C,IAAIW,MAAM,GAAGX,IAAI;EAEjBW,MAAM,GAAGA,MAAM,CAACI,OAAO,CAACI,4BAAqB,EAAE,qCAAqC,CAAC;EACrF;EACAR,MAAM,GAAGA,MAAM,CAACI,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;EAEjCJ,MAAM,GAAG,IAAAS,iBAAU,EAACT,MAAM,CAAC;EAE3B,MAAMV,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,UAAU;EACnCJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAE3BL,OAAO,CAACM,eAAe,GAAG,MAAM;EAChCN,OAAO,CAACW,SAAS,GAAGD,MAAM;EAE1BT,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,OAAO,CAAC;EAElCU,MAAM,GAAGV,OAAO,CAACO,SAAS;EAE1BN,QAAQ,CAACO,IAAI,CAACI,WAAW,CAACZ,OAAO,CAAC;EAElC,OAAOU,MAAM;AACjB,CAAC;AAACM,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAEK,MAAMG,oBAAoB,GAAIpB,OAAgB,IAAK;EACtD,IAAIqB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGJ,iBAAiB,CAACjB,OAAO,CAACsB,SAAS,CAAC,CAACC,MAAM;EAC5D,CAAC,CAAC,OAAOC,CAAC,EAAE;IACR;EAAA;EAGJ,OAAOH,UAAU;AACrB,CAAC;AAACL,OAAA,CAAAI,oBAAA,GAAAA,oBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.349",
+    "version": "5.0.0-beta.350",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b67a7f40385f8c2db79dd3ef0ca0f216530d1e54"
+    "gitHead": "f1d84a46ff569ff0de237f51b6c751fdfa6b80e0"
 }