Problem/Motivation
When using Ckeditor5 in D9 there is a default set of markup languages provided (see screenshot below). But to fully make use of the plugin we would like to automatically change that list to match the list provided by the field_highlightjs module. That would allow all code blocks to be added easily and then highlighted accordingly. Right now many of the languages can not be enabled in Ckeditor5.
Steps to reproduce
- Enable the field_highlightjs (optional) and drupal:ckeditor5 modules
- Change text editor setting to ckeditor5 for full_html (/admin/config/content/formats/manage/full_html)
- Create a new page with the full_html filter selected for the body field (/node/add/page)
- Paste the text below into the body field while in source code mode.
- Save the page.
<pre><code class="language-xml"><!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
</code></pre>
<pre><code class="language-bash">#!/bin/bash
###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false
if [ "$UID" -ne 0 ]
then
echo "Superuser rights required"
exit 2
fi
genApacheConf(){
echo -e "# Host ${HOME_DIR}$1/$2 :"
}
echo '"quoted"' | tr -d \"> text.txt
</code></pre>
As a result of the hardcoded configuration in ckeditor5 for the codeblock plugin the bash code will receive an extra language-plaintext class before the one that we set with language-bash. This results in the markup being highlighted as plain text.
Proposed resolution
Allow for configuration of the codeblock plugin of Ckeditor5 in Drupal core. I tried the following without effect:
/**
* Modify the list of available CKEditor 5 plugins.
*
* This hook may be used to modify plugin properties after they have been
* specified by other modules.
*
* @param \Drupal\ckeditor5\Plugin\CKEditor5PluginDefinition[] $plugin_definitions
* An array of all the existing plugin definitions, passed by reference.
*
* @see \Drupal\ckeditor5\Plugin\CKEditor5PluginManager
*/
function field_highlightjs_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
assert($plugin_definitions['ckeditor5_codeBlock'] instanceof CKEditor5PluginDefinition);
$link_plugin_definition = $plugin_definitions['ckeditor5_codeBlock']->toArray();
$active_languages = array_filter(\Drupal::config('field_highlightjs.settings')->get('languages'));
$all_languages = \Drupal::service('field_highlight.helper')->getLanguages();
$languages = [];
foreach ($active_languages as $active_language) {
$languages[] = [
'language' => $active_language,
'label' => $all_languages[$active_language],
];
}
$link_plugin_definition['ckeditor5']['config']['languages'] = $languages;
$plugin_definitions['ckeditor5_codeBlock'] = new CKEditor5PluginDefinition($link_plugin_definition);
}
I think this is not possible because Drupal is only including the codeblock plugin javascript.
https://github.com/drupal/core/blob/9.4.x/assets/vendor/ckeditor5/code-b...
I do not have enough experience in Javascript to quickly find out how and if it is possible to change the configuration of this plugin before the plugin is loaded in the frontend. It would be nice if @wim-leers could have a look at this since he did a lot of work on incorporating the plugin for ckeditor5.
