diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx index c6777ab..25c1524 100644 --- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx +++ b/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'; diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx index fe4857d..bda6920 100644 --- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx +++ b/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'; diff --git a/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx new file mode 100644 index 0000000..9eeca2c --- /dev/null +++ b/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()), + }), +}); diff --git a/packages/editor-sample/src/documents/blocks/Container.tsx b/packages/editor-sample/src/documents/blocks/Container/index.tsx similarity index 61% rename from packages/editor-sample/src/documents/blocks/Container.tsx rename to packages/editor-sample/src/documents/blocks/Container/index.tsx index ab93065..2490305 100644 --- a/packages/editor-sample/src/documents/blocks/Container.tsx +++ b/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; diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx new file mode 100644 index 0000000..5a250c7 --- /dev/null +++ b/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()), +}); diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx similarity index 86% rename from packages/editor-sample/src/documents/blocks/EmailLayout.tsx rename to packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx index 0c53183..3a06ccf 100644 --- a/packages/editor-sample/src/documents/blocks/EmailLayout.tsx +++ b/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; export function EmailLayout(props: EmailLayoutProps) { diff --git a/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx b/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx index b543871..344ac18 100644 --- a/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx +++ b/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'; diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx index 4c712c3..f01c0d2 100644 --- a/packages/editor-sample/src/documents/editor/core.tsx +++ b/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'; diff --git a/packages/editor-sample/src/documents/reader/core.tsx b/packages/editor-sample/src/documents/reader/core.tsx index 86ce504..839eb6f 100644 --- a/packages/editor-sample/src/documents/reader/core.tsx +++ b/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';