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

feat(preview-pane): pass iframe window,document as props (#4150)

Browse Source
This commit is contained in:
Erez Rokah 2020-08-16 02:50:32 -07:00 committed by GitHub
parent b1e07c3897
commit d649e960f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import React from 'react';
import styled from '@emotion/styled';
import { List, Map } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Frame from 'react-frame-component';
import Frame, { FrameContextConsumer } from 'react-frame-component';
import { lengths } from 'netlify-cms-ui-default';
import { resolveWidget, getPreviewTemplate, getPreviewStyles } from 'Lib/registry';
import { ErrorBoundary } from 'UI';
@ -225,7 +225,15 @@ export class PreviewPane extends React.Component {
return (
<ErrorBoundary config={config}>
<PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
<EditorPreviewContent {...{ previewComponent, previewProps }} />
<FrameContextConsumer>
{({ document, window }) => {
return (
<EditorPreviewContent
{...{ previewComponent, previewProps: { ...previewProps, document, window } }}
/>
);
}}
</FrameContextConsumer>
</PreviewPaneFrame>
</ErrorBoundary>
);

4
website/content/docs/customization.md
View File

@ -61,7 +61,7 @@ Registers a template for a folder collection or an individual file in a file col
* name: The name of the collection (or file for file collections) which this preview component will be used for.
* Folder collections: Use the name of the collection
* File collections: Use the name of the file
* react_component: A React component that renders the collection data. Four props will be passed to your component during render:
* react_component: A React component that renders the collection data. Six props will be passed to your component during render:
* entry: Immutable collection containing the entry data.
* widgetFor: Returns the appropriate widget preview component for a given field.
* [widgetsFor](#lists-and-objects): Returns an array of objects with widgets and associated field data. For use with list and object type entries.
@ -87,6 +87,8 @@ Registers a template for a folder collection or an individual file in a file col
CMS.registerPreviewTemplate("posts", PostPreview);
</script>
```
* document: The preview pane iframe's [document instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
* window: The preview pane iframe's [window instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
### Lists and Objects
The API for accessing the individual fields of list- and object-type entries is similar to the API for accessing fields in standard entries, but there are a few key differences. Access to these nested fields is facilitated through the `widgetsFor` function, which is passed to the preview template component during render.
**Note**: as is often the case with the NetlifyCMS API, arrays and objects are created with Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out [their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding.