Image Plugin in RTE does not update onclick events if folder in sitetree has changed

[mai-space]

Bug description I noticed that if I navigate to a different folder in image explorer, that the onclick event on an image does not lead to the edit modal of the image properties but does close the parent modal and does not insert the img tag into the rte.

Steps to reproduce To reproduce the problem:

1. Open the image plugin by pressing the image button
2. Navigate to a different folder in the sitetree but your current one
3. select an image

Expected behavior If I navigate to a different folder than on "startup" of the modal, it should just work fine.

My suggestion would be to listen to onclick events on the ".node" classes in the sitetree or use an mutation observer.

Screenshots or logs Code thats responsible for the error:

$(this).contents().find('[data-close]').on('click', function (e) {
            console.log("default add image function");
            e.stopImmediatePropagation();
            var selectedItems = [];
            selectedItems.push({
              uid: AddImage.elements['file_' + $(this).data('file-uid')].uid,
              table: AddImage.elements['file_' + $(this).data('file-uid')].table
            });
            console.log(selectedItems);
            AddImage.addedImage(selectedItems);
          });

Suggested Solutions:

const fileadminTree = $(this).contents().find('.svg-tree-wrapper svg');

            const observer = new MutationObserver((mutationList) => {
              for (const mutation of mutationList) {
                if (mutation.type === "childList") {
                  console.log("A child node has been added or removed.");
                  $(this).contents().find('[data-close]').on('click', function (e) {
                    console.log("currentModal.find data-close Callback");
                    e.stopImmediatePropagation();
                    var selectedItems = [];
                    selectedItems.push({
                      uid: AddImage.elements['file_' + $(this).data('file-uid')].uid,
                      table: AddImage.elements['file_' + $(this).data('file-uid')].table
                    });
                    console.log(selectedItems);
                    AddImage.addedImage(selectedItems);
                  });
                }
              }
            });

            const config = {attributes: false, childList: true, subtree: true};
            observer.observe(fileadminTree.get(0), config);

$(this).contents().find('.node').on('click', function (e) {
              console.log("You navigated to a new folder.");
              $(this).contents().find('[data-close]').on('click', function (e) {
                console.log("currentModal.find data-close Callback");
                e.stopImmediatePropagation();
                var selectedItems = [];
                selectedItems.push({
                  uid: AddImage.elements['file_' + $(this).data('file-uid')].uid,
                  table: AddImage.elements['file_' + $(this).data('file-uid')].table
                });
                console.log(selectedItems);
                AddImage.addedImage(selectedItems);
              });
            });

You may want to extract the function and use all of the above?

Environment

• TYPO3 version: 11.5
• PHP version: 81.
• Extension version: 11.0.11

Documentation Have you checked the readme/documentation?

• [x] Yes, but I couldn't find anything helpful

[mai-space]

@AndreasMueller75 What is your Release Policy? Would you recommend to wait for the next release, or is requiring the hash more feasable? Thank you :)