Editor Adds Span With Tons of Styling (Including a Smaller Font) ... Seemingly At Random

Describe the bug When I use Sun Editor for a bit, I inevitably end up with chunks of my text being “messed up”. It isn’t consistent (it seems like it happens more when I add text “in the middle”, eg. when copy/pasting text in), but every so often I’ll have the following span added around chunks of my text.

<span style="color: rgb(51, 51, 51); font-family: "Helvetica Neue", sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">My Test</span>

To be clear, these are not styles I’m “accidentally pasting in”, and it’s the same styles no matter where the text come from. For some reason these spans just get added, and what’s worse: they don’t appear inside the RTE! I only see them afterwards in the rendered text, at which point they are a giant PITA to remove.

Do you have any idea where these spans are coming from … and more importantly, how I can make Sun Editor not add them?

P.S. I used to have CKEditor4 in Sun Editor’s place, and it never had this problem.

To Reproduce The problem is intermittent.

Expected behavior No random styles get added.

Desktop (please complete the following information):

• OS: Linux
• Browser: Chrome
• Version: [ 90.0.4430.93

Additional context

This issue was originally filed here (for the Sun Editor React project … but I was told to file it here): https://github.com/mkhstar/suneditor-react/issues/214

These styles seem to match ones in node_modules/suneditor/dist/css/suneditor.min.css. For instance, the styles for .sun-editor-editable match most (but not all) of the styles in my mystery span (matching styles bolded):

.sun-editor-editable{ font-family:Helvetica Neue,sans-serif;font-size:13px;color:#333; line-height:1.5; background-color:#fff; word-break:normal;word-wrap:break-word;padding:16px;margin:0

BTW my entire component file is the following (as you can see there’s nothing that could possibly be causing these spans to be added):

import React from 'react';
import useStatefulEventHandlers from 'src/hooks/useStatefulEventHandlers';
import SunEditorReact from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const unwrap = html => {
  let unwrapped = html.substr('<p>'.length);
  unwrapped = unwrapped.substr(0, html.length - '<p></p>'.length - 1);
  return unwrapped;
};

const SunEditor = ({
  html,
  save,
  setTransform,
  unwrapHtml,
  width = '100%',
  ...other
}) => {
  const { onBlur, onChange, value } = useStatefulEventHandlers({
    // if unwrapHtml exists, use it to remove the '<p>'/'</p>' at start/end
    save: html => save(unwrapHtml ? unwrap(html) : html),
    setTransform,
    value: html,
  });
  return (
    <SunEditorReact
      height={200}
      defaultValue={value}
      onBlur={(e, html) => onBlur(html)}
      onChange={onChange}
      setOptions={{
        // This doesn't work, but I see some slight change when I highlight text
        // with it enabled, so I think there's a conflict between its CSS and
        // our's.  Too bad, as it would have gotten rid of the toolbar and made
        // it pop up where we click :(
        // mode: 'balloon-always',
        mode: 'classic',
        rtl: false,
        katex: 'window.katex',
        videoFileInput: false,
        tabDisable: false,
        buttonList: [
          [
            // 'undo',
            // 'redo',
            'font',
            'fontSize',
            'formatBlock',
            'paragraphStyle',
            'blockquote',
            'bold',
            'underline',
            'italic',
            'strike',
            // 'subscript',
            // 'superscript',
            'fontColor',
            'hiliteColor',
            'textStyle',
            'outdent',
            'indent',
            'align',
            // 'horizontalRule',
            'list',
            // 'lineHeight',
            'table',
            'link',
            'image',
            'video',
            // 'audio',
            // 'math',
            // 'imageGallery',
            // 'fullScreen',
            'showBlocks',
            'codeView',
            'preview',
            // 'print',
            // 'save',
            // 'template',
            'removeFormat',
          ],
        ],
        // lang: SUNEDITOR_LANG.en,
        'lang(In nodejs)': 'en',
      }}
    />
  );
};
export default SunEditor;

[JiHong88]

When pasting, editor is remove the styles of all tags except the “span” tag. In some cases, all text related styles are copied to that “span” tag. I can remove span tags, but this will also remove styles copied from within the editor.

In version 3.0.0, I’ll add a style filter of the “span” tag to leave only the styles used to the editor.

[Henk123456789]

This very much seems like the contenteditable bug which Chrome has (and possibly other Chromium based browsers). I encountered this issue while using the Summernote WYSIWIG editor.

Some issues about it in the Summernote repository:

• https://github.com/summernote/summernote/issues/3088
• https://github.com/summernote/summernote/issues/3350
• https://github.com/summernote/summernote/issues/3645

In my project it is very easy to reproduce by just adding 2 paragraphs and than deleting the latter one. Also see this comment. Sometimes when pasting text from another website (using CTRL + shift + v so no style will be pasted) also creates span or font tags with styles. However for some reason I can’t reproduce it on the official Summernote website.

Maybe you can play around with those things to reproduce the problem. I have yet to encounter the problem in SunEditor (though I haven’t used it very much yet).

More info and a possible workaround: https://www.neotericdesign.com/articles/working-around-chrome-s-contenteditable-span-bug/

The workaround is specifically for Redactor, but it gives an idea.