fix(richtext-lexical): empty lines were incorrectly stripped from mdx blocks if doNotTrimChildren was set to true (#10287)

This caused empty lines to disappear from code blocks

Author: AlessioGr

packages/richtext-lexical/src/features/blocks/server/markdownTransformer.ts

@@ -403,8 +403,7 @@ function getMarkdownTransformerForBlock(
 
         let childrenString = ''
         if (block?.jsx?.doNotTrimChildren) {
-          // Do not trim, but remove empty lines
-          childrenString = linesInBetween.filter((line) => line.trim().length > 0).join('\n')
+          childrenString = linesInBetween.join('\n')
         } else {
           childrenString = linesInBetween.join('\n').trim()
         }

test/lexical-mdx/int.spec.ts

@@ -19,6 +19,7 @@ import { restExamplesTest2 } from './tests/restExamples2.test.js'
 
 import { defaultTests } from './tests/default.test.js'
 import { writeFileSync } from 'fs'
+import { codeTest1 } from './tests/code1.test.js'
 
 let config: SanitizedConfig
 let editorConfig: SanitizedServerEditorConfig
@@ -61,7 +62,12 @@ describe('Lexical MDX', () => {
     editorConfig = (richTextField.editor as LexicalRichTextAdapter).editorConfig
   })
 
-  const INPUT_AND_OUTPUTBase: Tests = [...defaultTests, restExamplesTest1, restExamplesTest2]
+  const INPUT_AND_OUTPUTBase: Tests = [
+    ...defaultTests,
+    restExamplesTest1,
+    restExamplesTest2,
+    codeTest1,
+  ]
 
   const INPUT_AND_OUTPUT: Tests = INPUT_AND_OUTPUTBase.find((test) => test.debugFlag)
     ? [INPUT_AND_OUTPUTBase.find((test) => test.debugFlag)]

test/lexical-mdx/mdx/jsxBlocks/code/converter.ts

@@ -10,6 +10,14 @@ export const codeConverter: BlockJSX = {
   import: ({ openMatch, children, closeMatch }) => {
     const language = openMatch[1]
 
+    // Removed first and last \n from children if present
+    if (children.startsWith('\n')) {
+      children = children.slice(1)
+    }
+    if (children.endsWith('\n')) {
+      children = children.slice(0, -1)
+    }
+
     const isSingleLineAndComplete =
       !!closeMatch && !children.includes('\n') && openMatch.input?.trim() !== '```' + language
 

test/lexical-mdx/tests/code1.input.mdx

@@ -0,0 +1,12 @@
+```ts
+import { buildConfig } from 'payload'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export default buildConfig({
+  collections: [
+    // your collections here
+  ],
+  // Pass the Lexical editor to the root config
+  editor: lexicalEditor({}),
+})
+```

test/lexical-mdx/tests/code1.output.json

@@ -0,0 +1,25 @@
+{
+  "editorState": {
+    "root": {
+      "children": [
+        {
+          "format": "",
+          "type": "block",
+          "version": 2,
+          "fields": {
+            "blockType": "Code",
+            "language": "ts",
+            "code": "import { buildConfig } from 'payload'\nimport { lexicalEditor } from '@payloadcms/richtext-lexical'\n\nexport default buildConfig({\n  collections: [\n    // your collections here\n  ],\n  // Pass the Lexical editor to the root config\n  editor: lexicalEditor({}),\n})",
+            "id": "6774559ba09e004452672523"
+          }
+        }
+      ],
+      "direction": null,
+      "format": "",
+      "indent": 0,
+      "type": "root",
+      "version": 1
+    }
+  },
+  "frontMatter": []
+}

test/lexical-mdx/tests/code1.test.ts

@@ -0,0 +1,14 @@
+import { readFileSync } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import type { Test } from '../int.spec.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const codeTest1: Test = {
+  input: readFileSync(path.resolve(dirname, 'code1.input.mdx'), 'utf-8'),
+  rootChildren: JSON.parse(readFileSync(path.resolve(dirname, 'code1.output.json'), 'utf-8'))
+    .editorState.root.children,
+}