Not compatible with Ckeditor5

Created on 27 December 2022, over 1 year ago
Updated 3 June 2024, 13 days ago

Problem/Motivation

This module does not work with Ckeditor 5. It depends on LinkIt which itself doesn't have a stable version for Ckeditor 5

Steps to reproduce

1. Install this module (should also install latest version of LinkIt)
2. Enable CKeditor 5
3. Enable LinkIt in Text Format Configuration for Ckeditor 5
4. Try creating a link via the edit page in a node

What was expected
The media library button that opens up the media library

Proposed resolution

Create branch that begins working on a solution for Ckeditor 5 using the dev version of LinkIt 6.0. Patch 113 currently supports Ckeditor 5

๐Ÿ“Œ Task
Status

Needs review

Version

1.0

Component

Code

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States bajah1701

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 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?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jvogt

    The latest patch to make Linkit compatible with CKEditor 5 is testing well: https://www.drupal.org/project/linkit/issues/3232190 ๐Ÿ“Œ CKEditor 5 readiness Fixed . 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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bloomt

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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States sclsweb
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States sclsweb
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States sclsweb

    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 โœจ Drastically improve the linking experience in CKEditor 5 Needs work .

    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.

  • Assigned to pyrello
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

    Going to take a look at this.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada dadderley Vancouver

    It would be really sweet if this worked.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

    I think this should actually be targeting the dev version.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jvogt

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

    @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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jvogt

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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

    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.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada megan_m

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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States laura.gates

    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+

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

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

  • Alan Ridgway โ†’ made their first commit to this issueโ€™s fork.

  • Issue was unassigned.
  • Status changed to Needs review 6 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jvogt

    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.
  • Status changed to Needs work 6 months ago
  • ๐Ÿ‡ช๐Ÿ‡ธSpain rodrigoaguilera Barcelona

    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 web/core/modules/ckeditor5/ckeditor5.ckeditor5.ymldrupal 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

  • Status changed to Needs review 6 months ago
  • ๐Ÿ‡ช๐Ÿ‡ธSpain rodrigoaguilera Barcelona

    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!

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States EJSeguinte

    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.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada dadderley Vancouver

    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 ๐Ÿ› Exceptions thrown when toggling Advanced section of linking form RTBC . 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 no longer work for us because our Content Security Policy disallows unsafe eval() statements. Is this intended?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pyrello

    @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!

  • Open in Jenkins โ†’ Open on Drupal.org โ†’
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 5.7
    last update 5 months ago
    2 pass
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada jmoreira

    I had to do 2 tweaks at 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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jvogt

    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 {
    
  • First commit to issue fork.
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States joewhitsitt Iowa

    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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States joewhitsitt Iowa

    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 ๐Ÿ’ฌ Links surrounding Media Library item strips data-entity-type and data-entity-uuid Active

    editor_advanced_link appears to be having the same issue: https://www.drupal.org/project/editor_advanced_link/issues/3349389 ๐Ÿ› Link attributes don't save Active

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States capysara

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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States matthodgson

    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?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States joewhitsitt Iowa

    The z-index issues might be related to https://www.drupal.org/project/drupal/issues/3328425 ๐Ÿ› CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal Needs work

  • First commit to issue fork.
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia shalini_jha

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jimmynash

    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!

  • Open in Jenkins โ†’ Open on Drupal.org โ†’
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 5.7
    last update 18 days ago
    2 pass
  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands SanderJP

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

Production build 0.69.0 2024