Update to CKEditor 5 v33.0.0

🤞

That explains the 6 MB patch :D

Reviewing this patch as thoroughly as #3261600-29: Update to CKEditor5 v32.0.0 a few days ago…

Applied #5 and:

• ✅ Patches look great!
• ✅ It works in general (unsurprising given tests pass).
• ✅ Confirmed that <style> is now retained:
  

  <style>p { color: red;}</style>
  <p>yo</p>
  

  → and this works in Full HTML out of the box, and in Basic HTML it works after explicitly allowing <style>
  ⇒ #3256566: [upstream] <style> tag support in GHS is fixed once this lands!

• 👍 <table><caption> will require the new PlainTableOutput plugin to be added — let's leave that for #3230230: Enable table captions; override CKE5's default downcast to generate <table><caption></table> instead of <figure><table><figcaption></figure>.

This is definitely good to go! 🚀

I'm getting hundreds of styleint errors from the patch. Are we missing an exclusion of the ckeditor library?

This didn't happen with the previous update patch..

vendor/symfony/var-dumper/Resources/css/htmlDescriptor.css
   2:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   3:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   4:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   5:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   6:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   7:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   8:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   9:5   ✖  Expected indentation of 2 spaces                          indentation                                   
   9:23  ✖  Expected "#F9F9F9" to be "#f9f9f9"                        color-hex-case                                
  10:5   ✖  Expected "color" to come before "background-color"        order/properties-order                        
  10:5   ✖  Expected indentation of 2 spaces                          indentation           

@lauriii the committer hooks use the core script if it's available

@catch That output is for vendor/symfony/var-dumper/Resources/css/htmlDescriptor.css, not in CKE5… 😅

@catch The yarn build is clean for me too and I was able to commit it cleanly to all the branches. Are you deleting core/node_modules and re-running yarn install whenever you switch branches?

For the sake of reviewability and not crashing Chrome, here's the 10.0.x patch without the vendor changes. (I gave it the wrong extension but set it to not test so hopefully it won't.)

It looks like core/modules/ckeditor5/js/build/ckeditor5.types.jsdoc and core/modules/ckeditor5/js/build/drupalMedia.js are being updated by this build. The latter is minified so I can't review changes for it. Would there be an easy way for me to check the non-minified diff of it?

Edit: I tried a git diff --color-words of the file and it looks like only one section is actually changing, but I still can't parse out the changes all on one line. :)

Aside, do all the billionty constraints in core/package.json have to be changed by hand to create the update?

Given what this is blocking I'm going to go ahead and commit it despite not knowing the answer to #13, but hopefully we can still document/address that for future updates.

I think we need to update the frontend dev tools docs with CKEditor 5 update instructions. Right now it refers to generically "CKEditor" with what I believe are the CKEditor 4 build instructions.

When I follow the IS instructions locally, I don't get the changes to ckeditor5.types.jsdoc. 🤔

OK too many questions; going to wait on committing this until I can discuss the above things.

Thanks @lauriii.

I added the CKEditor 5 instructions from the IS here:
https://www.drupal.org/node/2996785/revisions/view/12567698/12581731

It could still use followup work to explain what yarn run build:ckeditor5-types is for.

Also, is it possible to include that step in the main CKEditor 5 build script? Why is it separate? Leaving tagged for followup for that too.

I'd also love documented steps to see the un-minified diff as above. :) Or even a tool in core for that; it's something we've identified as a stable blocker. But that can be a followup too.

Committed to 10.0.x, 9.4.x, and 9.3.x. Thanks!

Marking NW for the followups.

Closed #3256566: [upstream] <style> tag support in GHS and unblocked #3230230: Enable table captions; override CKE5's default downcast to generate <table><caption></table> instead of <figure><table><figcaption></figure>.

@lauriii This document is the place to update:
https://www.drupal.org/about/core/policies/core-change-policies/frontend...

So far I added:

Updating CKEditor 5

1. Increase the package constraints for the CKEditor 5 dependencies as needed in core/package.json (all packages with the @ckeditor namespace).
2. Perform a clean installation of core's yarn dependencies:
   

   cd core
   rm -rf node_modules
   yarn install

3. Update the vendor assets: yarn run vendor-update.
4. Run the CKEditor 5 build: yarn run build:ckeditor5.
5. Run yarn run build:ckeditor5-types.

...but the last step should mention what that step is for/why we do it, and since it's not documentede anywhere else on the page, we also need to document it in its own section, potentially in the quick reference at the end, and/or wherever else the step might be required.

Actually, since we ended up backporting this to 9.3.x and 9.4.x hasn't had an alpha yet, it doesn't need to go in the 9.4.x release notes.