@chayns-components/emoji-input 5.0.0-beta.91 → 5.0.0-beta.93

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

@@ -75,11 +75,16 @@ const EmojiInput = _ref => {
   const handlePaste = (0, _react.useCallback)(event => {
     if (editorRef.current) {
       event.preventDefault();
-      const text = event.clipboardData.getData('text/plain');
+      let text = event.clipboardData.getData('text/plain');
+      text = (0, _emoji.convertAsciiToUnicode)(text);
       (0, _insert.insertTextAtCursorPosition)({
         editorElement: editorRef.current,
         text
       });
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
     }
   }, []);
 

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_font","_insert","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","rootFontFamily","getRootFontFamily","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertAsciiToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePaste","preventDefault","clipboardData","getData","insertTextAtCursorPosition","editorElement","handlePopupSelect","emoji","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","contains","parentElement","stopPropagation","useEffect","document","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    ClipboardEvent,\n    FC,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { getRootFontFamily } from '../../utils/font';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputEditor,\n    StyledEmojiInputRightWrapper,\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     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onInput?: ChangeEventHandler<HTMLDivElement>;\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     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    accessToken,\n    isDisabled,\n    onInput,\n    onKeyDown,\n    onPopupVisibilityChange,\n    personId,\n    placeholder,\n    popupAlignment,\n    rightElement,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n    const [rootFontFamily] = useState(getRootFontFamily());\n\n    const editorRef = useRef<HTMLDivElement>(null);\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 handleUpdateText = useCallback((text: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const newInnerText = convertAsciiToUnicode(text);\n\n        if (newInnerText !== editorRef.current.innerText) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerText = newInnerText;\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            handleUpdateText(editorRef.current.innerText);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\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            const text = event.clipboardData.getData('text/plain');\n\n            insertTextAtCursorPosition({ editorElement: editorRef.current, text });\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    /**\n     * This function ensures that the input field does not lose focus when the popup is opened or an\n     * 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 field to\n     * lose focus.\n     */\n    const handlePreventLoseFocus = useCallback((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        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        handleUpdateText(value);\n    }, [handleUpdateText, value]);\n\n    useEffect(() => {\n        document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n        return () => {\n            document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n        };\n    }, [handlePreventLoseFocus]);\n\n    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    isMobile={isMobile}\n                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                    rootFontFamily={rootFontFamily}\n                />\n                {!isMobile && (\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","_font","_insert","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","rootFontFamily","getRootFontFamily","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertAsciiToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePaste","preventDefault","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","handlePreventLoseFocus","_element$parentElemen","element","target","classList","contains","parentElement","stopPropagation","useEffect","document","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    ClipboardEvent,\n    FC,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { getRootFontFamily } from '../../utils/font';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputEditor,\n    StyledEmojiInputRightWrapper,\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     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onInput?: ChangeEventHandler<HTMLDivElement>;\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     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    accessToken,\n    isDisabled,\n    onInput,\n    onKeyDown,\n    onPopupVisibilityChange,\n    personId,\n    placeholder,\n    popupAlignment,\n    rightElement,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n    const [rootFontFamily] = useState(getRootFontFamily());\n\n    const editorRef = useRef<HTMLDivElement>(null);\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 handleUpdateText = useCallback((text: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const newInnerText = convertAsciiToUnicode(text);\n\n        if (newInnerText !== editorRef.current.innerText) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerText = newInnerText;\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            handleUpdateText(editorRef.current.innerText);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\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 = convertAsciiToUnicode(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    /**\n     * This function ensures that the input field does not lose focus when the popup is opened or an\n     * 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 field to\n     * lose focus.\n     */\n    const handlePreventLoseFocus = useCallback((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        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        handleUpdateText(value);\n    }, [handleUpdateText, value]);\n\n    useEffect(() => {\n        document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n        return () => {\n            document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n        };\n    }, [handlePreventLoseFocus]);\n\n    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    isMobile={isMobile}\n                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                    rootFontFamily={rootFontFamily}\n                />\n                {!isMobile && (\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/utils/insert.js

@@ -24,30 +24,23 @@ const insertTextAtCursorPosition = _ref => {
   } = _ref;
   const selection = window.getSelection();
   if (selection !== null && selection !== void 0 && selection.anchorNode && editorElement.contains(selection.anchorNode)) {
-    const {
-      endOffset,
-      startOffset
-    } = selection.getRangeAt(0);
-    const rangeDistance = endOffset - startOffset;
-    let offset = endOffset + text.length - rangeDistance;
-    let {
-      anchorNode
-    } = selection;
-    if (anchorNode.nodeValue) {
-      anchorNode.nodeValue = anchorNode.nodeValue.substring(0, startOffset) + text + anchorNode.nodeValue.substring(endOffset);
-    } else if (anchorNode === editorElement) {
-      const newTextNode = document.createTextNode(text);
-      editorElement.appendChild(newTextNode);
-      anchorNode = newTextNode;
-    }
-    const newRange = document.createRange();
-    if (anchorNode.nodeValue) {
-      offset = Math.min(offset, anchorNode.nodeValue.length);
-    }
-    newRange.setStart(anchorNode, offset);
-    newRange.setEnd(anchorNode, offset);
+    const range = selection.getRangeAt(0);
+    const textNodes = text.split(/\r\n|\r|\n/).map(part => document.createTextNode(part));
+    range.deleteContents();
+    textNodes.forEach((textNode, index) => {
+      range.insertNode(textNode);
+      range.setEndAfter(textNode);
+      range.setStartAfter(textNode);
+      if (index !== textNodes.length - 1) {
+        const brElement = document.createElement('br');
+        range.insertNode(brElement);
+        range.setEndAfter(brElement);
+        range.setStartAfter(brElement);
+      }
+    });
+    range.collapse(false);
     selection.removeAllRanges();
-    selection.addRange(newRange);
+    selection.addRange(range);
   } else {
     // eslint-disable-next-line no-param-reassign
     editorElement.innerText += text;

package/lib/utils/insert.js.map

@@ -1 +1 @@
-{"version":3,"file":"insert.js","names":["insertTextAtCursorPosition","_ref","editorElement","text","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newTextNode","document","createTextNode","appendChild","newRange","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","innerText","exports"],"sources":["../../src/utils/insert.ts"],"sourcesContent":["interface 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    if (selection?.anchorNode && editorElement.contains(selection.anchorNode)) {\n        const { endOffset, startOffset } = selection.getRangeAt(0);\n\n        const rangeDistance = endOffset - startOffset;\n\n        let offset = endOffset + text.length - rangeDistance;\n\n        let { anchorNode } = selection;\n\n        if (anchorNode.nodeValue) {\n            anchorNode.nodeValue =\n                anchorNode.nodeValue.substring(0, startOffset) +\n                text +\n                anchorNode.nodeValue.substring(endOffset);\n        } else if (anchorNode === editorElement) {\n            const newTextNode = document.createTextNode(text);\n\n            editorElement.appendChild(newTextNode);\n\n            anchorNode = newTextNode;\n        }\n\n        const newRange = document.createRange();\n\n        if (anchorNode.nodeValue) {\n            offset = Math.min(offset, anchorNode.nodeValue.length);\n        }\n\n        newRange.setStart(anchorNode, offset);\n        newRange.setEnd(anchorNode, offset);\n\n        selection.removeAllRanges();\n        selection.addRange(newRange);\n    } else {\n        // eslint-disable-next-line no-param-reassign\n        editorElement.innerText += text;\n    }\n};\n"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,0BAA0B,GAAGC,IAAA,IAGD;EAAA,IAHE;IACvCC,aAAa;IACbC;EAC+B,CAAC,GAAAF,IAAA;EAChC,MAAMG,SAAS,GAAGC,MAAM,CAACC,YAAY,EAAE;EAEvC,IAAIF,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEG,UAAU,IAAIL,aAAa,CAACM,QAAQ,CAACJ,SAAS,CAACG,UAAU,CAAC,EAAE;IACvE,MAAM;MAAEE,SAAS;MAAEC;IAAY,CAAC,GAAGN,SAAS,CAACO,UAAU,CAAC,CAAC,CAAC;IAE1D,MAAMC,aAAa,GAAGH,SAAS,GAAGC,WAAW;IAE7C,IAAIG,MAAM,GAAGJ,SAAS,GAAGN,IAAI,CAACW,MAAM,GAAGF,aAAa;IAEpD,IAAI;MAAEL;IAAW,CAAC,GAAGH,SAAS;IAE9B,IAAIG,UAAU,CAACQ,SAAS,EAAE;MACtBR,UAAU,CAACQ,SAAS,GAChBR,UAAU,CAACQ,SAAS,CAACC,SAAS,CAAC,CAAC,EAAEN,WAAW,CAAC,GAC9CP,IAAI,GACJI,UAAU,CAACQ,SAAS,CAACC,SAAS,CAACP,SAAS,CAAC;IACjD,CAAC,MAAM,IAAIF,UAAU,KAAKL,aAAa,EAAE;MACrC,MAAMe,WAAW,GAAGC,QAAQ,CAACC,cAAc,CAAChB,IAAI,CAAC;MAEjDD,aAAa,CAACkB,WAAW,CAACH,WAAW,CAAC;MAEtCV,UAAU,GAAGU,WAAW;IAC5B;IAEA,MAAMI,QAAQ,GAAGH,QAAQ,CAACI,WAAW,EAAE;IAEvC,IAAIf,UAAU,CAACQ,SAAS,EAAE;MACtBF,MAAM,GAAGU,IAAI,CAACC,GAAG,CAACX,MAAM,EAAEN,UAAU,CAACQ,SAAS,CAACD,MAAM,CAAC;IAC1D;IAEAO,QAAQ,CAACI,QAAQ,CAAClB,UAAU,EAAEM,MAAM,CAAC;IACrCQ,QAAQ,CAACK,MAAM,CAACnB,UAAU,EAAEM,MAAM,CAAC;IAEnCT,SAAS,CAACuB,eAAe,EAAE;IAC3BvB,SAAS,CAACwB,QAAQ,CAACP,QAAQ,CAAC;EAChC,CAAC,MAAM;IACH;IACAnB,aAAa,CAAC2B,SAAS,IAAI1B,IAAI;EACnC;AACJ,CAAC;AAAC2B,OAAA,CAAA9B,0BAAA,GAAAA,0BAAA"}
+{"version":3,"file":"insert.js","names":["insertTextAtCursorPosition","_ref","editorElement","text","selection","window","getSelection","anchorNode","contains","range","getRangeAt","textNodes","split","map","part","document","createTextNode","deleteContents","forEach","textNode","index","insertNode","setEndAfter","setStartAfter","length","brElement","createElement","collapse","removeAllRanges","addRange","innerText","exports"],"sources":["../../src/utils/insert.ts"],"sourcesContent":["interface 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    if (selection?.anchorNode && editorElement.contains(selection.anchorNode)) {\n        const range = selection.getRangeAt(0);\n\n        const textNodes = text.split(/\\r\\n|\\r|\\n/).map((part) => document.createTextNode(part));\n\n        range.deleteContents();\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                const 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    } else {\n        // eslint-disable-next-line no-param-reassign\n        editorElement.innerText += text;\n    }\n};\n"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,0BAA0B,GAAGC,IAAA,IAGD;EAAA,IAHE;IACvCC,aAAa;IACbC;EAC+B,CAAC,GAAAF,IAAA;EAChC,MAAMG,SAAS,GAAGC,MAAM,CAACC,YAAY,EAAE;EAEvC,IAAIF,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEG,UAAU,IAAIL,aAAa,CAACM,QAAQ,CAACJ,SAAS,CAACG,UAAU,CAAC,EAAE;IACvE,MAAME,KAAK,GAAGL,SAAS,CAACM,UAAU,CAAC,CAAC,CAAC;IAErC,MAAMC,SAAS,GAAGR,IAAI,CAACS,KAAK,CAAC,YAAY,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAKC,QAAQ,CAACC,cAAc,CAACF,IAAI,CAAC,CAAC;IAEvFL,KAAK,CAACQ,cAAc,EAAE;IAEtBN,SAAS,CAACO,OAAO,CAAC,CAACC,QAAQ,EAAEC,KAAK,KAAK;MACnCX,KAAK,CAACY,UAAU,CAACF,QAAQ,CAAC;MAC1BV,KAAK,CAACa,WAAW,CAACH,QAAQ,CAAC;MAC3BV,KAAK,CAACc,aAAa,CAACJ,QAAQ,CAAC;MAE7B,IAAIC,KAAK,KAAKT,SAAS,CAACa,MAAM,GAAG,CAAC,EAAE;QAChC,MAAMC,SAAS,GAAGV,QAAQ,CAACW,aAAa,CAAC,IAAI,CAAC;QAE9CjB,KAAK,CAACY,UAAU,CAACI,SAAS,CAAC;QAC3BhB,KAAK,CAACa,WAAW,CAACG,SAAS,CAAC;QAC5BhB,KAAK,CAACc,aAAa,CAACE,SAAS,CAAC;MAClC;IACJ,CAAC,CAAC;IAEFhB,KAAK,CAACkB,QAAQ,CAAC,KAAK,CAAC;IAErBvB,SAAS,CAACwB,eAAe,EAAE;IAC3BxB,SAAS,CAACyB,QAAQ,CAACpB,KAAK,CAAC;EAC7B,CAAC,MAAM;IACH;IACAP,aAAa,CAAC4B,SAAS,IAAI3B,IAAI;EACnC;AACJ,CAAC;AAAC4B,OAAA,CAAA/B,0BAAA,GAAAA,0BAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.91",
+    "version": "5.0.0-beta.93",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1a8425eda31892864b98de72de0aff346c218e40"
+    "gitHead": "eb8fcdb97be3a19e2d9b5047385be9ea8c2edf35"
 }