chore: fix blueprint operation inconsistency for zone (#36980)

In anvil, when widgets are dropped on canvas, we create a zone which has
`visual separation` marked as true by default.
Now, There is a usecase for the chat widget in which we want to modify
the zone`s `Visual separation` to false on creation of zone.

The code for bleuprint operation for chat widget would like this:

```js
blueprint: {
    operations: [
      {
        type: BlueprintOperationTypes.MODIFY_PROPS,
        fn: (
          widget: FlattenedWidgetProps,
          widgets: CanvasWidgetsReduxState,
          parent: FlattenedWidgetProps,
          layoutSystemType: LayoutSystemTypes,
        ) => {
          if (layoutSystemType !== LayoutSystemTypes.ANVIL) return [];

          const updates: UpdatePropertyArgs[] = [];
          const parentId = widget.parentId;

          if (!parentId) return updates;

          const parentWidget = widgets[parentId];

          // we want to proceed only if the parent is a zone widget and has no children
          if (
            parentWidget.children?.length === 0 &&
            parentWidget.type === "ZONE_WIDGET"
          ) {
            updates.push({
              widgetId: parentId,
              propertyName: "elevatedBackground",
              propertyValue: false,
            });
          }

          return updates;
        },
      },
    ],
  },
  ```

This should work fine, but in the code where we create zone and attaching widgets to it, after running the blueprint operations, we were not using the correct updated zone that returned from blueprint operations of the child widgets. This PR uses the correct zone.

Also there is a case where blueprint operation is not able to update the existing widgets because all properties of existing widgets were readonly. So cloned the widgets from redux before passing to widget addition saga functions.

/ok-to-test tags="@tag.All"

## Summary by CodeRabbit

- **New Features**
	- Improved clarity in widget handling by renaming parameters related to dragged widgets.
	- Streamlined the process of adding widgets to zones by simplifying parameter structures.

- **Bug Fixes**
	- Enhanced immutability in widget property updates within the state management process.

- **Style**
	- Updated CSS styles for the `.markdown` class, removing unnecessary pseudo-elements for improved formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11474751370>
> Commit: 8a385eec313142b40f848eed20310d3774c0705c
> <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11474751370&attempt=3" target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 23 Oct 2024 09:47:24 UTC
<!-- end of auto-generated comment: Cypress test results  -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Improved clarity in widget handling by renaming parameters related to dragged widgets.
	- Enhanced functionality for adding widgets to zones by simplifying the data structure used.
	- Implemented safer state manipulation for widget addition using a deep copy approach.

- **Bug Fixes**
	- Addressed potential issues with direct state mutation during widget addition.

- **Style**
	- Updated CSS styles for the Markdown component by removing unnecessary pseudo-elements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css

@@ -1,12 +1,6 @@
 .markdown {
   color: var(--color-fg);
 
-  &::after,
-  &::before {
-    /* This is required to remove the compensators of capsizing that comes up due to use of `wds-body-text` class */
-    content: none !important;
-  }
-
   table {
     border: var(--border-width-1) solid var(--color-bd);
     border-collapse: separate;

app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts

@@ -27,6 +27,7 @@ import log from "loglevel";
 import { generateDefaultLayoutPreset } from "layoutSystems/anvil/layoutComponents/presets/DefaultLayoutPreset";
 import { addWidgetsToPreset } from "layoutSystems/anvil/utils/layouts/update/additionUtils";
 import { addNewAnvilWidgetToDSL } from "./helpers";
+import { klona } from "klona";
 
 // The suggested widget functionality allows users to bind data from the Query pane
 // to a new or existing widget on the Canvas.
@@ -109,7 +110,8 @@ export function* getUpdatedListOfWidgetsAfterAddingNewWidget(
   isSection: boolean, // Indicates if the drop zone is a section
 ) {
   const { alignment, canvasId } = highlight;
-  const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+  const allWidgetsFromRedux: CanvasWidgetsReduxState = yield select(getWidgets);
+  const allWidgets = klona(allWidgetsFromRedux) as CanvasWidgetsReduxState;
 
   const parentWidgetWithLayout = allWidgets[canvasId];
 

app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts

@@ -19,7 +19,7 @@ import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/a
 export function* createSectionAndAddWidget(
   allWidgets: CanvasWidgetsReduxState,
   highlight: AnvilHighlightInfo,
-  widgets: WidgetLayoutProps[],
+  draggedWidgets: WidgetLayoutProps[],
   parentId: string,
 ) {
   /**
@@ -48,7 +48,7 @@ export function* createSectionAndAddWidget(
     yield call(
       addWidgetsToSection,
       updatedWidgets,
-      widgets,
+      draggedWidgets,
       highlight,
       sectionProps,
     );

app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts

@@ -58,7 +58,7 @@ export function* createZoneAndAddWidgets(
       updatedWidgets,
       draggedWidgets,
       highlight,
-      zoneProps,
+      zoneProps.widgetId,
     );
 
   return res;
@@ -68,13 +68,11 @@ export function* addWidgetsToZone(
   allWidgets: CanvasWidgetsReduxState,
   draggedWidgets: WidgetLayoutProps[],
   highlight: AnvilHighlightInfo,
-  zone: WidgetProps,
+  zoneWidgetId: string,
 ) {
   let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets };
-  const zoneProps = { ...zone };
-  const preset: LayoutProps[] = zoneProps.layout;
+  const preset: LayoutProps[] = updatedWidgets[zoneWidgetId].layout;
   let zoneLayout: LayoutProps = preset[0];
-  const { widgetId: zoneWidgetId } = zoneProps;
 
   /**
    * If dragged widget is a new widget,
@@ -86,7 +84,6 @@ export function* addWidgetsToZone(
     zoneWidgetId,
     draggedWidgets,
   );
-  zoneProps.children = updatedWidgets[zoneWidgetId].children;
 
   /**
    * Split new widgets based on type.
@@ -127,14 +124,11 @@ export function* addWidgetsToZone(
   /**
    * Update zone widget with the updated preset.
    */
-  zoneProps.layout = [zoneLayout];
+  updatedWidgets[zoneWidgetId].layout = [zoneLayout];
 
   return {
-    canvasWidgets: {
-      ...updatedWidgets,
-      [zoneProps.widgetId]: zoneProps,
-    },
-    zone: zoneProps,
+    canvasWidgets: updatedWidgets,
+    zone: updatedWidgets[zoneWidgetId],
   };
 }
 
@@ -219,7 +213,7 @@ function* moveWidgetsToNewLayout(
     widgets,
     transformMovedWidgets(widgets, movedWidgets, highlight),
     highlight,
-    zone,
+    zone.widgetId,
   );
 
   return canvasWidgets;