From 2cce9917de49dab644f5c24bcdef6700dcc2a65b Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 19 Dec 2019 15:06:27 +0100 Subject: [PATCH 01/12] fix iOS focus loop --- .../ios/RNTAztecView/RCTAztecView.swift | 3 +- react-native-aztec/src/AztecView.js | 53 ++++++++++--------- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift index e82324c022..7052545ac9 100644 --- a/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift +++ b/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift @@ -669,6 +669,7 @@ extension RCTAztecView: UITextViewDelegate { } func textViewDidEndEditing(_ textView: UITextView) { - onBlur?([:]) + let text = packForRN(cleanHTML(), withName: "text") + onBlur?(text) } } diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index 91ba3acac8..19e63d1ff5 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -7,6 +7,7 @@ const AztecManager = UIManager.getViewManagerConfig('RCTAztecView'); class AztecView extends React.Component { selectionEndCaretY: number; + focused: Boolean = false; static propTypes = { activeFormats: PropTypes.array, @@ -57,10 +58,6 @@ class AztecView extends React.Component { } _onEnter = (event) => { - if (!this.isFocused()) { - return; - } - if (!this.props.onEnter) { return; } @@ -91,34 +88,32 @@ class AztecView extends React.Component { } _onFocus = (event) => { - if (!this.props.onFocus) { - return; - } - + this.focused = true; const { onFocus } = this.props; - onFocus(event); + + if (onFocus) { + onFocus(event); + } } _onBlur = (event) => { + this.focused = false; this.selectionEndCaretY = null; - TextInputState.blurTextInput(ReactNative.findNodeHandle(this)); + const { onBlur } = this.props; - if (!this.props.onBlur) { - return; + if (onBlur) { + onBlur(event); } - - const { onBlur } = this.props; - onBlur(event); } _onSelectionChange = (event) => { - if ( this.props.onSelectionChange ) { + if ( this.focused && this.props.onSelectionChange ) { const { selectionStart, selectionEnd, text } = event.nativeEvent; const { onSelectionChange } = this.props; onSelectionChange( selectionStart, selectionEnd, text, event ); } - if ( this.props.onCaretVerticalPositionChange && + if ( this.focused && this.props.onCaretVerticalPositionChange && this.selectionEndCaretY != event.nativeEvent.selectionEndCaretY ) { const caretY = event.nativeEvent.selectionEndCaretY; this.props.onCaretVerticalPositionChange( event.target, caretY, this.selectionEndCaretY ); @@ -127,23 +122,33 @@ class AztecView extends React.Component { } blur = () => { - TextInputState.blurTextInput(ReactNative.findNodeHandle(this)); + if ( this.focused ) { + if (Platform.OS === "ios") { + UIManager.blur(ReactNative.findNodeHandle(this)) + } else { + this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.focusTextInput) + } + } + this.focused = false; } focus = () => { - TextInputState.focusTextInput(ReactNative.findNodeHandle(this)); + if ( !this.focused ) { + if (Platform.OS === "ios") { + UIManager.focus(ReactNative.findNodeHandle(this)) + } else { + this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.blurTextInput) + } + } + this.focused = true; } isFocused = () => { - const focusedField = TextInputState.currentlyFocusedField(); - return focusedField && ( focusedField === ReactNative.findNodeHandle(this) ); + return this.focused } _onPress = (event) => { - if ( ! this.isFocused() ) { - this.focus(event); // Call to move the focus in RN way (TextInputState) this._onFocus(event); // Check if there are listeners set on the focus event - } } _onAztecFocus = (event) => { From 9f27fa82245b6e5c9d86b1e997b1c1bd20507e18 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 19 Dec 2019 15:06:42 +0100 Subject: [PATCH 02/12] update ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 619b80d1ad..7e41eaa845 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 619b80d1ad2bd7c7b04a05616c0db90e0d3c55d7 +Subproject commit 7e41eaa8458c866618d418c12fe4e0dfd4d56737 From 9f8f324fce747f4ce3a4005da758a6b8944de180 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 19 Dec 2019 16:00:37 +0100 Subject: [PATCH 03/12] some styling fix --- react-native-aztec/src/AztecView.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index 19e63d1ff5..c5eff34783 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import ReactNative, {requireNativeComponent, TextViewPropTypes, UIManager, ColorPropType, TouchableWithoutFeedback, Platform} from 'react-native'; -import TextInputState from 'react-native/lib/TextInputState'; const AztecManager = UIManager.getViewManagerConfig('RCTAztecView'); @@ -107,14 +106,14 @@ class AztecView extends React.Component { } _onSelectionChange = (event) => { - if ( this.focused && this.props.onSelectionChange ) { + if (this.focused && this.props.onSelectionChange) { const { selectionStart, selectionEnd, text } = event.nativeEvent; const { onSelectionChange } = this.props; onSelectionChange( selectionStart, selectionEnd, text, event ); } - if ( this.focused && this.props.onCaretVerticalPositionChange && - this.selectionEndCaretY != event.nativeEvent.selectionEndCaretY ) { + if (this.focused && this.props.onCaretVerticalPositionChange && + this.selectionEndCaretY != event.nativeEvent.selectionEndCaretY) { const caretY = event.nativeEvent.selectionEndCaretY; this.props.onCaretVerticalPositionChange( event.target, caretY, this.selectionEndCaretY ); this.selectionEndCaretY = caretY; @@ -122,30 +121,28 @@ class AztecView extends React.Component { } blur = () => { - if ( this.focused ) { + if (this.focused) { if (Platform.OS === "ios") { UIManager.blur(ReactNative.findNodeHandle(this)) } else { - this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.focusTextInput) + this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.blurTextInput) } } this.focused = false; } focus = () => { - if ( !this.focused ) { + if (!this.focused) { if (Platform.OS === "ios") { UIManager.focus(ReactNative.findNodeHandle(this)) } else { - this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.blurTextInput) + this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.focusTextInput) } } this.focused = true; } - isFocused = () => { - return this.focused - } + isFocused = () => this.focused _onPress = (event) => { this._onFocus(event); // Check if there are listeners set on the focus event From ab1e6189ef98ce6dd31cb1c9f1f48574434101dc Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 19 Dec 2019 17:35:01 +0100 Subject: [PATCH 04/12] update ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 7e41eaa845..0856422c4b 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 7e41eaa8458c866618d418c12fe4e0dfd4d56737 +Subproject commit 0856422c4b04c3bf01d99448d5f5219d97ec4e53 From b3fc83e24cfac3b0a68e560cd5031c47fdfb4f92 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 11:01:31 +0100 Subject: [PATCH 05/12] back the TextInputState --- react-native-aztec/src/AztecView.js | 49 +++++++++++++++-------------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index c5eff34783..c0b3cbefdb 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import ReactNative, {requireNativeComponent, TextViewPropTypes, UIManager, ColorPropType, TouchableWithoutFeedback, Platform} from 'react-native'; +import TextInputState from 'react-native/lib/TextInputState'; const AztecManager = UIManager.getViewManagerConfig('RCTAztecView'); @@ -34,6 +35,14 @@ class AztecView extends React.Component { ...TextViewPropTypes, // include the default view properties } + componentDidMount() { + TextInputState.registerInput(ReactNative.findNodeHandle(this)) + } + + componentWillUnmount() { + TextInputState.unregisterInput(ReactNative.findNodeHandle(this)) + } + dispatch(command, params) { params = params || []; UIManager.dispatchViewManagerCommand( @@ -57,6 +66,10 @@ class AztecView extends React.Component { } _onEnter = (event) => { + if (!this.isFocused()) { + return; + } + if (!this.props.onEnter) { return; } @@ -87,18 +100,16 @@ class AztecView extends React.Component { } _onFocus = (event) => { - this.focused = true; const { onFocus } = this.props; - if (onFocus) { onFocus(event); } } _onBlur = (event) => { - this.focused = false; this.selectionEndCaretY = null; const { onBlur } = this.props; + TextInputState.blurTextInput(ReactNative.findNodeHandle(this)); if (onBlur) { onBlur(event); @@ -106,13 +117,13 @@ class AztecView extends React.Component { } _onSelectionChange = (event) => { - if (this.focused && this.props.onSelectionChange) { + if (this.props.onSelectionChange) { const { selectionStart, selectionEnd, text } = event.nativeEvent; const { onSelectionChange } = this.props; onSelectionChange( selectionStart, selectionEnd, text, event ); } - if (this.focused && this.props.onCaretVerticalPositionChange && + if (this.props.onCaretVerticalPositionChange && this.selectionEndCaretY != event.nativeEvent.selectionEndCaretY) { const caretY = event.nativeEvent.selectionEndCaretY; this.props.onCaretVerticalPositionChange( event.target, caretY, this.selectionEndCaretY ); @@ -121,31 +132,23 @@ class AztecView extends React.Component { } blur = () => { - if (this.focused) { - if (Platform.OS === "ios") { - UIManager.blur(ReactNative.findNodeHandle(this)) - } else { - this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.blurTextInput) - } - } - this.focused = false; + TextInputState.blurTextInput(ReactNative.findNodeHandle(this)); } focus = () => { - if (!this.focused) { - if (Platform.OS === "ios") { - UIManager.focus(ReactNative.findNodeHandle(this)) - } else { - this.dispatch(UIManager.getViewManagerConfig('AndroidTextInput').Commands.focusTextInput) - } - } - this.focused = true; + TextInputState.focusTextInput(ReactNative.findNodeHandle(this)); } - isFocused = () => this.focused + isFocused = () => { + const focusedField = TextInputState.currentlyFocusedField(); + return focusedField && ( focusedField === ReactNative.findNodeHandle(this) ); + } _onPress = (event) => { - this._onFocus(event); // Check if there are listeners set on the focus event + if( !this.isFocused() ) { + this.focus(); + this._onFocus(event); // Check if there are listeners set on the focus event + } } _onAztecFocus = (event) => { From 87c850c4c673e6fe341dbbafa0cb8316a5543937 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 11:11:59 +0100 Subject: [PATCH 06/12] update ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 0856422c4b..e8e4afb3ba 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 0856422c4b04c3bf01d99448d5f5219d97ec4e53 +Subproject commit e8e4afb3baf9ef56495f9ae99c1123d02aea4a6d From 581d7e0d1f449fa5091cb3b635b56df5162bf7bc Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 11:16:06 +0100 Subject: [PATCH 07/12] revert changes --- react-native-aztec/src/AztecView.js | 36 ++++++++++++++++------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index c0b3cbefdb..56a4672663 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -66,8 +66,8 @@ class AztecView extends React.Component { } _onEnter = (event) => { - if (!this.isFocused()) { - return; + if (!this.isFocused()) { + return; } if (!this.props.onEnter) { @@ -100,31 +100,35 @@ class AztecView extends React.Component { } _onFocus = (event) => { - const { onFocus } = this.props; - if (onFocus) { - onFocus(event); + if (!this.props.onFocus) { + return; } + + const { onFocus } = this.props; + onFocus(event); } _onBlur = (event) => { this.selectionEndCaretY = null; - const { onBlur } = this.props; TextInputState.blurTextInput(ReactNative.findNodeHandle(this)); - if (onBlur) { - onBlur(event); + if (!this.props.onBlur) { + return; } + + const { onBlur } = this.props; + onBlur(event); } _onSelectionChange = (event) => { - if (this.props.onSelectionChange) { + if ( this.props.onSelectionChange ) { const { selectionStart, selectionEnd, text } = event.nativeEvent; const { onSelectionChange } = this.props; onSelectionChange( selectionStart, selectionEnd, text, event ); } - if (this.props.onCaretVerticalPositionChange && - this.selectionEndCaretY != event.nativeEvent.selectionEndCaretY) { + if ( this.props.onCaretVerticalPositionChange && + this.selectionEndCaretY != event.nativeEvent.selectionEndCaretY ) { const caretY = event.nativeEvent.selectionEndCaretY; this.props.onCaretVerticalPositionChange( event.target, caretY, this.selectionEndCaretY ); this.selectionEndCaretY = caretY; @@ -140,15 +144,15 @@ class AztecView extends React.Component { } isFocused = () => { - const focusedField = TextInputState.currentlyFocusedField(); + const focusedField = TextInputState.currentlyFocusedField(); return focusedField && ( focusedField === ReactNative.findNodeHandle(this) ); } _onPress = (event) => { - if( !this.isFocused() ) { - this.focus(); - this._onFocus(event); // Check if there are listeners set on the focus event - } + if ( ! this.isFocused() ) { + this.focus(); // Call to move the focus in RN way (TextInputState) + this._onFocus(event); // Check if there are listeners set on the focus event + } } _onAztecFocus = (event) => { From c62e3b24caf10689c86cca73f03d4d1f50acba81 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 11:19:33 +0100 Subject: [PATCH 08/12] remove unused variable --- react-native-aztec/src/AztecView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index 56a4672663..6cf408c905 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -7,7 +7,6 @@ const AztecManager = UIManager.getViewManagerConfig('RCTAztecView'); class AztecView extends React.Component { selectionEndCaretY: number; - focused: Boolean = false; static propTypes = { activeFormats: PropTypes.array, From 7fe99842f686914e5c85789b3313dcd4f2deeb1c Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 11:38:05 +0100 Subject: [PATCH 09/12] update ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index e8e4afb3ba..a22b64d04d 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit e8e4afb3baf9ef56495f9ae99c1123d02aea4a6d +Subproject commit a22b64d04d59a2dbe03bdf570f04883a2960ae2e From 0123be76e23719554deec24d15bb5225c4ff2418 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 16:07:04 +0100 Subject: [PATCH 10/12] update ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index a22b64d04d..38ec2eb72e 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit a22b64d04d59a2dbe03bdf570f04883a2960ae2e +Subproject commit 38ec2eb72e2b43bcb83da66e3ea540bebd84f0a6 From 3d3fb920d3811f3bc716359be803b0bbf263a09a Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 20 Dec 2019 16:22:16 +0100 Subject: [PATCH 11/12] remove register and unregister of text input --- react-native-aztec/src/AztecView.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index 6cf408c905..d5f28c2762 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -34,14 +34,6 @@ class AztecView extends React.Component { ...TextViewPropTypes, // include the default view properties } - componentDidMount() { - TextInputState.registerInput(ReactNative.findNodeHandle(this)) - } - - componentWillUnmount() { - TextInputState.unregisterInput(ReactNative.findNodeHandle(this)) - } - dispatch(command, params) { params = params || []; UIManager.dispatchViewManagerCommand( From d16c52b7f59cdcdc537d9918f006b1a897ba21e9 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 7 Jan 2020 18:30:27 +0100 Subject: [PATCH 12/12] update ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 38ec2eb72e..3eaa314ae2 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 38ec2eb72e2b43bcb83da66e3ea540bebd84f0a6 +Subproject commit 3eaa314ae2a685c6c480f8606da04caf20974745