insertNode div, adds extra <p><br></p>

When I try to insert a div via insertNode, for example a bootstrap Card block, while my cursor is at the start or end of a paragraph, then insertNode adds two nodes! It adds my own node and another node which contains an empty paragraph like:

<p><br></p>

steps to reproduce

Place cursor at start or end of a paragraph and then run the following via a plugin.

var template = $('<div class="card"><div class="card-body"><p>example</p></div></div>');
context.invoke('editor.insertNode', template[0]);

attempt to fix the bug

I tried to fix the problem in my plugin, by finding the empty paragraphs and removing them (in this case, theId is the ID of the node I’ve just added, used as a selector below).

// Remove previous empty paragraph
var emptyPar = $('#'+theId).prev();
if(emptyPar[0].innerHTML==='<br>')
	emptyPar.remove();

// Remove next empty paragraph
var emptyPar = $('#'+theId).next();
if(emptyPar[0].innerHTML==='<br>')
	emptyPar.remove();

The above code works as expected, the bootstrap div card is added and any extra empty paragraphs are removed.

[ghost]

I’m sorry but code doesn’t seem to be of any help, it can’t add something at the cursor position.

I did some more tests with insertNode and it seems like it has several problems, it doesn’t seem fully implemented. For example, sometimes it adds the empty paragraph I describe in this bug report, but sometimes it does not, I am not sure why but it feels inconsistent. As a separate but report, I’ve mentioned it allows you to break the html by adding the wrong tags within a paragraph tag.

Personally, I wish insertNode has a second parameter insertNode(somenode, “after”) so that the new node is added after the current paragraph and not inside it.

Do you think its possible to implement that please?

[seltix5]

example here : https://codepen.io/seltix/pen/LYYqZpb