moved delete button to editor

src/modules/editor/components/EditorWrapper/index.tsx

@@ -1,20 +1,25 @@
 import { FC, PropsWithChildren } from "react";
 import styles from "./styles.module.scss";
 import { Button } from "~/components/buttons/Button";
-import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
 
 interface EditorWrapperProps extends PropsWithChildren {
-  onSave: () => void;
+  save: () => void;
+  remove: () => void;
 }
 
-const EditorWrapper: FC<EditorWrapperProps> = ({ children, onSave }) => {
+const EditorWrapper: FC<EditorWrapperProps> = ({ children, save, remove }) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>{children}</div>
 
       <div className={styles.panel}>
+        <Button onClick={remove} role="button" size="small" variant="outline">
+          Delete
+        </Button>
+
         <div className={styles.filler} />
-        <Button onClick={onSave} role="button" size="small">
+
+        <Button onClick={save} role="button" size="small">
           Save
         </Button>
       </div>

src/modules/editor/containers/MarkdownEditorContainer/index.tsx

@@ -11,6 +11,7 @@ interface MarkdownEditorContainerProps {
   id: string;
   locked: boolean;
   startEditing: () => void;
+  remove: () => void;
 }
 
 const RichEditor = lazy(() =>
@@ -23,6 +24,7 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   id,
   locked,
   startEditing,
+  remove,
 }) => {
   const {
     settings: { richEditorEnabled },
@@ -39,7 +41,7 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   );
 
   const editor = (
-    <EditorWrapper onSave={startEditing}>
+    <EditorWrapper save={startEditing} remove={remove}>
       {richEditorEnabled ? (
         <RichEditor value={value} onChange={setValue} locked={locked} />
       ) : (

src/modules/layout/components/GridLayout/index.tsx

@@ -54,9 +54,6 @@ const DefaultLayout = ({
     <GridLayoutItemWrapper
       splitVertical={splitVertical}
       splitHorizontal={splitHorizontal}
-      remove={remove}
-      locked={locked}
-      lock={lock}
       showSettings={showSettings}
     >
       {createElement(component, {
@@ -64,6 +61,7 @@ const DefaultLayout = ({
         title: panelProps.params.title,
         locked,
         startEditing: lock,
+        remove,
       })}
     </GridLayoutItemWrapper>
   );

src/modules/layout/components/GridLayoutItemWrapper/index.tsx

@@ -2,7 +2,6 @@ import { FC, PropsWithChildren } from "react";
 import styles from "./styles.module.scss";
 import { IconButton } from "~/components/buttons/IconButton";
 
-import DeleteIcon from "~/assets/images/delete.svg";
 import SplitVertical from "~/assets/images/split-vertical.svg";
 import SplitHorizontal from "~/assets/images/split-horizontal.svg";
 import Gear from "~/assets/images/gear.svg";
@@ -10,9 +9,6 @@ import Gear from "~/assets/images/gear.svg";
 type GridLayoutItemWrapperProps = PropsWithChildren & {
   splitVertical: () => void;
   splitHorizontal: () => void;
-  remove: () => void;
-  locked: boolean;
-  lock: () => void;
   showSettings: () => void;
 };
 
@@ -21,8 +17,6 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
   splitVertical,
   splitHorizontal,
   showSettings,
-  remove,
-  locked,
 }) => (
   <div className={styles.wrapper}>
     <div className={styles.menu}>
@@ -49,12 +43,6 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
       >
         <Gear />
       </IconButton>
-
-      {!locked && (
-        <IconButton onClick={remove} role="button" className={styles.button}>
-          <DeleteIcon />
-        </IconButton>
-      )}
     </div>
 
     {children}

src/modules/layout/types/index.ts

@@ -3,4 +3,5 @@ export interface GridLayoutComponentProps {
   title: string;
   locked: boolean;
   startEditing: () => void;
+  remove: () => void;
 }