Preview component when selecting in left sidebar

Let's research how we could generate an accurate preview for components automatically.

Ever since ✨ Allow specifying default props values when opting an SDC in for XB Fixed , we are guaranteed to have default values for every SDC prop.

Which means accurate previews are as trivial as rendering the component with those default values.

Which means the only thing that's missing is:

• making that markup available as part of the "components lists" response → already the case ever since 📌 Add component instance edit form to contextual panel RTBC :
  

  …
          // A pre-rendered version of the component is provided so no requests
          // are needed when adding it to the layout.
          'default_markup' => (string) $this->prepareRenderArray($component_plugin->getPluginId())['markup'],
  …
  

• also loading the associated CSS/JS — issue for that: 📌 Load assets inside preview Active

IOW: AFAICT this can be worked on right now, I don't see what research is still needed? This component preview would simply be yet another <iframe>?

Even better 🤩

AFAICT no back-end work is necessary here. To clarify #2:

• Loading a preview without CSS/JS — has been possible for weeks now.
• Loading a preview with CSS/JS — will become possible once 📌 Load assets inside preview Active lands, and it's on the verge of landing!
• ⇒ generating a full preview of a single SDC is as simple as sending a subset of the client-side layout+model to \Drupal\experience_builder\Controller\SdcController::preview()

😄

Since only front-end work remains, making 🌱 [META] Early phase front-end work coordination Active the parent 🚀

📌 Load assets inside preview Active is in now, so now it's definitely actionable.

Also finally updating the issue title, per:

This component preview would simply be yet another <iframe>, with user-select: none; to disallow interaction, rather than an image? 🤔

Draft is pushed and in progress
I temporarily changed the styles of some sdcs so I could distinguish their background from the preview container background

This already largely works, but I'm still refining the logic that determines how to scale the iframe contents so we can see the entire SDC without necessarily having to create a same-sized preview

Can you add a GIF showing the current state? 🙏 That gives the 4 people following this issue already a sense of where this is at 😊

This is the current state. Components temporarily have loud BG colors to distinguish the component from BG

🤩

The MR now works but still

• Needs Tests
• Cleanup leftover code from an approach I dropped in favor of something faster & simpler

I got FE and BE signoffs, so here's yalls previews.
Committed.

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