@chayns-components/emoji-input 5.0.0-beta.355 → 5.0.0-beta.357
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.
|
@@ -129,7 +129,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
129
129
|
if (typeof onKeyDown === 'function') {
|
|
130
130
|
onKeyDown(event);
|
|
131
131
|
}
|
|
132
|
-
if (event.key === 'Enter' && !event.
|
|
132
|
+
if (event.key === 'Enter' && !event.isPropagationStopped() && editorRef.current) {
|
|
133
133
|
event.preventDefault();
|
|
134
134
|
document.execCommand('insertLineBreak', false);
|
|
135
135
|
}
|
|
@@ -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","handleBeforeInput","event","data","type","nativeEvent","includes","preventDefault","stopPropagation","text","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","document","execCommand","convertHTMLToText","handleKeyDown","key","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","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","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onBeforeInput","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 type FormEvent,\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 const handleBeforeInput = useCallback((event: FormEvent<HTMLDivElement>) => {\n if (!editorRef.current) {\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);\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 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 onBeforeInput={handleBeforeInput}\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","handleBeforeInput","event","data","type","nativeEvent","includes","preventDefault","stopPropagation","text","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","document","execCommand","convertHTMLToText","handleKeyDown","key","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","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","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onBeforeInput","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 type FormEvent,\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 const handleBeforeInput = useCallback((event: FormEvent<HTMLDivElement>) => {\n if (!editorRef.current) {\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);\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 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 (event.key === 'Enter' && !event.isPropagationStopped() && editorRef.current) {\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 onBeforeInput={handleBeforeInput}\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/constants/regex.js
CHANGED
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.HTML_NER_REPLACE_REGEX = exports.HTML_NER_IGNORE_REGEX = exports.HTML_LC_MENTION_REGEX = exports.BB_NER_REPLACE_REGEX = exports.BB_NER_IGNORE_REGEX = exports.BB_LC_MENTION_REGEX = void 0;
|
|
7
7
|
const BB_LC_MENTION_REGEX = exports.BB_LC_MENTION_REGEX = /\[lc_mention.+?id="([^"]+?)"](.+?)\[\/lc_mention]/g;
|
|
8
8
|
const BB_NER_IGNORE_REGEX = exports.BB_NER_IGNORE_REGEX = /\[nerIgnore](.+?)\[\/nerIgnore]/g;
|
|
9
|
-
const BB_NER_REPLACE_REGEX = exports.BB_NER_REPLACE_REGEX = /\[nerReplace\s
|
|
9
|
+
const BB_NER_REPLACE_REGEX = exports.BB_NER_REPLACE_REGEX = /\[nerReplace\s*(?:prefix="(.*?)")?\s*type="(.*?)"\s*value="(.*?)"](.*?)\[\/nerReplace]/gi;
|
|
10
10
|
const HTML_LC_MENTION_REGEX = exports.HTML_LC_MENTION_REGEX = /<lc_mention.+?id="([^"]+?)">(?:<span.*?<\/span>)*(.+?)<\/lc_mention>/g;
|
|
11
11
|
const HTML_NER_IGNORE_REGEX = exports.HTML_NER_IGNORE_REGEX = /<nerIgnore>(.+?)<\/nerIgnore>/g;
|
|
12
|
-
const HTML_NER_REPLACE_REGEX = exports.HTML_NER_REPLACE_REGEX = /<nerReplace\s
|
|
12
|
+
const HTML_NER_REPLACE_REGEX = exports.HTML_NER_REPLACE_REGEX = /<nerReplace\s*(?:prefix="(.*?)")?\s*type="(.*?)"\s*value="(.*?)">(.*?)<\/nerReplace>/gi;
|
|
13
13
|
//# sourceMappingURL=regex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"regex.js","names":["BB_LC_MENTION_REGEX","exports","BB_NER_IGNORE_REGEX","BB_NER_REPLACE_REGEX","HTML_LC_MENTION_REGEX","HTML_NER_IGNORE_REGEX","HTML_NER_REPLACE_REGEX"],"sources":["../../src/constants/regex.ts"],"sourcesContent":["export const BB_LC_MENTION_REGEX = /\\[lc_mention.+?id=\"([^\"]+?)\"](.+?)\\[\\/lc_mention]/g;\nexport const BB_NER_IGNORE_REGEX = /\\[nerIgnore](.+?)\\[\\/nerIgnore]/g;\nexport const BB_NER_REPLACE_REGEX =\n /\\[nerReplace\\s
|
|
1
|
+
{"version":3,"file":"regex.js","names":["BB_LC_MENTION_REGEX","exports","BB_NER_IGNORE_REGEX","BB_NER_REPLACE_REGEX","HTML_LC_MENTION_REGEX","HTML_NER_IGNORE_REGEX","HTML_NER_REPLACE_REGEX"],"sources":["../../src/constants/regex.ts"],"sourcesContent":["export const BB_LC_MENTION_REGEX = /\\[lc_mention.+?id=\"([^\"]+?)\"](.+?)\\[\\/lc_mention]/g;\nexport const BB_NER_IGNORE_REGEX = /\\[nerIgnore](.+?)\\[\\/nerIgnore]/g;\nexport const BB_NER_REPLACE_REGEX =\n /\\[nerReplace\\s*(?:prefix=\"(.*?)\")?\\s*type=\"(.*?)\"\\s*value=\"(.*?)\"](.*?)\\[\\/nerReplace]/gi;\n\nexport const HTML_LC_MENTION_REGEX =\n /<lc_mention.+?id=\"([^\"]+?)\">(?:<span.*?<\\/span>)*(.+?)<\\/lc_mention>/g;\nexport const HTML_NER_IGNORE_REGEX = /<nerIgnore>(.+?)<\\/nerIgnore>/g;\nexport const HTML_NER_REPLACE_REGEX =\n /<nerReplace\\s*(?:prefix=\"(.*?)\")?\\s*type=\"(.*?)\"\\s*value=\"(.*?)\">(.*?)<\\/nerReplace>/gi;\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,oDAAoD;AAChF,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,kCAAkC;AAC9D,MAAMC,oBAAoB,GAAAF,OAAA,CAAAE,oBAAA,GAC7B,0FAA0F;AAEvF,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAC9B,uEAAuE;AACpE,MAAMC,qBAAqB,GAAAJ,OAAA,CAAAI,qBAAA,GAAG,gCAAgC;AAC9D,MAAMC,sBAAsB,GAAAL,OAAA,CAAAK,sBAAA,GAC/B,wFAAwF"}
|
package/lib/utils/text.js
CHANGED
|
@@ -16,13 +16,19 @@ const convertTextToHTML = text => {
|
|
|
16
16
|
let result = element.innerHTML;
|
|
17
17
|
document.body.removeChild(element);
|
|
18
18
|
result = (0, _emoji.unescapeHTML)(result);
|
|
19
|
-
result = result.replace(_regex.BB_LC_MENTION_REGEX, '<lc_mention contenteditable="false" id="$1"><span>@</span>$2</lc_mention>').replace(_regex.BB_NER_IGNORE_REGEX, '<nerIgnore contenteditable="false">$1</nerIgnore>').replace(_regex.BB_NER_REPLACE_REGEX,
|
|
19
|
+
result = result.replace(_regex.BB_LC_MENTION_REGEX, '<lc_mention contenteditable="false" id="$1"><span>@</span>$2</lc_mention>').replace(_regex.BB_NER_IGNORE_REGEX, '<nerIgnore contenteditable="false">$1</nerIgnore>').replace(_regex.BB_NER_REPLACE_REGEX, (_, prefix, type, value, entity) => {
|
|
20
|
+
const prefixAttr = prefix ? `prefix="${prefix}" ` : '';
|
|
21
|
+
return `<nerReplace contenteditable="false" ${prefixAttr}type="${type}" value="${value}">${entity}</nerReplace>`;
|
|
22
|
+
});
|
|
20
23
|
return result;
|
|
21
24
|
};
|
|
22
25
|
exports.convertTextToHTML = convertTextToHTML;
|
|
23
26
|
const convertHTMLToText = text => {
|
|
24
27
|
let result = text;
|
|
25
|
-
result = result.replace(_regex.HTML_LC_MENTION_REGEX, '[lc_mention id="$1"]$2[/lc_mention]').replace(_regex.HTML_NER_IGNORE_REGEX, '[nerIgnore]$1[/nerIgnore]').replace(_regex.HTML_NER_REPLACE_REGEX,
|
|
28
|
+
result = result.replace(_regex.HTML_LC_MENTION_REGEX, '[lc_mention id="$1"]$2[/lc_mention]').replace(_regex.HTML_NER_IGNORE_REGEX, '[nerIgnore]$1[/nerIgnore]').replace(_regex.HTML_NER_REPLACE_REGEX, (_, prefix, type, value, entity) => {
|
|
29
|
+
const prefixAttr = prefix ? `prefix="${prefix}" ` : '';
|
|
30
|
+
return `[nerReplace ${prefixAttr}type="${type}" value="${value}"]${entity}[/nerReplace]`;
|
|
31
|
+
});
|
|
26
32
|
|
|
27
33
|
// eslint-disable-next-line no-irregular-whitespace
|
|
28
34
|
result = result.replace(//g, '');
|
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","BB_NER_IGNORE_REGEX","BB_NER_REPLACE_REGEX","exports","convertHTMLToText","HTML_LC_MENTION_REGEX","HTML_NER_IGNORE_REGEX","HTML_NER_REPLACE_REGEX","escapeHTML","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import {\n BB_LC_MENTION_REGEX,\n BB_NER_IGNORE_REGEX,\n BB_NER_REPLACE_REGEX,\n HTML_LC_MENTION_REGEX,\n HTML_NER_IGNORE_REGEX,\n HTML_NER_REPLACE_REGEX,\n} 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\n .replace(\n BB_LC_MENTION_REGEX,\n '<lc_mention contenteditable=\"false\" id=\"$1\"><span>@</span>$2</lc_mention>',\n )\n .replace(BB_NER_IGNORE_REGEX, '<nerIgnore contenteditable=\"false\">$1</nerIgnore>')\n .replace(\n BB_NER_REPLACE_REGEX,\n '
|
|
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","BB_NER_IGNORE_REGEX","BB_NER_REPLACE_REGEX","_","prefix","type","value","entity","prefixAttr","exports","convertHTMLToText","HTML_LC_MENTION_REGEX","HTML_NER_IGNORE_REGEX","HTML_NER_REPLACE_REGEX","escapeHTML","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../src/utils/text.ts"],"sourcesContent":["import {\n BB_LC_MENTION_REGEX,\n BB_NER_IGNORE_REGEX,\n BB_NER_REPLACE_REGEX,\n HTML_LC_MENTION_REGEX,\n HTML_NER_IGNORE_REGEX,\n HTML_NER_REPLACE_REGEX,\n} 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\n .replace(\n BB_LC_MENTION_REGEX,\n '<lc_mention contenteditable=\"false\" id=\"$1\"><span>@</span>$2</lc_mention>',\n )\n .replace(BB_NER_IGNORE_REGEX, '<nerIgnore contenteditable=\"false\">$1</nerIgnore>')\n .replace(\n BB_NER_REPLACE_REGEX,\n (_, prefix: string | undefined, type: string, value: string, entity: string) => {\n const prefixAttr = prefix ? `prefix=\"${prefix}\" ` : '';\n\n return `<nerReplace contenteditable=\"false\" ${prefixAttr}type=\"${type}\" value=\"${value}\">${entity}</nerReplace>`;\n },\n );\n\n return result;\n};\n\nexport const convertHTMLToText = (text: string) => {\n let result = text;\n\n result = result\n .replace(HTML_LC_MENTION_REGEX, '[lc_mention id=\"$1\"]$2[/lc_mention]')\n .replace(HTML_NER_IGNORE_REGEX, '[nerIgnore]$1[/nerIgnore]')\n .replace(\n HTML_NER_REPLACE_REGEX,\n (_, prefix: string | undefined, type: string, value: string, entity: string) => {\n const prefixAttr = prefix ? `prefix=\"${prefix}\" ` : '';\n\n return `[nerReplace ${prefixAttr}type=\"${type}\" value=\"${value}\"]${entity}[/nerReplace]`;\n },\n );\n\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":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/emoji-input",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.357",
|
|
4
4
|
"description": "Input field that supports HTML elements and emojis",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "1fab680ca1cfe92a6ae02fb3344ed604b3091388"
|
|
73
73
|
}
|