How to align text in Draft.js

Question

I am wondering how to align text in Draft.js , as in the image below.

I searched for this for several days, but I did not find a solution.

Answer 1

The Editor component has a div with a class .public-DraftStyleDefault-ltr. This controls the alignment of the text of each paragraph that you write. As you create more paragraphs, more of these divs are created to hold the text. The text is wrapped in a span element, and .public-DraftStyleDefault-ltrhas the default alignment text-align: left.

CSS text-align: left, text-align: center, text-align: right text-align: justify for .

const textBlock = document.querySelectorAll(".public-DraftStyleDefault-ltr");
for (let i = 0; i < textBlock.length; i++) {
    textBlock[i].classList.toggle(this.props.style);
}

this.props.style - css, , .

, , , . , , . ,

Answer 2

. text-align, span, .public-DraftStyleDefault-ltr .

, , div :

const paragraphs: any = document.querySelectorAll(".public-DraftStyleDefault-ltr");

for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs.item(i);
    if (paragraph) {
        const firstItem = paragraph.querySelectorAll('*').item(0);
        // Apply to the parent the first child style
        paragraph.style.textAlign = firstItem.style.textAlign;
    }
}