Opened 6 years ago

Closed 6 years ago

#11018 closed Bug (duplicate)

Image properties dialog: attaching links containing Emoji

Reported by: feigner Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

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):

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>

Change History (4)

comment:1 Changed 6 years ago by Jakub Ś

Status: newpending

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?

comment:2 Changed 6 years ago by 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>

comment:3 Changed 6 years ago by 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.

comment:4 Changed 6 years ago by Jakub Ś

Resolution: duplicate
Status: pendingclosed
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy