352 lines
9.6 KiB
JavaScript
352 lines
9.6 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import debounce from 'lodash/debounce';
|
|
import styled from 'styled-components';
|
|
import breakpoint from 'styled-components-breakpoint';
|
|
import { observable } from 'mobx';
|
|
import { observer, inject } from 'mobx-react';
|
|
import { withRouter, Prompt } from 'react-router-dom';
|
|
import type { Location } from 'react-router-dom';
|
|
import keydown from 'react-keydown';
|
|
import Flex from 'shared/components/Flex';
|
|
import {
|
|
collectionUrl,
|
|
updateDocumentUrl,
|
|
documentMoveUrl,
|
|
documentEditUrl,
|
|
matchDocumentEdit,
|
|
matchDocumentMove,
|
|
} from 'utils/routeHelpers';
|
|
import { uploadFile } from 'utils/uploadFile';
|
|
import isInternalUrl from 'utils/isInternalUrl';
|
|
|
|
import Document from 'models/Document';
|
|
import Header from './components/Header';
|
|
import DocumentMove from './components/DocumentMove';
|
|
import UiStore from 'stores/UiStore';
|
|
import AuthStore from 'stores/AuthStore';
|
|
import DocumentsStore from 'stores/DocumentsStore';
|
|
import LoadingPlaceholder from 'components/LoadingPlaceholder';
|
|
import LoadingIndicator from 'components/LoadingIndicator';
|
|
import CenteredContent from 'components/CenteredContent';
|
|
import PageTitle from 'components/PageTitle';
|
|
import Search from 'scenes/Search';
|
|
import Error404 from 'scenes/Error404';
|
|
import ErrorOffline from 'scenes/ErrorOffline';
|
|
|
|
const AUTOSAVE_INTERVAL = 3000;
|
|
const MARK_AS_VIEWED_AFTER = 3000;
|
|
const DISCARD_CHANGES = `
|
|
You have unsaved changes.
|
|
Are you sure you want to discard them?
|
|
`;
|
|
const UPLOADING_WARNING = `
|
|
Image are still uploading.
|
|
Are you sure you want to discard them?
|
|
`;
|
|
|
|
type Props = {
|
|
match: Object,
|
|
history: Object,
|
|
location: Location,
|
|
documents: DocumentsStore,
|
|
newDocument?: boolean,
|
|
auth: AuthStore,
|
|
ui: UiStore,
|
|
};
|
|
|
|
@observer
|
|
class DocumentScene extends React.Component<Props> {
|
|
savedTimeout: TimeoutID;
|
|
viewTimeout: TimeoutID;
|
|
|
|
@observable editorComponent;
|
|
@observable editCache: ?string;
|
|
@observable document: ?Document;
|
|
@observable newDocument: ?Document;
|
|
@observable isUploading = false;
|
|
@observable isSaving = false;
|
|
@observable isPublishing = false;
|
|
@observable notFound = false;
|
|
@observable moveModalOpen: boolean = false;
|
|
|
|
componentDidMount() {
|
|
this.loadDocument(this.props);
|
|
this.loadEditor();
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (
|
|
nextProps.match.params.documentSlug !==
|
|
this.props.match.params.documentSlug
|
|
) {
|
|
this.notFound = false;
|
|
this.loadDocument(nextProps);
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearTimeout(this.savedTimeout);
|
|
clearTimeout(this.viewTimeout);
|
|
|
|
this.props.ui.clearActiveDocument();
|
|
}
|
|
|
|
@keydown('m')
|
|
goToMove(ev) {
|
|
ev.preventDefault();
|
|
if (this.document) this.props.history.push(documentMoveUrl(this.document));
|
|
}
|
|
|
|
loadDocument = async props => {
|
|
if (props.newDocument) {
|
|
this.document = new Document({
|
|
collection: { id: props.match.params.id },
|
|
parentDocument: new URLSearchParams(props.location.search).get(
|
|
'parentDocument'
|
|
),
|
|
title: '',
|
|
text: '',
|
|
});
|
|
} else {
|
|
this.document = await this.props.documents.fetch(
|
|
props.match.params.documentSlug,
|
|
{ shareId: props.match.params.shareId }
|
|
);
|
|
|
|
const document = this.document;
|
|
|
|
if (document) {
|
|
this.props.ui.setActiveDocument(document);
|
|
|
|
// Cache data if user enters edit mode and cancels
|
|
this.editCache = document.text;
|
|
|
|
if (this.props.auth.user) {
|
|
if (!this.isEditing && document.publishedAt) {
|
|
this.viewTimeout = setTimeout(document.view, MARK_AS_VIEWED_AFTER);
|
|
}
|
|
|
|
// Update url to match the current one
|
|
this.props.history.replace(
|
|
updateDocumentUrl(props.match.url, document.url)
|
|
);
|
|
}
|
|
} else {
|
|
// Render 404 with search
|
|
this.notFound = true;
|
|
}
|
|
}
|
|
};
|
|
|
|
loadEditor = async () => {
|
|
const EditorImport = await import('./components/Editor');
|
|
this.editorComponent = EditorImport.default;
|
|
};
|
|
|
|
get isEditing() {
|
|
const document = this.document;
|
|
|
|
return !!(
|
|
this.props.match.path === matchDocumentEdit ||
|
|
(document && !document.id)
|
|
);
|
|
}
|
|
|
|
handleCloseMoveModal = () => (this.moveModalOpen = false);
|
|
handleOpenMoveModal = () => (this.moveModalOpen = true);
|
|
|
|
onSave = async (
|
|
options: { done?: boolean, publish?: boolean, autosave?: boolean } = {}
|
|
) => {
|
|
let document = this.document;
|
|
if (!document || !document.allowSave) return;
|
|
|
|
let isNew = !document.id;
|
|
this.editCache = null;
|
|
this.isSaving = true;
|
|
this.isPublishing = !!options.publish;
|
|
document = await document.save(options);
|
|
this.isSaving = false;
|
|
this.isPublishing = false;
|
|
|
|
if (options.done) {
|
|
this.props.history.push(document.url);
|
|
this.props.ui.setActiveDocument(document);
|
|
} else if (isNew) {
|
|
this.props.history.push(documentEditUrl(document));
|
|
this.props.ui.setActiveDocument(document);
|
|
}
|
|
};
|
|
|
|
autosave = debounce(async () => {
|
|
this.onSave({ done: false, autosave: true });
|
|
}, AUTOSAVE_INTERVAL);
|
|
|
|
onImageUploadStart = () => {
|
|
this.isUploading = true;
|
|
};
|
|
|
|
onImageUploadStop = () => {
|
|
this.isUploading = false;
|
|
};
|
|
|
|
onChange = text => {
|
|
let document = this.document;
|
|
if (!document) return;
|
|
if (document.text.trim() === text.trim()) return;
|
|
document.updateData({ text }, true);
|
|
|
|
// prevent autosave before anything has been written
|
|
if (!document.title && !document.id) return;
|
|
this.autosave();
|
|
};
|
|
|
|
onDiscard = () => {
|
|
let url;
|
|
if (this.document && this.document.url) {
|
|
url = this.document.url;
|
|
if (this.editCache) this.document.updateData({ text: this.editCache });
|
|
} else {
|
|
url = collectionUrl(this.props.match.params.id);
|
|
}
|
|
this.props.history.push(url);
|
|
};
|
|
|
|
onUploadImage = async (file: File) => {
|
|
const result = await uploadFile(file);
|
|
return result.url;
|
|
};
|
|
|
|
onSearchLink = async (term: string) => {
|
|
const resultIds = await this.props.documents.search(term);
|
|
|
|
return resultIds.map((id, index) => {
|
|
const document = this.props.documents.getById(id);
|
|
if (!document) return {};
|
|
|
|
return {
|
|
title: document.title,
|
|
url: document.url,
|
|
};
|
|
});
|
|
};
|
|
|
|
onClickLink = (href: string) => {
|
|
if (isInternalUrl(href)) {
|
|
// relative
|
|
if (href[0] === '/') {
|
|
this.props.history.push(href);
|
|
}
|
|
|
|
// absolute
|
|
const url = new URL(href);
|
|
this.props.history.push(url.pathname);
|
|
} else {
|
|
window.open(href, '_blank');
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const { location, match } = this.props;
|
|
const Editor = this.editorComponent;
|
|
const isMoving = match.path === matchDocumentMove;
|
|
const document = this.document;
|
|
const titleFromState = location.state ? location.state.title : '';
|
|
const titleText = document ? document.title : titleFromState;
|
|
const isShare = match.params.shareId;
|
|
|
|
if (this.notFound) {
|
|
return navigator.onLine ? (
|
|
isShare ? (
|
|
<Error404 />
|
|
) : (
|
|
<Search notFound />
|
|
)
|
|
) : (
|
|
<ErrorOffline />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Container key={document ? document.id : undefined} column auto>
|
|
{isMoving && document && <DocumentMove document={document} />}
|
|
{titleText && <PageTitle title={titleText} />}
|
|
{(this.isUploading || this.isSaving) && <LoadingIndicator />}
|
|
{!document || !Editor ? (
|
|
<CenteredContent>
|
|
<LoadingState />
|
|
</CenteredContent>
|
|
) : (
|
|
<Container justify="center" column auto>
|
|
{this.isEditing && (
|
|
<React.Fragment>
|
|
<Prompt
|
|
when={document.hasPendingChanges}
|
|
message={DISCARD_CHANGES}
|
|
/>
|
|
<Prompt when={this.isUploading} message={UPLOADING_WARNING} />
|
|
</React.Fragment>
|
|
)}
|
|
{document &&
|
|
!isShare && (
|
|
<Header
|
|
document={document}
|
|
isDraft={!document.publishedAt}
|
|
isEditing={this.isEditing}
|
|
isSaving={this.isSaving}
|
|
isPublishing={this.isPublishing}
|
|
savingIsDisabled={!document.allowSave}
|
|
history={this.props.history}
|
|
onDiscard={this.onDiscard}
|
|
onSave={this.onSave}
|
|
/>
|
|
)}
|
|
<MaxWidth column auto>
|
|
<Editor
|
|
titlePlaceholder="Start with a title…"
|
|
bodyPlaceholder="…the rest is your canvas"
|
|
defaultValue={document.text}
|
|
pretitle={document.emoji}
|
|
uploadImage={this.onUploadImage}
|
|
onImageUploadStart={this.onImageUploadStart}
|
|
onImageUploadStop={this.onImageUploadStop}
|
|
onSearchLink={this.onSearchLink}
|
|
onClickLink={this.onClickLink}
|
|
onChange={this.onChange}
|
|
onSave={this.onSave}
|
|
onCancel={this.onDiscard}
|
|
readOnly={!this.isEditing}
|
|
toc
|
|
/>
|
|
</MaxWidth>
|
|
</Container>
|
|
)}
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
const MaxWidth = styled(Flex)`
|
|
padding: 0 16px;
|
|
max-width: 100vw;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
${breakpoint('tablet')`
|
|
padding: 0;
|
|
margin: 12px auto;
|
|
max-width: 46em;
|
|
`};
|
|
`;
|
|
|
|
const Container = styled(Flex)`
|
|
position: relative;
|
|
`;
|
|
|
|
const LoadingState = styled(LoadingPlaceholder)`
|
|
margin: 40px 0;
|
|
`;
|
|
|
|
export default withRouter(inject('ui', 'auth', 'documents')(DocumentScene));
|