Adding double click event on drupal media in CKEditor 5

100 Views Asked by At

With drupal 9 (soon moving to 10) and CKeditor 4 I was able to catch double click event on inserted drupal media elements and to call my function like this:

(function ($, Drupal, drupalSettings, CKEDITOR) {
  'use strict';

  /**
   * CKEditor customizations.
   */
  Drupal.behaviors.editCkeditor = {
    attach: function (context, settings) {
      $('.js-text-format-wrapper textarea', context).once('my-edit').each(function () {
        const $textarea = $(this);
        // Editor instance customizations.
        CKEDITOR.once('instanceReady', function (event) {
          const editor = event.editor;
          if (editor.name === $textarea.attr('id')) {

            // Open the media library dialog on media double click.
            editor.widgets.onWidget('drupalmedia', 'doubleclick', editCkeditorMediaDoubleClick);

            ...

How to achieve the same with CKEditor 5?

I managed to get editor object by overriding set() method like this:

(function (Drupal, debounce, CKEditor5, $, once) {

  if (!CKEditor5) {
    return;
  }

  Drupal.behaviors.editCkeditor5 = {
    attach(context) {
      //textarea[data-ckeditor5-id]
      once('my-ckeditor5', '.text-full textarea', context).forEach((field) => {
        // Get the current set and delete functions from
        // Drupal.CKEditor5Instances so they can be called in their overrides.
        const oldSet = Drupal.CKEditor5Instances.set;

        // Override set() to get editor.
        Drupal.CKEditor5Instances.set = function (...args) {
          const [id, editor] = args;
          // CKEditorInspector.attach({ [id]: editor });
          console.log(id, editor)
          return oldSet.apply(Drupal.CKEditor5Instances, args);
        };

      });
    }
  };

})(Drupal, Drupal.debounce, CKEditor5, jQuery, once);

I expected that it will be possible to set event when I get editor object, but I'm not managing to do that.

Generally, is that concept correct or I have to create plugin to achieve that?

0

There are 0 best solutions below