How to get rid of duplicating content inside <p>

[alyrik]

I'm using custom buttons to insert videos and presentations (with iframe). It's inserted in such way:

var embed = '<span class="project-text__video" src="' + videoId + '"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe></span>';

restoreSelection();
textAngular.$editor().wrapSelection('insertHTML', embed, true);

Everything is OK. But pressing Enter (when caret is inside that inserted block) causes its duplication.

How to handle this? I want it to create new empty <p> but not to duplicate inner content.

[stevenkissack]

Maybe a plunkr demo here would clear up the behaviour you're describing and allow people to track down why this is happening.

[alyrik]

@stevokk, here's a plunker

Try to add a video (press a button). When the video is added try to set caret right on that block with a player (before it). Then press Enter. You'll see that <p class="project-text__video"> is duplicating right above the video block.

[alyrik]

There is one workaround: just change embed tree's structure:

var embed = '<p><span alt="video" src="' + videoId + '"></span><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe></p>';

[JoelParke]

I am assuming that this is the same with the 1.5.2 release, but could you verify? As I wasn't able to reproduce. (but I also was very tired! and maybe it's gone?) Thanks!

[gregory-h]

I can confirm this with 1.5.3 and it's a serious issue for us.

We're using insertHtml to inject content of the form <span>..</span>. After doing an insert my editor content looks like this, with the editor cursor posioned af the end of the inserted line.
Client First Name

The markup looks like this
<p><span class="user-view client.firstName">Client First Name</span><br></p>

Immediately after doing an insert anything typed goes into my span text, ie
<p><span class="user-view client.firstName">Client First Name and typed text</span><br></p>

Pressing enter duplicates the injected html but with empty text
`

Client First Name and typed text

`

The problem seems to be that after doing an insert the current selection doesn't match the view. One workaround mentioned is to wrap the injected content in a <p>, but that's not an option for us we need to inject inline content.

[JoelParke]

I see the issue and am investigating.  Sorry that it took so long to get to this one.... 
Joel

[JoelParke]

It turns out that the issue isn't any difference between the html and the text view.  That does exist and I am working to remove that if I can without breaking anything else.

But it seems that rangy doesn't really allow you to select something that is not visible.  For example I attempted changing:

embed = '<span></span><span class="project-text__video" src="' + videoId + '"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe></span>';

but that didn't help , but the following gets you much closer to what you want...

embed = '<span>&#65279;</span><span class="project-text__video" src="' + videoId + '"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe></span>';

where the &#65279; is a zero space 'space' which allows you to type into that <span>.  I also changed the taSelection.getSelection() code slightly in this case, and I have more to look at tomorrow.  

[JoelParke]

I have a PR that I am going to check-in later today as soon as I can test it more fully. Basically you will need to put the unicode no-width space character:

    

before your html that you will embed. This helps the browser do the right thing and we notice this no-width space and do the right thing behind the scenes.

For example:

    var embed = '&#65279;<p class="project-text__video" src="' + videoId + '"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe></p>';

   OR

     var embed = '&#65279;<span class="project-text__video" src="' + videoId + '"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe></span>';

work well now. As soon as I put the code out there, please check and verify!!
This was a pain because it is the browser that does the real work.

[JoelParke]

After testing I see that this works fine on Chrome, but NOT on Firefox, so it will take a bit more time &^%&( ;-).

[JoelParke]

I have code with:

embed = '<span>&#65279;</span><span class="project-text__video" src="' + videoId + '"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>X</span>';

working well.  But I also noticed that the ngModel is not updated with the correct html... so... a bit more.

[JoelParke]

I just merged in PR #1315 and believe this fixes this issue.  PLEASE test and left me know.  This was a royal pain, but I like the behavior now.  Closing this issue. please reopen in needed.