Custom Lexical feature throwing error

[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/@payloadcms+richtext-lexical@3.2.1_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/lexical/config/server/sanitize.ts:88:25)
    at Array.forEach (<anonymous>)
    at forEach (node_modules/.pnpm/@payloadcms+richtext-lexical@3.2.1_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/lexical/config/server/sanitize.ts:87:20)
    at Map.forEach (<anonymous>)
    at forEach (node_modules/.pnpm/@payloadcms+richtext-lexical@3.2.1_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/lexical/config/server/sanitize.ts:48:11)
    at resolvedFeatureMap (node_modules/.pnpm/@payloadcms+richtext-lexical@3.2.1_yzce6p5ca4u4gep6hswnebxiwu/node_modules/@payloadcms/richtext-lexical/src/index.ts:108:41)
    at async sanitizeRichText (node_modules/.pnpm/payload@3.2.1_graphql@16.9.0_monaco-editor@0.52.0_react-dom@19.0.0-rc-65a56d0e-20241020_react_f35wfbc6kwam63xp4ycjo7n4zi/node_modules/payload/src/fields/config/sanitize.ts:205:25)
    at async sanitizeConfig (node_modules/.pnpm/payload@3.2.1_graphql@16.9.0_monaco-editor@0.52.0_react-dom@19.0.0-rc-65a56d0e-20241020_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

[AlessioGr]

Hi! I have converted this into a discussion, as this is essentially not an issue with payload - most of the API usage is incorrect.

E.g. your client feature looks like this:

import { createClientFeature } from '@payloadcms/richtext-lexical'
import { RedactedNode, $createRedactedNode, $isRedactedNode } from './nodes/RedactedNode'

export const RedactedFeatureClient = createClientFeature({
  key: 'redacted',
  feature: {
    nodes: [RedactedNode],
    commands: {
      INSERT_REDACTED_COMMAND: () => $createRedactedNode(),
    },
    toolbar: {
      icon: '🔒',
      command: 'INSERT_REDACTED_COMMAND',
    },
    floatingToolbar: {
      icon: '🔒',
      command: 'INSERT_REDACTED_COMMAND',
    },
    slashCommand: {
      label: 'Redacted',
      command: 'INSERT_REDACTED_COMMAND',
    },
  },
})

However, most properties here are not real. For example, command properties do not exist in the API - you'd have to register commands in a plugin.

If I distill the feature down to properties that exist, it would look like that:

import { createClientFeature } from '@payloadcms/richtext-lexical/client'
import {  RedactedNode } from './nodes/RedactedNode'

export const RedactedFeatureClient = createClientFeature({
  nodes: [RedactedNode],
})

I would recommend waiting for the wrapper block PR (#9289) to be merged - that way creating this functionality will be a LOT easier. Should hopefully be done this week

[DesignyourCode]

Fantastic. This is really helpful and the wrapper block looks like it will definitely help.

To be honest I wasn't sure if it should have been an issue or not @AlessioGr but I think this is more because the docs didn't have any real world full examples, so I was trying to piece it all together from that which made it difficult to understand what's going on with it.

I will wait until that #9289 is available and put a work around in for now.