Can't Insert images into textareas after Drupal 10 upgrade

Possibly related? ✨ Separate Ckeditor 4 in a submodule Fixed

Hmm... even if I attach CKEditor to my Full HTML text format for the field, I get those two errors.

It seems like Insert module's CKEditor.js is assuming something's there that's not.

Thanks for submitting the issue. I am able to reproduce the problem when there is no CKEditor instance in the form. It does not look like something introduced recently. I have attached a patch that should fix the issue, though it would be nice to test the patch a bit more before merging. Along with fixing the error, I also added the behaviour to automatically pick the first text area for inserting if no text area had been focused yet, just like it works for CKEditor instances. That functionality was just also missing, so it seems the case there being only text areas, but no CKEditor instances in the form was just not covered so far.

Optimised the patch. The global CKEDITOR variable is still supposed to be there even though there are no instances. That is why the editors/CKEditor.check() function returns true detecting CKEDITOR. However, CKEDITOR.currentInstance is not set, which is what to detect has been missing in the Insert module code so far. If that has worked before Drupal version 10, maybe the CKEditor contributed module has a different way of setting CKEDITOR.currentInstance. Anyways, the patch fixes that.

We have tried both of the patches without any success. The system is Drupal 10, CKEditor 5, insert 3.0,0 Beta 2. After upgrading to Drupal 10 we cannot use insert as usual. The widget uses styles combined with Colorbox but I doubt that this is might be an issue.

@joro78: Unfortunately, the Insert module is not compatible to CKEditor 5 at the time of writing. Please check #3314446 📌 CKEditor 5 compatibility Active for more information.

Fixed in 8.x-2.1 → and 3.0.0-beta3 → .

I still cannot insert images in Filtered HTML fields with 3.0.0-beta3 and Drupal 10.2.

@sd123: This issue is about inserting images in textareas. If you are using textareas, please reopen the issue and provide the steps to reproduce the issue. If you are not using textareas, but CKEditor instances, please note the Insert module is not yet compatible to CKEditor 5. If you are using CKEditor 4, please create a separate issue. If you are using CKEditor 5, please refer to issue #3314446 📌 CKEditor 5 compatibility Active . Thanks.

Insert still does not work here in a text area that is of the type "Full HTML" or "Filtered HTML" in Drupal 10.2.1.

Hello
Insert does not work in textbox with Drupal 10.2.1.
many many errors
Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at big_pipe.js?v=10.2.1:148:10
at big_pipe.js?v=10.2.1:179:3
drupal.js?v=10.2.1:64 Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at HTMLDivElement. (ajax.js?v=10.2.1:1387:20)
at Function.each (jquery.min.js?v=3.7.1:2:3129)
at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
at Drupal.AjaxCommands.insert (ajax.js?v=10.2.1:1385:21)
at ajaxCall.commands.insert (content_lock_form.js?s7mkhp:42:44)
at ajax.js?v=10.2.1:1046:41
drupal.js?v=10.2.1:64 Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at HTMLAnchorElement. (ajax.js?v=10.2.1:1387:20)
at Function.each (jquery.min.js?v=3.7.1:2:3129)
at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
at Drupal.AjaxCommands.insert (ajax.js?v=10.2.1:1385:21)
at ajaxCall.commands.insert (content_lock_form.js?s7mkhp:42:44)
at ajax.js?v=10.2.1:1046:41
drupal.js?v=10.2.1:64 Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at HTMLUListElement. (ajax.js?v=10.2.1:1387:20)
at Function.each (jquery.min.js?v=3.7.1:2:3129)
at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
at Drupal.AjaxCommands.insert (ajax.js?v=10.2.1:1385:21)
at ajax.js?v=10.2.1:1046:41
drupal.js?v=10.2.1:64 Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at HTMLAnchorElement. (ajax.js?v=10.2.1:1387:20)
at Function.each (jquery.min.js?v=3.7.1:2:3129)
at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
at Drupal.AjaxCommands.insert (ajax.js?v=10.2.1:1385:21)
at ajax.js?v=10.2.1:1046:41
drupal.js?v=10.2.1:64 Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at HTMLUListElement. (ajax.js?v=10.2.1:1387:20)
at Function.each (jquery.min.js?v=3.7.1:2:3129)
at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
at Drupal.AjaxCommands.insert (ajax.js?v=10.2.1:1385:21)
at ajax.js?v=10.2.1:1046:41
drupal.js?v=10.2.1:64 Uncaught TypeError: Cannot read properties of undefined (reading 'getInstances')
at Drupal.behaviors.insert.attach (insert.js?v=2.x:61:28)
at drupal.js?v=10.2.1:166:24
at Array.forEach ()
at Drupal.attachBehaviors (drupal.js?v=10.2.1:162:34)
at drupal.init.js?v=10.2.1:32:12
at HTMLDocument.listener (drupal.init.js?v=10.2.1:20:7)

Thanks for the stack trace. I can see there might be a problem in the code. I attached a patch potentially fixing the problem. It would be great, if you could try out the patch. If it does not work, it would be good to have the steps to reproduce the error starting with a fresh and clean Drupal installation. For whatever reason, the Insert module works for me on plain text areas in Drupal 10. But there is no CKEditor instance supposed to be anywhere on the page.

It is still not working as how it should with this patch but already a little bit better.

Without this patch the following happens when I create a new node and try to insert a new image by clicking on the 'Insert' button: the 'Browse...' buttons and "No files selected." areas from the other optional image fields grey out for about a second but nothing is inserted.

With this patch: inserting works for a new page with a fresh image, but after previewing or saving the page, inserting the image stops working again and the same behaviour happens with the "No files selected." areas being greyed out for about a second.

Maybe this can help to debug the issue, when I open an existing patch on my patched site (patch #16), I am getting the following in my server logs:

jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: 1706694458|php|213.219.159.253|https://test.example.org/node/1031/edit|https://test.example.org/node/1031/edit|183||Warning: Undefined array key "width" in template_preprocess_responsive_image() (line 209 of /var/www/MYWEBSITE/web/core/modules/responsive_image/responsive_image.module) #0 /var/www/MYWEBSITE/web/core/includes/bootstrap.inc(164): _drupal_error_handler_real()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #1 /var/www/MYWEBSITE/web/core/modules/responsive_image/responsive_image.module(209): _drupal_error_handler()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #2 /var/www/MYWEBSITE/web/modules/contrib/insert/modules/insert_responsive_image/insert_responsive_image.module(69): template_preprocess_responsive_image()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #3 [internal function]: insert_responsive_image_insert_variables()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #4 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(409): call_user_func_array()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #5 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(388): Drupal\Core\Extension\ModuleHandler->Drupal\Core\Extension\{closure}()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #6 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(408): Drupal\Core\Extension\ModuleHandler->invokeAllWith()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #7 /var/www/MYWEBSITE/web/modules/contrib/insert/insert.module(208): Drupal\Core\Extension\ModuleHandler->invokeAll()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #8 [internal function]: _insert_field_process()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #9 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1013): call_user_func_array()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #10 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1076): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #11 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1076): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #12 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1076): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #13 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(579): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #14 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(325): Drupal\Core\Form\FormBuilder->processForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #15 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Controller/FormController.php(73): Drupal\Core\Form\FormBuilder->buildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #16 [internal function]: Drupal\Core\Controller\FormController->getContentResult()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #17 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #18 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Render/Renderer.php(627): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #19 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(121): Drupal\Core\Render\Renderer->executeInRenderContext()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #20 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #21 /var/www/MYWEBSITE/vendor/symfony/http-kernel/HttpKernel.php(181): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #22 /var/www/MYWEBSITE/vendor/symfony/http-kernel/HttpKernel.php(76): Symfony\Component\HttpKernel\HttpKernel->handleRaw()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #23 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/Session.php(58): Symfony\Component\HttpKernel\HttpKernel->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #24 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\Core\StackMiddleware\Session->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #25 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/ContentLength.php(28): Drupal\Core\StackMiddleware\KernelPreHandle->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #26 /var/www/MYWEBSITE/web/core/modules/big_pipe/src/StackMiddleware/ContentLength.php(32): Drupal\Core\StackMiddleware\ContentLength->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #27 /var/www/MYWEBSITE/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(106): Drupal\big_pipe\StackMiddleware\ContentLength->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #28 /var/www/MYWEBSITE/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(85): Drupal\page_cache\StackMiddleware\PageCache->pass()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #29 /var/www/MYWEBSITE/web/core/modules/ban/src/BanMiddleware.php(50): Drupal\page_cache\StackMiddleware\PageCache->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #30 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Drupal\ban\BanMiddleware->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #31 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #32 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/AjaxPageState.php(36): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #33 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\Core\StackMiddleware\AjaxPageState->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #34 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/DrupalKernel.php(704): Drupal\Core\StackMiddleware\StackedHttpKernel->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #35 /var/www/MYWEBSITE/web/index.php(19): Drupal\Core\DrupalKernel->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #36 {main}.
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: 1706694458|php|213.219.159.253|https://test.example.org/node/1031/edit|https://test.example.org/node/1031/edit|183||Warning: Undefined array key "height" in template_preprocess_responsive_image() (line 210 of /var/www/MYWEBSITE/web/core/modules/responsive_image/responsive_image.module) #0 /var/www/MYWEBSITE/web/core/includes/bootstrap.inc(164): _drupal_error_handler_real()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #1 /var/www/MYWEBSITE/web/core/modules/responsive_image/responsive_image.module(210): _drupal_error_handler()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #2 /var/www/MYWEBSITE/web/modules/contrib/insert/modules/insert_responsive_image/insert_responsive_image.module(69): template_preprocess_responsive_image()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #3 [internal function]: insert_responsive_image_insert_variables()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #4 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(409): call_user_func_array()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #5 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(388): Drupal\Core\Extension\ModuleHandler->Drupal\Core\Extension\{closure}()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #6 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(408): Drupal\Core\Extension\ModuleHandler->invokeAllWith()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #7 /var/www/MYWEBSITE/web/modules/contrib/insert/insert.module(208): Drupal\Core\Extension\ModuleHandler->invokeAll()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #8 [internal function]: _insert_field_process()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #9 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1013): call_user_func_array()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #10 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1076): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #11 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1076): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #12 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(1076): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #13 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(579): Drupal\Core\Form\FormBuilder->doBuildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #14 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Form/FormBuilder.php(325): Drupal\Core\Form\FormBuilder->processForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #15 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Controller/FormController.php(73): Drupal\Core\Form\FormBuilder->buildForm()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #16 [internal function]: Drupal\Core\Controller\FormController->getContentResult()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #17 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #18 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/Render/Renderer.php(627): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #19 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(121): Drupal\Core\Render\Renderer->executeInRenderContext()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #20 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #21 /var/www/MYWEBSITE/vendor/symfony/http-kernel/HttpKernel.php(181): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #22 /var/www/MYWEBSITE/vendor/symfony/http-kernel/HttpKernel.php(76): Symfony\Component\HttpKernel\HttpKernel->handleRaw()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #23 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/Session.php(58): Symfony\Component\HttpKernel\HttpKernel->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #24 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\Core\StackMiddleware\Session->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #25 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/ContentLength.php(28): Drupal\Core\StackMiddleware\KernelPreHandle->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #26 /var/www/MYWEBSITE/web/core/modules/big_pipe/src/StackMiddleware/ContentLength.php(32): Drupal\Core\StackMiddleware\ContentLength->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #27 /var/www/MYWEBSITE/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(106): Drupal\big_pipe\StackMiddleware\ContentLength->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #28 /var/www/MYWEBSITE/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(85): Drupal\page_cache\StackMiddleware\PageCache->pass()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #29 /var/www/MYWEBSITE/web/core/modules/ban/src/BanMiddleware.php(50): Drupal\page_cache\StackMiddleware\PageCache->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #30 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Drupal\ban\BanMiddleware->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #31 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #32 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/AjaxPageState.php(36): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #33 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\Core\StackMiddleware\AjaxPageState->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #34 /var/www/MYWEBSITE/web/core/lib/Drupal/Core/DrupalKernel.php(704): Drupal\Core\StackMiddleware\StackedHttpKernel->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #35 /var/www/MYWEBSITE/web/index.php(19): Drupal\Core\DrupalKernel->handle()
jan 31 10:47:38 myserver drupal-MYWEBSITE[3523015]: #36 {main}.

Ok, I can see you are using the responsive_image module. I can see the warnings in the log when I activate insert_responsive_image. That said, I have no issue using the Insert module with the a textarea as well as responsive_image and insert_responsive_image being enabled. I can upload images and insert images, also after saving the node and editing again. Please provide exact steps to reproduce the error, ideally starting with a clean and fresh Drupal installation as I need information on the setup. Otherwise, I am unable to help. The insert_responsive_image module is very experimental, does the problem also occur when not using insert_reponsive_image?

I have attached a new patch set that should fix the log warnings, it also contains the contents of the previous patch, yet I unfortunately do not expect it to solve the issue you are experiencing.

It indeed removed the warning but the issue is still there. One a new page I can insert an image.

The code then looks like this:
<img src="/sites/default/files/2024-02/image-test.jpg" width="648" height="365" class="image-insert__auto" data-insert-type="image" data-entity-type="file" data-entity-uuid="insert-auto-ca25496e-a969-435e-8b55-4be11b57f20e" data-insert-attach="{&quot;id&quot;:&quot;ca25496e-a969-435e-8b55-4be11b57f20e&quot;,&quot;attributes&quot;:{&quot;data-caption&quot;:[&quot;title&quot;]}}">

Note that it does not copy the selected alignment setting (I tried to align right in this example).

When I do page preview the image is showing well.

When I go back, the insert button stopped working. I cannot insert any image (I have other image fields), nor the inserted image settings can be updated (cfr. alignment setting).

I thus can only insert an image on a new page only and alignment settings aren't copied.

Just wanted to confirm the beta3 version did not fix the CKEDITOR bug when it's not enabled, but I will hopefully have time to test your latest patch soon as well—hopefully that'll fix it!

I've tested patch-insert-3402009-responsive_image_dimensions.patch on Drupal 10.1.9-dev version by following the shared steps, I was able to reproduce the issue, and after applying this patch the console errors are resolved (except one ckeditor) but while clicking insert- it still the same doesn't seem to do anything. Attaching before & after console results-

I am also getting the Uncaught ReferenceError "CKEDITOR is not defined". I do not have a separate ckeditor.js file though as I am using JavaScript aggregation and AdvAgg Bundler

Good morning
The insert button does nothing
Ckeditor 4 no longer exists in Drupal 10.2.2
In the edition I have these errors:
CKEditor.js?v=2.x:31 Uncaught ReferenceError: CKEDITOR is not defined
on CKEditor.js?v=2.x:31:26
on CKEditor.js?v=2.x:180:5
on CKEditor.js?v=2.x:184:3
What should CKEDITOR.js do?

I can also add a check on that line (which I did in the attached patch set), but without steps to reproduce, it's difficult to fix the issue. However, I guess the next step would be to just cut off the Insert module's CKEditor interface as it's obsolete anyway. After all, basically everything needs to be reimplemented if it's supposed to be usable with CKEditor 5 eventually.

ok, did some further testing. It turns out Insert works again when I disable the option to Aggregate JavaScript files. It looks that on my end AdvAgg is the culprit.

Hope this gets fixed though as without AdvAgg, I will have to drastically raise DDos limits in nginx. I am using Quicklink as well and in combination with unaggregated small JavaScript files, my connection limits are reached too fast.

If I have aggregate CSS and JS enabled (I don't use AdvAgg on my site, however), then I get:

If I turn off aggregate CSS and JS in Performance settings, and flush all caches, and then go back to a node form with a textarea (no editor attached), and try again, I get the same errors as above.

Confirmed I have the patched code in the codebase, I am using composer patches to apply:

    "extra": {
        "patches": {
            "drupal/insert": {
                "Fix image insert in Drupal 10": "https://www.drupal.org/files/issues/2024-02-13/insert-3402009-handle_no_CKEditor_instance_3.patch"
            }
        }
    }

Then running composer update.

Thanks for the information. However, I will focus on making a proper release as per #3314446 📌 CKEditor 5 compatibility Active instead of putting more time into this specific issue. I think that makes most sense. Once done, I will create another 3.0.0 beta release which should also sort out this issue. Not sure this will be a matter of next week already, but it should not be away a lot further than that.

Thanks for the update, and for making some progress on the module's Drupal 10 compatibility!

I've done a bit of digging into this today, no solution yet, but what I did find is:

One issue I see is that Drupal.insert.Inserter() gets called 2x in insert.js. The 2nd time it is called with what is essentially and empty `insertContainer`. And the code in the constructor errors out because it can't find the button element in the container because the container is empty.

I worked around that with some hacks just to see if that solved it. That brings up another error though. When you press the Insert button there is a fatal JS error and it causes the page to reload.

The class 'insert-template' isn't getting added to the element, but the JS is looking for it. This is what I see in the page source using Claro theme:

<input data-drupal-selector="edit-field-blog-post-images-selection-0-insert-templates-full" type="hidden" name="template[full]" value="&lt;drupal-media data-entity-type=&quot;media&quot; data-view-mode=&quot;full&quot; data-entity-uuid=&quot;701ec770-c75b-410e-aa60-a5eba282c996&quot;&gt;&lt;/drupal-media&gt;"/>

But it looks like in the JS it's looking for `input.insert-template` and can't find it.

.querySelector('input.insert-template[name$="[' + style + ']"]').value;

I'm not sure why the class isn't present as it's added in the PHP:

      $insertElement['insert']['insert_templates'][$styleName] = [
        '#type' => 'hidden',
        '#value' => _insert_render($styleName, $vars),
        '#id' => $vars['id'] . '-insert-template-' . str_replace('_', '-', $styleName),
        '#name' => $element['#name'] . '[insert_template][' . $styleName . ']',
        '#attributes' => ['class' => ['insert-template']],
      ];

And that's as far as I'm going to get today. :)

My issue ended up being related to the insert_media module. See 🐛 Insert Media sub-module missing .insert-template class on added elements Needs review

Closing this issue as it should be fixed in the more recent beta versions. Feel free to reopen or create a new issue if the problem still exists in the most recent beta.

Automatically closed - issue fixed for 2 weeks with no activity.