5.1.0: Rich Text link doesn't appear to do anything

[jamesmacwhite]

Describe the bug

For a rich text column, the link option doesn't appear to do anything. Highlighting text, select it but no dialog box or anything appears to create a link.

There doesn't appear to be any errors when using the link option occuring in console.

Steps to reproduce

1. Create a table with rich text as a column
2. In the rich text column cell, write some text, select it and use the link option.
3. There is no further dialog/action to create a link

Craft CMS version

5.11.3

Plugin version

5.1.0

Multi-site?

Yes

Additional context

CKEditor 5.8.0

[jamesmacwhite]

The only thing maybe related is this warning being raised, but probably not related.

Craft.js:2096
An import map rule for specifier 'ckeditor5/translations/' was removed, as it conflicted with already resolved module specifiers.
(anonymous) @ Craft.js:2096

[DenyEs]

I am having the same problem at the moment. Link can be added only when "Rich Text Editing Mode" is set to "Inline" on the field itself and even then, we only have an option to add a URL - no choice of entry, assets, etc... Not sure if that's an intended behavior or should we have an option to choose from different elements?

[engram-design]

Fixed for the next release. To get this early, run composer require verbb/tablemaker:"dev-craft-5 as 5.1.0".

[DenyEs]

Fixed for the next release. To get this early, run composer require verbb/tablemaker:"dev-craft-5 as 5.1.0".

@engram-design Thank you for the quick fix! Just to double check, for links, is URL the only option to add?

[jamesmacwhite]

I've just ran composer update the latest dev-craft-5 and the link option isn't triggering the option still, I've done a ddev craft clear-caches/all and even cycled the web container.

This is using the modal option for rich text, the inline option offers the URL option.

[engram-design]

@DenyEs For now, yep, we're looking into other options about picking a ckeditor config, because at the moment its pretty much hardcoded the config it gets. @jamesmacwhite might be worth clearing your cp caches?

Indeed this is an issue in the modal due to how things are layered.

[jamesmacwhite]

Cleared all caches via craft clear-caches/all and restarted the DDEV container. Inline works, but the modal isn't for me.

Looking at the DOM I can see when using the link option a ck-fake-link-selection class is added as a span around the text, but no modal. Maybe some CSS issue then, we do have custom CP styling/branding.

[DenyEs]

@engram-design No worries, just wanted to make sure it's not a bug. This is a massive help even without those additional options.

I can confirm the link works in a modal as well as inline for me. I am running the latest version of CKEditor 5.8.0

[jamesmacwhite]

Modal doesn't work for me even in incognito but inline does, I thought maybe browser extension conflict. I'll have to check the DOM then, if there's something specifically being modified.

I've unloaded the plugin loading additional CSS in the CP and tried a different browser, I still get the same with the modal.

[engram-design]

@jamesmacwhite if you can post your browser version and details along with Craft and CKEditor plugin versions just so we can check. Sounds like you’re doing everything right.

[jamesmacwhite]

I've tested on Microsoft Edge for Mac Version 154.0.4258.37 (Official build) (arm64) and Google Chrome for Mac Version 154.0.8037.58 (Official Build) (arm64), both latest.

I mean they are pretty much the same these days for browser rendering. My next move was to install a fresh Craft CMS install and confirm.

Craft CMS version is 5.11.3
CKEditor is 5.8.0

[jamesmacwhite]

Forgetting I need to pull the latest dev-craft-5, there's deffo something specific in this project, a fresh Craft CMS 5 install with just CKEditor 5.8 and dev-craft-5 of Tablemaker works fine.

Looks like I've got to play the disable plugin game, sorry for the noise. Can't wait to find out what obscure thing this is.

[jamesmacwhite]

Comparing the two, it seems that the top and left position values are the issue. On a working example the top is 442px and left: 592px on the project that this isn't working on the top value is 22039px lol.

The element for the link balloon panel is there in the DOM, just the positioning values are way off the screen compared to a working example.

I'll continue having a look what the issue is, maybe some CSS is applying position: relative; or similar somewhere, but I had disabled the CP CSS, so that shouldn't be it.

[jamesmacwhite]

I've tried disabling all modules and plugins, and I still get the same issue on the project in question. I'm out of ideas, who wants links in your tables anyway!

I'll report back if I find what the cause is, but dropping all modules and plugins and it still doing it, concerns me!

I'm wondering if it is because on the entry I'm testing on this is matrix within matrix and there's A LOT of blocks, which could be the positioning problem and the calculation of it? e.g. the number of elements on the page in the editor is creating a crazy position top value because of the total length of the page.

Found the issue: The bug is basically on a entry with a long page length the position top value is calculated in a way that basically puts the balloon off screen. That was a fun one. I replicated the issue on a fresh Craft 5 install, so pretty sure it is that.

To replicate it, basically setup this matrix scenario and spam a load of blocks with a table field, then for the bottom one try using the link, the balloon won't appear because the top positioning is not correct, it does work for the blocks that are nearest the top of the page.