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

- Updated banner and slider form with the new url-input template for error messaging
- Updated styles for error handling
- Updated preview component for new error logic
- Added url and message input validation rule
- Added custom dialog box for inline editor validation

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_banner_form.xml

@@ -108,6 +108,12 @@
             <settings>
                 <label translate="true">Message Text</label>
                 <dataScope>message</dataScope>
+                <validation>
+                    <rule name="validate-no-url" xsi:type="boolean">true</rule>
+                </validation>
+                <imports>
+                    <link name="validation.validate-no-url">${$.parentName}.link_url:value</link>
+                </imports>
             </settings>
             <formElements>
                 <wysiwyg>
@@ -117,12 +123,18 @@
                 </wysiwyg>
             </formElements>
         </field>
-        <urlInput name="link_url" sortOrder="20">
+        <urlInput name="link_url" sortOrder="20" template="Magento_PageBuilder/form/element/url-input">
             <settings>
                 <dataType>text</dataType>
                 <label translate="true">Link</label>
                 <dataScope>link_url</dataScope>
                 <urlTypes class="Magento\Ui\Model\UrlInput\LinksConfigProvider"/>
+                <validation>
+                    <rule name="validate-message-no-link" xsi:type="boolean">true</rule>
+                </validation>
+                <imports>
+                    <link name="validation.validate-message-no-link">${$.parentName}.message:value</link>
+                </imports>
             </settings>
         </urlInput>
         <field name="show_button" sortOrder="40" formElement="select">

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml

@@ -124,6 +124,12 @@
             <settings>
                 <label translate="true">Message Text</label>
                 <dataScope>content</dataScope>
+                <validation>
+                    <rule name="validate-no-url" xsi:type="boolean">true</rule>
+                </validation>
+                <imports>
+                    <link name="validation.validate-no-url">${$.parentName}.link_url:value</link>
+                </imports>
             </settings>
             <formElements>
                 <wysiwyg>
@@ -133,12 +139,18 @@
                 </wysiwyg>
             </formElements>
         </field>
-        <urlInput name="link_url" sortOrder="20">
+        <urlInput name="link_url" sortOrder="20" template="Magento_PageBuilder/form/element/url-input">
             <settings>
                 <dataType>text</dataType>
                 <label translate="true">Link</label>
                 <dataScope>link_url</dataScope>
                 <urlTypes class="Magento\Ui\Model\UrlInput\LinksConfigProvider"/>
+                <validation>
+                    <rule name="validate-message-no-link" xsi:type="boolean">true</rule>
+                </validation>
+                <imports>
+                    <link name="validation.validate-message-no-link">${$.parentName}.content:value</link>
+                </imports>
             </settings>
         </urlInput>
         <field name="show_button" sortOrder="40" formElement="select">

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_config.less

@@ -3,6 +3,11 @@
 //  * See COPYING.txt for license details.
 //  */
 
+.error-border (@color) {
+    border: 1px solid @color;
+    overflow: hidden;
+}
+
 [data-role='modal'] {
     .action-pagebuilder-cancel,
     .action-pagebuilder-cancel:hover {
@@ -17,13 +22,28 @@
 
     .admin__field {
         &._error {
+            .url-input-element-linked-element {
+                input,
+                .action-select-wrap {
+                    .error-border(@field-error-control__border-color);
+                }
+            }
+
             .admin__field-control > .admin__field-design-options > .layout-onion {
-                border: 1px solid @field-error-control__border-color;
-                overflow: hidden;
+                .error-border(@field-error-control__border-color);
+            }
+            ._error {
+                .admin__control-wysiwig {
+                    .textarea {
+                        .error-border(@field-error-control__border-color);
+                    }
+                    .mce-tinymce {
+                        .error-border(@field-error-control__border-color);
+                    }
+                }
             }
         }
     }
-
     ._required {
         > .admin__field-label {
             > label:after {

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

@@ -44,6 +44,30 @@ define([
         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);
     }
 
+    /**
+     * Validate that string has an anchor tag
+     * @param {String} str
+     * @return {Boolean}
+     */
+    function validateWysiwygHasAnchorTags(str) {
+
+        return (/<a.*?>|<\/a>/igm).test(str)//eslint-disable-line max-len);
+    }
+
+    /**
+     * Validate message field and url field anchor tag is used exclusively by one field
+     * @param {String} message
+     * @param {Object} url
+     * @return {Boolean}
+     */
+    function validateOneAnchorTagField(message, url) {
+
+        return !(validateWysiwygHasAnchorTags(message) && ((url.type === 'page' && url.page && url.page.length !== 0)
+            || (url.type === 'product' && url.product && url.product.length !== 0)
+            || (url.type === 'category' && url.category && url.category.length !== 0)
+            || (url.type === 'default' && url.default && url.default.length !== 0)));
+    }
+
     /**
      * Validate a field with an expected data value of type object, like margins_and_padding field
      * @param {Function} validator
@@ -144,6 +168,23 @@ define([
             },
             $.mage.__(requiredInputRule.message)
         );
+
+        validator.addRule(
+            'validate-message-no-link',
+            function (url,message) {
+                return validateOneAnchorTagField(message, url);
+            },
+            $.mage.__('Adding link in both content and outer element is not allowed')
+        );
+
+        validator.addRule(
+            'validate-no-url',
+            function (message,url) {
+                return validateOneAnchorTagField(message, url);
+            },
+            $.mage.__('Adding link in both content and outer element is not allowed')
+        );
+
         validateObjectField(validator, 'validate-number');
         validateObjectField(validator, 'less-than-equals-to');
         validateObjectField(validator, 'greater-than-equals-to');

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/**
+ * Extend the confirmation prompt to allow for an additional checkbox to be displayed. The checkbox enables the user to
+ * dismiss subsequent prompts of the same type based on their dismissKey.
+ *
+ * Once a type is dismissed a cookie is set and all future instances of that prompt are bypassed. This cookie is
+ * cleared once the user logs out and back in via an observer.
+ */
+define([
+    'jquery',
+    'underscore',
+    'text!Magento_PageBuilder/template/modal/dismissible-modal-content.html',
+    'mage/translate',
+    'Magento_Ui/js/modal/prompt',
+    'mage/cookies'
+], function ($, _, promptContentTmpl) {
+    'use strict';
+
+    $.widget('mage.dismissibleConfirm', $.mage.prompt, {
+        options: {
+            promptContentTmpl: promptContentTmpl,
+            buttons: [{
+                text: $.mage.__('Revert Link'),
+                class: 'action-primary action-accept',
+
+                /**
+                 * Click handler.
+                 */
+                click: function () {
+                    this.closeModal(true);
+                }
+            }]
+        },
+    });
+
+    return function (config) {
+        return $('<div></div>').html(config.content).dismissibleConfirm(config);
+    };
+});

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

@@ -0,0 +1,29 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<!--render select with link types-->
+<div class="admin__field url-input-container"
+     visible="visible"
+     css="$data.additionalClasses"
+     attr="'data-index': index">
+    <label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
+        <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
+    </label>
+    <div class="admin__field-control"
+         css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
+        <div class="type-selector-input-container">
+            <!--render link types select-->
+            <render args="typeSelectorTemplate"/>
+            <!--display field to insert link value based on link type-->
+            <div ko-scope="getLinkedElementName()" class="url-input-element-linked-element">
+                <render/>
+            </div>
+        </div>
+        <label class="admin__field-error" visible="error" attr="for: uid" text="error"/>
+        <!--display container to specify url options(Example: open in new tab)-->
+        <div render="settingTemplate" if="isDisplayAdditionalSettings"/>
+    </div>
+</div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/modal/nest-link-dialog.js

@@ -6,10 +6,12 @@
 import $ from "jquery";
 import $t from "mage/translate";
 import events from "Magento_PageBuilder/js/events";
+import singleButtonDialog from "Magento_PageBuilder/js/modal/nest-link-dialog";
 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 WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
@@ -243,6 +245,29 @@ 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.*?>|<\/a>/igm;
+            if (message.match(aLinkRegex) && dataStore.link_url && ((linkUrl.type === "page"
+            && linkUrl.page && linkUrl.page.length !== 0) || (linkUrl.type === "product" && linkUrl.product
+            && linkUrl.product.length !== 0) || (linkUrl.type === "category" && linkUrl.category
+            && linkUrl.category.length !== 0) || (linkUrl.type === "default" && linkUrl.default
+            && linkUrl.default.length !== 0))) {
+                singleButtonDialog({
+                    actions: {
+                        confirm: () => {
+                            const anchorLessMessage = message.replace(aLinkRegex, "");
+                            // Call the parent to remove the child element
+                            this.parent.dataStore.update(anchorLessMessage, "message");
+                            $("#" + this.wysiwyg.elementId).html(anchorLessMessage);
+                        },
+                    },
+                    content: $t("Adding link in both contents and the outer element will result in nesting links. " +
+                        "This may break the structure of the page elements."), // tslint:disable-line:max-line-length
+                    title: $t("Nesting links are not allowed"),
+                    buttonText: "Revert Link",
+                });
+            }
         });
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/url-input.html

@@ -19,6 +19,8 @@ import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params";
 import BasePreview from "../preview";
 import SliderPreview from "../slider/preview";
+import FieldDefaultsInterface from "../../field-defaults";
+import singleButtonDialog from "Magento_PageBuilder/js/modal/nest-link-dialog";
 
 /**
  * @api
@@ -286,6 +288,29 @@ 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.*?>|<\/a>/igm;
+            if (content.match(aLinkRegex) && dataStore.link_url && ((linkUrl.type === "page"
+                && linkUrl.page && linkUrl.page.length !== 0) || (linkUrl.type === "product" && linkUrl.product
+                && linkUrl.product.length !== 0) || (linkUrl.type === "category" && linkUrl.category
+                && linkUrl.category.length !== 0) || (linkUrl.type === "default" && linkUrl.default
+                && linkUrl.default.length !== 0))) {
+                singleButtonDialog({
+                    actions: {
+                        confirm: () => {
+                            const anchorLessMessage = content.replace(aLinkRegex, "");
+                            // Call the parent to remove the child element
+                            this.parent.dataStore.update(anchorLessMessage, "content");
+                            $("#" + this.wysiwyg.elementId).html(anchorLessMessage);
+                        },
+                    },
+                    content: $t("Adding link in both contents and the outer element will result in nesting links. " +
+                        "This may break the structure of the page elements."), // tslint:disable-line:max-line-length
+                    title: $t("Nesting links are not allowed"),
+                    buttonText: "Revert Link",
+                });
+            }
         });
 
         // Remove wysiwyg before assign new instance.