fix(richtext-lexical): consistent html converter inline padding (#12848)

Fixes #12847

- Uses rem instead of em for inline padding, for indent consistency
between nodes with different font sizes
- Use rem instead of px in deprecated html converters for consistency

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210564720112211

Author: AlessioGr

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

@@ -53,7 +53,7 @@ export const BlockquoteFeature = createServerFeature({
               })
               const style = [
                 node.format ? `text-align: ${node.format};` : '',
-                node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+                node.indent > 0 ? `padding-inline-start: ${Number(node.indent) * 2}rem;` : '',
               ]
                 .filter(Boolean)
                 .join(' ')

packages/richtext-lexical/src/features/converters/lexicalToHtml/shared/findConverterForNode.ts

@@ -83,7 +83,7 @@ export function findConverterForNode<
 
   if (!disableIndent && (!Array.isArray(disableIndent) || !disableIndent?.includes(node.type))) {
     if ('indent' in node && node.indent && node.type !== 'listitem') {
-      style['padding-inline-start'] = `${Number(node.indent) * 2}em`
+      style['padding-inline-start'] = `${Number(node.indent) * 2}rem`
     }
   }
 

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

@@ -31,7 +31,7 @@ export const ParagraphHTMLConverter: HTMLConverter<SerializedParagraphNode> = {
     })
     const style = [
       node.format ? `text-align: ${node.format};` : '',
-      node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+      node.indent > 0 ? `padding-inline-start: ${Number(node.indent) * 2}rem;` : '',
     ]
       .filter(Boolean)
       .join(' ')

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

@@ -71,7 +71,7 @@ export const HeadingFeature = createServerFeature<
                 })
                 const style = [
                   node.format ? `text-align: ${node.format};` : '',
-                  node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',
+                  node.indent > 0 ? `padding-inline-start: ${Number(node.indent) * 2}rem;` : '',
                 ]
                   .filter(Boolean)
                   .join(' ')

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

@@ -1296,23 +1296,24 @@ describe('lexicalMain', () => {
     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>`
+    const getHTMLContent: (indentToSize: (indent: number) => string) => string = (indentToSize) =>
+      `<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: ${indentToSize(1)};'>paragraph indent 1</p><h2 style='padding-inline-start: ${indentToSize(2)};'>heading indent 2</h2><blockquote style='padding-inline-start: ${indentToSize(3)};'>quote indent 3</blockquote>`
     await page.evaluate(
       async ([htmlContent]) => {
-        const blob = new Blob([htmlContent], { type: 'text/html' })
+        const blob = new Blob([htmlContent as string], { type: 'text/html' })
         const clipboardItem = new ClipboardItem({ 'text/html': blob })
         await navigator.clipboard.write([clipboardItem])
       },
-      [htmlContent],
+      [getHTMLContent((indent: number) => `${indent * 40}px`)],
     )
     // 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 saveDocAndAssert(page)
     await page.getByRole('link', { name: 'API' }).click()
-    const htmlOutput = page.getByText(htmlContent)
+    const htmlOutput = page.getByText(getHTMLContent((indent: number) => `${indent * 2}rem`))
     await expect(htmlOutput).toBeVisible()
   })