Not compatible with Ckeditor5

Is there any movement on this? This seems like a critical change. I see that there is a drupal 10 version. is that compatible with ckeditor 5?

The latest patch to make Linkit compatible with CKEditor 5 is testing well: https://www.drupal.org/project/linkit/issues/3232190. Can work on this issue be started against that patch?

My experience building CKEditor 5 modules is limited (assuming that's needed for this fix), but I'm happy to help collaborate and test. This functionality is critical to my sites as well.

I have installed the newest version of Linkit 6.0.0-beta4 released 5 March 2023.
It seems to work well with CKEditor 5.

Unfortunately, Linkit Media Library does not work as yet.

Any news? Would love to be able to use with ckeditor 5.

Linkit now has stable 6.0 and 6.1 releases supporting CKEditor 5, and there is a plan to bring some Linkit functionality to Drupal core.

I would love to see this module continue to work with Linkit and CKEditor 5. If someone can write the patch, I'll help test.

The ideal would be to switch to just core linking functionality (one day, when it becomes available) and stop using Linkit, but still be able to use this module. The sites I support don't typically use the full range of Linkit features, so it's likely that core will cover it -- the missing feature will be the Media Library button to allow uploads.

Going to take a look at this.

It would be really sweet if this worked.

I think this should actually be targeting the dev version.

The patch in #12 applies to 1.0.3 but isn't working in Drupal 10.1.6 (php 8.2). It also appears to conflict with editor_advanced_link.

Scenario A: without editor_advanced_link installed:

The Media library button shows up, but clicking it does nothing. No javascript errors are thrown. FWIW, the console does log "_addMediaLibraryButton()" from line 28 of index.js.
The linkit matcher becomes non-functional. All of the javascript events are removed except blur, change, focus and input from ckeditor5-dll.js.

The rest are various additional issues when editor_advanced_link is installed and configured (no change if just installed and not configured).

Scenario B: only one advanced link attribute enabled (and it's not the Open in new window attribute): the same issues as Scenario A except this js error is thrown when clicking the Link button to bring up the link dialog: "Uncaught CKEditorError: collection-add-item-invalid-index" in ckeditor5-dll.js.

Scenario C: only the Open in new window attribute enabled: same issues as Scenario A except the Media library button does not show up.

Scenario D: multiple advanced attributes enabled, including Open in new window: Media library button doesn't show up. Matcher is non-functional like Scenario A. JS error thrown when expanding the "Advanced" accordion: "Uncaught CKEditorError: collection-add-item-already-exists" in ckeditor5-dll.js.

Scenario E: multiple advanced attributes enable, but not Open in new window: same as Scenario A except with a JS error thrown when expanding the "Advanced" accordion: "Uncaught CKEditorError: collection-add-item-invalid-index" in ckeditor5-dll.js.

@jvogt The MR is still in progress and not functional yet. It's my first CKEditor 5 plugin so I'm figuring it out as I go.

The errors you reported may be helpful later! Thanks.

Oh, that makes sense! Thanks for all your work on this!

@pyrello Thanks for looking into this. Happy to do some testing as needed

After a few days of having no idea what I was doing, it started to make sense to me today. Still hoping some CKEditor 5 expert will swoop in and finish it for me ;)

The main things that are left:
- Figure out how to put the button in the correct place.
- Figure out how to take the data from the dialog and insert it into the link field.

Thank you for working on this pyrello! My client is waiting for this. Unfortunately I don't know anything about writing ckeditor plugins either :)

I'm not sure if this needs to be it's own issue or not, but even with CKeditor 4, this module does not work with linkit 6.1.x. Linkit 6.1.x is what's needed for using Drupal Core 10.1.x+

@laura.gates, I think that should be its own bug report issue.

I suspect that this still needs work. There are some issues where we worked around how Editor Advanced Link works that would be nice to find a better way to resolve in both modules. However, I think this is ready for some testing from anyone who is able to do so.

Looking good! I'm seriously so excited to see this moving along.

First take: it works! Linking text to newly uploaded or existing media is now a reality. Woohoo!

Good stuff:

• So far, it looks compatible with the Gin admin theme and with Paragraphs.
• The button only shows up if the selected Linkit profile has a Media matcher.

Notes:

• I think it needs to "look" like a button (in Claro/Gin themes specifically). Understandably not the first priority, but maybe an opportunity for people to contribute who aren't CKeditor5 plugin builders.
• The Media Library button doesn't appear if the "Linkit URL converter" filter is disabled. I don't know if that's intentional.
• The URL isn't converted when linking embedded media (e.g. an image) to another media entity. This looks like it's actually a Linkit-level issue though. Same problem when linking embedded media to nodes.
• I haven't tested extensively with Advanced link editor, so I'll get back to you on that.

I tested this MR without having previous experience with the module.

The first thing I noticed is that it throws a js error on the console on any ckeditor5 textarea previous to configuring linkit for any text format:

CKEditorError: plugincollection-plugin-not-loaded {"plugin":"Linkit"}

Seems like it is always loaded when the link plugin of ckeaditor5 from the drupal core module is loaded.

The popup for the media library opens fine but when I click "insert selected" after selecting one existing media item the link is not updated.

Attached there is a screenshot of how the accept and cancel buttons are displaced by the media library button.

Drupal 10.1.7.
Linkit 6.1.2 and the latest version of the MR5 applied as a patch

I just uploaded a little commit that fixes the first case by only loading the new plugin when the "linkit_extension" is loaded.

Using MR from #21, this solved the problem for us.

Just given the MR a try on our site and the editors are happy with the functionality. I did have to do a small amount of styling as the tick and cross button were escaping the container, could be specific to our site though. Shoutout to @pyrello for his work, much appreciated!

Thank you for all the work on getting this updated.

I had the same issue with the tick and cross not staying in the container. I found if you added the Editor Advance Link module that would move back into the container. I'm currently having an issue that when selecting the media item from the library nothing is getting linked.

Is there a dev release of this module available?

This most recent update I have pushed removes the code that was fighting back against how editor advanced link was arranging buttons, as they seem to be fixing that with this patch here. I recommend using that patch for now while we wait for everything to get ironed out

My team has been watching MR!5 and testing it as a patch. The changes made this morning in 6496453 no longer work for us because our Content Security Policy disallows unsafe eval() statements. Is this intended?

@nicross-com Looks like the build step was omitted so the plugin got built in non-production mode.

Thanks for the swift fix! It's working great for us now. Cheers!

I had to do 2 tweaks to the current MR:

1. Add display: block; to the Media Library button class.
2. Add editor/drupal.editor.dialog as a dependency to the module's library or else the link to the media entity wasn't being inserted.

@jmoreira could you either add that to the MR or provide a diff for the changes? I'm sure it's small, but it's hard to see what changed.

The latest is working great for us! Thank you all for your hard work!

I still think the button styling could use some work to look like a button. I wrote this patch, but it depends on the Gin theme css variables so I don't know if it's appropriate to commit it to this project.

diff --git a/css/linkit-media-library.css b/css/linkit-media-library.css
index dbeb22b9e..678dd3cdf 100644
--- a/css/linkit-media-library.css
+++ b/css/linkit-media-library.css
@@ -1,8 +1,17 @@
 .ck.ck-link-form.ck-link-form_layout-vertical button.ck-media-library {
-  width: 100%;
-  border-top: unset;
+  border: 2px solid var(--gin-color-primary);
+  border-radius: var(--ck-border-radius);
+  margin: auto;
   padding: var(--ck-spacing-small) var(--ck-spacing-large);
   display: block;
+  cursor: pointer;
+}
+
+.ck.ck-link-form.ck-link-form_layout-vertical button.ck-media-library .ck-button__label {
+  font-size: var(--gin-font-size-s);
+  font-weight: var(--gin-font-weight-semibold);
+  color: var(--gin-color-primary);
+  cursor: inherit;
 }
 
 .ui-dialog.ui-dialog-off-canvas ~ .ck-body-wrapper .ck-balloon-panel {

We haven't had a chance to look into this yet, but we noticed when placing a link around a media item using the new media balloon toolbar, that it doesn't insert the media entity link properly with all of the necessary attributes.

data-entity-type, data-entity-uuid, data-entity-substitution

I found that this is not necessarily an issue with this patch for linkit_media_library, but that there is a upstream linkit issue here
https://www.drupal.org/project/linkit/issues/3396049

editor_advanced_link appears to be having the same issue: https://www.drupal.org/project/editor_advanced_link/issues/3349389

Hiding the patch file since its changes were added to the MR.

I was able to cleanly apply the patch a few weeks ago but I am now running into issues "Could not apply patch! Skipping. The error was: The process "patch '-p1' --no-backup-if-mismatch -d 'web/modules/contrib/linkit_media_library' < '/var/folders/mn/4jv39pcj68j_d1ylyt_6pst40000gp/T/65dd0a4eafae8.patch'" exceeded the timeout of 300 seconds.". Has it been committed to the dev release?

Regarding the 300 seconds issue: https://github.com/cweagans/composer-patches/issues/423#issuecomment-130...

The z-index issues might be related to https://www.drupal.org/project/drupal/issues/3328425

HI i have tested this MR 5 with drupal 9.5.11 and its working , one issues i found whenever click on media library button for link , media library dialog is not showing title of this dilog,i have fixed this issues.

Tested MR5 against Core 9.5.11 with Linkit Media Library 1.0.3

Patch applied cleanly and the resulting functionality was as desired.

The button does show up in the Linkit dialog in CKEditor5 and works to insert the media link.
Seems to play nice with editor_advanced_link module as well.

Thanks!

Looks good, seems to work for me as well.
But should we add the full yarn.lock file of nearly 3k lines?

Will this ever be released to 1.0.4 or should I use the MR? It's been 2 years since the last release.

I'm using this patch and found it stopped working for me after upgrading to 10.3 (even after using the patch from #3461637: linkit_media_library.opener.editor must be an instance of Drupal\media_library\MediaLibraryOpenerInterface). I was seeing the symptoms described in #3468979: Inserting selected isn't seen by Linkit field as not empty: after selecting an item from the library, I couldn't submit from the link modal (the button's disabled), and if I clicked on the URL in the textfield it would just use a normal link with an href of /media/xxx (and no data attributes).

It seems to be resolved by changing

linkFormView.urlInputView.fieldView.element.value = attributes['href'];

to

linkFormView.urlInputView.fieldView.set('value', attributes.href);

which matches what linkit does afaict.

It would be great to get the tests running and passing on GitLab CI...

thanks andyf! same issue here and your update worked for me.

Thanks for comment #50.
That worked for me too (as mentioned, together with patch from


linkit_media_library.opener.editor must be an instance of Drupal\media_library\MediaLibraryOpenerInterface
)

Drupal 10.3.5 ;-)

Worked for me also (same as #53)

Drupal 10.3.1
Linkit 6.1.4

The combination of patches that others have mentioned does not work for me. I'm able to open the Media Library, but the linkit modal stays open and over the media library when I do so. I can still pick a media entity and click Insert, but no link is created. At most, the link field in the modal gets populated with something like /media/123456, but clicking the green check to apply it to the text that I had previously selected instead inserts a link that looks like /media/123456 and places it at the very beginning of the WYSIWYG.

#34 patch no longer works after I've updated Linkit to 6.1.5 (from 6.1.4). I get the following error on pages with a text editor using it:

Fatal error: Declaration of Drupal\media_link_enhancements\Plugin\Linkit\Matcher\MediaLinkEnhancementsMediaEntityMatcher::buildPath(Drupal\Core\Entity\EntityInterface $entity) must be compatible with Drupal\linkit\Plugin\Linkit\Matcher\EntityMatcher::buildPath(Drupal\Core\Entity\EntityInterface $entity, array $options = []) in /var/www/html/docroot/modules/contrib/media_link_enhancements/src/Plugin/Linkit/Matcher/MediaLinkEnhancementsMediaEntityMatcher.php on line 29

I also get this error when trying to configure a linkit profile's matchers .../admin/config/content/linkit/manage/seic_linkit_profile/matchers

Does anyone know where we are on this?
I have Ckeditor5, D10.3.10, Linkit 6.1.4 (tried 7 as well) installed with the Linkit Media Library.
#50 doesn't seem to apply anymore as the line in question has been fixed in the CKEditor plugin, albeit with 'item.path' instead of 'attributes.href'.
I still see no difference when clicking the link button in CKEditor5. It's simply an autocomplete. No media library button.

Using the change in this MR and one additional patch mentioned in https://www.drupal.org/project/linkit_media_library/issues/3329877#comme... works really well for me.

Setup

Drupal 10.3.10
Linkit 6.1.6
Linkit Media 1.0.3

Patches

• Not compatible with Ckeditor5 https://www.drupal.org/project/linkit_media_library/issues/3329877: https://git.drupalcode.org/project/linkit_media_library/-/merge_requests...
• linkit_media_library.opener.editor must be an instance of MediaLibraryOpenerInterface https://www.drupal.org/project/linkit_media_library/issues/3461637: https://www.drupal.org/files/issues/2024-08-15/3461637-instance-of-media...

RTBC

This doesn't appear to be working on linkit 7.0.x

Had to tweak a few things but think this is a good spot to least do a quick deploy for D11 + ck5

Any chance we can get a stable release for this?