gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-01-23 14:27:38 -05:00 committed by GitHub
parent bab7f68822
commit dad93b42fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 73 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/package.json
View File

@ -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",

26
packages/core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.tsx
View File

@ -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
key="preview-frame-content"
previewComponent={previewComponent}
previewProps={{ ...previewProps, document, window }}
/>
</ScrollSyncPane>
);
}}
</FrameContextConsumer>
<PreviewFrameContent
key="preview-frame-content"
previewComponent={previewComponent}
previewProps={{ ...previewProps }}
/>
)}
</PreviewPaneFrame>
) : (

44
packages/core/src/components/Editor/EditorPreviewPane/PreviewFrameContent.tsx Normal file
View File

@ -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;

22
packages/core/src/types/react-scroll-sync.d.ts vendored Normal file
View File

@ -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>;
}

7
yarn.lock
View File

@ -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"