-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to get rid of duplicating content inside <p> #1205
Comments
Maybe a plunkr demo here would clear up the behaviour you're describing and allow people to track down why this is happening. |
@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 |
There is one workaround: just change embed tree's structure:
|
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! |
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 The markup looks like this Immediately after doing an insert anything typed goes into my span text, ie 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 |
I see the issue and am investigating. Sorry that it took so long to get to this one.... |
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></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  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. |
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:
work well now. As soon as I put the code out there, please check and verify!! |
After testing I see that this works fine on Chrome, but NOT on Firefox, so it will take a bit more time &^%&( ;-). |
I have code with: 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>X</span>'; working well. But I also noticed that the ngModel is not updated with the correct html... so... a bit more. |
… content inside <p> DOM - added taSelection.updateLeftArrowKey() and taSelection.updateRightArrowKey() so that we check the selection after the cursor is moved and correct for the differences between Firefox and Chrome. - added taSelection.getFlattenedDom() that returns the nodes needed to allow the updateLeftArrowKey() and updateRightArrowKey() to function. Basically this returns a flattened set of Nodes that have text content as well as the associated parent Nodes. - insertHtml() now allows the insertion of a text with the zero-width space character. demo.html - fixed a bug where is had two editors with the same name. globals - added '#text' and 'spam' to the VALIDELEMENTS - defined ENTER_KEYCODE, TAB_KEYCODE, LEFT_ARROW, RIGHT_ARROW to make the code more transparent. main - small formatting change to the code. taBind - now use ENTER_KEYCODE, TAB_KEYCODE, LEFT_ARROW, RIGHT_ARROW definitions from global - shifted to using nodeName whenever we call match(VALIDELEMENTS) - element.on('keyup') now detects the LEFT_ARROW and RIGHT_ARROW and calls the taSelection.updateLeftArrowKey() or taSelection.updateRightArrowKey()
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. |
fix(DOM, globals, main, taBind): Fix for #1205 Duplicating content in…
I'm using custom buttons to insert videos and presentations (with
iframe
). It's inserted in such way: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.The text was updated successfully, but these errors were encountered: