MC-849: Button On Frontend Has HTML Binding

- Replace usage of innerText with textContent in live edit
- Use underscore library to handle html encoding/decoding

Author: tjwiebell

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/live-edit.js

@@ -48,7 +48,7 @@ ko.bindingHandlers.liveEdit = {
             const tempDiv = document.createElement("div");
 
             tempDiv.innerHTML = html;
-            return tempDiv.innerText;
+            return tempDiv.textContent;
         };
 
         /**
@@ -109,7 +109,7 @@ ko.bindingHandlers.liveEdit = {
             handlePlaceholderClass(element);
         };
         element.setAttribute("data-placeholder", placeholder);
-        element.innerText = viewModel.previewData[field]();
+        element.textContent = viewModel.previewData[field]();
         element.contentEditable = true;
         element.addEventListener("focus", onFocus);
         element.addEventListener("blur", onBlur);
@@ -122,7 +122,7 @@ ko.bindingHandlers.liveEdit = {
 
         // Create a subscription onto the original data to update the internal value
         viewModel.previewData[field].subscribe((value: string) => {
-            element.innerText = viewModel.previewData[field]();
+            element.textContent = viewModel.previewData[field]();
             handlePlaceholderClass(element);
         });
     },
@@ -139,7 +139,7 @@ ko.bindingHandlers.liveEdit = {
     update(element, valueAccessor, allBindings, viewModel, bindingContext) {
         const {field} = valueAccessor();
 
-        element.innerText = viewModel.previewData[field]();
+        element.textContent = viewModel.previewData[field]();
         handlePlaceholderClass(element);
     },
 };

app/code/Magento/PageBuilder/view/adminhtml/web/js/converter/html/tag-escaper.js

@@ -3,6 +3,7 @@
  * See COPYING.txt for license details.
  */
 
+import {escape, unescape} from "underscore";
 import {DataObject} from "../../data-store";
 import ConverterInterface from "../converter-interface";
 
@@ -14,7 +15,7 @@ export default class TagEscaper implements ConverterInterface {
      * @returns {string | object}
      */
     public fromDom(value: string): string | object {
-        return value.replace(/&amp;lt;/g, "<").replace(/&amp;gt;/g, ">");
+        return unescape(unescape(value));
     }
 
     /**
@@ -25,6 +26,6 @@ export default class TagEscaper implements ConverterInterface {
      * @returns {string}
      */
     public toDom(name: string, data: DataObject): string {
-        return data[name].toString().replace(/</g, "&amp;lt;").replace(/>/g, "&amp;gt;");
+        return escape(escape(data[name].toString()));
     }
 }