Percent Character In Content Triggers riddle.tinymce.js Errors

Hi Richard,
thank you for reporting this bug you are seeing. I have tried and failed to replicate this bug on my test install. Would you be able to share a URL with me, where I can see this bug in action so that our developers can take a shot at fixing this for the next release?

If you would rather not post the URL here, you can email us at [email protected] and just reference this forum.

Very sorry for this bug and the trouble it causes and thank you for taking the time to let us know about it.
Cheers
Boris

This is not visible from the front end of the site, this only affects the admin side of the site when creating or editing a post.

We have ruled out any possible conflict with other plugins, by disabling all other plugins.

We have ruled out any possible conflict with theme code, by using the default TwentySeventeen theme.

We have spun up a new installation, with only WordPress version 4.8.1, TwentySeventeen theme version 1.3, and Riddle plugin version 3.1 active, and the issue still presents itself.

It would appear that something in the Riddle plugin’s JavaScript is parsing the contents of the visual editor, and choking when it encounters a percent character.

The issue also appears to affect the ability to save a draft or update the contents of the visual editor, as other/additional content changes are not always saved once the JS errors have been triggered.

Deleting the percent character appears to resolve the issue, however, this is not optimal, as some content literally requires a % character.

I can email your team, however, any public facing URL I would provide would not “show” the issue since it affects the post edit screen, not the publicly viewable front end of the site.

Specifically, the JS error is being thrown by decodeURIComponent(), on line 37, of riddle.tinymce.js, within the replaceEmbeddedToShortCode JS function.

The replaceEmbeddedToShortCode function doesn’t appear to be operating specifically on URI strings that were found/extracted within the content, but on the entire content of the visual editor. I can see this by pausing execution of the function in Chrome’s inspector, and see that the local scope of content being operated on is (for this example):
“<p>Test riddle.tinymce.js handling of % characters</p>”

My assumption, based on my reading of the JS docs for decodeURIComponent, is that when decodeURIComponent encounters a % character, it assumes the % character is the start of a an encoded URI component. However, a standalone % character in the contents of the visual editor should not be interpreted this way.

I can trigger this same error within any JS test console by simply executing :
decodeURIComponent( “<p>Test riddle.tinymce.js handling of % characters</p>” );
returns “Uncaught URIError: URI malformed”

Whereas, executing decodeURIComponent on a specific URI does not throw the error :
decodeURIComponent( “https://example.com/?s=this%20is%20encoded&#8221; );
returns “https://example.com/?s=this is encoded”

It would appear that the replaceEmbeddedToShortCode JS function needs to extract URIs from the content, and pass those specific URI strings to decodeURIComponent, not the entire contents of the visual editor, to avoid triggering a URIError when a standalone % character is present in the content.

Hey @richaber,
thanks for the additional info.

We just pushed a new version of our plugin (version 3.11) and I was able to add the % character to my posts without any console errors now ??

Would be great if you could update the Riddle quiz maker plugin on your site and ping us if the error persists.
Cheers
Boris

PS: I gave you a HT in the changelog for the new version. If you would rather not have your name in there lmk and I will take it out. I really appreciate the time and effort you put into letting us know about this bug and also thank you for your patience while we worked on a new version of the plugin.