First steps to implement pasting external content

package.json

@@ -115,6 +115,7 @@
     "refx": "^3.0.0",
     "rememo": "^3.0.0",
     "shallowequal": "^1.0.2",
+    "showdown": "^1.8.6",
     "simple-html-tokenizer": "^0.4.1",
     "tannin": "^1.0.1",
     "tinycolor2": "^1.4.1",

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java

@@ -131,6 +131,11 @@ public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
                         MapBuilder.of(
                                 "phasedRegistrationNames",
                                 MapBuilder.of("bubbled", "onBackspace")))
+                .put(
+                        "topTextInputPaste",
+                        MapBuilder.of(
+                                "phasedRegistrationNames",
+                                MapBuilder.of("bubbled", "onPaste")))
                 .put(
                         "topFocus",
                         MapBuilder.of(
@@ -386,6 +391,11 @@ public void setOnBackspaceHandling(final ReactAztecText view, boolean onBackspac
         view.shouldHandleOnBackspace = onBackspaceHandling;
     }
 
+    @ReactProp(name = "onPaste", defaultBoolean = false)
+    public void setOnPasteHandling(final ReactAztecText view, boolean onPasteHandling) {
+        view.shouldHandleOnPaste = onPasteHandling;
+    }
+
     @Override
     public Map<String, Integer> getCommandsMap() {
         return MapBuilder.<String, Integer>builder()

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecPasteEvent.java

@@ -0,0 +1,56 @@
+package org.wordpress.mobile.ReactNativeAztec;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+/**
+ * Event emitted by Aztec native view when paste is detected.
+ */
+class ReactAztecPasteEvent extends Event<ReactAztecPasteEvent> {
+
+    private static final String EVENT_NAME = "topTextInputPaste";
+
+    private String mCurrentContent;
+    private int mSelectionStart;
+    private int mSelectionEnd;
+    private String mPastedText;
+    private String mPastedHtml;
+
+    public ReactAztecPasteEvent(int viewId, String currentContent, int selectionStart,
+                                int selectionEnd, String pastedText, String pastedHtml) {
+        super(viewId);
+        mCurrentContent = currentContent;
+        mSelectionStart = selectionStart;
+        mSelectionEnd = selectionEnd;
+        mPastedText = pastedText;
+        mPastedHtml = pastedHtml;
+    }
+
+    @Override
+    public String getEventName() {
+        return EVENT_NAME;
+    }
+
+    @Override
+    public boolean canCoalesce() {
+        return false;
+    }
+
+    @Override
+    public void dispatch(RCTEventEmitter rctEventEmitter) {
+        rctEventEmitter.receiveEvent(getViewTag(), getEventName(), serializeEventData());
+    }
+
+    private WritableMap serializeEventData() {
+        WritableMap eventData = Arguments.createMap();
+        eventData.putInt("target", getViewTag());
+        eventData.putString("currentContent", mCurrentContent);
+        eventData.putInt("selectionStart", mSelectionStart);
+        eventData.putInt("selectionEnd", mSelectionEnd);
+        eventData.putString("pastedText", mPastedText);
+        eventData.putString("pastedHtml", mPastedHtml);
+        return eventData;
+    }
+}

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java

@@ -1,5 +1,7 @@
 package org.wordpress.mobile.ReactNativeAztec;
 
+import android.content.ClipData;
+import android.content.ClipboardManager;
 import android.content.Context;
 import android.graphics.Rect;
 import android.support.annotation.Nullable;
@@ -31,6 +33,8 @@
 import java.util.Map;
 import java.util.HashMap;
 
+import static android.content.ClipData.*;
+
 public class ReactAztecText extends AztecText {
 
     private final InputMethodManager mInputMethodManager;
@@ -53,6 +57,7 @@ public class ReactAztecText extends AztecText {
     String lastSentFormattingOptionsEventString = "";
     boolean shouldHandleOnEnter = false;
     boolean shouldHandleOnBackspace = false;
+    boolean shouldHandleOnPaste = false;
     boolean shouldHandleOnSelectionChange = false;
     boolean shouldHandleActiveFormatsChange = false;
 
@@ -115,6 +120,20 @@ void addPlugin(IAztecPlugin plugin) {
         }
     }
 
+    @Override
+    public boolean onTextContextMenuItem(int id) {
+        if (shouldHandleOnPaste) {
+            switch (id) {
+                case android.R.id.paste:
+                    return onPaste(false);
+                case android.R.id.pasteAsPlainText:
+                    return onPaste(true);
+            }
+        }
+
+        return super.onTextContextMenuItem(id);
+    }
+
     // VisibleForTesting from {@link TextInputEventsTestCase}.
     public void requestFocusFromJS() {
         mIsJSSettingFocus = true;
@@ -336,6 +355,50 @@ private boolean onBackspace() {
         return true;
     }
 
+    /**
+     * Handle paste action by retrieving clipboard contents and dispatching a
+     * {@link ReactAztecPasteEvent} with the data
+     *
+     * @param   isPastedAsPlainText boolean indicating whether the paste action chosen was
+     *                         "PASTE AS PLAIN TEXT"
+     *
+     * @return  boolean to indicate that the action was handled (always true)
+     */
+    private boolean onPaste(boolean isPastedAsPlainText) {
+        ClipboardManager clipboardManager = (ClipboardManager) getContext().getSystemService(
+                Context.CLIPBOARD_SERVICE);
+
+        StringBuilder text = new StringBuilder();
+        StringBuilder html = new StringBuilder();
+
+        if (clipboardManager != null && clipboardManager.hasPrimaryClip()) {
+            ClipData clipData = clipboardManager.getPrimaryClip();
+            int itemCount = clipData.getItemCount();
+
+            for (int i = 0; i < itemCount; i++) {
+                Item item = clipData.getItemAt(i);
+                text.append(item.coerceToText(getContext()));
+                if (!isPastedAsPlainText) {
+                    html.append(item.coerceToHtmlText(getContext()));
+                }
+            }
+        }
+
+        // temporarily disable listener during call to toHtml()
+        disableTextChangedListener();
+        String content = toHtml(false);
+        int cursorPositionStart = getSelectionStart();
+        int cursorPositionEnd = getSelectionEnd();
+        enableTextChangedListener();
+        ReactContext reactContext = (ReactContext) getContext();
+        EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class)
+                .getEventDispatcher();
+        eventDispatcher.dispatchEvent(new ReactAztecPasteEvent(getId(), content,
+                cursorPositionStart, cursorPositionEnd, text.toString(), html.toString())
+        );
+        return true;
+    }
+
     public void setActiveFormats(Iterable<String> newFormats) {
         Set<ITextFormat> selectedStylesSet = new HashSet<>(getSelectedStyles());
         Set<ITextFormat> newFormatsSet = new HashSet<>();

src/globals.js

@@ -5,6 +5,9 @@ import { createElement } from '@wordpress/element';
 import jsdom from 'jsdom-jscore';
 import jsdomLevel1Core from 'jsdom-jscore/lib/jsdom/level1/core';
 
+// Import for side-effects: Patches for jsdom-jscore, details commented in file.
+import './jsdom-patches';
+
 global.wp = {
 	element: {
 		createElement, // load the element creation function, needed by Gutenberg-web

src/jsdom-patches.js

@@ -0,0 +1,123 @@
+/** @flow
+ * @format */
+
+/**
+* This file is used in src/globals.js to patch jsdom-jscore.
+*
+* Node.prototype.contains is implemented as a simple recursive function.
+*
+* Node.prototype.insertBefore is re-implemented (code copied) with the
+* WrongDocumentError exception disabled.
+*
+* Element.prototype.matches is aliased to Element.prototype.matchesSelector.
+*/
+
+/**
+ * External dependencies
+ */
+import jsdom from 'jsdom-jscore';
+import jsdomLevel1Core from 'jsdom-jscore/lib/jsdom/level1/core';
+
+// must be called to initialize jsdom before patching prototypes
+jsdom.html( '', null, null );
+
+const { core } = jsdomLevel1Core.dom.level1;
+const { Node, Element } = core;
+
+// Exception codes
+const {
+	NO_MODIFICATION_ALLOWED_ERR,
+	HIERARCHY_REQUEST_ERR,
+	NOT_FOUND_ERR,
+} = core;
+
+// Node types
+const {
+	ATTRIBUTE_NODE,
+	DOCUMENT_FRAGMENT_NODE,
+} = Node;
+
+// Simple recursive implementation of Node.contains method
+Node.prototype.contains = function( otherNode ) {
+	return this === otherNode ||
+		Array.prototype.some.call( this._childNodes, ( childNode ) => {
+			return childNode.contains( otherNode );
+		} );
+};
+
+// copied from jsdom-jscore, but without WRONG_DOCUMENT_ERR exception
+Node.prototype.insertBefore = function( /* Node */ newChild, /* Node*/ refChild ) {
+	if ( this._readonly === true ) {
+		throw new core.DOMException( NO_MODIFICATION_ALLOWED_ERR, 'Attempting to modify a read-only node' );
+	}
+
+	// Adopt unowned children, for weird nodes like DocumentType
+	if ( ! newChild._ownerDocument ) {
+		newChild._ownerDocument = this._ownerDocument;
+	}
+
+	/*
+	 * This is commented out to prevent WrongDocumentError
+	 * see: https://github.com/jsdom/jsdom/issues/717
+	 *
+	// TODO - if (!newChild) then?
+	if (newChild._ownerDocument !== this._ownerDocument) {
+		throw new core.DOMException(WRONG_DOCUMENT_ERR);
+	}
+	*/
+
+	if ( newChild.nodeType && newChild.nodeType === ATTRIBUTE_NODE ) {
+		throw new core.DOMException( HIERARCHY_REQUEST_ERR );
+	}
+
+	// search for parents matching the newChild
+	let current = this;
+	do {
+		if ( current === newChild ) {
+			throw new core.DOMException( HIERARCHY_REQUEST_ERR );
+		}
+	} while ( ( current = current._parentNode ) );
+
+	// fragments are merged into the element
+	if ( newChild.nodeType === DOCUMENT_FRAGMENT_NODE ) {
+		let tmpNode,
+			i = newChild._childNodes.length;
+		while ( i-- > 0 ) {
+			tmpNode = newChild.removeChild( newChild.firstChild );
+			this.insertBefore( tmpNode, refChild );
+		}
+	} else if ( newChild === refChild ) {
+		return newChild;
+	} else {
+		// if the newChild is already in the tree elsewhere, remove it first
+		if ( newChild._parentNode ) {
+			newChild._parentNode.removeChild( newChild );
+		}
+
+		if ( refChild === null ) {
+			// eslint-disable-next-line no-var
+			var refChildIndex = this._childNodes.length;
+		} else {
+			// eslint-disable-next-line no-redeclare, no-var
+			var refChildIndex = this._indexOf( refChild );
+			if ( refChildIndex === -1 ) {
+				throw new core.DOMException( NOT_FOUND_ERR );
+			}
+		}
+
+		Array.prototype.splice.call( this._childNodes, refChildIndex, 0, newChild );
+
+		newChild._parentNode = this;
+		if ( this._attached && newChild._attach ) {
+			newChild._attach();
+		}
+
+		this._modified();
+	}
+
+	return newChild;
+}; // raises(DOMException);
+
+// alias (polyfill not needed)
+// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+Element.prototype.matches = Element.prototype.matchesSelector;

symlinked-packages/@wordpress/dom

@@ -0,0 +1 @@
+../../gutenberg/packages/dom/src/

symlinked-packages/@wordpress/shortcode

@@ -0,0 +1 @@
+../../gutenberg/packages/shortcode/src/

yarn.lock

@@ -8217,6 +8217,13 @@ shortid@^2.2.6:
   dependencies:
     nanoid "^2.0.0"
 
+showdown@^1.8.6:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.0.tgz#d49d2a0b6db21b7c2e96ef855f7b3b2a28ef46f4"
+  integrity sha512-x7xDCRIaOlicbC57nMhGfKamu+ghwsdVkHMttyn+DelwzuHOx4OHCVL/UW/2QOLH7BxfCcCCVVUix3boKXJKXQ==
+  dependencies:
+    yargs "^10.0.3"
+
 sigmund@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"