Переопределение стилей TinyMCE после использования dangerouslySetInnerHTML

У меня есть динамическая страница с большим количеством текста в RTL формате. TinyMCE не может правильно отобразить RTL-текст. Он отображается примерно так: Current Output В то время как я хочу, чтобы он отображался следующим образом: Desired Output В поисках решения я обнаружил, что dangerouslySetInnerHtml поможет мне очистить текст, однако я не могу получить желаемое форматирование для динамического текста.

Код выглядит следующим образом:

    const getWelcomeText = () => {
        return(
            <div>
                {texts.map((data, index) => (
                    <div  className='backgroundnawishta'>
                        <p  className='title'>
                            {data.title}
                        </p>
                        <p className='para' dangerouslySetInnerHTML={{__html: data.body}}  />
                    </div>
                ))}
            </div>
        )
    }

и стилизация css.

.para{
    font-size: clamp('1.5rem, 2vw, 5rem !important') ;
    line-height: clamp('2rem, 4vw, 5rem !important') ;
    font-family: titr !important;
    text-align: center !important;
    direction: rtl !important;
    color: #112D4E;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: 2px 2px #ffffff !important;
}

Есть ли способ получить чистый текст без использования dangerouslySetInnerHTML или могу ли я переопределить стиль TinyMCE?

Вернуться на верх