Summernote: Chrome is wrapping line in span with styling upon deleting previous line break

Created on 13 Dec 2018  路  3Comments  路  Source: summernote/summernote

Bootstrap 4 version is wrapping 2nd half of merged paragraphs (when I say merged, just hit backspace between two paras to delete linebreak) in a <span> with a load of styling

steps to reproduce

  1. Go to For bootstrap 4
  2. Type in a sentence
  3. Hit return
  4. Type in a new sentence
  5. Inspect code and see two paras eg. ...
<p>The quick brown fox jumps over the lazy dog.</p>
<p>One, two, three, four.</p>
  1. Go to beginning of 2nd line and hit backspace

Expected result...

<p>The quick brown fox jumps over the lazy dog.One, two, three, four.</p>

Actual result...

<p>The quick brown fox jumps over the lazy dog.<span style="background-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 1rem;">One, two, three, four.</span></p>

browser version and os version and summernote version

Browser -> Chrome Version 70.0.3538.110 (Official Build) (64-bit)
OS -> OS X 10.14.2

Bug

Most helpful comment

Update:
I discussed this issue with my lecturer and after studying the issue he surmised that the problem is not with Summernote, but with Chrome's interpretation of contenteditable. A quick google search led to proving this theory true.

A patch:

$(document).on("DOMNodeInserted", '.note-editable', function (e) {
    if (e.target.tagName === "SPAN") {
        $(e.target).replaceWith($(e.target).contents());
    }
});

Although Chrome still applies styling to any elements inside e.target too.

All 3 comments

Hiya! Gentle bump! I know you guys are very busy, was wondering if there's any progress on this? Cheers!

Update:
I discussed this issue with my lecturer and after studying the issue he surmised that the problem is not with Summernote, but with Chrome's interpretation of contenteditable. A quick google search led to proving this theory true.

A patch:

$(document).on("DOMNodeInserted", '.note-editable', function (e) {
    if (e.target.tagName === "SPAN") {
        $(e.target).replaceWith($(e.target).contents());
    }
});

Although Chrome still applies styling to any elements inside e.target too.

I had the same problem, I solved by adding css rules to note-editable class:

.note-editable * {
    line-height: inherit!important;
    font-size: 14px!important;
    font-family: 'Open Sans';
 }

This fixed it for me.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

semplon picture semplon  路  3Comments

chrismaliszewski picture chrismaliszewski  路  4Comments

WaKeMaTTa picture WaKeMaTTa  路  3Comments

sgthangtran picture sgthangtran  路  4Comments

kossa picture kossa  路  3Comments