Add support for the Linkit

It's about this issue in Drupal core

Default CKEditor command for double click on critical HTML Tags to edit in CKEditor

https://www.drupal.org/node/2832883

I'm not quite sure what's proper protocol in the Drupal module-issue-land in cases like this, but since the linked core issue was closed as "works as designed", claiming a fix should the onus of any contrib modules, should this issue not then be reopened?

FWIW, we noticed this issue show up when trying to see if both anchor_link and editor_advanced_link could coexist (similar issue with both dialogs popping open).

Yes i think this should be re-opened as the core issue was marked won't fix.

Max, Si, thanks for bringing this up again. you are right on the integration part.

This issue was reported on the 8.x-1.x-dev branch, but it was fixed in 8.x-2.x-dev
As in 8.x-2.x-dev you are able to get the library and then have your changes on top of it integrate with other libraries or modules.
Planed to work on a new branch 3.0.x to have more integrations.
Then the support will be dropped for the 8.x-1.x-dev branch.

Thanks, Rajab! That's good to hear. On Monday (or sometime this coming week) I'll check out the dev version (I don't remember which version I tried using in April ... likely whatever came by default with composer require drupal/anchor_link) and see how it works for us now.

Just to inform:
I will test the dev branch, but the version 8.x-2.4 still shows the problem.
Version 8.x-1.7 is working fine.

BR,
Daniel

We need help to have this support in the 3.0.x branch
To support the latest Linkit version too
The latest version of Linkit is overriding Drupal core link in the CKEditor
Anchor link may do the same .. as the command button name is the same "link"
Any help is welcome, it will be tested, committed, and released

In my opinion:

Keep Drupal core link enabled in the CKEditor text format
Linkit will use the same command button from Drupal core
CKEditor Anchor Link could have a new command button "link_to_anchor" and that will open the Anchor link dialog

https://git.drupalcode.org/project/anchor_link/-/blob/8.x-2.x/src/Plugin...

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    $libraryUrl = $this->getLibraryUrl();

    return [
      'Link' => [
        'label' => $this->t('Link'),
        'image' => $libraryUrl . '/icons/link.png',
      ],
      'Unlink' => [
        'label' => $this->t('Unlink'),
        'image' => $libraryUrl . '/icons/unlink.png',
      ],
      'Anchor' => [
        'label' => $this->t('Anchor'),
        'image' => $libraryUrl . '/icons/anchor.png',
      ],
    ];
  }

Link could be changed to Link to anchor with a small flag in the link icon.
to link to Anchor position in the page

@RajabNatshah will this change you are proposing in #8 go into the 2.x branch or 3.x branch?

I'm not sure I understand the implications of your proposal, maybe a patch + any instructions could help us evaluate it?

Is there currently a patch for what's being proposed?

Unfortunately not :-( I also have no idea where and how to implement it.

The patch here worked for me https://www.drupal.org/project/anchor_link/issues/2958532

At the moment having both Linkit and Anchor Link enabled makes the link functionality very hard to use.

Attached screenshots for reference:

1. Double popup on clicking a link in CKEditor
2. Double menu on right clicking a link in CKEditor

Any updates on this issue would be greatly appreciated.

The double linkit dailog was hitting me here too.

Fixed it with the following:

custom_module.module

function custom_module_page_attachments(array &$attachments) {
  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
    $attachments['#attached']['library'][] = 'custom_module/admin';
  }
}

custom_module.libraries.yml

admin:
  js:
      js/admin.js : {}

js/admin.js

(function ($, Drupal) {
  "use strict";
  $(document).ready(function() {
  if (window.hasOwnProperty("CKEDITOR")) {
    CKEDITOR.on('dialogDefinition', function (ev) {
      var objectName = ev.data.name;
      if (objectName === 'anchor') {
        return;
      }
      var dialog = ev.data.definition.dialog;
      dialog.on('show', function (e) {
        console.log(e);
        e.sender.hide();
      });
    });
  }
  });
})(jQuery, Drupal);

Thanks DanielVeza for the workaround.

It didn't work for me because of ckeditor ajax load (for example with ckeditor fields from paragraph type attached to another entity).
I use the same javascript approch but the file is added by altering ckeditor library.

custom_module.module

/**
 * Implements hook_library_info_alter().
 */
function custom_module_library_info_alter(&$libraries, $extension) {
  if($extension === 'ckeditor' && isset($libraries['drupal.ckeditor'])) {
    $libraries['drupal.ckeditor']['js']['/' . \Drupal::service('extension.list.module')->getPath('custom_module') . '/js/admin.js'] = [];
  }
}

js/admin.js

(function ($, CKEDITOR) {
  "use strict";
  CKEDITOR.on('dialogDefinition', function (ev) {
    var objectName = ev.data.name;
    if (objectName === 'anchor') {
      return;
    }
    var dialog = ev.data.definition.dialog;
    dialog.on('show', function (e) {
      console.log(e);
      e.sender.hide();
    });
  });
})(jQuery, CKEDITOR);

The approach in #17 and #18 breaks other dialogs.

For those who have similar setup as I did, the following might be a better solutions.

I had both LinkIt and Anchor Link installed. I needed Anchor Link solely for their anchor button, and the "enhanced" link dialog supplied with the module was not working with LinkIt. Due to both core Link plugin and Anchor Link plugin having identical icons, names etc - I could not have both sets of buttons in the toolbar, that would be confusing for content editors. And I could live without the "better link dialog", which btw should be a separate project in the first place.

So with that in mind, I had to use LinkIt for anchor links (which it perfectly suitable for). I could just hide unnecessary buttons, but the double click issue ruined everything. Below snippet gives priority to the LinkIt dialog by stopping the even propagation when there is already a dialog named 'link':

(function ($, CKEDITOR) {
  "use strict";
  var handler = function (e) {

    if ('link' === e.data.dialog) {
      e.stop();
    }
  };

  CKEDITOR.on('instanceReady', function(e) {
    e.editor.on('doubleclick', handler);
  });

})(jQuery, CKEDITOR);

The snippet above does the following:
- subscribes to 'doubleclick' event for each CKEditor instance
- checks if the dialog to be opened is the Link dialog, and stops the event if that is so

Hope this saves couple of hours for ya'll.

I found that #17 and #18 broke other dialogs too, and with #20 I am getting a console error: Uncaught ReferenceError: CKEDITOR is not defined so I'm not sure whether there is some other code required for that to work?

This seems to do the trick while preserving other dialogs.

(function ($, Drupal) {
  "use strict";
  $(document).ready(function() {
  if (window.hasOwnProperty("CKEDITOR")) {
    CKEDITOR.on('dialogDefinition', function (ev) {
      var objectName = ev.data.name;
      if (objectName === 'link') {
        var dialog = ev.data.definition.dialog;
        dialog.on('show', function (e) {
          e.sender.hide();
        });
      };
    });
  }
  });
})(jQuery, Drupal);

Just wanted to report that creating a new module(or adding to existing custom module) with #17's code snippet and then replacing the js code from #20 worked like a charm!
Thank you for sharing your solutions here.
In my case, it didn't matter if I installed Linkit or not. This Anchor plugin caused the double popup issue immediately after making the button available.