From d3a1406cae05194665f3bc1eff8e537fef11951c Mon Sep 17 00:00:00 2001 From: ofer morag Date: Sun, 17 May 2020 18:56:31 +0300 Subject: [PATCH 01/12] Fixed: writing in RTL causes text to appear twice In addition, added the option to show mentions list on the bottom of the editor removed doubled CSS property (appologize for mixing these) --- src/Editor/EditorStyles.js | 4 +- src/Editor/index.js | 104 ++++++++++++++++++++----------------- 2 files changed, 58 insertions(+), 50 deletions(-) diff --git a/src/Editor/EditorStyles.js b/src/Editor/EditorStyles.js index e1367d7..8bdd802 100644 --- a/src/Editor/EditorStyles.js +++ b/src/Editor/EditorStyles.js @@ -21,9 +21,9 @@ export default StyleSheet.create({ minHeight: 40, position: "absolute", top: 0, - color: "transparent", alignSelf: "stretch", - width: "100%" + width: "100%", + height: '100%' // added for android }, formmatedTextWrapper: { minHeight: 40, diff --git a/src/Editor/index.js b/src/Editor/index.js index ef31dea..79ec08f 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -26,7 +26,8 @@ export class Editor extends React.Component { onHideMentions: PropTypes.func, editorStyles: PropTypes.object, placeholder: PropTypes.string, - renderMentionList: PropTypes.func + renderMentionList: PropTypes.func, + placeMentionListOnBottom: PropTypes.bool, }; constructor(props) { @@ -68,22 +69,31 @@ export class Editor extends React.Component { } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.clearInput !== prevState.clearInput) { - return { clearInput: nextProps.clearInput }; + return { clearInput: nextProps.clearInput, placeholder: nextProps.placeholder }; } if (nextProps.showMentions && !prevState.showMentions) { const newInputText = `${prevState.inputText}${prevState.trigger}`; return { inputText: newInputText, - showMentions: nextProps.showMentions + showMentions: nextProps.showMentions, + placeholder: nextProps.placeholder }; } if (!nextProps.showMentions) { return { - showMentions: nextProps.showMentions + showMentions: nextProps.showMentions, + placeholder: nextProps.placeholder }; } + + if (nextProps.placeholder !== prevState.placeholder) { + return { + placeholder: nextProps.placeholder + }; + } + return null; } @@ -128,7 +138,10 @@ export class Editor extends React.Component { this.setState({ isTrackingStarted: false }); - this.props.onHideMentions(); + if (this.props.onHideMentions) { + this.props.onHideMentions(); + } + } updateSuggestions(lastKeyword) { @@ -305,11 +318,16 @@ export class Editor extends React.Component { this.setState({ selection: newSelc }); }; - formatMentionNode = (txt, key) => ( - - {txt} - - ); + formatMentionNode = (txt, key) => { + const { props } = this; + const { editorStyles = {} } = props; + + return( + + {txt} + + ) + }; formatText(inputText) { /** @@ -512,20 +530,27 @@ export class Editor extends React.Component { editorStyles }; + const mentionListComponent = ( + props.renderMentionList ? ( + props.renderMentionList(mentionListProps) + ) : ( + + ) + ) + + const selection = (Platform.OS === 'ios' || this.state.inputText.length >= this.state.selection.start) ? + this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; + return ( - {props.renderMentionList ? ( - props.renderMentionList(mentionListProps) - ) : ( - - )} + { !props.placeMentionListOnBottom && mentionListComponent } { this.scroll = scroll; @@ -535,50 +560,33 @@ export class Editor extends React.Component { }} style={[styles.editorContainer, editorStyles.editorContainer]} > - - - {state.formattedText !== "" ? ( - - {state.formattedText} - - ) : ( - - {state.placeholder} - - )} - + props.onRef && props.onRef(input)} style={[styles.input, editorStyles.input]} multiline autoFocus numberOfLines={100} name={"message"} - value={state.inputText} + value={null} onBlur={props.toggleEditor} onChangeText={this.onChange} - selection={this.state.selection} + selection={selection} selectionColor={"#000"} onSelectionChange={this.handleSelectionChange} placeholder={state.placeholder} + placeholderTextColor = { props.placeholderTextColor} onContentSizeChange={this.onContentSizeChange} scrollEnabled={false} - /> + inputAccessoryViewID={props.inputAccessoryViewID} + > + { state.formattedText } + + { props.placeMentionListOnBottom && mentionListComponent } ); } From a60fa944cf87914eacf284d85489054e363f0a11 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Sun, 30 Aug 2020 10:47:35 +0300 Subject: [PATCH 02/12] Fixed text input issue on iOS 13 --- src/Editor/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index 79ec08f..cecdab1 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -543,10 +543,14 @@ export class Editor extends React.Component { /> ) ) - - const selection = (Platform.OS === 'ios' || this.state.inputText.length >= this.state.selection.start) ? - this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; - + let selection; + if (Platform.OS === 'ios') { + selection = (this.state.inputText.length >= this.state.selection.start) ? + this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; + } else { + selection = { start: this.state.inputText.length, end: this.state.inputText.length }; + } + return ( From 4b1321bc26a1c750c3dded60863d76dc78d60123 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Sun, 15 Jan 2023 09:45:09 +0200 Subject: [PATCH 03/12] added mention props to onChange callback --- src/Editor/index.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index cecdab1..d921a29 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -379,9 +379,21 @@ export class Editor extends React.Component { } sendMessageToFooter(text) { + const { props, state } = this; + const { editorStyles = {} } = props; + + const mentionListProps = { + list: props.list, + keyword: state.keyword, + isTrackingStarted: state.isTrackingStarted, + onSuggestionTap: this.onSuggestionTap.bind(this), + editorStyles + }; + this.props.onChange({ displayText: text, - text: this.formatTextWithMentions(text) + text: this.formatTextWithMentions(text), + mentionProps: mentionListProps }); } @@ -543,13 +555,6 @@ export class Editor extends React.Component { /> ) ) - let selection; - if (Platform.OS === 'ios') { - selection = (this.state.inputText.length >= this.state.selection.start) ? - this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; - } else { - selection = { start: this.state.inputText.length, end: this.state.inputText.length }; - } return ( @@ -576,7 +581,6 @@ export class Editor extends React.Component { value={null} onBlur={props.toggleEditor} onChangeText={this.onChange} - selection={selection} selectionColor={"#000"} onSelectionChange={this.handleSelectionChange} placeholder={state.placeholder} From 9be1862aab40256096e5b4ce16d42fe3f27ea83b Mon Sep 17 00:00:00 2001 From: ofer morag Date: Mon, 16 Jan 2023 10:54:39 +0200 Subject: [PATCH 04/12] More work on Editor --- src/Editor/index.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index d921a29..670da88 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -144,10 +144,22 @@ export class Editor extends React.Component { } - updateSuggestions(lastKeyword) { + updateSuggestions(lastKeyword ,list) { + const { props, state } = this; + const { editorStyles = {} } = props; + this.setState({ keyword: lastKeyword }); + const mentionListProps = { + list: list || props.list, + keyword: lastKeyword, + isTrackingStarted: state.isTrackingStarted, + onSuggestionTap: this.onSuggestionTap.bind(this), + editorStyles + }; + + this.props.onMentionListPropChange && this.props.onMentionListPropChange(mentionListProps) } resetTextbox() { @@ -292,6 +304,7 @@ export class Editor extends React.Component { }); this.stopTracking(); this.sendMessageToFooter(text); + this.updateSuggestions('' , []) }; handleSelectionChange = ({ nativeEvent: { selection } }) => { @@ -382,18 +395,9 @@ export class Editor extends React.Component { const { props, state } = this; const { editorStyles = {} } = props; - const mentionListProps = { - list: props.list, - keyword: state.keyword, - isTrackingStarted: state.isTrackingStarted, - onSuggestionTap: this.onSuggestionTap.bind(this), - editorStyles - }; - this.props.onChange({ displayText: text, text: this.formatTextWithMentions(text), - mentionProps: mentionListProps }); } From 11c90574573c6d207c02e0d98c3c77425bf7a227 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Mon, 16 Jan 2023 22:36:47 +0200 Subject: [PATCH 05/12] fix height issues --- src/Editor/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index 670da88..1d37afd 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -60,7 +60,7 @@ export class Editor extends React.Component { }, menIndex: 0, showMentions: false, - editorHeight: 72, + editorHeight: this.props.initialEditorHeight ?? 72, scrollContentInset: { top: 0, bottom: 0, left: 0, right: 0 }, placeholder: props.placeholder || "Type something..." }; @@ -516,6 +516,7 @@ export class Editor extends React.Component { * the size of text in the input. */ if (evt) { + // const iosTextHeight = 20.5 const androidTextHeight = 20.5; // const textHeight = Platform.OS === 'ios' ? iosTextHeight : androidTextHeight @@ -525,7 +526,7 @@ export class Editor extends React.Component { ? evt.nativeEvent.contentSize.height : evt.nativeEvent.contentSize.height - androidTextHeight; let editorHeight = 40; - editorHeight = editorHeight + height; + editorHeight = Math.max(this.props.initialEditorHeight, editorHeight + height); this.setState({ editorHeight }); From 938681d5082fa24898cb1d406bf0a4681581e03a Mon Sep 17 00:00:00 2001 From: ofer morag Date: Mon, 16 Jan 2023 23:40:26 +0200 Subject: [PATCH 06/12] fixed height issue --- src/Editor/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index 1d37afd..e2bbd69 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -525,8 +525,8 @@ export class Editor extends React.Component { Platform.OS === "ios" ? evt.nativeEvent.contentSize.height : evt.nativeEvent.contentSize.height - androidTextHeight; - let editorHeight = 40; - editorHeight = Math.max(this.props.initialEditorHeight, editorHeight + height); + let editorHeight = 20; + editorHeight = Math.max(this.props.initialEditorHeight, editorHeight + height) - 4; this.setState({ editorHeight }); @@ -574,7 +574,7 @@ export class Editor extends React.Component { }} style={[styles.editorContainer, editorStyles.editorContainer]} > - + props.onRef && props.onRef(input)} From b774c06040d7695a28d8e094a1826e7db74916c6 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Sun, 22 Jan 2023 10:07:34 +0200 Subject: [PATCH 07/12] Bug fix --- src/Editor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index e2bbd69..242f5d4 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -526,7 +526,7 @@ export class Editor extends React.Component { ? evt.nativeEvent.contentSize.height : evt.nativeEvent.contentSize.height - androidTextHeight; let editorHeight = 20; - editorHeight = Math.max(this.props.initialEditorHeight, editorHeight + height) - 4; + editorHeight = Math.max(this.state.editorHeight, editorHeight + height) - 4; this.setState({ editorHeight }); From 6d23a267943c0562e741a5a7e4158cbc95a7c0d9 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Mon, 23 Jan 2023 23:16:53 +0200 Subject: [PATCH 08/12] fix mention editor height issue --- src/Editor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index 242f5d4..39a0d11 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -526,7 +526,7 @@ export class Editor extends React.Component { ? evt.nativeEvent.contentSize.height : evt.nativeEvent.contentSize.height - androidTextHeight; let editorHeight = 20; - editorHeight = Math.max(this.state.editorHeight, editorHeight + height) - 4; + editorHeight = editorHeight + height; this.setState({ editorHeight }); From f031e06c414eea76082ec2b643bc001396fbccd1 Mon Sep 17 00:00:00 2001 From: Ofer Morag Date: Sun, 4 Jun 2023 13:29:30 +0300 Subject: [PATCH 09/12] Update index.js --- src/Editor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index 39a0d11..cb15c08 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -525,7 +525,7 @@ export class Editor extends React.Component { Platform.OS === "ios" ? evt.nativeEvent.contentSize.height : evt.nativeEvent.contentSize.height - androidTextHeight; - let editorHeight = 20; + let editorHeight = 50; editorHeight = editorHeight + height; this.setState({ editorHeight From f67ed38c9489ecda444b2c535464945af3a43c17 Mon Sep 17 00:00:00 2001 From: Ofer Morag Date: Sun, 4 Jun 2023 14:51:03 +0300 Subject: [PATCH 10/12] Update index.js --- src/Editor/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index cb15c08..84f89bf 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -28,6 +28,8 @@ export class Editor extends React.Component { placeholder: PropTypes.string, renderMentionList: PropTypes.func, placeMentionListOnBottom: PropTypes.bool, + inputExtraHeight: PropTypes.number, + autoFocus: PropTypes.bool }; constructor(props) { @@ -525,7 +527,7 @@ export class Editor extends React.Component { Platform.OS === "ios" ? evt.nativeEvent.contentSize.height : evt.nativeEvent.contentSize.height - androidTextHeight; - let editorHeight = 50; + let editorHeight = 20 + (this.props.inputExtraHeight ?? 0); editorHeight = editorHeight + height; this.setState({ editorHeight @@ -579,8 +581,8 @@ export class Editor extends React.Component { onLayout={props.onLayout} ref={input => props.onRef && props.onRef(input)} style={[styles.input, editorStyles.input]} - multiline - autoFocus + multiline = { true } + autoFocus = { this.props.autoFocus } numberOfLines={100} name={"message"} value={null} From 77bc5f053dd54bae9603e840e3bfa9e6ebc79150 Mon Sep 17 00:00:00 2001 From: Ofer Morag Date: Sun, 4 Jun 2023 15:37:54 +0300 Subject: [PATCH 11/12] Update EditorStyles.js --- src/Editor/EditorStyles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Editor/EditorStyles.js b/src/Editor/EditorStyles.js index 8bdd802..ea6fee6 100644 --- a/src/Editor/EditorStyles.js +++ b/src/Editor/EditorStyles.js @@ -17,7 +17,7 @@ export default StyleSheet.create({ fontSize: 16, color: "#000", fontWeight: "400", - paddingHorizontal: 20, + paddingHorizontal: 8, minHeight: 40, position: "absolute", top: 0, From 75176fbbd77a7aaad353f2b17b74e28bdfdc4ae5 Mon Sep 17 00:00:00 2001 From: Omer Toledo <93873081+OmerToledo@users.noreply.github.com> Date: Wed, 11 Jun 2025 14:26:34 +0300 Subject: [PATCH 12/12] add the abilrt to change selection color --- src/Editor/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index 84f89bf..2ed9c0e 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -29,7 +29,8 @@ export class Editor extends React.Component { renderMentionList: PropTypes.func, placeMentionListOnBottom: PropTypes.bool, inputExtraHeight: PropTypes.number, - autoFocus: PropTypes.bool + autoFocus: PropTypes.bool, + selectionColor: PropTypes.object }; constructor(props) { @@ -588,7 +589,7 @@ export class Editor extends React.Component { value={null} onBlur={props.toggleEditor} onChangeText={this.onChange} - selectionColor={"#000"} + selectionColor={props.selectionColor ?? "#000"} onSelectionChange={this.handleSelectionChange} placeholder={state.placeholder} placeholderTextColor = { props.placeholderTextColor}