diff --git a/packages/lexical/src/nodes/LexicalParagraphNode.ts b/packages/lexical/src/nodes/LexicalParagraphNode.ts index e13e6c41efb..a23d68914fb 100644 --- a/packages/lexical/src/nodes/LexicalParagraphNode.ts +++ b/packages/lexical/src/nodes/LexicalParagraphNode.ts @@ -120,11 +120,7 @@ export class ParagraphNode extends ElementNode { element.dir = direction; } const indent = this.getIndent(); - if (indent > 0) { - // padding-inline-start is not widely supported in email HTML, but - // Lexical Reconciler uses padding-inline-start. Using text-indent instead. - element.style.textIndent = `${indent * 20}px`; - } + setElementIndent(element, indent, editor._config.theme.indent); } return { @@ -194,7 +190,9 @@ function $convertParagraphElement(element: HTMLElement): DOMConversionOutput { const node = $createParagraphNode(); if (element.style) { node.setFormat(element.style.textAlign as ElementFormatType); - const indent = parseInt(element.style.textIndent, 10) / 20; + + // TODO: leverage theme indent class or default 40 ? + const indent = parseInt(element.style.textIndent, 10) / 40; if (indent > 0) { node.setIndent(indent); } @@ -211,3 +209,31 @@ export function $isParagraphNode( ): node is ParagraphNode { return node instanceof ParagraphNode; } + +const DEFAULT_INDENT_VALUE = '40px'; + +function setElementIndent( + dom: HTMLElement, + indent: number, + indentClassName?: string, +): void { + if (indent < 1) { + return; + } + + if (typeof indentClassName === 'string') { + dom.classList.add(indentClassName); + } + + const indentationBaseValue = + window + .getComputedStyle(dom) + .getPropertyValue('--lexical-indent-base-value') || DEFAULT_INDENT_VALUE; + + dom.style.setProperty( + // padding-inline-start is not widely supported in email HTML, but + // Lexical Reconciler uses padding-inline-start. Using text-indent instead. + 'text-indent', + `${indent * parseInt(indentationBaseValue, 10)}px`, + ); +}