Merge pull request #456 from magento/magento-mpi-MC-32766

[Support] MC-32766: Page builder issue with secure variable

Author: omiroshnichenko

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

@@ -8,10 +8,14 @@ import events from "Magento_PageBuilder/js/events";
 import _ from "underscore";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
+import {DataObject} from "../../data-store";
 import delayUntil from "../../utils/delay-until";
 import {
-    createBookmark, createDoubleClickEvent,
-    findNodeIndex, getActiveEditor, getNodeByIndex,
+    createBookmark,
+    createDoubleClickEvent,
+    findNodeIndex,
+    getActiveEditor,
+    getNodeByIndex,
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
@@ -300,6 +304,18 @@ export default class Preview extends BasePreview {
     protected bindEvents() {
         super.bindEvents();
 
+        this.contentType.dataStore.subscribe((state: DataObject) => {
+            // Find html elements which attributes contain magento variables directives
+            const sanitizedContent = state.content.replace(/<([a-z0-9\-\_]+)([^>]+?[a-z0-9\-\_]+="[^"]*?\{\{.+?\}\}.*?".*?)>/gi, (match1: string, tag: string, attributes: string) => {
+                // Replace double quote with single quote within magento variable directive
+                const sanitizedAttributes = attributes.replace(/\{\{[^\{\}]+\}\}/gi, (match2: string) => match2.replace(/"/g, "'"));
+                return "<" + tag + sanitizedAttributes + ">";
+            });
+            if (sanitizedContent !== state.content) {
+                state.content = sanitizedContent;
+            }
+        });
+
         // After drop of new content type open TinyMCE and focus
         events.on("text:dropAfter", (args: ContentTypeMountEventParamsInterface) => {
             if (args.id === this.contentType.id) {

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

@@ -0,0 +1,94 @@
+/*
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+/* eslint-disable max-depth */
+/* jscs:disable jsDoc*/
+define([
+    'Magento_PageBuilder/js/content-type/text/preview',
+    'Magento_PageBuilder/js/content-type'
+], function (Preview, ContentType) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/content-type/text/preview', function () {
+        var preview;
+
+        function ObservableUpdater() {}
+        ObservableUpdater.prototype.update = function () {};
+
+        beforeEach(function () {
+            var contentType,
+                config,
+                observableUpdater;
+
+            observableUpdater = new ObservableUpdater();
+            config = {
+                name: 'text',
+                label: 'Text'
+            };
+            contentType = new ContentType(null, config);
+            preview = new Preview(contentType, config, observableUpdater);
+        });
+
+        describe('Text component content change', function () {
+            it('Should replace double quote with single quote if the directive is not in html attr', function () {
+                var actual = '<p>' +
+                    '<a title="Contact Us" href="{{config path="web/secure/base_url"}}contact">Contact Us</a>' +
+                    '</p>',
+                    expected = '<p>' +
+                        '<a title="Contact Us" href="{{config path=\'web/secure/base_url\'}}contact">Contact Us</a>' +
+                        '</p>';
+
+                preview.contentType.dataStore.setState({
+                    content: actual
+                });
+                expect(preview.contentType.dataStore.get('content')).toBe(expected);
+            });
+            it('Should not replace double quote with single quote if the directive is not in html attr', function () {
+                var actual = '<p>Our website:</p><p>{{config path="web/secure/base_url"}}</p>',
+                    expected = actual;
+
+                preview.contentType.dataStore.setState({
+                    content: actual
+                });
+                expect(preview.contentType.dataStore.get('content')).toBe(expected);
+            });
+        });
+    });
+
+    if (typeof Object.assign !== 'function') {
+        // Must be writable: true, enumerable: false, configurable: true
+        Object.defineProperty(Object, 'assign', {
+            value: function assign(target) { // .length of function is 2
+                var to,
+                    index,
+                    nextKey,
+                    nextSource;
+
+                if (target === null || target === undefined) {
+                    throw new TypeError('Cannot convert undefined or null to object');
+                }
+                to = Object(target);
+
+                for (index = 1; index < arguments.length; index++) {
+                    nextSource = arguments[index];
+
+                    if (nextSource !== null && nextSource !== undefined) {
+                        for (nextKey in nextSource) {
+                            // Avoid bugs when hasOwnProperty is shadowed
+                            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+                                to[nextKey] = nextSource[nextKey];
+                            }
+                        }
+                    }
+                }
+
+                return to;
+            },
+            writable: true,
+            configurable: true
+        });
+    }
+});