Fixing some circular references

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
-import { ContainerProps, ContainerPropsSchema } from '../../../../documents/blocks/Container';
+import { ContainerProps } from '../../../../documents/blocks/Container';
+import { ContainerPropsSchema } from '../../../../documents/blocks/Container/ContainerPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx

@@ -3,7 +3,7 @@ import { z } from 'zod';
 
 import { Divider } from '@mui/material';
 
-import { EmailLayoutPropsSchema } from '../../../../documents/blocks/EmailLayout';
+import { EmailLayoutPropsSchema } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import ColorInput from './helpers/inputs/ColorInput';

packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx

@@ -0,0 +1,21 @@
+import { z } from 'zod';
+import { zColor, zPadding } from '../helpers/zod';
+
+export const ContainerPropsSchema = z.object({
+  style: z
+    .object({
+      backgroundColor: zColor().nullable().default(null),
+      borderColor: zColor().optional().nullable().default(null),
+      borderRadius: z.number().optional().nullable().default(0),
+      padding: zPadding().optional().default({
+        top: 16,
+        bottom: 16,
+        left: 24,
+        right: 24,
+      }),
+    })
+    .default({}),
+  props: z.object({
+    childrenIds: z.array(z.string()),
+  }),
+});

packages/editor-sample/src/documents/blocks/Container.tsx → packages/editor-sample/src/documents/blocks/Container/index.tsx

@@ -1,32 +1,13 @@
 import React from 'react';
 import { z } from 'zod';
 
-import { TEditorBlock } from '../editor/core';
-import { useCurrentBlockId } from '../editor/EditorBlock';
-import { useEditorState } from '../editor/EditorContext';
-import ReaderBlock from '../reader/ReaderBlock';
+import { TEditorBlock } from '../../editor/core';
+import { useCurrentBlockId } from '../../editor/EditorBlock';
+import { useEditorState } from '../../editor/EditorContext';
+import ReaderBlock from '../../reader/ReaderBlock';
+import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
-import EditorChildrenIds from './helpers/EditorChildrenIds';
-import { zColor, zPadding } from './helpers/zod';
-
-export const ContainerPropsSchema = z.object({
-  style: z
-    .object({
-      backgroundColor: zColor().nullable().default(null),
-      borderColor: zColor().optional().nullable().default(null),
-      borderRadius: z.number().optional().nullable().default(0),
-      padding: zPadding().optional().default({
-        top: 16,
-        bottom: 16,
-        left: 24,
-        right: 24,
-      }),
-    })
-    .default({}),
-  props: z.object({
-    childrenIds: z.array(z.string()),
-  }),
-});
+import { ContainerPropsSchema } from './ContainerPropsSchema';
 
 export type ContainerProps = z.infer<typeof ContainerPropsSchema>;
 

packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+import { zColor, zFontFamily } from '../helpers/zod';
+
+export const EmailLayoutPropsSchema = z.object({
+  backdropColor: zColor(),
+  canvasColor: zColor(),
+  textColor: zColor(),
+  fontFamily: zFontFamily().default('MODERN_SANS'),
+  childrenIds: z.array(z.string()),
+});

packages/editor-sample/src/documents/blocks/EmailLayout.tsx → packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx

@@ -1,13 +1,13 @@
 import React, { CSSProperties } from 'react';
 import { z } from 'zod';
 
-import { TEditorBlock } from '../editor/core';
-import { useCurrentBlockId } from '../editor/EditorBlock';
-import { useEditorState } from '../editor/EditorContext';
-import ReaderBlock from '../reader/ReaderBlock';
+import { TEditorBlock } from '../../editor/core';
+import { useCurrentBlockId } from '../../editor/EditorBlock';
+import { useEditorState } from '../../editor/EditorContext';
+import ReaderBlock from '../../reader/ReaderBlock';
+import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
-import EditorChildrenIds from './helpers/EditorChildrenIds';
-import { zColor, zFontFamily } from './helpers/zod';
+import { EmailLayoutPropsSchema } from './EmailLayoutPropsSchema';
 
 // Based on https://modernfontstacks.com/#font-stacks
 const FONT_FAMILY_MAPPINGS = {
@@ -24,14 +24,6 @@ const FONT_FAMILY_MAPPINGS = {
   MONOSPACE: '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace',
 };
 
-export const EmailLayoutPropsSchema = z.object({
-  backdropColor: zColor(),
-  canvasColor: zColor(),
-  textColor: zColor(),
-  fontFamily: zFontFamily().default('MODERN_SANS'),
-  childrenIds: z.array(z.string()),
-});
-
 export type EmailLayoutProps = z.infer<typeof EmailLayoutPropsSchema>;
 
 export function EmailLayout(props: EmailLayoutProps) {

packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx

@@ -19,7 +19,7 @@ import { TEditorBlock } from '../../../../editor/core';
 import { AvatarPropsSchema } from '../../../Avatar';
 import { ButtonPropsSchema } from '../../../Button';
 import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema';
-import { ContainerPropsSchema } from '../../../Container';
+import { ContainerPropsSchema } from '../../../Container/ContainerPropsSchema';
 import { DividerPropsSchema } from '../../../Divider';
 import { HtmlPropsSchema } from '../../../Html';
 import { ImagePropsSchema } from '../../../Image';

packages/editor-sample/src/documents/editor/core.tsx

@@ -9,9 +9,11 @@ import { Avatar, AvatarPropsSchema } from '../blocks/Avatar';
 import { Button, ButtonPropsSchema } from '../blocks/Button';
 import { EditorColumnsContainer } from '../blocks/ColumnsContainer';
 import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
-import { ContainerPropsSchema, EditorContainer } from '../blocks/Container';
+import { EditorContainer } from '../blocks/Container';
+import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
 import { Divider, DividerPropsSchema } from '../blocks/Divider';
-import { EditorEmailLayout, EmailLayoutProps, EmailLayoutPropsSchema } from '../blocks/EmailLayout';
+import { EditorEmailLayout, EmailLayoutProps } from '../blocks/EmailLayout';
+import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers';
 import EditorBlockWrapper from '../blocks/helpers/block-wrappers/EditorBlockWrapper';
 import { Html, HtmlPropsSchema } from '../blocks/Html';

packages/editor-sample/src/documents/reader/core.tsx

@@ -8,9 +8,11 @@ import { Avatar, AvatarPropsSchema } from '../blocks/Avatar';
 import { Button, ButtonPropsSchema } from '../blocks/Button';
 import { ColumnsContainer } from '../blocks/ColumnsContainer';
 import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
-import { Container, ContainerPropsSchema } from '../blocks/Container';
+import { Container } from '../blocks/Container';
+import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
 import { Divider, DividerPropsSchema } from '../blocks/Divider';
-import { EmailLayout, EmailLayoutPropsSchema } from '../blocks/EmailLayout';
+import { EmailLayout } from '../blocks/EmailLayout';
+import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import { addReaderBlockWrapper } from '../blocks/helpers/block-wrappers';
 import { Html, HtmlPropsSchema } from '../blocks/Html';
 import { Image, ImagePropsSchema } from '../blocks/Image';