[drupalImage] When ckeditor5_arbitraryHtmlSupport is on, <img src> fails to update

Created on 23 August 2023, 10 months ago
Updated 27 June 2024, about 5 hours ago

Problem/Motivation

[CKEditor] Update image URL failed after saving

Steps to reproduce

1ใ€Create a node

2ใ€Add a CKEditor paragraph with text format without HTML filter enabled.

3ใ€Click "Insert image" button and input URL

4ใ€Save as Published

5ใ€Edit the page and Select the image

6ใ€Click "Insert image" button and Update URL

7ใ€Save the page

8ใ€Check the image

Image not changed

Proposed resolution

Modify the call of ReplaceImageSourceCommand in image.js and add an update to the htmlImgAttributes attribute

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

๐Ÿ› Bug report
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
CKEditor 5ย  โ†’

Last updated about 4 hours ago

Created by

๐Ÿ‡จ๐Ÿ‡ณChina randy Tang

Live updates comments and jobs are added and updated live.
  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @randy Tang
  • last update 10 months ago
    Patch Failed to Apply
  • Status changed to Needs work 10 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States cilefen

    Is this a bug in CKEditor itself?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States nsciacca Connecticut

    I can confirm this bug - I was just about to log it as well. It happens in both D9 & D10 with CKEditor5. I'm not sure where the fix needs to be... but it's the source that doesn't get updated. If you update the image and switch to view the source you'll see the old image url in the "src" attribute, so when you switch back it shows the original image.

  • I created a new patch for drupal 10.1.4, I agree with @nsciacca, this issue persisted in CKEditor 39.0.1

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

    You patched the minified CKEditor 5 JS ๐Ÿ˜…

    This will never get merged into Drupal. This must be fixed upstream. Sounds like you already know exactly what to do to fix this upstream though, so should be easy? ๐Ÿ˜Š

  • last update 9 months ago
    29,671 pass
  • last update 9 months ago
    30,410 pass
  • Status changed to Needs review 8 months ago
  • last update 8 months ago
    30,437 pass, 2 fail
  • last update 8 months ago
    30,431 pass, 3 fail
  • It seems to be a Drupal side issue after all.
    It's reproducible only when the text format has an HTML filter disabled (e.g. Full HTML default format).
    As far as I understand it has to do with the fact that without HTML filter htmlSupport.GeneralHtmlSupport plugin is enabled and when updating the image it doesn't properly update the image src in the model.

  • Status changed to Needs work 8 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Wow, excellent research, and especially: excellent test coverage!

    Test-only patch indeed fails locally:

    1) Drupal\Tests\ckeditor5\FunctionalJavascript\ImageUrlUpdateTest::testImageUrlUpdateWidget
    Failed asserting that '<img src="/core/misc/druplicon.png">' contains "/core/misc/help.png".
    

    Review

    The fix looks solid.

    The only complaint I have is about the organization of the test coverage, which causes unnecessary extra/duplicate test runs:

    1. +++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlUpdateTest.php
      @@ -0,0 +1,115 @@
      +class ImageUrlUpdateTest extends ImageTestBase {
      

      ๐Ÿ‘Ž This causes all of the inherited tests to run again, despite this being identical to \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageUrlTest.

    2. +++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlUpdateTest.php
      @@ -0,0 +1,115 @@
      +  public function testImageUrlUpdateWidget(): void {
      

      ๐Ÿ™ Please just add this test method to \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageUrlTest instead ๐Ÿ˜Š

  • last update 8 months ago
    30,418 pass, 2 fail
  • Status changed to Needs review 8 months ago
  • Moved the test to ImageUrlTest class and created MR!5124
    Test failures from patches seems random

  • Pipeline finished with Failed
    8 months ago
    Total: 590s
    #38304
  • Status changed to Needs work 8 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Test failure seems legit to issue.

  • Yes, these failures are legit.
    So something weird happens with \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageTestBase::testAlignment
    It fails if there are 2 text formats created in SetUp, even though the host uses the proper format.
    If you add sleep(1) before $page->pressButton('Save') test passes.
    Also, it fails if the host value is img or plain text (not wrapped in p)

    I had a similar issue when I was writing a new test, I was writing it in the ImageUrlTest class first and tried to save the form to assert that the new image was saved, and it was failing unless I added a sleep(1) call before clicking form submit.

    I've no idea why it happens. Seems like submitting works before ckeditor could update the hidden textarea. But why does it happen only when there are 2 text formats?
    I could move the test into a separate class that will not inherit ImageTestBase.

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

    I'll investigate. This probably needs one more "wait" for some specific thing ๐Ÿ˜ฌ

  • I decided to give this another try and found the issue.

    This can be reproduced even by bare hands by making the first change to CKEditor after the page reloads and instantly submitting.

    The reason why this happens only with 2 or more text formats lies in 2 places
    web/core/modules/editor/js/editor.js:332
    web/core/modules/editor/src/Element.php:117

    The editor is changing the hidden text area before submitting as it is supposed to, but the data attribute isn't changed if the form is submitted right after the change.
    The only place where data-editor-value-is-changed is set to false is Element.php with the condition that there is more than 1 format. With the single format that attribute is simply not set and the condition in js is false.

    So to fix the test it is enough to add something like waitForElement('css', '[data-editor-value-is-changed="true"]');

    But should we create a follow-up to this and fix it, so that there is no way to submit without change applied?

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

    If there is a separate issue, may need to open a follow up bug report ticket to address that. And postpone this ticket on that one.

  • Postponed by https://www.drupal.org/project/drupal/issues/3396742 ๐Ÿ› CKEditor5 doens't save updated value if form submitted right after the change Active

  • Status changed to Postponed 8 months ago
  • Pipeline finished with Failed
    4 months ago
    Total: 488s
    #118863
  • Pipeline finished with Success
    4 months ago
    Total: 581s
    #119019
  • Status changed to Needs review 4 months ago
  • Reviving this since https://www.drupal.org/project/drupal/issues/3396742 ๐Ÿ› CKEditor5 doens't save updated value if form submitted right after the change Active was merged.
    I made some changes to the test due to the CKEditor version update.

  • Status changed to Needs work 3 months ago
  • The Needs Review Queue Bot โ†’ tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide โ†’ to find step-by-step guides for working with issues.

  • Status changed to Needs review 3 months ago
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance nod_ Lille

    testbot is having issues

  • Issue was unassigned.
  • Status changed to Needs work 3 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Looking good, but I think the tests can be simplified slightly. Once those simplifications are in, I think this can be RTBC ๐Ÿ‘

  • Create a patch for Drupal 10.2.3.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States nsciacca Connecticut

    Patch in #23 works for me, 10.2.2

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

    This should apply for Drupal 10.3.0

Production build 0.69.0 2024