@chayns-components/emoji-input 5.0.0-beta.153 → 5.0.0-beta.155

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

@@ -47,7 +47,8 @@ export type EmojiInputProps = {
      */
     rightElement?: ReactNode;
     /**
-     * Value of the input field
+     * The plain text value of the input field. Instead of HTML elements BB codes must be used at
+     * this point. These are then converted by the input field into corresponding HTML elements.
      */
     value: string;
 };

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

@@ -30,6 +30,7 @@ const EmojiInput = _ref => {
     value
   } = _ref;
   const [isMobile] = (0, _react.useState)((0, _environment.getIsMobile)());
+  const [plainTextValue, setPlainTextValue] = (0, _react.useState)(value);
   const editorRef = (0, _react.useRef)(null);
 
   /**
@@ -46,11 +47,6 @@ const EmojiInput = _ref => {
     }
     let newInnerHTML = (0, _emoji.convertEmojisToUnicode)(html);
     newInnerHTML = (0, _text.convertTextToHTML)(newInnerHTML);
-    console.debug('handleUpdateHTML', {
-      html,
-      newInnerHTML,
-      isDifferent: newInnerHTML !== editorRef.current.innerHTML
-    });
     if (newInnerHTML !== editorRef.current.innerHTML) {
       (0, _selection.saveSelection)(editorRef.current, {
         shouldIgnoreEmptyTextNodes: true
@@ -69,14 +65,21 @@ const EmojiInput = _ref => {
       return;
     }
     handleUpdateHTML(editorRef.current.innerHTML);
+    const text = (0, _text.convertHTMLToText)(editorRef.current.innerHTML);
+    setPlainTextValue(text);
     if (typeof onInput === 'function') {
-      console.debug('handleInput', {
-        innerHTML: editorRef.current.innerHTML,
-        text: (0, _text.convertHTMLToText)(editorRef.current.innerHTML)
-      });
-      onInput(event, (0, _text.convertHTMLToText)(editorRef.current.innerHTML));
+      onInput(event, text);
     }
   }, [handleUpdateHTML, onInput]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+    if (event.key === 'Enter' && !event.shiftKey && !event.isPropagationStopped() && editorRef.current) {
+      event.preventDefault();
+      document.execCommand('insertLineBreak', false);
+    }
+  }, [onKeyDown]);
 
   /**
    * This function prevents formatting from being adopted when texts are inserted. To do this, the
@@ -120,35 +123,34 @@ const EmojiInput = _ref => {
       editorRef.current.dispatchEvent(event);
     }
   }, []);
-
-  /**
-   * This function ensures that the input field does not lose focus when the popup is opened or an
-   * emoji is selected in it. For this purpose the corresponding elements get the class
-   * 'prevent-lose-focus'.
-   *
-   * The class can also be set to any other elements that should also not cause the input field to
-   * lose focus.
-   */
-  const handlePreventLoseFocus = (0, _react.useCallback)(event => {
-    var _element$parentElemen, _element$parentElemen2, _element$parentElemen3;
-    const element = event.target;
-    if (element.classList.contains('prevent-lose-focus') || (_element$parentElemen = element.parentElement) !== null && _element$parentElemen !== void 0 && _element$parentElemen.classList.contains('prevent-lose-focus') || (_element$parentElemen2 = element.parentElement) !== null && _element$parentElemen2 !== void 0 && (_element$parentElemen3 = _element$parentElemen2.parentElement) !== null && _element$parentElemen3 !== void 0 && _element$parentElemen3.classList.contains('prevent-lose-focus')) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }, []);
   (0, _react.useEffect)(() => {
-    console.debug('useEffect', {
-      text: value
-    });
-    handleUpdateHTML(value);
-  }, [handleUpdateHTML, value]);
+    if (value !== plainTextValue) {
+      setPlainTextValue(value);
+      handleUpdateHTML(value);
+    }
+  }, [handleUpdateHTML, plainTextValue, value]);
   (0, _react.useEffect)(() => {
+    /**
+     * This function ensures that the input field does not lose focus when the popup is opened
+     * or an emoji is selected in it. For this purpose the corresponding elements get the class
+     * 'prevent-lose-focus'.
+     *
+     * The class can also be set to any other elements that should also not cause the input
+     * field to lose focus.
+     */
+    const handlePreventLoseFocus = event => {
+      var _element$parentElemen, _element$parentElemen2, _element$parentElemen3;
+      const element = event.target;
+      if (element.classList.contains('prevent-lose-focus') || (_element$parentElemen = element.parentElement) !== null && _element$parentElemen !== void 0 && _element$parentElemen.classList.contains('prevent-lose-focus') || (_element$parentElemen2 = element.parentElement) !== null && _element$parentElemen2 !== void 0 && (_element$parentElemen3 = _element$parentElemen2.parentElement) !== null && _element$parentElemen3 !== void 0 && _element$parentElemen3.classList.contains('prevent-lose-focus')) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
     document.body.addEventListener('mousedown', handlePreventLoseFocus);
     return () => {
       document.body.removeEventListener('mousedown', handlePreventLoseFocus);
     };
-  }, [handlePreventLoseFocus]);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInput, {
     isDisabled: isDisabled
   }, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputContent, {
@@ -157,7 +159,7 @@ const EmojiInput = _ref => {
     contentEditable: !isDisabled,
     id: inputId,
     onInput: handleInput,
-    onKeyDown: onKeyDown,
+    onKeyDown: handleKeyDown,
     onPaste: handlePaste,
     placeholder: placeholder,
     ref: editorRef

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","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","inputId","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","editorRef","useRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","console","debug","isDifferent","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","text","convertHTMLToText","handlePaste","preventDefault","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","handlePreventLoseFocus","_element$parentElemen","_element$parentElemen2","_element$parentElemen3","element","target","classList","contains","parentElement","stopPropagation","useEffect","document","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","id","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\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 { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\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     * 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     * 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     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    accessToken,\n    inputId,\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\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 handleUpdateHTML = useCallback((html: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        let newInnerHTML = convertEmojisToUnicode(html);\n\n        newInnerHTML = convertTextToHTML(newInnerHTML);\n\n        console.debug('handleUpdateHTML', {\n            html,\n            newInnerHTML,\n            isDifferent: newInnerHTML !== editorRef.current.innerHTML,\n        });\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            handleUpdateHTML(editorRef.current.innerHTML);\n\n            if (typeof onInput === 'function') {\n                console.debug('handleInput', {\n                    innerHTML: editorRef.current.innerHTML,\n                    text: convertHTMLToText(editorRef.current.innerHTML),\n                });\n\n                onInput(event, convertHTMLToText(editorRef.current.innerHTML));\n            }\n        },\n        [handleUpdateHTML, 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 = 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    /**\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            element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        console.debug('useEffect', { text: value });\n\n        handleUpdateHTML(value);\n    }, [handleUpdateHTML, 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                    id={inputId}\n                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAYA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAK6B,SAAAO,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAd,wBAAAU,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAsD7B,MAAMW,UAA+B,GAAGC,IAAA,IAYlC;EAAA,IAZmC;IACrCC,WAAW;IACXC,OAAO;IACPC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,uBAAuB;IACvBC,QAAQ;IACRC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC;EACJ,CAAC,GAAAX,IAAA;EACG,MAAM,CAACY,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAAC,wBAAW,EAAC,CAAC,CAAC;EAE1C,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;;EAE9C;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAEC,IAAY,IAAK;IACnD,IAAI,CAACJ,SAAS,CAACK,OAAO,EAAE;MACpB;IACJ;IAEA,IAAIC,YAAY,GAAG,IAAAC,6BAAsB,EAACH,IAAI,CAAC;IAE/CE,YAAY,GAAG,IAAAE,uBAAiB,EAACF,YAAY,CAAC;IAE9CG,OAAO,CAACC,KAAK,CAAC,kBAAkB,EAAE;MAC9BN,IAAI;MACJE,YAAY;MACZK,WAAW,EAAEL,YAAY,KAAKN,SAAS,CAACK,OAAO,CAACO;IACpD,CAAC,CAAC;IAEF,IAAIN,YAAY,KAAKN,SAAS,CAACK,OAAO,CAACO,SAAS,EAAE;MAC9C,IAAAC,wBAAa,EAACb,SAAS,CAACK,OAAO,EAAE;QAAES,0BAA0B,EAAE;MAAK,CAAC,CAAC;MAEtEd,SAAS,CAACK,OAAO,CAACO,SAAS,GAAGN,YAAY;MAE1C,IAAAS,2BAAgB,EAACf,SAAS,CAACK,OAAO,CAAC;IACvC;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;EACI,MAAMW,WAAW,GAAG,IAAAb,kBAAW,EAC1Bc,KAAkC,IAAK;IACpC,IAAI,CAACjB,SAAS,CAACK,OAAO,EAAE;MACpB;IACJ;IAEAH,gBAAgB,CAACF,SAAS,CAACK,OAAO,CAACO,SAAS,CAAC;IAE7C,IAAI,OAAOvB,OAAO,KAAK,UAAU,EAAE;MAC/BoB,OAAO,CAACC,KAAK,CAAC,aAAa,EAAE;QACzBE,SAAS,EAAEZ,SAAS,CAACK,OAAO,CAACO,SAAS;QACtCM,IAAI,EAAE,IAAAC,uBAAiB,EAACnB,SAAS,CAACK,OAAO,CAACO,SAAS;MACvD,CAAC,CAAC;MAEFvB,OAAO,CAAC4B,KAAK,EAAE,IAAAE,uBAAiB,EAACnB,SAAS,CAACK,OAAO,CAACO,SAAS,CAAC,CAAC;IAClE;EACJ,CAAC,EACD,CAACV,gBAAgB,EAAEb,OAAO,CAC9B,CAAC;;EAED;AACJ;AACA;AACA;AACA;AACA;EACI,MAAM+B,WAAW,GAAG,IAAAjB,kBAAW,EAAEc,KAAqC,IAAK;IACvE,IAAIjB,SAAS,CAACK,OAAO,EAAE;MACnBY,KAAK,CAACI,cAAc,CAAC,CAAC;MAEtB,IAAIH,IAAI,GAAGD,KAAK,CAACK,aAAa,CAACC,OAAO,CAAC,YAAY,CAAC;MAEpDL,IAAI,GAAG,IAAAX,6BAAsB,EAACW,IAAI,CAAC;MAEnC,IAAAM,kCAA0B,EAAC;QAAEC,aAAa,EAAEzB,SAAS,CAACK,OAAO;QAAEa;MAAK,CAAC,CAAC;MAEtE,MAAMQ,QAAQ,GAAG,IAAIC,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEtD5B,SAAS,CAACK,OAAO,CAACwB,aAAa,CAACH,QAAQ,CAAC;IAC7C;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMI,iBAAiB,GAAG,IAAA3B,kBAAW,EAAE4B,KAAa,IAAK;IACrD,IAAI/B,SAAS,CAACK,OAAO,EAAE;MACnB,IAAAmB,kCAA0B,EAAC;QAAEC,aAAa,EAAEzB,SAAS,CAACK,OAAO;QAAEa,IAAI,EAAEa;MAAM,CAAC,CAAC;MAE7E,MAAMd,KAAK,GAAG,IAAIU,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEnD5B,SAAS,CAACK,OAAO,CAACwB,aAAa,CAACZ,KAAK,CAAC;IAC1C;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMe,sBAAsB,GAAG,IAAA7B,kBAAW,EAAEc,KAAiB,IAAK;IAAA,IAAAgB,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;IAC9D,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,MAAiB;IAEvC,IACID,OAAO,CAACE,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,KAAAN,qBAAA,GAChDG,OAAO,CAACI,aAAa,cAAAP,qBAAA,eAArBA,qBAAA,CAAuBK,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,KAAAL,sBAAA,GAC/DE,OAAO,CAACI,aAAa,cAAAN,sBAAA,gBAAAC,sBAAA,GAArBD,sBAAA,CAAuBM,aAAa,cAAAL,sBAAA,eAApCA,sBAAA,CAAsCG,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,EAChF;MACEtB,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBJ,KAAK,CAACwB,eAAe,CAAC,CAAC;IAC3B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,gBAAS,EAAC,MAAM;IACZjC,OAAO,CAACC,KAAK,CAAC,WAAW,EAAE;MAAEQ,IAAI,EAAEtB;IAAM,CAAC,CAAC;IAE3CM,gBAAgB,CAACN,KAAK,CAAC;EAC3B,CAAC,EAAE,CAACM,gBAAgB,EAAEN,KAAK,CAAC,CAAC;EAE7B,IAAA8C,gBAAS,EAAC,MAAM;IACZC,QAAQ,CAACC,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEb,sBAAsB,CAAC;IAEnE,OAAO,MAAM;MACTW,QAAQ,CAACC,IAAI,CAACE,mBAAmB,CAAC,WAAW,EAAEd,sBAAsB,CAAC;IAC1E,CAAC;EACL,CAAC,EAAE,CAACA,sBAAsB,CAAC,CAAC;EAE5B,oBACIjF,MAAA,CAAAa,OAAA,CAAAmF,aAAA,CAACtF,WAAA,CAAAuF,gBAAgB;IAAC5D,UAAU,EAAEA;EAAW,gBACrCrC,MAAA,CAAAa,OAAA,CAAAmF,aAAA,CAACtF,WAAA,CAAAwF,uBAAuB;IAACC,mBAAmB,EAAE,CAAC,CAACvD;EAAa,gBACzD5C,MAAA,CAAAa,OAAA,CAAAmF,aAAA,CAACtF,WAAA,CAAA0F,sBAAsB;IACnBC,eAAe,EAAE,CAAChE,UAAW;IAC7BiE,EAAE,EAAElE,OAAQ;IACZE,OAAO,EAAE2B,WAAY;IACrB1B,SAAS,EAAEA,SAAU;IACrBgE,OAAO,EAAElC,WAAY;IACrB3B,WAAW,EAAEA,WAAY;IACzB8D,GAAG,EAAEvD;EAAU,CAClB,CAAC,EACD,CAACH,QAAQ,iBACN9C,MAAA,CAAAa,OAAA,CAAAmF,aAAA,CAACxF,iBAAA,CAAAK,OAAgB;IACbsB,WAAW,EAAEA,WAAY;IACzBsE,SAAS,EAAE9D,cAAe;IAC1B+D,QAAQ,EAAE3B,iBAAkB;IAC5BvC,uBAAuB,EAAEA,uBAAwB;IACjDC,QAAQ,EAAEA;EAAS,CACtB,CAEgB,CAAC,EACzBG,YAAY,iBACT5C,MAAA,CAAAa,OAAA,CAAAmF,aAAA,CAACtF,WAAA,CAAAiG,4BAA4B,QAAE/D,YAA2C,CAEhE,CAAC;AAE3B,CAAC;AAEDX,UAAU,CAAC2E,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAEvB5E,UAAU;AAAA6E,OAAA,CAAAjG,OAAA,GAAAgG,QAAA"}
+{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_insert","_selection","_text","_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","inputId","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","editorRef","useRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","text","convertHTMLToText","handleKeyDown","shiftKey","isPropagationStopped","preventDefault","document","execCommand","handlePaste","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","handlePreventLoseFocus","_element$parentElemen","_element$parentElemen2","_element$parentElemen3","element","target","classList","contains","parentElement","stopPropagation","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","id","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ClipboardEvent,\n    FC,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\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 { restoreSelection, saveSelection } from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\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     * 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     * 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     * 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    inputId,\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 [plainTextValue, setPlainTextValue] = useState(value);\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 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            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        [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    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                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    id={inputId}\n                    onInput={handleInput}\n                    onKeyDown={handleKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAaA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAK6B,SAAAO,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAd,wBAAAU,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAuD7B,MAAMW,UAA+B,GAAGC,IAAA,IAYlC;EAAA,IAZmC;IACrCC,WAAW;IACXC,OAAO;IACPC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,uBAAuB;IACvBC,QAAQ;IACRC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC;EACJ,CAAC,GAAAX,IAAA;EACG,MAAM,CAACY,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAAC,wBAAW,EAAC,CAAC,CAAC;EAC1C,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAH,eAAQ,EAACF,KAAK,CAAC;EAE3D,MAAMM,SAAS,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;;EAE9C;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAEC,IAAY,IAAK;IACnD,IAAI,CAACJ,SAAS,CAACK,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,KAAKN,SAAS,CAACK,OAAO,CAACI,SAAS,EAAE;MAC9C,IAAAC,wBAAa,EAACV,SAAS,CAACK,OAAO,EAAE;QAAEM,0BAA0B,EAAE;MAAK,CAAC,CAAC;MAEtEX,SAAS,CAACK,OAAO,CAACI,SAAS,GAAGH,YAAY;MAE1C,IAAAM,2BAAgB,EAACZ,SAAS,CAACK,OAAO,CAAC;IACvC;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;EACI,MAAMQ,WAAW,GAAG,IAAAV,kBAAW,EAC1BW,KAAkC,IAAK;IACpC,IAAI,CAACd,SAAS,CAACK,OAAO,EAAE;MACpB;IACJ;IAEAH,gBAAgB,CAACF,SAAS,CAACK,OAAO,CAACI,SAAS,CAAC;IAE7C,MAAMM,IAAI,GAAG,IAAAC,uBAAiB,EAAChB,SAAS,CAACK,OAAO,CAACI,SAAS,CAAC;IAE3DV,iBAAiB,CAACgB,IAAI,CAAC;IAEvB,IAAI,OAAO5B,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAAC2B,KAAK,EAAEC,IAAI,CAAC;IACxB;EACJ,CAAC,EACD,CAACb,gBAAgB,EAAEf,OAAO,CAC9B,CAAC;EAED,MAAM8B,aAAa,GAAG,IAAAd,kBAAW,EAC5BW,KAAoC,IAAK;IACtC,IAAI,OAAO1B,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAAC0B,KAAK,CAAC;IACpB;IAEA,IACIA,KAAK,CAACtC,GAAG,KAAK,OAAO,IACrB,CAACsC,KAAK,CAACI,QAAQ,IACf,CAACJ,KAAK,CAACK,oBAAoB,CAAC,CAAC,IAC7BnB,SAAS,CAACK,OAAO,EACnB;MACES,KAAK,CAACM,cAAc,CAAC,CAAC;MAEtBC,QAAQ,CAACC,WAAW,CAAC,iBAAiB,EAAE,KAAK,CAAC;IAClD;EACJ,CAAC,EACD,CAAClC,SAAS,CACd,CAAC;;EAED;AACJ;AACA;AACA;AACA;AACA;EACI,MAAMmC,WAAW,GAAG,IAAApB,kBAAW,EAAEW,KAAqC,IAAK;IACvE,IAAId,SAAS,CAACK,OAAO,EAAE;MACnBS,KAAK,CAACM,cAAc,CAAC,CAAC;MAEtB,IAAIL,IAAI,GAAGD,KAAK,CAACU,aAAa,CAACC,OAAO,CAAC,YAAY,CAAC;MAEpDV,IAAI,GAAG,IAAAR,6BAAsB,EAACQ,IAAI,CAAC;MAEnC,IAAAW,kCAA0B,EAAC;QAAEC,aAAa,EAAE3B,SAAS,CAACK,OAAO;QAAEU;MAAK,CAAC,CAAC;MAEtE,MAAMa,QAAQ,GAAG,IAAIC,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEtD9B,SAAS,CAACK,OAAO,CAAC0B,aAAa,CAACH,QAAQ,CAAC;IAC7C;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMI,iBAAiB,GAAG,IAAA7B,kBAAW,EAAE8B,KAAa,IAAK;IACrD,IAAIjC,SAAS,CAACK,OAAO,EAAE;MACnB,IAAAqB,kCAA0B,EAAC;QAAEC,aAAa,EAAE3B,SAAS,CAACK,OAAO;QAAEU,IAAI,EAAEkB;MAAM,CAAC,CAAC;MAE7E,MAAMnB,KAAK,GAAG,IAAIe,KAAK,CAAC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAEnD9B,SAAS,CAACK,OAAO,CAAC0B,aAAa,CAACjB,KAAK,CAAC;IAC1C;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAoB,gBAAS,EAAC,MAAM;IACZ,IAAIxC,KAAK,KAAKI,cAAc,EAAE;MAC1BC,iBAAiB,CAACL,KAAK,CAAC;MAExBQ,gBAAgB,CAACR,KAAK,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACQ,gBAAgB,EAAEJ,cAAc,EAAEJ,KAAK,CAAC,CAAC;EAE7C,IAAAwC,gBAAS,EAAC,MAAM;IACZ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;IACQ,MAAMC,sBAAsB,GAAIrB,KAAiB,IAAK;MAAA,IAAAsB,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;MAClD,MAAMC,OAAO,GAAGzB,KAAK,CAAC0B,MAAiB;MAEvC,IACID,OAAO,CAACE,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,KAAAN,qBAAA,GAChDG,OAAO,CAACI,aAAa,cAAAP,qBAAA,eAArBA,qBAAA,CAAuBK,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,KAAAL,sBAAA,GAC/DE,OAAO,CAACI,aAAa,cAAAN,sBAAA,gBAAAC,sBAAA,GAArBD,sBAAA,CAAuBM,aAAa,cAAAL,sBAAA,eAApCA,sBAAA,CAAsCG,SAAS,CAACC,QAAQ,CAAC,oBAAoB,CAAC,EAChF;QACE5B,KAAK,CAACM,cAAc,CAAC,CAAC;QACtBN,KAAK,CAAC8B,eAAe,CAAC,CAAC;MAC3B;IACJ,CAAC;IAEDvB,QAAQ,CAACwB,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEX,sBAAsB,CAAC;IAEnE,OAAO,MAAM;MACTd,QAAQ,CAACwB,IAAI,CAACE,mBAAmB,CAAC,WAAW,EAAEZ,sBAAsB,CAAC;IAC1E,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACItF,MAAA,CAAAa,OAAA,CAAAsF,aAAA,CAACzF,WAAA,CAAA0F,gBAAgB;IAAC/D,UAAU,EAAEA;EAAW,gBACrCrC,MAAA,CAAAa,OAAA,CAAAsF,aAAA,CAACzF,WAAA,CAAA2F,uBAAuB;IAACC,mBAAmB,EAAE,CAAC,CAAC1D;EAAa,gBACzD5C,MAAA,CAAAa,OAAA,CAAAsF,aAAA,CAACzF,WAAA,CAAA6F,sBAAsB;IACnBC,eAAe,EAAE,CAACnE,UAAW;IAC7BoE,EAAE,EAAErE,OAAQ;IACZE,OAAO,EAAE0B,WAAY;IACrBzB,SAAS,EAAE6B,aAAc;IACzBsC,OAAO,EAAEhC,WAAY;IACrBhC,WAAW,EAAEA,WAAY;IACzBiE,GAAG,EAAExD;EAAU,CAClB,CAAC,EACD,CAACL,QAAQ,iBACN9C,MAAA,CAAAa,OAAA,CAAAsF,aAAA,CAAC3F,iBAAA,CAAAK,OAAgB;IACbsB,WAAW,EAAEA,WAAY;IACzByE,SAAS,EAAEjE,cAAe;IAC1BkE,QAAQ,EAAE1B,iBAAkB;IAC5B3C,uBAAuB,EAAEA,uBAAwB;IACjDC,QAAQ,EAAEA;EAAS,CACtB,CAEgB,CAAC,EACzBG,YAAY,iBACT5C,MAAA,CAAAa,OAAA,CAAAsF,aAAA,CAACzF,WAAA,CAAAoG,4BAA4B,QAAElE,YAA2C,CAEhE,CAAC;AAE3B,CAAC;AAEDX,UAAU,CAAC8E,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAEvB/E,UAAU;AAAAgF,OAAA,CAAApG,OAAA,GAAAmG,QAAA"}

package/lib/utils/insert.js

@@ -33,8 +33,13 @@ const insertTextAtCursorPosition = _ref => {
     range.deleteContents();
     if (firstPart) {
       if (selection.anchorNode.nodeType === Node.TEXT_NODE) {
-        selection.anchorNode.nodeValue += firstPart;
-        (0, _selection.moveSelectionOffset)(firstPart.length);
+        const {
+          nodeValue
+        } = selection.anchorNode;
+        if (typeof nodeValue === 'string') {
+          selection.anchorNode.nodeValue = nodeValue.slice(0, range.startOffset) + firstPart + nodeValue.slice(range.startOffset);
+          (0, _selection.moveSelectionOffset)(firstPart.length);
+        }
       } else if (selection.anchorNode === editorElement) {
         const textNode = document.createTextNode(firstPart);
         editorElement.appendChild(textNode);

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","deleteContents","nodeType","Node","TEXT_NODE","nodeValue","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                selection.anchorNode.nodeValue += firstPart;\n\n                moveSelectionOffset(firstPart.length);\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/selection.js

@@ -12,11 +12,6 @@ const saveSelection = function (element) {
     shouldIgnoreEmptyTextNodes
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const selection = window.getSelection();
-  console.debug('saveSelection 1', {
-    anchorNode: selection === null || selection === void 0 ? void 0 : selection.anchorNode,
-    selection,
-    shouldIgnoreEmptyTextNodes
-  });
   if (!selection) {
     return;
   }
@@ -40,27 +35,11 @@ const saveSelection = function (element) {
   childIndex = childNodesArray.indexOf(anchorNode);
   endOffset = range.endOffset;
   startOffset = range.startOffset;
-  console.debug('saveSelection 2', {
-    childIndex,
-    endOffset,
-    startOffset
-  });
 };
 exports.saveSelection = saveSelection;
 const restoreSelection = element => {
-  var _childNode;
   let childNode = element.childNodes[childIndex];
   const selection = window.getSelection();
-  console.debug('restoreSelection 1', {
-    childIndex,
-    childNode,
-    childNodes: element.childNodes,
-    element,
-    endOffset,
-    nodeValue: (_childNode = childNode) === null || _childNode === void 0 ? void 0 : _childNode.nodeValue,
-    selection,
-    startOffset
-  });
   if (!childNode || !element || !selection) {
     return;
   }
@@ -91,12 +70,6 @@ const restoreSelection = element => {
     }
   }
   const range = document.createRange();
-  console.debug('restoreSelection 2', {
-    childNode,
-    endOffset,
-    range,
-    startOffset
-  });
   range.setStart(childNode, startOffset);
   range.setEnd(childNode, endOffset);
   selection.removeAllRanges();

package/lib/utils/selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection.js","names":["childIndex","endOffset","startOffset","saveSelection","element","shouldIgnoreEmptyTextNodes","arguments","length","undefined","selection","window","getSelection","console","debug","anchorNode","range","getRangeAt","childNodesArray","Array","from","childNodes","filter","_ref","nodeType","nodeValue","Node","TEXT_NODE","indexOf","exports","restoreSelection","_childNode","childNode","_childNode$parentNode","textNode","document","createTextNode","parentNode","insertBefore","nextSibling","_childNode$parentNode2","createRange","setStart","setEnd","removeAllRanges","addRange","collapse","moveSelectionOffset","distance","setChildIndex","index"],"sources":["../../src/utils/selection.ts"],"sourcesContent":["let childIndex = -1;\nlet endOffset = -1;\nlet startOffset = -1;\n\ninterface SaveSelectionOptions {\n    shouldIgnoreEmptyTextNodes?: boolean;\n}\n\nexport const saveSelection = (\n    element: HTMLDivElement,\n    { shouldIgnoreEmptyTextNodes }: SaveSelectionOptions = {}\n) => {\n    const selection = window.getSelection();\n\n    console.debug('saveSelection 1', {\n        anchorNode: selection?.anchorNode,\n        selection,\n        shouldIgnoreEmptyTextNodes,\n    });\n\n    if (!selection) {\n        return;\n    }\n\n    const { anchorNode } = selection;\n\n    if (!anchorNode) {\n        return;\n    }\n\n    const range = selection.getRangeAt(0);\n\n    let childNodesArray = Array.from(element.childNodes);\n\n    if (shouldIgnoreEmptyTextNodes) {\n        childNodesArray = childNodesArray.filter(\n            ({ nodeType, nodeValue }) =>\n                nodeType !== Node.TEXT_NODE || (nodeValue !== '' && nodeValue !== '\\u200B')\n        );\n    }\n\n    childIndex = childNodesArray.indexOf(anchorNode as ChildNode);\n\n    endOffset = range.endOffset;\n    startOffset = range.startOffset;\n\n    console.debug('saveSelection 2', { childIndex, endOffset, startOffset });\n};\n\nexport const restoreSelection = (element: HTMLDivElement) => {\n    let childNode = element.childNodes[childIndex];\n\n    const selection = window.getSelection();\n\n    console.debug('restoreSelection 1', {\n        childIndex,\n        childNode,\n        childNodes: element.childNodes,\n        element,\n        endOffset,\n        nodeValue: childNode?.nodeValue,\n        selection,\n        startOffset,\n    });\n\n    if (!childNode || !element || !selection) {\n        return;\n    }\n\n    if (typeof childNode.nodeValue !== 'string') {\n        const textNode = document.createTextNode('\\u200B');\n\n        childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n        childNode = textNode;\n\n        endOffset = 0;\n        startOffset = 0;\n    } else if (childNode.nodeValue && endOffset > childNode.nodeValue.length) {\n        if (childNode.nextSibling) {\n            childNode = childNode.nextSibling;\n\n            if (childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue) {\n                endOffset = childNode.nodeValue.length;\n                startOffset = childNode.nodeValue.length;\n            } else {\n                const textNode = document.createTextNode('\\u200B');\n\n                childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n                childNode = textNode;\n\n                endOffset = 0;\n                startOffset = 0;\n            }\n        } else {\n            endOffset = childNode.nodeValue.length;\n            startOffset = childNode.nodeValue.length;\n        }\n    }\n\n    const range = document.createRange();\n\n    console.debug('restoreSelection 2', {\n        childNode,\n        endOffset,\n        range,\n        startOffset,\n    });\n\n    range.setStart(childNode, startOffset);\n    range.setEnd(childNode, endOffset);\n\n    selection.removeAllRanges();\n    selection.addRange(range);\n\n    range.collapse(true);\n};\n\nexport const moveSelectionOffset = (distance: number) => {\n    endOffset += distance;\n    startOffset += distance;\n};\n\nexport const setChildIndex = (index: number) => {\n    childIndex = index;\n};\n"],"mappings":"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"}
+{"version":3,"file":"selection.js","names":["childIndex","endOffset","startOffset","saveSelection","element","shouldIgnoreEmptyTextNodes","arguments","length","undefined","selection","window","getSelection","anchorNode","range","getRangeAt","childNodesArray","Array","from","childNodes","filter","_ref","nodeType","nodeValue","Node","TEXT_NODE","indexOf","exports","restoreSelection","childNode","_childNode$parentNode","textNode","document","createTextNode","parentNode","insertBefore","nextSibling","_childNode$parentNode2","createRange","setStart","setEnd","removeAllRanges","addRange","collapse","moveSelectionOffset","distance","setChildIndex","index"],"sources":["../../src/utils/selection.ts"],"sourcesContent":["let childIndex = -1;\nlet endOffset = -1;\nlet startOffset = -1;\n\ninterface SaveSelectionOptions {\n    shouldIgnoreEmptyTextNodes?: boolean;\n}\n\nexport const saveSelection = (\n    element: HTMLDivElement,\n    { shouldIgnoreEmptyTextNodes }: SaveSelectionOptions = {}\n) => {\n    const selection = window.getSelection();\n\n    if (!selection) {\n        return;\n    }\n\n    const { anchorNode } = selection;\n\n    if (!anchorNode) {\n        return;\n    }\n\n    const range = selection.getRangeAt(0);\n\n    let childNodesArray = Array.from(element.childNodes);\n\n    if (shouldIgnoreEmptyTextNodes) {\n        childNodesArray = childNodesArray.filter(\n            ({ nodeType, nodeValue }) =>\n                nodeType !== Node.TEXT_NODE || (nodeValue !== '' && nodeValue !== '\\u200B')\n        );\n    }\n\n    childIndex = childNodesArray.indexOf(anchorNode as ChildNode);\n\n    endOffset = range.endOffset;\n    startOffset = range.startOffset;\n};\n\nexport const restoreSelection = (element: HTMLDivElement) => {\n    let childNode = element.childNodes[childIndex];\n\n    const selection = window.getSelection();\n\n    if (!childNode || !element || !selection) {\n        return;\n    }\n\n    if (typeof childNode.nodeValue !== 'string') {\n        const textNode = document.createTextNode('\\u200B');\n\n        childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n        childNode = textNode;\n\n        endOffset = 0;\n        startOffset = 0;\n    } else if (childNode.nodeValue && endOffset > childNode.nodeValue.length) {\n        if (childNode.nextSibling) {\n            childNode = childNode.nextSibling;\n\n            if (childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue) {\n                endOffset = childNode.nodeValue.length;\n                startOffset = childNode.nodeValue.length;\n            } else {\n                const textNode = document.createTextNode('\\u200B');\n\n                childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n                childNode = textNode;\n\n                endOffset = 0;\n                startOffset = 0;\n            }\n        } else {\n            endOffset = childNode.nodeValue.length;\n            startOffset = childNode.nodeValue.length;\n        }\n    }\n\n    const range = document.createRange();\n\n    range.setStart(childNode, startOffset);\n    range.setEnd(childNode, endOffset);\n\n    selection.removeAllRanges();\n    selection.addRange(range);\n\n    range.collapse(true);\n};\n\nexport const moveSelectionOffset = (distance: number) => {\n    endOffset += distance;\n    startOffset += distance;\n};\n\nexport const setChildIndex = (index: number) => {\n    childIndex = index;\n};\n"],"mappings":"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"}

package/lib/utils/text.js

@@ -10,6 +10,7 @@ const convertTextToHTML = text => {
   const element = document.createElement('div');
   element.style.position = 'absolute';
   element.style.opacity = '0';
+  element.contentEditable = 'true';
   element.innerText = text;
   document.body.appendChild(element);
   let result = element.innerHTML;
@@ -26,6 +27,7 @@ const convertHTMLToText = text => {
   const element = document.createElement('div');
   element.style.position = 'absolute';
   element.style.opacity = '0';
+  element.contentEditable = 'true';
   element.innerHTML = result;
   document.body.appendChild(element);
   result = element.innerText;

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","innerText","body","appendChild","result","innerHTML","removeChild","unescapeHTML","replace","BB_LC_MENTION_REGEX","exports","convertHTMLToText","HTML_LC_MENTION_REGEX"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import { BB_LC_MENTION_REGEX, HTML_LC_MENTION_REGEX } from '../constants/regex';\nimport { 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.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\n    result = unescapeHTML(result);\n\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\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"],"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,SAAS,GAAGP,IAAI;EAExBE,QAAQ,CAACM,IAAI,CAACC,WAAW,CAACR,OAAO,CAAC;EAElC,IAAIS,MAAM,GAAGT,OAAO,CAACU,SAAS;EAE9BT,QAAQ,CAACM,IAAI,CAACI,WAAW,CAACX,OAAO,CAAC;EAElCS,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,CAAAjB,iBAAA,GAAAA,iBAAA;AAEK,MAAMkB,iBAAiB,GAAIjB,IAAY,IAAK;EAC/C,IAAIU,MAAM,GAAGV,IAAI;EAEjBU,MAAM,GAAGA,MAAM,CAACI,OAAO,CAACI,4BAAqB,EAAE,qCAAqC,CAAC;EAErFR,MAAM,GAAG,IAAAG,mBAAY,EAACH,MAAM,CAAC;EAE7B,MAAMT,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,CAACU,SAAS,GAAGD,MAAM;EAE1BR,QAAQ,CAACM,IAAI,CAACC,WAAW,CAACR,OAAO,CAAC;EAElCS,MAAM,GAAGT,OAAO,CAACM,SAAS;EAE1BL,QAAQ,CAACM,IAAI,CAACI,WAAW,CAACX,OAAO,CAAC;EAElC,OAAOS,MAAM;AACjB,CAAC;AAACM,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}
+{"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"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import { BB_LC_MENTION_REGEX, HTML_LC_MENTION_REGEX } from '../constants/regex';\nimport { 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\n    result = unescapeHTML(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"],"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;EAErFR,MAAM,GAAG,IAAAG,mBAAY,EAACH,MAAM,CAAC;EAE7B,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.153",
+    "version": "5.0.0-beta.155",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -52,7 +52,7 @@
         "typescript": "^4.9.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.153",
+        "@chayns-components/core": "^5.0.0-beta.155",
         "@chayns/colors": "^2.0.0",
         "clsx": "^1.2.1",
         "emojilib": "^3.0.10",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e89cb01c42cf129a968c3fd9dab175b68f94f67c"
+    "gitHead": "97105b5babfa509f5f3ba49f520aff72cfbcb35c"
 }