@chayns-components/emoji-input 5.0.0-beta.347 → 5.0.0-beta.349

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/components/emoji-input/EmojiInput.js +1 -0
  2. package/lib/components/emoji-input/EmojiInput.js.map +1 -1
  3. package/lib/components/emoji-input/EmojiInput.styles.d.ts +0 -3
  4. package/lib/components/emoji-picker/EmojiPicker.styles.d.ts +0 -1
  5. package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.d.ts +0 -2
  6. package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.d.ts +0 -1
  7. package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.d.ts +0 -1
  8. package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.d.ts +0 -3
  9. package/lib/components/emoji-picker-popup/EmojiPickerPopup.styles.d.ts +0 -2
  10. package/lib/utils/insert.js +6 -0
  11. package/lib/utils/insert.js.map +1 -1
  12. package/lib/utils/text.js +2 -0
  13. package/lib/utils/text.js.map +1 -1
  14. package/package.json +9 -9
package/lib/components/emoji-input/EmojiInput.js CHANGED
@@ -134,6 +134,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
134
134
  event.preventDefault();
135
135
  let text = event.clipboardData.getData('text/plain');
136
136
  text = (0, _emoji.convertEmojisToUnicode)(text);
137
+ console.debug('handlePaste', text);
137
138
  (0, _insert.insertTextAtCursorPosition)({
138
139
  editorElement: editorRef.current,
139
140
  text
package/lib/components/emoji-input/EmojiInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmojiInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","EmojiInput","forwardRef","_ref","ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","editorRef","useRef","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","preventDefault","stopPropagation","document","execCommand","text","convertHTMLToText","handleKeyDown","key","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","useLayoutEffect","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","useMemo","handleFocus","handleBlur","createElement","StyledEmojiInput","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","type","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onPaste","StyledEmojiInputLabel","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ClipboardEvent,\n CSSProperties,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEvent,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\n getCharCodeThatWillBeDeleted,\n restoreSelection,\n saveSelection,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n StyledEmojiInput,\n StyledEmojiInputContent,\n StyledEmojiInputLabel,\n StyledEmojiInputRightWrapper,\n StyledMotionEmojiInputEditor,\n StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n /**\n * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n */\n accessToken?: string;\n /**\n * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n */\n height?: CSSProperties['height'];\n /**\n * HTML id of the input element\n */\n inputId?: string;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Sets the maximum height of the input field.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that is executed when the input field loses focus.\n */\n onBlur?: FocusEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the input field gets the focus.\n */\n onFocus?: FocusEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the text of the input changes. In addition to the original\n * event, the original text is returned as second parameter, in which the internally used HTML\n * elements have been converted back to BB codes.\n */\n onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n /**\n * Function that is executed when a key is pressed down.\n */\n onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => void;\n /**\n * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n */\n personId?: string;\n /**\n * Placeholder for the input field\n */\n placeholder?: string | ReactElement;\n /**\n * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n popupAlignment?: PopupAlignment;\n /**\n * Element that is rendered inside the EmojiInput on the right side.\n */\n rightElement?: ReactNode;\n /**\n * 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 type EmojiInputRef = {\n startProgress: (durationInSeconds: number) => void;\n stopProgress: () => 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 onPopupVisibilityChange,\n personId,\n placeholder,\n popupAlignment,\n rightElement,\n shouldHidePlaceholderOnFocus = true,\n shouldPreventEmojiPicker,\n value,\n },\n ref,\n ) => {\n const [isMobile] = useState(getIsMobile());\n const [plainTextValue, setPlainTextValue] = useState(value);\n const [hasFocus, setHasFocus] = useState(false);\n const [progressDuration, setProgressDuration] = useState(0);\n\n const editorRef = useRef<HTMLDivElement>(null);\n\n const shouldDeleteOneMoreBackwards = useRef(false);\n const shouldDeleteOneMoreForwards = useRef(false);\n\n const valueRef = useRef(value);\n\n /**\n * This function updates the content of the 'contentEditable' element if the new text is\n * different from the previous content. So this is only true if, for example, a text like \":-)\"\n * has been replaced to the corresponding emoji.\n *\n * When updating the HTML, the current cursor position is saved before replacing the content, so\n * that it can be set again afterward.\n */\n const handleUpdateHTML = useCallback((html: string) => {\n if (!editorRef.current) {\n return;\n }\n\n let newInnerHTML = convertEmojisToUnicode(html);\n\n newInnerHTML = convertTextToHTML(newInnerHTML);\n\n if (newInnerHTML !== editorRef.current.innerHTML) {\n saveSelection(editorRef.current, { shouldIgnoreEmptyTextNodes: true });\n\n editorRef.current.innerHTML = newInnerHTML;\n\n restoreSelection(editorRef.current);\n }\n }, []);\n\n /**\n * This function handles the 'input' events of the 'contentEditable' element and also passes the\n * respective event up accordingly if the 'onInput' property is a function.\n */\n const handleInput = useCallback(\n (event: ChangeEvent<HTMLDivElement>) => {\n if (!editorRef.current) {\n return;\n }\n\n if (shouldDeleteOneMoreBackwards.current) {\n shouldDeleteOneMoreBackwards.current = false;\n shouldDeleteOneMoreForwards.current = false;\n\n event.preventDefault();\n event.stopPropagation();\n\n document.execCommand('delete', false);\n\n return;\n }\n\n if (shouldDeleteOneMoreForwards.current) {\n shouldDeleteOneMoreBackwards.current = false;\n shouldDeleteOneMoreForwards.current = false;\n\n event.preventDefault();\n event.stopPropagation();\n\n document.execCommand('forwardDelete', false);\n\n return;\n }\n\n handleUpdateHTML(editorRef.current.innerHTML);\n\n const text = convertHTMLToText(editorRef.current.innerHTML);\n\n setPlainTextValue(text);\n\n if (typeof onInput === 'function') {\n onInput(event, text);\n }\n },\n [handleUpdateHTML, onInput],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (isDisabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (typeof onKeyDown === 'function') {\n onKeyDown(event);\n }\n\n if (\n event.key === 'Enter' &&\n !event.shiftKey &&\n !event.isPropagationStopped() &&\n editorRef.current\n ) {\n event.preventDefault();\n\n document.execCommand('insertLineBreak', false);\n }\n\n if (event.key === 'Backspace' || event.key === 'Delete') {\n const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n if (charCodeThatWillBeDeleted === 8203) {\n if (event.key === 'Backspace') {\n shouldDeleteOneMoreBackwards.current = true;\n } else {\n shouldDeleteOneMoreForwards.current = true;\n }\n }\n }\n },\n [isDisabled, onKeyDown],\n );\n\n /**\n * This function prevents formatting from being adopted when texts are inserted. To do this, the\n * plain text is read from the event after the default behavior has been prevented. The plain\n * text is then inserted at the correct position in the input field using the\n * 'insertTextAtCursorPosition' function.\n */\n const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n if (editorRef.current) {\n event.preventDefault();\n\n let text = event.clipboardData.getData('text/plain');\n\n text = convertEmojisToUnicode(text);\n\n insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n const newEvent = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(newEvent);\n }\n }, []);\n\n /**\n * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n * correct position in the editor element.\n *\n * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n * the event is also passed through to the top when inserting via the popup.\n */\n const handlePopupSelect = useCallback((emoji: string) => {\n if (editorRef.current) {\n insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n const event = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(event);\n }\n }, []);\n\n useEffect(() => {\n if (value !== plainTextValue) {\n setPlainTextValue(value);\n\n handleUpdateHTML(value);\n }\n }, [handleUpdateHTML, plainTextValue, value]);\n\n // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n // the HTML content correctly when the component is rendered for the first time.\n useLayoutEffect(() => {\n handleUpdateHTML(valueRef.current);\n }, [handleUpdateHTML]);\n\n 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 startProgress: handleStartProgress,\n stopProgress: handleStopProgress,\n }),\n [handleStartProgress, handleStopProgress],\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 (shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n return false;\n }\n\n if (!shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n return true;\n }\n\n if (!shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue) {\n return true;\n }\n\n return shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue;\n }, [hasFocus, plainTextValue, shouldHidePlaceholderOnFocus]);\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (typeof onFocus === 'function') {\n onFocus(event);\n }\n\n setHasFocus(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n\n setHasFocus(false);\n };\n\n return (\n <StyledEmojiInput isDisabled={isDisabled}>\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\n <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n <StyledMotionEmojiInputEditor\n animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n contentEditable={!isDisabled}\n id={inputId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n ref={editorRef}\n transition={{ type: 'tween', duration: 0.2 }}\n />\n {shouldShowPlaceholder && (\n <StyledEmojiInputLabel>{placeholder}</StyledEmojiInputLabel>\n )}\n {!isMobile && !shouldPreventEmojiPicker && (\n <EmojiPickerPopup\n accessToken={accessToken}\n alignment={popupAlignment}\n onSelect={handlePopupSelect}\n onPopupVisibilityChange={onPopupVisibilityChange}\n personId={personId}\n />\n )}\n </StyledEmojiInputContent>\n {rightElement && (\n <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n )}\n </StyledEmojiInput>\n );\n },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
1
+ {"version":3,"file":"EmojiInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","EmojiInput","forwardRef","_ref","ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","editorRef","useRef","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","preventDefault","stopPropagation","document","execCommand","text","convertHTMLToText","handleKeyDown","key","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","console","debug","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","useLayoutEffect","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","useMemo","handleFocus","handleBlur","createElement","StyledEmojiInput","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","type","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onPaste","StyledEmojiInputLabel","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ClipboardEvent,\n CSSProperties,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEvent,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\n getCharCodeThatWillBeDeleted,\n restoreSelection,\n saveSelection,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n StyledEmojiInput,\n StyledEmojiInputContent,\n StyledEmojiInputLabel,\n StyledEmojiInputRightWrapper,\n StyledMotionEmojiInputEditor,\n StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n /**\n * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n */\n accessToken?: string;\n /**\n * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n */\n height?: CSSProperties['height'];\n /**\n * HTML id of the input element\n */\n inputId?: string;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Sets the maximum height of the input field.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that is executed when the input field loses focus.\n */\n onBlur?: FocusEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the input field gets the focus.\n */\n onFocus?: FocusEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the text of the input changes. In addition to the original\n * event, the original text is returned as second parameter, in which the internally used HTML\n * elements have been converted back to BB codes.\n */\n onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n /**\n * Function that is executed when a key is pressed down.\n */\n onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => void;\n /**\n * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n */\n personId?: string;\n /**\n * Placeholder for the input field\n */\n placeholder?: string | ReactElement;\n /**\n * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n popupAlignment?: PopupAlignment;\n /**\n * Element that is rendered inside the EmojiInput on the right side.\n */\n rightElement?: ReactNode;\n /**\n * 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 type EmojiInputRef = {\n startProgress: (durationInSeconds: number) => void;\n stopProgress: () => 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 onPopupVisibilityChange,\n personId,\n placeholder,\n popupAlignment,\n rightElement,\n shouldHidePlaceholderOnFocus = true,\n shouldPreventEmojiPicker,\n value,\n },\n ref,\n ) => {\n const [isMobile] = useState(getIsMobile());\n const [plainTextValue, setPlainTextValue] = useState(value);\n const [hasFocus, setHasFocus] = useState(false);\n const [progressDuration, setProgressDuration] = useState(0);\n\n const editorRef = useRef<HTMLDivElement>(null);\n\n const shouldDeleteOneMoreBackwards = useRef(false);\n const shouldDeleteOneMoreForwards = useRef(false);\n\n const valueRef = useRef(value);\n\n /**\n * This function updates the content of the 'contentEditable' element if the new text is\n * different from the previous content. So this is only true if, for example, a text like \":-)\"\n * has been replaced to the corresponding emoji.\n *\n * When updating the HTML, the current cursor position is saved before replacing the content, so\n * that it can be set again afterward.\n */\n const handleUpdateHTML = useCallback((html: string) => {\n if (!editorRef.current) {\n return;\n }\n\n let newInnerHTML = convertEmojisToUnicode(html);\n\n newInnerHTML = convertTextToHTML(newInnerHTML);\n\n if (newInnerHTML !== editorRef.current.innerHTML) {\n saveSelection(editorRef.current, { shouldIgnoreEmptyTextNodes: true });\n\n editorRef.current.innerHTML = newInnerHTML;\n\n restoreSelection(editorRef.current);\n }\n }, []);\n\n /**\n * This function handles the 'input' events of the 'contentEditable' element and also passes the\n * respective event up accordingly if the 'onInput' property is a function.\n */\n const handleInput = useCallback(\n (event: ChangeEvent<HTMLDivElement>) => {\n if (!editorRef.current) {\n return;\n }\n\n if (shouldDeleteOneMoreBackwards.current) {\n shouldDeleteOneMoreBackwards.current = false;\n shouldDeleteOneMoreForwards.current = false;\n\n event.preventDefault();\n event.stopPropagation();\n\n document.execCommand('delete', false);\n\n return;\n }\n\n if (shouldDeleteOneMoreForwards.current) {\n shouldDeleteOneMoreBackwards.current = false;\n shouldDeleteOneMoreForwards.current = false;\n\n event.preventDefault();\n event.stopPropagation();\n\n document.execCommand('forwardDelete', false);\n\n return;\n }\n\n handleUpdateHTML(editorRef.current.innerHTML);\n\n const text = convertHTMLToText(editorRef.current.innerHTML);\n\n setPlainTextValue(text);\n\n if (typeof onInput === 'function') {\n onInput(event, text);\n }\n },\n [handleUpdateHTML, onInput],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (isDisabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (typeof onKeyDown === 'function') {\n onKeyDown(event);\n }\n\n if (\n event.key === 'Enter' &&\n !event.shiftKey &&\n !event.isPropagationStopped() &&\n editorRef.current\n ) {\n event.preventDefault();\n\n document.execCommand('insertLineBreak', false);\n }\n\n if (event.key === 'Backspace' || event.key === 'Delete') {\n const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n if (charCodeThatWillBeDeleted === 8203) {\n if (event.key === 'Backspace') {\n shouldDeleteOneMoreBackwards.current = true;\n } else {\n shouldDeleteOneMoreForwards.current = true;\n }\n }\n }\n },\n [isDisabled, 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 console.debug('handlePaste', text);\n\n insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n const newEvent = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(newEvent);\n }\n }, []);\n\n /**\n * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n * correct position in the editor element.\n *\n * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n * the event is also passed through to the top when inserting via the popup.\n */\n const handlePopupSelect = useCallback((emoji: string) => {\n if (editorRef.current) {\n insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n const event = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(event);\n }\n }, []);\n\n useEffect(() => {\n if (value !== plainTextValue) {\n setPlainTextValue(value);\n\n handleUpdateHTML(value);\n }\n }, [handleUpdateHTML, plainTextValue, value]);\n\n // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n // the HTML content correctly when the component is rendered for the first time.\n useLayoutEffect(() => {\n handleUpdateHTML(valueRef.current);\n }, [handleUpdateHTML]);\n\n 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 startProgress: handleStartProgress,\n stopProgress: handleStopProgress,\n }),\n [handleStartProgress, handleStopProgress],\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 (shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n return false;\n }\n\n if (!shouldHidePlaceholderOnFocus && hasFocus && !plainTextValue) {\n return true;\n }\n\n if (!shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue) {\n return true;\n }\n\n return shouldHidePlaceholderOnFocus && !hasFocus && !plainTextValue;\n }, [hasFocus, plainTextValue, shouldHidePlaceholderOnFocus]);\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (typeof onFocus === 'function') {\n onFocus(event);\n }\n\n setHasFocus(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n\n setHasFocus(false);\n };\n\n return (\n <StyledEmojiInput isDisabled={isDisabled}>\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\n <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n <StyledMotionEmojiInputEditor\n animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n contentEditable={!isDisabled}\n id={inputId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n ref={editorRef}\n transition={{ type: 'tween', duration: 0.2 }}\n />\n {shouldShowPlaceholder && (\n <StyledEmojiInputLabel>{placeholder}</StyledEmojiInputLabel>\n )}\n {!isMobile && !shouldPreventEmojiPicker && (\n <EmojiPickerPopup\n accessToken={accessToken}\n alignment={popupAlignment}\n onSelect={handlePopupSelect}\n onPopupVisibilityChange={onPopupVisibilityChange}\n personId={personId}\n />\n )}\n </StyledEmojiInputContent>\n {rightElement && (\n <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n )}\n </StyledEmojiInput>\n );\n },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
package/lib/components/emoji-input/EmojiInput.styles.d.ts CHANGED
@@ -22,7 +22,6 @@ export declare const StyledMotionEmojiInputProgress: import("styled-components")
22
22
  id?: string | undefined;
23
23
  lang?: string | undefined;
24
24
  nonce?: string | undefined;
25
- placeholder?: string | undefined;
26
25
  spellCheck?: (boolean | "true" | "false") | undefined;
27
26
  tabIndex?: number | undefined;
28
27
  translate?: "yes" | "no" | undefined;
@@ -292,7 +291,6 @@ export declare const StyledMotionEmojiInputEditor: import("styled-components").I
292
291
  id?: string | undefined;
293
292
  lang?: string | undefined;
294
293
  nonce?: string | undefined;
295
- placeholder?: string | undefined;
296
294
  spellCheck?: (boolean | "true" | "false") | undefined;
297
295
  tabIndex?: number | undefined;
298
296
  translate?: "yes" | "no" | undefined;
@@ -558,7 +556,6 @@ export declare const StyledEmojiInputRightWrapper: import("styled-components").I
558
556
  id?: string | undefined;
559
557
  lang?: string | undefined;
560
558
  nonce?: string | undefined;
561
- placeholder?: string | undefined;
562
559
  slot?: string | undefined;
563
560
  spellCheck?: (boolean | "true" | "false") | undefined;
564
561
  style?: import("react").CSSProperties | undefined;
package/lib/components/emoji-picker/EmojiPicker.styles.d.ts CHANGED
@@ -22,7 +22,6 @@ export declare const StyledEmojiPicker: import("styled-components").IStyledCompo
22
22
  id?: string | undefined;
23
23
  lang?: string | undefined;
24
24
  nonce?: string | undefined;
25
- placeholder?: string | undefined;
26
25
  slot?: string | undefined;
27
26
  spellCheck?: (boolean | "true" | "false") | undefined;
28
27
  style?: import("react").CSSProperties | undefined;
package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.d.ts CHANGED
@@ -18,7 +18,6 @@ export declare const StyledEmojiPickerCategories: import("styled-components").IS
18
18
  id?: string | undefined;
19
19
  lang?: string | undefined;
20
20
  nonce?: string | undefined;
21
- placeholder?: string | undefined;
22
21
  slot?: string | undefined;
23
22
  spellCheck?: (boolean | "true" | "false") | undefined;
24
23
  style?: import("react").CSSProperties | undefined;
@@ -290,7 +289,6 @@ export declare const StyledMotionEmojiPickerCategory: import("styled-components"
290
289
  id?: string | undefined;
291
290
  lang?: string | undefined;
292
291
  nonce?: string | undefined;
293
- placeholder?: string | undefined;
294
292
  spellCheck?: (boolean | "true" | "false") | undefined;
295
293
  tabIndex?: number | undefined;
296
294
  translate?: "yes" | "no" | undefined;
package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.d.ts CHANGED
@@ -24,7 +24,6 @@ export declare const StyledEmojiPickerEmojisNoContentInfo: import("styled-compon
24
24
  id?: string | undefined;
25
25
  lang?: string | undefined;
26
26
  nonce?: string | undefined;
27
- placeholder?: string | undefined;
28
27
  slot?: string | undefined;
29
28
  spellCheck?: (boolean | "true" | "false") | undefined;
30
29
  style?: import("react").CSSProperties | undefined;
package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.d.ts CHANGED
@@ -18,7 +18,6 @@ export declare const StyledEmoji: import("styled-components").IStyledComponent<"
18
18
  id?: string | undefined;
19
19
  lang?: string | undefined;
20
20
  nonce?: string | undefined;
21
- placeholder?: string | undefined;
22
21
  slot?: string | undefined;
23
22
  spellCheck?: (boolean | "true" | "false") | undefined;
24
23
  style?: import("react").CSSProperties | undefined;
package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.d.ts CHANGED
@@ -20,7 +20,6 @@ export declare const StyledMotionSkinTonePopup: import("styled-components").ISty
20
20
  id?: string | undefined;
21
21
  lang?: string | undefined;
22
22
  nonce?: string | undefined;
23
- placeholder?: string | undefined;
24
23
  spellCheck?: (boolean | "true" | "false") | undefined;
25
24
  tabIndex?: number | undefined;
26
25
  translate?: "yes" | "no" | undefined;
@@ -292,7 +291,6 @@ export declare const StyledSkinTonePopupContentEmoji: import("styled-components"
292
291
  id?: string | undefined;
293
292
  lang?: string | undefined;
294
293
  nonce?: string | undefined;
295
- placeholder?: string | undefined;
296
294
  slot?: string | undefined;
297
295
  spellCheck?: (boolean | "true" | "false") | undefined;
298
296
  style?: import("react").CSSProperties | undefined;
@@ -564,7 +562,6 @@ export declare const StyledSkinTonePopupOverlay: import("styled-components").ISt
564
562
  id?: string | undefined;
565
563
  lang?: string | undefined;
566
564
  nonce?: string | undefined;
567
- placeholder?: string | undefined;
568
565
  slot?: string | undefined;
569
566
  spellCheck?: (boolean | "true" | "false") | undefined;
570
567
  style?: import("react").CSSProperties | undefined;
package/lib/components/emoji-picker-popup/EmojiPickerPopup.styles.d.ts CHANGED
@@ -20,7 +20,6 @@ export declare const StyledEmojiPickerPopup: import("styled-components").IStyled
20
20
  id?: string | undefined;
21
21
  lang?: string | undefined;
22
22
  nonce?: string | undefined;
23
- placeholder?: string | undefined;
24
23
  slot?: string | undefined;
25
24
  spellCheck?: (boolean | "true" | "false") | undefined;
26
25
  style?: import("react").CSSProperties | undefined;
@@ -295,7 +294,6 @@ export declare const StyledMotionEmojiPickerPopupContent: import("styled-compone
295
294
  id?: string | undefined;
296
295
  lang?: string | undefined;
297
296
  nonce?: string | undefined;
298
- placeholder?: string | undefined;
299
297
  spellCheck?: (boolean | "true" | "false") | undefined;
300
298
  tabIndex?: number | undefined;
301
299
  translate?: "yes" | "no" | undefined;
package/lib/utils/insert.js CHANGED
@@ -30,6 +30,12 @@ const insertTextAtCursorPosition = _ref => {
30
30
  const parts = text.split(/\r\n|\r|\n/);
31
31
  const firstPart = parts.shift();
32
32
  const textNodes = parts.map(part => document.createTextNode(part));
33
+ console.debug('insertTextAtCursorPosition', {
34
+ firstPart,
35
+ textNodes,
36
+ range,
37
+ selection
38
+ });
33
39
  range.deleteContents();
34
40
  if (firstPart) {
35
41
  if (selection.anchorNode.nodeType === Node.TEXT_NODE) {
package/lib/utils/insert.js.map CHANGED
@@ -1 +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","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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"}
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","console","debug","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 console.debug('insertTextAtCursorPosition', {\n firstPart,\n textNodes,\n range,\n selection,\n });\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/text.js CHANGED
@@ -22,6 +22,7 @@ const convertTextToHTML = text => {
22
22
  exports.convertTextToHTML = convertTextToHTML;
23
23
  const convertHTMLToText = text => {
24
24
  let result = text;
25
+ console.debug('convertHTMLToText 1', text);
25
26
  result = result.replace(_regex.HTML_LC_MENTION_REGEX, '[lc_mention id="$1"]$2[/lc_mention]');
26
27
  // eslint-disable-next-line no-irregular-whitespace
27
28
  result = result.replace(/​/g, '');
@@ -34,6 +35,7 @@ const convertHTMLToText = text => {
34
35
  document.body.appendChild(element);
35
36
  result = element.innerText;
36
37
  document.body.removeChild(element);
38
+ console.debug('convertHTMLToText 2', result);
37
39
  return result;
38
40
  };
39
41
  exports.convertHTMLToText = convertHTMLToText;
package/lib/utils/text.js.map CHANGED
@@ -1 +1 @@
1
- {"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","escapeHTML","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import { BB_LC_MENTION_REGEX, HTML_LC_MENTION_REGEX } from '../constants/regex';\nimport { escapeHTML, 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 // eslint-disable-next-line no-irregular-whitespace\n result = result.replace(/​/g, '');\n\n result = escapeHTML(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\nexport const getElementTextLength = (element: Element) => {\n let textLength = 0;\n\n try {\n textLength = convertHTMLToText(element.outerHTML).length;\n } catch (e) {\n // Do nothing\n }\n\n return textLength;\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;EACrF;EACAR,MAAM,GAAGA,MAAM,CAACI,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;EAEjCJ,MAAM,GAAG,IAAAS,iBAAU,EAACT,MAAM,CAAC;EAE3B,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;AAEK,MAAMG,oBAAoB,GAAIpB,OAAgB,IAAK;EACtD,IAAIqB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGJ,iBAAiB,CAACjB,OAAO,CAACsB,SAAS,CAAC,CAACC,MAAM;EAC5D,CAAC,CAAC,OAAOC,CAAC,EAAE;IACR;EAAA;EAGJ,OAAOH,UAAU;AACrB,CAAC;AAACL,OAAA,CAAAI,oBAAA,GAAAA,oBAAA"}
1
+ {"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","console","debug","HTML_LC_MENTION_REGEX","escapeHTML","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import { BB_LC_MENTION_REGEX, HTML_LC_MENTION_REGEX } from '../constants/regex';\nimport { escapeHTML, 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 console.debug('convertHTMLToText 1', text);\n\n result = result.replace(HTML_LC_MENTION_REGEX, '[lc_mention id=\"$1\"]$2[/lc_mention]');\n // eslint-disable-next-line no-irregular-whitespace\n result = result.replace(/​/g, '');\n\n result = escapeHTML(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 console.debug('convertHTMLToText 2', result);\n\n return result;\n};\n\nexport const getElementTextLength = (element: Element) => {\n let textLength = 0;\n\n try {\n textLength = convertHTMLToText(element.outerHTML).length;\n } catch (e) {\n // Do nothing\n }\n\n return textLength;\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;EAEjBmB,OAAO,CAACC,KAAK,CAAC,qBAAqB,EAAEpB,IAAI,CAAC;EAE1CW,MAAM,GAAGA,MAAM,CAACI,OAAO,CAACM,4BAAqB,EAAE,qCAAqC,CAAC;EACrF;EACAV,MAAM,GAAGA,MAAM,CAACI,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;EAEjCJ,MAAM,GAAG,IAAAW,iBAAU,EAACX,MAAM,CAAC;EAE3B,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;EAElCkB,OAAO,CAACC,KAAK,CAAC,qBAAqB,EAAET,MAAM,CAAC;EAE5C,OAAOA,MAAM;AACjB,CAAC;AAACM,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAEK,MAAMK,oBAAoB,GAAItB,OAAgB,IAAK;EACtD,IAAIuB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGN,iBAAiB,CAACjB,OAAO,CAACwB,SAAS,CAAC,CAACC,MAAM;EAC5D,CAAC,CAAC,OAAOC,CAAC,EAAE;IACR;EAAA;EAGJ,OAAOH,UAAU;AACrB,CAAC;AAACP,OAAA,CAAAM,oBAAA,GAAAA,oBAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/emoji-input",
3
- "version": "5.0.0-beta.347",
3
+ "version": "5.0.0-beta.349",
4
4
  "description": "Input field that supports HTML elements and emojis",
5
5
  "keywords": [
6
6
  "chayns",
@@ -37,27 +37,27 @@
37
37
  },
38
38
  "devDependencies": {
39
39
  "@babel/cli": "^7.23.4",
40
- "@babel/core": "^7.23.3",
41
- "@babel/preset-env": "^7.23.3",
40
+ "@babel/core": "^7.23.6",
41
+ "@babel/preset-env": "^7.23.6",
42
42
  "@babel/preset-react": "^7.23.3",
43
43
  "@babel/preset-typescript": "^7.23.3",
44
- "@types/react": "^18.2.38",
44
+ "@types/react": "^18.2.45",
45
45
  "@types/react-dom": "^18.2.17",
46
- "@types/styled-components": "^5.1.32",
46
+ "@types/styled-components": "^5.1.34",
47
47
  "@types/uuid": "^9.0.7",
48
48
  "babel-loader": "^9.1.3",
49
49
  "lerna": "^7.4.2",
50
50
  "react": "^18.2.0",
51
51
  "react-dom": "^18.2.0",
52
52
  "styled-components": "^6.1.1",
53
- "typescript": "^5.3.2"
53
+ "typescript": "^5.3.3"
54
54
  },
55
55
  "dependencies": {
56
- "@chayns-components/core": "^5.0.0-beta.347",
56
+ "@chayns-components/core": "^5.0.0-beta.348",
57
57
  "@chayns/colors": "^2.0.0",
58
58
  "clsx": "^2.0.0",
59
59
  "emojilib": "^3.0.11",
60
- "framer-motion": "^10.16.5",
60
+ "framer-motion": "^10.16.16",
61
61
  "unicode-emoji-json": "^0.5.0",
62
62
  "uuid": "^9.0.1"
63
63
  },
@@ -69,5 +69,5 @@
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "818fcc27717bc04ee628d417eb221d7a5d736496"
72
+ "gitHead": "b67a7f40385f8c2db79dd3ef0ca0f216530d1e54"
73
73
  }