Expose methods for installations to create custom preview components

This commit is contained in:
Mathias Biilmann Christensen
2016-09-11 17:53:44 +02:00
parent c51f42658e
commit 8d63ff0a88
8 changed files with 77 additions and 12 deletions

View File

@ -6,14 +6,17 @@ export default class ControlPane extends React.Component {
controlFor(field) {
const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
const widget = Widgets[field.get('widget')] || Widgets._unknown;
return React.createElement(widget.Control, {
field: field,
value: entry.getIn(['data', field.get('name')]),
onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
onAddMedia: onAddMedia,
onRemoveMedia: onRemoveMedia,
getMedia: getMedia
});
return <div className="cms-control">
<label>{ field.get('label') }</label>
{React.createElement(widget.Control, {
field: field,
value: entry.getIn(['data', field.get('name')]),
onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
onAddMedia: onAddMedia,
onRemoveMedia: onRemoveMedia,
getMedia: getMedia
})}
</div>;
}
render() {

View File

@ -0,0 +1,6 @@
.frame {
width: 100%;
height: 100%;
border: none;
background: #fff;
}

View File

@ -1,7 +1,9 @@
import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { getPreviewTemplate, getPreviewStyles } from '../lib/registry';
import Widgets from './Widgets';
import styles from './PreviewPane.css';
class Preview extends React.Component {
previewFor(field) {
@ -24,23 +26,49 @@ class Preview extends React.Component {
}
}
Preview.propTypes = {
collection: ImmutablePropTypes.map.isRequired,
entry: ImmutablePropTypes.map.isRequired,
getMedia: PropTypes.func.isRequired,
};
export default class PreviewPane extends React.Component {
constructor(props) {
super(props);
this.handleIframeRef = this.handleIframeRef.bind(this);
this.widgetFor = this.widgetFor.bind(this);
}
componentDidUpdate() {
this.renderPreview();
}
widgetFor(name) {
const { collection, entry, getMedia } = this.props;
const field = collection.get('fields').find((field) => field.get('name') === name);
const widget = Widgets[field.get('widget')] || Widgets._unknown;
return React.createElement(widget.Preview, {
field: field,
value: entry.getIn(['data', field.get('name')]),
getMedia: getMedia,
});
}
renderPreview() {
const props = this.props;
render(<Preview {...props}/>, this.previewEl);
const props = Object.assign({}, this.props, {widgetFor: this.widgetFor});
const component = getPreviewTemplate(props.collection.get('name')) || Preview;
render(React.createElement(component, props), this.previewEl);
}
handleIframeRef(ref) {
if (ref) {
getPreviewStyles().forEach((style) => {
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'stylesheet');
linkEl.setAttribute('href', style);
ref.contentDocument.head.appendChild(linkEl);
});
this.previewEl = document.createElement('div');
ref.contentDocument.body.appendChild(this.previewEl);
this.renderPreview();
@ -51,7 +79,7 @@ export default class PreviewPane extends React.Component {
const { collection } = this.props;
if (!collection) { return null; }
return <iframe style={{width: "100%", height: "100%", border: "none"}} ref={this.handleIframeRef}></iframe>
return <iframe className={styles.frame} ref={this.handleIframeRef}></iframe>
}
}

View File

@ -42,6 +42,7 @@ class VisualEditor extends React.Component {
let rawJson;
if (props.value !== undefined) {
const content = this.markdown.toContent(props.value);
console.log('md: %o', content);
rawJson = SlateUtils.encode(content, null, ['mediaproxy'].concat(getPlugins().map(plugin => plugin.id)));
} else {
rawJson = emptyParagraphBlock;