MNT Behat test to test special characters in shortcode

[sabina-talipova]

Parent issue

• https://github.com/silverstripe/silverstripe-framework/issues/10451

[sabina-talipova]

Require PR

[GuySartorelli]

I've rerun the behat tests but they're failing. Have confirmed that behat is running against the recent changes, so there's either something wrong with the test or the new logic.

[sabina-talipova]

Fixed

[sabina-talipova]

Follow [TinyMC documentation] (https://www.tiny.cloud/docs/tinymce/6/content-filtering/#entities) and this:

The base entities <, >, &, ', and " will always be entity encoded into their named equivalents.

So my assumption, when we just start to work on content and add new special characters TinyMC will always encoded them into their named equivalents. So this we see this here. First string that I get before "Save" (named equivalents):

document.querySelector('textarea[name="Content"]').value
'<div class="captionImage leftAlone" style="width: 444px;">[image src="http://localhost:90/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]\n<p class="caption leftAlone">Batman &amp; Robin</p>\n</div>'

Second string that I get after "Save" (entities):

document.querySelector('textarea[name="Content"]').value
'<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman & Robin"]\n<p class="caption leftAlone">Batman & Robin</p>\n</div>'

Third string that I get after I made some changes, but not "Save" yet (named equivalents):

document.querySelector('textarea[name="Content"]').value
'<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]\n<p class="caption leftAlone">Batman &amp; Robin &amp; Co</p>\n</div>'

This string we pass to the server from the client :

<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]
<p class="caption leftAlone">Batman &amp; Robin &amp; Co</p>
</div>

This string we store in DB:

<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]
<p class="caption leftAlone">Batman &amp; Robin &amp; Co</p>

It looks like TinyMC convert html entities into named equivalents in whole content every time when we edit it. When we return & as is from DB (I updated & with & in string in DB), then TinyMC shows it as is, but encode it to & as soon as we make any small changes (add 'Space').

So for behat test we should expect that after "Save" we will get My alt updated & saved instead of My alt updated & saved. I add some test to show all this explanation above.

[sabina-talipova]

Tests require this PR