fix(richtext-lexical): preserve indent and text-align when converting…

… Lexical <-> HTML (#9165) Fixes #5146 This had been solved in facebook/lexical#6693 but we are using another serialization. I open #9166 to discuss/track how we can improve this in the future
payloadcms · Nov 21, 2024 · 0960290 · 0960290
1 parent 48b60fc
commit 0960290
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 7 deletions.
diff --git a/packages/plugin-form-builder/src/utilities/lexical/converters/heading.ts b/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'],
 }
diff --git a/packages/plugin-form-builder/src/utilities/lexical/converters/quote.ts b/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'],
 }
diff --git a/packages/richtext-lexical/src/features/blockquote/server/index.ts b/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()],
           },

diff --git a/packages/richtext-lexical/src/features/converters/html/converter/converters/paragraph.ts b/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'],
 }
diff --git a/packages/richtext-lexical/src/features/heading/server/index.ts b/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()],
             },

diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
@@ -1016,6 +1016,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)