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

- Fix issue with place holder position with padding & margin

Author: davemacaulay

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

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-text" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div if="isWysiwygSupported()" class="inline-wysiwyg" ko-style="data.main.style" css="data.main.css" attr="data.main.attributes" afterRender="initWysiwyg" />
-    <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.main.html" translate="'Edit Text'"></div>
+    <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.main.html" ko-style="getPlaceholderStyle()" translate="'Edit Text'"></div>
 
     <div ifnot="isWysiwygSupported()">
         <textarea

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/text/default/preview.html

@@ -5,6 +5,7 @@
 
 import $ from "jquery";
 import events from "Magento_PageBuilder/js/events";
+import _ from "underscore";
 import Config from "../../config";
 import BasePreview from "../preview";
 import WysiwygFactory from "../wysiwyg/factory";
@@ -108,6 +109,28 @@ export default class Preview extends BasePreview {
         events.trigger("stage:interactionStop");
     }
 
+    /**
+     * Retrieve the margin & padding styles for the placeholder
+     *
+     * @returns {any}
+     */
+    public getPlaceholderStyle()
+    {
+        const keys = [
+            "marginBottom",
+            "marginLeft",
+            "marginRight",
+            "marginTop",
+            "paddingBottom",
+            "paddingLeft",
+            "paddingRight",
+            "paddingTop",
+        ];
+        return _.pick(this.data.main.style(), (style: string, key: string) => {
+            return keys.indexOf(key) !== -1;
+        });
+    }
+
     /**
      * Adjust textarea's height based on scrollHeight
      */