Cannot add media image when using quick-edit on a wysiwyg field

I got the same with Drupal 8.9.1, when I clicked in the CKEditor area to edit my content, the medias was disappeared

Uncaught TypeError: Cannot read property 'getAttribute' of null
    at c.upcast (plugin.js?t=qc484m:148)
    at Array.<anonymous> (<anonymous>:29:229)
    at iterator (<anonymous>:891:88)
    at CKEDITOR.htmlParser.element.forEach (<anonymous>:303:188)
    at CKEDITOR.htmlParser.element.forEach (<anonymous>:303:289)
    at b.<anonymous> (<anonymous>:904:453)
    at b.c (<anonymous>:10:70)
    at b.<anonymous> (<anonymous>:11:433)
    at b.CKEDITOR.editor.CKEDITOR.editor.fire (<anonymous>:13:97)
    at CKEDITOR.htmlDataProcessor.toHtml (<anonymous>:323:222)

The error related to the missing the attribute named "data-media-embed-host-entity-langcode":

var hostEntityLangcode = document.getElementById(editor.name).getAttribute('data-media-embed-host-entity-langcode');

This could use a test, at the very least. :)

I added a patch that checks the element exists before getting any attributes from it. I was then able to add images to WYSIWYG fields using quick edit without errors.

Verified and tested patch#5 on the drupal 8.9.x version. Patch applied successfully and one observation is there...

Testing Steps:

1. Install drupal 8.9.x umami site
2. Create Article Content type
3. View an article, and click on quick-edit on the top-right corner
4. Place the cursor anywhere in the body, and click on the add-media icon
5. Select the image from media_library
6. Click on "Insert Selected"
7. Observe that the selected image not added successfully and below error message displayed on the console

Uncaught TypeError: Cannot read property 'getAttribute' of null
    at c.upcast (plugin.js?t=qc484m:148)
    at Array.<anonymous> (<anonymous>:29:229)
    at iterator (<anonymous>:891:88)
    at CKEDITOR.htmlParser.element.forEach (<anonymous>:303:188)
    at CKEDITOR.htmlParser.element.forEach (<anonymous>:303:289)
    at b.<anonymous> (<anonymous>:904:453)
    at b.c (<anonymous>:10:70)
    at b.<anonymous> (<anonymous>:11:433)
    at b.CKEDITOR.editor.CKEDITOR.editor.fire (<anonymous>:13:97)
    at CKEDITOR.htmlDataProcessor.toHtml (<anonymous>:323:222)

8. Now apply given patch and again follow above steps and verify that user is able to upload media file without any error message on console.

Testing Results:
After applying the patch user is able to upload the selected image successfully and also below error not displayed on the console.

Uncaught TypeError: Cannot read property 'getAttribute' of null
    at c.upcast (plugin.js?t=qc484m:148)
    at Array.<anonymous> (<anonymous>:29:229)
    at iterator (<anonymous>:891:88)
    at CKEDITOR.htmlParser.element.forEach (<anonymous>:303:188)
    at CKEDITOR.htmlParser.element.forEach (<anonymous>:303:289)
    at b.<anonymous> (<anonymous>:904:453)
    at b.c (<anonymous>:10:70)
    at b.<anonymous> (<anonymous>:11:433)
    at b.CKEDITOR.editor.CKEDITOR.editor.fire (<anonymous>:13:97)
    at CKEDITOR.htmlDataProcessor.toHtml (<anonymous>:323:222

Observation:
The user is able to upload the image successfully but the below error displayed on the console.

Uncaught Error: Quick Edit could not associate the rendered entity field markup (with [data-quickedit-field-id="media/1/field_media_image/en/responsive_3x2"]) with the corresponding rendered entity markup: no parent DOM node found with [data-quickedit-entity-id="media/1"]. This is typically caused by the theme's template for this entity type forgetting to print the attributes.
    at processField (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:2170)
    at HTMLDivElement.<anonymous> (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:2287)
    at Function.each (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:2)
    at S.fn.init.each (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:2)
    at Object.attach (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:2286)
    at js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:59
    at Array.forEach (<anonymous>)
    at Object.Drupal.attachBehaviors (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:56)
    at renderField (js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:3233)
    at js_20uEPClt5OZerksYE0DzqtzDCVlOEqFOjxmu6S-NnB4.js:324

@manojithape - I was able to get rid of that error with additional preprocessing as explained in another issue's comment: https://www.drupal.org/project/drupal/issues/3101267#comment-13711587

@solantoast: Ok, Then we can move this ticket to RTBC by referring comments #6 and #7.

@manojithape, Patch #5, is failing the Drupal CI. Please don't make RTBC when a patch is failing Drupal CI.
Re-rolled patch #5. attached interdiff for the same.
Please review.

+1 I can confirm that patching the #9 version fixed the issue

Hi Community Members,

I have tested this issue on the 8.9.x-dev version (Umami Site)
Everything looks good to me and I don't see any errors in the console.

Testing Steps:
# Install drupal 8.9.x umami site
# Create Article Content type
# View an article and click on quick-edit on the top-right corner
# Place the cursor anywhere in the body and click on the add-media icon
# Select the image from media_library
# Click on "Insert Selected"

Here, Attaching the video and screenshots for the same which looks good to me.
Can be a move to +1 RTBC.

Applied patch #9 and media can be added via quick-edit after applying this patch.

Before patch:

After patch:

RTBC +1

Rerolled patch.

Fixed CS error.

#17 Patch applied successfully and media can be added via quick-edit after applying this patch.

For reference added Before Patch and After Patch Screenshots

#17 applied successfully.
Testing steps:

* Install new instance of drupal 9.4.
* Enable media and media library modules.
* Go to /admin/config/content/formats/manage/basic_html?destination=/admin/config/content/formats and drag the "Insert from Media Library" button into the CKEditor toolbar. Enable the "Embed media" filter, and click "Save configuration".
* Go to your artical click on quick edit.
* In body try to add media.

Problem:
Image is not added, and there's an error in the console

After Patch:
Problem Got resolve we can successfully add the media from quick edit.

SS for reference:

Before patch With error:

After Patch:

Test result Pass

Re-rolling patch for Drupal 10.
Confirming this same issue happens in Drupal 10.

Please review this

I will review the patch.

Resolve custom command

The patch #24 applied cleanly.
Tried the working/functionality refering steps in #20 and the functionality works absolutely fine.

Before applying the patch :
The image didn't add and showed an error in the console.

After applying the patch :
The image got applied and didn't show any error on the console.

Screenshot for before and after patch applied.

Moving to RTBC.

Thanks.

We still need tests for this change as @phenaproxima asked for in #4. Also 10.x javascript no longer has .es6.js files. Plus quickedit does not exist there (but it is in contrib).

Rerolled patch against 9.5.3.

Moving to the Quick Edit issue queue since the module has been removed from core.