Fixes to editing
This commit is contained in:
Jori Lallo
parent
459c393154
commit
6f33caca45
@ -17,13 +17,13 @@ import { client } from 'utils/ApiClient';
|
||||
@observer
|
||||
class MarkdownEditor extends React.Component {
|
||||
static propTypes = {
|
||||
text: React.PropTypes.string.isRequired,
|
||||
text: React.PropTypes.string,
|
||||
onChange: React.PropTypes.func.isRequired,
|
||||
replaceText: React.PropTypes.func.isRequired,
|
||||
|
||||
// This is actually not used but it triggers
|
||||
// re-render to help with CodeMirror focus issues
|
||||
preview: React.PropTypes.bool.isRequired,
|
||||
preview: React.PropTypes.bool,
|
||||
}
|
||||
|
||||
getEditorInstance = () => {
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import React, { Component } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { browserHistory } from 'react-router';
|
||||
import { browserHistory, withRouter } from 'react-router';
|
||||
|
||||
import store from './DocumentEditStore';
|
||||
import DocumentEditStore, {
|
||||
DOCUMENT_EDIT_SETTINGS,
|
||||
} from './DocumentEditStore';
|
||||
|
||||
import Switch from 'components/Switch';
|
||||
import Layout, { Title, HeaderAction } from 'components/Layout';
|
||||
@ -14,26 +16,43 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
|
||||
import EditorLoader from './components/EditorLoader';
|
||||
import SaveAction from './components/SaveAction';
|
||||
|
||||
import styles from './DocumentEdit.scss';
|
||||
import classNames from 'classnames/bind';
|
||||
const cx = classNames.bind(styles);
|
||||
const DISREGARD_CHANGES = `You have unsaved changes.
|
||||
Are you sure you want to disgard them?`;
|
||||
|
||||
@withRouter
|
||||
@observer
|
||||
class DocumentEdit extends Component {
|
||||
static store;
|
||||
|
||||
static propTypes = {
|
||||
route: React.PropTypes.object.isRequired,
|
||||
router: React.PropTypes.object.isRequired,
|
||||
params: React.PropTypes.object,
|
||||
}
|
||||
|
||||
state = {
|
||||
scrollTop: 0,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = new DocumentEditStore(
|
||||
JSON.parse(localStorage[DOCUMENT_EDIT_SETTINGS] || '{}')
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
// This is a bit hacky, should find a better way
|
||||
store.reset();
|
||||
if (this.props.route.newDocument) {
|
||||
store.atlasId = this.props.params.id;
|
||||
store.newDocument = true;
|
||||
this.store.atlasId = this.props.params.id;
|
||||
this.store.newDocument = true;
|
||||
} else if (this.props.route.newChildDocument) {
|
||||
store.documentId = this.props.params.id;
|
||||
store.newChildDocument = true;
|
||||
store.fetchDocument();
|
||||
this.store.documentId = this.props.params.id;
|
||||
this.store.newChildDocument = true;
|
||||
this.store.fetchDocument();
|
||||
} else {
|
||||
store.documentId = this.props.params.id;
|
||||
store.newDocument = false;
|
||||
store.fetchDocument();
|
||||
this.store.documentId = this.props.params.id;
|
||||
this.store.newDocument = false;
|
||||
this.store.fetchDocument();
|
||||
}
|
||||
|
||||
// Load editor async
|
||||
@ -41,6 +60,14 @@ class DocumentEdit extends Component {
|
||||
.then(({ Editor }) => {
|
||||
this.setState({ Editor });
|
||||
});
|
||||
|
||||
// Set onLeave hook
|
||||
this.props.router.setRouteLeaveHook(this.props.route, () => {
|
||||
if (this.store.hasPendingChanges) {
|
||||
return confirm(DISREGARD_CHANGES);
|
||||
}
|
||||
return;
|
||||
});
|
||||
}
|
||||
|
||||
onSave = () => {
|
||||
@ -48,10 +75,10 @@ class DocumentEdit extends Component {
|
||||
// alert("Please add a title before saving (hint: Write a markdown header)");
|
||||
// return
|
||||
// }
|
||||
if (store.newDocument || store.newChildDocument) {
|
||||
store.saveDocument();
|
||||
if (this.store.newDocument || this.store.newChildDocument) {
|
||||
this.store.saveDocument();
|
||||
} else {
|
||||
store.updateDocument();
|
||||
this.store.updateDocument();
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,43 +86,37 @@ class DocumentEdit extends Component {
|
||||
browserHistory.goBack();
|
||||
}
|
||||
|
||||
state = {
|
||||
scrollTop: 0,
|
||||
}
|
||||
|
||||
onScroll = (scrollTop) => {
|
||||
this.setState({
|
||||
scrollTop: scrollTop,
|
||||
})
|
||||
}
|
||||
|
||||
onPreviewToggle = () => {
|
||||
store.togglePreview();
|
||||
scrollTop,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("DocumentEdit#render", this.store.preview);
|
||||
|
||||
let title = (
|
||||
<Title
|
||||
truncate={ 60 }
|
||||
placeholder={ "Untitle document" }
|
||||
>
|
||||
{ store.title }
|
||||
{ this.store.title }
|
||||
</Title>
|
||||
);
|
||||
|
||||
let titleText = store.title;
|
||||
let titleText = this.store.title;
|
||||
|
||||
const actions = (
|
||||
<Flex direction="row">
|
||||
<HeaderAction>
|
||||
<SaveAction
|
||||
onClick={ this.onSave }
|
||||
disabled={ store.isSaving }
|
||||
disabled={ this.store.isSaving }
|
||||
/>
|
||||
</HeaderAction>
|
||||
<DropdownMenu label="More">
|
||||
<MenuItem onClick={ this.onPreviewToggle }>
|
||||
Preview <Switch checked={ store.preview } />
|
||||
<MenuItem onClick={ this.store.togglePreview }>
|
||||
Preview <Switch checked={ this.store.preview } />
|
||||
</MenuItem>
|
||||
<MenuItem onClick={ this.onCancel }>
|
||||
Cancel
|
||||
@ -109,16 +130,16 @@ class DocumentEdit extends Component {
|
||||
actions={ actions }
|
||||
title={ title }
|
||||
titleText={ titleText }
|
||||
fixed={ true }
|
||||
loading={ store.isSaving }
|
||||
fixed
|
||||
loading={ this.store.isSaving }
|
||||
>
|
||||
{ (store.isFetching || !('Editor' in this.state)) ? (
|
||||
{ (this.store.isFetching || !('Editor' in this.state)) ? (
|
||||
<CenteredContent>
|
||||
<AtlasPreviewLoading />
|
||||
</CenteredContent>
|
||||
) : (
|
||||
<this.state.Editor
|
||||
store={ store }
|
||||
store={ this.store }
|
||||
scrollTop={ this.state.scrollTop }
|
||||
onScroll={ this.onScroll }
|
||||
/>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { observable, action, computed, autorun, toJS } from 'mobx';
|
||||
import { observable, action, toJS, autorun } from 'mobx';
|
||||
import { client } from 'utils/ApiClient';
|
||||
import localforage from 'localforage';
|
||||
import { browserHistory } from 'react-router';
|
||||
import emojify from 'utils/emojify';
|
||||
|
||||
@ -8,122 +7,141 @@ const DOCUMENT_EDIT_SETTINGS = 'DOCUMENT_EDIT_SETTINGS';
|
||||
|
||||
const parseHeader = (text) => {
|
||||
const firstLine = text.split(/\r?\n/)[0];
|
||||
const match = firstLine.match(/^#+ +(.*)$/);
|
||||
if (firstLine) {
|
||||
const match = firstLine.match(/^#+ +(.*)$/);
|
||||
|
||||
if (match) {
|
||||
return emojify(match[1]);
|
||||
if (match) {
|
||||
return emojify(match[1]);
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const documentEditStore = new class DocumentEditStore {
|
||||
@observable documentId = null;
|
||||
@observable atlasId = null;
|
||||
@observable parentDocument;
|
||||
@observable title;
|
||||
@observable text;
|
||||
@observable newDocument;
|
||||
@observable newChildDocument;
|
||||
class DocumentEditStore {
|
||||
@observable documentId = null;
|
||||
@observable atlasId = null;
|
||||
@observable parentDocument;
|
||||
@observable title;
|
||||
@observable text;
|
||||
@observable hasPendingChanges = false;
|
||||
@observable newDocument;
|
||||
@observable newChildDocument;
|
||||
|
||||
@observable preview;
|
||||
@observable isFetching;
|
||||
@observable isSaving;
|
||||
@observable preview;
|
||||
@observable isFetching;
|
||||
@observable isSaving;
|
||||
|
||||
/* Actions */
|
||||
/* Actions */
|
||||
|
||||
@action fetchDocument = async () => {
|
||||
this.isFetching = true;
|
||||
@action fetchDocument = async () => {
|
||||
this.isFetching = true;
|
||||
|
||||
try {
|
||||
const data = await client.post('/documents.info', {
|
||||
id: this.documentId,
|
||||
})
|
||||
if (this.newChildDocument) {
|
||||
this.parentDocument = data.data;
|
||||
} else {
|
||||
const { title, text } = data.data;
|
||||
this.title = title;
|
||||
this.text = text;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isFetching = false;
|
||||
}
|
||||
|
||||
@action saveDocument = async (nextPath) => {
|
||||
if (this.isSaving) return;
|
||||
|
||||
this.isSaving = true;
|
||||
|
||||
try {
|
||||
const data = await client.post('/documents.create', {
|
||||
parentDocument: this.parentDocument && this.parentDocument.id,
|
||||
atlas: this.atlasId || this.parentDocument.atlas.id,
|
||||
title: this.title,
|
||||
text: this.text,
|
||||
})
|
||||
const { id } = data.data;
|
||||
browserHistory.push(`/documents/${id}`);
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isSaving = false;
|
||||
}
|
||||
|
||||
@action updateDocument = async (nextPath) => {
|
||||
if (this.isSaving) return;
|
||||
|
||||
this.isSaving = true;
|
||||
|
||||
try {
|
||||
const data = await client.post('/documents.update', {
|
||||
id: this.documentId,
|
||||
title: this.title,
|
||||
text: this.text,
|
||||
})
|
||||
browserHistory.push(`/documents/${this.documentId}`);
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isSaving = false;
|
||||
}
|
||||
|
||||
@action updateText = (text) => {
|
||||
this.text = text;
|
||||
this.title = parseHeader(text);
|
||||
}
|
||||
|
||||
@action updateTitle = (title) => {
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
@action replaceText = (args) => {
|
||||
this.text = this.text.replace(args.original, args.new);
|
||||
}
|
||||
|
||||
@action togglePreview = () => {
|
||||
this.preview = !this.preview;
|
||||
}
|
||||
|
||||
@action reset = () => {
|
||||
this.title = 'Lets start with a title';
|
||||
this.text = '# Lets start with a title\n\nAnd continue from there...';
|
||||
}
|
||||
|
||||
constructor() {
|
||||
// Rehydrate settings
|
||||
localforage.getItem(DOCUMENT_EDIT_SETTINGS)
|
||||
.then(data => {
|
||||
this.preview = data.preview;
|
||||
try {
|
||||
const data = await client.post('/documents.info', {
|
||||
id: this.documentId,
|
||||
});
|
||||
if (this.newChildDocument) {
|
||||
this.parentDocument = data.data;
|
||||
} else {
|
||||
const { title, text } = data.data;
|
||||
this.title = title;
|
||||
this.text = text;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Something went wrong');
|
||||
}
|
||||
}();
|
||||
this.isFetching = false;
|
||||
}
|
||||
|
||||
// Persist settings to localStorage
|
||||
autorun(() => {
|
||||
localforage.setItem(DOCUMENT_EDIT_SETTINGS, {
|
||||
preview: documentEditStore.preview,
|
||||
});
|
||||
});
|
||||
@action saveDocument = async () => {
|
||||
if (this.isSaving) return;
|
||||
|
||||
export default documentEditStore;
|
||||
this.isSaving = true;
|
||||
|
||||
try {
|
||||
const data = await client.post('/documents.create', {
|
||||
parentDocument: this.parentDocument && this.parentDocument.id,
|
||||
atlas: this.atlasId || this.parentDocument.atlas.id,
|
||||
title: this.title,
|
||||
text: this.text,
|
||||
});
|
||||
const { id } = data.data;
|
||||
|
||||
this.hasPendingChanges = false;
|
||||
browserHistory.push(`/documents/${id}`);
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isSaving = false;
|
||||
}
|
||||
|
||||
@action updateDocument = async () => {
|
||||
if (this.isSaving) return;
|
||||
|
||||
this.isSaving = true;
|
||||
|
||||
try {
|
||||
await client.post('/documents.update', {
|
||||
id: this.documentId,
|
||||
title: this.title,
|
||||
text: this.text,
|
||||
});
|
||||
|
||||
this.hasPendingChanges = false;
|
||||
browserHistory.push(`/documents/${this.documentId}`);
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isSaving = false;
|
||||
}
|
||||
|
||||
@action updateText = (text) => {
|
||||
this.text = text;
|
||||
this.title = parseHeader(text);
|
||||
this.hasPendingChanges = true;
|
||||
}
|
||||
|
||||
@action updateTitle = (title) => {
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
@action replaceText = (args) => {
|
||||
this.text = this.text.replace(args.original, args.new);
|
||||
this.hasPendingChanges = true;
|
||||
}
|
||||
|
||||
@action togglePreview = () => {
|
||||
this.preview = !this.preview;
|
||||
}
|
||||
|
||||
@action reset = () => {
|
||||
this.title = 'Lets start with a title';
|
||||
this.text = '# Lets start with a title\n\nAnd continue from there...';
|
||||
}
|
||||
|
||||
// Generic
|
||||
|
||||
persistSettings = () => {
|
||||
localStorage[DOCUMENT_EDIT_SETTINGS] = JSON.stringify({
|
||||
preview: toJS(this.preview),
|
||||
});
|
||||
}
|
||||
|
||||
constructor(settings) {
|
||||
// Rehydrate settings
|
||||
this.preview = settings.preview
|
||||
|
||||
// Persist settings to localStorage
|
||||
// TODO: This could be done more selectively
|
||||
autorun(() => {
|
||||
this.persistSettings();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default DocumentEditStore;
|
||||
export {
|
||||
DOCUMENT_EDIT_SETTINGS
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@ import emojiMapping from './emoji-mapping.json';
|
||||
|
||||
const EMOJI_REGEX = /:([A-Za-z0-9_\-\+]+?):/gm;
|
||||
|
||||
const emojify = (text) => {
|
||||
const emojify = (text='') => {
|
||||
const emojis = text.match(EMOJI_REGEX) || [];
|
||||
let emojifiedText = text;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user