Contrib.social

[Style] A copy of a link appears in CKEditor 5 when clicking next to a link with added class

Open on Drupal.org →
Created on 19 March 2024, 6 months ago
Updated 20 March 2024, 6 months ago

Versions:
Drupal version: 10.1.8
Web Server: nginx/1.21.6
PHP: 8.1.21
Database: 10.5.24-MariaDB
Admin theme used: Claro

Problem/Motivation

The problem/bug:
In case you create a custom style in CKEditor 5 which style is an <a> tag with any added class (<a class="something"> in the example) and you apply this style, you encounter a bug when you edit the node.

First you have to make a link using the 'Link' button from the CKEditor 5 toolbar. Then you set your custom style on this link so that it also gets the custom class. Now if you click right next to this link on the right side, it gets duplicated and a copy of it appears in the DOM: a link with the same class/classes but without the href. If you click somewhere else in the editor window, this copy of the original link disappears.

In case you have some css rules for your custom classname that adds some padding and background color, this bug gets more visible and more annoying as the 'copy' has a blinking cursor in it and you can type in it or if you try to delete it with the backspace it wont't disappear, but the content of the original link gets deleted. When you type something into this new link and then you click somewhere else in the editor, the new element won't disappear.

This bug causes an annoying content editor experience.

Seems like this is not an issue with the Claro admin theme, because setting Olivero as admin theme won't solve the issue.

Steps to reproduce

1. Create a custom style for CKEditor 5 (/admin/config/content/formats/manage/YOURTEXTFORMAT, under the 'Style tab' of CKEditor 5 plugin settings): an <a> tag with any added class like this: a.something|MyCustomStyle
2. Create a node
3. Create a link using the 'Link' button from the CKEditor 5 toolbar
4. Apply your custom style to this link
5. Click right next to the link on the right side
6. Observe the new element in the inspector: a copy of your link with the same class/classes but without the href.
7. Observe that you can get rid of this copy if you click somewhere else in the editor window.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Postponed: needs info

Version

10.1 ✨

Component
CKEditor 5  →

Last updated 2 days ago

Created by

🇭🇺Hungary peterbihari

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

  • Issue created by @peterbihari
  • Comment 6 months ago →
    🇭🇺Hungary peterbihari
  • Comment 6 months ago →
    🇭🇺Hungary peterbihari
  • Status changed to Postponed: needs info 6 months ago
  • Comment 6 months ago →
    🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Wow, that video is epic and hilarious and … painful 😅

    Could you please share:

    1. the CSS you used in the video?
    2. drush cget editor.editor.FOO and drush cget filter.format.FOO output?

    That'll make it easier to reproduce, and is also the information we'll need to write a test for this.

  • Comment 6 months ago →
    🇭🇺Hungary peterbihari

    Hi Wim,

    I managed to reproduced the issue with the following setup:
    Drupal version: 10.1.8
    Web Server: nginx/1.21.6
    PHP: 8.1.21
    Database: 10.5.24-MariaDB
    Admin theme: Claro
    Default theme: Olivero

    I used the same two elements in this video as well. A link that has an added classname () and a primary button ( Since I used Olivero as default theme and Claro as admin theme, there is no additional custom CSS: the 'something' classname has no added CSS rule, and the primary button uses the default Drupal CSS.

    I also created a minimal text format for this second video, called 'html'.

    Please find attached the requested editor settings: editor.editor.html.yml and filter.format.html.yml.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024