Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pasting external content - known issues #624

Open
12 of 20 tasks
mkevins opened this issue Feb 20, 2019 · 22 comments
Open
12 of 20 tasks

Pasting external content - known issues #624

mkevins opened this issue Feb 20, 2019 · 22 comments
Labels
[Pri] Low [Type] Enhancement Improves a current area of the editor Writing Flow

Comments

@mkevins
Copy link
Contributor

mkevins commented Feb 20, 2019

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

Known issues

Additional work

@diegoreymendez
Copy link
Contributor

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
Copy link
Member

koke commented Apr 5, 2019

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

@koke
Copy link
Member

koke commented Apr 5, 2019

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
Copy link
Member

koke commented Apr 5, 2019

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
Copy link
Member

koke commented Apr 5, 2019

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
Copy link
Contributor Author

mkevins commented Apr 5, 2019

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
Copy link
Member

koke commented Apr 5, 2019

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
Copy link
Contributor

hypest commented Apr 9, 2019

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
Copy link

supernovia commented Aug 13, 2019

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

@mkevins
Copy link
Contributor Author

mkevins commented Aug 19, 2019

Thanks for reporting this @supernovia 👍

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
Copy link

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
Copy link

@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
Copy link
Contributor Author

mkevins commented Sep 2, 2019

Thank you @supernovia for gathering more information. 😃

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
Copy link

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

@mkevins
Copy link
Contributor Author

mkevins commented Sep 23, 2019

Hey @supernovia 👋 😄

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
Copy link

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

@mkevins
Copy link
Contributor Author

mkevins commented Oct 9, 2019

Hi @supernovia 👋

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
Copy link
Contributor

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)

title-paste-test-ios title-paste-test-android
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: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: <Account username: design5279 ID: 4507313, Email: verified ObjectID: x-coredata://228685F8-4114-43D5-A743-1E1191B89627/Account/p1>
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: <Account username: design5279 ID: 4507313, Email: verified ObjectID: x-coredata://228685F8-4114-43D5-A743-1E1191B89627/Account/p1>
2019-11-12 16:53:58:692 🔵 Tracked: editor_post_created <blog_id: 5276229, tap_source: tab_bar>
2019-11-12 16:53:59:846 🔵 Tracked: editor_session_start <blog_type: wpcom, content_type: new, editor: gutenberg, has_unsupported_blocks: 0, post_type: post, session_id: 19854F18-AB1D-487F-9E73-8100AFBF100F, unsupported_blocks: (
)>
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 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationWillResignActive(_:)
2019-11-12 16:55:08:939 Stats: finished persisting Period Stats to disk.
2019-11-12 16:55:09:213 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationDidEnterBackground(_:)
2019-11-12 16:55:09:217 🔵 Tracked: application_closed <last_visible_screen: Post Editor, time_in_app: 539>
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 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationWillEnterForeground(_:)
2019-11-12 16:55:48:609 PingHub connecting
2019-11-12 16:55:48:893 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationWillResignActive(_:)
2019-11-12 17:03:31:869 Stats: finished persisting Period Stats to disk.
2019-11-12 17:03:32:140 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationDidEnterBackground(_:)
2019-11-12 17:03:32:142 🔵 Tracked: application_closed <last_visible_screen: Post Editor, time_in_app: 463>
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 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationWillResignActive(_:)
2019-11-12 17:04:20:804 Stats: finished persisting Period Stats to disk.
2019-11-12 17:04:21:066 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationDidEnterBackground(_:)
2019-11-12 17:04:21:069 🔵 Tracked: application_closed <last_visible_screen: Post Editor, time_in_app: 38>
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 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationWillResignActive(_:)
2019-11-12 17:05:09:900 Stats: finished persisting Period Stats to disk.
2019-11-12 17:05:10:162 <WordPress.WordPressAppDelegate: 0x283bc2400> applicationDidEnterBackground(_:)
2019-11-12 17:05:10:164 🔵 Tracked: application_closed <last_visible_screen: Post Editor, time_in_app: 36>
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 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <WordPress.WordPressAppDelegate: 0x283bc2400> 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 <blog_type: wpcom, content_type: new, editor: gutenberg, has_unsupported_blocks: 0, outcome: discard, post_type: post, session_id: 19854F18-AB1D-487F-9E73-8100AFBF100F>
2019-11-12 17:05:15:336 🔵 Tracked: editor_discarded_changes <blog_id: 5276229, editor_source: gutenberg, has_gutenberg_blocks: 1>
2019-11-12 17:05:15:370 🔵 Tracked: editor_closed <blog_id: 5276229, editor_source: gutenberg, has_gutenberg_blocks: 0>

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
Copy link
Contributor Author

mkevins commented Nov 13, 2019

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
Copy link
Contributor

@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: WordPress/gutenberg#18479

@cameronvoell
Copy link
Contributor

I think we can check off and close the corresponding ticket for this one. See comment - #839 (comment)

@SergioEstevao SergioEstevao added [Pri] Low [Type] Enhancement Improves a current area of the editor labels May 4, 2020
@hypest hypest removed this from the Future milestone Jun 9, 2020
@irfano
Copy link
Member

irfano commented Feb 1, 2024

A user review has been received regarding this issue: p1706751013603739-slack-C06BDMKNBDF

I pasted the same HTML content to a post from the web and mobile. The web was able to apply styles to the text successfully, whereas the app pasted it as plain text.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Pri] Low [Type] Enhancement Improves a current area of the editor Writing Flow
Projects
None yet
Development

No branches or pull requests

9 participants