Themeeditor: ACE plugin not loading correctly for CSS, LESS and HTML

[thet]

What I did:

In Plone 5.1 Release:

• Go to: http://localhost:8080/Plone/@@theming-controlpanel
• Copy Barceloneta Theme, name it test.
• Go to: http://localhost:8080/Plone/++theme++test/@@theming-controlpanel-mapper
• Open less/barceloneta.plone.less
• Click on "Build CSS"/"Compile"

What I expect to happen:

• A syntax-highlighted LESS file within the ACE editor
• A successful compilation of the LESS file.

What actually happened:

• No Syntax highlighting for LESS files. Probably due to missing: http://localhost:8080/Plone/++plone++static/components/ace-builds/src/ace/mode/behaviour/cstyle.js Error in JS console:

  Error: Script error for "ace/mode/behaviour/cstyle", needed by: ace/mode/behaviour/css
  http://requirejs.org/docs/errors.html#scripterror

• A successful compilation of the LESS File. Instead I get the following error in the Overlay: "Error: directive options not recognised"

What version of Plone/ Addons I am using:

• buildout.coredev 5.1, rev: 957e50bef47b5b2f20e6964417653633910c211f The problem also exists in the official Plone 5.1.0 release.

[mamoep]

I have the same issue with 5.1.0 release.

[jensens]

dup of #2319 ?

[mamoep]

Looks like a dup, yes.

[vincentfretin]

I have the same issue, I posted a workaround on #2319 if some of you are blocked by this.

[vincentfretin]

The ace error and the less build may be two different issues? I now see a LessError in the console, maybe I simply didn't pay attention before.

some syntax error around mobile variable in variables.plone.less. Do you see something to fix there or around those lines?

[vincentfretin]

Ah I didn't understand what gp54321 said https://community.plone.org/t/plone-5-1-1-soft-released/6159/8 at first, there is missing ':' separator here, and it was fixed the 23 Feb in plonetheme.barceloneta 1.8.1 (unreleased) https://github.com/plone/plonetheme.barceloneta/commit/4153e4a072f6c0480386e172236e69709d7c3815#diff-56b6091c8819a7730eb024b8caefa5f9

opening variables.plone.less and fixing those lines fixed the build issue indeed. We just need a new plonetheme.barceloneta 1.8.1 release.

For ace error, it's definitely another issue.

[thomasmassmann]

The compilation of the less files (coming from plonetheme.barceloneta) is working since plonetheme.barceloneta 1.8.1 again. The ACE editor bug (missing syntax highlighting) is a different problem and still needs to be resolved.

[jensens]

@tmassman I would either rename the title of this issue or close this issue and open a new issue.

[thomasmassmann]

Ok, so after playing around with mockup I got it working again. The problem seems to be the wrong version used for ACE. There is the src and the src-noconflict. The src-noconflict is working in buildout.cordev. But I'm not sure how to proceed in the correct way to get it into the thememapper bundle. Maybe someone with more RR experience can help here.

[thomasmassmann]

@thet can you guide me on how to best do this?

[thet]

@thomasmassmann We would need to change the requirejs entries for the ace plugin in plone.staticresources and for the sake of completeness also the config.js entry in mockup itself. Then, with a fresh plone install which includes these changes you can run ./bin/plone-compile-resources -b thememapper. the bundle would probably written to the thememapper package - you can see the location in the resource registry. upgrade steps for updating the resource registry entry and the bundle compilation time would also be necessary.

Closing this as in Plone 6 there is no thememapper anymore and ace was replaced by pat-code-editor.

@thomasmassmann if you want to get this fixed, feel free to reopen and/or contact me. plus sorry for not reacting earlier, i lost track of this issue.