fix: apply indent base value from theme on exported dom on paragraphNode

ui/src/editor/headless/index.tsx

@@ -1,5 +1,6 @@
 import { createHeadlessEditor as _createHeadlessEditor } from '@lexical/headless';
 
+import { htmlConfig } from '@/editor/html-config';
 import nodes from '@/editor/nodes';
 import theme from '@/editor/theme';
 
@@ -11,6 +12,7 @@ const createHeadlessEditor = ({ namespace }: { namespace: string }) => {
     onError: (error) => {
       throw error;
     },
+    html: htmlConfig,
   });
 };
 

ui/src/editor/html-config/index.ts

@@ -0,0 +1,57 @@
+import type { HTMLConfig } from 'lexical';
+import { ParagraphNode, isHTMLElement } from 'lexical';
+
+export const htmlConfig: HTMLConfig = {
+  export: new Map([
+    [
+      ParagraphNode,
+      (editor, node) => {
+        const targetNode = node as ParagraphNode;
+        const element = document.createElement('p');
+
+        if (element && isHTMLElement(element)) {
+          if (targetNode.isEmpty()) {
+            element.append(document.createElement('br'));
+          }
+
+          const formatType = targetNode.getFormatType();
+          element.style.textAlign = formatType;
+
+          const direction = targetNode.getDirection();
+          if (direction) {
+            element.dir = direction;
+          }
+          const indent = targetNode.getIndent();
+          setElementIndent(element, indent, editor._config.theme.indent);
+        }
+
+        return {
+          element,
+        };
+      },
+    ],
+  ]),
+};
+
+const DEFAULT_INDENT_VALUE = '40px';
+
+function setElementIndent(dom: HTMLElement, indent: number, indentClassName?: string): void {
+  if (typeof indentClassName === 'string') {
+    const elementHasClassName = dom.classList.contains(indentClassName);
+
+    if (indent > 0 && !elementHasClassName) {
+      dom.classList.add(indentClassName);
+    } else if (indent < 1 && elementHasClassName) {
+      dom.classList.remove(indentClassName);
+    }
+  }
+
+  const indentationBaseValue =
+    window.getComputedStyle(dom).getPropertyValue('--lexical-indent-base-value') ||
+    DEFAULT_INDENT_VALUE;
+
+  dom.style.setProperty(
+    'text-indent',
+    indent === 0 ? '' : `calc(${indent} * ${indentationBaseValue})`
+  );
+}

ui/src/editor/index.tsx

@@ -5,6 +5,7 @@ import type { SerializedEditorState } from 'lexical';
 
 import { EditorHistoryContext } from '@/context/editor/editor-history-context';
 
+import { htmlConfig } from '@/editor/html-config';
 import nodes from '@/editor/nodes';
 import { Plugins } from '@/editor/plugins';
 import theme from '@/editor/theme';
@@ -32,6 +33,7 @@ export default function Editor({
     },
     theme,
     editable: isNew,
+    html: htmlConfig,
   };
 
   return (