fix(richtext-lexical): preserve indent and text-align when converting Lexical <-> HTML

packages/plugin-form-builder/src/utilities/lexical/converters/heading.ts

@@ -13,8 +13,13 @@ export const HeadingHTMLConverter: HTMLConverter<any> = {
       },
       submissionData,
     })
-
-    return '<' + node?.tag + '>' + childrenText + '</' + node?.tag + '>'
+    const style = [
+      node.format ? `text-align: ${node.format};` : '',
+      node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+    return `<${node?.tag}${style ? ` style='${style}'` : ''}>${childrenText}</${node?.tag}>`
   },
   nodeTypes: ['heading'],
 }

packages/plugin-form-builder/src/utilities/lexical/converters/quote.ts

@@ -13,8 +13,14 @@ export const QuoteHTMLConverter: HTMLConverter<any> = {
       },
       submissionData,
     })
+    const style = [
+      node.format ? `text-align: ${node.format};` : '',
+      node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
 
-    return `<blockquote>${childrenText}</blockquote>`
+    return `<blockquote${style ? ` style='${style}'` : ''}>${childrenText}</blockquote>`
   },
   nodeTypes: ['quote'],
 }

packages/richtext-lexical/src/features/blockquote/server/index.ts

@@ -51,8 +51,14 @@ export const BlockquoteFeature = createServerFeature({
                 req,
                 showHiddenFields,
               })
+              const style = [
+                node.format ? `text-align: ${node.format};` : '',
+                node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+              ]
+                .filter(Boolean)
+                .join(' ')
 
-              return `<blockquote>${childrenText}</blockquote>`
+              return `<blockquote${style ? ` style='${style}'` : ''}>${childrenText}</blockquote>`
             },
             nodeTypes: [QuoteNode.getType()],
           },

packages/richtext-lexical/src/features/converters/html/converter/converters/paragraph.ts

@@ -30,7 +30,13 @@ export const ParagraphHTMLConverter: HTMLConverter<SerializedParagraphNode> = {
       req,
       showHiddenFields,
     })
-    return `<p>${childrenText}</p>`
+    const style = [
+      node.format ? `text-align: ${node.format};` : '',
+      node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+    return `<p${style ? ` style='${style}'` : ''}>${childrenText}</p>`
   },
   nodeTypes: ['paragraph'],
 }

packages/richtext-lexical/src/features/heading/server/index.ts

@@ -69,8 +69,13 @@ export const HeadingFeature = createServerFeature<
                   req,
                   showHiddenFields,
                 })
-
-                return '<' + node?.tag + '>' + childrenText + '</' + node?.tag + '>'
+                const style = [
+                  node.format ? `text-align: ${node.format};` : '',
+                  node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')
+                return `<${node?.tag}${style ? ` style='${style}'` : ''}>${childrenText}</${node?.tag}>`
               },
               nodeTypes: [HeadingNode.getType()],
             },

test/fields/collections/Lexical/e2e/main/e2e.spec.ts

@@ -954,6 +954,34 @@ describe('lexicalMain', () => {
     })
   })
 
+  // https://github.com/payloadcms/payload/issues/5146
+  test('Preserve indent and text-align when converting Lexical <-> HTML', async () => {
+    await page.goto('http://localhost:3000/admin/collections/rich-text-fields?limit=10')
+    await page.getByLabel('Create new Rich Text Field').click()
+    await page.getByLabel('Title*').click()
+    await page.getByLabel('Title*').fill('Indent and Text-align')
+    await page.getByRole('paragraph').nth(1).click()
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+    const htmlContent = `<p style='text-align: center;'>paragraph centered</p><h1 style='text-align: right;'>Heading right</h1><p>paragraph without indent</p><p style='padding-inline-start: 40px;'>paragraph indent 1</p><h2 style='padding-inline-start: 80px;'>heading indent 2</h2><blockquote style='padding-inline-start: 120px;'>quote indent 3</blockquote>`
+    await page.evaluate(
+      async ([htmlContent]) => {
+        const blob = new Blob([htmlContent], { type: 'text/html' })
+        const clipboardItem = new ClipboardItem({ 'text/html': blob })
+        await navigator.clipboard.write([clipboardItem])
+      },
+      [htmlContent],
+    )
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    const pasteKey = process.platform === 'darwin' ? 'Meta' : 'Control'
+    await page.keyboard.press(`${pasteKey}+v`)
+    await page.locator('#field-richText').click()
+    await page.locator('#field-richText').fill('asd')
+    await page.getByRole('button', { name: 'Save' }).click()
+    await page.getByRole('link', { name: 'API' }).click()
+    const htmlOutput = page.getByText(htmlContent)
+    await expect(htmlOutput).toBeVisible()
+  })
+
   describe('localization', () => {
     test.skip('ensure simple localized lexical field works', async () => {
       await navigateToLexicalFields(true, true)