Move sync root

packages/netlify-cms-core/src/components/App/App.js

@@ -9,6 +9,7 @@ import { Route, Switch, Redirect } from 'react-router-dom';
 import { Notifs } from 'redux-notifications';
 import TopBarProgress from 'react-topbar-progress-indicator';
 import { Loader, colors } from 'netlify-cms-ui-default';
+import { ScrollSync } from 'react-scroll-sync';
 
 import { loginUser, logoutUser } from '../../actions/auth';
 import { currentBackend } from '../../backend';
@@ -33,10 +34,15 @@ TopBarProgress.config({
   barThickness: 2,
 });
 
+const AppRoot = styled.div`
+  width: 100%;
+  min-height: 100%;
+`;
+
 const AppWrapper = styled.div`
   width: 100%;
   min-height: 100%;
-`
+`;
 
 const AppMainContainer = styled.div`
   min-width: 1200px;
@@ -180,6 +186,8 @@ class App extends React.Component {
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
     return (
+      <ScrollSync>
+        <AppRoot id="cms-root">
           <AppWrapper className="cms-wrapper">
             <Notifs CustomComponent={Toast} />
             <Header
@@ -254,6 +262,8 @@ class App extends React.Component {
               {useMediaLibrary ? <MediaLibrary /> : null}
             </AppMainContainer>
           </AppWrapper>
+        </AppRoot>
+      </ScrollSync>
     );
   }
 }

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
+import { ScrollSyncPane } from 'react-scroll-sync';
 
 function isVisible(field) {
   return field.get('widget') !== 'hidden';
@@ -26,11 +27,13 @@ export default class Preview extends React.Component {
       return null;
     }
     return (
+      <ScrollSyncPane>
         <PreviewContainer>
           {fields.filter(isVisible).map(field => (
             <div key={field.get('name')}>{widgetFor(field.get('name'))}</div>
           ))}
         </PreviewContainer>
+      </ScrollSyncPane>
     );
   }
 }

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx

@@ -21,7 +21,7 @@ const StyledPreviewContent = styled.div`
 `;
 
 const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps) => {
-  const element = useMemo(() => document.getElementById('nc-root'), []);
+  const element = useMemo(() => document.getElementById('cms-root'), []);
 
   return useMemo(() => {
     if (!element) {

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

@@ -5,7 +5,6 @@ import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { lengths } from 'netlify-cms-ui-default';
 import { connect } from 'react-redux';
-import { ScrollSyncPane } from 'react-scroll-sync';
 
 import {
   resolveWidget,
@@ -232,13 +231,11 @@ export class PreviewPane extends React.Component {
 
     return (
       <ErrorBoundary config={config}>
-        <ScrollSyncPane>{/* attachTo={document.getElementById('control-pane')}>*/}
         <PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
           <EditorPreviewContent
             {...{ previewComponent, previewProps: { ...previewProps, document, window } }}
           />
         </PreviewPaneFrame>
-        </ScrollSyncPane>
       </ErrorBoundary>
     );
   }