How to render a paragraph 'Text (formatted, long)' as full HTML, not escaped

Question

I'm trying to create a custom paragraph template that displays as an accordion. I am able to correctly reference most of the other variables, except for the Text (formatted, long) field types as whenever I do .value for the field, it returns the escaped value so it looks like <ul><li>text</li><li>text2</li></ul> instead of the actual bulleted list.

I am able to get the value using .value|raw, but I read that I should be avoided and I'd like to get this perform correctly.

Please let me know if any further information is required.

The following code is under paragraph--rn-accordion.html.twig. I have two paragraph types, rn_accordion and rn_accordion_section(which houses all the different fields). I tried to mirror this from the bootstrap module to get this working.

The troublesome fields are: {{ item['#paragraph'].field_rn_acc_1.value }} and {{ item['#paragraph'].field_rn_acc_2.value }}

            {# Prints Accordion template. #}
            <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }} role="tablist" aria-multiselectable="true">
                <div class="panel panel-default consortia">
                  {# Loop through all of the accordion sections. #}
                  {% for key, item in content.field_rn_accordion if key|first != '#' %}
                    <div class="panel-heading" role="tab" id="heading-{{ item['#paragraph'].field_rn_acc_abbr.value }}">
                      <div class="row panel-title">
                          <div class="col-sm-1 col-xs-2">
                            <img src="{{ base_path }}Images/Icons/{{ item['#paragraph'].field_rn_acc_abbr.value }}_Icon.png" alt="{{ item['#paragraph'].field_rn_acc_abbr.value }}" class="img-responsive"/>
                          </div>
                          <div class="col-sm-11 col-xs-10">
                            {# Print the accordion section title. #}
                            <h5>{{ item['#paragraph'].field_rn_acc_title.value }}</h5>
                            <p>
                              <small>
                                <a href="http://{{ item['#paragraph'].field_rn_acc_link.value }}" target="_blank">
                                {{ item['#paragraph'].field_rn_acc_link.value }}
                                </a>
                              </small>
                            </p>
                            <a class="button collapsed" data-toggle="collapse" data-parent="{{ paragraph_id }}" href="#{{ item['#paragraph'].field_rn_acc_abbr.value }}-1" aria-expanded="false" aria-controls="{{ item['#paragraph'].field_rn_acc_abbr.value }}-1">{{ item['#paragraph'].field_rn_acc_1_btn.value }}
                            </a>
                            <a class="button collapsed" data-toggle="collapse" data-parent="{{ paragraph_id }}" href="#{{ item['#paragraph'].field_rn_acc_abbr.value }}-2" aria-expanded="false" aria-controls="{{ item['#paragraph'].field_rn_acc_abbr.value }}-2">{{ item['#paragraph'].field_rn_acc_2_btn.value }}
                            </a>
                          </div>
                      </div>
                    </div>
                    <div id="{{ item['#paragraph'].field_rn_acc_abbr.value }}-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ item['#paragraph'].field_rn_acc_abbr.value }}">
                    {{ item['#paragraph'].field_rn_acc_1.value }}
                    </div>
                    <div id="{{ item['#paragraph'].field_rn_acc_abbr.value }}-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ item['#paragraph'].field_rn_acc_abbr.value }}">
                    {{ item['#paragraph'].field_rn_acc_2.value }}
                    </div>
                  {% endfor %}
                </div>
            </div>

Answer 1

If you want to render a formatted text field you have to use the render element processed_text:

  {% set paragraph =  item['#paragraph'] %}

  {% set body = {
    '#type':   'processed_text',
    '#text':    paragraph.field_rn_acc_1.value,
    '#format':  paragraph.field_rn_acc_1.format,
  } %}

  <div id="{{ paragraph.field_rn_acc_abbr.value }}-1" class="panel-collapse collapse">
  {{ body }}
  </div>