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

This commit is contained in:
Erez Rokah
2020-08-16 02:50:32 -07:00
committed by GitHub
parent b1e07c3897
commit d649e960f0
2 changed files with 13 additions and 3 deletions

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.