diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx index a3624729fd..f4aa3ede2a 100644 --- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx +++ b/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 ( - props.onValueChange(content)} - /> + + props.onValueChange(content)} + /> + ); }; diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx index bb30b82303..f10f7bb837 100644 --- a/app/client/src/components/editorComponents/ResizableComponent.tsx +++ b/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 > diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index dff53c77cd..c819bd857d 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/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 };