Skip to content

Custom Lexical feature throwing error #9563

@DesignyourCode

Description

@DesignyourCode

Describe the Bug

Hi. I am trying to build a custom Lexical feature called Redacted. This should be straight forward as I just want it to essentially wrap the selected content in a span at the moment.

The issue I am encountering from this code:

TypeError: Cannot use 'in' operator to search for 'with' in ./nodes/RedactedNode
    at <unknown> (node_modules/.pnpm/@[email protected]_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/lexical/config/server/sanitize.ts:88:25)
    at Array.forEach (<anonymous>)
    at forEach (node_modules/.pnpm/@[email protected]_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/lexical/config/server/sanitize.ts:87:20)
    at Map.forEach (<anonymous>)
    at forEach (node_modules/.pnpm/@[email protected]_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/lexical/config/server/sanitize.ts:48:11)
    at resolvedFeatureMap (node_modules/.pnpm/@[email protected]_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/index.ts:108:41)
    at async sanitizeRichText (node_modules/.pnpm/[email protected][email protected][email protected][email protected]_react_f35wfbc6kwam63xp4ycjo7n4zi/node_modules/payload/src/fields/config/sanitize.ts:205:25)
    at async sanitizeConfig (node_modules/.pnpm/[email protected][email protected][email protected][email protected]_react_f35wfbc6kwam63xp4ycjo7n4zi/node_modules/payload/src/config/sanitize.ts:244:2)
  86 |       }
  87 |       feature.nodes.forEach((node) => {
> 88 |         const nodeType = 'with' in node.node ? node.node.replace.getType() : node.node.getType() // TODO: Idk if this works for node replacements
     |                         ^
  89 |         if (node?.graphQLPopulationPromises?.length) {
  90 |           sanitized.graphQLPopulationPromises.set(nodeType, node.graphQLPopulationPromises)
  91 |         } {
  type: 'TypeError'
}

Link to the code that reproduces this issue

https://github.com/DesignyourCode/redacted-payload-lexical-feature-bug/tree/main

Reproduction Steps

I have created the following repo with the feature I am working. I am working on the website template.

This feature is included in the components/RichText folder and then imported into the content block:

import type { Block, Field } from 'payload'

import {
  FixedToolbarFeature,
  HeadingFeature,
  InlineToolbarFeature,
  lexicalEditor,
  UnorderedListFeature,
  OrderedListFeature,
  InlineCodeFeature,
} from '@payloadcms/richtext-lexical'

import { RedactedFeature } from '@/components/RichText/RedactedFeature/feature.server'

import { link } from '@/fields/link'

export const Content: Block = {
  slug: 'content',
  interfaceName: 'ContentBlock',
  fields: [
    {
      name: 'richText',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ rootFeatures }) => {
          return [
            ...rootFeatures,
            HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
            FixedToolbarFeature(),
            InlineToolbarFeature(),
            UnorderedListFeature(),
            OrderedListFeature(),
            InlineCodeFeature(),
            RedactedFeature(),
          ]
        },
      }),
      label: false,
    },
    ...

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

plugin: richtext-lexical

Environment Info

Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: 1.22.19
  pnpm: 9.14.2
Relevant Packages:
  payload: 3.2.1
  next: 15.0.3
  @payloadcms/db-postgres: 3.2.1
  @payloadcms/email-nodemailer: 3.2.1
  @payloadcms/graphql: 3.2.1
  @payloadcms/live-preview: 3.2.1
  @payloadcms/live-preview-react: 3.2.1
  @payloadcms/next/utilities: 3.2.1
  @payloadcms/payload-cloud: 3.2.1
  @payloadcms/plugin-cloud-storage: 3.2.1
  @payloadcms/plugin-form-builder: 3.2.1
  @payloadcms/plugin-nested-docs: 3.2.1
  @payloadcms/plugin-redirects: 3.2.1
  @payloadcms/plugin-search: 3.2.1
  @payloadcms/plugin-seo: 3.2.1
  @payloadcms/richtext-lexical: 3.2.1
  @payloadcms/storage-vercel-blob: 3.2.1
  @payloadcms/translations: 3.2.1
  @payloadcms/ui/shared: 3.2.1
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:02:27 PDT 2024; root:xnu-11215.41.3~2/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12

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