Add additional syntax highlighter plugin to PrismJS in HCL Connections 6.5 CR1 TinyMCE

Question

I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.

externalPlugins: [{
      name: "codesample",
      url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
      settings: {
        codesample_global_prismjs: true,
        codesample_languages: [
          { text: 'ASP.NET (Core)', value: 'aspnet' },
          { text: 'Apache', value: 'apacheconf' },
          { text: 'Bash', value: 'bash' },
          { text: 'C#', value: 'csharp' },
          { text: 'C++', value: 'cpp' },
          { text: 'CSS', value: 'css' }
        ]
      }
    }
]

Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.

So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.

Customizing the webresource archive

PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:

[centos@cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/

After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append

console.log(Object.keys(Prism.languages))

at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?

Answer 1

PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.

As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:

Highlight in the editor, too

I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view

To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive

[centos@cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js

and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor: