From f53231599ae1c24c463c4164c1e4237797f38228 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 12 Mar 2019 19:47:11 +0100 Subject: [PATCH 01/13] Add the property `tagName` to the Aztec React Native Wrapper, and use it to wrap the text inserted by the user. --- .../mobile/ReactNativeAztec/ReactAztecManager.java | 14 +++++++++++++- .../mobile/ReactNativeAztec/ReactAztecText.java | 10 ++++++++++ react-native-aztec/src/AztecView.js | 1 + 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index bf14e09784..e1d7fc6e14 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -5,6 +5,7 @@ import android.graphics.Typeface; import android.support.annotation.Nullable; import android.text.Editable; +import android.text.TextUtils; import android.text.TextWatcher; import android.util.Log; import android.util.TypedValue; @@ -293,6 +294,11 @@ public void setColor(ReactAztecText view, @Nullable Integer color) { view.setTextColor(newColor); } + @ReactProp(name = "tagName") + public void setTagName(ReactAztecText view, @Nullable String tagName) { + view.setTagName(tagName); + } + @ReactProp(name = "placeholder") public void setPlaceholder(ReactAztecText view, @Nullable String placeholder) { view.setHint(placeholder); @@ -480,13 +486,14 @@ public void onTextChanged(CharSequence s, int start, int before, int count) { return; } + int currentEventCount = mEditText.incrementAndGetEventCounter(); // The event that contains the event counter and updates it must be sent first. // TODO: t7936714 merge these events mEventDispatcher.dispatchEvent( new ReactTextChangedEvent( mEditText.getId(), mEditText.toHtml(false), - mEditText.incrementAndGetEventCounter())); + currentEventCount)); mEventDispatcher.dispatchEvent( new ReactTextInputEvent( @@ -495,6 +502,11 @@ public void onTextChanged(CharSequence s, int start, int before, int count) { oldText, start, start + before)); + + // Add the outer tags when the field was started empty, and only the first time the user types in it. + if (mPreviousText.length() == 0 && currentEventCount == 1 && !TextUtils.isEmpty(mEditText.getTagName())) { + mEditText.fromHtml('<' + mEditText.getTagName() + '>' + newText + "', false); + } } @Override diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java index 95b66d86b9..3c110224de 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java @@ -66,6 +66,8 @@ public class ReactAztecText extends AztecText { boolean shouldHandleOnSelectionChange = false; boolean shouldHandleActiveFormatsChange = false; + String tagName = ""; + private static final HashMap typingFormatsMap = new HashMap() { { put(AztecTextFormat.FORMAT_BOLD, "bold"); @@ -241,6 +243,14 @@ public void run() { setIntrinsicContentSize(); } + public void setTagName(@Nullable String tagName) { + this.tagName = tagName; + } + + public String getTagName() { + return this.tagName; + } + private void updateToolbarButtons(int selStart, int selEnd) { ArrayList appliedStyles = getAppliedStyles(selStart, selEnd); updateToolbarButtons(appliedStyles); diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index aabf09febf..688d98eb14 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -15,6 +15,7 @@ class AztecView extends React.Component { text: PropTypes.object, placeholder: PropTypes.string, placeholderTextColor: ColorPropType, + tagName: PropTypes.string, color: ColorPropType, maxImagesWidth: PropTypes.number, minImagesWidth: PropTypes.number, From 0346d5b74c8e0df86f90e0f74c99a54ccec51f62 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 12 Mar 2019 19:50:03 +0100 Subject: [PATCH 02/13] Update GB ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 38377fead5..792af0bd32 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 38377fead541dd887ff68c37040845d06de8c955 +Subproject commit 792af0bd32a56bf1fe7f9db3cd9484cec8777d03 From bfe04df10bdd419bfa42e56a185560c7a1bad1dd Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 12 Mar 2019 20:13:42 +0100 Subject: [PATCH 03/13] Reuse `blockType` instead of adding a new property --- .../mobile/ReactNativeAztec/ReactAztecManager.java | 8 +++++--- react-native-aztec/src/AztecView.js | 1 - 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index e1d7fc6e14..0117c01ca1 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -294,9 +294,11 @@ public void setColor(ReactAztecText view, @Nullable Integer color) { view.setTextColor(newColor); } - @ReactProp(name = "tagName") - public void setTagName(ReactAztecText view, @Nullable String tagName) { - view.setTagName(tagName); + @ReactProp(name = "blockType") + public void setBlockType(ReactAztecText view, ReadableMap inputMap) { + if (inputMap.hasKey("tag")) { + view.setTagName(inputMap.getString("tag")); + } } @ReactProp(name = "placeholder") diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index 688d98eb14..aabf09febf 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -15,7 +15,6 @@ class AztecView extends React.Component { text: PropTypes.object, placeholder: PropTypes.string, placeholderTextColor: ColorPropType, - tagName: PropTypes.string, color: ColorPropType, maxImagesWidth: PropTypes.number, minImagesWidth: PropTypes.number, From d320301f77346a45005d9e667684ab48eab0cdba Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 12 Mar 2019 20:17:35 +0100 Subject: [PATCH 04/13] Update GB hash --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 792af0bd32..9e8470076e 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 792af0bd32a56bf1fe7f9db3cd9484cec8777d03 +Subproject commit 9e8470076e1648bc07fd66f1d5c6f0e493b18855 From 26a773bc80406e038f6feb807f2c78ecbcbc7f95 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Wed, 13 Mar 2019 11:48:06 +0100 Subject: [PATCH 05/13] Add comments --- .../org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java | 3 +++ 1 file changed, 3 insertions(+) diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java index 3c110224de..1ffb40089d 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java @@ -66,6 +66,9 @@ public class ReactAztecText extends AztecText { boolean shouldHandleOnSelectionChange = false; boolean shouldHandleActiveFormatsChange = false; + // This optional variable holds the outer HTML tag that will be added to the text when the user start typing in it + // This is required to keep placeholder text working, and start typing with styled text. + // Ref: https://github.com/wordpress-mobile/gutenberg-mobile/issues/707 String tagName = ""; private static final HashMap typingFormatsMap = new HashMap() { From 46606b1a0a1f922ed501f45bce4eb67778bda0ec Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Wed, 13 Mar 2019 11:50:01 +0100 Subject: [PATCH 06/13] Update GB ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 9e8470076e..31dda2c75c 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 9e8470076e1648bc07fd66f1d5c6f0e493b18855 +Subproject commit 31dda2c75cc4fa98e520203d9850fd3fad6998d4 From e9b0e3860fa3bb1be79de383e899829cd371f810 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 09:00:32 +0100 Subject: [PATCH 07/13] Make `tagName` private --- .../wordpress/mobile/ReactNativeAztec/ReactAztecText.java | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java index 1ffb40089d..3404590189 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java @@ -21,7 +21,6 @@ import com.facebook.react.uimanager.UIManagerModule; import com.facebook.react.uimanager.events.EventDispatcher; import com.facebook.react.views.textinput.ContentSizeWatcher; -import com.facebook.react.views.textinput.ReactTextChangedEvent; import com.facebook.react.views.textinput.ReactTextInputLocalData; import com.facebook.react.views.textinput.ScrollWatcher; @@ -35,7 +34,6 @@ import java.util.LinkedList; import java.util.Set; import java.util.HashSet; -import java.util.Map; import java.util.HashMap; import static android.content.ClipData.*; @@ -69,7 +67,7 @@ public class ReactAztecText extends AztecText { // This optional variable holds the outer HTML tag that will be added to the text when the user start typing in it // This is required to keep placeholder text working, and start typing with styled text. // Ref: https://github.com/wordpress-mobile/gutenberg-mobile/issues/707 - String tagName = ""; + private String mTagName = ""; private static final HashMap typingFormatsMap = new HashMap() { { @@ -247,11 +245,11 @@ public void run() { } public void setTagName(@Nullable String tagName) { - this.tagName = tagName; + this.mTagName = tagName; } public String getTagName() { - return this.tagName; + return this.mTagName; } private void updateToolbarButtons(int selStart, int selEnd) { From 4954937821bfd362204bc9e3ff9f1eeb0e29385f Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 09:02:16 +0100 Subject: [PATCH 08/13] Introduce a constant for the string `tag` and use it instead of the hard coded string --- .../mobile/ReactNativeAztec/ReactAztecManager.java | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index ec844165ee..ccdee13968 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -64,6 +64,8 @@ public class ReactAztecManager extends SimpleViewManager { private static final String TAG = "ReactAztecText"; + private static final String BLOCK_TYPE_TAG_KEY = "tag"; + public ReactAztecManager() { initializeFocusAndBlurCommandCodes(); } @@ -305,8 +307,8 @@ public void setColor(ReactAztecText view, @Nullable Integer color) { @ReactProp(name = "blockType") public void setBlockType(ReactAztecText view, ReadableMap inputMap) { - if (inputMap.hasKey("tag")) { - view.setTagName(inputMap.getString("tag")); + if (inputMap.hasKey(BLOCK_TYPE_TAG_KEY)) { + view.setTagName(inputMap.getString(BLOCK_TYPE_TAG_KEY)); } } From 55e4dbaf1f6c42674c46a29e3988ba86b9af0315 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 09:40:38 +0100 Subject: [PATCH 09/13] Raise the minHeight value for heading block to 60 (it was 50) --- gutenberg | 2 +- src/variables.android.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/gutenberg b/gutenberg index 31dda2c75c..a8bf0e7061 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 31dda2c75cc4fa98e520203d9850fd3fad6998d4 +Subproject commit a8bf0e7061d19924161610be4474786fffadc940 diff --git a/src/variables.android.scss b/src/variables.android.scss index 9ddfdf515b..cf25c8c94a 100644 --- a/src/variables.android.scss +++ b/src/variables.android.scss @@ -8,4 +8,4 @@ $title-block-padding-bottom: 0; $min-height-title: 53; $min-height-paragraph: 50; -$min-height-heading: 50; +$min-height-heading: 60; From 5e1905fa1729edbf1f54f554bddc4d7b34ee593a Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 09:45:54 +0100 Subject: [PATCH 10/13] Update GB ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index a8bf0e7061..c196b6845b 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit a8bf0e7061d19924161610be4474786fffadc940 +Subproject commit c196b6845b498ae5cfbedca34d2ea4aea28ffafd From d57b37f62d07d195cb44455c1dc7828718d817e9 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 10:00:32 +0100 Subject: [PATCH 11/13] Tests: Add mock for the newly added CSS class --- __mocks__/styleMock.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js index 28bd419865..8b56c2cb59 100644 --- a/__mocks__/styleMock.js +++ b/__mocks__/styleMock.js @@ -28,4 +28,7 @@ module.exports = { blockHolderFocused: { borderColor: 'gray', }, + 'wp-block-heading': { + minHeight: 60, + }, }; From 8cda4bc6e4888503889e9badce3a7a744d2e180b Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 16:29:46 +0100 Subject: [PATCH 12/13] Update GB ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 7e2be3a46b..793609596a 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 7e2be3a46b51cb5a7d90a226c6031032a5b345a0 +Subproject commit 793609596ab09d4a0117f950c77cc887cacda68a From 5ce3e1249592959e4bfac4b4a962d57556fb4efd Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 16:52:02 +0100 Subject: [PATCH 13/13] Update gb hash after merging the companion PR --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 793609596a..3f234faf8b 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 793609596ab09d4a0117f950c77cc887cacda68a +Subproject commit 3f234faf8b811bdfd8ada5899836b3521d886163