UHF-3511: Add user-edited-content class to wrap custom html

src/scss/05_objects/__index.scss

@@ -4,3 +4,4 @@
 @import 'hyphenate';
 @import 'link';
 @import 'quote';
+@import 'user-edited-content';

src/scss/05_objects/_user-edited-content.scss

@@ -0,0 +1,3 @@
+.user-edited-content {
+  overflow-wrap: break-word;
+}

templates/component/remote-video.twig

@@ -21,6 +21,6 @@
     {% if video_title|render %}
       <{{ video_title_level }} class="remote-video__video-title">{{ video_title }}</{{ video_title_level }}>
     {% endif %}
-    <div class="remote-video__video-desc">{{ video_desc }}</div>
+    <div class="remote-video__video-desc user-edited-content">{{ video_desc }}</div>
   {% endblock component_content %}
 {% endembed %}

templates/misc/component.twig

@@ -59,7 +59,7 @@ Example usage:
     {% endif %}
 
     {% if component_description|render %}
-      <div class="component__description">
+      <div class="component__description user-edited-content">
         {{ component_description}}
       </div>
     {% endif %}

templates/module/helfi_tpr/tpr-errand-service.html.twig

@@ -48,7 +48,7 @@
                 'component--hardcoded',
                 'errand-service__accordion',
               ],
-              component_content_class: 'accordion',
+              component_content_class: ['accordion', 'user-edited-content'],
             }
           %}
             {% block component_content %}

templates/module/helfi_tpr/tpr-unit.html.twig

@@ -54,7 +54,7 @@
   {# End of Main image #}
 
   {% if content.description|render and hide_description == false %}
-    <div class="long-desc">
+    <div class="long-desc user-edited-content">
       {{ content.description }}
     </div>
   {% endif %}

templates/paragraphs/paragraph--banner.html.twig

@@ -67,7 +67,7 @@
               <h2 class="banner__title">{{ content.field_banner_title }}</h2>
             {% endif %}
             {% if has_description %}
-              <div class="banner__desc">{{ content.field_banner_desc }}</div>
+              <div class="banner__desc user-edited-content">{{ content.field_banner_desc }}</div>
             {% endif %}
           </div>
           {% if has_link %}

templates/paragraphs/paragraph--hero.html.twig

@@ -53,7 +53,7 @@
               design == "with-image-bottom" or
               design == "diagonal"
             %}
-              <div class="hero__description">
+              <div class="hero__description user-edited-content">
                 {{ description }}
               </div>
             {% endif %}

templates/paragraphs/paragraph--liftup-with-image.html.twig

@@ -37,7 +37,7 @@
         <div class="liftup-with-image__content">
           <h2 class="liftup-with-image__title">{{ content.field_liftup_with_image_title }}</h2>
           {% if content.field_liftup_with_image_desc|render %}
-            <div class="liftup-with-image__desc">{{ content.field_liftup_with_image_desc }}</div>
+            <div class="liftup-with-image__desc user-edited-content">{{ content.field_liftup_with_image_desc }}</div>
           {% endif %}
         </div>
       </div>

templates/paragraphs/paragraph--phasing-item.html.twig

@@ -11,7 +11,7 @@
       {{ content.field_title}}
     </p>
     {% if content.field_description|render %}
-      <div class="phasing__item-description">
+      <div class="phasing__item-description user-edited-content">
         {{ content.field_description}}
       </div>
     {% endif %}

templates/paragraphs/paragraph--sidebar-text.html.twig

@@ -54,7 +54,7 @@
       </h2>
     {% endif %}
     {% if content.field_sidebar_text_text|render %}
-      <div class="sidebar-text__text-content">
+      <div class="sidebar-text__text-content user-edited-content">
         {{ content.field_sidebar_text_text }}
       </div>
     {% endif %}

templates/paragraphs/paragraph--text.html.twig

@@ -1,5 +1,8 @@
 {% block paragraph %}
-  {% embed "@hdbt/misc/component.twig" with { component_classes: [ 'component--paragraph-text' ], } %}
+  {% embed "@hdbt/misc/component.twig" with {
+    component_classes: [ 'component--paragraph-text' ],
+    component_content_class: [ 'user-edited-content' ], 
+  } %}
     {% block component_content %}
 
       {{ content }}