feat(richtext-lexical): add indent and align converter utilities

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

@@ -5,6 +5,7 @@ import { QuoteNode } from '@lexical/rich-text'
 
 import { createServerFeature } from '../../../utilities/createServerFeature.js'
 import { convertLexicalNodesToHTML } from '../../converters/html/converter/index.js'
+import { getElementNodeDefaultStyle } from '../../shared/defaultStyle/getElementNodeDefaultStyle.js'
 import { createNode } from '../../typeUtilities.js'
 import { MarkdownTransformer } from '../markdownTransformer.js'
 import { i18n } from './i18n.js'
@@ -51,8 +52,12 @@ export const BlockquoteFeature = createServerFeature({
                 req,
                 showHiddenFields,
               })
+              const defaultStyle = getElementNodeDefaultStyle({
+                node,
+              })
+              const style = defaultStyle ? ` style="${defaultStyle}"` : ''
 
-              return `<blockquote>${childrenText}</blockquote>`
+              return `<blockquote${style}>${childrenText}</blockquote>`
             },
             nodeTypes: [QuoteNode.getType()],
           },

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

@@ -2,6 +2,7 @@ import type { SerializedParagraphNode } from 'lexical'
 
 import type { HTMLConverter } from '../types.js'
 
+import { getElementNodeDefaultStyle } from '../../../../shared/defaultStyle/getElementNodeDefaultStyle.js'
 import { convertLexicalNodesToHTML } from '../index.js'
 
 export const ParagraphHTMLConverter: HTMLConverter<SerializedParagraphNode> = {
@@ -30,7 +31,12 @@ export const ParagraphHTMLConverter: HTMLConverter<SerializedParagraphNode> = {
       req,
       showHiddenFields,
     })
-    return `<p>${childrenText}</p>`
+    const defaultStyle = getElementNodeDefaultStyle({
+      node,
+    })
+    const style = defaultStyle ? ` style="${defaultStyle}"` : ''
+
+    return `<p${style}>${childrenText}</p>`
   },
   nodeTypes: ['paragraph'],
 }

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

@@ -8,6 +8,7 @@ import { HeadingNode } from '@lexical/rich-text'
 
 import { createServerFeature } from '../../../utilities/createServerFeature.js'
 import { convertLexicalNodesToHTML } from '../../converters/html/converter/index.js'
+import { getElementNodeDefaultStyle } from '../../shared/defaultStyle/getElementNodeDefaultStyle.js'
 import { createNode } from '../../typeUtilities.js'
 import { MarkdownTransformer } from '../markdownTransformer.js'
 import { i18n } from './i18n.js'
@@ -69,8 +70,12 @@ export const HeadingFeature = createServerFeature<
                   req,
                   showHiddenFields,
                 })
+                const defaultStyle = getElementNodeDefaultStyle({
+                  node,
+                })
+                const style = defaultStyle ? ` style="${defaultStyle}"` : ''
 
-                return '<' + node?.tag + '>' + childrenText + '</' + node?.tag + '>'
+                return `<${node?.tag}${style}>${childrenText}</${node?.tag}>`
               },
               nodeTypes: [HeadingNode.getType()],
             },

packages/richtext-lexical/src/features/lists/htmlConverter.ts

@@ -5,6 +5,10 @@ import type { HTMLConverter } from '../converters/html/converter/types.js'
 import type { SerializedListItemNode, SerializedListNode } from './plugin/index.js'
 
 import { convertLexicalNodesToHTML } from '../converters/html/converter/index.js'
+import {
+  getAlignStyle,
+  getElementNodeDefaultStyle,
+} from '../shared/defaultStyle/getElementNodeDefaultStyle.js'
 
 export const ListHTMLConverter: HTMLConverter<SerializedListNode> = {
   converter: async ({
@@ -66,6 +70,11 @@ export const ListItemHTMLConverter: HTMLConverter<SerializedListItemNode> = {
       req,
       showHiddenFields,
     })
+    const defaultStyle = getElementNodeDefaultStyle({
+      node,
+      styleConverters: [getAlignStyle],
+    })
+    const style = defaultStyle ? ` style="${defaultStyle}"` : ''
 
     if ('listType' in parent && parent?.listType === 'check') {
       const uuid = uuidv4()
@@ -78,6 +87,7 @@ export const ListItemHTMLConverter: HTMLConverter<SerializedListItemNode> = {
           role="checkbox"
           tabIndex=${-1}
           value=${node?.value}
+          ${style}
       >
       ${
         hasSubLists
@@ -87,11 +97,9 @@ export const ListItemHTMLConverter: HTMLConverter<SerializedListItemNode> = {
         <label for="${uuid}">${childrenText}</label><br>
       `
       }
-
-
-          </li>`
+      </li>`
     } else {
-      return `<li ${hasSubLists ? `class="nestedListItem" ` : ''}value=${node?.value}>${childrenText}</li>`
+      return `<li ${hasSubLists ? `class="nestedListItem" ` : ''}value="${node?.value}"${style}>${childrenText}</li>`
     }
   },
   nodeTypes: [ListItemNode.getType()],

packages/richtext-lexical/src/features/shared/defaultStyle/getElementNodeDefaultStyle.ts

@@ -0,0 +1,55 @@
+import type { SerializedElementNode } from 'lexical'
+
+const convertStyleObjectToString = (style: Record<string, unknown>): string => {
+  let styleString = ''
+  const styleEntries = Object.entries(style)
+  for (const styleEntry of styleEntries) {
+    const [styleKey, styleValue] = styleEntry
+    if (
+      styleValue === null ||
+      styleValue === undefined ||
+      (typeof styleValue === 'string' && styleValue === '')
+    ) {
+      continue
+    }
+    styleString += `${styleKey}: ${String(styleValue)};`
+  }
+  return styleString
+}
+
+export const getAlignStyle = (node: SerializedElementNode) => {
+  return { 'text-align': node.format }
+}
+
+export const getIndentStyle = (node: SerializedElementNode) => {
+  if (!node.indent) {
+    return {}
+  }
+  /**
+   * https://github.com/facebook/lexical/blob/da405bba0511ba26191e56ec8d7c7770b36c59f0/packages/lexical/src/nodes/LexicalParagraphNode.ts#L156-L157
+   * Lexical renders indent with padding-inline-start, but it use text-indent for RTL supports and widely supports.
+   * */
+  return { 'text-indent': `${node.indent * 20}px` }
+}
+
+interface GetElementNodeDefaultStyleProps {
+  node: SerializedElementNode
+  styleConverters?: ((node: SerializedElementNode) => Record<string, string>)[]
+}
+
+export const getElementNodeDefaultStyle = ({
+  node,
+  styleConverters = [getAlignStyle, getIndentStyle],
+}: GetElementNodeDefaultStyleProps) => {
+  const convertedStyleObject = styleConverters.reduce(
+    (prevObject, styleConverter) => {
+      return {
+        ...prevObject,
+        ...styleConverter(node),
+      }
+    },
+    {} as Record<string, string>,
+  )
+
+  return convertStyleObjectToString(convertedStyleObject)
+}

test/fields/collections/LexicalMigrate/data.ts

@@ -56,3 +56,63 @@ export function getSimpleLexicalData(textContent: string) {
     },
   }
 }
+
+export function getAlignIndentLexicalData(textContent: string) {
+  return {
+    root: {
+      children: [
+        {
+          children: [
+            {
+              detail: 0,
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text: textContent,
+              type: 'text',
+              version: 1,
+            },
+          ],
+          direction: 'ltr',
+          format: 'center',
+          indent: 0,
+          type: 'heading',
+          version: 1,
+          tag: 'h2',
+        },
+        {
+          children: [
+            {
+              detail: 0,
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text: textContent,
+              type: 'text',
+              version: 1,
+            },
+          ],
+          direction: 'ltr',
+          format: 'left',
+          indent: 2,
+          type: 'paragraph',
+          version: 1,
+          textFormat: 0,
+          textStyle: '',
+        },
+      ],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1,
+    },
+  }
+}
+
+/**
+ * If the HTML Conversion structure of the heading and paragraph changes, must edit this.
+ */
+export function getAlignIndentHTMLData(textContent: string) {
+  return `<h2 style="text-align: center;">${textContent}</h2><p style="text-indent: 40px; text-align: left;">${textContent}</p>`
+}