Not compatible with Ckeditor5

Created on 27 December 2022, about 1 year ago
Updated 12 February 2024, 12 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 : 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 Drupal's default linking experience in text fields 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 3 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 2 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 2 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 about 1 month 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 on an image Active

  • πŸ‡ΊπŸ‡ΈUnited States capysara

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

Production build https://api.contrib.social 0.61.6-2-g546bc20