chore: fix copy paste issue in custom widget builder (#28925)

> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
> Add a TL;DR when description is extra long (helps content team)
>
> Please include a summary of the changes and which issue has been
fixed. Please also include relevant motivation
> and context. List any dependencies that are required for this change
>
> Links to Notion, Figma or any other documents that might be relevant
to the PR
>
>
#### PR fixes following issue(s)
Fixes # (issue number)
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

app/client/src/pages/WidgetBuilder/index.tsx

@@ -20,11 +20,9 @@ import { noop } from "lodash";
 import { Button } from "design-system";
 
 export default function WidgetBuilder() {
-  const [srcDoc, setSrcDoc] = useState({
+  const [html, setHTML] = useState("");
-    html: "",
+  const [css, setcss] = useState("");
-    css: "",
+  const [js, setjs] = useState("");
-    js: "",
-  });
 
   const [model, setModel] = useState({});
 
@@ -44,7 +42,9 @@ export default function WidgetBuilder() {
       if (event.source === window.opener) {
         switch (event.data.type) {
           case "BUILDER_READY_ACK":
-            setSrcDoc(event.data.srcDoc);
+            setHTML(event.data.srcDoc.html);
+            setcss(event.data.srcDoc.css);
+            setjs(event.data.srcDoc.js);
             setModel(event.data.model);
             setLoading(false);
             break;
@@ -70,12 +70,16 @@ export default function WidgetBuilder() {
     window.parent.postMessage(
       {
         type: "BUILDER_UPDATE",
-        srcDoc,
+        srcDoc: {
+          html,
+          css,
+          js,
+        },
       },
       "*",
     );
     window.close();
-  }, [srcDoc]);
+  }, [html, css, js]);
 
   const onCancel = useCallback(() => {
     window.parent.postMessage(
@@ -100,6 +104,18 @@ export default function WidgetBuilder() {
     });
   }, [loading]);
 
+  const htmlChange = useCallback((value: string) => {
+    setHTML(value);
+  }, []);
+
+  const cssChange = useCallback((value: string) => {
+    setcss(value);
+  }, []);
+
+  const jsChange = useCallback((value: string) => {
+    setjs(value);
+  }, []);
+
   if (loading) {
     return <div>Loading...</div>;
   } else {
@@ -132,10 +148,8 @@ export default function WidgetBuilder() {
                 height="130"
                 label="HTML"
                 mode="htmlmixed"
-                onChange={(value: string) =>
+                onChange={htmlChange}
-                  setSrcDoc({ ...srcDoc, html: value })
+                value={html}
-                }
-                value={srcDoc.html}
                 width="250"
               />
             </div>
@@ -144,10 +158,8 @@ export default function WidgetBuilder() {
                 height="130"
                 label="css"
                 mode="css"
-                onChange={(value: string) =>
+                onChange={cssChange}
-                  setSrcDoc({ ...srcDoc, css: value })
+                value={css}
-                }
-                value={srcDoc.css}
                 width="250"
               />
             </div>
@@ -159,10 +171,8 @@ export default function WidgetBuilder() {
                   height={jsEditorHeight}
                   label="JS"
                   mode={EditorModes.JAVASCRIPT}
-                  onChange={(value: string) =>
+                  onChange={jsChange}
-                    setSrcDoc({ ...srcDoc, js: value })
+                  value={js}
-                  }
-                  value={srcDoc.js}
                   width="250"
                 />
               }
@@ -172,7 +182,11 @@ export default function WidgetBuilder() {
                 execute={noop}
                 height={previewDimensions.height}
                 model={model}
-                srcDoc={srcDoc}
+                srcDoc={{
+                  html,
+                  css,
+                  js,
+                }}
                 update={noop}
                 width={previewDimensions.width}
               />