search

codesandbox / codesandbox-client

An online IDE for rapid web development
https://codesandbox.io
Other
13.04k stars 2.27k forks source link

Sharing non-functional #8468

Open cefn opened 4 months ago

cefn commented 4 months ago

🐛 bug report

Description of the problem

Trying to follow the guide at https://codesandbox.io/docs/learn/sandboxes/embedding the Share button is non-functional. Choosing Unlisted or Public does nothing, and no control appears for the embeddable URL.

How has this issue affected you? What are you trying to accomplish?

It is impossible to embed a working sandbox in a Medium article.

To Reproduce

Log in as me to https://codesandbox.io/p/devbox/counter-react-js-9pywm9?file=%2Fsrc%2Fui.jsx%3A8%2C3 and attempt to make the sandbox public. The Unlisted and Public options appear to be available in the Share dropdown, but they do nothing. Reloading the page demonstrates that the sandbox remains in Draft mode regardless of interactions with this dropdown.

Link to sandbox: [link]() (optional)

https://codesandbox.io/p/devbox/counter-react-js-9pywm9?file=%2Fsrc%2Fui.jsx%3A8%2C3

Your Environment

Software Name/Version
Сodesandbox codesandbox.io
Browser Version 125.0.6422.114 (Official Build) (arm64)
Operating System Mac OS Ventura 13.5
cefn commented 4 months ago

Interestingly just as I finished writing this, (and minutes after loading the devbox) the UI transformed itself, extra buttons appeared, and the dropdown started behaving differently, limiting the opportunity to share and providing a meaningful interaction again.

Looks like something is blocking the completion of this loading state for minutes, and hence the transformation from the default interface to one that reflects the actual state of the devbox is so late that all the controls are improperly bound. Once the controls ARE properly bound the interaction makes sense, indicating correctly that I can't (yet) share this devbox.

image
cefn commented 4 months ago

Pressing Move Devbox had no obvious or immediate result, however, and doesn't change my ability to share it.

Eventually by experimentation I found that I could fork the sandbox, and then sharing was possible.

However, I never succeeded at being able to embed the app in Medium. The sandbox was always split between the editor and the app, making the embed impossible to use. Finally all embed operations stopped working and every attempt to paste an embed into Medium ended up staying as just a link and never turning into an embed.

Is using Codesandbox embedded in Medium a supported operation? The article I'm editing already has a load of previous sandboxes which work fine with a preview app in a frame. However, with the new interface and journeys I have spent an hour trying and now given up.

filipelima18 commented 3 months ago

Hi @cefn. While attempting to reproduce this on my end, I was able to successfully embed a preview-only (non-split) Sandbox in a Medium article.

image

Here are the steps I took:

  1. With my Sandbox opened, go to Share -> Embed.
  2. Customize the layout as needed (I chose "Preview").
  3. Click "Other sharing options" at the bottom left of the Embed modal -> copy the "Embed URL".
  4. Paste the URL in a Medium article, then press enter and it should display the embedded preview.

Let me know if this works for you.

cefn commented 3 months ago

You wrote:

  1. Customize the layout as needed (I chose "Preview").

Your screenshot is the outcome I need. If I knew the user interactions to influence the layout that might be the solution. Could you share them?

I am not offered any helpful choices as part of this journey. There is no choice between Preview or anything else as far as I can see during the journey.

By default it presents as junk (as you'd expect trying to cram too many panes into a tiny embed) and any interactions via the many drop downs and controls in the embed to try and control the panes (i.e. have a single pane fill the window) lead to things getting worse not better.

To be clear the interaction I hope for is a preview of the running application as the embed, with a click-through that will take the visitor to the full sandbox.

image
cefn commented 3 months ago

Related, here is an example of the behaviour if you click the wrong control when trying to control splitting behaviour (I think the control I pressed was 'split', but it was instantly replaced with this failure) (see sandbox failure link)

image
filipelima18 commented 3 months ago

Apologies for the confusion, but I originally thought you were referring to a Sandbox and not a Devbox. The embedding options are quite distinct between these two types of projects.

While the embeds for Sandboxes work out of the box and give you several customization options (as I've shown in my previous reply), Devbox embeds are still in beta, as stated in our Docs:

Notably, the embed viewer cannot make changes to the sandbox before forking it, so inline editing is not currently supported on these embeds. Additionally, Devbox embeds still lack some of the customization options that are available in legacy sandbox embeds.

One limitation of these beta embeds seems to be Medium's inability to automatically pick up the embed URL and transform it into an actual embed.

That said, it seems that we cannot currently offer the embedding experience you're looking for in Devboxes. If your project runs on a Sandbox, you can embed it that way instead.