Drupal 10 & CKEditor 5 Support

I will surely need to work on a D10/CKE5 port soon, so I'll try to commit amy work on a new branch as soon as possible.

Also, if the project is stale / unsupported, I can offer myself to be added as a co-maintainer.

@idiaz.roncero Great news!!

@idiaz.roncero I have added you as a maintainer for the project. I really appreciate any help you can provide.

Hello;

I've started working locally on porting this to CKE5.

My guess is that the best way to handle this is to create a new branch (3.x) that will support CKE5 and keep the 2.x branch focused on CKE4. This is: if you are on CKE5, select 3.x branch, otherwhise select 2.x..

Other options are:

- Support both versions on the same branch. I don't like this since we will need to declare a dependency on both cke5 (core) and cke4 (contrib) modules, meaning that users might need to enable CKE4 module even if they are not using it.
- Make the legacy CKE4 version an optional submodule of the new branch. This should help in case a user might need to have both CKE5 and CKE4 enabled at the same time.

The second option is interesting because my first guess (separate branches) wouldn't allow users to have both CKE versions working alongside.

What do you think?

I agree with you the first option is better, I think for now we need to create a new branch for 3.x, maybe in the future we can create a sub-module for cke4 or we will look for a workaround to have both cke versions works without adding cke4 as a dependency.

I started working on this inhouse focusing only on the necessary features but ran into a conflict with the Link Plugin taking precedence on the tag. See the issue I raised here https://www.drupal.org/project/drupal/issues/3331347, maybe my code can be used as a starting point if nothing has already been written.

Hello, sorry for the delay, I started working on this a few weeks ago.

As @bajah1701 mentioned, the main pain point here is not developing the plugin - which is fairly simple as it should just extend <a> tags to accept some additional attributes (btnSize, btnColor, etc) - but how to integrate this plugin with others, namely the core Link plugin, but also others that might exist such as Linkit or any other plugin that alters links.

I am still learning how other modules solved this, and hopefully will find the solution, learn it and explain it as soon as possible.

Thank you @idiaz.roncero, I will be looking forward to what you come up with.

Big thanks also from me to @idiaz.roncero for this great module.
Would be great to have it on D10.

A workaround is to make use of the LinkAPI. See the explanation in the link below.
https://www.drupal.org/project/drupal/issues/3331347#comment-15009425 💬 After saving a node the CKEditor model of an element changes Closed: works as designed

That's really really interesting @bajah1701, many thanks!

I had a working proof of concept but was really struggling with how to make it compatible with both the Link core plugin and other common plugins like Editor Advanced Link → or Linkit. It is a nightmare.

I think the decorators will be really handy, as we only need to add some extra values to the link.

Nevertheless, let's hope that it won't break compatibility with other modules... I will give it a try.

@idiaz.roncero I have tested it with the Linkit plugin and it works without any issues. I added 2 manual decorators, one for converting the link to a bootstrap button and another for making the button full-width.

@idiaz.roncero I understand that you can pass the values from your own button UI to the Link UI. I'm thinking that the button UI can have the fields for selecting the options and then base on what is selected the decorators that match the options are passed to the Link UI.

Do you have any example or source?

I only have found this, but here it states that:

"Each manual decorator definition contains a human-readable label displayed next to the switch button in the link editing balloon"

It gives no hint on how to take control of the switch boolean to make it more complex, or how to take control of the mapping of the values.

My understanding is based on this response https://www.drupal.org/project/drupal/issues/3331347#comment-15009425 💬 After saving a node the CKEditor model of an element changes Closed: works as designed
It's the last part of the comment. However, after trying a few things out I realized that it only works with manual decorators and these must be defined in the configuration which displays them by default in the LinkUI. The workaround was to hide it from the LinkUI using CSS but I don't know if this is the right way to go about this.

Hello;

I'm sorry to say that this is harder than I thought and right now I don't have much time in my hands. I want to continue developing this but I can't assure anybody I will be able to crack it.

In order to not stop development on this module, I've created a branch and uploaded my work. It is still a very very early stage, with a lot of missing features, but I hope the main blockers are solved by now and it might be useful in case anybody has the time to help with development.

This is clearly an unfinished solution and that's why I marked the MR as a draft.

I tried to write down a lot of comments, TODOs, links and hints in order to understand the issues i've faced.

I will also try to document here what I was trying to achieve:

Definition / Requirements

As an editor, I would want a CKE5 plugin that allows me to select a text and choose from the bootstrap button variables (color, size, type) in order to insert a linked button with the selected text as its value and a manually introduced href as the destination of the link.

Architecture

We are not supporting nor creating a new element but extending an existing one (the link, element).

That's why this CKE5 plugin should support the current, core Link plugin and extend it.

UI-wise this means that the existing link form should be extended.

This is the UI to extend:

This UI should feature an additional "style as a button" checkbox (boolean) that will enable the following dropdowns:

• - Style: normal, outline
• - Size: normal, lg, sm
• - Color: primary, secondary, light, dark

These values are taken from the Bootstrap 5 specifications.

If the user has selected to style the link as a button, the plugin should intercept the downcast conversions and the link command execution in order to alter the result of the conversion.

It should also, as well, alter the upcast conversions in order to map any incoming bootstrap classes (btn-primary, etc) and convert them to the appropriate attribute values.

Problems

• Extending plugins is not easy: we have taken great inspiration from the Editor Advanced Link → module. Intercepting another plugin behavior in order to add up your own it's not an easy task in CKE5 and involves a lot of steps.
• Support several plugins at once: Having both this plugin and Editor Advanced Link working at the same time is complex, due to the consumption API that handles upcast/downcast conversions. One of the main problems we faced was that the "class" attribute of <a> elements could only be consumed once - either by Editor Advanced Link or by our module - making them incompatible. We have achieved some compatibility by manually reverting the consumption, but this feels hacky and maybe a more advanced CKE5 developer could help us with a better solution.

@idiaz.roncero thank you for your work! It helps me to start working with the module.

So here is my first attempt to make it works with CKeditor 5

I have to say that I've changed the approach of @idiaz.roncero to make it works. But I had to skip making it work with the Advanced Link module for now. I'll plan to do it in the future.
Also, I didn't use the custom button for Toolbars. It just extends the core Link UI widget after enabling it.
The plugin is working now, but it still requires a lot of work.

What needs to-do:
- to switch text-fields to the Dropdown widgets (https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-com...)
- to change the Style field (default/outline) to the Switcher widget (https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-com...)
- to make it compatible with the Advanced Link module
https://git.drupalcode.org/project/ckeditor_bootstrap_buttons/-/merge_re...

aleevas → closed merge request !3

I am in the process of upgrading this to CKEditor5. I applied both MR !4 and MR !2 patches on my local (php8.1, drupal 9.5.7). It seems like not working for me. I couldn't see the button icon show up on the wysiwyg area on CKEditor 5. I am using Upgrade_status module. Anyone has the same issue?

One comment going back to this... I think this one assumption from @idiaz.roncero might be the source of a lot of challenge:

We are not supporting nor creating a new element but extending an existing one (the link, element).

I'm still new to CKE5 development, but are we not creating a new element (or really a new widget? that renders out to an "a" tag)?

Restating some assumptions:

- The class definitions on the Advanced link settings are guaranteed to conflict with the Button classes.
- Advanced Link settings are either equally if not more important than Button settings. At the very least we want both to be able to coexist.
- Extending plugins AND multiple plugins are both HARD PROBLEMS

In 💬 After saving a node the CKEditor model of an element changes Closed: works as designed this comment seems to imply that we still use a separate button for this functionality.

If you want to keep the separate button for your plugin, you can still take advantage of Link API, get the input from your UI and simply run the Link command and pass the decorator name as an argument

Maybe?

If anyone still interested to have the same function for CKEditor 5 / D10, I published module c5bb, where I reimplemented all functions:
https://www.drupal.org/project/c5bb →

Abyss → changed the visibility of the branch 3308035-version_for_drupal10 to hidden.

Abyss → changed the visibility of the branch 3308035-version_for_drupal10 to active.