Merge remote-tracking branch 'trigger/MC-1416' into MC-3308

Author: kieuphan2406

app/code/Magento/PageBuilder/Model/Wysiwyg/InlineEditing.php

@@ -13,17 +13,26 @@
  */
 class InlineEditing
 {
+    /**
+     * @var \Magento\Cms\Model\Wysiwyg\Config
+     */
+    private $wysiwygConfig;
+
     /**
      * @var array
      */
     private $wysiwygAdaptersSupportingInlineEditing;
 
     /**
      * InlineEditing constructor.
+     * @param \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig
      * @param array $wysiwygAdaptersSupportingInlineEditing
      */
-    public function __construct($wysiwygAdaptersSupportingInlineEditing = [])
-    {
+    public function __construct(
+        \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig,
+        array $wysiwygAdaptersSupportingInlineEditing
+    ) {
+        $this->wysiwygConfig = $wysiwygConfig;
         $this->wysiwygAdaptersSupportingInlineEditing = $wysiwygAdaptersSupportingInlineEditing;
     }
 
@@ -34,6 +43,7 @@ public function __construct($wysiwygAdaptersSupportingInlineEditing = [])
      */
     public function isAvailable(string $editorPath) : bool
     {
-        return $this->wysiwygAdaptersSupportingInlineEditing[$editorPath] ?? false;
+
+        return $this->wysiwygAdaptersSupportingInlineEditing[$editorPath] && $this->wysiwygConfig->isEnabled() ?? false;
     }
 }

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

@@ -22,8 +22,10 @@
             margin-bottom: 0;
             padding-bottom: @margin;
         }
-        ~ .mce-tinymce-inline {
-            transform: translateX(-1px);
+        .mce-tinymce-inline {
+            left: -2px;
+            right: -2px;
+            top: -1px;
         }
         .placeholder-text {
             left: 5px;

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

@@ -3,9 +3,6 @@
  * See COPYING.txt for license details.
  */
 
-import $ from "jquery";
-import events from "Magento_PageBuilder/js/events";
-import _ from "underscore";
 import Config from "../../config";
 import BasePreview from "../preview";
 import Wysiwyg from "../wysiwyg";
@@ -14,7 +11,6 @@ import Wysiwyg from "../wysiwyg";
  * @api
  */
 export default class Preview extends BasePreview {
-
     /**
      * Wysiwyg instance
      */
@@ -28,52 +24,11 @@ export default class Preview extends BasePreview {
             return;
         }
 
-        let inlineWysiwygConfig = this.config.additional_data.inlineWysiwygConfig;
-
-        if (inlineWysiwygConfig.encapsulateSelectorConfigKeys) {
-            inlineWysiwygConfig = $.extend(true, {}, this.config.additional_data.inlineWysiwygConfig);
-            _.each(inlineWysiwygConfig.encapsulateSelectorConfigKeys, (isEnabled, configKey) => {
-                const configValue = inlineWysiwygConfig.wysiwygConfig.settings[configKey];
-
-                if (!isEnabled) {
-                    return;
-                }
-
-                inlineWysiwygConfig.wysiwygConfig.settings[configKey] = (
-                    "#" + this.parent.id + (configValue ? " " + configValue : "")
-                );
-            });
-        }
-
         this.wysiwyg = new Wysiwyg(
+            this.parent.id,
             element.id,
-            inlineWysiwygConfig.wysiwygConfig,
-            inlineWysiwygConfig.mode,
-        );
-
-        // Update content in our data store after our stage preview wysiwyg gets updated
-        this.wysiwyg.onEdited(this.saveContentFromWysiwygToDataStore.bind(this));
-
-        // Update content in our stage preview wysiwyg after its slideout counterpart gets updated
-        events.on(`form:${this.parent.id}:saveAfter`, this.setContentFromDataStoreToWysiwyg.bind(this));
-    }
-
-    /**
-     * Update content in our data store after our stage preview wysiwyg gets updated
-     */
-    private saveContentFromWysiwygToDataStore() {
-        this.parent.dataStore.update(
-            this.wysiwyg.getAdapter().getContent(),
-            this.config.additional_data.inlineWysiwygConfig.contentDataStoreKey,
-        );
-    }
-
-    /**
-     * Update content in our stage wysiwyg after our data store gets updated
-     */
-    private setContentFromDataStoreToWysiwyg() {
-        this.wysiwyg.getAdapter().setContent(
-            this.parent.dataStore.get(this.config.additional_data.inlineWysiwygConfig.contentDataStoreKey) as string,
+            this.config.additional_data.wysiwygConfig,
+            this.parent.dataStore,
         );
     }
 }