Markdown Code/CodeBlock -> Lexical doesn't work

[AnzeKop]

Describe the Bug

We have some old string MD files where we have a lot of code examples.

Either using single line small Code sections like so

or CodeBlocks

const like = "so"

Using

  const yourEditorConfig = {
    ...defaultEditorConfig,
    features: [...defaultEditorFeatures],
  }

  const yourSanitizedEditorConfig = await sanitizeServerEditorConfig(
    yourEditorConfig,
    payloadConfig,
  )

  const headlessEditor = createHeadlessEditor({
    nodes: getEnabledNodes({
      editorConfig: yourSanitizedEditorConfig,
    }),
  })

  headlessEditor.update(
    () => {
      $convertFromMarkdownString(ContentPart1, [
        ...yourSanitizedEditorConfig.features.markdownTransformers,
      ])
    },
    { discrete: true },
  )

The code parts of the md file just get converted to strings. If we add in the CODE export from '@lexical/markdown' we get the correct nodes but then payload isn't able to interprete these so it errors out. I'm guessing we'd need to build a custom lexical feature but this should really be covered out of the box.

Link to the code that reproduces this issue

You can reproduce with the above

Reproduction Steps

1. copy paste whats above.

2. Thats it

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

plugin: richtext-lexical

Environment Info

Beta Payload, Latest next, react 19

[github-actions[bot]]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[AnzeKop]

Like i suspected. this fixes it

import { CodeNode } from '@lexical/code'


  const headlessEditor = createHeadlessEditor({
    nodes: [
      ...getEnabledNodes({
        editorConfig: yourSanitizedEditorConfig,
      }),
      CodeNode,
    ],
  })

        if (node.type === 'code') {
          console.log(node)
          return <Code key={index} code={node.children[0].text} language={node.language} />
        }

This should be standard in the payload package

[github-actions[bot]]

This issue has been marked as stale due to lack of activity.

To keep this issue open, please indicate that it is still relevant in a comment below.

[github-actions[bot]]

This issue was automatically closed due to lack of activity.

[AlessioGr]

Closing, as our editor does not come with a code block feature by default => not an "issue". The editor only comes with inline code formats - md conversion should work as expected for these.

Code blocks can be implemented by users using the BlocksFeature. Here's an example that includes markdown conversion & a language picker: https://github.com/payloadcms/payload/blob/main/test/lexical-mdx/mdx/jsxBlocks/code/code.ts

[lachieh]

Bummer. I was hoping this would get a better lexical-first support. I understand the decision, though.

Small follow up about the example you linked; is there a simple way to have the selected value of the "language" field pass over to the props of the "code" field? The current monaco editor on the type: 'code' field accepts defaults to typescript which causes a bunch of unrelated syntax errors in the sidebar so it'd be great to be able to dynamically flip the monaco language based on the language field.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.