Contrib.social

Allow colons in CSS selectors for CKEditor 5 styles configuration

Open on Drupal.org →
Created on 22 August 2024, 3 months ago

Problem/Motivation

The current CKEditor 5 module for Drupal 10 does not support CSS class names with colons, which are increasingly common in modern CSS frameworks and custom styles. When trying to add a style such as `span.text-primary-600.dark:text-primary-500|Featured`, the module throws an error, preventing the class from being saved.

Steps to reproduce

1. Go to the text format configuration in Drupal.
2. Attempt to add a style with a colon in the class name, e.g., `span.text-primary-600.dark:text-primary-500|Featured`.
3. Notice the error: "Line 2 does not contain a valid value. Enter a valid CSS selector containing one or more classes, followed by a pipe symbol and a label."

Proposed resolution

The validation regular expression in the `Style.php` file should be updated to allow colons in class names. The regex should be modified as follows:
if (!preg_match('/^([a-z][0-9a-zA-Z\-]*)((\.[a-zA-Z0-9\x{00A0}-\x{FFFF}\-_:]+)+)$/u', $selector, $selector_matches)) {

✨ Feature request
Status

Active

Version

10.3 ✨

Component
CKEditor 5  →

Last updated 1 day ago

Created by

🇵🇱Poland bronismateusz

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024