Widgets with a WYSIWYG parameter fail when inserting them into a WYSIWYG in a form.

[molovo]

Preconditions (*)

This is occurring for me in two separate Magento 2 projects, using the following versions.

1. Magento Enterprise Edition v2.2.5
2. Magento Community Edition v2.2.5

Steps to reproduce (*)

(Code examples in this gist)

1. Create a WYSIWYG block as shown in Wysiwyg.php
2. Create a widget with a parameter which uses the WYSIWYG block as shown in widget.xml
3. Edit a CMS page, and insert the new widget into the content WYSIWYG.

Expected result (*)

1. Widget is inserted into the WYSIWYG in the main form

Actual result (*)

1. If editor for the WYSIWYG in the widget is visible when clicking Insert, the widget is not inserted, it just seems to disappear
2. If the WYSIWYG in the widget is hidden when clicking Insert, the widget is inserted into the first WYSIWYG on the page

In-depth explanation

I've created a screen recording in which I've done my best to demonstrate the strange behaviour occurring here, and I'll explain in more detail below.

I appreciate the screen recording could be a little confusing, so here's the steps I'm attempting to demonstrate:

1. 'Secondary Description' field is empty, and add_widgets is set to false
2. I add a widget to the 'Content (Main)' field, enter text into the WYSIWYG, and click 'Insert Widget'
3. Nothing is added to either the 'Content (Main)' or 'Secondary Description' fields.
4. I add the widget to 'Content (Main)' again, this time clicking 'Show/Hide Editor' before clicking 'Insert Widget'
5. The widget is added to the (incorrect) 'Secondary Description' field
6. I cut and paste the widget from the 'Secondary Description' field, to the 'Content (Main)' field.

This was recorded in the category editor, but the issue occurs in any form which allows adding widgets via a WYSIWYG. In my case, this is Categories, Products and CMS pages in one Enterprise Edition project, and CMS pages and some other custom modules in one Community Edition project, so it seems the issue is universal.

When you first enter content into the WYSIWYG in the widget, and click 'Insert Widget', it appears to disappear. What appears to be happening, is that the widget content is inserted into itself, in the WYSIWYG inside the widget form.

If you click 'Show/Hide editor' to convert the content in the WYSIWYG to plain text before clicking 'Insert Widget', the widget is then inserted correctly.

However, if you have multiple WYSIWYGs within a form (e.g. in my current project, category pages have 3 WYSIWYGs added as EAV attributes which all accept widgets), even after hiding the editor in the widget form, the widget content is always inserted into the first WYSIWYG on the page, regardless of which one you selected to insert the content into. You then need to copy and paste the new widget from the incorrect WYSIWYG, to the correct one. This is only the case for widgets containing this WYSIWYG block - other widgets insert correctly.

If you edit an existing widget, upon clicking Insert Widget the same issue occurs - the updated content is inserted into the first WYSIWYG in the DOM (as per both of the scenarios above) and the original widget remains where it was.

It also doesn't matter which of the WYSIWYGs on the page have the add_widgets option set - it is always inserted into the first one, even if add_widgets is false for that WYSIWYG.

[magento-engcom-team]

Hi @molovo. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me $VERSION instance

where $VERSION is version tags (starting from 2.2.0+) or develop branches (for example: 2.3-develop).
For more details, please, review the Magento Contributor Assistant documentation.

@molovo do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• yes
• no

[magento-engcom-team]

Hi @engcom-backlog-nazar. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).

  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• 6. Add label Issue: Confirmed once verification is complete.

• 7. Make sure that automatic system confirms that report has been added to the backlog.

[molovo]

@magento-engcom-team give me 2.2.6 instance

[magento-engcom-team]

Hi @molovo. Thank you for your request. I'm working on Magento 2.2.6 instance for you

[magento-engcom-team]

Hi @molovo, here is your Magento instance.
Admin access: https://i-19742-2-2-6.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[ghost]

Hi @molovo it looks like duplicate to -> #13409. isn't ?

[molovo]

@engcom-backlog-nazar technically yes, but that issue seems abandoned - there has been no update other than acknowledgement and nofurther information for almost a year.

[ghost]

@molovo ok we can close an older issue and leave this one open ?

[molovo]

@engcom-backlog-nazar 👍 sounds good to me

[magento-engcom-team]

@engcom-backlog-nazar Thank you for verifying the issue. Based on the provided information internal tickets MAGETWO-97136, MAGETWO-97137 were created

[EduardTd]

Problem in lib/web/mage/adminhtml/wysiwyg/widget.js lines 357, 360 and 402. Need replace tinyMCE.activeEditor to tinyMCE.get(this.widgetTargetId). Magento v2.2.5.

`

     insertWidget: function () {
        var validationResult, formElements, i, params;

        jQuery('#' + this.formEl).validate({
            ignore: '.skip-submit',
            errorClass: 'mage-error'
        });

        validationResult = jQuery('#' + this.formEl).valid();

        if (validationResult) {
            formElements = [];
            i = 0;
            Form.getElements($(this.formEl)).each(function (e) {
                if (!e.hasClassName('skip-submit')) {
                    formElements[i] = e;
                    i++;
                }
            });

            // Add as_is flag to parameters if wysiwyg editor doesn't exist
            params = Form.serializeElements(formElements);

            if (!this.wysiwygExists()) {
                params += '&as_is=1';
            }

            new Ajax.Request($(this.formEl).action, {
                parameters: params,
                onComplete: function (transport) {
                    try {
                        widgetTools.onAjaxSuccess(transport);
                        widgetTools.dialogWindow.modal('closeModal');
                        // modified: START
                        if (typeof tinyMCE != 'undefined' && tinyMCE.activeEditor) {
                            tinyMCE.get(this.widgetTargetId).focus();

                            if (this.bMark) {
                                tinyMCE.get(this.widgetTargetId).selection.moveToBookmark(this.bMark);
                            }
                        }
                        // modified: END
                        this.updateContent(transport.responseText);
                    } catch (e) {
                        alert({
                            content: e.message
                        });
                    }
                }.bind(this)
            });
        }
    },

    /**
     * @return {null|tinymce.Editor|*}
     */
    getWysiwyg: function () {
        // modified
        return tinyMCE.get(this.widgetTargetId);
    }

`

[molovo]

@EduardTd which version of Magento are you running? The example you posted doesn't match the content of lib/web/mage/adminhtml/wysiwyg/widget.js that I have in my install. In v2.3 it's using wysiwyg.activeEditor() instead of tinyMCE.activeEditor

[molovo]

I can confirm that replacing wysiwyg.activeEditor() with tinyMCE.get(this.widgetTargetId) on lines 459 and 516 (in Magento 2.3) does work though.

[EduardTd]

@EduardTd which version of Magento are you running? The example you posted doesn't match the content of lib/web/mage/adminhtml/wysiwyg/widget.js that I have in my install. In v2.3 it's using wysiwyg.activeEditor() instead of tinyMCE.activeEditor

v2.2.5

[EduardTd]

WYSIWYG not intended for use inside the WYSIWYG. Anyway it's custom solution. I don't think that it's bug. It' a feature :D

[j-robin-hunter]

I also have this problem and on version 2.3. I can confirm that the two line change above to widget.js does appear to populate the page content editor but it is with the HTML rather than a widget icon. Also, while the population of the page content sort of functions the actual widget is not saved as expected and all of the editor contents are essentially destroyed. This fix also appears to prevent the frontend from working

[molovo]

@j-robin-hunter the fix posted above was for an older version (v2.2.5) and the code in that file is very different to that in v2.3.0. I've submitted a PR containing the fixes, but to the 2.3 version of this file, which works correctly, and doesn't produce the issues you've described above.

[magento-engcom-team]

Hi @molovo. Thank you for your report.
The issue has been fixed in #20174 by @molovo in 2.3-develop branch
Related commit(s):

• 3bcf0d8cbf0330f3a65b25f74f0193961607ebe4
• d4e0c28cc3e9016d640f53e5fc27d56c6a1067ab

The fix will be available with the upcoming 2.3.2 release.