fix: properly pass scroll element to scroll sync within frame (#415)

packages/core/package.json

@@ -198,7 +198,6 @@
     "@types/react": "18.0.27",
     "@types/react-color": "3.0.6",
     "@types/react-dom": "18.0.10",
-    "@types/react-scroll-sync": "0.8.4",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
     "@types/styled-components": "5.1.26",

packages/core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 import React, { Fragment, isValidElement, useCallback, useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import Frame, { FrameContextConsumer } from 'react-frame-component';
+import Frame from 'react-frame-component';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
 import { ScrollSyncPane } from 'react-scroll-sync';
@@ -16,6 +16,7 @@ import { selectIsLoadingAsset } from '@staticcms/core/reducers/selectors/medias'
 import { getTypedFieldForValue } from '@staticcms/list/typedListHelpers';
 import EditorPreview from './EditorPreview';
 import EditorPreviewContent from './EditorPreviewContent';
+import PreviewFrameContent from './PreviewFrameContent';
 import PreviewHOC from './PreviewHOC';
 
 import type { InferredField } from '@staticcms/core/constants/fieldInference';
@@ -523,24 +524,11 @@ const PreviewPane = (props: TranslatedProps<EditorPreviewPaneProps>) => {
                 {!collection ? (
                   t('collection.notFound')
                 ) : (
-                  <FrameContextConsumer>
-                    {({ document, window }) => {
-                      return (
-                        <ScrollSyncPane
-                          key="preview-frame-scroll-sync"
-                          attachTo={
-                            (document?.scrollingElement ?? undefined) as HTMLElement | undefined
-                          }
-                        >
-                          <EditorPreviewContent
+                  <PreviewFrameContent
                     key="preview-frame-content"
                     previewComponent={previewComponent}
-                            previewProps={{ ...previewProps, document, window }}
+                    previewProps={{ ...previewProps }}
                   />
-                        </ScrollSyncPane>
-                      );
-                    }}
-                  </FrameContextConsumer>
                 )}
               </PreviewPaneFrame>
             ) : (

packages/core/src/components/Editor/EditorPreviewPane/PreviewFrameContent.tsx

@@ -0,0 +1,44 @@
+import React, { useRef } from 'react';
+import { FrameContextConsumer } from 'react-frame-component';
+import { ScrollSyncPane } from 'react-scroll-sync';
+
+import EditorPreviewContent from './EditorPreviewContent';
+
+import type {
+  EntryData,
+  TemplatePreviewComponent,
+  TemplatePreviewProps,
+  UnknownField,
+} from '@staticcms/core/interface';
+import type { FC } from 'react';
+
+interface PreviewFrameContentProps {
+  previewComponent: TemplatePreviewComponent<EntryData, UnknownField>;
+  previewProps: Omit<TemplatePreviewProps<EntryData, UnknownField>, 'document' | 'window'>;
+}
+
+const PreviewFrameContent: FC<PreviewFrameContentProps> = ({ previewComponent, previewProps }) => {
+  const ref = useRef<HTMLElement>();
+
+  return (
+    <FrameContextConsumer>
+      {context => {
+        if (!ref.current) {
+          ref.current = context.document?.scrollingElement as HTMLElement;
+        }
+
+        return (
+          <ScrollSyncPane key="preview-frame-scroll-sync" attachTo={ref}>
+            <EditorPreviewContent
+              key="preview-frame-content"
+              previewComponent={previewComponent}
+              previewProps={{ ...previewProps, document: context.document, window: context.window }}
+            />
+          </ScrollSyncPane>
+        );
+      }}
+    </FrameContextConsumer>
+  );
+};
+
+export default PreviewFrameContent;

packages/core/src/types/react-scroll-sync.d.ts

@@ -0,0 +1,22 @@
+declare module 'react-scroll-sync' {
+  import type { ReactNode, FC, Ref } from 'react';
+
+  export interface ScrollSyncProps {
+    children?: ReactNode;
+    onSync?(el: Element): void;
+    proportional?: boolean | undefined;
+    vertical?: boolean | undefined;
+    horizontal?: boolean | undefined;
+    enabled?: boolean | undefined;
+  }
+
+  export interface ScrollSyncPaneProps {
+    attachTo?: HTMLElement | Ref<HTMLElement | undefined> | undefined;
+    children?: ReactNode;
+    group?: string | string[] | undefined;
+    enabled?: boolean | undefined;
+  }
+
+  export const ScrollSync: FC<ScrollSyncProps>;
+  export const ScrollSyncPane: FC<ScrollSyncPaneProps>;
+}

yarn.lock

@@ -4440,13 +4440,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-scroll-sync@0.8.4":
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/@types/react-scroll-sync/-/react-scroll-sync-0.8.4.tgz#6caa894cb0bf87c205508474d902ce43e433dd7d"
-  integrity sha512-88N2vgZdVqlwr5ayH/5GNAAjfdlzhted/qPTyXgT/DzQwsuIWkwFpZtoOhyGCRmxUC3w5wA+ZhkpbzagIXWNaQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.5":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"