iOS "Copy" from Safari share sheet can't be pasted into CKEditor

[winzig]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

12.4 (or latest version on demo page)

📋 Steps to reproduce

1. Go to https://ckeditor.com/ckeditor-5/demo/ in Mobile Safari
2. Hit the share button in Mobile Safari (bug exhibits on iOS 12 and 13)
3. Tap "Copy"
4. Put focus into the CKeditor demo editing box
5. Long press and tap Paste

✅ Expected result

The URL of the page that was copied should be pasted into the editor. Or perhaps even the linked title of the page (which is what happens if you paste the copy into, for example, the Notes app instead).

❎ Actual result

Nothing at all is pasted into CKEditor.

📃 Other details that might be useful

I can reproduce this on both iOS 12 and 13.1. Other copying from within Safari seems to work fine. E.g. if I select text on a page in Safari, or the URL from the address bar at the top of the page, and then paste into CKeditor, it works. So far the only one not working is the "Copy" from share sheet in Mobile Safari.

[Mgsy]

Hi, thanks for the report. I can confirm this issue.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[uaza]

This is a very annoying bug for us and our customers, so I would be grateful if it is fixed soon.

[mahesh-yadav-hipl]

We are facing same issue.

[dtdesign]

We have received similar reports from users. Inspecting the paste event reveals that the actual URL is not in a text or HTML format, but instead is provided as text/uri-list with no plain text variant available.

> console.log(event.clipboardData.getData("text/uri-list"));
< "https://example.com"
> console.log(typeof event.clipboardData.getData("text/uri-list"));
< "string"

MDN recommends providing a text/plain type as a fallback value but lists text/uri-list as the proper type for dragging links: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#dragging_links

Excerpt from the specification (https://www.iana.org/assignments/media-types/text/uri-list):

The format of text/uri-list resources is:

1. Any lines beginning with the '#' character are comment lines and are ignored during processing. (Note that URIs may contain the '#' character, so it is only a comment character when it is the first character on a line.)

2. The remaining non-comment lines shall be URIs (URNs or URLs), encoded according to the URL or URN specifications (RFC2141, RFC1738 and RFC2396). Each URI shall appear on one and only one line. Very long URIs are not broken in the text/uri-list format. Content-transfer-encodings may be used to enforce line length limitations.

3. As for all text/* formats, lines are terminated with a CRLF pair.

[hiteshchawla111]

I’m encountering the same issue where copying content from Safari’s Share Sheet on iOS and pasting it into CKEditor doesn't work as expected. In my current approach, I’m using the following code to handle clipboard data:

if (navigator.clipboard) { clipboardData = await navigator.clipboard?.readText(); console.log({ navigator: clipboardData }); } else { clipboardData = e?.clipboardData?.getData("text/plain"); console.log({ textPlain: clipboardData }); }

This works for standard clipboard operations, but it seems to fail when pasting content from Safari’s Share Sheet. Is there a known issue with this method on iOS or Safari? Any insights or workarounds would be greatly appreciated!

[dtdesign]

@hiteshchawla111 Please see my message before yours, you will need to query event.clipboardData.getData("text/uri-list") to retrieve those.

[hiteshchawla111]

@hiteshchawla111 Please see my message before yours, you will need to query event.clipboardData.getData("text/uri-list") to retrieve those.

@dtdesign

Thank you for the suggestion! I tried implementing event.clipboardData.getData("text/uri-list"), but I'm still running into issues. Here’s what I’ve done so far:

`const handlePaste = async (e: any) => { console.log({ event: e.clipboardData }); // Rest of the code to handle clipboard data };

editor.editing.view.document.on("paste", handlePaste);`

When I log e.clipboardData, it returns undefined in the console. It seems like clipboardData isn’t accessible through the paste event.

Is there anything I might be missing in how I'm accessing clipboardData? Or could there be any other workaround for handling pasting from Safari's Share Sheet specifically?

[dtdesign]

Do not use an async event handler for paste! The paste event is synchronous and does not permit access to the clipboard once the event has been completed. Using async is effectively a Promise which is run at the next cycle of the event loop.

[hiteshchawla111]

Do not use an async event handler for paste! The paste event is synchronous and does not permit access to the clipboard once the event has been completed. Using async is effectively a Promise which is run at the next cycle of the event loop.

Thank you for the suggestion! I ensured the paste event handler is synchronous and only pass the clipboard data to an async function after capturing it immediately. However, my functionality is still not working as expected. Could there be another issue I should look at?

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[winzig]

The bug still exists...