Fix scrolling sync pane position in dom

packages/netlify-cms-core/package.json

@@ -92,6 +92,7 @@
     "react-immutable-proptypes": "^2.1.0"
   },
   "devDependencies": {
+    "@types/react-scroll-sync": "0.8.4",
     "@types/history": "^4.7.8",
     "@types/react": "18.0.20",
     "@types/redux-mock-store": "^1.0.2",

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

@@ -2,7 +2,6 @@ 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';
@@ -27,13 +26,11 @@ 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

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { CmsWidgetPreviewProps } from 'netlify-cms-core';
 import React, { ComponentType, ReactNode, useMemo } from 'react';
 import ReactDOM from 'react-dom';
+import { ScrollSyncPane } from 'react-scroll-sync';
 
 interface PreviewContentProps {
   previewComponent?:
@@ -39,7 +40,9 @@ const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps)
     }
 
     return ReactDOM.createPortal(
-      <StyledPreviewContent className="preview-content">{children}</StyledPreviewContent>,
+      <ScrollSyncPane>
+        <StyledPreviewContent className="preview-content">{children}</StyledPreviewContent>
+      </ScrollSyncPane>,
       element,
     );
   }, [previewComponent, previewProps, element]);