CKEditor 5 readiness

Thanks Wim. Please keep us updated on this topic

I've been doing some experimentation on this with Oleq from CKSource. The first step was to try to integrate the current, CKEditor rendered <input> element with a11y_autocomplete. It seems like this is feasible meaning that we should be able to implement at least the MVP version of this. Here's a screenshot of how this looks like currently:

I'm assigning this to myself to turn what we currently have into a MR on this issue.

This is now rendering the list in a manner that resembles the CK4 version

Note that -at the moment- this will stop working if yarn build is run. This was built with a version of A11y_Autocomplete that includes the not-yet-commited changes in #3245923: Provide API to override suggestion template. Adding the commit hash for that issue-in-progress did not work as yarn looked for that hash on the main branch. (perhaps this is addressable, but could not find it in any docs...). Once that A11y_Autocompelte issue lands, build will be fine.

Video of Linkit working in CKEditor 5 https://youtu.be/5GoorQdqQ40

I also created a CKEditor 5 equivalent of LinkitDialogTest which passes.

There is a peculiarity with the current MR that will require some attention. Sometimes, when changing a link from a linkit-provided one to a manually typed one, the data attributes are not removed as expected. This seems to occur more often when a link is change is submitted by clicking the submit button vs submitting with the enter key. This is not a problem with the FuntionalJavascript tests. Similarly, if a manually typed link is added and the attributes are removed, changing it to a linkit-provided link often results in the attributes not being re-added. This is a frequent enough occurrence it should not be difficult to reproduce, but I can't figure out the exact steps. Just try changing linkit-links to manually typed ones a few times and keep an eye on how the attributes are impacted.

updated branch with latest changes from #3246362: Keep autocomplete lib passing jquery ui tests and #3247369: Add back option to customize classes

Tim Plunkett mentioned that there's a new documentation page that might be useful for others looking to help: https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito...

Should the merge request be updated to work against the 6.0.x branch?

Never mind, I just realized that the 6.0.x releases are actually just tags on the 8.x-5.x branch.

This is the merge request in patch format, for anyone who wants it.

The patch was failing for me because it was conflicting with the drupal.org packaging. Attached a quick patch for use in composer. It'e exactly the same as #25 just without the test_dependency change in .info.yml

Oops bad patch - ignore this one

The patch was failing for me because it was conflicting with the drupal.org packaging. Attached a quick patch for use in composer. It'e exactly the same as #25 just without the test_dependency change in .info.yml

Could one of the maintainers please create a 6.0.x (or 6.x) branch rather than just adding these tags to the 8.x-5.x branch? I think that's the separation we need to distinguish between ckeditor 4 & 5. Thanks.

Patch in #27 is working
Thank you :)

I suggest to have that in a 9.0.x branch and release a 9.0.0

The module has 6.x, 7.x, 8.x branches before.

• 6.x

  Under development.

• 8.x-5.x Under development
• 8.x-4.x Current version - Maintenance only (in favor of 8.x-5.x and 6.0).
• 7.x-3.x Current version - Maintenance only.
• 7.x-2.x No further development.
• 7.x-1.x Not maintained.

• 6.x-1.x

  No further development.

I've added a 6.0.x development branch.

Thank you John. Could you please also create a dev release on the 6.0.x branch to make it easier to test against it? Thanks.

I found an issue: when switching between two text formats with CKEditor 5, an error is logged in the console and CKEditor disappears (fails to render). Both text formats have the Linkit plugin enabled.

TypeError: Cannot read properties of undefined (reading 'on')
    at LinkitEditing._removeExtraAttributesOnUnlinkCommandExecute (linkitediting.js:129:19)
    at LinkitEditing.init (linkitediting.js:14:10)

The error happens on this line:

unlinkCommand.on('execute', evt => {

The error also happens during the initial CKEditor render if the field is restricted to only the second text format using the Allowed Formats module, so not only when switching text formats.

I also noticed that on the second text format, Allowed HTML tags is missing the a href attribute. When I manually fix this in the config yml (the text area is greyed out on the text format page), the error still happens, so this is probably unrelated.

DieterHolvoet: Please open core issues for those bugs, I'm sure Wim Leers and others would like to know about them.

Back to jQuery UI, can't test the 6.0 branch though :/

Changed the code to open the edit link dialog. This was failing locally but I think it was unrelated to the dialog opening.

still failing but this fixes a case when the extra attributes should be removed if we input a value that doesn't come from the autocomplete dropdown.

so one line change that took a while to find. Tests should be passing.

This may be an edge case, but I'm not seeing a way to have a rich text format that does not support links with ckeditor 5 (Drupal 9.4.3) + linkit 5.x with this patch. This error is likely caused by a combination of both core and linkit.

Example use case: text format used for teaser text where we want to allow bold and italics but no links because the entire teaser will be linked.

In testing, we've only included bold and italic WYSIWYG styles, Linkit is disabled for this text format, Linkit URL converter is off, and limit HTML is on.

The allowed HTML tags box is no longer editable, and even after removing heading, link, and list options, those still appear as allowed tags.

When trying to save the text format, linkit throws the following error:

The Linkit plugin needs another plugin to create <a>, for it to be able to create the following attributes: <a data-entity-type data-entity-uuid data-entity-substitution>. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

Edit: if the linkit module is not enabled, it is possible to create a ckeditor enabled text format that does not allow links. So linkit is breaking core ckeditor 5 functionality even in text formats where it is disabled.

The Linkit plugin needs another plugin to create <a>, for it to be able to create the following attributes: <a data-entity-type data-entity-uuid data-entity-substitution>. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

Edit: if the linkit module is not enabled, it is possible to create a ckeditor enabled text format that does not allow links. So linkit is breaking core ckeditor 5 functionality even in text formats where it is disabled.

I'm seeing this too with the latest core patch for styles combo

another instance of #3294908: Configuration overlaps between Styles and other CKE5 plugins?

+++ b/webpack.config.js
@@ -0,0 +1,57 @@
+  const bc = {
+    mode: 'production',
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              comments: false,
+            },
+          },
+          test: /\.js(\?.*)?$/i,
+          extractComments: false,
+        }),
+      ],
+      moduleIds: 'named',

We need to add devtool: false here to prevent this emitting `eval` in the source code and therefore requiring people to include `unsafe-eval` in their CSP headers.

Fixes #51

Hi all, I have been testing this patch and I found another bug that I think has not been addressed yet:

When adding a link on the last word I wrote, and putting the cursor after the last link character, I have a "this is a link but there is not link" kind of situation (see screenshot). When checking the source, I have:
```

this is a test no link

```
which is a duplicated link of the first one, as far as I can tell (and when rendered on the frontend, behaves as such: 2 links to the same target)

(note I edited the uuids for readibility)

Which I guess is not that bad, but then, if I edit the link in the second link, it adds the path inside of my string (see the "link inception" screenshot), and here is the source then:
```

this is a test no li/node/8nk

```

A second problem that we got, that could be related to #47, is that if I have 2 editors, one allowing links and one not allowing links, that can be used on the same text element, then if I switch between them, I get the javascript error:
```
TypeError: i is undefined
_removeExtraAttributesOnUnlinkCommandExecute http://mysite.local/modules/contrib/linkit/js/build/linkit.js?v=9.4.5:1
init http://mysite.local/modules/contrib/linkit/js/build/linkit.js?v=9.4.5:1
promise callback*./src/core.js/init/h/< http://mysite.local/modules/contrib/ckeditor5/js/build/ckeditor5-dll.js?v=31.0.0:5
h http://mysite.local/modules/contrib/ckeditor5/js/build/ckeditor5-dll.js?...
init http://mysite.local/modules/contrib/ckeditor5/js/build/ckeditor5-dll.js?...
initPlugins http://mysite.local/modules/contrib/ckeditor5/js/build/ckeditor5-dll.js?...
create http://mysite.local/modules/contrib/ckeditor5/js/build/editor-classic.js...
create http://mysite.local/modules/contrib/ckeditor5/js/build/editor-classic.js...
attach http://mysite.local/modules/contrib/ckeditor5/js/ckeditor5.js?riajk9:313
editorAttach http://mysite.local/core/modules/editor/js/editor.js?v=9.4.5:172
attach http://mysite.local/core/modules/editor/js/editor.js?v=9.4.5:124
attach http://mysite.local/core/modules/editor/js/editor.js?v=9.4.5:112
attachBehaviors http://mysite.local/core/misc/drupal.js?v=9.4.5:27
attachBehaviors http://mysite.local/core/misc/drupal.js?v=9.4.5:24
http://mysite.local/core/misc/drupal.init.js?v=9.4.5:29
listener http://mysite.local/core/misc/drupal.init.js?v=9.4.5:17
domReady http://mysite.local/core/misc/drupal.init.js?v=9.4.5:24
http://mysite.local/core/misc/drupal.init.js?v=9.4.5:28
http://mysite.local/core/misc/drupal.init.js?v=9.4.5:31
ckeditor5.js:355:19
```

ay sorry I messed up the formatting, here are the sources that I have:

link has no link:

<p>
    this is a <a href="/node/26" data-entity-type="node" data-entity-uuid="uuid1" data-entity-substitution="canonical" rel="nofollow">test</a><a data-entity-type="node" data-entity-uuid="uuid1" data-entity-substitution="canonical" rel="nofollow"> no link</a>
</p>

and here is the inception link example source:

<p>
    this is a <a href="/node/26" data-entity-type="node" data-entity-uuid="uuid1" data-entity-substitution="canonical" rel="nofollow">test</a><a data-entity-type="node" data-entity-uuid="uuid1" data-entity-substitution="canonical" rel="nofollow"> no li</a><a data-entity-type="node" data-entity-uuid="uuid2" data-entity-substitution="canonical" href="/node/8" rel="nofollow">/node/8</a><a data-entity-type="node" data-entity-uuid="uuid1" data-entity-substitution="canonical" rel="nofollow">nk</a>
</p>

Found it wasn't working in layout builder forms, traced it down to a misnamed libraries entry

making it work for D10

To be more specific, I tried to implement the autocomplete with CKE5 widgets and tools.

Tried using createDropdown, which sort of work beside the UI being quite different than what's currently available. The tried using DropdownViewPanel, came with a bit too many things, switched to using ListView directly and that was a closer match although a few key keyboard interaction would need to be wired.

All that would sort of work if we didn't have groups to support. As of today I'm not sure we can implement grouping easily with what's provided by CKE5. I'll be off for a few weeks so probably not the best time for me to get into that right now.

Building a whole new UI element and making it adopted upstream would probably be the best solution, for now sticking with the current implementation looks like the quickest way to make this work, especially given that there is a working patch for it.

Thanks for the fix for the test failure :)

1. Grouping already works with the jquery UI version of the patch, it's a setting to enable in the matcher.
2. Already the case? For this to work a click on a suggestion is needed. Simply putting the node URL in the textfield without clicking a suggestion will only add the URL, not the other data attributes, for that a click on the suggestion is needed. Makes sense to me, maybe you don't want to "link" the link with the entity? Not sure how it is currently without the patch.
3. The new data attributes are declared in linkit.ckeditor5.yml, you think we should have an extra layer of validation? In which cases could it break down?
4. There is a CKEditor4To5Upgrade plugin, couple of methods are not implemented, you mean address those ?
5. Debatable. The substitution value comes from the autocomplete response and that is taken from ->setSubstitutionId($this->configuration['substitution_type']). Is the substitution value associated with the entity it points to, or with the specific <a> link in the specific place is it used? If it's associated with the entity, then nothing to do. If it's associated with the specific link then yes we would need to make sure the substitition is kept when changing the link. But I don't think we should do that, if you link to a file first, then change that link to an entity, you'll have kept the substitution value that is not correct for the new link.

little issue with the complied linkit plugin disregard patch #62

1. yes

If you're working on 4. I'll let you roll the fix for 3. as well too then :)

As a maintainer I'm not fan of that piece of code:

+++ b/js/ckeditor5_plugins/linkit/src/index.js
@@ -0,0 +1,148 @@
+    editor.plugins.get( 'ContextualBalloon' )._rotatorView.content.on('add', ( evt, view ) => {
+      if ( view !== linkFormView || wasAutocompleteAdded ) {
+        return;
+      }

But when I looked into it I didn't find a better solution.

As for tests it's probably good enough?

What's more of a concern is the fact that the extra attributes are only added when clicking a suggestion. Ideally if there is something matching it would automatically wire it, click or no click. to avoid the different behavior based on the user interaction.

not mouse vs. keyboard, more like: writing the url and "validating" the link vs. writing the url, clicking the suggestion, and "validating" the link.

For a project we were using the patch from #27 before (which worked well enough). After replacing that with #63 we got a lot of errors in seemingly unrelated JS code:

controlgroup.js:39 Uncaught TypeError: t.widget is not a function
at controlgroup.js:39:10
form-reset-mixin.js:34 Uncaught TypeError: Cannot set properties of undefined (setting 'formResetMixin')
at form-reset-mixin.js:34:13
mouse.js:40 Uncaught TypeError: e.widget is not a function
at mouse.js:40:10
(anonymous) @ mouse.js:15
checkboxradio.js:40 Uncaught TypeError: Cannot read properties of undefined (reading 'formResetMixin')
at checkboxradio.js:40:38
draggable.js:42 Uncaught TypeError: Cannot read properties of undefined (reading 'mouse')
at draggable.js:42:32
resizable.js:41 Uncaught TypeError: Cannot read properties of undefined (reading 'mouse')
at resizable.js:41:32
button.js:44 Uncaught TypeError: t.widget is not a function
at button.js:44:3
dialog.js:49 Uncaught TypeError: i.widget is not a function
at dialog.js:49:3
widget.js:104 Uncaught TypeError: i is not a constructor
at t.widget (widget.js:104:18)
dialog.js?v=9.4.6:31 Uncaught TypeError: $element.dialog is not a function
at openDialog (dialog.js?v=9.4.6:31:16)

@Wim Leers – Sorry, I forgot: We're on 9.4.6. I'd assume that it should be working as the patch is testing with Drupal 9 (although 9.5).

One question to the ones working on this. Should #3288339: Drupal 10 compatibility be marked as a duplicate?

changed tittle :)

Related and may help someone, not sure if it's the right place to put this. When switching from CKEditor 4 to 5 we also switched from entity_embed to linkit.

Here's a post update that does the migration.

And thank you for all the work here!

Would be awesome if this lands in core.

Hi,

Great work, all, exciting to see!

I just tested out #106 and found one tiny issue: no visual indication that it's an autocomplete text field, or when it's searching for a match. This is because the input inside CKEditor5 isn't getting the form-linkit-autocomplete class, which loads the throbber gif. This breaks the first 4 styles in the linkit.autocomplete.css file.

Cheers,
John

Patch from #106 working fine with 6-Dev version. Thanks for the work!

Patch from 106 + autocomplete throbbler class added.

Patch #113 works fine for me with Drupal 9.5.0 + Linkit 6.0.x-dev. Thanks!

patch #113 works fine for me with Drupal 9.5 + Linkit 6.0. Thank you!

Patch in #113 works fine with Drupal 9.5.0 and Linkit 6.0.x-dev.

Patch in #113 also works for me with Drupal 9.5.0 and Linkit 6.0.x-dev. I'm marking this as RTBC. Would the maintainers consider making a release so we don't need to point to a dev version? Thank you!!

Scratch that RTBC – tests need to pass first. Sorry about that!

This does make it work with CKeditor5! Thanks Wim Leers for your work on this, I'd RTBC and any polish can be taken into follow-ups

I would hope that after tests pass this could get added into the next beta release. 🤞

I wanted to lookup and test something in Linkit yesterday and got aware of this issue (otherwise i wouldn't been able to test it). I can also confirm that the patch enables Linkit in CKEditor5. Thanks for that! I've noticed only two details.

1) 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.

i am somehow unable to inspect the elements in devtools the ul element gets a display:none readded and i have no idea how to manage to keep it displayed (i am not a developer). but if i take a look into linkit.autocomplete.css in line 43 and 44

  background: #0075ba;
  color: #fff;

and in case the background color blue set in the css is identical to the one in the widget (which i am unable to verify) then the current color contrast is 2.56:1 https://coolors.co/contrast-checker/333333-0075ba
It looks the variable --ck-color-text(#333) is used instead of #fff for the text color. With the latter the color contrast in focus would be 4.94:1 instead https://coolors.co/contrast-checker/ffffff-0075ba

2) the other detail is out of the scope of this issue but i've quickly tested the aural interface of the results list and currently only the list item's titles are announced. The group titles as well as the meta data like the author, date and time are not announced (see voiceover.mp4 - i've tested in voiceover on macos 12.6.1)

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

These are the errors in the console:

Uncaught TypeError: t.widget is not a function
    at controlgroup-min.js?v=9.5.1:9:176
    at controlgroup-min.js?v=9.5.1:9:98
    at controlgroup-min.js?v=9.5.1:9:108
form-reset-mixin-min.js?v=9.5.1:9 Uncaught TypeError: Cannot set properties of undefined (setting 'formResetMixin')
    at form-reset-mixin-min.js?v=9.5.1:9:170
    at form-reset-mixin-min.js?v=9.5.1:9:107
    at form-reset-mixin-min.js?v=9.5.1:9:117
mouse-min.js?v=9.5.1:9 Uncaught TypeError: e.widget is not a function
    at mouse-min.js?v=9.5.1:9:219
    at mouse-min.js?v=9.5.1:9:119
    at mouse-min.js?v=9.5.1:9:129
checkboxradio-min.js?v=9.5.1:9 Uncaught TypeError: Cannot read properties of undefined (reading 'formResetMixin')
    at checkboxradio-min.js?v=9.5.1:9:210
    at checkboxradio-min.js?v=9.5.1:9:132
    at checkboxradio-min.js?v=9.5.1:9:142
draggable-min.js?v=9.5.1:9 Uncaught TypeError: Cannot read properties of undefined (reading 'mouse')
    at draggable-min.js?v=9.5.1:9:275
    at draggable-min.js?v=9.5.1:9:202
    at draggable-min.js?v=9.5.1:9:212
resizable-min.js?v=9.5.1:9 Uncaught TypeError: Cannot read properties of undefined (reading 'mouse')
    at resizable-min.js?v=9.5.1:9:229
    at resizable-min.js?v=9.5.1:9:156
    at resizable-min.js?v=9.5.1:9:166
button-min.js?v=9.5.1:9 Uncaught TypeError: t.widget is not a function
    at button-min.js?v=9.5.1:9:198
    at button-min.js?v=9.5.1:9:146
    at button-min.js?v=9.5.1:9:156
dialog-min.js?v=9.5.1:9 Uncaught TypeError: i.widget is not a function
    at dialog-min.js?v=9.5.1:9:317
    at dialog-min.js?v=9.5.1:9:271
    at dialog-min.js?v=9.5.1:9:281
widget-min.js?v=9.5.1:9 Uncaught TypeError: i is not a constructor
    at t.widget (widget-min.js?v=9.5.1:9:813)
    at dialog.jquery-ui.js?v=9.5.1:10:5
    at dialog.jquery-ui.js?v=9.5.1:61:3
widget-min.js?v=9.5.1:9 Uncaught RangeError: Maximum call stack size exceeded
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)
    at new t.<computed>.<computed> (widget-min.js?v=9.5.1:9:678)

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

It works when i:

- Install the jquery_ui contrib module https://www.drupal.org/project/jquery_ui
- Add jquery_ui/core to the linkit.base library dependencies in linkit.libraries.yml

...and then this core patch is also necessary. sigh.

https://www.drupal.org/project/drupal/issues/3222107

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.

The error in the console is:

jquery.validate.min.js:4

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

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

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 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: #3317769: Drastically improve the linking experience in CKEditor 5

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

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 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 #2886455: Multilingual support: Allow linking to specific translations, 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, could you post a comment on #2886455: Multilingual support: Allow linking to specific translations 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 #3345480: LinkIt Release Roadmap and Issue Prioritization .

Thanks, all!

Thanks, everyone, and especially Wim Leers who created this issue and did the majority of the work, for providing a CKEditor 5 solution for the LinkIt module!

• If you are using editor_advanced_link in conjunction with LinkIt, both can be used with CKEditor 5 now.
• If you are using the 6.0.x patch for #2886455: Multilingual support: Allow linking to specific translations, it should still apply to that branch.
• If you are using the 6.0.x patch for #2712951: Linkit for Link field, I'll be posting a re-roll shortly that applies cleanly to the latest commit.

The 6.0.0-beta4 release is forthcoming today, which will include this new feature, along with #3288339: Drupal 10 compatibility.

To follow and help shape the direction of this module going forward, visit #3345480: LinkIt Release Roadmap and Issue Prioritization.

Just tried it out.
Great work!!!

Thank you!

Follow-Up issue for the overwritten styles in the autocomplete results: #3362180: CKEditor5 resets the autocomplete result styles

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?