@chayns-components/emoji-input 5.0.0-beta.281 → 5.0.0-beta.283
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.
- package/lib/components/emoji-input/EmojiInput.js +1 -2
- package/lib/components/emoji-input/EmojiInput.js.map +1 -1
- package/lib/components/emoji-input/EmojiInput.styles.d.ts +1 -1
- package/lib/components/emoji-input/EmojiInput.styles.js +3 -4
- package/lib/components/emoji-input/EmojiInput.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -189,10 +189,9 @@ const EmojiInput = _ref => {
|
|
|
189
189
|
}, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputContent, {
|
|
190
190
|
isRightElementGiven: !!rightElement,
|
|
191
191
|
shouldUseFullHeight: shouldUseFullHeight
|
|
192
|
-
}, /*#__PURE__*/_react.default.createElement(_EmojiInput.
|
|
192
|
+
}, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputEditor, {
|
|
193
193
|
contentEditable: !isDisabled,
|
|
194
194
|
id: inputId,
|
|
195
|
-
layout: "size",
|
|
196
195
|
onBlur: onBlur,
|
|
197
196
|
onFocus: onFocus,
|
|
198
197
|
onInput: handleInput,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","inputId","isDisabled","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldPreventEmojiPicker","shouldUseFullHeight","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","editorRef","useRef","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","preventDefault","stopPropagation","document","execCommand","text","convertHTMLToText","handleKeyDown","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","handlePreventLoseFocus","_element$parentElemen","_element$parentElemen2","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","contentEditable","id","layout","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ClipboardEvent,\n FC,\n FocusEventHandler,\n KeyboardEvent,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\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 StyledEmojiInputRightWrapper,\n StyledMotionEmojiInputEditor,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n /**\n * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n */\n accessToken?: string;\n /**\n * HTML id of the input element\n */\n inputId?: string;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the 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;\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 * Prevents the EmojiPickerPopup icon from being displayed\n */\n shouldPreventEmojiPicker?: boolean;\n /**\n * Sets the maximum height of the input field to the size of the parent element.\n */\n shouldUseFullHeight?: 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\nconst EmojiInput: FC<EmojiInputProps> = ({\n accessToken,\n inputId,\n isDisabled,\n onBlur,\n onFocus,\n onInput,\n onKeyDown,\n onPopupVisibilityChange,\n personId,\n placeholder,\n popupAlignment,\n rightElement,\n shouldPreventEmojiPicker,\n shouldUseFullHeight,\n value,\n}) => {\n const [isMobile] = useState(getIsMobile());\n const [plainTextValue, setPlainTextValue] = useState(value);\n\n const editorRef = useRef<HTMLDivElement>(null);\n\n const shouldDeleteOneMoreBackwards = useRef(false);\n const shouldDeleteOneMoreForwards = useRef(false);\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 (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 [onKeyDown]\n );\n\n /**\n * This function prevents formatting from being adopted when texts are inserted. To do this, the\n * plain text is read from the event after the default behavior has been prevented. The plain\n * text is then inserted at the correct position in the input field using the\n * 'insertTextAtCursorPosition' function.\n */\n const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n if (editorRef.current) {\n event.preventDefault();\n\n let text = event.clipboardData.getData('text/plain');\n\n text = convertEmojisToUnicode(text);\n\n insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n const newEvent = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(newEvent);\n }\n }, []);\n\n /**\n * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n * correct position in the editor element.\n *\n * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n * the event is also passed through to the top when inserting via the popup.\n */\n const handlePopupSelect = useCallback((emoji: string) => {\n if (editorRef.current) {\n insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n const event = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(event);\n }\n }, []);\n\n useEffect(() => {\n if (value !== plainTextValue) {\n setPlainTextValue(value);\n\n handleUpdateHTML(value);\n }\n }, [handleUpdateHTML, plainTextValue, value]);\n\n useEffect(() => {\n /**\n * This function ensures that the input field does not lose focus when the popup is opened\n * or an emoji is selected in it. For this purpose the corresponding elements get the class\n * 'prevent-lose-focus'.\n *\n * The class can also be set to any other elements that should also not cause the input\n * field to lose focus.\n */\n const handlePreventLoseFocus = (event: MouseEvent) => {\n const element = event.target as Element;\n\n if (\n element.classList.contains('prevent-lose-focus') ||\n element.parentElement?.classList.contains('prevent-lose-focus') ||\n element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n return () => {\n document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n };\n }, []);\n\n return (\n <StyledEmojiInput isDisabled={isDisabled} shouldUseFullHeight={shouldUseFullHeight}>\n <StyledEmojiInputContent\n isRightElementGiven={!!rightElement}\n shouldUseFullHeight={shouldUseFullHeight}\n >\n <StyledMotionEmojiInputEditor\n contentEditable={!isDisabled}\n id={inputId}\n layout=\"size\"\n onBlur={onBlur}\n onFocus={onFocus}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={placeholder}\n ref={editorRef}\n shouldUseFullHeight={shouldUseFullHeight}\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\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","inputId","isDisabled","onBlur","onFocus","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","shouldPreventEmojiPicker","shouldUseFullHeight","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","editorRef","useRef","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleInput","event","preventDefault","stopPropagation","document","execCommand","text","convertHTMLToText","handleKeyDown","shiftKey","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","useEffect","handlePreventLoseFocus","_element$parentElemen","_element$parentElemen2","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","id","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ClipboardEvent,\n FC,\n FocusEventHandler,\n KeyboardEvent,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\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 StyledEmojiInputEditor,\n StyledEmojiInputRightWrapper,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n /**\n * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n */\n accessToken?: string;\n /**\n * HTML id of the input element\n */\n inputId?: string;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the 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;\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 * Prevents the EmojiPickerPopup icon from being displayed\n */\n shouldPreventEmojiPicker?: boolean;\n /**\n * Sets the maximum height of the input field to the size of the parent element.\n */\n shouldUseFullHeight?: 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\nconst EmojiInput: FC<EmojiInputProps> = ({\n accessToken,\n inputId,\n isDisabled,\n onBlur,\n onFocus,\n onInput,\n onKeyDown,\n onPopupVisibilityChange,\n personId,\n placeholder,\n popupAlignment,\n rightElement,\n shouldPreventEmojiPicker,\n shouldUseFullHeight,\n value,\n}) => {\n const [isMobile] = useState(getIsMobile());\n const [plainTextValue, setPlainTextValue] = useState(value);\n\n const editorRef = useRef<HTMLDivElement>(null);\n\n const shouldDeleteOneMoreBackwards = useRef(false);\n const shouldDeleteOneMoreForwards = useRef(false);\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 (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 [onKeyDown]\n );\n\n /**\n * This function prevents formatting from being adopted when texts are inserted. To do this, the\n * plain text is read from the event after the default behavior has been prevented. The plain\n * text is then inserted at the correct position in the input field using the\n * 'insertTextAtCursorPosition' function.\n */\n const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n if (editorRef.current) {\n event.preventDefault();\n\n let text = event.clipboardData.getData('text/plain');\n\n text = convertEmojisToUnicode(text);\n\n insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n const newEvent = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(newEvent);\n }\n }, []);\n\n /**\n * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n * correct position in the editor element.\n *\n * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n * the event is also passed through to the top when inserting via the popup.\n */\n const handlePopupSelect = useCallback((emoji: string) => {\n if (editorRef.current) {\n insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n const event = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(event);\n }\n }, []);\n\n useEffect(() => {\n if (value !== plainTextValue) {\n setPlainTextValue(value);\n\n handleUpdateHTML(value);\n }\n }, [handleUpdateHTML, plainTextValue, value]);\n\n useEffect(() => {\n /**\n * This function ensures that the input field does not lose focus when the popup is opened\n * or an emoji is selected in it. For this purpose the corresponding elements get the class\n * 'prevent-lose-focus'.\n *\n * The class can also be set to any other elements that should also not cause the input\n * field to lose focus.\n */\n const handlePreventLoseFocus = (event: MouseEvent) => {\n const element = event.target as Element;\n\n if (\n element.classList.contains('prevent-lose-focus') ||\n element.parentElement?.classList.contains('prevent-lose-focus') ||\n element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n return () => {\n document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n };\n }, []);\n\n return (\n <StyledEmojiInput isDisabled={isDisabled} shouldUseFullHeight={shouldUseFullHeight}>\n <StyledEmojiInputContent\n isRightElementGiven={!!rightElement}\n shouldUseFullHeight={shouldUseFullHeight}\n >\n <StyledEmojiInputEditor\n contentEditable={!isDisabled}\n id={inputId}\n onBlur={onBlur}\n onFocus={onFocus}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={placeholder}\n ref={editorRef}\n shouldUseFullHeight={shouldUseFullHeight}\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\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ export declare const StyledEmojiInput: import("styled-components").StyledCompone
|
|
|
5
5
|
export declare const StyledEmojiInputContent: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
isRightElementGiven: boolean;
|
|
7
7
|
} & Pick<EmojiInputProps, "shouldUseFullHeight">, never>;
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const StyledEmojiInputEditor: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "placeholder" | "shouldUseFullHeight"> & {
|
|
9
9
|
theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
|
|
10
10
|
}, never>;
|
|
11
11
|
export declare const StyledEmojiInputRightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
var _framerMotion = require("framer-motion");
|
|
6
|
+
exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputEditor = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
|
|
8
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
8
|
var _font = require("../../utils/font");
|
|
10
9
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -76,7 +75,7 @@ const StyledEmojiInputContent = _styledComponents.default.div`
|
|
|
76
75
|
}}
|
|
77
76
|
`;
|
|
78
77
|
exports.StyledEmojiInputContent = StyledEmojiInputContent;
|
|
79
|
-
const
|
|
78
|
+
const StyledEmojiInputEditor = _styledComponents.default.div`
|
|
80
79
|
color: ${_ref7 => {
|
|
81
80
|
let {
|
|
82
81
|
theme
|
|
@@ -171,7 +170,7 @@ const StyledMotionEmojiInputEditor = (0, _styledComponents.default)(_framerMotio
|
|
|
171
170
|
scrollbar-width: thin;
|
|
172
171
|
}
|
|
173
172
|
`;
|
|
174
|
-
exports.
|
|
173
|
+
exports.StyledEmojiInputEditor = StyledEmojiInputEditor;
|
|
175
174
|
const StyledEmojiInputRightWrapper = _styledComponents.default.div`
|
|
176
175
|
align-self: stretch;
|
|
177
176
|
border-bottom-right-radius: 3px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiInput.styles.js","names":["
|
|
1
|
+
{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_font","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","_ref3","_ref4","shouldUseFullHeight","css","exports","StyledEmojiInputContent","_ref5","_ref6","isRightElementGiven","StyledEmojiInputEditor","_ref7","text","getFontFamily","_ref8","_ref9","placeholder","_ref10","_ref11","_ref12","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled' | 'shouldUseFullHeight'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n align-items: center;\n background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n border-radius: 3px;\n display: flex;\n min-height: 42px;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'initial')};\n position: relative;\n transition: opacity 0.3s ease;\n\n ${({ shouldUseFullHeight }) =>\n shouldUseFullHeight &&\n css`\n height: 100%;\n `}\n`;\n\ntype StyledEmojiInputContentProps = {\n isRightElementGiven: boolean;\n} & Pick<EmojiInputProps, 'shouldUseFullHeight'>;\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n align-items: end;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-radius: 3px;\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n padding: 8px 10px;\n\n ${({ shouldUseFullHeight }) =>\n shouldUseFullHeight &&\n css`\n height: 100%;\n `}\n\n ${({ isRightElementGiven }) =>\n isRightElementGiven &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right-width: 0;\n padding-right: 0;\n `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<\n Pick<EmojiInputProps, 'placeholder' | 'shouldUseFullHeight'>\n>;\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n flex: 1 1 auto;\n font-family: ${getFontFamily};\n overflow-y: scroll;\n word-break: break-word;\n\n ${({ shouldUseFullHeight }) =>\n shouldUseFullHeight\n ? css`\n height: 100%;\n `\n : css`\n max-height: 210px;\n `}\n\n // This fixes a bug where the field is not editable in certain browsers.\n // This is for example the case on iOS 15 or older.\n -webkit-user-modify: read-write;\n -webkit-user-select: text;\n\n &:empty:not(:focus):before {\n content: '${({ placeholder }) => placeholder}';\n color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n pointer-events: none;\n }\n\n lc_mention {\n font-weight: bold;\n\n span {\n opacity: 0.5;\n }\n }\n\n // Styles for custom scrollbar\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: rgba(\n ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n 0.15\n );\n border-radius: 20px;\n }\n\n // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n // only supported in Firefox:\n * {\n scrollbar-color: rgba(\n ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n 0.15\n )\n transparent;\n scrollbar-width: thin;\n }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n align-self: stretch;\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n flex: 0 0 auto;\n overflow: hidden;\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.283",
|
|
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": "0ec5158ec336b9fd9c7ae48815c90c7436e04585"
|
|
73
73
|
}
|