CKEditor 5 not loading on formatted text Field Widgets in the content entity form

💯 — and this was surfaced in #3512433-6: Provide visibility into which (core) field types (74%), field type props (63%) can be mapped into Content Type Templates vs not, and which field widgets (36%) are supported earlier today (for component instance forms specifically):

…, text_textarea, text_textarea_with_summary, text_textfield, …

🤓

Note that this is a special beast, see \Drupal\editor\Element::preRenderTextFormat():

    // \Drupal\filter\Element\TextFormat::processFormat() copies properties to
    // the expanded 'value' to the child element, including the #pre_render
    // property. Skip this text format widget, if it contains no 'format'.
    if (!isset($element['format'])) {
      return $element;
    }

and

    foreach ($editors as $key => $editor) {
      $definition = $this->pluginManager->getDefinition($editor->getEditor());
      if (!in_array($element['#base_type'], $definition['supported_element_types'])) {
        unset($editors[$key]);
      }
    }

— IOW the Text Editor (editor) module alters the text field type's widget's form render array representation 😅

Nice first step! Does CKEditor 5 itself also work?

@bnjmnm in #2 I expanded the scope to + component instance forms. Back then, I didn't yet understand that the content entity form needs a very different treatment! 🫣

In HEAD, you literally can't get such a widget to show up in the component instance form. But with #3467959-51: SDC and code component props should be able to receive HTML, editable in formatted text fields+widgets, you can:

Would you prefer:

1. to narrow the scope here back to only the content entity form?
2. to tackle both here?

The choice is yours :)

Discussed #11 with @bnjmnm — let's first land this one, because it's so close!

This also blocks #3484395 — see #3484395-8: CKEditor 5 not loading on formatted text Field Widgets in the component instance form.

Changing issue queue component because this really only affects the Semi-Coupled Theme Engine ui/src/components/form/components/drupal/*.tsx!

To help get this over the line, I tested this MR manually.

The essentials work, but not everything:

1. the dialog to switch to a different text format renders incorrectly and is inaccessible:
2. not all CKEditor 5 toolbar buttons are accessible. Visible:

   

   Actual (screenshot of /admin/config/content/formats/manage/basic_html):
   

3. if I move the "image" button to the accessible part of the toolbar, it works:
   
4. if I add the media library functionality and move it to the accessible part of the toolbar, it almost works — styling looks off, and I cannot type an alternative text so I cannot actually upload new images into the media library:
   

@bnjmnm: Thoughts on which of these to tackle here vs deferring to follow-ups?

Progress! Let's get this in! 🚀

Opening a follow up for a few things spotted in posthumous review

Opened a new MR with the stuff I had in an in progress review that I finished off this morning after it had already been merged - should have finished it yesterday - sorry!

🙏 Could you review Lee’s additions here, Ben?

Yay! Most important next step: #3484395: CKEditor 5 not loading on formatted text Field Widgets in the component instance form.