MC-3735: Allow inline WYSIWYG editing of slides

omiroshnichenko · omiroshnichenko · commit e207c9749c10 · 2018-08-16T10:52:40.000-05:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less
@@ -12,7 +12,7 @@
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
-        padding: 35px 20px;
+        margin: 35px 20px;
         transition: background-color 500ms ease;
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-left.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-left.less
@@ -12,7 +12,7 @@
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
-        padding: 35px 20px;
+        margin: 35px 20px;
         transition: background-color 500ms ease;
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less
@@ -12,7 +12,13 @@
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
-        padding: 35px 20px;
+        margin: 35px 20px;
         transition: background-color 500ms ease;
+
+        .wysiwyg-container {
+            .mce-tinymce-inline {
+                left: unset!important;
+            }
+        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less
@@ -25,4 +25,46 @@
         opacity: 1;
         transition: all 500ms ease;
     }
+
+    .wysiwyg-container {
+        position: relative;
+
+        ol {
+            list-style: decimal;
+            padding-left: @margin;
+            li {
+                margin: 0 0 @margin 0;
+            }
+        }
+        .inline-wysiwyg {
+            min-height: 50px;
+        }
+        .mce-tinymce-inline {
+            left: -2px !important;
+            min-height: 50px;
+            padding: 5px !important;
+            right: -2px;
+            top: -1px !important;
+        }
+        .pagebuilder-empty-slide {
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+            text-align: center;
+            top: 0;
+            width: 100%;
+        }
+        > .mce-edit-focus {
+            ~ .pagebuilder-options,
+            ~ .pagebuilder-empty-slide {
+                display: none;
+            }
+        }
+    }
+
+    &.pagebuilder-toolbar-active {
+        .inline-wysiwyg {
+            box-shadow: 0 0 0 1px rgb(153, 153, 153);
+        }
+    }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_poster.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_poster.less
@@ -16,9 +16,10 @@
         display: flex;
         justify-content: center;
         transition: background-color 500ms ease;
-    }
 
-    .pagebuilder-poster-content {
-        text-align: center;
+        .wysiwyg-container {
+            text-align: center;
+            min-width: 50%;
+        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less
@@ -16,15 +16,13 @@
 
     .slider-container {
         .pagebuilder-system-border;
-        overflow: hidden;
 
         .slick-list,
         .slick-track,
         .slick-slide {
             min-height: inherit;
 
             > div {
-                overflow: hidden;
                 width: 100%;
             }
         }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html
@@ -11,15 +11,16 @@
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
-        <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style()">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
-            <div if="data.content.html()"
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
+        <div class="pagebuilder-collage-overlay wysiwyg-container" ko-style="data.overlay.style()">
+            <div class="inline-wysiwyg"
                  attr="data.content.attributes"
                  ko-style="data.content.style"
                  css="data.content.css"
-                 html="data.content.html">
+                 afterRender="initWysiwyg">
+                <div html="data.content.html"></div>
             </div>
             <div ifnot="data.content.html()"
                  class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html
@@ -12,17 +12,18 @@
     <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
          css="data.main.css"
          event="{ mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper }">
-        <div class="pagebuilder-collage-overlay"
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
+        <div class="pagebuilder-collage-overlay wysiwyg-container"
              attr="data.overlay.attributes"
              ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
-            <div if="data.content.html()"
-                 css="data.content.css"
-                 html="data.content.html"
+            <div class="inline-wysiwyg"
                  attr="data.content.attributes"
-                 ko-style="data.content.style">
+                 ko-style="data.content.style"
+                 css="data.content.css"
+                 afterRender="initWysiwyg">
+                <div html="data.content.html"></div>
             </div>
             <div ifnot="data.content.html()"
                  class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html
@@ -11,15 +11,16 @@
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
-        <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
-            <div if="data.content.html()"
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
+        <div class="pagebuilder-collage-overlay wysiwyg-container" ko-style="data.overlay.style">
+            <div class="inline-wysiwyg"
                  attr="data.content.attributes"
                  ko-style="data.content.style"
                  css="data.content.css"
-                 html="data.content.html">
+                 afterRender="initWysiwyg">
+                <div html="data.content.html"></div>
             </div>
             <div ifnot="data.content.html()"
                  class="pagebuilder-empty-slide"
@@ -35,7 +36,7 @@
                ko-style="data.button.style"
                css="data.button.css">
                 <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
-            </a>
+            </div>
         </div>
     </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html
@@ -19,12 +19,13 @@
             <scope args="getUploader().getUiComponent()">
                 <render />
             </scope>
-            <div class="pagebuilder-poster-content">
-                <div if="data.content.html()"
+            <div class="pagebuilder-poster-content wysiwyg-container">
+                <div class="inline-wysiwyg"
                      attr="data.content.attributes"
                      ko-style="data.content.style"
                      css="data.content.css"
-                     html="data.content.html">
+                     afterRender="initWysiwyg">
+                    <div html="data.content.html"></div>
                 </div>
                 <div ifnot="data.content.html()"
                      class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts
diff --git a/app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/slide.xml b/app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/slide.xml

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`-moz-transition: background-color 500ms ease;`
`13`	`13`	`-o-transition: background-color 500ms ease;`
`14`	`14`	`-webkit-transition: background-color 500ms ease;`
`15`		`- padding: 35px 20px;`
	`15`	`+ margin: 35px 20px;`
`16`	`16`	`transition: background-color 500ms ease;`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,9 +16,10 @@`
`16`	`16`	`display: flex;`
`17`	`17`	`justify-content: center;`
`18`	`18`	`transition: background-color 500ms ease;`
`19`		`- }`
`20`	`19`
`21`		`- .pagebuilder-poster-content {`
`22`		`- text-align: center;`
	`20`	`+ .wysiwyg-container {`
	`21`	`+ text-align: center;`
	`22`	`+ min-width: 50%;`
	`23`	`+ }`
`23`	`24`	`}`
`24`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,15 +16,13 @@`
`16`	`16`
`17`	`17`	`.slider-container {`
`18`	`18`	`.pagebuilder-system-border;`
`19`		`- overflow: hidden;`
`20`	`19`
`21`	`20`	`.slick-list,`
`22`	`21`	`.slick-track,`
`23`	`22`	`.slick-slide {`
`24`	`23`	`min-height: inherit;`
`25`	`24`
`26`	`25`	`> div {`
`27`		`- overflow: hidden;`
`28`	`26`	`width: 100%;`
`29`	`27`	`}`
`30`	`28`	`}`