#419: Nested Links If User Adds Link Attribute & Link Widget to Banner/Slide - Banner/Slide dialog for content Widget validation.

Author: artKozynets

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

@@ -58,7 +58,7 @@ define([
      * @return {Boolean}
      */
     function validateWysiwygHasWidget(str) {
-        return (/({{widget)+([^}}]+)}}/igm).test(str);
+        return (/\{\{widget(.*?)\}\}/ig).test(str);
     }
 
     /**

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

@@ -26,6 +26,7 @@ import {
     unlockImageSize,
 } from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
+import nestingWidgetDialog from "../../utils/nesting-widget-dialog";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import {ContentTypeReadyEventParamsInterface} from "../content-type-events.types";
@@ -497,6 +498,7 @@ export default class Preview extends BasePreview {
             }
             events.trigger(`image:${this.contentType.id}:assignAfter`, imageObject);
             nestingLinkDialog(this.contentType.dataStore, this.wysiwyg, "message", "link_url");
+            nestingWidgetDialog(this.contentType.dataStore, this.wysiwyg, "message", "link_url");
         });
         this.contentType.dataStore.subscribe(function(data: DataObject) {
             if (this.shouldUpdateVideo(data)) {

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -27,6 +27,7 @@ import {
     unlockImageSize,
 } from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
+import nestingWidgetDialog from "../../utils/nesting-widget-dialog";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import {ContentTypeMountEventParamsInterface, ContentTypeReadyEventParamsInterface} from "../content-type-events.types";
@@ -488,6 +489,7 @@ export default class Preview extends BasePreview {
             const imageObject = (dataStore[this.config.additional_data.uploaderConfig.dataScope] as object[])[0] || {};
             events.trigger(`image:${this.contentType.id}:assignAfter`, imageObject);
             nestingLinkDialog(this.contentType.dataStore, this.wysiwyg, "content", "link_url");
+            nestingWidgetDialog(this.contentType.dataStore, this.wysiwyg, "content", "link_url");
         });
 
         // Remove wysiwyg before assign new instance.

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import $ from "jquery";
+import $t from "mage/translate";
+import confirmationDialog from "Magento_PageBuilder/js/modal/dismissible-confirm";
+import {FieldDefaultsInterface} from "../content-type-factory";
+import DataStore, {DataObject} from "../data-store";
+import WysiwygInterface from "../wysiwyg/wysiwyg-interface";
+
+/**
+ * Validate inline editor for having nested widget
+ * Creates a dialog and removes inline editor widget if present
+ *
+ * @param {DataStore} dataStore
+ * @param {WysiwygInterface} wysiwyg
+ * @param {string} inlineMessageField
+ * @param {string} linkUrlField
+ */
+export default function nestingLinkDialog(
+    dataStore: DataStore,
+    wysiwyg: WysiwygInterface,
+    inlineMessageField: string,
+    linkUrlField: string,
+) {
+    const dataStoreContent = dataStore.getState() as DataObject;
+    const inlineMessage = dataStoreContent[inlineMessageField] as string;
+    const linkUrl = dataStoreContent[linkUrlField] as FieldDefaultsInterface;
+    const widgetRegex = /\{\{widget(.*?)\}\}/ig;
+    const widgetPlaceholderRegex = /<span.*(class=)(\"|\').*((magento-placeholder).*(magento-widget)|(magento-widget).*(magento-placeholder)).*<\/span>/igm;
+
+    if (wysiwyg &&
+        inlineMessage.match(widgetRegex) &&
+        linkUrl &&
+        ["page", "product", "category", "default"].indexOf(linkUrl.type) !== -1 &&
+        linkUrl[linkUrl.type] &&
+        linkUrl[linkUrl.type].length !== 0
+    ) {
+        const inlineEditor = $("#" + wysiwyg.elementId);
+        inlineEditor.blur();
+        confirmationDialog({
+            actions: {
+                always: () => {
+                    const widgetLessDataStoreMessage = inlineMessage.replace(widgetRegex, "");
+                    const widgetLessInlineMessage = inlineEditor.html().replace(widgetPlaceholderRegex, "");
+                    dataStore.set(inlineMessageField, widgetLessDataStoreMessage);
+                    inlineEditor.html(widgetLessInlineMessage);
+                },
+            },
+            content: $t("We are unable to support widget within the content field whilst having a link set on the content type. Please remove the content type link if you'd like to set a widget within the content. We will automatically remove the widget within the content field."), // tslint:disable-line:max-line-length
+            title: $t("Nested widgets are not allowed"),
+            haveCancelButton: false,
+        });
+    }
+}