MC-5386: Anchors Under Each Div if TinyMCE link Is Added to Banner/Slide (Add Notification for When Link Attribute Is Entered)

- Updated validator rule mixin file for syntax issue
- Moved nesting link dialog logic to it's own utility file.

Author: Hwashiang Yu

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

@@ -40,7 +40,6 @@ define([
      * @return {Boolean}
      */
     function validateIsUrl(href) {
-
         return (/^(http|https|ftp):\/\/(([A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))(\.[A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))*)(:(\d+))?(\/[A-Z0-9~](([A-Z0-9_~-]|\.)*[A-Z0-9~]|))*\/?(.*)?$/i).test(href);//eslint-disable-line max-len
     }
 
@@ -50,7 +49,6 @@ define([
      * @return {Boolean}
      */
     function validateWysiwygHasAnchorTags(str) {
-
         return (/<a[\s]+([^>]+)>|<a>|<\/a>/igm).test(str);
     }
 
@@ -61,7 +59,6 @@ define([
      * @return {Boolean}
      */
     function validateOneAnchorTagField(message, url) {
-
         return !(validateWysiwygHasAnchorTags(message) &&
             ['page', 'product', 'category', 'default'].indexOf(url.type) !== -1 &&
             url[url.type] &&

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

@@ -6,13 +6,12 @@
 import $ from "jquery";
 import $t from "mage/translate";
 import events from "Magento_PageBuilder/js/events";
-import confirmationDialog from "Magento_PageBuilder/js/modal/dismissible-confirm";
 import Config from "../../config";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.d";
 import {DataObject} from "../../data-store";
-import FieldDefaultsInterface from "../../field-defaults.d";
 import Uploader from "../../uploader";
+import nestingLinkDialog from "../../utils/nesting-link-dialog";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import BasePreview from "../preview";
@@ -245,28 +244,7 @@ export default class Preview extends BasePreview {
             const dataStore = this.parent.dataStore.get() as DataObject;
             const imageObject = dataStore[this.config.additional_data.uploaderConfig.dataScope][0] || {};
             events.trigger(`image:${this.parent.id}:assignAfter`, imageObject);
-            const message = dataStore.message as string;
-            const linkUrl = dataStore.link_url as FieldDefaultsInterface;
-            const aLinkRegex = /<a[\s]+([^>]+)>|<a>|<\/a>/igm;
-            if (message.match(aLinkRegex) &&
-            dataStore.link_url &&
-            ["page", "product", "category", "default"].indexOf(linkUrl.type) !== -1 &&
-            linkUrl[linkUrl.type] &&
-            linkUrl[linkUrl.type].length !== 0) {
-                confirmationDialog({
-                    actions: {
-                        always: () => {
-                            const anchorLessMessage = message.replace(aLinkRegex, "");
-                            this.parent.dataStore.update(anchorLessMessage, "message");
-                            $("#" + this.wysiwyg.elementId).html(anchorLessMessage);
-                        },
-
-                    },
-                    content: $t("Adding link in content and outer element is not allowed. Remove the link from the element before adding links to the content."), // tslint:disable-line:max-line-length
-                    title: $t("Nesting links are not allowed"),
-                    haveCancelButton: false,
-                });
-            }
+            nestingLinkDialog(this.parent.dataStore, this.wysiwyg, "message", "link_url");
         });
     }
 

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

@@ -6,16 +6,15 @@
 import $ from "jquery";
 import $t from "mage/translate";
 import events from "Magento_PageBuilder/js/events";
-import confirmationDialog from "Magento_PageBuilder/js/modal/dismissible-confirm";
 import _ from "underscore";
 import {PreviewSortableSortUpdateEventParams} from "../../binding/sortable-children";
 import Config from "../../config";
 import ConditionalRemoveOption from "../../content-type-menu/conditional-remove-option";
 import {OptionsInterface} from "../../content-type-menu/option.d";
 import {DataObject} from "../../data-store";
-import FieldDefaultsInterface from "../../field-defaults";
 import Uploader from "../../uploader";
 import delayUntil from "../../utils/delay-until";
+import nestingLinkDialog from "../../utils/nesting-link-dialog";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params";
@@ -288,27 +287,7 @@ export default class Preview extends BasePreview {
             const dataStore = this.parent.dataStore.get() as DataObject;
             const imageObject = dataStore[this.config.additional_data.uploaderConfig.dataScope][0] || {};
             events.trigger(`image:${this.parent.id}:assignAfter`, imageObject);
-            const content = dataStore.content as string;
-            const linkUrl = dataStore.link_url as FieldDefaultsInterface;
-            const aLinkRegex = /<a[\s]+([^>]+)>|<a>|<\/a>/igm;
-            if (content.match(aLinkRegex) &&
-                dataStore.link_url &&
-                ["page", "product", "category", "default"].indexOf(linkUrl.type) !== -1 &&
-                linkUrl[linkUrl.type] &&
-                linkUrl[linkUrl.type].length !== 0) {
-                confirmationDialog({
-                    actions: {
-                        always: () => {
-                            const anchorLessMessage = content.replace(aLinkRegex, "");
-                            this.parent.dataStore.update(anchorLessMessage, "content");
-                            $("#" + this.wysiwyg.elementId).html(anchorLessMessage);
-                        },
-                    },
-                    content: $t("Adding link in content and outer element is not allowed. Remove the link from the element before adding links to the content."), // tslint:disable-line:max-line-length
-                    title: $t("Nesting links are not allowed"),
-                    haveCancelButton: false,
-                });
-            }
+            nestingLinkDialog(this.parent.dataStore, this.wysiwyg, "content", "link_url");
         });
 
         // Remove wysiwyg before assign new instance.

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/nesting-link-dialog.js

@@ -0,0 +1,49 @@
+/**
+ * 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 DataStore, {DataObject} from "../data-store";
+import FieldDefaultsInterface from "../field-defaults";
+import WysiwygInterface from "../wysiwyg/wysiwyg-interface";
+
+/**
+ * Validate inline editor for having nested link
+ * Creates a dialog and removes inline editor link if present
+ *
+ * @param {DataObject} 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.get() as DataObject;
+    const inlineMessage = dataStoreContent[inlineMessageField] as string;
+    const linkUrl = dataStoreContent[linkUrlField] as FieldDefaultsInterface;
+    const aLinkRegex = /<a[\s]+([^>]+)>|<a>|<\/a>/igm;
+    if (inlineMessage.match(aLinkRegex) &&
+        linkUrl &&
+        ["page", "product", "category", "default"].indexOf(linkUrl.type) !== -1 &&
+        linkUrl[linkUrl.type] &&
+        linkUrl[linkUrl.type].length !== 0) {
+        confirmationDialog({
+            actions: {
+                always: () => {
+                    const anchorLessInlineMessage = inlineMessage.replace(aLinkRegex, "");
+                    dataStore.update(anchorLessInlineMessage, inlineMessageField);
+                    $("#" + wysiwyg.elementId).html(anchorLessInlineMessage);
+                },
+            },
+            content: $t("Adding link in content and outer element is not allowed. Remove the link from the element before adding links to the content."), // tslint:disable-line:max-line-length
+            title: $t("Nesting links are not allowed"),
+            haveCancelButton: false,
+        });
+    }
+}