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

  1. Install a Drupal 9 site with standard install profile.
  2. Enable modules: patternkit_example and layout_builder.
  3. 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
  4. Configure a content type to use Layout Builder.
  5. Create a node of that content type, then go to its Layout tab.
  6. Add the block of type "[Patternkit] Example with multiple filtered content blocks"
  7. In the Text plain text field, enter some text for the title.
  8. In the Formatted Text: Restricted wysiwyg field, enter some text.
  9. Similarly, in the Formatted Text: Free wysiwyg field, enter some other text.
  10. Save the block.
  11. 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

Issue fork patternkit-3308393

Command icon 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

krisahil created an issue. See original summary.

slucero’s picture

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?

Given 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.

johnle’s picture

StatusFileSize
new1.16 KB

From 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

setReadOnly: function( isReadOnly ) {
      isReadOnly = ( isReadOnly == null ) || isReadOnly;

      if ( this.readOnly != isReadOnly ) {
        this.readOnly = isReadOnly;

        // Block or release BACKSPACE key according to current read-only
        // state to prevent browser's history navigation (https://dev.ckeditor.com/ticket/9761).
        this.keystrokeHandler.blockedKeystrokes[ 8 ] = +isReadOnly;

        this.editable().setReadOnly( isReadOnly );

        // Fire the readOnly event so the editor features can update
        // their state accordingly.
        this.fire( 'readOnly' );
      }
    },

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.

johnle’s picture

StatusFileSize
new1.32 KB

Found 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.

johnle’s picture

StatusFileSize
new12.17 KB

Ran into an issue where when the WYSIWYG editor is hidden by properties, it throws an error

TypeError: Cannot read property 'unselectable' of null

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.

johnle’s picture

StatusFileSize
new12.17 KB

fixed spacing in patch #5

slucero’s picture

Status: Active » Needs review
slucero’s picture

  • slucero committed 5186bdc on 9.1.x authored by johnle
    Issue #3308393 by johnle, slucero, krisahil: Existing data not loaded...
slucero’s picture

Status: Needs review » Fixed
Parent issue: » #3308212: Beta 6 Release Plan

Merged for inclusion in the beta 6 release.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.