@chayns-components/emoji-input 5.0.0-beta.310 → 5.0.0-beta.314

package/lib/components/emoji-input/EmojiInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, CSSProperties, FC, FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react';
+import { ChangeEvent, CSSProperties, FC, FocusEventHandler, KeyboardEventHandler, ReactElement, ReactNode } from 'react';
 import type { PopupAlignment } from '../../constants/alignment';
 export type EmojiInputProps = {
     /**
@@ -51,7 +51,7 @@ export type EmojiInputProps = {
     /**
      * Placeholder for the input field
      */
-    placeholder?: string;
+    placeholder?: string | ReactElement;
     /**
      * Sets the alignment of the popup to a fixed value. If this value is not set, the component
      * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this

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

@@ -207,13 +207,12 @@ const EmojiInput = _ref => {
     onInput: handleInput,
     onKeyDown: handleKeyDown,
     onPaste: handlePaste,
-    placeholder: placeholder,
     ref: editorRef,
     transition: {
       type: 'tween',
       duration: 0.2
     }
-  }), !isMobile && !shouldPreventEmojiPicker && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
+  }), !plainTextValue && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputLabel, null, placeholder), !isMobile && !shouldPreventEmojiPicker && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
     accessToken: accessToken,
     alignment: popupAlignment,
     onSelect: handlePopupSelect,

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_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","_ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","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","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","useLayoutEffect","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","animate","minHeight","contentEditable","id","onPaste","ref","transition","type","duration","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\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    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\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;\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     * 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\nconst EmojiInput: FC<EmojiInputProps> = ({\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    shouldPreventEmojiPicker,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n    const [plainTextValue, setPlainTextValue] = useState(value);\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 (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        [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    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    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                <StyledMotionEmojiInputEditor\n                    animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                    contentEditable={!isDisabled}\n                    id={inputId}\n                    onBlur={onBlur}\n                    onFocus={onFocus}\n                    onInput={handleInput}\n                    onKeyDown={handleKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                    transition={{ type: 'tween', duration: 0.2 }}\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\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_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","_ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","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","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","useLayoutEffect","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","animate","minHeight","contentEditable","id","onPaste","ref","transition","type","duration","StyledEmojiInputLabel","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\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} 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     * 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\nconst EmojiInput: FC<EmojiInputProps> = ({\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    shouldPreventEmojiPicker,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n    const [plainTextValue, setPlainTextValue] = useState(value);\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 (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        [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    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    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                <StyledMotionEmojiInputEditor\n                    animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                    contentEditable={!isDisabled}\n                    id={inputId}\n                    onBlur={onBlur}\n                    onFocus={onFocus}\n                    onInput={handleInput}\n                    onKeyDown={handleKeyDown}\n                    onPaste={handlePaste}\n                    ref={editorRef}\n                    transition={{ type: 'tween', duration: 0.2 }}\n                />\n                {!plainTextValue && <StyledEmojiInputLabel>{placeholder}</StyledEmojiInputLabel>}\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\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}

package/lib/components/emoji-input/EmojiInput.styles.d.ts

@@ -8,7 +8,6 @@ type StyledEmojiInputContentProps = {
     isRightElementGiven: boolean;
 };
 export declare const StyledEmojiInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledEmojiInputContentProps>>;
-type StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>>;
 export declare const StyledMotionEmojiInputEditor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
     slot?: string | undefined;
     title?: string | undefined;
@@ -272,7 +271,9 @@ export declare const StyledMotionEmojiInputEditor: import("styled-components").I
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledEmojiInputEditorProps>> & import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>;
 export declare const StyledEmojiInputRightWrapper: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
@@ -545,4 +546,7 @@ export declare const StyledEmojiInputRightWrapper: import("styled-components").I
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
+export declare const StyledEmojiInputLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;
 export {};

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionEmojiInputEditor = exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
+exports.StyledMotionEmojiInputEditor = exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputLabel = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _font = require("../../utils/font");
@@ -73,22 +73,6 @@ const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0,
     -webkit-user-modify: read-write;
     -webkit-user-select: text;
 
-    &:empty:not(:focus):before {
-        content: '${_ref6 => {
-  let {
-    placeholder
-  } = _ref6;
-  return placeholder;
-}}';
-        color: ${_ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme['006'];
-}};
-        pointer-events: none;
-    }
-
     lc_mention {
         font-weight: bold;
 
@@ -113,10 +97,10 @@ const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0,
 
     &::-webkit-scrollbar-thumb {
         background-color: rgba(
-            ${_ref8 => {
+            ${_ref6 => {
   let {
     theme
-  } = _ref8;
+  } = _ref6;
   return theme['text-rgb'];
 }},
             0.15
@@ -128,10 +112,10 @@ const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0,
     // only supported in Firefox:
     * {
         scrollbar-color: rgba(
-                ${_ref9 => {
+                ${_ref7 => {
   let {
     theme
-  } = _ref9;
+  } = _ref7;
   return theme['text-rgb'];
 }},
                 0.15
@@ -147,4 +131,22 @@ const StyledEmojiInputRightWrapper = exports.StyledEmojiInputRightWrapper = _sty
     flex: 0 0 auto;
     overflow: hidden;
 `;
+const StyledEmojiInputLabel = exports.StyledEmojiInputLabel = _styledComponents.default.label`
+    color: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme['006'];
+}};
+    left: 10px;
+    top: 12px;
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+`;
 //# sourceMappingURL=EmojiInput.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledEmojiInput","exports","styled","div","_ref","theme","_ref2","isDisabled","_ref3","StyledEmojiInputContent","_ref4","isRightElementGiven","css","StyledMotionEmojiInputEditor","motion","_ref5","text","getFontFamily","_ref6","placeholder","_ref7","_ref8","_ref9","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n    border-radius: 3px;\n    display: flex;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'initial')};\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\ntype StyledEmojiInputContentProps = {\n    isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n    align-items: end;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    padding: 8px 10px;\n\n    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n            padding-right: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>>;\n\nexport const StyledMotionEmojiInputEditor = styled(motion.div)<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    font-family: ${getFontFamily};\n    overflow-y: scroll;\n    word-break: break-word;\n\n    // This fixes a bug where the field is not editable in certain browsers.\n    // This is for example the case on iOS 15 or older.\n    -webkit-user-modify: read-write;\n    -webkit-user-select: text;\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n        pointer-events: none;\n    }\n\n    lc_mention {\n        font-weight: bold;\n\n        span {\n            opacity: 0.5;\n        }\n    }\n\n    // Styles for custom scrollbar\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    &::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledEmojiInput","exports","styled","div","_ref","theme","_ref2","isDisabled","_ref3","StyledEmojiInputContent","_ref4","isRightElementGiven","css","StyledMotionEmojiInputEditor","motion","_ref5","text","getFontFamily","_ref6","_ref7","StyledEmojiInputRightWrapper","StyledEmojiInputLabel","label","_ref8"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n    border-radius: 3px;\n    display: flex;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'initial')};\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\ntype StyledEmojiInputContentProps = {\n    isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n    align-items: end;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    padding: 8px 10px;\n\n    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n            padding-right: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<unknown>;\n\nexport const StyledMotionEmojiInputEditor = styled(motion.div)<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    font-family: ${getFontFamily};\n    overflow-y: scroll;\n    word-break: break-word;\n\n    // This fixes a bug where the field is not editable in certain browsers.\n    // This is for example the case on iOS 15 or older.\n    -webkit-user-modify: read-write;\n    -webkit-user-select: text;\n\n    lc_mention {\n        font-weight: bold;\n\n        span {\n            opacity: 0.5;\n        }\n    }\n\n    // Styles for custom scrollbar\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    &::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n\ntype StyledEmojiInputLabelProps = WithTheme<unknown>;\n\nexport const StyledEmojiInputLabel = styled.label<StyledEmojiInputLabelProps>`\n    color: ${({ theme }: StyledEmojiInputLabelProps) => theme['006']};\n    left: 10px;\n    top: 12px;\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n`;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.310",
+    "version": "5.0.0-beta.314",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -53,7 +53,7 @@
         "typescript": "^5.3.2"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.310",
+        "@chayns-components/core": "^5.0.0-beta.314",
         "@chayns/colors": "^2.0.0",
         "clsx": "^2.0.0",
         "emojilib": "^3.0.11",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "15f90d1b8de92f8315b62820045c89951c024065"
+    "gitHead": "2c3d3ee0da3af60217c70c1e5fe86b1fc7cb8ccf"
 }