fix(richtext-lexical): prevent disallowed headings to be pasted (#13765)

Fixes #13705

With this PR, if the editor detects a disallowed heading in
`HeadingFeature`, it automatically converts it to the lowest allowed
heading.

I've also verified that disallowed headings aren't introduced when
pasting from the clipboard if the HeadingFeature isn't registered at
all. The reason this works is because the LexicalEditor doesn't have the
HeadingNode in that case.

Author: GermanJablo

packages/richtext-lexical/src/features/heading/client/index.tsx

@@ -2,11 +2,14 @@
 
 import type { HeadingTagType } from '@lexical/rich-text'
 
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { $createHeadingNode, $isHeadingNode, HeadingNode } from '@lexical/rich-text'
 import { $setBlocksType } from '@lexical/selection'
 import { $getSelection, $isRangeSelection } from 'lexical'
+import { useEffect } from 'react'
 
 import type { ToolbarGroup } from '../../toolbars/types.js'
+import type { PluginComponent } from '../../typesClient.js'
 import type { HeadingFeatureProps } from '../server/index.js'
 
 import { H1Icon } from '../../../lexical/ui/icons/H1/index.js'
@@ -78,6 +81,12 @@ export const HeadingFeatureClient = createClientFeature<HeadingFeatureProps>(({
   return {
     markdownTransformers: [MarkdownTransformer(enabledHeadingSizes)],
     nodes: [HeadingNode],
+    plugins: [
+      {
+        Component: HeadingPlugin,
+        position: 'normal',
+      },
+    ],
     sanitizedClientFeatureProps: props,
     slashMenu: {
       groups: enabledHeadingSizes?.length
@@ -112,3 +121,22 @@ export const HeadingFeatureClient = createClientFeature<HeadingFeatureProps>(({
     },
   }
 })
+
+const HeadingPlugin: PluginComponent<HeadingFeatureProps> = ({ clientProps }) => {
+  const { enabledHeadingSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] } = clientProps
+  const lowestAllowed = enabledHeadingSizes.at(-1)
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!lowestAllowed || enabledHeadingSizes.length === 6) {
+      return
+    }
+    return editor.registerNodeTransform(HeadingNode, (node) => {
+      if (!enabledHeadingSizes.includes(node.getTag())) {
+        node.setTag(lowestAllowed)
+      }
+    })
+  }, [editor, enabledHeadingSizes, lowestAllowed])
+
+  return null
+}

packages/richtext-lexical/src/features/heading/server/index.ts

@@ -35,6 +35,8 @@ export const HeadingFeature = createServerFeature<
 
     const { enabledHeadingSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] } = props
 
+    enabledHeadingSizes.sort()
+
     return {
       ClientFeature: '@payloadcms/richtext-lexical/client#HeadingFeatureClient',
       clientFeatureProps: props,

test/lexical/baseConfig.ts

@@ -10,6 +10,7 @@ import {
   lexicalInlineBlocks,
 } from './collections/Lexical/index.js'
 import { LexicalAccessControl } from './collections/LexicalAccessControl/index.js'
+import { LexicalHeadingFeature } from './collections/LexicalHeadingFeature/index.js'
 import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
 import { LexicalJSXConverter } from './collections/LexicalJSXConverter/index.js'
 import { LexicalLinkFeature } from './collections/LexicalLinkFeature/index.js'
@@ -33,6 +34,7 @@ export const baseConfig: Partial<Config> = {
   collections: [
     LexicalFullyFeatured,
     LexicalLinkFeature,
+    LexicalHeadingFeature,
     LexicalJSXConverter,
     getLexicalFieldsCollection({
       blocks: lexicalBlocks,

test/lexical/collections/LexicalHeadingFeature/e2e.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test'
+import { AdminUrlUtil } from 'helpers/adminUrlUtil.js'
+import { reInitializeDB } from 'helpers/reInitializeDB.js'
+import { lexicalHeadingFeatureSlug } from 'lexical/slugs.js'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { ensureCompilationIsDone } from '../../../helpers.js'
+import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
+import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
+import { LexicalHelpers } from '../utils.js'
+const filename = fileURLToPath(import.meta.url)
+const currentFolder = path.dirname(filename)
+const dirname = path.resolve(currentFolder, '../../')
+
+const { beforeAll, beforeEach, describe } = test
+
+// Unlike the other suites, this one runs in parallel, as they run on the `lexical-fully-featured/create` URL and are "pure" tests
+// PLEASE do not reset the database or perform any operations that modify it in this file.
+
+test.describe.configure({ mode: 'parallel' })
+
+const { serverURL } = await initPayloadE2ENoConfig({
+  dirname,
+})
+
+describe('Lexical Heading Feature', () => {
+  let lexical: LexicalHelpers
+  beforeAll(async ({ browser }, testInfo) => {
+    testInfo.setTimeout(TEST_TIMEOUT_LONG)
+    process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
+    const page = await browser.newPage()
+    await ensureCompilationIsDone({ page, serverURL })
+    await page.close()
+  })
+  beforeEach(async ({ page }) => {
+    const url = new AdminUrlUtil(serverURL, lexicalHeadingFeatureSlug)
+    lexical = new LexicalHelpers(page)
+    await page.goto(url.create)
+    await lexical.editor.first().focus()
+  })
+
+  test('unallowed headings should be converted when pasting', async () => {
+    await lexical.paste(
+      'html',
+      '<h1>Hello1</h1><h2>Hello2</h2><h3>Hello3</h3><h4>Hello4</h4><h5>Hello5</h5><h6>Hello6</h6>',
+    )
+    await expect(lexical.editor.locator('h1')).toHaveCount(0)
+    await expect(lexical.editor.locator('h2')).toHaveCount(1)
+    await expect(lexical.editor.locator('h3')).toHaveCount(0)
+    await expect(lexical.editor.locator('h4')).toHaveCount(5)
+    await expect(lexical.editor.locator('h5')).toHaveCount(0)
+    await expect(lexical.editor.locator('h6')).toHaveCount(0)
+  })
+})

test/lexical/collections/LexicalHeadingFeature/index.ts

@@ -0,0 +1,26 @@
+import type { CollectionConfig } from 'payload'
+
+import { FixedToolbarFeature, HeadingFeature, lexicalEditor } from '@payloadcms/richtext-lexical'
+
+import { lexicalHeadingFeatureSlug } from '../../slugs.js'
+
+export const LexicalHeadingFeature: CollectionConfig = {
+  slug: lexicalHeadingFeatureSlug,
+  labels: {
+    singular: 'Lexical Heading Feature',
+    plural: 'Lexical Heading Feature',
+  },
+  fields: [
+    {
+      name: 'richText',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          FixedToolbarFeature(),
+          HeadingFeature({ enabledHeadingSizes: ['h4', 'h2'] }),
+        ],
+      }),
+    },
+  ],
+}

test/lexical/collections/LexicalJSXConverter/e2e.spec.ts

@@ -18,6 +18,7 @@ const dirname = path.resolve(currentFolder, '../../')
 const { beforeAll, beforeEach, describe } = test
 
 // Unlike other suites, this one runs in parallel, as they run on the `/create` URL and are "pure" tests
+// PLEASE do not reset the database or perform any operations that modify it in this file.
 test.describe.configure({ mode: 'parallel' })
 
 const { serverURL } = await initPayloadE2ENoConfig({
@@ -33,11 +34,6 @@ describe('Lexical JSX Converter', () => {
     await page.close()
   })
   beforeEach(async ({ page }) => {
-    await reInitializeDB({
-      serverURL,
-      snapshotKey: 'lexicalTest',
-      uploadsDir: [path.resolve(dirname, './collections/Upload/uploads')],
-    })
     const url = new AdminUrlUtil(serverURL, lexicalJSXConverterSlug)
     const lexical = new LexicalHelpers(page)
     await page.goto(url.create)

test/lexical/collections/LexicalLinkFeature/e2e.spec.ts

@@ -8,14 +8,15 @@ import { fileURLToPath } from 'url'
 import { ensureCompilationIsDone } from '../../../helpers.js'
 import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
-import { LexicalHelpers } from './utils.js'
+import { LexicalHelpers } from '../utils.js'
 const filename = fileURLToPath(import.meta.url)
 const currentFolder = path.dirname(filename)
 const dirname = path.resolve(currentFolder, '../../')
 
 const { beforeAll, beforeEach, describe } = test
 
 // Unlike the other suites, this one runs in parallel, as they run on the `lexical-fully-featured/create` URL and are "pure" tests
+// PLEASE do not reset the database or perform any operations that modify it in this file.
 test.describe.configure({ mode: 'parallel' })
 
 const { serverURL } = await initPayloadE2ENoConfig({
@@ -31,11 +32,6 @@ describe('Lexical Link Feature', () => {
     await page.close()
   })
   beforeEach(async ({ page }) => {
-    await reInitializeDB({
-      serverURL,
-      snapshotKey: 'lexicalTest',
-      uploadsDir: [path.resolve(dirname, './collections/Upload/uploads')],
-    })
     const url = new AdminUrlUtil(serverURL, lexicalLinkFeatureSlug)
     const lexical = new LexicalHelpers(page)
     await page.goto(url.create)

test/lexical/collections/LexicalLinkFeature/utils.ts

@@ -16,7 +16,8 @@ const dirname = path.resolve(currentFolder, '../../')
 const { beforeAll, beforeEach, describe } = test
 
 // Unlike the other suites, this one runs in parallel, as they run on the `lexical-fully-featured/create` URL and are "pure" tests
-//test.describe.configure({ mode: 'parallel' })
+// PLEASE do not reset the database or perform any operations that modify it in this file.
+test.describe.configure({ mode: 'parallel' })
 
 const { serverURL } = await initPayloadE2ENoConfig({
   dirname,
@@ -32,19 +33,12 @@ describe('Lexical Fully Featured', () => {
     await page.close()
   })
   beforeEach(async ({ page }) => {
-    await reInitializeDB({
-      serverURL,
-      snapshotKey: 'lexicalTest',
-      uploadsDir: [path.resolve(dirname, './collections/Upload/uploads')],
-    })
     const url = new AdminUrlUtil(serverURL, lexicalFullyFeaturedSlug)
     lexical = new LexicalHelpers(page)
     await page.goto(url.create)
     await lexical.editor.first().focus()
   })
-  test('prevent extra paragraph when inserting decorator blocks like blocks or upload node', async ({
-    page,
-  }) => {
+  test('prevent extra paragraph when inserting decorator blocks like blocks or upload node', async () => {
     await lexical.slashCommand('block')
     await expect(lexical.editor.locator('.lexical-block')).toBeVisible()
     await lexical.slashCommand('relationship')

test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts

@@ -88,6 +88,18 @@ export class LexicalHelpers {
     return {}
   }
 
+  async paste(type: 'html' | 'markdown', text: string) {
+    await this.page.evaluate(
+      async ([text, type]) => {
+        const blob = new Blob([text!], { type: type === 'html' ? 'text/html' : 'text/markdown' })
+        const clipboardItem = new ClipboardItem({ 'text/html': blob })
+        await navigator.clipboard.write([clipboardItem])
+      },
+      [text, type],
+    )
+    await this.page.keyboard.press(`ControlOrMeta+v`)
+  }
+
   async save(container: 'document' | 'drawer') {
     if (container === 'drawer') {
       await this.drawer.getByText('Save').click()