@chayns-components/emoji-input 5.0.0-beta.136 → 5.0.0-beta.1360

package/README.md

@@ -15,14 +15,14 @@
 
 ## Installation
 
-First you need to install the typewriter part of the chayns-components.
+First you need to install the emoji input part of the chayns-components.
 
 ```bash
 # NPM
-npm install @chayns-components/typewriter
+npm install @chayns-components/emoji-input
 
 # Yarn
-yarn add @chayns-components/typewriter
+yarn add @chayns-components/emoji-input
 ```
 
 > **Information:** Since the components have now been implemented with the styled-components
@@ -31,15 +31,4 @@ yarn add @chayns-components/typewriter
 
 ## Usage
 
-You can use the components in your project as in the following example.
-
-```typescript jsx
-import { Typewriter } from '@chayns-components/typewriter';
-
-<Typewriter>
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
-    sit amet.
-</Typewriter>;
-```
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/{api → cjs/api}/item-storage/get.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getEmojiHistory = void 0;
 var _externalServerUrl = require("../../constants/externalServerUrl");
-const getEmojiHistory = async _ref => {
-  let {
-    accessToken,
-    personId
-  } = _ref;
+const getEmojiHistory = async ({
+  accessToken,
+  personId
+}) => {
   const requestInit = {
     headers: {
       Authorization: `Bearer ${accessToken}`

package/lib/cjs/api/item-storage/get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get.js","names":["_externalServerUrl","require","getEmojiHistory","accessToken","personId","requestInit","headers","Authorization","method","url","ITEM_STORAGE_BASE_URL","response","fetch","status","data","json","value","e","exports"],"sources":["../../../../src/api/item-storage/get.ts"],"sourcesContent":["import { ITEM_STORAGE_BASE_URL } from '../../constants/externalServerUrl';\nimport type { HistoryItem } from '../../hooks/emojiHistory';\nimport type { ApiFunctionResult } from '../../types/api';\n\ninterface GetEmojiHistoryOptions {\n    accessToken: string;\n    personId: string;\n}\n\ninterface GetEmojiHistoryResponseData {\n    key: string;\n    personId: string;\n    schemeId: string;\n    value: HistoryItem[];\n}\n\nexport const getEmojiHistory = async ({\n    accessToken,\n    personId,\n}: GetEmojiHistoryOptions): Promise<ApiFunctionResult<HistoryItem[]>> => {\n    const requestInit: RequestInit = {\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n        },\n        method: 'GET',\n    };\n\n    const url = `${ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;\n\n    const response = await fetch(url, requestInit);\n\n    if (response.status === 200) {\n        try {\n            const data = (await response.json()) as GetEmojiHistoryResponseData;\n\n            return { data: data.value, status: 200 };\n        } catch (e) {\n            // Do nothing\n        }\n    }\n\n    return { status: response.status };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAgBO,MAAMC,eAAe,GAAG,MAAAA,CAAO;EAClCC,WAAW;EACXC;AACoB,CAAC,KAAgD;EACrE,MAAMC,WAAwB,GAAG;IAC7BC,OAAO,EAAE;MACLC,aAAa,EAAE,UAAUJ,WAAW;IACxC,CAAC;IACDK,MAAM,EAAE;EACZ,CAAC;EAED,MAAMC,GAAG,GAAG,GAAGC,wCAAqB,YAAYN,QAAQ,cAAc;EAEtE,MAAMO,QAAQ,GAAG,MAAMC,KAAK,CAACH,GAAG,EAAEJ,WAAW,CAAC;EAE9C,IAAIM,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,IAAI;MACA,MAAMC,IAAI,GAAI,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAiC;MAEnE,OAAO;QAAED,IAAI,EAAEA,IAAI,CAACE,KAAK;QAAEH,MAAM,EAAE;MAAI,CAAC;IAC5C,CAAC,CAAC,OAAOI,CAAC,EAAE;MACR;IAAA;EAER;EAEA,OAAO;IAAEJ,MAAM,EAAEF,QAAQ,CAACE;EAAO,CAAC;AACtC,CAAC;AAACK,OAAA,CAAAhB,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/{api → cjs/api}/item-storage/put.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.putEmojiHistory = void 0;
 var _externalServerUrl = require("../../constants/externalServerUrl");
-const putEmojiHistory = async _ref => {
-  let {
-    accessToken,
-    personId,
-    value
-  } = _ref;
+const putEmojiHistory = async ({
+  accessToken,
+  personId,
+  value
+}) => {
   const requestInit = {
     body: JSON.stringify({
       value

package/lib/cjs/api/item-storage/put.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"put.js","names":["_externalServerUrl","require","putEmojiHistory","accessToken","personId","value","requestInit","body","JSON","stringify","headers","Authorization","method","url","ITEM_STORAGE_BASE_URL","response","fetch","status","data","json","e","exports"],"sources":["../../../../src/api/item-storage/put.ts"],"sourcesContent":["import { ITEM_STORAGE_BASE_URL } from '../../constants/externalServerUrl';\nimport type { HistoryItem } from '../../hooks/emojiHistory';\nimport type { ApiFunctionResult } from '../../types/api';\n\ninterface PutEmojiHistoryOptions {\n    accessToken: string;\n    personId: string;\n    value: HistoryItem[];\n}\n\ninterface PutEmojiHistoryResponseData {\n    key: string;\n    personId: string;\n    schemeId: string;\n    value: HistoryItem[];\n}\n\nexport const putEmojiHistory = async ({\n    accessToken,\n    personId,\n    value,\n}: PutEmojiHistoryOptions): Promise<ApiFunctionResult<HistoryItem[]>> => {\n    const requestInit: RequestInit = {\n        body: JSON.stringify({ value }),\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n            'Content-Type': 'application/json',\n        },\n        method: 'PUT',\n    };\n\n    const url = `${ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;\n\n    const response = await fetch(url, requestInit);\n\n    if (response.status === 201) {\n        try {\n            const data = (await response.json()) as PutEmojiHistoryResponseData;\n\n            return { data: data.value, status: 200 };\n        } catch (e) {\n            // Do nothing\n        }\n    }\n\n    return { status: response.status };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAiBO,MAAMC,eAAe,GAAG,MAAAA,CAAO;EAClCC,WAAW;EACXC,QAAQ;EACRC;AACoB,CAAC,KAAgD;EACrE,MAAMC,WAAwB,GAAG;IAC7BC,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;MAAEJ;IAAM,CAAC,CAAC;IAC/BK,OAAO,EAAE;MACLC,aAAa,EAAE,UAAUR,WAAW,EAAE;MACtC,cAAc,EAAE;IACpB,CAAC;IACDS,MAAM,EAAE;EACZ,CAAC;EAED,MAAMC,GAAG,GAAG,GAAGC,wCAAqB,YAAYV,QAAQ,cAAc;EAEtE,MAAMW,QAAQ,GAAG,MAAMC,KAAK,CAACH,GAAG,EAAEP,WAAW,CAAC;EAE9C,IAAIS,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,IAAI;MACA,MAAMC,IAAI,GAAI,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAiC;MAEnE,OAAO;QAAED,IAAI,EAAEA,IAAI,CAACb,KAAK;QAAEY,MAAM,EAAE;MAAI,CAAC;IAC5C,CAAC,CAAC,OAAOG,CAAC,EAAE;MACR;IAAA;EAER;EAEA,OAAO;IAAEH,MAAM,EAAEF,QAAQ,CAACE;EAAO,CAAC;AACtC,CAAC;AAACI,OAAA,CAAAnB,eAAA,GAAAA,eAAA","ignoreList":[]}

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

@@ -0,0 +1,561 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _chaynsApi = require("chayns-api");
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _emoji = require("../../utils/emoji");
+var _insert = require("../../utils/insert");
+var _selection = require("../../utils/selection");
+var _text = require("../../utils/text");
+var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
+var _EmojiInput = require("./EmojiInput.styles");
+var _PrefixElement = _interopRequireDefault(require("./prefix-element/PrefixElement"));
+var _asyncEmojiData = require("../../utils/asyncEmojiData");
+var _scroll = require("../../utils/scroll");
+var _cursor = require("../../hooks/cursor");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react2.useLayoutEffect : _react2.useEffect;
+const EmojiInput = /*#__PURE__*/(0, _react2.forwardRef)(({
+  accessToken,
+  height,
+  inputId,
+  isDisabled,
+  maxHeight = '190px',
+  onBlur,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onPrefixElementRemove,
+  onPopupVisibilityChange,
+  personId,
+  placeholder,
+  popupAlignment,
+  prefixElement,
+  rightElement,
+  shouldHidePlaceholderOnFocus = false,
+  shouldPreventEmojiPicker,
+  value,
+  onCursorPositionChange
+}, ref) => {
+  const isTouch = (0, _core.useIsTouch)();
+  const [plainTextValue, setPlainTextValue] = (0, _react2.useState)(value);
+  const [hasFocus, setHasFocus] = (0, _react2.useState)(false);
+  const [progressDuration, setProgressDuration] = (0, _react2.useState)(0);
+  const [labelWidth, setLabelWidth] = (0, _react2.useState)(0);
+  const [isPopupVisible, setIsPopupVisible] = (0, _react2.useState)(false);
+  const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = (0, _react2.useState)(!prefixElement);
+  const [prefixElementWidth, setPrefixElementWidth] = (0, _react2.useState)();
+  const [emojiShortNames, setEmojiShortNames] = (0, _react2.useState)({});
+  const [emojiRegShortNames, setEmojiRegShortNames] = (0, _react2.useState)(/./);
+  const areaProvider = (0, _react2.useContext)(_core.AreaContext);
+  const editorRef = (0, _react2.useRef)(null);
+  const prefixElementRef = (0, _react2.useRef)(null);
+  const hasPrefixRendered = (0, _react2.useRef)(false);
+  const hasPrefixChanged = (0, _react2.useRef)(false);
+  const shouldDeleteOneMoreBackwards = (0, _react2.useRef)(false);
+  const shouldDeleteOneMoreForwards = (0, _react2.useRef)(false);
+  const valueRef = (0, _react2.useRef)(value);
+  (0, _cursor.useCursorPosition)(editorRef, onCursorPositionChange, {
+    isDisabled
+  });
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
+  const shouldChangeColor = (0, _react2.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  (0, _react2.useEffect)(() => {
+    void (0, _asyncEmojiData.loadEmojiShortList)().then(({
+      shortNameList,
+      regShortnames
+    }) => {
+      setEmojiShortNames(shortNameList);
+      setEmojiRegShortNames(regShortnames);
+    });
+  }, []);
+
+  /**
+   * This function updates the content of the 'contentEditable' element if the new text is
+   * different from the previous content. So this is only true if, for example, a text like ":-)"
+   * has been replaced to the corresponding emoji.
+   *
+   * When updating the HTML, the current cursor position is saved before replacing the content, so
+   * that it can be set again afterward.
+   */
+  const handleUpdateHTML = (0, _react2.useCallback)(html => {
+    if (!editorRef.current) {
+      return;
+    }
+    let newInnerHTML = (0, _emoji.convertEmojisToUnicode)(html, emojiRegShortNames, emojiShortNames);
+    newInnerHTML = (0, _text.convertTextToHTML)(newInnerHTML);
+    if (newInnerHTML !== editorRef.current.innerHTML) {
+      (0, _selection.saveSelection)(editorRef.current, {
+        shouldIgnoreEmptyTextNodes: true
+      });
+      editorRef.current.innerHTML = newInnerHTML;
+      (0, _selection.restoreSelection)(editorRef.current);
+    }
+  }, [emojiRegShortNames, emojiShortNames]);
+  const handleBeforeInput = (0, _react2.useCallback)(event => {
+    if (!editorRef.current) {
+      return;
+    }
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    const {
+      data,
+      type
+    } = event.nativeEvent;
+    if (type === 'textInput' && data && data.includes('\n')) {
+      event.preventDefault();
+      event.stopPropagation();
+      const text = (0, _emoji.convertEmojisToUnicode)(data, emojiRegShortNames, emojiShortNames);
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text
+      });
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, [emojiRegShortNames, emojiShortNames, isDisabled]);
+
+  /**
+   * This function handles the 'input' events of the 'contentEditable' element and also passes the
+   * respective event up accordingly if the 'onInput' property is a function.
+   */
+  const handleInput = (0, _react2.useCallback)(event => {
+    if (!editorRef.current) {
+      return;
+    }
+    if (isDisabled) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    if (shouldDeleteOneMoreBackwards.current) {
+      shouldDeleteOneMoreBackwards.current = false;
+      shouldDeleteOneMoreForwards.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Remove content and set cursor to the right position
+      (0, _selection.insertInvisibleCursorMarker)();
+      return;
+    }
+    if (shouldDeleteOneMoreForwards.current) {
+      shouldDeleteOneMoreBackwards.current = false;
+      shouldDeleteOneMoreForwards.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+
+      // noinspection JSDeprecatedSymbols
+      document.execCommand('forwardDelete', false);
+      return;
+    }
+    handleUpdateHTML(editorRef.current.innerHTML);
+    const text = (0, _text.convertHTMLToText)(editorRef.current.innerHTML);
+    setPlainTextValue(text);
+    if (typeof onInput === 'function') {
+      onInput(event, text);
+    }
+    (0, _selection.insertCursorAtMarker)(editorRef);
+  }, [handleUpdateHTML, isDisabled, onInput]);
+  const handleKeyDown = (0, _react2.useCallback)(event => {
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === 'Enter' && isPopupVisible) {
+      event.preventDefault();
+      return;
+    }
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+    if (event.key === 'Enter' && !event.isPropagationStopped() && editorRef.current) {
+      event.preventDefault();
+
+      // noinspection JSDeprecatedSymbols
+      document.execCommand('insertLineBreak', false);
+    }
+    if (event.key === 'Enter') {
+      requestAnimationFrame(() => {
+        if (editorRef.current) (0, _scroll.scrollCursorIntoView)(editorRef.current);
+      });
+    }
+    if (event.key === 'Backspace' || event.key === 'Delete' || event.key === 'Unidentified') {
+      const charCodeThatWillBeDeleted = (0, _selection.getCharCodeThatWillBeDeleted)(event);
+      if (charCodeThatWillBeDeleted === 8203) {
+        if (event.key === 'Backspace' || event.key === 'Unidentified') {
+          shouldDeleteOneMoreBackwards.current = true;
+        } else {
+          shouldDeleteOneMoreForwards.current = true;
+        }
+      }
+    }
+  }, [isDisabled, isPopupVisible, onKeyDown]);
+  const handlePopupVisibility = (0, _react2.useCallback)(isVisible => {
+    setIsPopupVisible(isVisible);
+    if (editorRef.current && isVisible) {
+      (0, _selection.saveSelection)(editorRef.current);
+    }
+    if (typeof onPopupVisibilityChange === 'function') {
+      onPopupVisibilityChange(isVisible);
+    }
+  }, [onPopupVisibilityChange]);
+
+  /**
+   * This function prevents formatting from being adopted when texts are inserted. To do this, the
+   * plain text is read from the event after the default behavior has been prevented. The plain
+   * text is then inserted at the correct position in the input field using document.execCommand('insertHTML')
+   */
+  const handlePaste = (0, _react2.useCallback)(event => {
+    if (editorRef.current) {
+      event.preventDefault();
+      if (isDisabled) {
+        event.stopPropagation();
+        return;
+      }
+
+      // This ensures, that only the copied text is inserted and not its HTML formatting.
+      let text = event.clipboardData.getData('text/plain');
+      text = (0, _emoji.convertEmojisToUnicode)(text, emojiRegShortNames, emojiShortNames);
+
+      /* This ensures, that valid HTML in the inserted text is not interpreted as such. e.g. if the user
+         pasted the text '<b>test</b>' (not as formatted html), the <b> tags need to be escaped, to
+         prevent it from being interpreted as html. */
+      text = (0, _emoji.escapeHTML)(text);
+
+      // Insert an invisible control character at the end of the text to place the cursor in the correct position after insertion.
+      if (text.includes('\n')) {
+        text += '\u200C';
+      }
+
+      // This deprecated function is used, because it causes the inserted content to be added to the undo stack.
+      // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.
+      // In that case on CTRL+Z the inserted text would not be removed.
+      document.execCommand('insertHTML', false, text);
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, [emojiRegShortNames, emojiShortNames, isDisabled]);
+
+  /**
+   * This function prevents formatting from being adopted when texts are dropped. To do this, the
+   * plain text is read from the event after the default behavior has been prevented. The plain
+   * text is then inserted at the correct position in the input field using document.execCommand('insertHTML')
+   */
+  const handleDrop = (0, _react2.useCallback)(event => {
+    if (editorRef.current) {
+      var _event$dataTransfer;
+      event.preventDefault();
+      if (isDisabled) {
+        event.stopPropagation();
+        return;
+      }
+
+      // This ensures, that only the dropped text is inserted and not its HTML formatting.
+      let text = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.getData('text');
+      if (!text) {
+        return;
+      }
+      text = (0, _emoji.convertEmojisToUnicode)(text, emojiRegShortNames, emojiShortNames);
+
+      /* This ensures, that valid HTML in the inserted text is not interpreted as such. e.g. if the user
+         drops the text '<b>test</b>' (not as formatted html), the <b> tags need to be escaped, to
+         prevent it from being interpreted as html. */
+      text = (0, _emoji.escapeHTML)(text);
+
+      // This deprecated function is used, because it causes the inserted content to be added to the undo stack.
+      // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.
+      // In that case on CTRL+Z the inserted text would not be removed.
+      document.execCommand('insertHTML', false, text);
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, [emojiRegShortNames, emojiShortNames, isDisabled]);
+
+  /**
+   * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the
+   * correct position in the editor element.
+   *
+   * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,
+   * which in turn executes the 'onInput' function from the props. So this serves to ensure that
+   * the event is also passed through to the top when inserting via the popup.
+   */
+  const handlePopupSelect = (0, _react2.useCallback)(emoji => {
+    if (editorRef.current) {
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text: emoji,
+        shouldUseSavedSelection: true
+      });
+      const event = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(event);
+    }
+  }, []);
+  (0, _react2.useEffect)(() => {
+    var _editorRef$current;
+    if (typeof onPrefixElementRemove !== 'function') {
+      return;
+    }
+    if (!hasPrefixRendered.current) {
+      return;
+    }
+    const convertedText = (0, _text.convertHTMLToText)(((_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.innerHTML) ?? '').replace('&nbsp;', ' ');
+    const convertedPrefix = prefixElement && prefixElement.replace('&nbsp;', ' ');
+    if (convertedPrefix && convertedText.includes(convertedPrefix) && convertedText.length > convertedPrefix.length || convertedPrefix === convertedText) {
+      return;
+    }
+    if (hasPrefixChanged.current) {
+      hasPrefixChanged.current = false;
+      return;
+    }
+    onPrefixElementRemove();
+    hasPrefixRendered.current = false;
+  }, [onPrefixElementRemove, plainTextValue.length, prefixElement]);
+  (0, _react2.useEffect)(() => {
+    if (typeof prefixElement === 'string') {
+      hasPrefixChanged.current = true;
+    }
+  }, [prefixElement]);
+  (0, _react2.useEffect)(() => {
+    if (value !== plainTextValue) {
+      setPlainTextValue(value);
+      handleUpdateHTML(value);
+    }
+  }, [handleUpdateHTML, plainTextValue, value]);
+
+  // This effect is used to call the 'handleUpdateHTML' function once after the component has been
+  // rendered. This is necessary because the 'contentEditable' element otherwise does not display
+  // the HTML content correctly when the component is rendered for the first time.
+  useIsomorphicLayoutEffect(() => {
+    handleUpdateHTML(valueRef.current);
+  }, [handleUpdateHTML]);
+  const handleInsertTextAtCursorPosition = (0, _react2.useCallback)(text => {
+    if (editorRef.current) {
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text
+      });
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, []);
+  const handleReplaceText = (0, _react2.useCallback)((searchText, pasteText, options) => {
+    if (editorRef.current) {
+      (0, _insert.replaceText)({
+        editorElement: editorRef.current,
+        searchText,
+        pasteText,
+        options
+      });
+      (0, _selection.insertPseudoMarker)();
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, []);
+  const handleStartProgress = (0, _react2.useCallback)(duration => {
+    setProgressDuration(duration);
+  }, []);
+  const handleStopProgress = (0, _react2.useCallback)(() => {
+    setProgressDuration(0);
+  }, []);
+  (0, _react2.useImperativeHandle)(ref, () => ({
+    insertTextAtCursorPosition: handleInsertTextAtCursorPosition,
+    replaceText: handleReplaceText,
+    startProgress: handleStartProgress,
+    stopProgress: handleStopProgress,
+    focus: () => {
+      var _editorRef$current2;
+      return (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.focus();
+    },
+    blur: () => {
+      var _editorRef$current3;
+      return (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.blur();
+    }
+  }), [handleInsertTextAtCursorPosition, handleReplaceText, handleStartProgress, handleStopProgress]);
+  (0, _react2.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;
+      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$parentElemen2 = _element$parentElemen2.parentElement) !== null && _element$parentElemen2 !== void 0 && _element$parentElemen2.classList.contains('prevent-lose-focus')) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    document.body.addEventListener('mousedown', handlePreventLoseFocus);
+    return () => {
+      document.body.removeEventListener('mousedown', handlePreventLoseFocus);
+    };
+  }, []);
+  const shouldShowPlaceholder = (0, _react2.useMemo)(() => {
+    var _editorRef$current4;
+    if (!isPrefixAnimationFinished) {
+      return false;
+    }
+    const isJustPrefixElement = prefixElement && (0, _text.convertTextToHTML)(prefixElement) === ((_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.innerHTML);
+    const shouldRenderPlaceholder = prefixElement && !plainTextValue || (prefixElement ? prefixElementWidth && prefixElementWidth > 0 : true);
+    switch (true) {
+      case (!plainTextValue || isJustPrefixElement) && shouldHidePlaceholderOnFocus && !hasFocus:
+      case (!plainTextValue || isJustPrefixElement) && !shouldHidePlaceholderOnFocus:
+        return shouldRenderPlaceholder;
+      case (!plainTextValue || isJustPrefixElement) && shouldHidePlaceholderOnFocus && hasFocus:
+        return false;
+      default:
+        return false;
+    }
+  }, [isPrefixAnimationFinished, hasFocus, plainTextValue, prefixElement, shouldHidePlaceholderOnFocus, prefixElementWidth]);
+  (0, _react2.useEffect)(() => {
+    if (prefixElement) {
+      setIsPrefixAnimationFinished(false);
+    }
+  }, [prefixElement]);
+  const handleFocus = event => {
+    if (typeof onFocus === 'function' && !isDisabled) {
+      onFocus(event);
+    }
+    setHasFocus(true);
+  };
+  const handleBlur = event => {
+    if (typeof onBlur === 'function' && !isDisabled) {
+      onBlur(event);
+    }
+    setHasFocus(false);
+  };
+  (0, _react2.useEffect)(() => {
+    if (editorRef.current && prefixElement) {
+      const text = (0, _emoji.convertEmojisToUnicode)(prefixElement, emojiRegShortNames, emojiShortNames);
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text
+      });
+      handleUpdateHTML(prefixElement);
+      hasPrefixRendered.current = true;
+    }
+  }, [emojiRegShortNames, emojiShortNames, handleUpdateHTML, prefixElement]);
+  (0, _react2.useEffect)(() => {
+    var _editorRef$current5;
+    if (prefixElementRef.current && prefixElement && (0, _text.convertTextToHTML)(prefixElement) === ((_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 ? void 0 : _editorRef$current5.innerHTML)) {
+      setPrefixElementWidth(prefixElementRef.current.offsetWidth + 2);
+    } else {
+      setPrefixElementWidth(undefined);
+    }
+  }, [plainTextValue, prefixElement]);
+  (0, _react2.useEffect)(() => {
+    const handleResize = () => {
+      if (editorRef.current) {
+        setLabelWidth(editorRef.current.offsetWidth);
+      }
+    };
+    const resizeObserver = new ResizeObserver(handleResize);
+    if (editorRef.current) {
+      resizeObserver.observe(editorRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  (0, _react2.useEffect)(() => {
+    const blurElement = () => {
+      if (editorRef.current && document.activeElement === editorRef.current && isDisabled) {
+        editorRef.current.blur();
+      }
+    };
+    document.addEventListener('focus', blurElement, true);
+    return () => {
+      document.removeEventListener('focus', blurElement, true);
+    };
+  }, [isDisabled]);
+  return /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInput, {
+    $isDisabled: isDisabled,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: true
+  }, progressDuration > 0 && /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledMotionEmojiInputProgress, {
+    animate: {
+      width: '100%'
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 1,
+      width: '0%'
+    },
+    transition: {
+      width: {
+        ease: 'linear',
+        duration: progressDuration
+      },
+      opacity: {
+        type: 'tween',
+        duration: 0.3
+      }
+    }
+  })), /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInputContent, null, prefixElement && /*#__PURE__*/_react2.default.createElement(_PrefixElement.default, {
+    key: prefixElement,
+    element: prefixElement,
+    prefixElementRef: prefixElementRef,
+    setIsPrefixAnimationFinished: setIsPrefixAnimationFinished
+  }), /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledMotionEmojiInputEditor, {
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    animate: {
+      maxHeight: height ?? maxHeight,
+      minHeight: height ?? '26px'
+    },
+    contentEditable: true,
+    id: inputId,
+    onBeforeInput: handleBeforeInput,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onInput: handleInput,
+    onKeyDown: handleKeyDown,
+    onPaste: handlePaste,
+    onDrop: handleDrop,
+    ref: editorRef,
+    $shouldShowContent: isPrefixAnimationFinished,
+    transition: {
+      type: 'tween',
+      duration: 0.2
+    }
+  }), shouldShowPlaceholder && /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInputLabel, {
+    $maxWidth: labelWidth,
+    $offsetWidth: prefixElementWidth
+  }, placeholder), !isTouch && !shouldPreventEmojiPicker && /*#__PURE__*/_react2.default.createElement(_EmojiPickerPopup.default, {
+    accessToken: accessToken,
+    onSelect: handlePopupSelect,
+    onPopupVisibilityChange: handlePopupVisibility,
+    personId: personId
+  })), rightElement && /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
+});
+EmojiInput.displayName = 'EmojiInput';
+var _default = exports.default = EmojiInput;
+//# sourceMappingURL=EmojiInput.js.map