MC-4965: Text Wrapping Inside Inline WYSIWYG Editors Will Break On Words (Storefront as well for Slide & Banner)

- add word wrapping to content editable items, banner, slide, tabs, text

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less

@@ -10,7 +10,7 @@
     [contenteditable=true] {
         -webkit-user-select: text;
         user-select: text;
-        word-break: break-all;
+        overflow-wrap: break-word;
 
         b {
             font-weight: normal;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less

@@ -31,9 +31,9 @@
         -webkit-transition: all 500ms ease;
         cursor: default;
         margin: @margin 0 0 0;
+        max-width: 100%;
         opacity: 1;
         transition: all 500ms ease;
-        word-break: break-all;
 
         span[contenteditable=true] {
             display: block;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less

@@ -29,9 +29,9 @@
         -webkit-transition: all 500ms ease;
         cursor: default;
         margin: @margin 0 0 0;
+        max-width: 100%;
         opacity: 1;
         transition: all 500ms ease;
-        word-break: break-all;
 
         span[contenteditable=true] {
             display: block;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_poster.less

@@ -36,6 +36,7 @@
         justify-content: center;
 
         .pagebuilder-poster-content {
+            max-width: 100%;
             text-align: center;
         }
     }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_default.less

@@ -29,6 +29,8 @@ div[data-role='tabs'],
             border-bottom-right-radius: 0 !important;
             display: inline-block;
             margin: 0;
+            max-width: 100%;
+            overflow-wrap: break-word;
             position: relative;
 
             a.tab-title {

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less

@@ -29,7 +29,7 @@
     background-clip: padding-box;
     border-radius: inherit;
     box-sizing: border-box;
-    word-break: break-all;
+    overflow-wrap: break-word;
 
     .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
@@ -52,15 +52,16 @@
 
     [data-element='content'] {
         min-height: 50px;
-        word-wrap: break-word;
     }
 
     .pagebuilder-banner-button {
         -moz-transition: opacity 500ms ease;
         -o-transition: opacity 500ms ease;
         -webkit-transition: opacity 500ms ease;
         margin: 20px 0 0 0;
+        max-width: 100%;
         transition: opacity 500ms ease;
+        word-break: break-word;
     }
 }
 

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_poster.less

@@ -9,6 +9,7 @@
 
 .pagebuilder-banner-wrapper {
     .pagebuilder-poster-content {
+        max-width: 100%;
         text-align: center;
     }
 }

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_default.less

@@ -33,7 +33,7 @@
 .pagebuilder-slide-wrapper {
     border-radius: inherit;
     box-sizing: border-box;
-    word-break: break-all;
+    overflow-wrap: break-word;
 
     .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
@@ -64,7 +64,9 @@
         -o-transition: opacity 500ms ease;
         -webkit-transition: opacity 500ms ease;
         margin: 20px 0 0 0;
+        max-width: 100%;
         transition: opacity 500ms ease;
+        word-break: break-word;
     }
 }
 

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_poster.less

@@ -9,6 +9,7 @@
 
 .pagebuilder-slide-wrapper {
     .pagebuilder-poster-content {
+        max-width: 100%;
         text-align: center;
     }
 }

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/tabs/_default.less

@@ -26,6 +26,8 @@ div[data-role='tabs'] {
             border-bottom-right-radius: 0 !important;
             display: inline-block;
             margin: 0;
+            max-width: 100%;
+            overflow-wrap: break-word;
             position: relative;
             z-index: 1;
 
@@ -45,7 +47,6 @@ div[data-role='tabs'] {
                 transition: all .3s;
                 vertical-align: middle;
                 white-space: normal;
-                word-break: break-all;
 
                 span.tab-title {
                     display: block;