Always opening the sidebar when a block is selected

usewaypoint · Mar 1, 2024 · ce8e185 · ce8e185
1 parent 72f64bb
commit ce8e185
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 30 deletions.
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -53,12 +53,18 @@ export default function TemplatePanel() {
   const renderMainPanel = () => {
     switch (selectedMainTab) {
       case 'editor':
-        return <EditorBlock id="root" />;
+        return (
+          <Box sx={mainBoxSx}>
+            <EditorBlock id="root" />
+          </Box>
+        );
       case 'preview':
         return (
-          <ReaderProvider value={document}>
-            <ReaderBlock id="root" />
-          </ReaderProvider>
+          <Box sx={mainBoxSx}>
+            <ReaderProvider value={document}>
+              <ReaderBlock id="root" />
+            </ReaderProvider>
+          </Box>
         );
       case 'html':
         return <HtmlPanel />;
@@ -105,9 +111,7 @@ export default function TemplatePanel() {
         </Stack>
         <ToggleInspectorPanelButton />
       </Stack>
-      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>
-        <Box sx={mainBoxSx}>{renderMainPanel()}</Box>
-      </Box>
+      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>{renderMainPanel()}</Box>
     </>
   );
 }
diff --git a/packages/editor-sample/src/App/index.tsx b/packages/editor-sample/src/App/index.tsx
@@ -8,11 +8,21 @@ import InspectorDrawer, { INSPECTOR_DRAWER_WIDTH } from './InspectorDrawer';
 import SamplesDrawer, { SAMPLES_DRAWER_WIDTH } from './SamplesDrawer';
 import TemplatePanel from './TemplatePanel';
 
+function useDrawerTransition(cssProperty: 'margin-left' | 'margin-right', open: boolean) {
+  const { transitions } = useTheme();
+  return transitions.create(cssProperty, {
+    easing: !open ? transitions.easing.sharp : transitions.easing.easeOut,
+    duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen,
+  });
+}
+
 export default function App() {
-  const theme = useTheme();
   const inspectorDrawerOpen = useInspectorDrawerOpen();
   const samplesDrawerOpen = useSamplesDrawerOpen();
 
+  const marginLeftTransition = useDrawerTransition('margin-left', samplesDrawerOpen);
+  const marginRightTransition = useDrawerTransition('margin-right', inspectorDrawerOpen);
+
   return (
     <>
       <InspectorDrawer />
@@ -22,20 +32,7 @@ export default function App() {
         sx={{
           marginRight: inspectorDrawerOpen ? `${INSPECTOR_DRAWER_WIDTH}px` : 0,
           marginLeft: samplesDrawerOpen ? `${SAMPLES_DRAWER_WIDTH}px` : 0,
-          transition: [
-            theme.transitions.create('margin-left', {
-              easing: !samplesDrawerOpen ? theme.transitions.easing.sharp : theme.transitions.easing.easeOut,
-              duration: !samplesDrawerOpen
-                ? theme.transitions.duration.leavingScreen
-                : theme.transitions.duration.enteringScreen,
-            }),
-            theme.transitions.create('margin-right', {
-              easing: !inspectorDrawerOpen ? theme.transitions.easing.sharp : theme.transitions.easing.easeOut,
-              duration: !inspectorDrawerOpen
-                ? theme.transitions.duration.leavingScreen
-                : theme.transitions.duration.enteringScreen,
-            }),
-          ].join(', '),
+          transition: [marginLeftTransition, marginRightTransition].join(', '),
         }}
       >
         <TemplatePanel />

diff --git a/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx b/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx
@@ -58,7 +58,6 @@ export function EditorColumnsContainer({ style, props }: ColumnsContainerProps)
       return columnsCopy;
     };
 
-    setSelectedBlockId(id);
     setDocument({
       [id]: blockConfiguration,
       [blockId]: {
@@ -72,6 +71,7 @@ export function EditorColumnsContainer({ style, props }: ColumnsContainerProps)
         }),
       },
     });
+    setSelectedBlockId(id);
   };
 
   return (

diff --git a/packages/editor-sample/src/documents/blocks/Container/index.tsx b/packages/editor-sample/src/documents/blocks/Container/index.tsx
@@ -36,7 +36,6 @@ export function EditorContainer({ style, props }: ContainerProps) {
       nChildrenIds = [...childrenIds.slice(0, i), id, ...childrenIds.slice(i)];
     }
 
-    setSelectedBlockId(id);
     setDocument({
       [id]: blockConfiguration,
       [blockId]: {
@@ -47,6 +46,7 @@ export function EditorContainer({ style, props }: ContainerProps) {
         },
       },
     });
+    setSelectedBlockId(id);
   };
 
   return (

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
@@ -46,7 +46,7 @@ export default function EditorBlockWrapper({ children }: TEditorBlockWrapperProp
         setMouseInside(false);
       }}
       onClick={(ev) => {
-        setSelectedBlockId(blockId, { inspectorDrawerOpen: true });
+        setSelectedBlockId(blockId);
         ev.stopPropagation();
         ev.preventDefault();
       }}

diff --git a/packages/editor-sample/src/documents/editor/EditorContext.tsx b/packages/editor-sample/src/documents/editor/EditorContext.tsx
@@ -59,12 +59,17 @@ export function useSamplesDrawerOpen() {
   return editorStateStore((s) => s.samplesDrawerOpen);
 }
 
-type SetSelectedBlockIdOptions = {
-  inspectorDrawerOpen: boolean;
-};
-export function setSelectedBlockId(selectedBlockId: TValue['selectedBlockId'], options?: SetSelectedBlockIdOptions) {
+export function setSelectedBlockId(selectedBlockId: TValue['selectedBlockId']) {
   const selectedSidebarTab = selectedBlockId === null ? 'styles' : 'block-configuration';
-  return editorStateStore.setState({ selectedBlockId, selectedSidebarTab, ...options });
+  const options: Partial<TValue> = {};
+  if (selectedBlockId !== null) {
+    options.inspectorDrawerOpen = true;
+  }
+  return editorStateStore.setState({
+    selectedBlockId,
+    selectedSidebarTab,
+    ...options,
+  });
 }
 
 export function setSidebarTab(selectedSidebarTab: TValue['selectedSidebarTab']) {