Text area field content not accessible on certain translations when "embed media" enabled in formatter using CKEditor5

Created on 10 July 2023, 12 months ago
Updated 13 February 2024, 5 months ago

Problem/Motivation

For certain translations, a text area field using the CKEditor5 plugin becomes inaccessible to the user (they can't access it on the WYSIWYG or Source). It also generates an error in the browser Console:

Uncaught TypeError: Cannot read properties of null (reading 'length')

(Other errors may be seen too).

To the user, this looks like:

Steps to reproduce

Create a new 10.1.1 instance (I used simplytest.me)
Install Content Translation, Language, Media, and Media Library modules.
Enable French and Spanish languages
Enable Content Translation for Basic Page
Create a Basic Page, add translations for all enabled languages using Full HTML for your body field
Edit all of them and things should work as normal
Configure the Full HTML text format and check the "Embed media" checkbox
In the Embed media filter settings, select document and image boxes and click the "Media library" checkbox
Try editing the translations...one MAY not be working (for me it was Spanish - it could have something to do with my HTML content). If you would like to DM me for the content I used, please feel free.

Proposed resolution

TBD

Remaining tasks

TBD

User interface changes

TBD

API changes

TBD

Data model changes

TBD

Release notes snippet

TBD

๐Ÿ› Bug report
Status

Closed: duplicate

Version

11.0 ๐Ÿ”ฅ

Component
CKEditor 5ย  โ†’

Last updated about 14 hours ago

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States andileco

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Comments & Activities

  • Issue created by @andileco
  • Status changed to Postponed: needs info 12 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Thanks for the detailed report! ๐Ÿ™๐Ÿ‘

    This needs a failing functional JS test to reproduce this problem.

    One important question: can you also reproduce this without using translations? Asking because I really don't understand yet how translations can be a crucial part in reproducing thisโ€ฆ ๐Ÿ˜…

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States andileco

    I will try playing with the content. My guess is that maybe there's a special character in the Spanish translation, maybe even in the attribute of a media tag.

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    I'd be shocked if that turns out to be the root cause! ๐Ÿ˜… Unicode shouldn't be a problem ๐Ÿ˜Š But โ€ฆ yeah โ€ฆ maybe we're using some str*() function that should be mb_str*()? ๐Ÿค”

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States andileco

    OK, it was the content, but it was unknown HTML tags (in the Spanish translation, it had <h3procesos></h3procesos> and <pla></pla> (the content was very long, so not easy to spot, especially because it didn't show any errors on the front-end). Not sure exactly what the relationship between this and "Embed media" options is, but I'm inclined to move this ticket to "Closed (works as designed)".

  • Status changed to Closed: duplicate 5 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    +1 โ€” and this seems to be a duplicate of ๐Ÿ› [upstream] [GHS] CKEditor 5 does not retain custom HTML tags that are not defined by CKEditor 5 plugins whenever /.*/ is not allowed (e.g. when filter_html is enabled) Postponed given that apparently custom tags are being used.

Production build 0.69.0 2024