Bug: Images inside links get moved outside the link on start

[bfintal]

If you have an image inside a link:

<a href='#'>
    <img src='http://placehold.it/350x150'/>
</a>

When you start editing the image gets moved outside the link and you can't get it back inside even when cancelling the edit:

<img src='http://placehold.it/350x150'/>
<a href='#'></a>

[anthonyjb]

I think the issue here is that you need to mark the <a> tag as an image, e.g:

<a href="#" data-ce-tag="img">
    <img  src='http://placehold.it/350x150'>
</a>

As you want the <a> tag to be treated as an image by the parser you need to mark it up in this way, if you create an image through the editor and add a link to it then save the page content you'll see this data attribute appended to the link automatically.

[bfintal]

Here's how I'm doing it. Initially, the content is this:

<div data-editable data-name="main-content">
    <p>
        <a href='#'>
            <img src='http://placehold.it/350x150'/>
        </a>
    </p>
</div>

Afterwards, I start the editor then it moves it out. I think the image shouldn't be moved out of the link and it should be handled. What's happening with the image inside the link?

I can't actually add images as of the moment. I tried it but nothing's happening, probably since I'm doing this in WordPress or that I'm not handling uploads yet. So I can't check the marked up html yet for images with a link.

Prior to editing, I also tried adding data-ce-tag="img" to the a tag but it still does the same. I also tried adding it to the p tag but it just disappears.

[anthonyjb]

So you'd need to change your initial content to:

<div data-editable data-name="main-content">
    <p>
        <a href='#' data-ce-tag="img">
            <img src='http://placehold.it/350x150'>
        </a>
    </p>
</div>

By default <a> tags aren't converted to images as potentially (longer term) they might wrap other elements as well.

The image shouldn't be moved outside the link, oddly when I add your code to the sandbox/index.html file in the demo (using Chrome) the <a> tag is just converted into a static element and editing and saving doesn't move the image outside of it.

Can you test that this issue doesn't occur if you add the following code to the sandbox demo in the repo:

<!-- Static element containing an image -->  
<a href="#">
    <img src="image.png" alt="Example of bad variable names" />
</a>

<!-- Editable image with link -->
<a href="#" data-ce-tag="img">
    <img src="image.png" alt="Example of bad variable names" />
</a>

If you get the same issue then it might well be an issue with a specific browser I need to look at so could you provide details.

[bfintal]

Still the same thing. In the sandbox, I added this (this is from the inspector):

<p>
    <a href="#">
        <img src="http://placehold.it/350x150" alt="Example of bad variable names">
    </a>
</p>
<p>
    <a href="#" data-ce-tag="img">
        <img src="http://placehold.it/350x150" alt="Example of bad variable names">
    </a>
</p>

After clicking the edit, I'm getting this:

<p class="ce-element ce-element--type-text">
    <img alt="Example of bad variable names" src="http://placehold.it/350x150">
    <a href="#"></a>
</p>
<p class="ce-element ce-element--type-text">
    <img alt="Example of bad variable names" src="http://placehold.it/350x150">
    <a data-ce-tag="img" href="#"></a>
</p>

I'm using Chrome in Mac OS X 10.11

[anthonyjb]

Ahhh... I understand now you're adding the image within an editable paragraph not as an editable image. You can't add images within paragraphs right now (well you can using HTML and they'll appear but you can't add them via the editor).

That does however look like a bug in the the way that the HTMLString library is optimizing, clearly the image should be retained inside the <a> tag. Sorry for the confusion I'll mark it as a bug and have a look at resolving it.

[bfintal]

Yup, you cannot add them, I'm totally fine with that. I'm modifying the HTML for editing them then performing the necessary CT functions so that the editor can see the changes like you mentioned.

Thanks, hopefully we can fix it :)

[anthonyjb]

Yep - just tested the code in HTMLString Spec and it fails in the way you described, hopefully it's something easy :)

[anthonyjb]

@bfintal - OK I think that's resolved that.

[bfintal]

Wow that was fast. Thanks! Confirmed on my end 👍

[anthonyjb]

Awesome (fortunately an easy fix) - sent you a question on Gitter re your early question :)