CKEditor5 custom span style creates extra unwanted tags during Google Docs paste operations

Other Questions Google docs
1

I’m having trouble with CKEditor5 after adding a custom span style. When I copy content from Google Docs, extra span elements appear in the output.

Here’s my custom style configuration:

style: {
    definitions: [
        {
            name: 'Highlight text',
            element: 'span',
            classes: ['highlight']
        }
    ]
}

Before adding this style, pasting from Google Docs worked fine and gave clean output like:

<p>My sample text</p>

After adding the custom style, the same paste operation creates unwanted span tags:

<p><span>My sample text</span></p>

I tried using htmlSupport to control this behavior:

htmlSupport: {
    allow: [
        {
            name: 'span',
            classes: ['highlight']
        }
    ]
}

This didn’t help. The extra spans still appear when pasting from Google Docs.

I also tried disallowing spans completely:

htmlSupport: {
    disallow: [
        {
            name: 'span'
        }
    ],
    allow: [
        {
            name: 'span',
            classes: ['highlight']
        }
    ]
}

This stops the extra spans but makes my custom style unavailable in the editor.

How can I keep my custom span style while preventing these unwanted elements during paste operations?

2

google docs and ckeditor are not playin nice with those spans! you might wanna check out the paste from office plugin for stricter rules. alternatively, you can simply tweak the clipboard transformation to strip empty spans without classes. that might be easier than overhaulin the whole paste process.

3

This happens because CKEditor5 allows span elements once you define a custom span style, which messes with the paste filtering. You need a custom paste processor that targets Google Docs content specifically. Create a clipboard input transformation that finds and removes spans without your target classes before they hit the editor’s data pipeline. I ran into this exact issue when building custom text styling for our docs platform. The trick is catching the paste event early and cleaning the HTML before CKEditor processes it. Extend the clipboard plugin and add a preprocessor that strips unwanted spans but keeps your highlight spans. This way you keep your custom styling without breaking paste from external sources.

4

Yeah, this happens because CKEditor5’s paste filter gets too loose once you add a custom span style. It starts letting through ALL spans when you paste, not just the ones you want. I hit this same issue when adding custom text annotations. Here’s the fix: build a custom paste filter that checks span elements as they come in. Hook into the clipboard transformation and add logic that only keeps spans with your specific classes - dump the generic Google Docs ones. Set up a custom upcast converter that looks for your exact class attribute on incoming spans. This keeps your highlight feature working while blocking the junk spans. The trick is being picky about what gets converted instead of just relying on htmlSupport settings.