CKEditor mentions compatible with CKEditor 5

Hi all, moved the work done by @webflo to an issue fork:
https://git.drupalcode.org/project/ckeditor_mentions/-/merge_requests/11...

I added the javascript from tarball to the fork (and changed the library path):

npm view @ckeditor/ckeditor5-mention
=> unpack dist.tarball url

Added it in js/ckeditor5_plugins/mention.js

However the mention.js gave an error on line 254:
if (!n.canEditAt(a)) return;
So commented that out for now (which does not seem to break anything).

We also had errors with deprecated EventDispatcher, therefor we changed:
use Symfony\Component\EventDispatcher\Event;
to
use Drupal\Component\EventDispatcher\Event;

After these minor tweaks we managed to get this working locally:

We used to have avatars in the mentions, but that stopped working unfortunatly, not sure why yet.

Drupal core version used: 10.0.9

This might also be the right time to bump this work to a major 3.x version and clean up:

• src/CKEditorMentionEvent.php
• src/CKEditorMentionSuggestionEvent.php

To use this issue fork in your project, add this to your composer repositories:

        {
            "type": "git",
            "url": "https://git.drupalcode.org/issue/ckeditor_mentions-3309677.git"
        },

And run the following command:

composer require drupal/ckeditor_mentions:dev-3309677-ckeditor-mentions-compatible

A bit messy here. Webflo still commits in his fork on GitHub ignoring MR here. Nice :)

@dinazaur Hi, I am a new maintainer since a few days. I will push my code from Github and then view and merge the other changes. Please be patient. Thanks!

I hope by merging you mean assigning a ticket for someone to review. We need to separate Mention entities and ckeditor5 into two separate tickets. For entity creation, we could make integration with mentions module if we want to because the module already provides entities, and I don't see any reason to make entities here and to complicate this module.

Sure, lets work on it together. Mentions module can only track references to user entities, but ckeditor_mentions can reference other entities. ckeditor_mentions_entity uses dynamic_entity_reference for this use-case. Of course it possible to remove the submodule. I will maintain in a other repo.

I just looked at a few ckeditor modules in order to find out what is the best solution for adding the @ckeditor/ckeditor5-mention plugin into the module. Since all CKeditor5 plugins are easily installable via composer (https://asset-packagist.org/package/npm-asset/ckeditor--ckeditor5-mention) we could add instructions on how to install it from composer. But maybe it would be better to install a specific version using npm and import it into the final plugin build since we are using Webpack already. In that way, we will ensure that it will for sure work because the user can install a newer version with some breaking changes.

The latest code is in https://git.drupalcode.org/issue/ckeditor_mentions-3309677/-/tree/330967...

I refactored the JS Plugin names a little bit. It includes ckeditor_mentions_entity and the the changes from @Falco010. I made the number of items in the autocomplete configurable.

@dinazaur Please review the code. Maybe everything except ckeditor_mentions_entity. Thanks!

Hi, I will have a look at this MR over the weekend.

Okay, I just made a few changes. What's left to do is to implement an upgrade path, and remove unneeded properties from configuration. Apart from that it's ready for review.

Check on ckeditor5, it work great
Can you support some module notification please

https://www.drupal.org/project/notify_widget →
https://www.drupal.org/project/notificationswidget →
https://www.drupal.org/project/notification_system →
https://www.drupal.org/project/message_notify →

If you need some help please tell me.

Hello there. It was a long way. Let's merge it into 3.x branch and create a beta release. I'll create a follow-up ticket for tests adjustment.

@lazzyvn

Check on ckeditor5, it work great
Can you support some module notification please

This is a straightforward implementation in custom code. You just need to react to the Mentions event. I don't see any reason why we need to implement such thing in this module.

Can you write down exemple for custom module please.

<?php

namespace Drupal\example\EventSubscriber;

use Drupal\ckeditor_mentions\Events\CKEditorEvents;
use Drupal\ckeditor_mentions\Events\CKEditorMentionsEvent;
use Drupal\message\Entity\Message;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class Example implements EventSubscriberInterface {

  public static function getSubscribedEvents() {
    return [CKEditorEvents::MENTION_FIRST => ['onMention']];
  }

  public function onMention(CKEditorMentionsEvent $event) {
    if ($event->getPlugin()->getPluginId() !== 'user') {
      return;
    }

    $notification = Message::create([
      'template' => 'some_template_id',
      'uid' => $event->getMentionedEntity()->id(),
    ]);
    $notification->save();

    \Drupal::service('message_notify.sender')->send($notification);
  }

}

Automatically closed - issue fixed for 2 weeks with no activity.