Problem/Motivation
You can configure Patternkit to use a single Drupal text format as the profile for CKEditor for all patterns. However, some patterns may not allow certain HTML tags that this CKEditor profile allows. For example, if you use the Full HTML text format that comes with Drupal's standard install profile, you can use ordered lists. However, you might have a pattern that strips those HTML tags in its renderer (e.g., its Twig template). In this case, CKEditor incorrectly assumes you can use the list element, because it doesn't know the list will actually get stripped on render.
Steps to reproduce
- Install a Drupal 9 site with standard install profile.
- Apply this change to make the example pattern filter out all HTML tags except links and bold and emphasis:
diff --git a/modules/patternkit_example/lib/patternkit/src/atoms/example/src/example.twig b/modules/patternkit_example/lib/patternkit/src/atoms/example/src/example.twig index 8fcfb44..e727341 100644 --- a/modules/patternkit_example/lib/patternkit/src/atoms/example/src/example.twig +++ b/modules/patternkit_example/lib/patternkit/src/atoms/example/src/example.twig @@ -2,4 +2,4 @@ Sample twig template. <div>{{- text|striptags('') -}}</div> -<div>{{ formatted_text|raw }}</div> +<div>{{ formatted_text|striptags('<a><b><strong><i><em>')|raw }}</div> - Enable modules: patternkit_example and layout_builder.
- Enable CKEditor wysiwyg integration for Patternkit
- Go to /admin/config/user-interface/patternkit/json
- Un-tick Use the Shadow DOM
- Select CKEditor in WYSIWYG editor
- Select Full HTML in CKEditor toolbar
- Save
- Configure a content type to use Layout Builder.
- Create a node of that content type, then go to its Layout tab.
- Add the block of type "[Patternkit] Example"
- In the Formatted Text wysiwyg field, enter some content, including at least one ordered or unordered list.
- Save the block.
- Notice that the HTML list content you entered has been stripped out.
Proposed resolution
Each pattern field's schema should be able to instruct CKEditor which HTML tags and buttons should be available on the wysiwyg toolbar.
The schema can use properties allowedContent and disallowedContent to list rules by which CKEditor will allow and/or disallowed certain HTML tags and their attributes. These rules will be passed as-is to CKEditor's config (read more at https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html).
For example, in this schema, only links, bold/strong, and italic/emphasis tags are allowed. You can use any attributes on these elements (including class, style, and other attributes), except ones prefixed with data-:
"formatted_text": {
"title": "Formatted Text",
"type": "string",
"format": "html",
"options": {
"wysiwyg": true,
"allowedContent": "a b strong em i[*](*){*}",
"disallowedContent": "*[data-*]"
}
},
See changes to README.md in the MR for mode documentation.
Remaining tasks
None
User interface changes
The CKEditor toolbar for a pattern's field may not match what is configured for its Drupal text format, because each field can override the (dis)allowed HTML tags and attributes.
API changes
None
Data model changes
None.
Release notes snippet
Patterns can now specify which HTML tags and attributes they allow and disallow. Patternkit informs CKEditor about these rules, so that it can ensure its toolbar buttons match the actual tags allowed.
Issue fork patternkit-3265054
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
krisahil commentedComment #4
krisahil commentedComment #7
mariohernandez commentedSuccessfully reviewed and tested this issue.
Comment #8
krisahil commentedThank you, @mariohernandez! Marking as fixed.
Comment #9
mariohernandez commented