From 175f75b2ceaa7c83df342d6859174e5656d9ab36 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 21 Aug 2018 12:51:52 +0200 Subject: [PATCH 1/6] Define a new native event that is fired when the user moves the cursor in the editor, and make updates to the toolbar --- .../ReactNativeAztec/ReactAztecManager.java | 10 +++ .../ReactNativeAztec/ReactAztecText.java | 65 +++++++++++++++++-- 2 files changed, 71 insertions(+), 4 deletions(-) diff --git a/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index 1724e4a8c831c4..df7311afd83c60 100644 --- a/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -61,6 +61,11 @@ public Map getExportedCustomBubblingEventTypeConstants() { MapBuilder.of( "phasedRegistrationNames", MapBuilder.of("bubbled", "onChange"))) + .put( + "topFormatsChanges", + MapBuilder.of( + "phasedRegistrationNames", + MapBuilder.of("bubbled", "onActiveFormatsChange"))) .put( "topEndEditing", MapBuilder.of( @@ -151,6 +156,11 @@ public void setOnContentSizeChange(final ReactAztecText view, boolean onContentS } } + @ReactProp(name = "onActiveFormatsChange", defaultBoolean = false) + public void setOnActiveFormatsChange(final ReactAztecText view, boolean onActiveFormatsChange) { + view.setActiveFormatsChange(onActiveFormatsChange); + } + @ReactProp(name = "onScroll", defaultBoolean = false) public void setOnScroll(final ReactAztecText view, boolean onScroll) { if (onScroll) { diff --git a/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java index b8fa473ff24781..176e1bf9353316 100644 --- a/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java +++ b/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java @@ -7,6 +7,7 @@ import com.facebook.react.bridge.ReactContext; import com.facebook.react.uimanager.ThemedReactContext; 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.ReactTextInputLocalData; import com.facebook.react.views.textinput.ScrollWatcher; @@ -27,6 +28,7 @@ import org.wordpress.aztec.plugins.wpcomments.toolbar.MoreToolbarButton; import java.util.ArrayList; +import java.util.LinkedList; public class ReactAztecText extends AztecText { @@ -97,6 +99,55 @@ private void onContentSizeChange() { setIntrinsicContentSize(); } + void setActiveFormatsChange(boolean enabled) { + // If it's not enabled set an empty listener on AztecText + if (!enabled) { + setOnSelectionChangedListener(new OnSelectionChangedListener() { + @Override + public void onSelectionChanged(int selStart, int selEnd) { + // nope + } + }); + return; + } + + setOnSelectionChangedListener(new OnSelectionChangedListener() { + @Override + public void onSelectionChanged(int selStart, int selEnd) { + ReactAztecText.this.updateToolbarButtons(selStart, selEnd); + } + }); + } + + private void updateToolbarButtons(int selStart, int selEnd) { + ArrayList appliedStyles = getAppliedStyles(selStart, selEnd); + updateToolbarButtons(appliedStyles); + } + + private void updateToolbarButtons(ArrayList appliedStyles) { + // Read the applied styles and get the String list of formatting options + LinkedList formattingOptions = new LinkedList<>(); + for (ITextFormat currentStyle : appliedStyles) { + if (currentStyle == AztecTextFormat.FORMAT_STRONG) { + formattingOptions.add("strong"); + } + if (currentStyle == AztecTextFormat.FORMAT_ITALIC) { + formattingOptions.add("italic"); + } + if (currentStyle == AztecTextFormat.FORMAT_STRIKETHROUGH) { + formattingOptions.add("strikethrough"); + } + } + ReactContext reactContext = (ReactContext) getContext(); + EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher(); + eventDispatcher.dispatchEvent( + new ReactAztecFormattingChangeEvent( + getId(), + formattingOptions.toArray(new String[formattingOptions.size()]) + ) + ); + } + @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { onContentSizeChange(); @@ -152,6 +203,7 @@ public void applyFormat(String format) { ArrayList newFormats = new ArrayList<>(); switch (format) { case ("bold"): + case ("strong"): newFormats.add(AztecTextFormat.FORMAT_STRONG); newFormats.add(AztecTextFormat.FORMAT_BOLD); break; @@ -169,9 +221,14 @@ public void applyFormat(String format) { } if (!isTextSelected()) { - setSelectedStyles(getNewStylesList(newFormats)); + final ArrayList newStylesList = getNewStylesList(newFormats); + setSelectedStyles(newStylesList); + // Update the toolbar state + updateToolbarButtons(newStylesList); } else { toggleFormatting(newFormats.get(0)); + // Update the toolbar state + updateToolbarButtons(getSelectionStart(), getSelectionEnd()); } } @@ -180,10 +237,10 @@ private ArrayList getNewStylesList(ArrayList newFormat ArrayList textFormats = new ArrayList<>(); textFormats.addAll(getSelectedStyles()); boolean wasRemoved = false; - for (ITextFormat currentFormat : newFormats) { - if (textFormats.contains(currentFormat)) { + for (ITextFormat newFormat : newFormats) { + if (textFormats.contains(newFormat)) { wasRemoved = true; - textFormats.remove(currentFormat); + textFormats.remove(newFormat); } } From 2929b6f0ae1767f0a7977c5446c2f398d144b644 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 21 Aug 2018 12:52:07 +0200 Subject: [PATCH 2/6] Remove unused variables --- example/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/example/App.js b/example/App.js index 08d3d56f264d5d..9f130a111b85a3 100644 --- a/example/App.js +++ b/example/App.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import {AppRegistry, StyleSheet, TextInput, FlatList, KeyboardAvoidingView, SafeAreaView, Platform} from 'react-native'; import {example_content} from './content'; import Editor from './editor' @@ -25,7 +25,6 @@ export default class example extends React.Component { } renderItem( { item } ) { - let myMinHeight = Math.max(_minHeight, item.height); const key = item.key; return ( Date: Tue, 21 Aug 2018 12:52:49 +0200 Subject: [PATCH 3/6] Make sure to verify for both "Strong" and "Bold" on the toolbar highlighting code --- example/editor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/editor.js b/example/editor.js index b9feaf6bfbdf2a..0ee622b49adcbe 100644 --- a/example/editor.js +++ b/example/editor.js @@ -19,7 +19,7 @@ export default class Editor extends Component { } onActiveFormatsChange( formats ) { - this.setState( { activeFormats: formats }); + this.setState({activeFormats: formats }); } isFormatActive( format ) { @@ -34,7 +34,7 @@ export default class Editor extends Component { return ( -