#472 Inline Blocks contenteditable=false fixes

[MrAlexand0r]

1. Element is getting split when it shouldn't
   

2. Strange behaviour when using the insert API after inserting a contenteditable false node,

    this.squire.insertPlainText('before', false);
    this.squire.insertElement(node);
    this.squire.insertPlainText('after', false);

3. contenteditable false nodes are being merged

firefox_ZCvltc5qND.mp4

This pull requests fixes these bugs.

[kyselberg]

you probably are able to fix this issue without PR by wrapping your element in two element with contenteditable=false

<span contenteditable="false">
  <span contenteditable="false">
    {{ Placeholder }}
  </span>
</span>

[MrAlexand0r]

@kyselberg I tried that just now, but same behaviour occurs.
Here is the Element I created:

<span tabindex="0" contenteditable="false" draggable="true" class="blot-boilerplate">
  <span contenteditable="false">
    Placeholder
  </span>
</span>

If you check the file changes, you will see that contenteditable="false" is only handeled correctly for block type elements

[kyselberg]

i see
you r right, i used hack with contenteditable=false only to control cursor and hack with random class names to avoid collapsing.

[MrAlexand0r]

I did not realize that I tried to pull request the main branch of my fork...
If this is something you want to merge I can create a new branch and cherry pick the relevant changes.

I can also create a code sandbox if you need some practical examples of the inline contenteditable="false" element bugs in action