Updating image-block defaults and setting up sidebar links. (#38)

usewaypoint · Feb 29, 2024 · d93e317 · d93e317
1 parent 5872c47
commit d93e317
Show file tree

Hide file tree

Showing 20 changed files with 99 additions and 142 deletions.
diff --git a/...src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx b/...src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx
@@ -19,7 +19,7 @@ export default function TextAlignInput({ label, defaultValue, onChange }: Props)
       defaultValue={value}
       onChange={(value) => {
         setValue(value);
-        onChange(value === 'left' ? null : value);
+        onChange(value);
       }}
     >
       <ToggleButton value="left">

diff --git a/packages/editor-sample/src/App/InspectorDrawer/index.tsx b/packages/editor-sample/src/App/InspectorDrawer/index.tsx
@@ -39,7 +39,9 @@ export default function InspectorDrawer() {
           </Tabs>
         </Box>
       </Box>
-      <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto' }}>{renderCurrentSidebarPanel()}</Box>
+      <Box sx={{ width: INSPECTOR_DRAWER_WIDTH, height: 'calc(100% - 49px)', overflow: 'auto' }}>
+        {renderCurrentSidebarPanel()}
+      </Box>
     </Drawer>
   );
 }
diff --git a/packages/editor-sample/src/App/SamplesDrawer/SidebarButton.tsx b/packages/editor-sample/src/App/SamplesDrawer/SidebarButton.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Button } from '@mui/material';
+
+export default function SidebarButton({ href, children }: { href: string; children: JSX.Element | string }) {
+  return (
+    <Button size="small" href={href}>
+      {children}
+    </Button>
+  );
+}
diff --git a/packages/editor-sample/src/App/SamplesDrawer/index.tsx b/packages/editor-sample/src/App/SamplesDrawer/index.tsx
@@ -4,17 +4,14 @@ import { Box, Button, Drawer, Link, Stack, Typography } from '@mui/material';
 
 import { useSamplesDrawerOpen } from '../../documents/editor/EditorContext';
 
+import SidebarButton from './SidebarButton';
 import logo from './waypoint.svg';
 
 export const SAMPLES_DRAWER_WIDTH = 240;
 
 export default function SamplesDrawer() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
 
-  const select = (val: string) => {
-    window.location.hash = `#sample/${val}`;
-  };
-
   return (
     <Drawer
       variant="persistent"
@@ -35,30 +32,14 @@ export default function SamplesDrawer() {
             EmailBuilder.js
           </Button>
           <Stack alignItems="flex-start">
-            <Button size="small" onClick={() => select('empty')}>
-              Empty
-            </Button>
-            <Button size="small" onClick={() => select('one-time-password')}>
-              One-time passcode (OTP)
-            </Button>
-            <Button size="small" onClick={() => select('reset-password')}>
-              Reset password
-            </Button>
-            <Button size="small" onClick={() => select('order-ecomerce')}>
-              E-commerce receipt
-            </Button>
-            <Button size="small" onClick={() => select('subscription-receipt')}>
-              Subscription receipt
-            </Button>
-            <Button size="small" onClick={() => select('reservation-reminder')}>
-              Reservation reminder
-            </Button>
-            <Button size="small" onClick={() => select('post-metrics-report')}>
-              Post metrics
-            </Button>
-            <Button size="small" onClick={() => select('respond-to-message')}>
-              Respond to message
-            </Button>
+            <SidebarButton href="#">Empty</SidebarButton>
+            <SidebarButton href="#sample/one-time-password">One-time passcode (OTP)</SidebarButton>
+            <SidebarButton href="#sample/reset-password">Reset password</SidebarButton>
+            <SidebarButton href="#sample/order-ecomerce">E-commerce receipt</SidebarButton>
+            <SidebarButton href="#sample/subscription-receipt">Subscription receipt</SidebarButton>
+            <SidebarButton href="#sample/reservation-reminder">Reservation reminder</SidebarButton>
+            <SidebarButton href="#sample/post-metrics-report">Post metrics</SidebarButton>
+            <SidebarButton href="#sample/respond-to-message">Respond to message</SidebarButton>
           </Stack>
         </Stack>
         <Stack spacing={2} px={0.75} py={3}>

diff --git a/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx b/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx
@@ -5,6 +5,8 @@ import { useDocument } from '../../documents/editor/EditorContext';
 import ReaderBlock from '../../documents/reader/ReaderBlock';
 import { ReaderProvider } from '../../documents/reader/ReaderContext';
 
+import TextEditorPanel from './helper/TextEditorPanel';
+
 export default function HtmlPanel() {
   const document = useDocument();
 
@@ -16,5 +18,5 @@ export default function HtmlPanel() {
     );
   }, [document]);
 
-  return <pre>{string}</pre>;
+  return <TextEditorPanel value={string} />;
 }
diff --git a/packages/editor-sample/src/App/TemplatePanel/JsonPanel.tsx b/packages/editor-sample/src/App/TemplatePanel/JsonPanel.tsx
@@ -0,0 +1,11 @@
+import React, { useMemo } from 'react';
+
+import { useEditorState } from '../../documents/editor/EditorContext';
+
+import TextEditorPanel from './helper/TextEditorPanel';
+
+export default function JsonPanel() {
+  const [{ document }] = useEditorState();
+  const string = useMemo(() => JSON.stringify(document, null, '  '), [document]);
+  return <TextEditorPanel value={string} />;
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/ShareButton.tsx b/packages/editor-sample/src/App/TemplatePanel/ShareButton.tsx
@@ -11,7 +11,6 @@ export default function ShareButton() {
 
   const onClick = async () => {
     const c = JSON.stringify(document);
-    localStorage.setItem('configuration', c);
     location.hash = `#${btoa(c)}`;
     if (navigator.clipboard) {
       await navigator.clipboard.writeText(location.href.toString());

diff --git a/packages/editor-sample/src/App/TemplatePanel/helper/TextEditorPanel.tsx b/packages/editor-sample/src/App/TemplatePanel/helper/TextEditorPanel.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+type TextEditorPanelProps = {
+  value: string;
+};
+export default function TextEditorPanel({ value }: TextEditorPanelProps) {
+  return (
+    <textarea
+      style={{
+        padding: 16,
+        resize: 'none',
+        borderWidth: 0,
+        height: '100%',
+        width: '100%',
+        outline: 0,
+        boxSizing: 'border-box',
+      }}
+    >
+      {value}
+    </textarea>
+  );
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -11,6 +11,7 @@ import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelB
 import ToggleSamplesPanelButton from '../SamplesDrawer/ToggleSamplesPanelButton';
 
 import HtmlPanel from './HtmlPanel';
+import JsonPanel from './JsonPanel';
 import ShareButton from './ShareButton';
 
 export default function TemplatePanel() {
@@ -30,11 +31,7 @@ export default function TemplatePanel() {
       case 'html':
         return <HtmlPanel />;
       case 'data':
-        return (
-          <Box p={3}>
-            <pre>{JSON.stringify(document, null, '  ')}</pre>
-          </Box>
-        );
+        return <JsonPanel />;
     }
   };
 
@@ -97,7 +94,7 @@ export default function TemplatePanel() {
 
         <ToggleInspectorPanelButton />
       </Stack>
-      <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto', minWidth: 370 }}>{renderMainPanel()}</Box>
+      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>{renderMainPanel()}</Box>
     </>
   );
 }
diff --git a/...ges/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx b/...ges/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx
@@ -14,7 +14,6 @@ import {
 } from '@mui/icons-material';
 
 import { TEditorBlock } from '../../../../editor/core';
-import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema';
 
 type TButtonProps = {
   label: string;
@@ -42,6 +41,10 @@ export const BUTTONS: TButtonProps[] = [
       type: 'Text',
       data: {
         props: { text: 'My new text block' },
+        style: {
+          padding: { top: 16, bottom: 16, left: 24, right: 24 },
+          fontWeight: 'normal',
+        },
       },
     }),
   },
@@ -56,6 +59,7 @@ export const BUTTONS: TButtonProps[] = [
           text: 'Button',
           url: 'https://www.usewaypoint.com',
         },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
       },
     }),
   },
@@ -71,6 +75,7 @@ export const BUTTONS: TButtonProps[] = [
           contentAlignment: 'middle',
           linkHref: null,
         },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
       },
     }),
   },
@@ -84,6 +89,7 @@ export const BUTTONS: TButtonProps[] = [
           imageUrl: 'https://ui-avatars.com/api/?size=128',
           shape: 'circle',
         },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
       },
     }),
   },
@@ -93,9 +99,7 @@ export const BUTTONS: TButtonProps[] = [
     block: () => ({
       type: 'Divider',
       data: {
-        style: {
-          padding: { top: 16, right: 0, bottom: 16, left: 0 },
-        },
+        style: { padding: { top: 16, right: 0, bottom: 16, left: 0 } },
         props: {
           lineColor: '#CCCCCC',
         },
@@ -107,7 +111,7 @@ export const BUTTONS: TButtonProps[] = [
     icon: <Crop32Outlined />,
     block: () => ({
       type: 'Spacer',
-      data: { style: {}, props: {} },
+      data: {},
     }),
   },
   {
@@ -117,6 +121,11 @@ export const BUTTONS: TButtonProps[] = [
       type: 'Html',
       data: {
         props: { contents: 'Hello world' },
+        style: {
+          fontSize: 16,
+          textAlign: null,
+          padding: { top: 16, bottom: 16, left: 24, right: 24 },
+        },
       },
     }),
   },
@@ -125,20 +134,24 @@ export const BUTTONS: TButtonProps[] = [
     icon: <ViewColumnOutlined />,
     block: () => ({
       type: 'ColumnsContainer',
-      data: ColumnsContainerPropsSchema.parse({
+      data: {
         props: {
+          columnsGap: 16,
           columnsCount: 3,
           columns: [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }],
         },
-      }),
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
+      },
     }),
   },
   {
     label: 'Container',
     icon: <LibraryAddOutlined />,
     block: () => ({
       type: 'Container',
-      data: {},
+      data: {
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
+      },
     }),
   },
 

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
@@ -42,12 +42,12 @@ export default function EditorBlockWrapper({ children }: TEditorBlockWrapperProp
         setMouseInside(true);
         ev.stopPropagation();
       }}
-      onMouseLeave={(ev) => {
+      onMouseLeave={() => {
         setMouseInside(false);
-        ev.stopPropagation();
       }}
       onClick={(ev) => {
         setEditorState({
+          inspectorDrawerOpen: true,
           selectedSidebarTab: 'block-configuration',
           selectedBlockId: blockId,
         });

diff --git a/packages/editor-sample/src/getConfiguration/index.tsx b/packages/editor-sample/src/getConfiguration/index.tsx
@@ -38,14 +38,5 @@ export default function getConfiguration(template: string) {
     }
   }
 
-  const configurationString = localStorage.getItem('configuration');
-  if (typeof configurationString === 'string') {
-    try {
-      return JSON.parse(configurationString);
-    } catch {
-      console.error(`Couldn't load configuration from localStorage.`);
-    }
-  }
-
   return EMPTY_EMAIL_MESSAGE;
 }
diff --git a/packages/editor-sample/src/getConfiguration/sample/one-time-passcode.ts b/packages/editor-sample/src/getConfiguration/sample/one-time-passcode.ts
@@ -31,9 +31,8 @@ const ONE_TIME_PASSCODE: TEditorConfiguration = {
         textAlign: 'center',
       },
       props: {
+        height: 24,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_jc7ZfPvdHJ6rtH1W/&.png',
-        alt: '',
-        linkHref: null,
         contentAlignment: 'middle',
       },
     },