Image properties dialog: attaching links containing Emoji

[feigner]

Ran across a strange bug today. Basically, when attaching a link containing Emoji characters to an image via the 'image properties' dialog, things don't appear to get properly encoded, which is causing some downstream issues for me.

Steps to reproduce (within the CKEditor demo):

• insert a new image into the CKEditor field via the 'image properties' dialog
• within the dialog, attach a link containing emoji characters (ex: ​https://flipboard.com/section/%F0%9F%8E%A7beats'n'the-bloodstream%F0%9F%8E%A7-b2eF8i)
• click 'ok'
• click 'source' and note that things aren't escaped as expected.

Note: I've found a workaround. Insert an image as described above, but instead of using the 'link' tab on the image properties dialog, hit 'ok' and insert a link using the link dialog. This appears to work as expected:

Original:

<a href="https://flipboard.com/section/🎧beats'n'the-bloodstream🎧-b2eF8i"><img alt="" src="http://b.cksource.com/a/1/img/sample.jpg" style="height:200px; width:160px" /></a>

Workaround:

<a href="https://flipboard.com/section/%F0%9F%8E%A7beats'n'the-bloodstream%F0%9F%8E%A7-b2eF8i"><img alt="" src="http://b.cksource.com/a/1/img/sample.jpg" style="height:200px; width:160px" /></a>

[Jakub Ś]

Is there any chance you could send us a screencast because I may be missing something.

I have opened demo page and on image I have added link that you have marked as original. It has worked in FF and in IE. In Webkit and Blink (Safari and Opera, Chrome) this image wasn't understood but this looks like browser issue. Just open this page in Chrome and instead of head phones you will see squares. Is this what you had in mind?

[feigner]

Howdy!

Thanks for the quick response. Unfortunately, I am unable to send a screencast for this issue. I've tested this with multiple browsers (FF, Safari, Chrome) and am experiencing the same behavior across all of them.

To restate what I'm seeing: Attaching a link (that contains emoji) to an image via the 'image properties' dialog yields different markup than attaching a link with the standard link option.

Within the demo editor, I set up two images. On the first image, I attached a link with the link menu option. On the second, I attached the link with the image properties dialog. After clicking 'source,' the markup is different.

Original link (copied from browser URL bar): ​https://flipboard.com/section/%F0%9F%8E%A7beats'n'the-bloodstream%F0%9F%8E%A7-b2eF8i

Demo editor output:

<p class='first'><a href="https://flipboard.com/section/%F0%9F%8E%A7beats%27n%27the-bloodstream%F0%9F%8E%A7-b2eF8i"><img alt="Saturn V carrying Apollo 11" src="http://b.cksource.com/a/1/img/sample.jpg" /></a></p>

<p class='second'><a href="https://flipboard.com/section/🎧beats'n'the-bloodstream🎧-b2eF8i"><img alt="Saturn V carrying Apollo 11" src="http://b.cksource.com/a/1/img/sample.jpg" /></a></p>

[Jakub Ś]

Ok I think I got it. You insert below link into image-link-tab and into link dialog

https://flipboard.com/section/%F0%9F%8E%A7beats%27n%27the-bloodstream%F0%9F%8E%A7-b2eF8i

In link dialog it gets unchanged while in image-link-tab it gets changed. This is because of this issue: #10867.

Image link tab still uses decode uri while it should not.

I'm closing this as dup of #10867. Please refer to that ticket in the future.