[Resolved] Wrong escaping of JavaScript from Shortcode in view

[Author]

Posts

[adrianM-6]

I am trying to:

Generate a leaflet map within a view.

Link to a page where the issue can be seen:

hidden link

I expected to see:

Markers of my map entries.

Instead, I got:

Nothing and JavaScript entries.

The problem is, that the generated Javascript is partially escaped (i.e. the brackets in arrays [ and ] )

This is the Leaflet plugin used: hidden link

[Beda]

Leaflet is not supported in Toolset Maps or Views. Only Google and Azure Maps are supported.

It has been requested in past to add support for this, however, you would have to add your voice to it by suggesting the feature over this form: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[adrianM-6]

Hello Beda,

Thank you for your reply.

The issue is not because of Leaflet itself, but the Javascript the Leaflet shortcodes renders.

The problem will propably exist with other shortcodes as well.

[Beda]

I see that Leaflet ShortCode itself is outside the layout part of the View's Loop, it might be it is not even shown on the front end? Does it help if you put the Maps shortcode in the right place within the layout of the view?

The crucial question here is if you insert the ShortCode (of the leaflet) in a WordPress page without any Toolset used, but a manual address passed, does it work?
If so, does it break as soon you insert a Types ShortCode as populating address, or only when you use this in the View's Loop?

This will tell us whether or not this is a Toolset issue.

Note, I tried locally the leaflet map, and it works just fine, there are no JS errors or issues, even if I use it in a View or Content Template.
I eventually miss something, if the above steps do not help to resolve the issue, I will need precise steps as of how to replicate the problematic.

[adrianM-6]

Hi Beda,

I've create a test site for you (basic WordPress, with Types, Views and Leaflet), which demonstrates the issue:

Page 1: Leaflet Shortcodes (no views)

* hidden link
* Uses the shortcodes, which are generated through views

Page 2: Using Views to generate and render the shortcodes

* hidden link
* Just have a look with developer tools and you see that the Javascript is escaped.

(I wanted to add credentials, but don't know how)

(I also would love to use Toolset Maps directly, but unfortunately we need to use OpenStreetMap with a custom tiles server)

[Beda]

This looks like you are trying to populate JS with a ShortCode, something not supported in WordPress itself.

I probably am wrong, though, as Leaflet Maps plugin is widely used.

Let me have a look at this in the backend, as I still cannot figure out how to replicate this, I tried locally several times.

I added a private reply, and would like to ask if I later can take a copy if needed, to deploy locally?
(Of the testing site, logically).

[Beda]

I find that this is the Leaflet Plugin "doing it wrong", at least, I can confirm it is not due to the Types Plugin (or it's shortcodes within the Leaflet Shortcodes)
I edited the View a little to show that.

I also see that the Leaflet produces a Map shortcode without attribute closing properly:
[leaflet-map height="600" fitbounds]
Fitbounds here should be populated with something.
I fixed that by adding empty values, but I am not sure that is OK with Leaflet, because doing so throws even more errors.
Removing the Fitbounds attribute helped more, but did not solve the core issue you reported.

I also confirmed that no View is required to see the error, it can also be produced on a Hardcoded Content Template.
Just, there is no JS error on a CT, only the Map will not show the marker at all.
It also will not show any Marker on the map if using WordPress core Gutenberg "ShortCode" block, as seen here:
hidden link

It ONLY works if I add the "fitbounds", but that has no attribute at all.

This means the Leaflet Plugin will fail even without Toolset if you insert the ShortCodes in the Gutenberg Shortcodes modules which is generally what should be done with ShortCodes.

It will only work properly if you use the classic module or p module as you did here:
hidden link

I confirm this here
hidden link

So we can Summarize:
- Leaflet Map won't work on native WordPress Gutenberg Editor unless used in Classic mode
- Leaflet Map uses a ShortCode attribute (flag) without value, of its purpose I am not sure.
- In a View Loop, this also terminates in an escaping of the JS generated by the ShortCode
- In a Content Template, this throws no JS error but still, the map does not work.

I have now replicated this locally and will see if this is something to fix in the Views plugin or within Leaflet.
Then we will feedback here about the findings and planned solutions.

Thank you for your patience meanwhile.

[adrianM-6]

Hello Beda,

Thank you for your continous support. This is really great.

Regarding the Gutenberg "shortcode".
It is working, but there may not be any marker shortcode before the map shortcode -> the map shortcode has to be the first.

But I agree, the plugin is not doing it great:

* Generating (so much) JavaScript into the content is not optimal...
* Shortcodes depending on other shortcodes...

Btw. another (better) solution for me would be: OSM support in Toolset Maps 😉

[Beda]

You can request this here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
Then Product Management will receive the idea/suggestion and will be able to make plans accordingly

I will feedback here as soon as I have news.

[Beda]

We now have an erratum here for this issue which you can follow:
https://toolset.com/errata/views-cannot-parse-third-party-shortcodes-that-contain-javascript-and-a-js-error-is-being-triggered/

There is no imminent fix planned.

[adrianM-6]

Thank you, will track the erratum.

[Beda]

The erratum was put on "wont' fix" because for Toolset there is not much we can fix.

The leaflet plugin should nott load entire JS scripts in a ShortCode. That is the core issue, which happens to manifest in a View loop because it has a special way of rendering a shortcode (several times).
But, the core issue is within the leaflet plugin rendering JS scripts in the ShortCode which is disrecommended.

I suggest handling this with the plugin developer.