fix[qwik-sdk]: ENG-6695 visual editor hangs if editable area (<Content />) is not in the iframe viewport (BuilderIO#3865)

## Description
The `CustomEvent` `"initeditingbldr"` was not triggering as expected by
ensuring proper event dispatch timing and listener registration. The
`useOnDocument("readystatechange")` handler was updated to dispatch the
event only after the DOM is fully loaded (`document.readyState ===
"complete"`)

**JIRA**:
https://builder-io.atlassian.net/browse/ENG-6695

**Loom**

https://www.loom.com/share/0ab5296adbe24bb2b22319f0588f0bbf?sid=4e4b4066-4b18-459e-bc62-7dae1e45c1f9

---------

Co-authored-by: Yash Wadhia <[email protected]>
Co-authored-by: Sami Jaber <[email protected]>

Author: 3 people

.changeset/nice-planets-roll.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-qwik": patch
+---
+
+Fix: Content editor hangs if not in the iframe viewport.

packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -18,7 +18,13 @@ import { ADD_A_TEXT_BLOCK } from '../specs/duplicated-content-using-nested-symbo
 import { EDITING_STYLES } from '../specs/editing-styles.js';
 import { ACCORDION_WITH_NO_DETAIL } from '../specs/accordion.js';
 
-const editorTests = ({ noTrustedHosts }: { noTrustedHosts: boolean }) => {
+const editorTests = ({
+  noTrustedHosts,
+  editorIsInViewPort,
+}: {
+  noTrustedHosts: boolean;
+  editorIsInViewPort?: boolean;
+}) => {
   test('correctly updates Text block', async ({ page, basePort, packageName, sdk }) => {
     test.skip(
       packageName === 'nextjs-sdk-next-app' ||
@@ -27,8 +33,16 @@ const editorTests = ({ noTrustedHosts }: { noTrustedHosts: boolean }) => {
         packageName === 'gen1-remix'
     );
 
+    if (!editorIsInViewPort) {
+      test.skip(sdk !== 'qwik', 'This is Qwik only test');
+    }
+
     await launchEmbedderAndWaitForSdk({
-      path: noTrustedHosts ? '/no-trusted-hosts' : '/editing',
+      path: noTrustedHosts
+        ? '/no-trusted-hosts'
+        : editorIsInViewPort
+          ? '/editing'
+          : '/editing-with-top-padding',
       basePort,
       page,
       sdk,
@@ -82,7 +96,7 @@ const editorTests = ({ noTrustedHosts }: { noTrustedHosts: boolean }) => {
 };
 
 test.describe('Visual Editing', () => {
-  editorTests({ noTrustedHosts: false });
+  editorTests({ noTrustedHosts: false, editorIsInViewPort: false });
   test('correctly updates Box -> Columns when used Inner Layout > Columns option', async ({
     page,
     packageName,

packages/sdks-tests/src/specs/index.ts

@@ -112,6 +112,7 @@ type Page = {
 export const PAGES: Record<string, Page> = {
   '/': { content: HOMEPAGE },
   '/editing': { content: HOMEPAGE, isGen1VisualEditingTest: true },
+  '/editing-with-top-padding': { content: HOMEPAGE, isGen1VisualEditingTest: true },
   '/api-version-v3': { content: CONTENT_WITHOUT_SYMBOLS },
   '/api-version-default': { content: CONTENT_WITHOUT_SYMBOLS },
   '/can-track-false': { content: HOMEPAGE },
@@ -410,6 +411,11 @@ export const getProps = async (args: {
         locale: 'hi-IN',
       };
       break;
+    case '/editing-with-top-padding':
+      extraProps = {
+        addTopPadding: true,
+      };
+      break;
     default:
       break;
   }

packages/sdks/e2e/qwik-city/src/routes/[...index]/index.tsx

@@ -61,6 +61,9 @@ export default component$(() => {
   const contentProps = useBuilderContentLoader();
   return (
     <>
+      {contentProps.value.addTopPadding && (
+        <div style={{ marginTop: '2000px' }} class="builder-margin-element" />
+      )}
       {contentProps.value ? (
         <Content
           {...(contentProps.value as any)}

packages/sdks/mitosis.config.cjs

@@ -1132,14 +1132,35 @@ module.exports = {
                   json.hooks.onEvent.push({
                     code: hook.code.replaceAll('elementRef', 'element'),
                     eventArgName: 'event',
-                    eventName: 'qvisible',
+                    eventName: 'readystatechange',
                     isRoot: true,
                     refName: 'element',
                     elementArgName: 'element',
                   });
                 });
               }
             },
+            post: (json) => {
+              if (json.name !== 'EnableEditor') return;
+              json.imports.push({
+                imports: { useOnDocument: 'useOnDocument' },
+                path: '@builder.io/qwik',
+              });
+              return json;
+            },
+          },
+          code: {
+            post: (code, json) => {
+              if (json.name === 'EnableEditor') {
+                code = code.replaceAll(
+                  `useOn(
+    "readystatechange"`,
+                  `useOnDocument(
+    "readystatechange"`
+                );
+              }
+              return code;
+            },
           },
         }),
       ],