This commit is contained in:
Jori Lallo
2016-09-02 15:37:43 -07:00
parent 581ba9af7a
commit 74200b2fb2

View File

@ -21,16 +21,13 @@ class MarkdownEditor extends React.Component {
onChange: React.PropTypes.func.isRequired, onChange: React.PropTypes.func.isRequired,
replaceText: React.PropTypes.func.isRequired, replaceText: React.PropTypes.func.isRequired,
onSave: React.PropTypes.func.isRequired, onSave: React.PropTypes.func.isRequired,
onCancel: React.PropTypes.func.isRequired,
// This is actually not used but it triggers // This is actually not used but it triggers
// re-render to help with CodeMirror focus issues // re-render to help with CodeMirror focus issues
preview: React.PropTypes.bool, preview: React.PropTypes.bool,
} }
getEditorInstance = () => {
return this.refs.editor.getCodeMirror();
}
onChange = (newText) => { onChange = (newText) => {
if (newText !== this.props.text) { if (newText !== this.props.text) {
this.props.onChange(newText); this.props.onChange(newText);
@ -64,7 +61,7 @@ class MarkdownEditor extends React.Component {
.then(response => { .then(response => {
const data = response.data; const data = response.data;
// Upload using FormData API // Upload using FormData API
let formData = new FormData(); const formData = new FormData();
for (let key in data.form) { for (let key in data.form) {
formData.append(key, data.form[key]); formData.append(key, data.form[key]);
@ -78,12 +75,12 @@ class MarkdownEditor extends React.Component {
fetch(data.upload_url, { fetch(data.upload_url, {
method: 'post', method: 'post',
body: formData body: formData,
}) })
.then(s3Response => { .then(s3Response => {
this.props.replaceText({ this.props.replaceText({
original: pendingUploadTag, original: pendingUploadTag,
new: `![${file.name}](${data.asset.url})` new: `![${file.name}](${data.asset.url})`,
}); });
editor.setCursor(newCursorPositionLine, 0); editor.setCursor(newCursorPositionLine, 0);
}) })
@ -109,6 +106,10 @@ class MarkdownEditor extends React.Component {
cm.focus(); cm.focus();
} }
getEditorInstance = () => {
return this.refs.editor.getCodeMirror();
}
render = () => { render = () => {
const options = { const options = {
readOnly: false, readOnly: false,
@ -122,33 +123,33 @@ class MarkdownEditor extends React.Component {
extraKeys: { extraKeys: {
Enter: 'newlineAndIndentContinueMarkdownList', Enter: 'newlineAndIndentContinueMarkdownList',
"Ctrl-Enter": this.props.onSave, 'Ctrl-Enter': this.props.onSave,
"Cmd-Enter": this.props.onSave, 'Cmd-Enter': this.props.onSave,
"Cmd-Esc": this.props.onCancel, 'Cmd-Esc': this.props.onCancel,
"Ctrl-Esc": this.props.onCancel, 'Ctrl-Esc': this.props.onCancel,
// "Cmd-Shift-p": this.props.togglePreview, // 'Cmd-Shift-p': this.props.togglePreview,
// "Ctrl-Shift-p": this.props.togglePreview, // 'Ctrl-Shift-p': this.props.togglePreview,
}, },
placeholder: "# Start with a title...", placeholder: '# Start with a title...',
}; };
return ( return (
<Dropzone <Dropzone
onDropAccepted={this.onDropAccepted} onDropAccepted={ this.onDropAccepted }
disableClick={true} disableClick
multiple={false} multiple={ false }
accept={'image/*'} accept="image/*"
className={styles.container} className={ styles.container }
> >
<ClickablePadding onClick={ this.onPaddingTopClick } /> <ClickablePadding onClick={ this.onPaddingTopClick } />
<Codemirror <Codemirror
value={this.props.text} value={ this.props.text }
onChange={this.onChange} onChange={ this.onChange }
options={options} options={ options }
ref="editor" ref="editor"
className={styles.codeMirrorContainer} className={ styles.codeMirrorContainer }
/> />
<ClickablePadding onClick={ this.onPaddingBottomClick } /> <ClickablePadding onClick={ this.onPaddingBottomClick } />
</Dropzone> </Dropzone>