Gutenberg-mobile: Pasting external content - known issues

[mkevins]

This issue is a follow-up to #238. First steps have been taken to implement pasting with the merging of #553 and https://github.com/WordPress/gutenberg/pull/13841, however, additional work is required. Known issues and additional work needed are listed below.

Known issues

• [x] Pasting into selected text causes a red screen - TypeError: this.props.value.trimLeft is not a function (was working before merging recent changes to RichText - may be related to getRecord) - (fixed with PR #638)
• [x] Pasting from some sources causes a red screen (related comment, fixed with PR #630)
• [x] #827 Pasting images along with text sometimes omits the images (related comment) (fixed with #1083)
• [x] When bullet lists are copied to the clipboard and pasted to a paragraph block, the bullets are lost. Currently, list blocks are not supported. When support is added, behavior should be tested again.
• [x] Fix pasting into heading blocks (see known issues in PR #553)
• [x] ~Fix pasting into code blocks (see known issues in PR #553)~ -> #822
• [x] #828 Fix cursor position after paste (see known issues in PR #553)
• [ ] Fix or log loss of inline styles on pasted span tags
• [x] Fix pasting URLs with a selection (fixed with PR #644).

• [x] Pasting inline text into a link splits the link apart #839

  Additional work

• [x] Add try/catch fallback to plain text to guard against errors (in production) in unexplored code paths, in lieu of testing (fixed with PR #646)

• [x] Improve comments in jsdom-patches.js (related comment) (PR #826)
• [ ] Log feature degradation caused by mobile DOM (related comment)
• [ ] Research additional patches for jsdom-jscore to support missing features from web code
• [ ] Refactor splitContent to a common interface with web, consider using options object (related comment)
• [ ] Handle deprecation of onSplit as discussed here. Related: #394
• [x] Create tests (manual tests here as starting point) (UI tests added here: https://github.com/wordpress-mobile/gutenberg-mobile/pull/1100)
• [ ] Support normalizing inline styles on <span> tags (details here)
• [ ] Support for third party keyboard / clipboard managers
• [ ] Target 3 from #238 (WP apps, unsupported blocks, and uploading images on the spot)

[diegoreymendez]

Adding some notes here after my findings today while working on Fix cursor position after paste:

This one's tricky, as we gotta implement a mechanism to update the caret position from JS to Native, meaning we also have to implement a mechanism similar to the one used for the content (through lastEventCount). @daniloercoli knows what that mechanism does.

This is something I don't feel very comfortable trying to rush for tomorrow, so I'll pause now.

[koke]

I tested pasting on the lists branch #704 and it seems to work fine 🎉 so I checked that item from the list.

[koke]

Pasting images along with text sometimes omits the images

I can confirm this one happens with the post mentioned although other images work. It was interesting to notice that if I just copied an image from the post, it worked, but if the selection also contains some text before the image, the pasting skipped the image. There seems to be something going on in cleanNodeList but I didn't get to the bottom of it.

[koke]

Fix cursor position after paste

Still happening on Android: the keyboard is dismissed but the caret remains at the beginning of the paragraph. There are several issues currently with selection, so it might or might not be related. Worth a separate issue to track it.

[koke]

Loss of inline style information on span tags
When pasting html containing text with inline styles on a tag, the styles may be lost

About this one, it's not clear to me if it always happens or only for some cases, and if we know which cases. From what I understand it's native specific and due to our DOM implementation.

I know we're using JSDOM Level 1, maybe @hypest knows why exactly that level, and style is defined in level 2. So maybe just switching to JSDOM level 2 or 3 would help with this and other DOM issues?

Besides the technical details, do we have any examples were this would be a problem?

[mkevins]

I know we're using JSDOM Level 1, maybe @hypest knows why exactly that level, and style is defined in level 2. So maybe just switching to JSDOM level 2 or 3 would help with this and other DOM issues?

When I initially explored this, I had the same thought (maybe we can just solve some issues by using a different level). For the changes I needed to get the basics working, merely increasing the levels was insufficient, as some methods / functions were still missing, and there is still an exception being thrown that is outdated.

But, now that those changes have been patched in, I think it is definitely worth re-exploring what gains can be easily made by simply changing the levels. Do you think it's worth waiting until we have some tests in place? I'm not entirely sure what other areas of the code make use of these DOM implementations.

Besides the technical details, do we have any examples were this would be a problem?

This, I am unsure of...

[koke]

Thanks for the context. I think that without having a real world example of this, it doesn't feel like a big priority at the moment. I'd put this on hold until we get some reports of missing styling on pasting, or there's another issue that demands looking at JSDOM levels.

[hypest]

I know we're using JSDOM Level 1, maybe @hypest knows why exactly that level

As far as I recall from back then, I only wanted to add access to some constants defined in the core.Node, without needing to manually recreate them in our global.js.

I think there is probably no reason to stick to Level 1. We can try 2 or 3.

[supernovia]

We've got a report of some pasting errors here:
https://en.forums.wordpress.com/topic/wordpress-android-app-3

[mkevins]

Thanks for reporting this @supernovia :+1:

Do you know, offhand, whether a message was logged in the console while reproducing this? Also, any steps you can list to reproduce the issue would be very helpful (e.g. is there particular content from google docs that causes the issue, or just anything from that app?).

[supernovia]

Ah sorry I missed the ping, @mkevins . The user wasn't using console. I was not able to duplicate it on my end. I can ask them for specifically what they're pasting so I can try again to duplicate if you'd like.

[supernovia]

@mkevins they are not finding console errors. They did share extensive details about what they are trying to paste and which apps / formats give them problems, though.

[mkevins]

Thank you @supernovia for gathering more information. :smiley:

Regarding the console message, in particular, I was wondering whether there was a message about the paste handling fallback in the mobile app. The message is logged here. The mobile app has a try/catch to catch errors while parsing pasted content, and it falls back to plain-text when it encounters an error. The web version will not show that particular log message though.

I'm not sure the user would see that, but I originally had the impression that you were also encountering the same issue:

With the block editor, when I paste some formatted text, it really does paste as plain text for me, too.

Can you clarify whether you encountered the same issue? (also, on web, or mobile)?

Thanks for your help on this!

[supernovia]

Hey @mkevins, I can try to duplicate this now, but how do I view the console in the app?

[mkevins]

Hey @supernovia :wave: :smile:

Are you using a development version of the app, or from the Play Store? Also, do you have Android Studio or adb installed on your computer?

[supernovia]

I don't have Android Studio or adb.
I am using alpha-189 currently.

[mkevins]

Hi @supernovia :wave:

Without adb, you can still access some logging information via the app. If you click the "Me" icon on the main screen, and then click "Help & Support", there should be an option called "Application log". It may be worth checking that, although, I'm not sure off-hand if these particular log messages will show up in that list.

[designsimply]

This came up in 13.6 beta testing.

Steps to reproduce:

1. Copy some text.
2. Open a new post with the block editor.
3. Try to paste the copied content into the title area.
4. Try with "Paste" and "Paste without Formatting".

Result: cannot paste content into the title area. (iOS: 1m36s, Android: 39s)

^{Tested with WPiOS 13.6.0.1 (TestFlight beta) on iPhone 6S iOS 13.2.2 and WPAndroid 13.6-rc-3 on Pixel 3 Android 10.}

_{/hat tip @koke for the report (internal reference: p5T066-14K-p2#comment-3790)}

App logs from iOS test:

```2019-11-12 12:51:17:334 ===========================================================================
2019-11-12 12:51:17:335 Launching WordPress for iOS 13.6 (13.6.0.1)...
2019-11-12 12:51:17:335 Crash count: 0
2019-11-12 12:51:17:335 Debug mode: Production
2019-11-12 12:51:17:335 Extra debug: NO
2019-11-12 12:51:17:337 Device model: iPhone 6s (iPhone8,1)
2019-11-12 12:51:17:337 OS: iOS, 13.2.2
2019-11-12 12:51:17:346 Language: en-US
2019-11-12 12:51:17:347 UDID:
2019-11-12 12:51:17:347 APN token:
2019-11-12 12:51:17:347 Launch options: [:]
2019-11-12 12:51:17:371 wp.com account:
2019-11-12 12:51:17:334 ===========================================================================
2019-11-12 12:51:17:335 Launching WordPress for iOS 13.6 (13.6.0.1)...
2019-11-12 12:51:17:335 Crash count: 0
2019-11-12 12:51:17:335 Debug mode: Production
2019-11-12 12:51:17:335 Extra debug: NO
2019-11-12 12:51:17:337 Device model: iPhone 6s (iPhone8,1)
2019-11-12 12:51:17:337 OS: iOS, 13.2.2
2019-11-12 12:51:17:346 Language: en-US
2019-11-12 12:51:17:347 UDID: 023D9765-1F3F-4922-A17C-BE542CF7FE1D
2019-11-12 12:51:17:347 APN token: 1ebb817f95747c32e676ded18bd30eaf813bacbe8022121a2d88aa1de360e437
2019-11-12 12:51:17:347 Launch options: [:]
2019-11-12 12:51:17:371 wp.com account:
2019-11-12 16:53:58:692 🔵 Tracked: editor_post_created
2019-11-12 16:53:59:846 🔵 Tracked: editor_session_start )>
2019-11-12 16:54:11:346 TracksService Error while remote calling: Error Domain=TracksErrorDomain Code=11 "Invalid HTTP response received from host." UserInfo={NSLocalizedDescription=Invalid HTTP response received from host.}
2019-11-12 16:54:11:489 TracksService sendQueuedEvents completed. Sent 3 events.
2019-11-12 16:55:08:863 applicationWillResignActive(_:)
2019-11-12 16:55:08:939 Stats: finished persisting Period Stats to disk.
2019-11-12 16:55:09:213 applicationDidEnterBackground(_:)
2019-11-12 16:55:09:217 🔵 Tracked: application_closed
2019-11-12 16:55:09:231 PingHub disconnecting
2019-11-12 16:55:11:447 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 16:55:11:450 PingHub disconnected: WSError(type: Starscream.ErrorType.protocolError, message: "", code: 1000)
2019-11-12 16:55:48:605 applicationWillEnterForeground(_:)
2019-11-12 16:55:48:609 PingHub connecting
2019-11-12 16:55:48:893 applicationDidBecomeActive(_:)
2019-11-12 16:55:48:902 🔵 Tracked: application_opened
2019-11-12 16:55:48:936 checkAppleIDCredentialState: Apple ID state: 1
2019-11-12 16:55:48:965 PingHub connected
2019-11-12 16:56:04:068 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 17:03:31:775 applicationWillResignActive(_:)
2019-11-12 17:03:31:869 Stats: finished persisting Period Stats to disk.
2019-11-12 17:03:32:140 applicationDidEnterBackground(_:)
2019-11-12 17:03:32:142 🔵 Tracked: application_closed
2019-11-12 17:03:32:155 PingHub disconnecting
2019-11-12 17:03:33:303 PingHub disconnected: WSError(type: Starscream.ErrorType.protocolError, message: "", code: 1000)
2019-11-12 17:03:33:303 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 17:03:43:126 applicationWillEnterForeground(_:)
2019-11-12 17:03:43:130 PingHub connecting
2019-11-12 17:03:43:342 PingHub connected
2019-11-12 17:03:43:421 applicationDidBecomeActive(_:)
2019-11-12 17:03:43:437 🔵 Tracked: application_opened
2019-11-12 17:03:43:463 checkAppleIDCredentialState: Apple ID state: 1
2019-11-12 17:03:58:540 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 17:04:20:715 applicationWillResignActive(_:)
2019-11-12 17:04:20:804 Stats: finished persisting Period Stats to disk.
2019-11-12 17:04:21:066 applicationDidEnterBackground(_:)
2019-11-12 17:04:21:069 🔵 Tracked: application_closed
2019-11-12 17:04:21:079 PingHub disconnecting
2019-11-12 17:04:21:884 PingHub disconnected: WSError(type: Starscream.ErrorType.protocolError, message: "", code: 1000)
2019-11-12 17:04:21:885 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 17:04:33:525 applicationWillEnterForeground(_:)
2019-11-12 17:04:33:525 PingHub connecting
2019-11-12 17:04:33:762 PingHub connected
2019-11-12 17:04:33:807 applicationDidBecomeActive(_:)
2019-11-12 17:04:33:818 🔵 Tracked: application_opened
2019-11-12 17:04:33:899 checkAppleIDCredentialState: Apple ID state: 1
2019-11-12 17:04:49:038 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 17:05:09:812 applicationWillResignActive(_:)
2019-11-12 17:05:09:900 Stats: finished persisting Period Stats to disk.
2019-11-12 17:05:10:162 applicationDidEnterBackground(_:)
2019-11-12 17:05:10:164 🔵 Tracked: application_closed
2019-11-12 17:05:10:173 PingHub disconnecting
2019-11-12 17:05:11:665 PingHub disconnected: WSError(type: Starscream.ErrorType.protocolError, message: "", code: 1000)
2019-11-12 17:05:11:668 TracksService sendQueuedEvents completed. Sent 1 events.
2019-11-12 17:05:11:677 applicationWillEnterForeground(_:)
2019-11-12 17:05:11:678 PingHub connecting
2019-11-12 17:05:11:904 PingHub connected
2019-11-12 17:05:11:998 applicationDidBecomeActive(_:)
2019-11-12 17:05:12:010 🔵 Tracked: application_opened
2019-11-12 17:05:12:040 checkAppleIDCredentialState: Apple ID state: 1
2019-11-12 17:05:15:320 🔵 Tracked: editor_session_end
2019-11-12 17:05:15:336 🔵 Tracked: editor_discarded_changes
2019-11-12 17:05:15:370 🔵 Tracked: editor_closed

App logs from Android test:

WordPress - 13.6-rc-3 - Version code: 794
Android device name: Google Pixel 3

35 - [Nov-13 24:14 EDITOR] Running application "gutenberg" with appParams: {"initialProps":{"initialData":"","initialHtmlModeEnabled":false,"initialTitle":"","locale":"en-us","translations":{}},"rootTag":21}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
36 - [Nov-13 24:14 EDITOR] 'locale', 'en', {}
37 - [Nov-13 24:14 EDITOR] 'apiFetch called with options', { path: '/wp/v2/media', method: 'OPTIONS', parse: false }
38 - [Nov-13 24:14 STATS] 🔵 Tracked: editor_session_start, Properties: {"has_unsupported_blocks":"0","editor":"gutenberg","content_type":"new","session_id":"a44f36be-78a9-449e-8dc5-494420a9d7f7","post_type":"post","blog_type":"wpcom","editor_has_hw_disabled":"0","unsupported_blocks":[]}
39 - [Nov-13 24:14 STATS] 🔵 Tracked: editor_closed
40 - [Nov-13 24:14 API] Dispatching action: PostAction-UPDATE_POST
41 - [Nov-13 24:14 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
42 - [Nov-13 24:14 UTILS] App goes to background
43 - [Nov-13 24:14 STATS] 🔵 Tracked: application_closed, Properties: {"last_visible_screen":"Post Editor","time_in_app":21}
44 - [Nov-13 24:14 MAIN] ConnectionChangeReceiver successfully unregistered
45 - [Nov-13 24:14 UTILS] App comes from background
46 - [Nov-13 24:14 STATS] 🔵 Tracked: application_opened
47 - [Nov-13 24:14 READER] notifications update job service > job scheduled
48 - [Nov-13 24:14 STATS] 🔵 Tracked: editor_opened, Properties: {"blog_id":25095746,"has_gutenberg_blocks":false,"post_type":"post","is_jetpack":false,"editor_has_hw_disabled":"0"}
49 - [Nov-13 24:14 NOTIFS] notifications update job service > created
50 - [Nov-13 24:14 NOTIFS] notifications update service > completed
51 - [Nov-13 24:14 NOTIFS] notifications update job service > all tasks completed
52 - [Nov-13 24:14 NOTIFS] notifications update job service > destroyed
53 - [Nov-13 24:14 EDITOR] 'Processed inline HTML:\n\n', 'alphabetical order.'
54 - [Nov-13 24:14 API] Dispatching action: PostAction-UPDATE_POST
55 - [Nov-13 24:14 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
56 - [Nov-13 24:14 API] Dispatching action: PostAction-UPDATE_POST
57 - [Nov-13 24:14 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
58 - [Nov-13 24:14 EDITOR] 'Processed inline HTML:\n\n', 'alphabetical order.'
59 - [Nov-13 24:14 API] Dispatching action: PostAction-UPDATE_POST
60 - [Nov-13 24:14 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
61 - [Nov-13 24:14 STATS] 🔵 Tracked: editor_closed
62 - [Nov-13 24:15 STATS] 🔵 Tracked: editor_opened, Properties: {"blog_id":25095746,"has_gutenberg_blocks":true,"post_type":"post","is_jetpack":false,"editor_has_hw_disabled":"0"}
63 - [Nov-13 24:15 API] Dispatching action: PostAction-UPDATE_POST
64 - [Nov-13 24:15 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
65 - [Nov-13 24:15 STATS] 🔵 Tracked: editor_draft_saved, Properties: {"blog_id":25095746,"post_id":0,"has_gutenberg_blocks":true,"post_type":"post","is_jetpack":false}
66 - [Nov-13 24:15 MAIN] UploadService > Created
67 - [Nov-13 24:15 MEDIA] MediaUploadHandler > Created
68 - [Nov-13 24:15 POSTS] PostUploadHandler > Created
69 - [Nov-13 24:15 POSTS] PostUploadHandler - UPLOAD_AS_DRAFT. Post:
70 - [Nov-13 24:15 API] Dispatching action: PostAction-PUSH_POST
71 - [Nov-13 24:15 STATS] 🔵 Tracked: editor_closed
```

[mkevins]

Thanks @designsimply for all the detailed info! 😄

I've had a chance to look into this a bit, and I have a small change locally which seems to fix the issue, but it may be best to confirm with either @SergioEstevao and @ellatrix before drafting a PR.

@SergioEstevao and @ellatrix 👋 I noticed the use of the __unstablePasteHandler prop in the native post-title component, but I didn't see it anywhere else in the current codebase. I tried the following diff and it seems to fix the mobile paste issue described above 👆. Would you mind taking a look?

Use block-editor RichText in post-title

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index a47de19cf..d63401698 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -8,13 +8,12 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { __experimentalRichText as RichText } from '@wordpress/rich-text';
+import { RichText } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { pasteHandler } from '@wordpress/blocks';

 /**
  * Internal dependencies
@@ -89,7 +88,6 @@ class PostTitle extends Component {
                    onSelectionChange={ () => { } }
                    onEnter={ this.props.onEnterPress }
                    disableEditingMenu={ true }
-                   __unstablePasteHandler={ pasteHandler }
                    __unstableIsSelected={ this.props.isSelected }
                >
                </RichText>

[SergioEstevao]

@mkevins while your approach works I think it's best to use the base rich-text component instead of the block/editor aware one.

Here is a PR with my proposed solution: https://github.com/WordPress/gutenberg/pull/18479

[cameronvoell]

• Pasting inline text into a link splits the link apart #839

I think we can check off and close the corresponding ticket for this one. See comment - https://github.com/wordpress-mobile/gutenberg-mobile/issues/839#issuecomment-566848211