Problem/Motivation
If you edit an existing Patternkit block that has multiple wysiwyg-enabled fields and are using CKEditor for wysiwyg, then the second wysiwyg field loads without its existing data.
Steps to reproduce
- Install a Drupal 9 site with standard install profile.
- 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 with multiple filtered content blocks"
- In the Text plain text field, enter some text for the title.
- In the Formatted Text: Restricted wysiwyg field, enter some text.
- Similarly, in the Formatted Text: Free wysiwyg field, enter some other text.
- Save the block.
- Re-edit this block. Notice that the second wysiwyg field does NOT contain the text you entered.
Please note that this problem seems to not occur if each wysiwyg field is contained in a list field (e.g., `anyOf` or `oneOf` where the available sub-schemas contain wysiwyg-enabled fields).
Proposed resolution
Should we fix in the D9+CKEditor 4 integration? Or, should we wait until we try to upgrade to CKEditor 5, which is required in Drupal 10?
Remaining tasks
- Fix the bug
- Update example patterns
- Add tests?
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|
Issue fork patternkit-3308393
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
sluceroGiven the EoL for Drupal 9 isn't until November 2023, and we're not sure yet how quickly sites will be migrating to CKEditor 5 and D10, I lean toward fixing this in the existing configuration using Drupal 9 and CKEditor 4.
Comment #3
johnle commentedFrom what I can tell this is also an issue with any pattern containing the CKEditor WYSIWYG. If any other field that are below the field containing the CKEditor does not get loaded back in because of the it is trying to set readOnly on this instance
But this this.editable() is undefined. We can bypass that check using this.readOnly to false so that it doesn't get in the if statement since at this point the editor isn't even full render yet.
I've attached a patch that does allow to get around this and get the CKEditor working with 1 or multiple WYSIWYG field.
Comment #4
johnle commentedFound another bug, when triggering the properties button to hide and show the fields, the CkEditor stays in read only mode. Here is a follow up patch to fix that issue.
Comment #5
johnle commentedRan into an issue where when the WYSIWYG editor is hidden by properties, it throws an error
I've tried using the delay creation method with both the following delayIfDetached: true and delayIfDetached_callback approach, but was getting editor-delayed-creation-success spam in the console log.
Ended up just using setTimeout to delaying the instance editor from loading until all the properties have finished being set and for the ones that got removed before CKeditor has created an instance for it, were temporary store in global until enabled.
Comment #6
johnle commentedfixed spacing in patch #5
Comment #8
sluceroComment #9
sluceroComment #11
sluceroMerged for inclusion in the beta 6 release.