Fix richtexteditor header z-index. Remove resizable collision for Canvas Widgets. Fix issue where new containers had the same children as the previously created container's children

app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx

@@ -1,8 +1,19 @@
 import React from "react";
 import { Editor } from "@tinymce/tinymce-react";
+import styled from "styled-components";
 require("tinymce/tinymce");
 require("tinymce/themes/silver");
 
+const StyledRTEditor = styled.div`
+  && {
+    width: 100%;
+    height: 100%;
+    .tox .tox-editor-header {
+      z-index: 0;
+    }
+  }
+`;
+
 export interface RichtextEditorComponentProps {
   defaultValue?: string;
   placeholder?: string;
@@ -15,24 +26,26 @@ export const RichtextEditorComponent = (
   props: RichtextEditorComponentProps,
 ) => {
   return (
-    <Editor
-      value={props.defaultValue}
-      disabled={props.isDisabled}
-      init={{
-        height: "100%",
-        menubar: false,
-        branding: false,
-        resize: false,
-        plugins: [
-          "advlist autolink lists link image charmap print preview anchor",
-          "searchreplace visualblocks code fullscreen",
-          "insertdatetime media table paste code help",
-        ],
-        toolbar:
-          "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
-      }}
-      onEditorChange={(content: any) => props.onValueChange(content)}
-    />
+    <StyledRTEditor>
+      <Editor
+        value={props.defaultValue}
+        disabled={props.isDisabled}
+        init={{
+          height: "100%",
+          menubar: false,
+          branding: false,
+          resize: false,
+          plugins: [
+            "advlist autolink lists link image charmap print preview anchor",
+            "searchreplace visualblocks code fullscreen",
+            "insertdatetime media table paste code help",
+          ],
+          toolbar:
+            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+        }}
+        onEditorChange={(content: any) => props.onValueChange(content)}
+      />
+    </StyledRTEditor>
   );
 };
 

app/client/src/components/editorComponents/ResizableComponent.tsx

@@ -1,6 +1,5 @@
-import React, { useContext, useMemo, useRef } from "react";
+import React, { useContext, useRef } from "react";
 import { XYCoord } from "react-dnd";
-import { WidgetTypes } from "constants/WidgetConstants";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
 
 import {
@@ -74,17 +73,6 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
       ? occupiedSpaces[props.parentId]
       : undefined;
 
-  const maxBottomRowOfChildWidgets: number | undefined = useMemo(() => {
-    if (props.type === WidgetTypes.CONTAINER_WIDGET) {
-      const occupiedSpacesByChildren =
-        occupiedSpaces && occupiedSpaces[props.widgetId];
-      return occupiedSpacesByChildren?.reduce((prev: number, next) => {
-        if (next.bottom > prev) return next.bottom;
-        return prev;
-      }, 0);
-    }
-  }, [occupiedSpaces, props.type, props.widgetId]);
-
   // isFocused (string | boolean) -> isWidgetFocused (boolean)
   const isWidgetFocused =
     focusedWidget === props.widgetId || selectedWidget === props.widgetId;
@@ -169,17 +157,6 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
     }
 
     if (!updated) {
-      if (
-        // If this is a container widget, the maxBottomRow of child widgets should be one less than the max bottom row of the new row cols
-        maxBottomRowOfChildWidgets &&
-        newRowCols &&
-        props.type === WidgetTypes.CONTAINER_WIDGET &&
-        newRowCols.bottomRow - newRowCols.topRow - 1 <
-          maxBottomRowOfChildWidgets
-      ) {
-        return true;
-      }
-
       if (
         boundingElementClientRect &&
         newRowCols.bottomRow * props.parentRowSpace >

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -50,7 +50,6 @@ function* getChildWidgetProps(
   let minHeight = undefined;
   const widgetNames = Object.keys(widgets).map(w => widgets[w].widgetName);
   const defaultConfig = yield select(getDefaultWidgetConfig, type);
-
   if (type === WidgetTypes.CANVAS_WIDGET) {
     columns =
       (parent.rightColumn - parent.leftColumn) * parent.parentColumnSpace;
@@ -58,6 +57,7 @@ function* getChildWidgetProps(
     rows = (parent.bottomRow - parent.topRow) * parent.parentRowSpace;
     parentRowSpace = 1;
     minHeight = rows;
+    if (props) props.children = [];
   }
 
   const widgetProps = { ...defaultConfig, ...props, columns, rows, minHeight };