Mosaic adds type to script tag

stevepiercy · March 19, 2020, 10:53am

When I edit a page using Display > View Document, I can insert a JavaScript widget as source code and it renders just fine.

But when I edit a page using Display > Mosaic Layout, when I insert the same JavaScript widget, TinyMCE inserts type="mce-text/javascript" into the <script> tag, and the widget does not render.

Is there a way to get Mosaic's TinyMCE editor to behave like the default TinyMCE editor?

If not, is there a workaround to allow a user to embed HTML snippets that contain <script> tags verbatim using Mosaic?

espenmn · March 19, 2020, 3:11pm

Yes, add a theme fragment that loads the javascript.
NB: This is 'a hack', and NOT a secure approach.

So you need one file (place it in your themes fragments folder): customjs.xml

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
  xmlns="http://namespaces.plone.org/supermodel/schema"> 
<schema>
  <field name="myjavascript" type="zope.schema.Text">
  </field>
 </schema>
</model>

And one file: customjs.pt:

<script>
  ${view/data/myjavascipt}
</script>

You can use the same approach for CSS

stevepiercy · March 20, 2020, 3:14am

My theme is a copy of the Barceloneta theme, slightly modified TTW. It does not have a fragments folder. If I create the folder fragments at the root of the theme, and put stuff inside, should it "just work"? I think I'm missing something.

tmassman · March 20, 2020, 6:15am

You could also enable the plone.app.standardtiles.rawembed tile:

  <records prefix="plone.app.mosaic.app_tiles.plone_app_standardtiles_rawembed"
           interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">plone.app.standardtiles.rawembed</value>
    <value key="label">Raw Embed</value>
    <value key="category">media</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">20</value>
  </records>

stevepiercy · March 20, 2020, 6:58am

How would one enable it? I did not find any docs, just a brief readme.

tmassman · March 20, 2020, 7:05am

If you have an add-on/theme, add it to your registry.xml. It is also possible to add the required records TTW using the configuration registry (either manually or import an XML file).

The content of the file is this:

<?xml version="1.0"?>
<registry>
<records prefix="plone.app.mosaic.app_tiles.plone_app_standardtiles_rawembed"
           interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">plone.app.standardtiles.rawembed</value>
    <value key="label">Raw Embed</value>
    <value key="category">media</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">20</value>
  </records>
</registry>

stevepiercy · March 20, 2020, 7:15am

I saved that code snippet as plone.app.standardtiles.rawembed.xml and tried to import it via Site Setup > Configuration Registry. It seems to succeed, but it does not appear in the Records table. After creating a new record, does something else need to be done?

stevepiercy · March 20, 2020, 7:17am

Whoops, I see you just edited the snippet. Trying again.

tmassman · March 20, 2020, 7:18am

Yeah, sorry, the first code snippet was just the relevant declaration from the xml file.

stevepiercy · March 20, 2020, 7:19am

Success! Thank you for your help.

espenmn · March 20, 2020, 9:25am

stevepiercy · March 20, 2020, 10:37am

I installed collective.themefragments. I created a folder and two files in it:

`/fragments/embedded_widget.xml`

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
       xmlns="http://namespaces.plone.org/supermodel/schema"> 
  <schema>
    <field name="embedded_widget" type="zope.schema.Text">
    </field>
  </schema>
</model>

`/fragments/embedded_widget.pt`

${view/data/embedded_widget}

It shows up as a Mosaic Tile. However when I click Insert > Theme Fragment, select embedded_widget, and click Save, I get a ISE 500 with the following response:

{"error_type": "AttributeError"}

Comparing my experience to this video at 159 seconds in:

I get as far as the first form in the modal dialog, but the second form never appears.

Is there something else that I am missing?

espenmn · March 20, 2020, 11:11am

I can not remember what Mosaic does if the fragment it empty, so try:

<html>
<div>Dummy text, Just for now, have a div so the fragment is not empty</div>
${view/data/embedded_widget|None}
</html>

If that works: remove the dummy text

stevepiercy · March 20, 2020, 11:15am

Same response: {"error_type": "AttributeError"}.

When I visit the fragment directly via /Plone/@@theme-fragment/embedded_widget, I see:

Dummy text, Just for now, have a div so the fragment is not empty

Is another add-on required?

Do I need to toggle some switch off and on?

espenmn · March 20, 2020, 12:07pm

Attribute error usually means it can not find 'the setting'.

Could you try the following:

Do not use the same name on the widget and the field

field name="embedded_stuff"

${view/data/embedded_stuff|None}
Stop and start Plone
Turn the theme off and on again

stevepiercy · March 20, 2020, 12:29pm

Rename of field to embeddedwidget, leaving widget as embedded_widget had no affect.
Restart had no affect.
Flipping the theme off and on had no affect.

Sanity check:

`/fragments/embedded_widget.xml`

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
       xmlns="http://namespaces.plone.org/supermodel/schema"> 
  <schema>
    <field name="embeddedwidget" type="zope.schema.Text">
    </field>
  </schema>
</model>

`/fragments/embedded_widget.pt`

<html>
<div>Dummy text, Just for now, have a div so the fragment is not empty</div>
${view/data/embeddedwidget|None}
</html>

I don't see any typos.

Here's the full source of the widget when it gets rendered:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body><div>Dummy text, Just for now, have a div so the fragment is not empty</div>

<script src="https://example.com/++resource++protect.js" type="application/javascript" id="protect-script" data-token="27204664035a7ea5f2d380fc235f8f38f9aa29eb" data-site-url="https://example.com"></script></body></html>

tmassman · March 20, 2020, 12:57pm

Please not that according to GitHub - plone/plone.tiles: implements low-level, non-Plone/Zope2-specific support for creating "tiles" in the Mosaic layout system. tiles need to have an html tag and a body tag.

The contents of the tile's <body /> section will replace the tile placeholder as indicated by the tile link.

tmassman · March 20, 2020, 1:09pm

@stevepiercy, your code runs fine on a test theme I have locally available.

I have it running on Plone 5.2.1 with Python 3, using the following mosaic related packages:

plone.app.blocks = 4.3.2
plone.app.contenttypes = >=2.0.1
plone.app.drafts = >=1.1.3
plone.app.layout = >=3.4.0
plone.app.mosaic = >=2.2.1
plone.app.standardtiles = 2.3.2
plone.app.tiles = >=3.1.2
plone.behavior = >=1.3.0
plone.jsonserializer = >=0.9.8
plone.subrequest = >=1.9.1
plone.tiles = >=2.2.1
collective.themefragments = 2.12

stevepiercy · March 20, 2020, 1:19pm

Version Overview

Plone 5.2.1 (5208)
CMF 2.4.2
Zope 4.1.3
Python 2.7.15+ (default, Oct 7 2019, 17:39:04) [GCC 7.4.0] # Could this be a Unicode issue?
PIL 6.2.1 (Pillow)
WSGI: On
Server: waitress 1.4.2

plone.app.blocks-4.3.2
plone.app.contenttypes-2.1.5
plone.app.drafts-1.1.3
plone.app.layout-3.4.0
plone.app.mosaic-2.2.1
plone.app.standardtiles-2.3.2
plone.app.tiles-3.1.2
plone.behavior-1.3.0
plone.jsonserializer-0.9.7  # is this not sufficient?
plone.subrequest-1.9.1
plone.tiles-2.2.1
collective.themefragments-2.12

I've been meaning to migrate this system to Python 3, now that the Ansible playbook for Plone supports it. That's the only thing I think that could affect this. Thanks for checking on your system.

espenmn · March 20, 2020, 2:38pm

stevepiercy:

Here's the full source of the widget when it gets rendered:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body><div>Dummy text, Just for now, have a div so the fragment is not empty</div>

<script src="https://example.com/++resource++protect.js" type="application/javascript" id="protect-script" data-token="27204664035a7ea5f2d380fc235f8f38f9aa29eb" data-site-url="https://example.com"></script></body></html>

That looks correct to me.
What is wrong with this?

By the way: do you want to add an url for a script or do you want to add the javascript ?

If you just want to add the url I would do something like

Change the field to URI

Change the template to

 <script src="${name_of_url_field}"></script>

PS: You might want to add some dummy text that you hide with CSS when not in Mosaic editor.. That would make it easier to 'see in mosaic'.