Contrib.social

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, 9 months ago

Problem/Motivation

The problem/bug:
In case you create a custom style in CKEditor 5 which style is an tag with any added class ( 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 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

Active

Version

10.1 ✨

Component
CKEditor 5  →

Last updated about 19 hours ago

Created by

🇭🇺Hungary peterbihari

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @peterbihari
  • Comment 9 months ago →
    🇭🇺Hungary peterbihari
  • Comment 9 months ago →
    🇭🇺Hungary peterbihari
  • Status changed to Postponed: needs info 9 months ago
  • Comment 9 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 9 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.

  • Comment about 2 months ago →
    🇭🇺Hungary peterbihari

    Hi,
    Has there been any update regarding this issue?

  • Comment about 1 month ago →
    🇳🇿New Zealand quietone

    Drupal 10.1.x is no longer supported. Does this occur on a currently supported version of Drupal?

    Since we need more information to move forward with this issue, I am keeping the status to Postponed (maintainer needs more info). If we don't receive additional information to help with the issue, it may be closed after three months.

    Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

    Thanks!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024