Plugin blocks other classes on P elements

Open on Drupal.org →

Created on 18 November 2023, 7 months ago

Updated 15 May 2024, about 1 month ago

Problem/Motivation

In CKEditor 5, in order to add arbitrary class names to P elements when "Limit HTML" is enabled, you have to enable the Source editing plugin, and add <p class> as a legal value.

If CKEditor IndentBlock is installed, the indent and outdent toolbar buttons are used, and "Enable indentation on paragraphs" is turned on, a couple of things happen:

1) You get a validation error complaining about the <p class> in the Source editing config:

The following attribute(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: Indent block (<p class>).

2) If you remove that value from the Source Editing config, the read-only "Allowed HTML tags" value of the Limit HTML filter will indeed still show <p class>.

3) Any classes you might have assigned to P elements in your content will not be displayed. When you edit them, if you toggle the Source editing button on, the classes will have been removed. The only legal classes are the IndentN classes of this plugin, plus other specific P classes of other plugins. (I don't know if that is generally true, only that eg the Styles plugin can define allowed classes for P elements.)

Proposed resolution

There is something about the declaration of CKEditor 5 plugins vs their implementation that is involved here. I don't understand the details, but I have seen this before, where the plugin declares a very general constraint like <p class> but implements more specific values. It ends up constraining allowed HTML to the more specific values, but blocks the user from adding the more general constraint themselves.

I found that a fix is to specify all of the classes used by the plugin. In this plugin's case, that means changes to the ckeditor5.yml file and the plugin code.

There is a reference to a need to add <p class> to Allowed HTML in the README file - I guess that is for CKEditor 4?

🐛 Bug report

Status

Needs review

Version

1.0

Component

Code

Created by

🇺🇸United States brad.bulger

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Merge Requests

!9Plugin blocks other classes on P elements
Open
🇺🇸United States justcaldwell
updated about 1 month ago

Comments & Activities

Issue created by @brad.bulger
Comment 7 months ago →
🇺🇸United States brad.bulger
This patch file spells out the changes that worked for me.
Comment about 1 month ago →
🇺🇸United States justcaldwell
I think this core issue is the possible culprit: 🐛 [10.2 regression] CKEditor 5 breaks when "Source"/Source editing button is added and "Manually editable HTML tags" are specified Needs review .
Assigned to justcaldwell
Comment about 1 month ago →
🇺🇸United States justcaldwell
Okay, maybe not (re #3). I applied the latest 10.2.x patch from 3410100 and the issue persists.

Since we know all the classnames we're using here, seems reasonable to be more specific than just <p class> as @brad.bulger suggests. Using a wildcard in the class (i.e. <p class="Indent*">) should work and will be a bit cleaner.
Merge request !9Be specific about classnames in use → (Open) created by justcaldwell
Open in Jenkins → Open on Drupal.org →
Core: 10.2.x + Environment: PHP 8.1 & MySQL 8
last update about 1 month ago
1 pass
Open in Jenkins → Open on Drupal.org →
Core: 10.2.x + Environment: PHP 8.1 & MySQL 8
last update about 1 month ago
1 pass
Comment about 1 month ago →
🇺🇸United States justcaldwell
The changes in the MR worked in my testing. Please review.

Static patch attached.
Issue was unassigned.
Status changed to Needs review about 1 month ago4:56pm 15 May 2024
Comment about 1 month ago →
🇺🇸United States justcaldwell

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024