[FIX] Invalid font size for hiragana and katakana (#559)

* fix hiragana katakana from being treated as emoji * fix ime conversion problem * inputLock as state * do not directly mutate state setState outside to keep render function pure * Update src/components/Composer/index.js Co-authored-by: Rafael Ferreira <rafaelblink@gmail.com> * Update src/components/Composer/index.js Co-authored-by: Rafael Ferreira <rafaelblink@gmail.com> * Update src/components/Composer/index.js Co-authored-by: Rafael Ferreira <rafaelblink@gmail.com> * Update src/components/Composer/index.js Co-authored-by: Rafael Ferreira <rafaelblink@gmail.com> * Update src/components/Composer/index.js Co-authored-by: Rafael Ferreira <rafaelblink@gmail.com> * fixed ESLint error * improve naming 2 Co-authored-by: Rafael Ferreira <rafaelblink@gmail.com>
RocketChat · Apr 20, 2021 · ef84f8b · ef84f8b
1 parent 7fa5663
commit ef84f8b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
@@ -63,6 +63,9 @@ export class Composer extends Component {
 	}
 
 	handleInput = (onChange) => () => {
+		if (this.state.inputLock) {
+			return;
+		}
 		onChange && onChange(sanitize(this.el.innerText));
 	}
 
@@ -147,6 +150,9 @@ export class Composer extends Component {
 
 	constructor(props) {
 		super(props);
+		this.state = {
+			inputLock: false,
+		};
 		this.value = this.props.value;
 		this.handleNotifyEmojiSelect = this.handleNotifyEmojiSelect.bind(this);
 
@@ -228,7 +234,13 @@ export class Composer extends Component {
 		return 0;
 	}
 
+	handleInputLock(locked) {
+		this.setState({ inputLock: locked });
+		return 0;
+	}
+
 	render = ({ pre, post, value, placeholder, onChange, onSubmit, onUpload, className, style }) => (
+
 		<div className={createClassName(styles, 'composer', { }, [className])} style={style}>
 			{pre}
 			<div
@@ -247,6 +259,17 @@ export class Composer extends Component {
 						onClick: this.handleClick,
 					}
 				)}
+
+				onCompositionStart={() => {
+					this.handleInputLock(true);
+				}}
+
+				onCompositionEnd={() => {
+					this.handleInputLock(false);
+					onChange && onChange(this.el.innerText);
+				}}
+
+
 				className={createClassName(styles, 'composer__input')}
 			/>
 			{post}

diff --git a/src/components/Messages/MessageText/emoji.js b/src/components/Messages/MessageText/emoji.js
@@ -1,6 +1,6 @@
 import shortnameToUnicode from '../../Emoji/shortnameToUnicode';
 
-const emojiUnicode = '\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]'; // unicode emoji from https://www.regextester.com/106421
+const emojiUnicode = '\u00a9|\u00ae|[\u2000-\u3039]|[\u3100-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]'; // unicode emoji from https://www.regextester.com/106421
 
 const emojiRanges = [
 	emojiUnicode, // unicode emoji from https://www.regextester.com/106421