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

Fix scrolling sync pane position in dom

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2022-09-20 11:29:00 -04:00
parent 3e025bc859
commit 122519df2d
4 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/netlify-cms-core/package.json
View File

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

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

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

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

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

7
yarn.lock
View File

@ -3697,6 +3697,13 @@
hoist-non-react-statics "^3.3.0" hoist-non-react-statics "^3.3.0"
redux "^4.0.0" redux "^4.0.0"
"@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-syntax-highlighter@11.0.4": "@types/react-syntax-highlighter@11.0.4":
version "11.0.4" version "11.0.4"
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"