CKEditor 5 readiness

I'm have problems with paragrahs and Linkit w/ckeditor 5 and this patch. I click the link icon and "nothing happens." When i opened the console window to inspect i noticed that the popup for linkit is behind the paragraph overlay.

In case this helps, I also ran into problems with the table tooltip not showing up in paragraphs while using ckeditor5.

Found a similar problem described here: https://www.drupal.org/project/drupal/issues/3274937#comment-14824232 🐛 Get CKEditor 5 to work in (modal) dialogs Fixed . The css fix mentioned in #69 worked for me. I patched ckeditor5.dialog.fix.css and now table tooltip and linkit are working correctly.

The patch makes the linkit field work, but it fills the browser console with errors.

These errors also appears to break my paragraphs module/field, with a "This value should not be null".

Hmm.. it would appear that it's cause jquery_ui is missing.

Testing with the 10.1.x-dev branch of Drupal core with the patch from #113, I am not able to reproduce any browser console errors.

I then added the Paragraphs module (8.x-1.15) and proceeded to add a simple paragraph type with a single text-formatted field and added that to the Basic Page content type. Again, I was not able to trigger any console errors, either during the manipulation of the CKEditor interface or during render of the page.

Given all this, I think we need more specific steps to reproduce the problem.

Apologies for not clarifying. I am on 9.4.10 using layout_paragraphs 2.0.2, not paragraphs. https://www.drupal.org/project/layout_paragraphs/releases/2.0.2 →

From #125:

The list item in focus in the results list is quite hard to read due to a low color contrast with that black on blue.

This is due to a combination of factors: the blue background color is coming from Claro (and it isn't present when using other admin themes), specifically web/core/themes/claro/css/components/jquery.ui/theme.css:

.ui-autocomplete .ui-menu-item.ui-state-focus,
.autocomplete .ui-menu-item.ui-state-hover {
  margin: 0;
  background: var(--color-blue-600);
}

The text color is coming from the CKEditor reset (.ck-reset_all :not(.ck-reset_all-excluded *)

The most reliable way to fix this across any admin theme is to set a more specific background color, as done in the attached patch. Screenshot attached of the result. Color contrast between #333 and #BFBFBF is 6.87:1.

Also, FWIW, this patch which is otherwise identical to that in #113, has all tests passing locally, including the one that is failing on d.o, (LinkitDialogCKEditor5Test).

The last submitted patch, 133: 3232190-132.patch, failed testing. View results →
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

Here is a variation on the test steps intended to establish passing tests for the MVP. Instead of demonstrating that the user clicks the "No content suggestions found..." text, in this the user clicks the "Cancel" button to exit the autocomplete. As with #113, the tests pass locally for me. We'll see what happens on d.o...

I just wanted to mention here too that this module currently doesn't seem to have active maintainers 📌 Drupal 10 compatibility for 8.x-5.x branch of Linkit Needs work anymore. I see a lot of experienced devs in here and hoped that someone would step up and become maintainer → for this excellent module.

I wonder why Linkit is not part of core. It is such an essential feature for content creators.

@Nchase: see: ✨ Drastically improve the linking experience in CKEditor 5 Needs work

Yes @Nchase, I agree. Linkit should be in Drupal core, just like Admin Toolbar ( ✨ Add dropdowns to horizontal toolbar menu (as with 'admin toolbar' in contrib) Needs work ) and Drush ( ✨ Add drush/drush to Drupal Composer project templates Active ).

Like, 90% of all sites install these two projects, right off the bat.

Thanks for the link @DamienMcKenna, it's great to see that there's recent activity in that issue.

Hi, when will be published this fix in the next beta release? Thanks for your work!

Verified patch from #135 📌 CKEditor 5 readiness Fixed is working on Drupal 9.5.3 with linkit dev-6.0.x. I would also ask the same as @rafaticarte about when this can be added to the next beta release. I have upgraded all my 120+ instances to CKeditor5 already and would prefer not to use the dev version of the linkit module with a patch.

when this can be added to the next beta release

The status of a new release for LinkIt will be related to progress on #3338953: Offering to co-maintain LinkIt → .

Without a comment posted on that issue in the next 14 days, Mark will be probably made co-maintainer

Based on the fact that I've functionally tested the CKEditor 5 version of this and verified that it retains feature parity, upon becoming maintainer, I plan to create a new beta release for the 6.x branch.

Thank you very much Mark in advance for your efforts!

Sounds great Mark! Much appreciated...

patch 133 will not apply to D9.53

patch 133 will not apply to D9.53

Just double-checking before digging further: the patch should be applied to the 6.0.x branch of this module, Linkit, and can then be tested in the context of Drupal 9.5.x or 10.x. When you say the patch "will not apply to D9.53," do you mean you were able to apply the patch to LinkIt but the functionality is not working in 9.53, or that you were trying to apply this patch directly to Drupal core?

this is what i currently use
"drupal/linkit": {
"2886455- Add support for multilanguage": " https://www.drupal.org/files/issues/2020-12-04/multilingual-support-link... → ",
"3232190 - CKEditor 5 readiness ": " https://www.drupal.org/files/issues/2023-01-31/3232190-133.patch → "
},

FWIW, I can confirm that the patch from 133 applied successfully in my environment:

Drupal core: 9.5.3
Php: 7.4.10
Linkit: 6.0.x-dev (against the latest commit: https://git.drupalcode.org/project/linkit/-/commits/6.0.x)

I believe it did fail against the 6.0.0-beta3 release, so maybe that's what Rar9 is experiencing.

Thanks for providing the patchfile declarations from your composer.json file. Based on the fact that you're using a patch for multilingual support designed for the 8.x-5.x branch of Linkit, I infer that is the version of this module you're using. I tested whether that patch would apply to the 6.0.x branch, and unfortunately (as predicted), it doesn't.

So I think we'll want to add a patch that works with 6.0.x in ✨ Multilingual support: Allow linking to specific translations Needs review , and potentially add a patch for CKEditor 5 (here) that works with 8.x-5.x

To summarize: right now, you can't use this CKEditor 5 patch alongside the multilingual patch, which is designed for 8.x-5.x.

For others coming here seeking similar clarification:

Usage notes

This issue is initially providing CKEditor 5 support for the 6.0.x branch. In order to make use of it, you need to be using that branch in your code. Upon merge of this fix and a new release (6.0.0-beta4), sites wanting to use this module with CKEditor 5 will need to use the following: composer require drupal/linkit "^6".

Subsequent tasks will endeavor to make patches for other issues in the LinkIt issue queue for the 6.0.x branch.

I have installed and done some preliminary testing of #135 applied to 6.0-dev and it is going well so far.

Would really like to see this in the next release.

@mark_fullmer thanks both patched updated and are working. Now they are working as under ckeditor 4

@mark_fullmer thanks both patched updated and are working. Now they are working as under ckeditor 4

Great! Assuming this is referring to using this issue's CKEditor 5 patch alongside the 6.0.x patch for multilingual support in https://www.drupal.org/project/linkit/issues/2886455#comment-14944869 ✨ Multilingual support: Allow linking to specific translations Needs review , could you post a comment on ✨ Multilingual support: Allow linking to specific translations Needs review confirming that the patch for multilingual support works for you with the 6.0.x branch?

Status update for folks following this issue: pending final review of this issue, I plan to merge it and provide a new release that includes Drupal 10 compatibility and CKEditor 5 support on 5 March 2023.

For your future planning, refer to 🌱 LinkIt Release Roadmap and Issue Prioritization Active .

Thanks, all!

Automatically closed - issue fixed for 2 weeks with no activity.

Follow-Up issue for the overwritten styles in the autocomplete results: 🐛 CKEditor5 resets the autocomplete result styles Fixed

We're on an exercise of D10 readiness, however when using D9.5.10 with ckeditor 5 along with linkit 6.0.0 we're getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at draggable.js:776:13

So does this mean we need to upgrade to D10 before using ckeditor 5?

Chicken and the egg?

We're on an exercise of D10 readiness, however when using D9.5.10 with ckeditor 5 along with linkit 6.0.0 we're getting this error:

Linkit 6.0.0 is designed to work with the latest version of Drupal 9.5. As of right now, all tests pass: https://www.drupal.org/pift-ci-job/2717325 →

Give that the error is reported in draggable.js, my guess is that the issue has to do with some other integration in CKEditor 5?

Can you reproduce the problem on a "vanilla" Drupal 9 site?