@chayns-components/emoji-input 5.0.0-beta.132 → 5.0.0-beta.1320

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

@@ -0,0 +1,542 @@
+import { AreaContext, getIsTouch } from '@chayns-components/core';
+import { getDevice } from 'chayns-api';
+import { AnimatePresence } from 'motion/react';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { convertEmojisToUnicode, escapeHTML } from '../../utils/emoji';
+import { insertTextAtCursorPosition, replaceText } from '../../utils/insert';
+import { getCharCodeThatWillBeDeleted, insertInvisibleCursorMarker, restoreSelection, saveSelection, insertPseudoMarker, insertCursorAtMarker } from '../../utils/selection';
+import { convertHTMLToText, convertTextToHTML } from '../../utils/text';
+import EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';
+import { StyledEmojiInput, StyledEmojiInputContent, StyledEmojiInputLabel, StyledEmojiInputRightWrapper, StyledMotionEmojiInputEditor, StyledMotionEmojiInputProgress } from './EmojiInput.styles';
+import PrefixElement from './prefix-element/PrefixElement';
+import { loadEmojiShortList } from '../../utils/asyncEmojiData';
+import { scrollCursorIntoView } from '../../utils/scroll';
+import { useCursorPosition } from '../../hooks/cursor';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const EmojiInput = /*#__PURE__*/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] = useState(getIsTouch());
+  const [plainTextValue, setPlainTextValue] = useState(value);
+  const [hasFocus, setHasFocus] = useState(false);
+  const [progressDuration, setProgressDuration] = useState(0);
+  const [labelWidth, setLabelWidth] = useState(0);
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+  const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = useState(!prefixElement);
+  const [prefixElementWidth, setPrefixElementWidth] = useState();
+  const [emojiShortNames, setEmojiShortNames] = useState({});
+  const [emojiRegShortNames, setEmojiRegShortNames] = useState(/./);
+  const areaProvider = useContext(AreaContext);
+  const editorRef = useRef(null);
+  const prefixElementRef = useRef(null);
+  const hasPrefixRendered = useRef(false);
+  const hasPrefixChanged = useRef(false);
+  const shouldDeleteOneMoreBackwards = useRef(false);
+  const shouldDeleteOneMoreForwards = useRef(false);
+  const valueRef = useRef(value);
+  useCursorPosition(editorRef, onCursorPositionChange, {
+    isDisabled
+  });
+  const {
+    browser
+  } = getDevice();
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  useEffect(() => {
+    void 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 = useCallback(html => {
+    if (!editorRef.current) {
+      return;
+    }
+    let newInnerHTML = convertEmojisToUnicode(html, emojiRegShortNames, emojiShortNames);
+    newInnerHTML = convertTextToHTML(newInnerHTML);
+    if (newInnerHTML !== editorRef.current.innerHTML) {
+      saveSelection(editorRef.current, {
+        shouldIgnoreEmptyTextNodes: true
+      });
+      editorRef.current.innerHTML = newInnerHTML;
+      restoreSelection(editorRef.current);
+    }
+  }, [emojiRegShortNames, emojiShortNames]);
+  const handleBeforeInput = 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 = convertEmojisToUnicode(data, emojiRegShortNames, emojiShortNames);
+      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 = 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
+      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 = convertHTMLToText(editorRef.current.innerHTML);
+    setPlainTextValue(text);
+    if (typeof onInput === 'function') {
+      onInput(event, text);
+    }
+    insertCursorAtMarker(editorRef);
+  }, [handleUpdateHTML, isDisabled, onInput]);
+  const handleKeyDown = 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) scrollCursorIntoView(editorRef.current);
+      });
+    }
+    if (event.key === 'Backspace' || event.key === 'Delete' || event.key === 'Unidentified') {
+      const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);
+      if (charCodeThatWillBeDeleted === 8203) {
+        if (event.key === 'Backspace' || event.key === 'Unidentified') {
+          shouldDeleteOneMoreBackwards.current = true;
+        } else {
+          shouldDeleteOneMoreForwards.current = true;
+        }
+      }
+    }
+  }, [isDisabled, isPopupVisible, onKeyDown]);
+  const handlePopupVisibility = useCallback(isVisible => {
+    setIsPopupVisible(isVisible);
+    if (editorRef.current && isVisible) {
+      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 = 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 = 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 = 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 = useCallback(event => {
+    if (editorRef.current) {
+      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?.getData('text');
+      if (!text) {
+        return;
+      }
+      text = 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 = 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 = useCallback(emoji => {
+    if (editorRef.current) {
+      insertTextAtCursorPosition({
+        editorElement: editorRef.current,
+        text: emoji,
+        shouldUseSavedSelection: true
+      });
+      const event = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(event);
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof onPrefixElementRemove !== 'function') {
+      return;
+    }
+    if (!hasPrefixRendered.current) {
+      return;
+    }
+    const convertedText = convertHTMLToText(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]);
+  useEffect(() => {
+    if (typeof prefixElement === 'string') {
+      hasPrefixChanged.current = true;
+    }
+  }, [prefixElement]);
+  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 = useCallback(text => {
+    if (editorRef.current) {
+      insertTextAtCursorPosition({
+        editorElement: editorRef.current,
+        text
+      });
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, []);
+  const handleReplaceText = useCallback((searchText, pasteText, options) => {
+    if (editorRef.current) {
+      replaceText({
+        editorElement: editorRef.current,
+        searchText,
+        pasteText,
+        options
+      });
+      insertPseudoMarker();
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, []);
+  const handleStartProgress = useCallback(duration => {
+    setProgressDuration(duration);
+  }, []);
+  const handleStopProgress = useCallback(() => {
+    setProgressDuration(0);
+  }, []);
+  useImperativeHandle(ref, () => ({
+    insertTextAtCursorPosition: handleInsertTextAtCursorPosition,
+    replaceText: handleReplaceText,
+    startProgress: handleStartProgress,
+    stopProgress: handleStopProgress,
+    focus: () => editorRef.current?.focus(),
+    blur: () => editorRef.current?.blur()
+  }), [handleInsertTextAtCursorPosition, handleReplaceText, handleStartProgress, handleStopProgress]);
+  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 => {
+      const element = event.target;
+      if (element.classList.contains('prevent-lose-focus') || element.parentElement?.classList.contains('prevent-lose-focus') || element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    document.body.addEventListener('mousedown', handlePreventLoseFocus);
+    return () => {
+      document.body.removeEventListener('mousedown', handlePreventLoseFocus);
+    };
+  }, []);
+  const shouldShowPlaceholder = useMemo(() => {
+    if (!isPrefixAnimationFinished) {
+      return false;
+    }
+    const isJustPrefixElement = prefixElement && convertTextToHTML(prefixElement) === editorRef.current?.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]);
+  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);
+  };
+  useEffect(() => {
+    if (editorRef.current && prefixElement) {
+      const text = convertEmojisToUnicode(prefixElement, emojiRegShortNames, emojiShortNames);
+      insertTextAtCursorPosition({
+        editorElement: editorRef.current,
+        text
+      });
+      handleUpdateHTML(prefixElement);
+      hasPrefixRendered.current = true;
+    }
+  }, [emojiRegShortNames, emojiShortNames, handleUpdateHTML, prefixElement]);
+  useEffect(() => {
+    if (prefixElementRef.current && prefixElement && convertTextToHTML(prefixElement) === editorRef.current?.innerHTML) {
+      setPrefixElementWidth(prefixElementRef.current.offsetWidth + 2);
+    } else {
+      setPrefixElementWidth(undefined);
+    }
+  }, [plainTextValue, prefixElement]);
+  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();
+    };
+  }, []);
+  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__*/React.createElement(StyledEmojiInput, {
+    $isDisabled: isDisabled,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: true
+  }, progressDuration > 0 && /*#__PURE__*/React.createElement(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__*/React.createElement(StyledEmojiInputContent, null, prefixElement && /*#__PURE__*/React.createElement(PrefixElement, {
+    key: prefixElement,
+    element: prefixElement,
+    prefixElementRef: prefixElementRef,
+    setIsPrefixAnimationFinished: setIsPrefixAnimationFinished
+  }), /*#__PURE__*/React.createElement(StyledMotionEmojiInputEditor, {
+    $browser: 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__*/React.createElement(StyledEmojiInputLabel, {
+    $maxWidth: labelWidth,
+    $offsetWidth: prefixElementWidth
+  }, placeholder), !isTouch && !shouldPreventEmojiPicker && /*#__PURE__*/React.createElement(EmojiPickerPopup, {
+    accessToken: accessToken,
+    onSelect: handlePopupSelect,
+    onPopupVisibilityChange: handlePopupVisibility,
+    personId: personId
+  })), rightElement && /*#__PURE__*/React.createElement(StyledEmojiInputRightWrapper, null, rightElement));
+});
+EmojiInput.displayName = 'EmojiInput';
+export default EmojiInput;
+//# sourceMappingURL=EmojiInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.js","names":["AreaContext","getIsTouch","getDevice","AnimatePresence","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","convertEmojisToUnicode","escapeHTML","insertTextAtCursorPosition","replaceText","getCharCodeThatWillBeDeleted","insertInvisibleCursorMarker","restoreSelection","saveSelection","insertPseudoMarker","insertCursorAtMarker","convertHTMLToText","convertTextToHTML","EmojiPickerPopup","StyledEmojiInput","StyledEmojiInputContent","StyledEmojiInputLabel","StyledEmojiInputRightWrapper","StyledMotionEmojiInputEditor","StyledMotionEmojiInputProgress","PrefixElement","loadEmojiShortList","scrollCursorIntoView","useCursorPosition","useIsomorphicLayoutEffect","window","EmojiInput","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPrefixElementRemove","onPopupVisibilityChange","personId","placeholder","popupAlignment","prefixElement","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","onCursorPositionChange","ref","isTouch","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","labelWidth","setLabelWidth","isPopupVisible","setIsPopupVisible","isPrefixAnimationFinished","setIsPrefixAnimationFinished","prefixElementWidth","setPrefixElementWidth","emojiShortNames","setEmojiShortNames","emojiRegShortNames","setEmojiRegShortNames","areaProvider","editorRef","prefixElementRef","hasPrefixRendered","hasPrefixChanged","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","browser","shouldChangeColor","then","shortNameList","regShortnames","handleUpdateHTML","html","current","newInnerHTML","innerHTML","shouldIgnoreEmptyTextNodes","handleBeforeInput","event","preventDefault","stopPropagation","data","type","nativeEvent","includes","text","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","document","execCommand","handleKeyDown","key","isPropagationStopped","requestAnimationFrame","charCodeThatWillBeDeleted","handlePopupVisibility","isVisible","handlePaste","clipboardData","getData","handleDrop","dataTransfer","handlePopupSelect","emoji","shouldUseSavedSelection","convertedText","replace","convertedPrefix","length","handleInsertTextAtCursorPosition","handleReplaceText","searchText","pasteText","options","handleStartProgress","duration","handleStopProgress","startProgress","stopProgress","focus","blur","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","isJustPrefixElement","shouldRenderPlaceholder","handleFocus","handleBlur","offsetWidth","undefined","handleResize","resizeObserver","ResizeObserver","observe","disconnect","blurElement","activeElement","createElement","$isDisabled","$shouldChangeColor","initial","animate","width","exit","opacity","transition","ease","$browser","name","minHeight","contentEditable","id","onBeforeInput","onPaste","onDrop","$shouldShowContent","$maxWidth","$offsetWidth","onSelect","displayName"],"sources":["../../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AreaContext, BrowserName, getIsTouch } from '@chayns-components/core';\nimport { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEvent as TmpKeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type FormEvent,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode, escapeHTML } from '../../utils/emoji';\nimport { insertTextAtCursorPosition, replaceText } from '../../utils/insert';\nimport {\n    getCharCodeThatWillBeDeleted,\n    insertInvisibleCursorMarker,\n    restoreSelection,\n    saveSelection,\n    type ReplaceTextOptions,\n    insertPseudoMarker,\n    insertCursorAtMarker,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputLabel,\n    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\n    StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\nimport PrefixElement from './prefix-element/PrefixElement';\nimport { loadEmojiShortList } from '../../utils/asyncEmojiData';\nimport { scrollCursorIntoView } from '../../utils/scroll';\nimport { useCursorPosition } from '../../hooks/cursor';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport type EmojiInputProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * HTML id of the input element\n     */\n    inputId?: string;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets the maximum height of the input field.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that is executed when the input field loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the cursor position is changed.\n     */\n    onCursorPositionChange?: (position: number) => void;\n    /**\n     * Function that is executed when the input field gets the focus.\n     */\n    onFocus?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the text of the input changes. In addition to the original\n     * event, the original text is returned as second parameter, in which the internally used HTML\n     * elements have been converted back to BB codes.\n     */\n    onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n    /**\n     * Function that is executed when a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed if the prefixElement is removed.\n     */\n    onPrefixElementRemove?: () => void;\n    /**\n     * Function that is executed when the visibility of the popup changes.\n     * @param {boolean} isVisible - Whether the popup is visible or not\n     */\n    onPopupVisibilityChange?: (isVisible: boolean) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * Element that is rendered before the input field but the placeholder is still visible.\n     */\n    prefixElement?: string;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the placeholder should be shown after the input has focus.\n     */\n    shouldHidePlaceholderOnFocus?: boolean;\n    /**\n     * Prevents the EmojiPickerPopup icon from being displayed\n     */\n    shouldPreventEmojiPicker?: boolean;\n    /**\n     * The plain text value of the input field. Instead of HTML elements BB codes must be used at\n     * this point. These are then converted by the input field into corresponding HTML elements.\n     */\n    value: string;\n};\n\nexport interface EmojiInputRef {\n    insertTextAtCursorPosition: (text: string) => void;\n    replaceText: (searchText: string, replaceText: string, options?: ReplaceTextOptions) => void;\n    startProgress: (durationInSeconds: number) => void;\n    stopProgress: () => void;\n    focus: () => void;\n    blur: () => void;\n}\n\nconst EmojiInput = forwardRef<EmojiInputRef, EmojiInputProps>(\n    (\n        {\n            accessToken,\n            height,\n            inputId,\n            isDisabled,\n            maxHeight = '190px',\n            onBlur,\n            onFocus,\n            onInput,\n            onKeyDown,\n            onPrefixElementRemove,\n            onPopupVisibilityChange,\n            personId,\n            placeholder,\n            popupAlignment,\n            prefixElement,\n            rightElement,\n            shouldHidePlaceholderOnFocus = false,\n            shouldPreventEmojiPicker,\n            value,\n            onCursorPositionChange,\n        },\n        ref,\n    ) => {\n        const [isTouch] = useState(getIsTouch());\n        const [plainTextValue, setPlainTextValue] = useState(value);\n        const [hasFocus, setHasFocus] = useState(false);\n        const [progressDuration, setProgressDuration] = useState(0);\n        const [labelWidth, setLabelWidth] = useState(0);\n        const [isPopupVisible, setIsPopupVisible] = useState(false);\n        const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = useState(!prefixElement);\n        const [prefixElementWidth, setPrefixElementWidth] = useState<number | undefined>();\n        const [emojiShortNames, setEmojiShortNames] = useState<{ [p: string]: string }>({});\n        const [emojiRegShortNames, setEmojiRegShortNames] = useState<RegExp>(/./);\n\n        const areaProvider = useContext(AreaContext);\n\n        const editorRef = useRef<HTMLDivElement>(null);\n        const prefixElementRef = useRef<HTMLDivElement>(null);\n        const hasPrefixRendered = useRef(false);\n        const hasPrefixChanged = useRef(false);\n        const shouldDeleteOneMoreBackwards = useRef(false);\n        const shouldDeleteOneMoreForwards = useRef(false);\n\n        const valueRef = useRef(value);\n\n        useCursorPosition(editorRef, onCursorPositionChange, { isDisabled });\n\n        const { browser } = getDevice();\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        useEffect(() => {\n            void loadEmojiShortList().then(({ shortNameList, regShortnames }) => {\n                setEmojiShortNames(shortNameList);\n                setEmojiRegShortNames(regShortnames);\n            });\n        }, []);\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(\n            (html: string) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                let newInnerHTML = convertEmojisToUnicode(\n                    html,\n                    emojiRegShortNames,\n                    emojiShortNames,\n                );\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            [emojiRegShortNames, emojiShortNames],\n        );\n\n        const handleBeforeInput = useCallback(\n            (event: FormEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    return;\n                }\n\n                const { data, type } = event.nativeEvent as InputEvent;\n\n                if (type === 'textInput' && data && data.includes('\\n')) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    const text = convertEmojisToUnicode(data, emojiRegShortNames, emojiShortNames);\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            [emojiRegShortNames, emojiShortNames, isDisabled],\n        );\n\n        /**\n         * This function handles the 'input' events of the 'contentEditable' element and also passes the\n         * respective event up accordingly if the 'onInput' property is a function.\n         */\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (isDisabled) {\n                    event.stopPropagation();\n                    event.preventDefault();\n                }\n\n                if (shouldDeleteOneMoreBackwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    // Remove content and set cursor to the right position\n                    insertInvisibleCursorMarker();\n\n                    return;\n                }\n\n                if (shouldDeleteOneMoreForwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    // noinspection JSDeprecatedSymbols\n                    document.execCommand('forwardDelete', false);\n\n                    return;\n                }\n\n                handleUpdateHTML(editorRef.current.innerHTML);\n\n                const text = convertHTMLToText(editorRef.current.innerHTML);\n\n                setPlainTextValue(text);\n\n                if (typeof onInput === 'function') {\n                    onInput(event, text);\n                }\n\n                insertCursorAtMarker(editorRef);\n            },\n            [handleUpdateHTML, isDisabled, onInput],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: TmpKeyboardEvent<HTMLDivElement>) => {\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    return;\n                }\n\n                if (event.key === 'Enter' && isPopupVisible) {\n                    event.preventDefault();\n\n                    return;\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n\n                if (event.key === 'Enter' && !event.isPropagationStopped() && editorRef.current) {\n                    event.preventDefault();\n\n                    // noinspection JSDeprecatedSymbols\n                    document.execCommand('insertLineBreak', false);\n                }\n\n                if (event.key === 'Enter') {\n                    requestAnimationFrame(() => {\n                        if (editorRef.current) scrollCursorIntoView(editorRef.current);\n                    });\n                }\n\n                if (\n                    event.key === 'Backspace' ||\n                    event.key === 'Delete' ||\n                    event.key === 'Unidentified'\n                ) {\n                    const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n                    if (charCodeThatWillBeDeleted === 8203) {\n                        if (event.key === 'Backspace' || event.key === 'Unidentified') {\n                            shouldDeleteOneMoreBackwards.current = true;\n                        } else {\n                            shouldDeleteOneMoreForwards.current = true;\n                        }\n                    }\n                }\n            },\n            [isDisabled, isPopupVisible, onKeyDown],\n        );\n\n        const handlePopupVisibility = useCallback(\n            (isVisible: boolean) => {\n                setIsPopupVisible(isVisible);\n\n                if (editorRef.current && isVisible) {\n                    saveSelection(editorRef.current);\n                }\n\n                if (typeof onPopupVisibilityChange === 'function') {\n                    onPopupVisibilityChange(isVisible);\n                }\n            },\n            [onPopupVisibilityChange],\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 document.execCommand('insertHTML')\n         */\n        const handlePaste = useCallback(\n            (event: ClipboardEvent<HTMLDivElement>) => {\n                if (editorRef.current) {\n                    event.preventDefault();\n\n                    if (isDisabled) {\n                        event.stopPropagation();\n\n                        return;\n                    }\n\n                    // This ensures, that only the copied text is inserted and not its HTML formatting.\n                    let text = event.clipboardData.getData('text/plain');\n\n                    text = convertEmojisToUnicode(text, emojiRegShortNames, emojiShortNames);\n\n                    /* This ensures, that valid HTML in the inserted text is not interpreted as such. e.g. if the user\n                       pasted the text '<b>test</b>' (not as formatted html), the <b> tags need to be escaped, to\n                       prevent it from being interpreted as html. */\n                    text = escapeHTML(text);\n\n                    // Insert an invisible control character at the end of the text to place the cursor in the correct position after insertion.\n                    if (text.includes('\\n')) {\n                        text += '\\u200C';\n                    }\n\n                    // This deprecated function is used, because it causes the inserted content to be added to the undo stack.\n                    // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.\n                    // In that case on CTRL+Z the inserted text would not be removed.\n                    document.execCommand('insertHTML', false, text);\n\n                    const newEvent = new Event('input', { bubbles: true });\n\n                    editorRef.current.dispatchEvent(newEvent);\n                }\n            },\n            [emojiRegShortNames, emojiShortNames, isDisabled],\n        );\n\n        /**\n         * This function prevents formatting from being adopted when texts are dropped. 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 document.execCommand('insertHTML')\n         */\n        const handleDrop = useCallback(\n            (event: React.DragEvent<HTMLDivElement>) => {\n                if (editorRef.current) {\n                    event.preventDefault();\n\n                    if (isDisabled) {\n                        event.stopPropagation();\n\n                        return;\n                    }\n\n                    // This ensures, that only the dropped text is inserted and not its HTML formatting.\n                    let text = event.dataTransfer?.getData('text');\n\n                    if (!text) {\n                        return;\n                    }\n\n                    text = convertEmojisToUnicode(text, emojiRegShortNames, emojiShortNames);\n\n                    /* This ensures, that valid HTML in the inserted text is not interpreted as such. e.g. if the user\n                       drops the text '<b>test</b>' (not as formatted html), the <b> tags need to be escaped, to\n                       prevent it from being interpreted as html. */\n                    text = escapeHTML(text);\n\n                    // This deprecated function is used, because it causes the inserted content to be added to the undo stack.\n                    // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.\n                    // In that case on CTRL+Z the inserted text would not be removed.\n                    document.execCommand('insertHTML', false, text);\n\n                    const newEvent = new Event('input', { bubbles: true });\n\n                    editorRef.current.dispatchEvent(newEvent);\n                }\n            },\n            [emojiRegShortNames, emojiShortNames, isDisabled],\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({\n                    editorElement: editorRef.current,\n                    text: emoji,\n                    shouldUseSavedSelection: true,\n                });\n\n                const event = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(event);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (typeof onPrefixElementRemove !== 'function') {\n                return;\n            }\n\n            if (!hasPrefixRendered.current) {\n                return;\n            }\n\n            const convertedText = convertHTMLToText(editorRef.current?.innerHTML ?? '').replace(\n                '&nbsp;',\n                ' ',\n            );\n            const convertedPrefix = prefixElement && prefixElement.replace('&nbsp;', ' ');\n\n            if (\n                (convertedPrefix &&\n                    convertedText.includes(convertedPrefix) &&\n                    convertedText.length > convertedPrefix.length) ||\n                convertedPrefix === convertedText\n            ) {\n                return;\n            }\n\n            if (hasPrefixChanged.current) {\n                hasPrefixChanged.current = false;\n\n                return;\n            }\n\n            onPrefixElementRemove();\n            hasPrefixRendered.current = false;\n        }, [onPrefixElementRemove, plainTextValue.length, prefixElement]);\n\n        useEffect(() => {\n            if (typeof prefixElement === 'string') {\n                hasPrefixChanged.current = true;\n            }\n        }, [prefixElement]);\n\n        useEffect(() => {\n            if (value !== plainTextValue) {\n                setPlainTextValue(value);\n\n                handleUpdateHTML(value);\n            }\n        }, [handleUpdateHTML, plainTextValue, value]);\n\n        // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n        // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n        // the HTML content correctly when the component is rendered for the first time.\n        useIsomorphicLayoutEffect(() => {\n            handleUpdateHTML(valueRef.current);\n        }, [handleUpdateHTML]);\n\n        const handleInsertTextAtCursorPosition = useCallback((text: string) => {\n            if (editorRef.current) {\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        const handleReplaceText = useCallback(\n            (searchText: string, pasteText: string, options?: ReplaceTextOptions) => {\n                if (editorRef.current) {\n                    replaceText({\n                        editorElement: editorRef.current,\n                        searchText,\n                        pasteText,\n                        options,\n                    });\n\n                    insertPseudoMarker();\n\n                    const newEvent = new Event('input', { bubbles: true });\n\n                    editorRef.current.dispatchEvent(newEvent);\n                }\n            },\n            [],\n        );\n\n        const handleStartProgress = useCallback((duration: number) => {\n            setProgressDuration(duration);\n        }, []);\n\n        const handleStopProgress = useCallback(() => {\n            setProgressDuration(0);\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                insertTextAtCursorPosition: handleInsertTextAtCursorPosition,\n                replaceText: handleReplaceText,\n                startProgress: handleStartProgress,\n                stopProgress: handleStopProgress,\n                focus: () => editorRef.current?.focus(),\n                blur: () => editorRef.current?.blur(),\n            }),\n            [\n                handleInsertTextAtCursorPosition,\n                handleReplaceText,\n                handleStartProgress,\n                handleStopProgress,\n            ],\n        );\n\n        useEffect(() => {\n            /**\n             * This function ensures that the input field does not lose focus when the popup is opened\n             * or an emoji is selected in it. For this purpose the corresponding elements get the class\n             * 'prevent-lose-focus'.\n             *\n             * The class can also be set to any other elements that should also not cause the input\n             * field to lose focus.\n             */\n            const handlePreventLoseFocus = (event: MouseEvent) => {\n                const element = event.target as Element;\n\n                if (\n                    element.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            };\n\n            document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n            return () => {\n                document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n            };\n        }, []);\n\n        const shouldShowPlaceholder = useMemo(() => {\n            if (!isPrefixAnimationFinished) {\n                return false;\n            }\n\n            const isJustPrefixElement =\n                prefixElement && convertTextToHTML(prefixElement) === editorRef.current?.innerHTML;\n\n            const shouldRenderPlaceholder =\n                (prefixElement && !plainTextValue) ||\n                (prefixElement ? prefixElementWidth && prefixElementWidth > 0 : true);\n\n            switch (true) {\n                case (!plainTextValue || isJustPrefixElement) &&\n                    shouldHidePlaceholderOnFocus &&\n                    !hasFocus:\n                case (!plainTextValue || isJustPrefixElement) && !shouldHidePlaceholderOnFocus:\n                    return shouldRenderPlaceholder;\n                case (!plainTextValue || isJustPrefixElement) &&\n                    shouldHidePlaceholderOnFocus &&\n                    hasFocus:\n                    return false;\n                default:\n                    return false;\n            }\n        }, [\n            isPrefixAnimationFinished,\n            hasFocus,\n            plainTextValue,\n            prefixElement,\n            shouldHidePlaceholderOnFocus,\n            prefixElementWidth,\n        ]);\n\n        useEffect(() => {\n            if (prefixElement) {\n                setIsPrefixAnimationFinished(false);\n            }\n        }, [prefixElement]);\n\n        const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onFocus === 'function' && !isDisabled) {\n                onFocus(event);\n            }\n\n            setHasFocus(true);\n        };\n\n        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onBlur === 'function' && !isDisabled) {\n                onBlur(event);\n            }\n\n            setHasFocus(false);\n        };\n\n        useEffect(() => {\n            if (editorRef.current && prefixElement) {\n                const text = convertEmojisToUnicode(\n                    prefixElement,\n                    emojiRegShortNames,\n                    emojiShortNames,\n                );\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                handleUpdateHTML(prefixElement);\n                hasPrefixRendered.current = true;\n            }\n        }, [emojiRegShortNames, emojiShortNames, handleUpdateHTML, prefixElement]);\n\n        useEffect(() => {\n            if (\n                prefixElementRef.current &&\n                prefixElement &&\n                convertTextToHTML(prefixElement) === editorRef.current?.innerHTML\n            ) {\n                setPrefixElementWidth(prefixElementRef.current.offsetWidth + 2);\n            } else {\n                setPrefixElementWidth(undefined);\n            }\n        }, [plainTextValue, prefixElement]);\n\n        useEffect(() => {\n            const handleResize = () => {\n                if (editorRef.current) {\n                    setLabelWidth(editorRef.current.offsetWidth);\n                }\n            };\n\n            const resizeObserver = new ResizeObserver(handleResize);\n\n            if (editorRef.current) {\n                resizeObserver.observe(editorRef.current);\n            }\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }, []);\n\n        useEffect(() => {\n            const blurElement = () => {\n                if (\n                    editorRef.current &&\n                    document.activeElement === editorRef.current &&\n                    isDisabled\n                ) {\n                    editorRef.current.blur();\n                }\n            };\n\n            document.addEventListener('focus', blurElement, true);\n\n            return () => {\n                document.removeEventListener('focus', blurElement, true);\n            };\n        }, [isDisabled]);\n\n        return (\n            <StyledEmojiInput $isDisabled={isDisabled} $shouldChangeColor={shouldChangeColor}>\n                <AnimatePresence initial>\n                    {progressDuration > 0 && (\n                        <StyledMotionEmojiInputProgress\n                            animate={{ width: '100%' }}\n                            exit={{ opacity: 0 }}\n                            initial={{ opacity: 1, width: '0%' }}\n                            transition={{\n                                width: {\n                                    ease: 'linear',\n                                    duration: progressDuration,\n                                },\n                                opacity: {\n                                    type: 'tween',\n                                    duration: 0.3,\n                                },\n                            }}\n                        />\n                    )}\n                </AnimatePresence>\n                <StyledEmojiInputContent>\n                    {prefixElement && (\n                        <PrefixElement\n                            key={prefixElement}\n                            element={prefixElement}\n                            prefixElementRef={prefixElementRef}\n                            setIsPrefixAnimationFinished={setIsPrefixAnimationFinished}\n                        />\n                    )}\n                    <StyledMotionEmojiInputEditor\n                        $browser={browser?.name as BrowserName}\n                        animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                        contentEditable\n                        id={inputId}\n                        onBeforeInput={handleBeforeInput}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        onInput={handleInput}\n                        onKeyDown={handleKeyDown}\n                        onPaste={handlePaste}\n                        onDrop={handleDrop}\n                        ref={editorRef}\n                        $shouldShowContent={isPrefixAnimationFinished}\n                        transition={{ type: 'tween', duration: 0.2 }}\n                    />\n\n                    {shouldShowPlaceholder && (\n                        <StyledEmojiInputLabel\n                            $maxWidth={labelWidth}\n                            $offsetWidth={prefixElementWidth}\n                        >\n                            {placeholder}\n                        </StyledEmojiInputLabel>\n                    )}\n                    {!isTouch && !shouldPreventEmojiPicker && (\n                        <EmojiPickerPopup\n                            accessToken={accessToken}\n                            onSelect={handlePopupSelect}\n                            onPopupVisibilityChange={handlePopupVisibility}\n                            personId={personId}\n                        />\n                    )}\n                </StyledEmojiInputContent>\n                {rightElement && (\n                    <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n                )}\n            </StyledEmojiInput>\n        );\n    },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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","ignoreList":[]}