Changes for Plone 5.2.1 (TinyMCE js / barceloneta - index.html)

[Gomez]

TinyMCE does not work with this template, cloud be the move to plone.staticresources, see the PLIP

On Plone 5.2.1 with Python3 the not finished collective.themesitesetup migration is blocking (is collective.themesitesetup really needed?)

[datakurre]

themesitesetup is not needed

I’ll try out 5.2.1 later today. I have not been there yet.

[datakurre]

Low risks, as all resource paths keep the same (++resource++mockup, ++resource++plone).

So this must be something else. I’ll see.

[Gomez]

I compared the config.js (Plone516 with Plone521) and there are many differences.

This one is missing on plone521:

thanks @datakurre !

[datakurre]

@Gomez Bad and good news. Bad news are that plonetheme.webpacktemplate needs changes to work out-of-the-box on Plone 5.2.1 and I don't have time to do those changes immediately, but will do eventually. Good news are that you can do those changes by yourself into your theme and the changes are probably for good in the long run – for more flexibility.

TL;DR; Into ./resources/src/themename/logged-in.js add lines

import 'plone-patterns-toolbar';
import 'plone-tinymce';

and into ./resources/src/themename/logged-in.less add lines

@import '@{plone-patterns-toolbar}';
@import '@{plone-tinymce}';

and prepare to add new lines there later when you run into missing features.

Long explanation:

Plone 5 used to have two super resources registered for loading the default configuration: plone for everyone and additional plone-logged-in for logged-in users. The latter used to include patterns for features like toolbar and TinyMCE.

In plone.staticresources those two resource files have gotten smaller and features like TinyMCE have been moved into dynamic bundle configuration (in resource registries). https://github.com/plone/plone.staticresources/tree/master/src/plone/staticresources/profiles

You could compare ./resources/.plone/++resource++plone.js and ./resources/.plone/++resource++plone-logged-in.js between Plone 5.2 and Plone 5.2.1 theme build to see what is missing. You can then add the removed patterns manually into default.js/less logged-in.js/less files in your theme.

Eventually this will bring more flexibility, because now it is possible to e.g. only load TinyMCE when TinyMCE pattern is found on the page with something like

import jQuery from 'jquery';                                                            
import registry from 'pat-registry';                                                    
                                                                                        
if (jQuery('.pat-textareamimetypeselector').length > 0) {                               
  import(/* webpackChunkName: "tinymce" */ 'plone-tinymce').then(() => {                
    jQuery(($) => setTimeout(() => { registry.scan($(".pat-textareamimetypeselector")); }, 0));
  });                                                                                   
}                                                                                       

we do things like that with some huge libraries like mathjax.

[datakurre]

I did compare logged-in-bundle before and after 5.2.1. In 5.2.1 I had to add

nto ./resources/src/themename/logged-in.js add lines

import 'mockup-patterns-textareamimetypeselector';
import 'mockup-patterns-tinymce';
import 'mockup-patterns-structure';
import 'plone-patterns-portletmanager';
import 'plone-patterns-toolbar';

(I'm not sure if import 'mockup-patterns-tinymce'; is really required on vanilla Plone. It is only required if some form uses pat-tinymce directly.)

and into ./resources/src/themename/logged-in.less add lines

@import '@{mockup-patterns-tinymce}';
@import '@{mockup-patterns-structure}';

I'll close this issue, once I have updated the template to add these automatically when version is 5.2.1 or later. (Or even 5.2.0, if this is required on that version also.)

[datakurre]

Another change I have to do. The template comes with global jQuery being optional. In reality, I have always had to make it global sooner or later. But I only not notices that JS side CSRF-patch requires window.jQuery to be available to automatically inject X-CSRF-TOKEN-header inti jQuery-based requests. Therefore I will change to expose jQuery by default.

[Gomez]

Thanks @datakurre working good so far. Just noticed this in console:

Started working on my second webpack flavored project and it looks like there is no way back :) Great job!

[datakurre]

@Gomez That sounds like moments locale. Have you set de into related list in webpack config? I’ll see later if I can reproduce. Webpack and moment locales is a bit special to avoid building extra locales.

[Gomez]

Right, got it. This could be added to the template?

Can prepare a PR next week.

[Gomez]

I noticed the index.html needs to be updated too. Replacing everything inside body with the appropriate code from vanilla plonetheme.barceloneta index.html.

[datakurre]

That sounds correct. Will keep this issue open. I recall I once tried to automatically re-use index.html from barceloneta, but there was no sane way to make it work. So, having a copy here is unfortunate inconvenience, but mandatory.

[Gomez]

Here is another important less import (./resources/src/themename/logged-in.less)

@import '@{mockup-patterns-querystring}';

Otherwise the edit view of collections dont work. Took me a while, so added here for others and future me :)

[kcleong]

I'm also trying to get this to work in 5.2.1 / 5.2.2. Currently I am testing in a vanilla webpack buildout created by mr.bob. However my goal is to update a couple of Plone 5.1 sites to 5.2 plus a python upgrade. Currently I am still on python 2.7 and using node 15.0.1, both from virtual envs.

In logged-in.js I cannot enable the patterns which are commented out below. When I enable these line I get the following error: https://gist.github.com/kcleong/eb39aa77bc77bdbcfcec2fc3691938b9

...

// import 'mockup-patterns-textareamimetypeselector';
// import 'mockup-patterns-tinymce';
import 'mockup-patterns-structure';
import 'plone-patterns-portletmanager';
import 'plone-patterns-toolbar';

In logged-in.less the lines below can be enabled without any errors:

@import '@{mockup-patterns-tinymce}';
@import '@{mockup-patterns-structure}';

[edit] With the toolbar line in logged-in.js the CMS toolbar works at it should, but currently tinymce is not rendered when editing pages.

[Gomez]

@kcleong Have you imported this: https://github.com/Gomez/minimal-webpack/blob/master/resources/src/webpacktheme/logged-in.js#L6

[kcleong]

@Gomez I managed to get it working, it seems my node environment (using node virtual env) was corrupted.