[desk-tool] Move PortalProvider to document viewer area

sanity-io · Oct 6, 2020 · b008dce · b008dce
1 parent b6c0fb5
commit b008dce
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 69 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx
@@ -1,7 +1,6 @@
 import * as PathUtils from '@sanity/util/paths'
 import classNames from 'classnames'
-import {PortalProvider} from 'part:@sanity/components/portal'
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback} from 'react'
 import {usePaneRouter} from '../../contexts/PaneRouterContext'
 import {ChangesPanel} from './changesPanel'
 import {useDocumentHistory} from './documentHistory'
@@ -55,8 +54,7 @@ export function DocumentPane(props: DocumentPaneProps) {
     value,
     views = []
   } = props
-  const portalContainerRef = useRef<HTMLDivElement | null>(null)
-  const portalRef = useRef(document.createElement('div'))
+
   const {startTime} = useDocumentHistory()
   const [showValidationTooltip, setShowValidationTooltip] = React.useState<boolean>(false)
   const paneRouter = usePaneRouter()
@@ -114,18 +112,6 @@ export function DocumentPane(props: DocumentPaneProps) {
     paneRouter.duplicateCurrent()
   }, [paneRouter])
 
-  useEffect(() => {
-    if (portalContainerRef.current) {
-      portalContainerRef.current.appendChild(portalRef.current)
-    }
-
-    return () => {
-      if (portalContainerRef.current) {
-        portalContainerRef.current.removeChild(portalRef.current)
-      }
-    }
-  }, [])
-
   return (
     <DocumentActionShortcuts
       id={documentIdRaw}
@@ -140,35 +126,31 @@ export function DocumentPane(props: DocumentPaneProps) {
       <div className={styles.documentContainer}>
         {isInspectOpen && <InspectDialog value={value} onClose={handleInspectClose} />}
 
-        <PortalProvider element={portalRef.current}>
-          <DocumentPanel
-            activeViewId={activeViewId}
-            connectionState={connectionState}
-            documentId={documentId}
-            documentType={documentType}
-            idPrefix={paneKey}
-            initialFocusPath={initialFocusPath}
-            initialValue={initialValue}
-            isClosable={isClosable}
-            isCollapsed={isCollapsed}
-            isHistoryOpen={isHistoryOpen}
-            markers={markers}
-            menuItemGroups={menuItemGroups}
-            onChange={onChange}
-            onCloseView={handleClosePane}
-            onCollapse={onCollapse}
-            onExpand={onExpand}
-            onSetActiveView={handleSetActiveView}
-            onSplitPane={handleSplitPane}
-            paneTitle={paneTitle}
-            schemaType={schemaType}
-            toggleInspect={toggleInspect}
-            value={value}
-            views={views}
-          />
-        </PortalProvider>
-
-        <div data-portal-container ref={portalContainerRef} />
+        <DocumentPanel
+          activeViewId={activeViewId}
+          connectionState={connectionState}
+          documentId={documentId}
+          documentType={documentType}
+          idPrefix={paneKey}
+          initialFocusPath={initialFocusPath}
+          initialValue={initialValue}
+          isClosable={isClosable}
+          isCollapsed={isCollapsed}
+          isHistoryOpen={isHistoryOpen}
+          markers={markers}
+          menuItemGroups={menuItemGroups}
+          onChange={onChange}
+          onCloseView={handleClosePane}
+          onCollapse={onCollapse}
+          onExpand={onExpand}
+          onSetActiveView={handleSetActiveView}
+          onSplitPane={handleSplitPane}
+          paneTitle={paneTitle}
+          schemaType={schemaType}
+          toggleInspect={toggleInspect}
+          value={value}
+          views={views}
+        />
       </div>
 
       {!isCollapsed && isHistoryOpen && (

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css
@@ -16,13 +16,18 @@
 .documentViewerContainer {
   flex: 1;
   min-height: 0;
-  overflow: auto;
+  position: relative;
 
   @nest .isCollapsed & {
     display: none;
   }
 }
 
+.documentScroller {
+  height: 100%;
+  overflow: auto;
+}
+
 .footerContainer {
   background: #fff;
   border-top: 1px solid #ddd;

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames'
+import {PortalProvider} from 'part:@sanity/components/portal'
 import Snackbar from 'part:@sanity/components/snackbar/default'
-import React, {createElement, useCallback, useMemo, useRef} from 'react'
+import React, {createElement, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useDocumentHistory} from '../documentHistory'
 import {Doc, DocumentView, MenuItemGroup} from '../types'
 import {DocumentOperationResults} from './documentOperationResults'
@@ -39,6 +40,8 @@ interface DocumentPanelProps {
 }
 
 export function DocumentPanel(props: DocumentPanelProps) {
+  const portalContainerRef = useRef<HTMLDivElement | null>(null)
+  const portalRef = useRef(document.createElement('div'))
   const {displayed, historyDisplayed, startTime, toggleHistory} = useDocumentHistory()
   const {toggleInspect} = props
   const formRef = useRef<any>()
@@ -89,6 +92,18 @@ export function DocumentPanel(props: DocumentPanelProps) {
     [formRef.current]
   )
 
+  useEffect(() => {
+    if (portalContainerRef.current) {
+      portalContainerRef.current.appendChild(portalRef.current)
+    }
+
+    return () => {
+      if (portalContainerRef.current) {
+        portalContainerRef.current.removeChild(portalRef.current)
+      }
+    }
+  }, [])
+
   return (
     <div className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
       <div className={styles.headerContainer}>
@@ -119,28 +134,34 @@ export function DocumentPanel(props: DocumentPanelProps) {
         />
       </div>
 
-      <div className={styles.documentViewerContainer}>
-        {activeView.type === 'form' && (
-          <FormView
-            id={props.documentId}
-            initialFocusPath={props.initialFocusPath}
-            initialValue={props.initialValue}
-            markers={props.markers}
-            onChange={props.onChange}
-            readOnly={historyDisplayed === 'from'}
-            ref={formRef}
-            schemaType={props.schemaType}
-            value={displayed}
-          />
-        )}
-
-        {activeView.type === 'component' &&
-          createElement(activeView.component, {
-            documentId: props.documentId,
-            options: activeView.options,
-            schemaType: props.schemaType
-          })}
-      </div>
+      <PortalProvider element={portalRef.current}>
+        <div className={styles.documentViewerContainer}>
+          <div className={styles.documentScroller}>
+            {activeView.type === 'form' && (
+              <FormView
+                id={props.documentId}
+                initialFocusPath={props.initialFocusPath}
+                initialValue={props.initialValue}
+                markers={props.markers}
+                onChange={props.onChange}
+                readOnly={historyDisplayed === 'from'}
+                ref={formRef}
+                schemaType={props.schemaType}
+                value={displayed}
+              />
+            )}
+
+            {activeView.type === 'component' &&
+              createElement(activeView.component, {
+                documentId: props.documentId,
+                options: activeView.options,
+                schemaType: props.schemaType
+              })}
+          </div>
+
+          <div data-portal-container ref={portalContainerRef} />
+        </div>
+      </PortalProvider>
 
       <div className={styles.footerContainer}>
         <DocumentStatusBar