Use rich text editor without adding extra <p> tags

[ezraassj]

Hello,

I'm currently creating a blog for one of my client. I created a blog post template with custom modules.

For the main content of the article I created a module where the users can add different style of paragraph (like full text, quote text, image left text right, etc.).

When the user picks full text, a rich text editor appears (full_text is the variable name) where he can start writting his long text.

In my HTML + HUBL it is shown like this

{% if style == "full_text" %}
   <div class="articleblock_fulltext">
      <h2 class="title">{{ item.full_text_title }}</h2>
         <p class="text">{{ item.full_text }}</p>
   </div>
      
{% elif style == "quote_text" %}
    <div class="block_quote">
       <p class="quote">"{{ item.quote_text }}"</p>
     </div>

{% endif %}

My issue is after the rich text editor has been used, in creates a new <p> tags inside my <p class="text"> resulting then in the wrong design because it isn't using the "text" class.

Is there a way to apply to automatically add the class="text" when rich text editor is used ?

I could modify directly the <p> tag styling in the css but since some other <p> tags on the page are using different class I can't do that.

[Kevin-C · Accepted solution]

Hey @ezraassj 

In your case you can anticipate the output structure and handle it using css exclusively IMO. Specifically using the Child Combinator ">" or the Adjacent Sibiling Combinator

.text > p {
  /* your styles here */
}

 Or remove the paragraph with the "text" class all together and work with the the paragraphs generated. It important to remember that hard returns in a rich text module generate a new paragraph tags.

.articleblock_fulltext > p {
  /* style for all p tags directly under the parent */
}

or

h2.title + p {
  /* will select the first p sibling following the h2.title */
}

or

h2.title ~ p {
  /* all Ps that are siblings of h2.title */
}

[ezraassj]

Thanks @Kevin-C  !

I went for the second solution you proposed and it works like a charm 🙂