Maor UI polish for editing with live preview
This commit is contained in:
@ -23,7 +23,7 @@ export default class ControlPane extends React.Component {
|
||||
const { collection } = this.props;
|
||||
if (!collection) { return null; }
|
||||
return <div>
|
||||
{collection.get('fields').map((field) => <div key={field.get('name')}>{this.controlFor(field)}</div>)}
|
||||
{collection.get('fields').map((field) => <div key={field.get('name')} className="cms-widget">{this.controlFor(field)}</div>)}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +1,24 @@
|
||||
.entryEditor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.container {
|
||||
display: flex
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.footer {
|
||||
background: #fff;
|
||||
height: 45px;
|
||||
border-top: 1px solid #e8eae8;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.controlPane {
|
||||
width: 50%;
|
||||
padding: 0 10px;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid #e8eae8;
|
||||
}
|
||||
.previewPane {
|
||||
width: 50%;
|
||||
|
@ -4,27 +4,57 @@ import ControlPane from './ControlPane';
|
||||
import PreviewPane from './PreviewPane';
|
||||
import styles from './EntryEditor.css';
|
||||
|
||||
export default function EntryEditor({ collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist }) {
|
||||
return <div>
|
||||
<h1>Entry in {collection.get('label')}</h1>
|
||||
<h2>{entry && entry.get('title')}</h2>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.controlPane}>
|
||||
<ControlPane
|
||||
collection={collection}
|
||||
entry={entry}
|
||||
getMedia={getMedia}
|
||||
onChange={onChange}
|
||||
onAddMedia={onAddMedia}
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
/>
|
||||
export default class EntryEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
this.handleResize = this.handleResize.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.calculateHeight();
|
||||
window.addEventListener('resize', this.handleResize, false);
|
||||
}
|
||||
|
||||
componengWillUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
handleResize() {
|
||||
this.calculateHeight();
|
||||
}
|
||||
|
||||
calculateHeight() {
|
||||
const height = window.innerHeight - 54;
|
||||
console.log('setting height to %s', height);
|
||||
this.setState({height});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
|
||||
const {height} = this.state;
|
||||
|
||||
return <div className={styles.entryEditor} style={{height}}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.controlPane}>
|
||||
<ControlPane
|
||||
collection={collection}
|
||||
entry={entry}
|
||||
getMedia={getMedia}
|
||||
onChange={onChange}
|
||||
onAddMedia={onAddMedia}
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.previewPane}>
|
||||
<PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.previewPane}>
|
||||
<PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
|
||||
<div className={styles.footer}>
|
||||
<button onClick={onPersist}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onPersist}>Save</button>
|
||||
</div>;
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
EntryEditor.propTypes = {
|
||||
|
@ -3,6 +3,8 @@ import UnknownControl from './Widgets/UnknownControl';
|
||||
import UnknownPreview from './Widgets/UnknownPreview';
|
||||
import StringControl from './Widgets/StringControl';
|
||||
import StringPreview from './Widgets/StringPreview';
|
||||
import TextControl from './Widgets/TextControl';
|
||||
import TextPreview from './Widgets/TextPreview';
|
||||
import MarkdownControl from './Widgets/MarkdownControl';
|
||||
import MarkdownPreview from './Widgets/MarkdownPreview';
|
||||
import ImageControl from './Widgets/ImageControl';
|
||||
@ -11,6 +13,7 @@ import DateTimeControl from './Widgets/DateTimeControl';
|
||||
import DateTimePreview from './Widgets/DateTimePreview';
|
||||
|
||||
registry.registerWidget('string', StringControl, StringPreview);
|
||||
registry.registerWidget('text', TextControl, TextPreview);
|
||||
registry.registerWidget('markdown', MarkdownControl, MarkdownPreview);
|
||||
registry.registerWidget('image', ImageControl, ImagePreview);
|
||||
registry.registerWidget('datetime', DateTimeControl, DateTimePreview);
|
||||
|
@ -18,5 +18,5 @@ export default class DateTimeControl extends React.Component {
|
||||
|
||||
DateTimeControl.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
value: PropTypes.object,
|
||||
};
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import registry from '../../lib/registry';
|
||||
import RawEditor from './MarkdownControlElements/RawEditor';
|
||||
import VisualEditor from './MarkdownControlElements/VisualEditor';
|
||||
import { processEditorPlugins } from './richText';
|
||||
@ -13,7 +14,8 @@ class MarkdownControl extends React.Component {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
processEditorPlugins(this.context.plugins.editor);
|
||||
this.useRawEditor();
|
||||
processEditorPlugins(registry.getEditorComponents());
|
||||
}
|
||||
|
||||
useVisualEditor() {
|
||||
@ -28,8 +30,8 @@ class MarkdownControl extends React.Component {
|
||||
const { editor, onChange, onAddMedia, getMedia, value } = this.props;
|
||||
if (editor.get('useVisualMode')) {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.useRawEditor}>Switch to Raw Editor</button>
|
||||
<div className='cms-editor-visual'>
|
||||
{null && <button onClick={this.useRawEditor}>Switch to Raw Editor</button>}
|
||||
<VisualEditor
|
||||
onChange={onChange}
|
||||
onAddMedia={onAddMedia}
|
||||
@ -41,8 +43,8 @@ class MarkdownControl extends React.Component {
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.useVisualEditor}>Switch to Visual Editor</button>
|
||||
<div className='cms-editor-raw'>
|
||||
{null && <button onClick={this.useVisualEditor}>Switch to Visual Editor</button>}
|
||||
<RawEditor
|
||||
onChange={onChange}
|
||||
onAddMedia={onAddMedia}
|
||||
|
51
src/components/Widgets/MarkdownControlElements/plugins.js
Normal file
51
src/components/Widgets/MarkdownControlElements/plugins.js
Normal file
@ -0,0 +1,51 @@
|
||||
import { Component, PropTypes, Children } from 'react';
|
||||
import { List, Record } from 'immutable';
|
||||
import _ from 'lodash';
|
||||
|
||||
const plugins = { editor: List() };
|
||||
|
||||
const catchesNothing = /.^/;
|
||||
const EditorComponent = Record({
|
||||
id: null,
|
||||
label: 'unnamed component',
|
||||
icon: 'exclamation-triangle',
|
||||
fields: [],
|
||||
pattern: catchesNothing,
|
||||
fromBlock: function(match) { return {}; },
|
||||
toBlock: function(attributes) { return 'Plugin'; },
|
||||
toPreview: function(attributes) { return 'Plugin'; }
|
||||
});
|
||||
|
||||
|
||||
class Plugin extends Component {
|
||||
getChildContext() {
|
||||
return { plugins: plugins };
|
||||
}
|
||||
|
||||
render() {
|
||||
return Children.only(this.props.children);
|
||||
}
|
||||
}
|
||||
|
||||
Plugin.propTypes = {
|
||||
children: PropTypes.element.isRequired
|
||||
};
|
||||
Plugin.childContextTypes = {
|
||||
plugins: PropTypes.object
|
||||
};
|
||||
|
||||
export function newEditorPlugin(config) {
|
||||
const configObj = new EditorComponent({
|
||||
id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
|
||||
label: config.label,
|
||||
icon: config.icon,
|
||||
fields: config.fields,
|
||||
pattern: config.pattern,
|
||||
fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
|
||||
toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
|
||||
toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
|
||||
});
|
||||
|
||||
|
||||
return configObj;
|
||||
}
|
37
src/components/Widgets/TextControl.js
Normal file
37
src/components/Widgets/TextControl.js
Normal file
@ -0,0 +1,37 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
export default class StringControl extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleRef = this.handleRef.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateHeight();
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.props.onChange(e.target.value);
|
||||
this.updateHeight();
|
||||
}
|
||||
|
||||
updateHeight() {
|
||||
if (this.element.scrollHeight > this.element.clientHeight) {
|
||||
this.element.style.height = this.element.scrollHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
handleRef(ref) {
|
||||
this.element = ref;
|
||||
}
|
||||
|
||||
render() {
|
||||
return <textarea ref={this.handleRef} value={this.props.value || ''} onChange={this.handleChange}/>;
|
||||
}
|
||||
}
|
||||
|
||||
StringControl.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
};
|
4
src/components/Widgets/TextPreview.js
Normal file
4
src/components/Widgets/TextPreview.js
Normal file
@ -0,0 +1,4 @@
|
||||
import StringPreview from './StringPreview';
|
||||
|
||||
export default class TextPreview extends StringPreview {
|
||||
}
|
@ -48,8 +48,6 @@ function processEditorPlugins(plugins) {
|
||||
<div className="plugin_fields" contentEditable={false}>
|
||||
{ plugin.fields.map(field => `${field.label}: “${node.data.get(field.name)}”`) }
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user