Insert focuses incorrectly when the page is loaded

Created on 26 September 2024, about 2 months ago

Problem/Motivation

I have a button to allow inserting media into the body field (Text area with summary) in a content type. When the page loads and I try to add it, it is not added correctly. The tag is added in the textarea of the summary field and not in the textarea of the body field.

This happens in version Drupal 10.3.5, module insert 3.0.0 and CKEditor5.

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

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

Comments & Activities

  • Issue created by @crisgc
  • Thanks for filing the issue. I'm not instantly sure what could be the cause as I am struggling to reproduce the problem.

    What appears to be happening in your case is that either the CKEditor instances are generally not detected by the Insert module, or the focus handlers attached to the editor instances by the Insert module are either not attached properly, or not working as they should.

    To get a better idea, maybe you could answer some of the following questions:

    • What browser are you using, or is the issue independent of the browser anyway?
    • Does the issue also appear without first focussing the body editor, so directly clicking "Insert" after the page has loaded without focussing any textarea or editor? (The expected result would be the content being inserted into the body editor as Insert is supposed to pick the first CKEditor instance on the page.)
    • Initialising the CKEditor instances relies on the global Drupal.CKEditor5Instances being defined and populated with the CKEditor instances present on the page. This global is maintained by Drupal core's CKEditor 5 module. So maybe you could check if Drupal.CKEditor5Instances is actually defined in your case checking in the browser's dev tools?

    For reference, the relevant lines of code where the issue could surface are here and here.

  • Hi @snater,

    I'm responding to your questions:

    The problem is independent of the browser. I have tested it in Chrome and Firefox, and the same issue occurs.

    It seems that Drupal.CKEditor5Instances is not loading correctly. When debugging, I see that upon loading the page, insert.js is called, and in FocusManager.js, firstEditorElement is null, so it selects the textarea from the summary.

    When clicking the media insert button, it is already predefined to add the media in the summary field, whether or not the focus is on the body field.

  • Thanks for checking.

    After some more trying, I can see a circumstance that could be related to your problem: Inserting Drupal Media content will work only when the "Embed media" filter is enabled in the configuration of the text format being used. Maybe this is the missing piece.
    However, the behaviour I can reproduce is different to yours in the way that when the filter is not activated, the media content is still inserted into the body editor, the content is just not visibly rendered. So for me, the content does not end up in the summary text area instead.

    I'm a bit puzzled why Drupal.CKEditor5Instances would not be set, even after the whole page has loaded, as far as I understand that is the case. That global should be provided by core's ckeditor5 module, while the CSS class to detect the first editor element is assigned directly by CKEditor itself.

  • It seems that the problem is that the insert.ExtendAllowedHtml plugin is not being executed due to the condition of the ckeditor_image plugin. I created a patch in the Insert Media submodule with the condition of the media_media plugin, and this resolves the issue.

  • Thanks for the patch. When applying the patch, there is a duplicate Insert plugin with a missing icon in the CKEditor text format configuration as per the attached screenshot, because the patch is registering a second CKEditor plugin.

    To investigate more and try out the patch, I have set up a fresh Drupal installation with version 10.3.5, running no other third-party module than the Insert module, and then installing the Insert Media submodule. For me, inserting media content into the body editor works without the patch, just as soon as I turn on the "Embed media" filter on the text format. No other action, I do not even need to enable the Insert CKEditor plugin, because the "Embed media" filter is probably already allowing all necessary tags.

    The Insert CKEditor module is just enabling specific tags and attributes to be used in the CKEditor. But what happens to you is that the CKEditor instances are not detected at all. If the Insert CKEditor plugin not being loaded would be the source of the problem, the expected behaviour would be that the media content is still tried to be inserted into the body editor, but it would not be rendered there, so it would appear as if nothing happens when clicking the Insert button. However, what happens in your case is that the CKEditor instance (the body editor) is not even detected, and the content is inserted into the summary textarea instead.

    One thing I can think of being the problem is that there is a conflict with another module. This conflict might just get resolved as a side-effect of your patch. Yet the patch does not seem to be fixing the original issue, unfortunately. Maybe you could let me know which other modules you have installed (particularly third-party modules), then I could try to figure out reproducing the issue having one of those modules installed.

  • Closing this issue after four weeks of inactivity. Feel free to reopen if there is additional input.

Production build 0.71.5 2024