MC-3908: Dragging a text content block into the stage causes global styles to be changed and fonts to flash

- Fix slide in animation
- Remove content_css within adapter rather than texts implementation

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less

@@ -14,9 +14,6 @@
         min-height: 20px;
         vertical-align: baseline;
     }
-    &.mce-edit-focus {
-        outline: none;
-    }
     ~ .mce-tinymce-inline {
         display: block !important;
         height: auto !important;
@@ -38,9 +35,11 @@
         .mce-abs-layout-item {
             position: static;
         }
+    }
+    &.mce-edit-focus {
+        outline: none;
 
-        // Targeting focused editor (there aren't any classes to hook into for this)
-        &:not([style*='display: none;']) {
+        ~ .mce-tinymce-inline {
             opacity: 1;
             pointer-events: all;
             transform: translateY(-100%);

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js

@@ -5,7 +5,7 @@
 
 import $ from "jquery";
 import events from "Magento_PageBuilder/js/events";
-import {Settings} from "tinymce";
+import {Editor, Settings} from "tinymce";
 import Config from "../../config";
 import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params";
@@ -50,15 +50,6 @@ export default class Preview extends BasePreview {
         element.id = this.parent.id + "-editor";
 
         const wysiwygConfig = this.config.additional_data.wysiwygConfig.wysiwygConfigData;
-
-        /**
-         * Don't include content_css within the inline mode of TinyMCE, if any stylesheets are included here they're
-         * appended to the head of the main page, and thus cause other styles to be modified.
-         *
-         * The styles for typography in the inline editor are scoped within _typography.less
-         */
-        wysiwygConfig.adapter.tinymce4.content_css = [];
-
         if (this.parent.dropped) {
             wysiwygConfig.adapter.settings.auto_focus = element.id;
         }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/wysiwyg/tinymce4.js

@@ -69,6 +69,16 @@ export default class Wysiwyg implements WysiwygInterface {
         this.config = config;
         this.dataStore = dataStore;
 
+        if (this.config.adapter_config.mode === "inline") {
+            /**
+             * Don't include content_css within the inline mode of TinyMCE, if any stylesheets are included here they're
+             * appended to the head of the main page, and thus cause other styles to be modified.
+             *
+             * The styles for typography in the inline editor are scoped within _typography.less
+             */
+            this.config.adapter.tinymce4.content_css = [];
+        }
+
         const wysiwygSetup = new WysiwygSetup(this.elementId, this.config.adapter);
 
         wysiwygSetup.setup(this.config.adapter_config.mode);