Consuming spacer in dictionaries

usewaypoint · Feb 26, 2024 · 6ff25b5 · 6ff25b5
1 parent 190df7b
commit 6ff25b5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx
@@ -4,17 +4,14 @@ import { Box } from '@mui/material';
 
 import { useCurrentBlockId } from '../../../editor/EditorBlock';
 import { useEditorState } from '../../../editor/EditorContext';
-import { TStyle } from '../TStyle';
 
-import ReaderBlockWrapper from './ReaderBlockWrapper';
 import TuneMenu from './TuneMenu';
 
 type TEditorBlockWrapperProps = {
-  style: TStyle;
   children: JSX.Element;
 };
 
-export default function EditorBlockWrapper({ style, children }: TEditorBlockWrapperProps) {
+export default function EditorBlockWrapper({ children }: TEditorBlockWrapperProps) {
   const [{ selectedBlockId }, setEditorState] = useEditorState();
   const [mouseInside, setMouseInside] = useState(false);
   const blockId = useCurrentBlockId();
@@ -59,7 +56,7 @@ export default function EditorBlockWrapper({ style, children }: TEditorBlockWrap
       }}
     >
       {renderMenu()}
-      <ReaderBlockWrapper style={style}>{children}</ReaderBlockWrapper>
+      {children}
     </Box>
   );
 }
diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/index.tsx b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/index.tsx
@@ -23,8 +23,10 @@ export function addReaderBlockWrapper<TProps extends TCommonProps>(ChildComponen
 export function addEditorBlockWrapper<TProps extends TCommonProps>(ChildComponent: (props: TProps) => React.ReactNode) {
   return (props: TProps) => {
     return (
-      <EditorBlockWrapper style={props.style}>
-        <ChildComponent {...props} />
+      <EditorBlockWrapper>
+        <ReaderBlockWrapper style={props.style}>
+          <ChildComponent {...props} />
+        </ReaderBlockWrapper>
       </EditorBlockWrapper>
     );
   };

diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { z } from 'zod';
 
-import { Heading, HeadingPropsSchema } from '@usewaypoint/block-heading';
-import { Spacer, SpacerPropsSchema } from '@usewaypoint/block-spacer';
+import { Heading, HeadingProps, HeadingPropsSchema } from '@usewaypoint/block-heading';
+import { Spacer, SpacerProps, SpacerPropsSchema } from '@usewaypoint/block-spacer';
 import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
 
 import { Avatar, AvatarPropsSchema } from '../blocks/Avatar';
@@ -13,6 +13,7 @@ import { ContainerPropsSchema, EditorContainer } from '../blocks/Container';
 import { Divider, DividerPropsSchema } from '../blocks/Divider';
 import { EditorEmailLayout, EmailLayoutProps, EmailLayoutPropsSchema } from '../blocks/EmailLayout';
 import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers';
+import EditorBlockWrapper from '../blocks/helpers/block-wrappers/EditorBlockWrapper';
 import { Html, HtmlPropsSchema } from '../blocks/Html';
 import { Image, ImagePropsSchema } from '../blocks/Image';
 import { Text, TextPropsSchema } from '../blocks/Text';
@@ -40,7 +41,11 @@ const EDITOR_DICTIONARY = {
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: addEditorBlockWrapper(Heading),
+    Component: (props: HeadingProps) => (
+      <EditorBlockWrapper>
+        <Heading {...props} />
+      </EditorBlockWrapper>
+    ),
   },
   Html: {
     schema: HtmlPropsSchema,
@@ -64,7 +69,11 @@ const EDITOR_DICTIONARY = {
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: Spacer,
+    Component: (props: SpacerProps) => (
+      <EditorBlockWrapper>
+        <Spacer {...props} />
+      </EditorBlockWrapper>
+    ),
   },
 };
 

diff --git a/packages/editor-sample/src/documents/reader/core.tsx b/packages/editor-sample/src/documents/reader/core.tsx
@@ -39,7 +39,7 @@ const READER_DICTIONARY = {
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: addReaderBlockWrapper(Heading),
+    Component: Heading,
   },
   Html: {
     schema: HtmlPropsSchema,
@@ -59,7 +59,7 @@ const READER_DICTIONARY = {
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: addReaderBlockWrapper(Spacer),
+    Component: Spacer,
   },
 };