Rich Text Editor Features are not added

lolheal8 months ago

10

  editor: lexicalEditor({
    features: ({ defaultFeatures, rootFeatures }) => {
      return [
        UploadFeature({}),
        UnderlineFeature(),
        BoldFeature(),
        ItalicFeature(),
        HeadingFeature({
          enabledHeadingSizes: ['h3'],
        }),
        UnorderedListFeature(),
        InlineToolbarFeature(),
        FixedToolbarFeature({}),
        BlocksFeature({
          blocks: [],
          inlineBlocks: [
            {
              slug: 'LinkInline',
              labels: {
                singular: 'Link',
                plural: 'Links',
              },
              fields: [
                {
                  name: 'url',
                  type: 'text',
                  required: true,
                  label: 'URL',
                },
                {
                  name: 'text',
                  type: 'text',
                  localized: true,
                  label: 'Text',
                },
              ],
            },
          ],
        }),
      ]
    },
  }),

• 

  sami_2548 months ago

  In you payload.config, do you have the editor: option

• 

  lolheal8 months ago

  Yes, the pasted snippet I inserted is from my

  payload.config.ts

  :

  
  
  
  

  export default buildConfig({
    editor: lexicalEditor({
      features: ({ defaultFeatures, rootFeatures }) => {
        return [
          UploadFeature({}),
          UnderlineFeature(),
          BoldFeature(),
          ItalicFeature(),
          HeadingFeature({
            enabledHeadingSizes: ['h3'],
          }),
          UnorderedListFeature(),
          InlineToolbarFeature(),
          FixedToolbarFeature({}),
          BlocksFeature({
            blocks: [],
            inlineBlocks: [
              {
                slug: 'LinkInline',
                labels: {
                  singular: 'Link',
                  plural: 'Links',
                },
                fields: [
                  {
                    name: 'url',
                    type: 'text',
                    required: true,
                    label: 'URL',
                  },
                  {
                    name: 'text',
                    type: 'text',
                    localized: true,
                    label: 'Text',
                  },
                ],
              },
            ],
          }),
        ]
      },
    })
  })

  
  
  

  That's how it's embedded in the

  buildConfig

  parameter.

  
  
  

  So configuration I did originally worked, but I just can't add new features like

  UnderlineFeature

  or

  HeadingFeature

  , I also tried to set it explicitly on the field in my collection:

  
  
  

    fields: [
      {
        name: 'content',
        type: 'richText',
        required: true,
        localized: true,
        label: 'Inhalt',
        editor: lexicalEditor({
          features({ rootFeatures }) {
            return [...rootFeatures, UnderlineFeature()] // underline is not added, but the basic feature are there
          },
        }),
      },
    ],

• 

  sami_2548 months ago

  So since you in your root, you don't actually the root and default feature. Do something like.

  
  
  features: [ ParagraphFeature(), UnderlineFeature(), BoldFeature(), ItalicFeature(), FixedToolbarFeature(), StrikethroughFeature(), SubscriptFeature(), SuperscriptFeature(), InlineCodeFeature(), AlignFeature(), UnorderedListFeature(), OrderedListFeature(), BlockquoteFeature(), HorizontalRuleFeature(), HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4', 'h5'] }),
  
  

  Yes it worked because in the rootFeatures you didn't have the UnderlineFeature.

• 

  lolheal8 months ago

  Changed it like this:

  
  
  

  export const exitor = lexicalEditor({
    features: [
      UploadFeature({}),
      ParagraphFeature(),
      UnderlineFeature(),
      BoldFeature(),
      ItalicFeature(),
      HeadingFeature({
        enabledHeadingSizes: ['h3'],
      }),
      UnorderedListFeature(),
      InlineToolbarFeature(),
      FixedToolbarFeature({}),
      BlocksFeature({
        blocks: [],
        inlineBlocks: [
          {
            slug: 'LinkInline',
            labels: {
              singular: 'Link',
              plural: 'Links',
            },
            fields: [
              {
                name: 'url',
                type: 'text',
                required: true,
                label: 'URL',
              },
              {
                name: 'text',
                type: 'text',
                localized: true,
                label: 'Text',
              },
            ],
          },
        ],
      }),
    ],
  })

  
  
  

  But after reload I still don't get the desired features..

  
  
  

  It feels like something is weirdly caching. Is it enough to delete

  .next

  , or does turbo cache something else?

  
  
  
  
  

  Even when I delete my whole configuration in

  payload.config.ts

  of the editor:

  
  
  

  editor: lexicalEditor({})

  
  
  

  I STILL have the same features, but no toolbar, because that update the configuration got:
• 

  sami_2548 months ago

  Wait which version are currently using. Also can you show a the full screen of the richtext in the admin UI

• 

  lolheal8 months ago

  This is the whole screen, I'm using:

  3.55.1
  
  

    "dependencies": {
      "@payloadcms/db-postgres": "3.55.1",
      "@payloadcms/next": "3.55.1",
      "@payloadcms/payload-cloud": "3.55.1",
      "@payloadcms/richtext-lexical": "3.55.1",
      "@payloadcms/ui": "3.55.1",
      "@types/jsonwebtoken": "^9.0.10",
      "@types/passport": "^1.0.17",
      "@types/passport-oauth2": "^1.8.0",
      "cross-env": "^7.0.3",
      "dotenv": "16.4.7",
      "graphql": "^16.8.1",
      "jsonwebtoken": "^9.0.2",
      "next": "15.4.4",
      "next-auth": "^4.24.11",
      "passport": "^0.7.0",
      "passport-oauth2": "^1.8.0",
      "payload": "3.55.1",
      "payload-oapi": "^0.2.4",
      "react": "19.1.1",
      "sharp": "0.34.2"
    },
    "devDependencies": {
      "@playwright/test": "1.54.1",
      "@testing-library/react": "16.3.0",
      "@types/node": "^22.5.4",
      "@types/react": "19.1.8",
      "@types/react-dom": "19.1.6",
      "@vitejs/plugin-react": "4.5.2",
      "eslint": "^9.16.0",
      "eslint-config-next": "15.4.4",
      "jsdom": "26.1.0",
      "playwright": "1.54.1",
      "playwright-core": "1.54.1",
      "prettier": "^3.4.2",
      "typescript": "5.7.3",
      "vite-tsconfig-paths": "5.1.4",
      "vitest": "3.2.3"
    },
• 

  sami_2548 months ago

  Let me try the version. I will get back to you in a moment

• 

  lolheal8 months ago

  Thank you so much

  @1297855122310955100

  ❤️

• 

  sami_2548 months ago

  I have made the same setup as you minus the locale. So in you field content remove the underlineFeature and let fetch from the rootFeatures. Also run

  npm run payload generate:importMap
• 

  lolheal8 months ago

  This did it 🎉🎉🎉

  
  
  npm run payload generate:importMap
  
  

  Wow, would have never guessed that, after the importMap was generated the feature appeared. Thank you so much

  @1297855122310955100

  !