Widget not inserting or saving when the word 'type' is used anywhere in the text after a quotation mark

[matthewjdewhurst-fw]

Summary

Hi. For a little context, we have recently made the decision to disable page builder and move towards a component-driven content entry approach utilising widgets. We have a "Generic Text" widget, which consists of a custom WYSIWYG parameter.

Whilst testing this widget, we came across a rather odd (and probably quite specific) problem, which is that if a quotation mark is present in the text, and then the word type is present anywhere in the text following it, the widget fails to insert or save and completely disappears from the editor.

Obviously we have some custom functionality going on here, but what I have observed is that this is also an issue with the standard Magento widgets where a text field is present. e.g. CMS Page Link, Catalog Product Link. Which leads me to believe this might not be related or our setup alone.

Environment

• Magento version: 2.4.6-p5
• Theme: Custom theme as a child of Hyva Default

Errors

• No errors available in any of the standard logs.
• No console errors available.

Examples

Steps to reproduce

Ensure Page Builder is disabled, and you're using the standard TinyMCE editor.

1. Create, or edit an existing, page
2. Click insert widget button/icon
3. Choose CMS Page Link
4. Enter " type into 'Anchor Custom Text'
5. Insert the widget

You should find that the widget modal retracts, and you're left with:

• If you created a new page, a blank editor
• If you edited a page, the inserted widget won't be present

The same happens when trying to save a widget which existing content:

1. Insert a new widget (without " type and save it), or edit an existing widget
2. Edit the content of a text field so that " type is now included
3. Save the widget

Proposed solution

The widget should insert/save as normal.

Release note

No response

Triage and priority

• [ ] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• [ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• [X] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• [ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• [ ] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant[bot]]

Hi @matthewjdewhurst-fw. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this

• To learn more about issue processing workflow, refer to the Code Contributions.

  Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[matthewjdewhurst-fw]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @matthewjdewhurst-fw. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @matthewjdewhurst-fw, here is your Magento Instance: https://b9810516d0531629e4febc1d68d7fbe8.instances-prod.magento-community.engineering Admin access: https://b9810516d0531629e4febc1d68d7fbe8.instances-prod.magento-community.engineering/admin_40b9 Login: d7febc3a Password: c94de2ef9cc5

[matthewjdewhurst-fw]

I've just tested on the Magento instance provided and can confirm that it's still happening.

[m2-assistant[bot]]

Hi @engcom-November. 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: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• [ ] 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• [ ] 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.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. Add label Issue: Confirmed once verification is complete.
• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-November]

Hello @matthewjdewhurst-fw,

Thank you for the report and collaboration!

Verified this on 2.4-develop instance with default luma theme. Steps to reproduce followed are:

• Ensure Page Builder is disabled, and you're using the standard TinyMCE editor.
• Create, or edit an existing, page
• Click insert widget button/icon
• Choose CMS Page Link
• Enter " type into 'Anchor Custom Text'
• Insert the widget

The widget is not being saved. Hence confirming the issue.

Thank you.

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-11939 is successfully created for this GitHub issue.

[m2-assistant[bot]]

:white_check_mark: Confirmed by @engcom-November. Thank you for verifying the issue.
Issue Available: @engcom-November, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

[medmek]

I reproduced on a Magento CE 2.4.7 (if it helps)

[matthewjdewhurst-fw]

I reproduced on a Magento CE 2.4.7 (if it helps)

Hi Medmek,

Thanks for confirming. I've spotted your answer on the Magento Stack Exchange. The file and line you have referred to is definitely a step in the right direction, and I think we have a partial fix here.

I've left a few comments on your answer, but I'll summarise here:

Line 715 in lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce5Adapter.js:

attributes = attributes.replace(/"/g, '"');

• Commenting out this line fixes the issue when saving the widget where " type is present.
• Unfortunately, this isn't a comprehensive fix as if you click the "Show / Hide Editor" button, the quotation marks are not encoded. Therefore when clicking the "Show / Hide Editor" button for a second time, the widget is removed due to the same issue.
• Commenting out this line also fixes the saving issue for plain text fields within core Magento widgets (e.g. CMS Page Link). I'm not sure why the tinymce5Adapter.js would also be involved with saving a plain text field, but it seems it is.
• Whilst this fixes the issue of saving a widget where " type is present, I'm not aware of the adverse effects undoing the encoding on the quotation mark might have on line 717: attributes.gsub( immediately after.

[medmek]

I reproduced on a Magento CE 2.4.7 (if it helps)

Hi Medmek,

Thanks for confirming. I've spotted your answer on the Magento Stack Exchange.

Thanks for the exchange, and your comments where a huge help, I hope the EDIT works for you. For now, it doesn't feel elegant... do you think it's worth proposing as PR ?

[matthewjdewhurst-fw]

I reproduced on a Magento CE 2.4.7 (if it helps)

Hi Medmek, Thanks for confirming. I've spotted your answer on the Magento Stack Exchange.

Thanks for the exchange, and your comments where a huge help, I hope the EDIT works for you. For now, it doesn't feel elegant... do you think it's worth proposing as PR ?

Potentially. I haven't had chance to do any comprehensive testing yet. But from simply commenting that one line out, the widget appeared to be saving and loading absolutely fine as long as you didn't press the "Show/Hide Editor" button.

In our use case, we're going to be hiding the "Show/Hide Editor" button before the site goes to production. So this could be a solution for us, but not a solution to the problem at large.

As soon as I get the chance, I'll do some more testing and get back to this thread.

[matthewjdewhurst-fw]

Line 715 in lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce5Adapter.js:

attributes = attributes.replace(/"/g, '"');

• Commenting out this line fixes the issue when saving the widget where " type is present.
• Unfortunately, this isn't a comprehensive fix as if you click the "Show / Hide Editor" button, the quotation marks are not encoded. Therefore when clicking the "Show / Hide Editor" button for a second time, the widget is removed due to the same issue.
• Commenting out this line also fixes the saving issue for plain text fields within core Magento widgets (e.g. CMS Page Link). I'm not sure why the tinymce5Adapter.js would also be involved with saving a plain text field, but it seems it is.
• Whilst this fixes the issue of saving a widget where " type is present, I'm not aware of the adverse effects undoing the encoding on the quotation mark might have on line 717: attributes.gsub( immediately after.

For some reason I'm now unable to reproduce this behaviour by commenting out that same line.

In addition, we've recently also discovered that the same seems to happen when using the Magento Variables plugin on a TinyMCE editor inside a widget. For example, when using a store variable (in this case name), the following is displayed on the "Show / Hide Editor" textbox:

<p>Welcome to {{config path="general/store_information/name"}}!</p>

However, when you save and look at the page, you see: Welcome to {{config path=

When returning to the editor, this is what is visible in the TinyMCE editor: %3Cp%3EWelcome%20to%20%7B%7Bconfig%20path%3D%22general%2Fstore_information%2Fname%22%7D%7D%21%3C%2Fp%3E

It falls over at the first " mark.