fix[gen2-sdks]: able to edit and preview when we have no content

[sidmohanty11]

Description

Jira
https://builder-io.atlassian.net/browse/PLAN-338

Fixes #3653

Screenshot
If relevant, add a screenshot or two of the changes you made.

[changeset-bot]

🦋 Changeset detected

Latest commit: 126eb81

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@builder.io/sdk-qwik	Patch
@builder.io/sdk-svelte	Patch
@builder.io/sdk-vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 126eb81. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx test @snippet/react-sdk-next-pages

✅ Successfully ran 38 targets

• nx test @e2e/nextjs-sdk-next-app
• nx test @e2e/qwik-city
• nx test @e2e/sveltekit
• nx test @e2e/react-native
• nx test @e2e/vue
• nx test @e2e/svelte
• nx test @e2e/react-sdk-next-pages
• nx test @e2e/nuxt
• nx test @e2e/react
• nx test @e2e/hydrogen
• nx test @e2e/angular-ssr
• nx test @e2e/react-sdk-next-app
• nx test @e2e/solid-start
• nx test @e2e/angular
• nx test @e2e/solid
• nx test @e2e/gen1-react
• nx test @e2e/remix
• nx test @snippet/angular-ssr
• nx test @snippet/react-native
• nx test @e2e/gen1-remix
• nx test @e2e/gen1-next
• nx test @snippet/angular
• nx test @snippet/gen1-next
• nx test @snippet/svelte
• nx test @snippet/nextjs-sdk-next-app
• nx test @snippet/solid
• nx test @snippet/hydrogen
• nx test @snippet/qwik-city
• nx test @snippet/nuxt
• nx test @snippet/sveltekit
• nx test @snippet/gen1-react
• nx test @snippet/vue
• nx test @snippet/react-sdk-next-app
• nx test @snippet/react
• nx test @builder.io/sdks
• nx test @snippet/gen1-remix
• nx typecheck @builder.io/sdks
• nx build @builder.io/sdk

---

Sent with 💌 from NxCloud.

[teleaziz]

should this be?

style={(isEditing() || isPreviewing() || props.builderContextSignal.value.content) 
 ? {} 
 : { display: 'none' }}

[samijaber]

because we have custom event listeners on the div ref that enable visual editing, we want to visually hide this wrapper div in editing/preview if content is empty, but still render it. if we don't hide it it might break customer layouts because it'll be an empty div with no content.

so:

• content exists: render div and display: undefined
• content does not exist but isEditing/isPreviewing: render div and display: 'none'
  • once inline editing kicks in, it will populate the content and re-render, so display style will be removed

your suggestion would display this div in the second case even if we never get content, which we want to avoid.

[samijaber]

having said all of that, this logic has a lot of booleans so it would be good to summarize the thought behind it in a comment @sidmohanty11

[sidmohanty11]

added, please take a look.