Summernote wrapping content in spans

[Antony]

All of this shows we need a better editor @George … please oh please can this be prioritised in 2025?

[patrick]

It seems to be a bug in the browser with contenteditable. It depends on the styles on your page if it is adding the span or not. It looks like it is getting font styles from the body element.

A workaround is letting chrome know the styles are already applied, check the styles that are being added on the span and create in your css a rule .note-editable span and add the styles there like:

.note-editable span {
  background-color: var(--bs-body-bg);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  text-align: var(--bs-body-text-align);
}

It now will not create the span, the code can differ depending on the styles, just copy the styles it was adding on the span.

[brad]

Unfortunately this does not change anything.

I even added the important designation and it still adds the span tag.

.note-editable span {
            background-color: var(--bs-body-bg) !important;
            font-size: var(--bs-body-font-size) !important;
            font-weight: var(--bs-body-font-weight) !important;
            text-align: var(--bs-body-text-align) !important;
            background-color: var(--bs-card-bg) !important;
            color: var(--bs-body-color) !important;
            font-family: var(--bs-body-font-family) !important;
        }

I think it is time we got a new editor.

[patrick]

The workaround did work for me.

Summernote is not the only editor having this issue, all editors using contenteditable have the same issue. The bug was already reported in 2013 by a developer from ckeditor. The bug will probably not be resolved anytime soon as it is still open.

https://issues.chromium.org/issues/41003960
https://bugs.webkit.org/show_bug.cgi?id=114791

[brad]

@patrick

The workaround did work for me.

Did it work for you in Chrome as well? Seems to have worked in Safari and Firefox. But in Chrome I am still getting the error. Maybe I have some sort of caching issue?

Update: It works in all browsers on mobile, and all browsers except Chrome on Desktop. Well, it sort of works on Chrome Desktop. It removes some of the styles but these ones remain. I don't know what else to try. Guess I will just have to live with it.

font-family: var(--bs-body-font-family) !important; 
font-size: var(--bs-body-font-size) !important; 
font-weight: var(--bs-body-font-weight) !important; 
text-align: var(--bs-body-text-align) !important;

[brad]

Fixed: Updating Chrome to latest version has corrected the problem. The work around that @patrick provided does indeed work.