Contrib.social

"Uncaught CKEditorError: e is null" when using caption and alternative text buttons on embedded image

Open on Drupal.org →
Created on 7 May 2024, about 1 year ago
Updated 8 May 2024, about 1 year ago

Problem/Motivation

When embedding an image with the media library and the CKEditor5, the "Toggle caption on" and "Override media image alternative text" do not work well together.
When I click the button for the caption first and then the one for the alternative text I get the following error:

Uncaught CKEditorError: e is null
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-e is null
    viewToDom https://core.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    v https://core.ddev.site/sites/default/files/js/js_2mrOWHSZx9O6jX7tO-KuQgnqayYo53nHym5P-BpEM2k.js?scope=footer&delta=2&language=en&theme=claro&include=eJyNU1FuwjAMvVBov3aATYKvSTsCcoNpLZw4Sxy0cfoltAEB0tSvPr_3bLmObcUr_mgG7g8xB-DO3pgNkz8lYyVi7yU6YLqgsQxR-pFlKI6kv8U0zp6lAFilM16TF7OXA26OpYKpqPkqfki0wgwhPZKQVay4wKhoAujUhIqNQ5_3mRq3hA8FkoJiMkdixdjIOTL2hAdSiW89lZ-Oviitl6as8XTowgSJ0irzpI63fiSPq-zkYFzndAXAO9Po5wHclTrEOn_QZ2VgsafvLIrPyvx-z1x6qRAgKe6iuK_jkexLmSQ5WtyWqO7JzLZXmKOudM0yrvpFW3bmo7a8yq0w8EtDk0S6lB0H_rw-waMa0ckZd_Os6h20Xis2qSSrzTeyxUZFeIDYL1-T033XKu6onFU9pX-ureU-1eowWQj4fnDkzUDjPlDAvoE_eoNwQA:54
ckeditor5-dll.js:5:597480

Nothing will happen for the user but the error will show up in the developer console each time that "Override media image alternative text" gets clicked. When you click "Toggle caption off" and click "Override media image alternative text" you will be able to set the alternative text.
This does not happen when I use the "Update image from computer" button and click the caption and alternative text buttons of that image.

Steps to reproduce

  1. Install media library and add "Drupal Media" button and "Embed Media" filter to text format.
  2. Create a new content that has a text field with that text format.
  3. Click the "Insert media" button of the Editor and select an image.
  4. Click "Toggle caption on".
  5. Click "Override media image alternative text".
  6. Open the developer console. The error will show up.
🐛 Bug report
Status

Active

Version

10.2 ✨

Component
Media  →

Last updated about 11 hours ago

Created by

🇩🇪Germany lmoeni

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @lmoeni
  • First commit to issue fork.
  • Comment about 1 year ago →
    🇺🇸United States braican Boston

    I'm unable to replicate this issue in a minimal Drupal 10.2.7-dev install (also tested with Drupal 10.4.0-dev). I'm not seeing any console errors when interacting with the "Toggle caption on" or "Override media image alternative text" after following the reproduction steps.

  • Comment about 1 year ago →
    🇩🇪Germany lmoeni

    I just checked it with 10.2.7-dev and I'm still getting the error. I'll expand and refine the steps.
    Not sure if it's relevant but I used the Claro backend theme.

  • Comment about 1 year ago →
    🇩🇪Germany lmoeni
  • Comment about 1 year ago →
    🇮🇳India arunkumark Coimbatore

    Confirming the issue and able to replicate the issue. Please find the screen capture.

  • Comment about 1 year ago →
    🇮🇳India sourav_paul Kolkata

    unable to replicate this issue by following the mentioned steps, in drupal 10.2.2.

    here I'm attaching image for reference

  • Comment about 1 year ago →
    🇬🇧United Kingdom aaron.ferris

    Can reproduce on 10.2.6 with the opening post reproduction steps, also using Claro as the admin theme.

  • Comment about 1 year ago →
    cilefen

    Can we get a stack trace with JavaScript aggregation disabled?

  • Comment about 1 year ago →
    🇬🇧United Kingdom aaron.ferris

    Added above.

  • Comment 11 months ago →
    🇳🇿New Zealand quietone

    Fixes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies. Also, 10.2 is in security mode now.

  • Comment 3 months ago →
    🇺🇸United States sean_fremouw

    I got very similar stack trace:

    Uncaught CKEditorError: Cannot read properties of null (reading 'is')
    at at.viewToDom (ckeditor5-dll.js?v=44.0.0:5:254805)
    at v (drupalMedia.js?ssmmkd:1:12453)
    at k._showForm (drupalMedia.js?ssmmkd:1:16293)
    at Q.<anonymous> (drupalMedia.js?ssmmkd:1:15098)
    at Q.fire (ckeditor5-dll.js?v=44.0.0:5:725118)
    at l.<anonymous> (ckeditor5-dll.js?v=44.0.0:5:541422)
    at Te.s (ckeditor5-dll.js?v=44.0.0:5:530769)
    at Te.fire (ckeditor5-dll.js?v=44.0.0:5:725118)
    at HTMLButtonElement.t (ckeditor5-dll.js?v=44.0.0:5:735357)
  • Comment 3 months ago →
    🇺🇸United States sean_fremouw

    After further exploration, for me at least, this occurs when I leave my cursor in the caption text box. If I leave the caption on but reselect the media item (so the border around the image and caption changes from yellow to blue) the alt text button works. It makes sense from a programmatic view point that this would happen since the alt text is a property of media item and not the caption. However, from a user perspective it just seems like the button isn't working. If there could be a message to the user that the media item needs to be in focus or, better yet, the functionality could determine the media object to which the caption belongs and act on it, that would be great.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024