Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Feature: Apply indent value from theme on exporting paragraphNode #6083

Closed
wants to merge 3 commits into from
+32 −6
Closed

[WIP] Feature: Apply indent value from theme on exporting paragraphNode #6083

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
311ba84
apply indent value from theme on paragraph exporting
2wheeh May 11, 2024
af70b95
set only indent > 0
2wheeh May 11, 2024
b7a4b7b
f
2wheeh May 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 32 additions & 6 deletions packages/lexical/src/nodes/LexicalParagraphNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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`,
);
}
Loading