Consuming block-container from the editor

packages/editor-sample/package.json

@@ -14,6 +14,7 @@
     "@mui/material": "^5.15.10",
     "@usewaypoint/block-avatar": "^0.0.1",
     "@usewaypoint/block-button": "^0.0.1",
+    "@usewaypoint/block-container": "^0.0.1",
     "@usewaypoint/block-divider": "^0.0.3",
     "@usewaypoint/block-heading": "^0.0.2",
     "@usewaypoint/block-html": "^0.0.1",

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

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

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

@@ -1,22 +1,15 @@
 import { z } from 'zod';
 
-import { zColor, zPadding } from '../helpers/zod';
+import { ContainerPropsSchema as BaseContainerPropsSchema } from '@usewaypoint/block-container';
 
 export const ContainerPropsSchema = z.object({
-  style: z
+  style: BaseContainerPropsSchema.shape.style,
+  props: 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,
-      }),
+      childrenIds: z.array(z.string()).optional().nullable(),
     })
-    .default({}),
-  props: z.object({
-    childrenIds: z.array(z.string()),
-  }),
+    .optional()
+    .nullable(),
 });
+
+export type ContainerProps = z.infer<typeof ContainerPropsSchema>;

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

@@ -1,27 +1,29 @@
 import React from 'react';
-import { z } from 'zod';
+
+import { Container as BaseContainer } from '@usewaypoint/block-container';
 
 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 { ContainerPropsSchema } from './ContainerPropsSchema';
-
-export type ContainerProps = z.infer<typeof ContainerPropsSchema>;
+import { ContainerProps } from './ContainerPropsSchema';
 
-export function Container({ props: { childrenIds } }: ContainerProps) {
+export function Container({ style, props }: ContainerProps) {
+  const childrenIds = props?.childrenIds ?? [];
   return (
-    <>
+    <BaseContainer style={style}>
       {childrenIds.map((childId) => (
         <ReaderBlock key={childId} id={childId} />
       ))}
-    </>
+    </BaseContainer>
   );
 }
 
-export function EditorContainer({ props: { childrenIds } }: ContainerProps) {
+export function EditorContainer({ style, props }: ContainerProps) {
+  const childrenIds = props?.childrenIds ?? [];
+
   const [{ document }, setEditorState] = useEditorState();
   const blockId = useCurrentBlockId();
 
@@ -33,6 +35,7 @@ export function EditorContainer({ props: { childrenIds } }: ContainerProps) {
     } else {
       nChildrenIds = [...childrenIds.slice(0, i), id, ...childrenIds.slice(i)];
     }
+
     setEditorState({
       selectedBlockId: id,
       document: {
@@ -44,11 +47,14 @@ export function EditorContainer({ props: { childrenIds } }: ContainerProps) {
             ...document[blockId].data,
             props: { childrenIds: nChildrenIds },
           },
-        } as TEditorBlock,
+        },
       },
     });
-    setEditorState({});
   };
 
-  return <EditorChildrenIds childrenIds={childrenIds} insertBlock={insertBlock} />;
+  return (
+    <BaseContainer style={style}>
+      <EditorChildrenIds childrenIds={childrenIds} insertBlock={insertBlock} />
+    </BaseContainer>
+  );
 }

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

@@ -15,7 +15,6 @@ import {
 
 import { TEditorBlock } from '../../../../editor/core';
 import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema';
-import { ContainerPropsSchema } from '../../../Container/ContainerPropsSchema';
 
 type TButtonProps = {
   label: string;
@@ -139,9 +138,7 @@ export const BUTTONS: TButtonProps[] = [
     icon: <LibraryAddOutlined />,
     block: () => ({
       type: 'Container',
-      data: ContainerPropsSchema.parse({
-        props: { childrenIds: [] },
-      }),
+      data: {},
     }),
   },
 

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

@@ -14,7 +14,7 @@ import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint
 import { EditorColumnsContainer } from '../blocks/ColumnsContainer';
 import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
 import { EditorContainer } from '../blocks/Container';
-import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
+import { ContainerProps, ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
 import { EditorEmailLayout, EmailLayoutProps } from '../blocks/EmailLayout';
 import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers';
@@ -39,7 +39,11 @@ const EDITOR_DICTIONARY = {
   },
   Container: {
     schema: ContainerPropsSchema,
-    Component: addEditorBlockWrapper(EditorContainer),
+    Component: (props: ContainerProps) => (
+      <EditorBlockWrapper>
+        <EditorContainer {...props} />
+      </EditorBlockWrapper>
+    ),
   },
   ColumnsContainer: {
     schema: ColumnsContainerPropsSchema,

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

@@ -33,7 +33,7 @@ const READER_DICTIONARY = {
   },
   Container: {
     schema: ContainerPropsSchema,
-    Component: addReaderBlockWrapper(Container),
+    Component: Container,
   },
   Divider: {
     schema: DividerPropsSchema,