fix: use file picker component directly

[elzody]

• Resolves: Smart picker not working for document sections #3957
• Target version: main

Summary

The previous implementation stopped working because the file picker's container prop expects a selector, but an element was passed instead. This PR fixes that, and uses the file picker component directly.

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Documentation (manuals or wiki) has been updated or is not required

[juliusknorr]

Could you also add a cypress test for that?

[juliusknorr]

@elzody took me quite a bit but found why this failed. On your local setup it likely worked because you had text enabled which dispatches an RenderReferenceEvent. This event is listened for to provide the list of providers. I left my commits with debugging attempts for you to follow along for now. Feel free to clean them up and get this merged.

After seeing that the initial state was empty if checked where in the server that was set. Then I locally set a breakpoint to see which event dispatching actually triggers the listener on my local setup. That was text, so disabling text showed the same beahavior as CI when running the cypress test.

[elzody]

@juliusknorr Thanks for the help, seems like it required some really deep debugging. I think I managed to clean up the nonsense debug commits, and it seems like everything passes now!

[juliusknorr]

@elzody Can you check if and how far we need to backport this one?

[elzody]

@juliusknorr Yep, only back to stable30. I already have a PR open for it: #4028

I just need to replicate what you added here and get it cleaned up