refactor(tasks): decouple from structure via IsLastPaneContext

sanity-io · Apr 17, 2024 · a74f32d · a74f32d
1 parent 707928c
commit a74f32d
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 41 deletions.
diff --git a/packages/sanity/src/core/index.ts b/packages/sanity/src/core/index.ts
@@ -24,6 +24,7 @@ export {createSearch, getSearchableTypes} from './search'
 export * from './store'
 export * from './studio'
 export * from './studioClient'
+export {IsLastPaneProvider} from './tasks'
 export * from './templates'
 export * from './theme'
 export * from './user-color'

diff --git a/packages/sanity/src/core/tasks/context/index.ts b/packages/sanity/src/core/tasks/context/index.ts
@@ -1,4 +1,5 @@
 export * from './enabled'
+export * from './isLastPane'
 export * from './mentionUser'
 export * from './navigation'
 export * from './tasks'

diff --git a/packages/sanity/src/core/tasks/context/isLastPane/IsLastPaneContext.ts b/packages/sanity/src/core/tasks/context/isLastPane/IsLastPaneContext.ts
@@ -0,0 +1,15 @@
+import {createContext} from 'react'
+
+/**
+ * TODO: remove this context when alternate document-specific context are
+ * introduced.
+ *
+ * The following context is used in the structure tool to set the active
+ * document if it's the last pane open in the structure tool. This is a
+ * temporary context provider that was introduced when the comments and tasks
+ * plugins were refactor and decoupled from the structure tool. ideally this
+ * should be removed and replaced with a document-specific context that gives
+ * plugin authors access to what the `usePane`, `usePaneRouter`, and
+ * `useDocumentPane` provides without exposing specifics from the structure tool
+ */
+export const IsLastPaneContext = createContext<boolean>(false)
diff --git a/packages/sanity/src/core/tasks/context/isLastPane/IsLastPaneProvider.tsx b/packages/sanity/src/core/tasks/context/isLastPane/IsLastPaneProvider.tsx
@@ -0,0 +1,14 @@
+import {IsLastPaneContext} from './IsLastPaneContext'
+
+interface IsLastPaneProviderProps {
+  isLastPane: boolean
+  children: React.ReactNode
+}
+
+/**
+ * @internal
+ * @hidden
+ */
+export function IsLastPaneProvider({children, isLastPane}: IsLastPaneProviderProps): JSX.Element {
+  return <IsLastPaneContext.Provider value={isLastPane}>{children}</IsLastPaneContext.Provider>
+}
diff --git a/packages/sanity/src/core/tasks/context/isLastPane/index.ts b/packages/sanity/src/core/tasks/context/isLastPane/index.ts
@@ -0,0 +1,2 @@
+export * from './IsLastPaneProvider'
+export * from './useIsLastPane'
diff --git a/packages/sanity/src/core/tasks/context/isLastPane/useIsLastPane.ts b/packages/sanity/src/core/tasks/context/isLastPane/useIsLastPane.ts
@@ -0,0 +1,11 @@
+import {useContext} from 'react'
+
+import {IsLastPaneContext} from './IsLastPaneContext'
+
+/**
+ * @internal
+ * @hidden
+ */
+export function useIsLastPane(): boolean {
+  return useContext(IsLastPaneContext)
+}
diff --git a/packages/sanity/src/core/tasks/plugin/structure/SetActiveDocument.tsx b/packages/sanity/src/core/tasks/plugin/structure/SetActiveDocument.tsx
@@ -1,12 +1,11 @@
 import {useEffect} from 'react'
 
-import {usePane} from '../../../../structure/components'
 import {getPublishedId} from '../../../util'
-import {type ActiveDocument, useTasks, useTasksEnabled} from '../../context'
+import {type ActiveDocument, useIsLastPane, useTasks, useTasksEnabled} from '../../context'
 
 function SetActiveDocumentInner(document: ActiveDocument) {
   const {documentId, documentType} = document
-  const {isLast} = usePane()
+  const isLast = useIsLastPane()
   const {setActiveDocument} = useTasks()
 
   useEffect(() => {

diff --git a/packages/sanity/src/structure/components/pane/Pane.tsx b/packages/sanity/src/structure/components/pane/Pane.tsx
@@ -16,7 +16,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import {LegacyLayerProvider} from 'sanity'
+import {IsLastPaneProvider, LegacyLayerProvider} from 'sanity'
 import {styled} from 'styled-components'
 
 import {PANE_COLLAPSED_WIDTH, PANE_DEBUG, PANE_DEFAULT_MIN_WIDTH} from './constants'
@@ -200,44 +200,46 @@ export const Pane = forwardRef(function Pane(
     <>
       <LegacyLayerProvider zOffset="pane">
         <PaneContext.Provider value={contextValue}>
-          <Root
-            data-testid="pane"
-            data-ui="Pane"
-            tone="inherit"
-            hidden={hidden}
-            id={id}
-            overflow={layoutCollapsed ? undefined : 'hidden'}
-            {...restProps}
-            data-pane-collapsed={collapsed ? '' : undefined}
-            data-pane-index={paneIndex}
-            data-pane-selected={selected ? '' : undefined}
-            ref={setRef}
-            style={style}
-          >
-            {PANE_DEBUG && (
-              <Card padding={4} tone={expanded ? 'primary' : 'caution'}>
-                <Code size={1}>
-                  {[
-                    `#${paneIndex}`,
-                    `collapsed=${collapsed}`,
-                    `currentMinWidth=${currentMinWidth}`,
-                    `currentMaxWidth=${currentMaxWidth}`,
-                    `flex=${flex}`,
-                    `minWidth=${minWidth}`,
-                    `maxWidth=${maxWidth}`,
-                  ].join('\n')}
-                </Code>
-              </Card>
-            )}
-
-            <BoundaryElementProvider element={rootElement}>
-              {!hidden && (
-                <Flex direction="column" height="fill">
-                  {children}
-                </Flex>
+          <IsLastPaneProvider isLastPane={isLast}>
+            <Root
+              data-testid="pane"
+              data-ui="Pane"
+              tone="inherit"
+              hidden={hidden}
+              id={id}
+              overflow={layoutCollapsed ? undefined : 'hidden'}
+              {...restProps}
+              data-pane-collapsed={collapsed ? '' : undefined}
+              data-pane-index={paneIndex}
+              data-pane-selected={selected ? '' : undefined}
+              ref={setRef}
+              style={style}
+            >
+              {PANE_DEBUG && (
+                <Card padding={4} tone={expanded ? 'primary' : 'caution'}>
+                  <Code size={1}>
+                    {[
+                      `#${paneIndex}`,
+                      `collapsed=${collapsed}`,
+                      `currentMinWidth=${currentMinWidth}`,
+                      `currentMaxWidth=${currentMaxWidth}`,
+                      `flex=${flex}`,
+                      `minWidth=${minWidth}`,
+                      `maxWidth=${maxWidth}`,
+                    ].join('\n')}
+                  </Code>
+                </Card>
               )}
-            </BoundaryElementProvider>
-          </Root>
+
+              <BoundaryElementProvider element={rootElement}>
+                {!hidden && (
+                  <Flex direction="column" height="fill">
+                    {children}
+                  </Flex>
+                )}
+              </BoundaryElementProvider>
+            </Root>
+          </IsLastPaneProvider>
         </PaneContext.Provider>
       </LegacyLayerProvider>