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

Move sync root

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2022-09-19 22:35:58 -04:00
parent 490c0df56e
commit d55aeabb3d
4 changed files with 97 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
packages/netlify-cms-core/src/components/App/App.js
View File

@ -9,6 +9,7 @@ import { Route, Switch, Redirect } from 'react-router-dom';
import { Notifs } from 'redux-notifications'; import { Notifs } from 'redux-notifications';
import TopBarProgress from 'react-topbar-progress-indicator'; import TopBarProgress from 'react-topbar-progress-indicator';
import { Loader, colors } from 'netlify-cms-ui-default'; import { Loader, colors } from 'netlify-cms-ui-default';
import { ScrollSync } from 'react-scroll-sync';
import { loginUser, logoutUser } from '../../actions/auth'; import { loginUser, logoutUser } from '../../actions/auth';
import { currentBackend } from '../../backend'; import { currentBackend } from '../../backend';
@ -33,10 +34,15 @@ TopBarProgress.config({
barThickness: 2, barThickness: 2,
}); });
const AppRoot = styled.div`
width: 100%;
min-height: 100%;
`;
const AppWrapper = styled.div` const AppWrapper = styled.div`
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
` `;
const AppMainContainer = styled.div` const AppMainContainer = styled.div`
min-width: 1200px; min-width: 1200px;
@ -180,80 +186,84 @@ class App extends React.Component {
const hasWorkflow = publishMode === EDITORIAL_WORKFLOW; const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
return ( return (
<AppWrapper className="cms-wrapper"> <ScrollSync>
<Notifs CustomComponent={Toast} /> <AppRoot id="cms-root">
<Header <AppWrapper className="cms-wrapper">
user={user} <Notifs CustomComponent={Toast} />
collections={collections} <Header
onCreateEntryClick={createNewEntry} user={user}
onLogoutClick={logoutUser}
openMediaLibrary={openMediaLibrary}
hasWorkflow={hasWorkflow}
displayUrl={config.display_url}
isTestRepo={config.backend.name === 'test-repo'}
showMediaButton={showMediaButton}
/>
<AppMainContainer>
{isFetching && <TopBarProgress />}
<Switch>
<Redirect exact from="/" to={defaultPath} />
<Redirect exact from="/search/" to={defaultPath} />
<RouteInCollection
exact
collections={collections} collections={collections}
path="/collections/:name/search/" onCreateEntryClick={createNewEntry}
render={({ match }) => <Redirect to={`/collections/${match.params.name}`} />} onLogoutClick={logoutUser}
openMediaLibrary={openMediaLibrary}
hasWorkflow={hasWorkflow}
displayUrl={config.display_url}
isTestRepo={config.backend.name === 'test-repo'}
showMediaButton={showMediaButton}
/> />
<Redirect <AppMainContainer>
// This happens on Identity + Invite Only + External Provider email not matching {isFetching && <TopBarProgress />}
// the registered user <Switch>
from="/error=access_denied&error_description=Signups+not+allowed+for+this+instance" <Redirect exact from="/" to={defaultPath} />
to={defaultPath} <Redirect exact from="/search/" to={defaultPath} />
/> <RouteInCollection
{hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null} exact
<RouteInCollection collections={collections}
exact path="/collections/:name/search/"
collections={collections} render={({ match }) => <Redirect to={`/collections/${match.params.name}`} />}
path="/collections/:name" />
render={props => <Collection {...props} />} <Redirect
/> // This happens on Identity + Invite Only + External Provider email not matching
<RouteInCollection // the registered user
path="/collections/:name/new" from="/error=access_denied&error_description=Signups+not+allowed+for+this+instance"
collections={collections} to={defaultPath}
render={props => <Editor {...props} newRecord />} />
/> {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
<RouteInCollection <RouteInCollection
path="/collections/:name/entries/*" exact
collections={collections} collections={collections}
render={props => <Editor {...props} />} path="/collections/:name"
/> render={props => <Collection {...props} />}
<RouteInCollection />
path="/collections/:name/search/:searchTerm" <RouteInCollection
collections={collections} path="/collections/:name/new"
render={props => <Collection {...props} isSearchResults isSingleSearchResult />} collections={collections}
/> render={props => <Editor {...props} newRecord />}
<RouteInCollection />
collections={collections} <RouteInCollection
path="/collections/:name/filter/:filterTerm*" path="/collections/:name/entries/*"
render={props => <Collection {...props} />} collections={collections}
/> render={props => <Editor {...props} />}
<Route />
path="/search/:searchTerm" <RouteInCollection
render={props => <Collection {...props} isSearchResults />} path="/collections/:name/search/:searchTerm"
/> collections={collections}
<RouteInCollection render={props => <Collection {...props} isSearchResults isSingleSearchResult />}
path="/edit/:name/:entryName" />
collections={collections} <RouteInCollection
render={({ match }) => { collections={collections}
const { name, entryName } = match.params; path="/collections/:name/filter/:filterTerm*"
return <Redirect to={`/collections/${name}/entries/${entryName}`} />; render={props => <Collection {...props} />}
}} />
/> <Route
<Route component={NotFoundPage} /> path="/search/:searchTerm"
</Switch> render={props => <Collection {...props} isSearchResults />}
{useMediaLibrary ? <MediaLibrary /> : null} />
</AppMainContainer> <RouteInCollection
</AppWrapper> path="/edit/:name/:entryName"
collections={collections}
render={({ match }) => {
const { name, entryName } = match.params;
return <Redirect to={`/collections/${name}/entries/${entryName}`} />;
}}
/>
<Route component={NotFoundPage} />
</Switch>
{useMediaLibrary ? <MediaLibrary /> : null}
</AppMainContainer>
</AppWrapper>
</AppRoot>
</ScrollSync>
); );
} }
} }

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

@ -2,6 +2,7 @@ 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';
@ -26,11 +27,13 @@ export default class Preview extends React.Component {
return null; return null;
} }
return ( return (
<PreviewContainer> <ScrollSyncPane>
{fields.filter(isVisible).map(field => ( <PreviewContainer>
<div key={field.get('name')}>{widgetFor(field.get('name'))}</div> {fields.filter(isVisible).map(field => (
))} <div key={field.get('name')}>{widgetFor(field.get('name'))}</div>
</PreviewContainer> ))}
</PreviewContainer>
</ScrollSyncPane>
); );
} }
} }

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

@ -21,7 +21,7 @@ const StyledPreviewContent = styled.div`
`; `;
const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps) => { const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps) => {
const element = useMemo(() => document.getElementById('nc-root'), []); const element = useMemo(() => document.getElementById('cms-root'), []);
return useMemo(() => { return useMemo(() => {
if (!element) { if (!element) {

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

@ -5,7 +5,6 @@ import { List, Map } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { lengths } from 'netlify-cms-ui-default'; import { lengths } from 'netlify-cms-ui-default';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { ScrollSyncPane } from 'react-scroll-sync';
import { import {
resolveWidget, resolveWidget,
@ -232,13 +231,11 @@ export class PreviewPane extends React.Component {
return ( return (
<ErrorBoundary config={config}> <ErrorBoundary config={config}>
<ScrollSyncPane>{/* attachTo={document.getElementById('control-pane')}>*/} <PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
<PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}> <EditorPreviewContent
<EditorPreviewContent {...{ previewComponent, previewProps: { ...previewProps, document, window } }}
{...{ previewComponent, previewProps: { ...previewProps, document, window } }} />
/> </PreviewPaneFrame>
</PreviewPaneFrame>
</ScrollSyncPane>
</ErrorBoundary> </ErrorBoundary>
); );
} }