Fix scrolling sync pane position in dom
This commit is contained in:
@ -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",
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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]);
|
||||
|
Reference in New Issue
Block a user