Paste Cleanup in JavaScript Block Editor

The Block Editor provides paste cleanup features that maintain content consistency and strip unwanted formatting, scripts, and elements from external sources such as web pages or word processors.

You can configure the paste behavior using the pasteCleanupSettings property, which allows you to define how content is handled when pasted into the editor.

Configuring allowed styles

The allowedStyles property lets you define which CSS styles are permitted in pasted content. Any style not in this list is stripped out, ensuring that only desired visual attributes are preserved.

By default, the following styles are allowed: font-weight, font-style, text-decoration, and text-transform.

The example below shows how only font-weight and font-style styles will be retained from the pasted content. All other inline styles will be removed.

const editor = new BlockEditor({
    pasteCleanupSettings: {
        allowedStyles: ['font-weight', 'font-style']
    }
});

Setting denied tags

The deniedTags property specifies a list of HTML tags to be removed from pasted content. This is useful for stripping potentially problematic elements like <script> or <iframe> tags. By default, this property is an empty array, so no tags are removed.

The example below removes any <script> or <iframe> tags found in the pasted content, preventing unwanted behavior or styling issues.

const editor = new BlockEditor({
    pasteCleanupSettings: {
        deniedTags: ['script', 'iframe']
    }
});

The example below demonstrates the usage of paste settings that allows only specific styles and also removes the specific tags from the pasted content.

Disable Keep format

By default, the editor retains the formatting of pasted content (e.g., bold, italics, links). You can disable this by setting the keepFormat property to false. When disabled, the editor pastes content primarily as plain text, regardless of the allowedStyles configuration.

const editor = new BlockEditor({
    pasteCleanupSettings: {
        keepFormat: false
    }
});

Allowing plain text

To paste content as plain text, stripping all HTML tags and inline styles, set the plainText property to true in pasteCleanupSettings. This ensures that only raw text is inserted, which is ideal for maintaining strict content consistency. By default, this property is false.

const editor = new BlockEditor({
    pasteCleanupSettings: {
        plainText: true
    }
});

The example below demonstrates the usage of paste settings that disables the keep format and allows plain text.

Events

The Block Editor provides events to monitor and interact with the paste action.

The snippet below demonstrates how to configure the above events in the editor.

const editor = new BlockEditor({
    beforePasteCleanup: onBeforePasteCleanup
});

const editor = new BlockEditor({
    afterPasteCleanup: onAfterPasteCleanup
});