Using divider from editor and adding margin: 0 to divider (#20)

packages/block-divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-divider",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "@usewaypoint/document compatible Divider component",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/block-divider/src/index.tsx

@@ -35,15 +35,16 @@ export function Divider({ style, props }: DividerProps) {
     padding: getPadding(style),
     backgroundColor: style?.backgroundColor ?? undefined,
   };
+  const borderTopWidth = props?.lineHeight ?? 1;
+  const borderTopColor = props?.lineColor ?? '#333333';
   return (
     <div style={st}>
       <hr
         style={{
           width: '100%',
           border: 'none',
-          borderTop: '1px solid #eaeaea',
-          borderColor: props?.lineColor ?? '#333333',
-          borderTopWidth: props?.lineHeight ?? 1,
+          borderTop: `${borderTopWidth}px solid ${borderTopColor}`,
+          margin: 0,
         }}
       />
     </div>

packages/block-divider/tests/__snapshots__/Divider.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`Divider renders with default values 1`] = `
 <DocumentFragment>
   <div>
     <hr
-      style="width: 100%; border-top: 1px solid #eaeaea; border-color: #333333; border-top-width: 1px;"
+      style="width: 100%; border-top: 1px solid #333333; margin: 0px;"
     />
   </div>
 </DocumentFragment>
@@ -16,7 +16,7 @@ exports[`Divider renders with props 1`] = `
     style="padding: 1px 4px 3px 2px; background-color: rgb(255, 240, 0);"
   >
     <hr
-      style="width: 100%; border-top: 1px solid #eaeaea; border-color: #444222; border-top-width: 10px;"
+      style="width: 100%; border-top: 10px solid #444222; margin: 0px;"
     />
   </div>
 </DocumentFragment>

packages/editor-sample/package.json

@@ -12,6 +12,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
+    "@usewaypoint/block-divider": "^0.0.1",
     "@usewaypoint/block-heading": "^0.0.1",
     "@usewaypoint/block-spacer": "^0.0.1",
     "@usewaypoint/document-core": "^0.0.1",

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

@@ -27,7 +27,7 @@ export default function ColumnsContainerPanel({ data, setData }: ColumnsContaine
   };
 
   return (
-    <BaseSidebarPanel title="Button block">
+    <BaseSidebarPanel title="Columns block">
       <RadioGroupInput
         label="Number of columns"
         defaultValue={data.props.columnsCount === 2 ? '2' : '3'}

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

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 
 import { HeightOutlined } from '@mui/icons-material';
-
-import { DividerProps, DividerPropsSchema } from '../../../../documents/blocks/Divider';
+import { DividerProps, DividerPropsSchema } from '@usewaypoint/block-divider';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import ColorInput from './helpers/inputs/ColorInput';
@@ -29,7 +28,7 @@ export default function DividerSidebarPanel({ data, setData }: DividerSidebarPan
     <BaseSidebarPanel title="Divider block">
       <ColorInput
         label="Color"
-        defaultValue={data.props.lineColor}
+        defaultValue={data.props?.lineColor ?? '#333333'}
         onChange={(lineColor) => updateData({ ...data, props: { ...data.props, lineColor } })}
         secondarySwatch={[]}
       />
@@ -40,7 +39,7 @@ export default function DividerSidebarPanel({ data, setData }: DividerSidebarPan
         step={1}
         min={1}
         max={24}
-        defaultValue={data.props.lineHeight ?? 1}
+        defaultValue={data.props?.lineHeight ?? 1}
         onChange={(lineHeight) => updateData({ ...data, props: { ...data.props, lineHeight } })}
       />
       <MultiStylePropertyPanel

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx

@@ -18,11 +18,21 @@ type TPaddingValue = {
 };
 type Props = {
   label: string;
-  defaultValue: TPaddingValue;
+  defaultValue: TPaddingValue | null;
   onChange: (value: TPaddingValue) => void;
 };
 export default function PaddingInput({ label, defaultValue, onChange }: Props) {
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useState(() => {
+    if (defaultValue) {
+      return defaultValue;
+    }
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    };
+  });
 
   function handleChange(internalName: keyof TPaddingValue, nValue: number) {
     const v = {

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx

@@ -6,14 +6,14 @@ import SingleStylePropertyPanel from './SingleStylePropertyPanel';
 
 type MultiStylePropertyPanelProps = {
   names: (keyof TStyle)[];
-  value: TStyle;
+  value: TStyle | undefined | null;
   onChange: (style: TStyle) => void;
 };
 export default function MultiStylePropertyPanel({ names, value, onChange }: MultiStylePropertyPanelProps) {
   return (
     <>
       {names.map((name) => (
-        <SingleStylePropertyPanel key={name} name={name} value={value} onChange={onChange} />
+        <SingleStylePropertyPanel key={name} name={name} value={value || {}} onChange={onChange} />
       ))}
     </>
   );

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

@@ -13,14 +13,12 @@ import {
   ViewColumnOutlined,
 } from '@mui/icons-material';
 import { HeadingPropsSchema } from '@usewaypoint/block-heading';
-import { SpacerPropsSchema } from '@usewaypoint/block-spacer';
 
 import { TEditorBlock } from '../../../../editor/core';
 import { AvatarPropsSchema } from '../../../Avatar';
 import { ButtonPropsSchema } from '../../../Button';
 import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema';
 import { ContainerPropsSchema } from '../../../Container/ContainerPropsSchema';
-import { DividerPropsSchema } from '../../../Divider';
 import { HtmlPropsSchema } from '../../../Html';
 import { ImagePropsSchema } from '../../../Image';
 import { TextPropsSchema } from '../../../Text';
@@ -101,15 +99,22 @@ export const BUTTONS: TButtonProps[] = [
     icon: <HorizontalRuleOutlined />,
     block: () => ({
       type: 'Divider',
-      data: DividerPropsSchema.parse({}),
+      data: {
+        style: {
+          padding: { top: 16, right: 0, bottom: 16, left: 0 },
+        },
+        props: {
+          lineColor: '#CCCCCC',
+        },
+      },
     }),
   },
   {
     label: 'Spacer',
     icon: <Crop32Outlined />,
     block: () => ({
       type: 'Spacer',
-      data: SpacerPropsSchema.parse({}),
+      data: { style: {}, props: {} },
     }),
   },
   {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { z } from 'zod';
 
+import { Divider, DividerProps, DividerPropsSchema } from '@usewaypoint/block-divider';
 import { Heading, HeadingProps, HeadingPropsSchema } from '@usewaypoint/block-heading';
 import { Spacer, SpacerProps, SpacerPropsSchema } from '@usewaypoint/block-spacer';
 import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
@@ -11,7 +12,6 @@ import { EditorColumnsContainer } from '../blocks/ColumnsContainer';
 import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
 import { EditorContainer } from '../blocks/Container';
 import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
-import { Divider, DividerPropsSchema } from '../blocks/Divider';
 import { EditorEmailLayout, EmailLayoutProps } from '../blocks/EmailLayout';
 import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers';
@@ -37,10 +37,6 @@ const EDITOR_DICTIONARY = {
     schema: ColumnsContainerPropsSchema,
     Component: addEditorBlockWrapper(EditorColumnsContainer),
   },
-  Divider: {
-    schema: DividerPropsSchema,
-    Component: addEditorBlockWrapper(Divider),
-  },
   Heading: {
     schema: HeadingPropsSchema,
     Component: (props: HeadingProps) => (
@@ -77,6 +73,14 @@ const EDITOR_DICTIONARY = {
       </EditorBlockWrapper>
     ),
   },
+  Divider: {
+    schema: DividerPropsSchema,
+    Component: (props: DividerProps) => (
+      <EditorBlockWrapper>
+        <Divider {...props} />
+      </EditorBlockWrapper>
+    ),
+  },
 };
 
 export const EditorBlock = buildBlockComponent(EDITOR_DICTIONARY);

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

@@ -1,5 +1,6 @@
 import { z } from 'zod';
 
+import { Divider, DividerPropsSchema } from '@usewaypoint/block-divider';
 import { Heading, HeadingPropsSchema } from '@usewaypoint/block-heading';
 import { Spacer, SpacerPropsSchema } from '@usewaypoint/block-spacer';
 import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
@@ -10,7 +11,6 @@ import { ColumnsContainer } from '../blocks/ColumnsContainer';
 import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
 import { Container } from '../blocks/Container';
 import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
-import { Divider, DividerPropsSchema } from '../blocks/Divider';
 import { EmailLayout } from '../blocks/EmailLayout';
 import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import { addReaderBlockWrapper } from '../blocks/helpers/block-wrappers';
@@ -37,7 +37,7 @@ const READER_DICTIONARY = {
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: addReaderBlockWrapper(Divider),
+    Component: Divider,
   },
   Heading: {
     schema: HeadingPropsSchema,

packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts

@@ -79,7 +79,7 @@ const POST_METRICS_REPORT: TEditorConfiguration = {
       props: {
         size: 32,
         shape: 'circle',
-        imageUrl: '',
+        imageUrl: 'https://ui-avatars.com/api/?name=John+Doe',
         fallbackText: 'Jordan',
         fallbackColor: null,
       },