Skip to content

Headings sizes not allowed can be pasted from the clipboard #13705

@FreakeyPlays

Description

@FreakeyPlays

Describe the Bug

As seen in the video, my RichText only allows headings of type h2, h3 and h4 to be added. But when pasting some content from, like, a different site, the styles are getting copied too, and the RichText bypasses the validation and creates headings of type h1, h5 and h6. This also does not throw an error when publishing the page and allows users to create pages with forbidden content. Any ideas on how to handle this? I was thinking about a beforePaste hook that parses the content or strips it from its copied styles.

20250801-1051-37.0175416.mp4

Link to the code that reproduces this issue

https://playground.lexical.dev/

Reproduction Steps

  1. Create a RichText field in any collection or Block
  2. Enable some headings but not all (e.g. h2, h3 and h4 )
  3. Go to w3 schools HTML Headings and copy all headings from the preview with crrl + c. (This will also copy the styling on Windows at least)
  4. Go to the Collection or Block and paste the copied content in the RichText Field.
    4.1. If drafts are enabled, publish the collection entry.
    4.2. If needed, rebuild the page.
  5. Go to the page with the RichText content and see headings of all types.

Here an example richText Field config:

//...
            {
              name: 'content',
              type: 'richText',
              editor: lexicalEditor({
                features: ({ rootFeatures }) => {
                  return [
                    ...rootFeatures,
                    HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
                    FixedToolbarFeature(),
                  ]
                },
              }),
              label: false,
              required: true,
            },
//...

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 9.15.0
Relevant Packages:
  payload: 3.54.0
  next: 15.5.2
  @payloadcms/db-postgres: 3.54.0
  @payloadcms/email-nodemailer: 3.54.0
  @payloadcms/graphql: 3.54.0
  @payloadcms/live-preview: 3.54.0
  @payloadcms/live-preview-react: 3.54.0
  @payloadcms/next/utilities: 3.54.0
  @payloadcms/plugin-redirects: 3.54.0
  @payloadcms/plugin-search: 3.54.0
  @payloadcms/plugin-seo: 3.54.0
  @payloadcms/richtext-lexical: 3.54.0
  @payloadcms/translations: 3.54.0
  @payloadcms/ui/shared: 3.54.0
  react: 19.1.1
  react-dom: 19.1.1
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32507
  Available CPU cores: 8

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions