diff --git a/frontend/components/Editor/components/Heading.js b/frontend/components/Editor/components/Heading.js index 9aa1431fe..3a7aaa101 100644 --- a/frontend/components/Editor/components/Heading.js +++ b/frontend/components/Editor/components/Heading.js @@ -17,32 +17,6 @@ type Props = { component?: string, }; -const Wrapper = styled.div` - display: inline; - margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)} -`; - -const Anchor = styled.a` - visibility: hidden; - padding-left: .25em; - color: #dedede; - - &:hover { - color: #cdcdcd; - } -`; - -// $FlowIssue I don't know -const titleStyles = component => styled(component)` - position: relative; - - &:hover { - ${Anchor} { - visibility: visible; - } - } -`; - function Heading(props: Props) { const { parent, @@ -58,7 +32,7 @@ function Heading(props: Props) { const showPlaceholder = placeholder && firstHeading && !node.text; const slugish = _.escape(`${component}-${slug(node.text)}`); const showHash = readOnly && !!slugish; - const Component = titleStyles(component); + const Component = component; const emoji = editor.props.emoji || ''; const title = node.text.trim(); const startsWithEmojiAndSpace = @@ -76,4 +50,32 @@ function Heading(props: Props) { ); } +const Wrapper = styled.div` + display: inline; + margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)} +`; + +const Anchor = styled.a` + visibility: hidden; + padding-left: .25em; + color: #dedede; + + &:hover { + color: #cdcdcd; + } +`; + +export const Heading1 = styled(Heading)` + &:hover { + ${Anchor} { + visibility: visible; + } + } +`; +export const Heading2 = Heading1.withComponent('h2'); +export const Heading3 = Heading1.withComponent('h3'); +export const Heading4 = Heading1.withComponent('h4'); +export const Heading5 = Heading1.withComponent('h5'); +export const Heading6 = Heading1.withComponent('h6'); + export default Heading; diff --git a/frontend/components/Editor/schema.js b/frontend/components/Editor/schema.js index e90f2e84a..6c95d36a9 100644 --- a/frontend/components/Editor/schema.js +++ b/frontend/components/Editor/schema.js @@ -6,7 +6,14 @@ import InlineCode from './components/InlineCode'; import Image from './components/Image'; import Link from './components/Link'; import ListItem from './components/ListItem'; -import Heading from './components/Heading'; +import { + Heading1, + Heading2, + Heading3, + Heading4, + Heading5, + Heading6, +} from './components/Heading'; import Paragraph from './components/Paragraph'; import type { Props, Node, Transform } from './types'; @@ -47,12 +54,12 @@ const createSchema = () => { image: Image, link: Link, 'list-item': ListItem, - heading1: (props: Props) => , - heading2: (props: Props) => , - heading3: (props: Props) => , - heading4: (props: Props) => , - heading5: (props: Props) => , - heading6: (props: Props) => , + heading1: (props: Props) => , + heading2: (props: Props) => , + heading3: (props: Props) => , + heading4: (props: Props) => , + heading5: (props: Props) => , + heading6: (props: Props) => , }, rules: [ diff --git a/frontend/components/Icon/ChevronIcon.js b/frontend/components/Icon/ChevronIcon.js new file mode 100644 index 000000000..88453bbce --- /dev/null +++ b/frontend/components/Icon/ChevronIcon.js @@ -0,0 +1,21 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function NextIcon(props: Props) { + return ( + + + + + + + ); +} diff --git a/frontend/components/Input/Input.js b/frontend/components/Input/Input.js index b8420ed1a..6b25d24f7 100644 --- a/frontend/components/Input/Input.js +++ b/frontend/components/Input/Input.js @@ -24,7 +24,7 @@ const RealInput = styled.input` background: none; &::placeholder { - color: ${color.slateLight}; + color: ${color.slate}; } `; @@ -55,7 +55,7 @@ const LabelText = styled.div` export type Props = { type: string, - value: string, + value?: string, label?: string, className?: string, }; diff --git a/frontend/components/Labeled/Labeled.js b/frontend/components/Labeled/Labeled.js new file mode 100644 index 000000000..bfff39c91 --- /dev/null +++ b/frontend/components/Labeled/Labeled.js @@ -0,0 +1,29 @@ +// @flow +import React from 'react'; +import { observer } from 'mobx-react'; +import Flex from 'components/Flex'; +import styled from 'styled-components'; +import { size } from 'styles/constants'; + +type Props = { + label: React.Element<*> | string, + children: React.Element<*>, +}; + +const Labeled = ({ label, children, ...props }: Props) => ( + +
{label}
+ {children} + +); + +const Header = styled(Flex)` + margin-bottom: ${size.medium}; + font-size: 13px; + font-weight: 500; + text-transform: uppercase; + color: #9FA6AB; + letter-spacing: 0.04em; +`; + +export default observer(Labeled); diff --git a/frontend/components/Labeled/index.js b/frontend/components/Labeled/index.js new file mode 100644 index 000000000..544f6a7b3 --- /dev/null +++ b/frontend/components/Labeled/index.js @@ -0,0 +1,3 @@ +// @flow +import Labeled from './Labeled'; +export default Labeled; diff --git a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js index 9d1cefdda..4ada3fa99 100644 --- a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js +++ b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js @@ -43,7 +43,7 @@ const activeStyle = { {!canDropToImport && {doc.title}} - {(document.pathToDocument.includes(doc.id) || + {(document.pathToDocument.map(entry => entry.id).includes(doc.id) || document.id === doc.id) && {doc.children && this.renderDocuments(doc.children, depth + 1)} diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index cde113089..d0b208e93 100644 --- a/frontend/components/Modal/Modal.js +++ b/frontend/components/Modal/Modal.js @@ -1,5 +1,6 @@ // @flow import React from 'react'; +import { observer } from 'mobx-react'; import styled from 'styled-components'; import ReactModal from 'react-modal'; import { color } from 'styles/constants'; @@ -75,4 +76,4 @@ const Close = styled.a` } `; -export default Modal; +export default observer(Modal); diff --git a/frontend/index.js b/frontend/index.js index 9754daaa2..e6784ea7e 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -39,6 +39,8 @@ import RouteSidebarHidden from 'components/RouteSidebarHidden'; import flatpages from 'static/flatpages'; +import { matchDocumentSlug } from 'utils/routeHelpers'; + let DevTools; if (__DEV__) { DevTools = require('mobx-react-devtools').default; // eslint-disable-line global-require @@ -93,8 +95,6 @@ const RedirectDocument = ({ match }: { match: Object }) => ( ); -const matchDocumentSlug = ':documentSlug([0-9a-zA-Z-]*-[a-zA-z0-9]{10,15})'; - render(
@@ -123,6 +123,11 @@ render( path={`/doc/${matchDocumentSlug}`} component={Document} /> + @@ -132,7 +137,7 @@ render( { if (data.collectionId === this.id) this.fetch(); }); + this.on( + 'collections.update', + (data: { id: string, collection: Collection }) => { + // FIXME: calling this.updateData won't update the + // UI. Some mobx issue + if (data.id === this.id) this.fetch(); + } + ); + this.on('documents.move', (data: { collectionId: string }) => { + if (data.collectionId === this.id) this.fetch(); + }); } } diff --git a/frontend/models/Document.js b/frontend/models/Document.js index ea39c2f62..cafcdefb5 100644 --- a/frontend/models/Document.js +++ b/frontend/models/Document.js @@ -47,11 +47,17 @@ class Document extends BaseModel { return !!this.lastViewedAt && this.lastViewedAt < this.updatedAt; } - @computed get pathToDocument(): Array { + @computed get pathToDocument(): Array<{ id: string, title: string }> { let path; const traveler = (nodes, previousPath) => { nodes.forEach(childNode => { - const newPath = [...previousPath, childNode.id]; + const newPath = [ + ...previousPath, + { + id: childNode.id, + title: childNode.title, + }, + ]; if (childNode.id === this.id) { path = newPath; return; @@ -160,6 +166,11 @@ class Document extends BaseModel { this.updateData(res.data); this.hasPendingChanges = false; }); + + this.emit('collections.update', { + id: this.collection.id, + collection: this.collection, + }); } catch (e) { this.errors.add('Document failed saving'); } finally { @@ -169,6 +180,24 @@ class Document extends BaseModel { return this; }; + @action move = async (parentDocumentId: ?string) => { + try { + const res = await client.post('/documents.move', { + id: this.id, + parentDocument: parentDocumentId, + }); + invariant(res && res.data, 'Data not available'); + this.updateData(res.data); + this.emit('documents.move', { + id: this.id, + collectionId: this.collection.id, + }); + } catch (e) { + this.errors.add('Error while moving the document'); + } + return; + }; + @action delete = async () => { try { await client.post('/documents.delete', { id: this.id }); diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index b8dbff7be..234805e19 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -5,11 +5,18 @@ import styled from 'styled-components'; import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; import { withRouter, Prompt } from 'react-router'; +import keydown from 'react-keydown'; import Flex from 'components/Flex'; import { color, layout } from 'styles/constants'; -import { collectionUrl } from 'utils/routeHelpers'; +import { + collectionUrl, + updateDocumentUrl, + matchDocumentEdit, + matchDocumentMove, +} from 'utils/routeHelpers'; import Document from 'models/Document'; +import DocumentMove from './components/DocumentMove'; import UiStore from 'stores/UiStore'; import DocumentsStore from 'stores/DocumentsStore'; import Menu from './components/Menu'; @@ -49,6 +56,8 @@ type Props = { @observable showAsSaved = false; @observable notFound = false; + @observable moveModalOpen: boolean = false; + componentDidMount() { this.loadDocument(this.props); } @@ -68,6 +77,12 @@ type Props = { this.props.ui.clearActiveDocument(); } + @keydown('m') + goToMove(event) { + event.preventDefault(); + if (this.document) this.props.history.push(`${this.document.url}/move`); + } + loadDocument = async props => { if (props.newDocument) { const newDocument = new Document({ @@ -90,6 +105,11 @@ type Props = { // Cache data if user enters edit mode and cancels this.editCache = document.text; document.view(); + + // Update url to match the current one + this.props.history.replace( + updateDocumentUrl(this.props.match.url, document.url) + ); } else { // Render 404 with search this.notFound = true; @@ -115,6 +135,9 @@ type Props = { this.props.history.push(`${this.document.collection.url}/new`); }; + handleCloseMoveModal = () => (this.moveModalOpen = false); + handleOpenMoveModal = () => (this.moveModalOpen = true); + onSave = async (redirect: boolean = false) => { if (this.document && !this.document.allowSave) return; let document = this.document; @@ -176,7 +199,8 @@ type Props = { render() { const isNew = this.props.newDocument; - const isEditing = !!this.props.match.params.edit || isNew; + const isMoving = this.props.match.path === matchDocumentMove; + const isEditing = this.props.match.path === matchDocumentEdit || isNew; const isFetching = !this.document; const titleText = get(this.document, 'title', ''); const document = this.document; @@ -187,6 +211,8 @@ type Props = { return ( + {isMoving && document && } + {this.isDragging && Drop files here to import into Atlas. diff --git a/frontend/scenes/Document/components/DocumentMove/DocumentMove.js b/frontend/scenes/Document/components/DocumentMove/DocumentMove.js new file mode 100644 index 000000000..d6268a039 --- /dev/null +++ b/frontend/scenes/Document/components/DocumentMove/DocumentMove.js @@ -0,0 +1,153 @@ +// @flow +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import { observable, action } from 'mobx'; +import { observer, inject } from 'mobx-react'; +import { withRouter } from 'react-router'; +import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; +import _ from 'lodash'; +import styled from 'styled-components'; +import { size } from 'styles/constants'; + +import Modal from 'components/Modal'; +import Input from 'components/Input'; +import Labeled from 'components/Labeled'; +import Flex from 'components/Flex'; +import PathToDocument from './components/PathToDocument'; + +import Document from 'models/Document'; +import DocumentsStore from 'stores/DocumentsStore'; + +type Props = { + match: Object, + history: Object, + document: Document, + documents: DocumentsStore, +}; + +@observer class DocumentMove extends Component { + props: Props; + firstDocument: HTMLElement; + + @observable isSaving: boolean; + @observable resultIds: Array = []; // Document IDs + @observable searchTerm: ?string = null; + @observable isFetching = false; + + componentDidMount() { + this.setDefaultResult(); + } + + handleKeyDown = ev => { + // Down + if (ev.which === 40) { + ev.preventDefault(); + if (this.firstDocument) { + const element = ReactDOM.findDOMNode(this.firstDocument); + // $FlowFixMe + if (element && element.focus) element.focus(); + } + } + }; + + handleClose = () => { + this.props.history.push(this.props.document.url); + }; + + handleFilter = (e: SyntheticInputEvent) => { + const value = e.target.value; + this.searchTerm = value; + this.updateSearchResults(); + }; + + updateSearchResults = _.debounce(() => { + this.search(); + }, 250); + + setFirstDocumentRef = ref => { + this.firstDocument = ref; + }; + + @action setDefaultResult() { + this.resultIds = this.props.document.collection.documents.map( + doc => doc.id + ); + } + + @action search = async () => { + this.isFetching = true; + + if (this.searchTerm) { + try { + this.resultIds = await this.props.documents.search(this.searchTerm); + } catch (e) { + console.error('Something went wrong'); + } + } else { + this.setDefaultResult(); + } + + this.isFetching = false; + }; + + render() { + const { document, documents } = this.props; + + return ( + +
+ + + +
+ +
+ + + + + + this.setFirstDocumentRef(ref)} + onSuccess={this.handleClose} + /> + {this.resultIds.map((documentId, index) => ( + + ))} + + +
+ + ); + } +} + +const Section = styled(Flex)` + margin-bottom: ${size.huge}; +`; + +const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` + display: flex; + flex-direction: column; + flex: 1; +`; + +export default withRouter(inject('documents')(DocumentMove)); diff --git a/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js new file mode 100644 index 000000000..1c2ec5ff2 --- /dev/null +++ b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js @@ -0,0 +1,99 @@ +// @flow +import React from 'react'; +import { observer } from 'mobx-react'; +import _ from 'lodash'; +import invariant from 'invariant'; +import styled from 'styled-components'; +import { color } from 'styles/constants'; + +import Flex from 'components/Flex'; +import ChevronIcon from 'components/Icon/ChevronIcon'; + +import Document from 'models/Document'; +import DocumentsStore from 'stores/DocumentsStore'; + +const ResultWrapper = styled.div` +display: flex; +margin-bottom: 10px; + +color: ${color.text}; +cursor: default; +`; + +const ResultWrapperLink = ResultWrapper.withComponent('a').extend` +padding-top: 3px; +padding-left: 5px; + +&:hover, +&:active, +&:focus { + margin-left: 0px; + border-radius: 2px; + background: ${color.black}; + color: ${color.smokeLight}; + outline: none; + cursor: pointer; +} +`; + +type Props = { + documentId?: string, + onSuccess?: Function, + documents: DocumentsStore, + document?: Document, + ref?: Function, + selectable?: boolean, +}; + +@observer class PathToDocument extends React.Component { + props: Props; + + get resultDocument(): ?Document { + const { documentId } = this.props; + if (documentId) return this.props.documents.getById(documentId); + } + + handleSelect = async (event: SyntheticEvent) => { + const { document, onSuccess } = this.props; + + invariant(onSuccess && document, 'onSuccess unavailable'); + event.preventDefault(); + await document.move(this.resultDocument ? this.resultDocument.id : null); + onSuccess(); + }; + + render() { + const { document, onSuccess, ref } = this.props; + // $FlowIssue we'll always have a document + const { collection } = document || this.resultDocument; + const Component = onSuccess ? ResultWrapperLink : ResultWrapper; + + return ( + + {collection.name} + {this.resultDocument && + + {' '} + + {' '} + {this.resultDocument.pathToDocument + .map(doc => {doc.title}) + .reduce((prev, curr) => [prev, , curr])} + } + {document && + + {' '} + + {' '}{document.title} + } + + ); + } +} + +export default PathToDocument; diff --git a/frontend/scenes/Document/components/DocumentMove/index.js b/frontend/scenes/Document/components/DocumentMove/index.js new file mode 100644 index 000000000..3f3eb8bf1 --- /dev/null +++ b/frontend/scenes/Document/components/DocumentMove/index.js @@ -0,0 +1,3 @@ +// @flow +import DocumentMove from './DocumentMove'; +export default DocumentMove; diff --git a/frontend/scenes/Document/components/Menu.js b/frontend/scenes/Document/components/Menu.js index 9bae6f0b8..7eca8f58c 100644 --- a/frontend/scenes/Document/components/Menu.js +++ b/frontend/scenes/Document/components/Menu.js @@ -51,6 +51,10 @@ type Props = { } }; + onMove = () => { + this.props.history.push(`${this.props.document.url}/move`); + }; + render() { const document = get(this.props, 'document'); if (document) { @@ -69,6 +73,7 @@ type Props = { New document
} + Move Export {allowDelete && Delete} diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js index 2b6e0accc..b6ca7c8ca 100644 --- a/frontend/scenes/Search/Search.js +++ b/frontend/scenes/Search/Search.js @@ -2,18 +2,20 @@ import React from 'react'; import ReactDOM from 'react-dom'; import keydown from 'react-keydown'; -import { observer } from 'mobx-react'; +import { observable, action } from 'mobx'; +import { observer, inject } from 'mobx-react'; import _ from 'lodash'; -import Flex from 'components/Flex'; +import DocumentsStore from 'stores/DocumentsStore'; + import { withRouter } from 'react-router'; import { searchUrl } from 'utils/routeHelpers'; import styled from 'styled-components'; import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; +import Flex from 'components/Flex'; import CenteredContent from 'components/CenteredContent'; import LoadingIndicator from 'components/LoadingIndicator'; import SearchField from './components/SearchField'; -import SearchStore from './SearchStore'; import DocumentPreview from 'components/DocumentPreview'; import PageTitle from 'components/PageTitle'; @@ -21,6 +23,7 @@ import PageTitle from 'components/PageTitle'; type Props = { history: Object, match: Object, + documents: DocumentsStore, notFound: ?boolean, }; @@ -53,11 +56,12 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` @observer class Search extends React.Component { firstDocument: HTMLElement; props: Props; - store: SearchStore; - constructor(props: Props) { - super(props); - this.store = new SearchStore(); + @observable resultIds: Array = []; // Document IDs + @observable searchTerm: ?string = null; + @observable isFetching = false; + + componentDidMount() { this.updateSearchResults(); } @@ -91,9 +95,26 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` }; updateSearchResults = _.debounce(() => { - this.store.search(this.props.match.params.query); + this.search(this.props.match.params.query); }, 250); + @action search = async (query: string) => { + this.searchTerm = query; + this.isFetching = true; + + if (query) { + try { + this.resultIds = await this.props.documents.search(query); + } catch (e) { + console.error('Something went wrong'); + } + } else { + this.resultIds = []; + } + + this.isFetching = false; + }; + updateQuery = query => { this.props.history.replace(searchUrl(query)); }; @@ -103,20 +124,21 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` }; get title() { - const query = this.store.searchTerm; + const query = this.searchTerm; const title = 'Search'; if (query) return `${query} - ${title}`; return title; } render() { + const { documents } = this.props; const query = this.props.match.params.query; - const hasResults = this.store.documents.length > 0; + const hasResults = this.resultIds.length > 0; return ( - {this.store.isFetching && } + {this.isFetching && } {this.props.notFound &&

Not Found

@@ -125,7 +147,7 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
} - {this.store.documents.map((document, index) => ( - index === 0 && this.setFirstDocumentRef(ref)} - key={document.id} - document={document} - highlight={this.store.searchTerm} - showCollection - /> - ))} + {this.resultIds.map((documentId, index) => { + const document = documents.getById(documentId); + if (document) + return ( + + index === 0 && this.setFirstDocumentRef(ref)} + key={documentId} + document={document} + highlight={this.searchTerm} + showCollection + /> + ); + })} @@ -152,4 +179,4 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` } } -export default withRouter(Search); +export default withRouter(inject('documents')(Search)); diff --git a/frontend/scenes/Search/SearchStore.js b/frontend/scenes/Search/SearchStore.js deleted file mode 100644 index 68088ce80..000000000 --- a/frontend/scenes/Search/SearchStore.js +++ /dev/null @@ -1,37 +0,0 @@ -// @flow -import { observable, action, runInAction } from 'mobx'; -import invariant from 'invariant'; -import { client } from 'utils/ApiClient'; -import Document from 'models/Document'; - -class SearchStore { - @observable documents: Array = []; - @observable searchTerm: ?string = null; - @observable isFetching = false; - - /* Actions */ - - @action search = async (query: string) => { - this.searchTerm = query; - this.isFetching = true; - - if (query) { - try { - const res = await client.get('/documents.search', { query }); - invariant(res && res.data, 'res or res.data missing'); - const { data } = res; - runInAction('search document', () => { - this.documents = data.map(documentData => new Document(documentData)); - }); - } catch (e) { - console.error('Something went wrong'); - } - } else { - this.documents = []; - } - - this.isFetching = false; - }; -} - -export default SearchStore; diff --git a/frontend/static/flatpages/keyboard.md b/frontend/static/flatpages/keyboard.md index 8d0eeeb02..56e604a0c 100644 --- a/frontend/static/flatpages/keyboard.md +++ b/frontend/static/flatpages/keyboard.md @@ -1,8 +1,9 @@ - `Cmd+Enter` - Save and exit document editor -- `Cmd+S` - Save document and continue editing +- `Cmd+s` - Save document and continue editing - `Cmd+Esc` - Cancel edit - `/` or `t` - Jump to search - `d` - Jump to dashboard - `c` - Compose within a collection - `e` - Edit document +- `m` - Move document - `?` - This guide diff --git a/frontend/stores/DocumentsStore.js b/frontend/stores/DocumentsStore.js index 7ccedcad5..c7e03e975 100644 --- a/frontend/stores/DocumentsStore.js +++ b/frontend/stores/DocumentsStore.js @@ -104,6 +104,14 @@ class DocumentsStore extends BaseStore { await this.fetchAll('starred'); }; + @action search = async (query: string): Promise<*> => { + const res = await client.get('/documents.search', { query }); + invariant(res && res.data, 'res or res.data missing'); + const { data } = res; + data.forEach(documentData => this.add(new Document(documentData))); + return data.map(documentData => documentData.id); + }; + @action fetch = async (id: string): Promise<*> => { this.isFetching = true; @@ -138,8 +146,11 @@ class DocumentsStore extends BaseStore { return this.data.get(id); }; + /** + * Match documents by the url ID as the title slug can change + */ getByUrl = (url: string): ?Document => { - return _.find(this.data.values(), { url }); + return _.find(this.data.values(), doc => url.endsWith(doc.urlId)); }; constructor(options: Options) { diff --git a/frontend/utils/routeHelpers.js b/frontend/utils/routeHelpers.js index ce11b20f3..e501f2a98 100644 --- a/frontend/utils/routeHelpers.js +++ b/frontend/utils/routeHelpers.js @@ -38,3 +38,19 @@ export function searchUrl(query?: string): string { export function notFoundUrl(): string { return '/404'; } + +export const matchDocumentSlug = + ':documentSlug([0-9a-zA-Z-]*-[a-zA-z0-9]{10,15})'; + +export const matchDocumentEdit = `/doc/${matchDocumentSlug}/edit`; +export const matchDocumentMove = `/doc/${matchDocumentSlug}/move`; + +/** + * Replace full url's document part with the new one in case + * the document slug has been updated + */ +export function updateDocumentUrl(oldUrl: string, newUrl: string): string { + // Update url to match the current one + const urlParts = oldUrl.split('/'); + return [newUrl, urlParts.slice(3)].join('/'); +} diff --git a/package.json b/package.json index 7fc4d76ef..bd9d3faa2 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "eslint-plugin-prettier": "^2.0.1", "eslint-plugin-react": "^6.10.3", "exports-loader": "0.6.3", + "extract-text-webpack-plugin": "1.0.1", "fbemitter": "^2.1.1", "file-loader": "0.9.0", "flow-typed": "^2.1.2", diff --git a/server/api/documents.js b/server/api/documents.js index 178e590aa..2eb51b4f9 100644 --- a/server/api/documents.js +++ b/server/api/documents.js @@ -211,6 +211,8 @@ router.post('documents.create', auth(), async ctx => { await ownerCollection.addDocumentToStructure(document, index); } + document.collection = ownerCollection; + ctx.body = { data: await presentDocument(ctx, document), }; @@ -279,6 +281,10 @@ router.post('documents.move', auth(), async ctx => { await collection.deleteDocument(document); await collection.addDocumentToStructure(document, index); } + // Update collection + document.collection = collection; + + document.collection = collection; ctx.body = { data: await presentDocument(ctx, document), diff --git a/server/presenters/document.js b/server/presenters/document.js index 0ca0ea186..5927a83d9 100644 --- a/server/presenters/document.js +++ b/server/presenters/document.js @@ -17,6 +17,7 @@ async function present(ctx: Object, document: Document, options: ?Options) { const data = { id: document.id, url: document.getUrl(), + urlId: document.urlId, private: document.private, title: document.title, text: document.text, diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 2a569fed1..a09773b95 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -1,6 +1,7 @@ /* eslint-disable */ var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); const commonWebpackConfig = require('./webpack.config'); @@ -18,6 +19,7 @@ const developmentWebpackConfig = Object.assign(commonWebpackConfig, { developmentWebpackConfig.plugins.push( new webpack.optimize.OccurenceOrderPlugin() ); +developmentWebpackConfig.plugins.push(new ExtractTextPlugin('styles.css')); developmentWebpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); developmentWebpackConfig.plugins.push(new webpack.NoErrorsPlugin()); developmentWebpackConfig.plugins.push( diff --git a/webpack.config.js b/webpack.config.js index 1be0fdfdb..f99b890cf 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ /* eslint-disable */ const path = require('path'); const webpack = require('webpack'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); require('dotenv').config({ silent: true }); @@ -40,7 +41,7 @@ module.exports = { }, { test: /\.css$/, - loader: 'style-loader!css-loader?sourceMap', + loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), }, { test: /\.md/, loader: 'raw-loader' }, ], diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 5f593eb5c..f3e0b0dfa 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -2,6 +2,7 @@ var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); commonWebpackConfig = require('./webpack.config'); @@ -20,6 +21,9 @@ productionWebpackConfig.plugins.push( template: 'server/static/index.html', }) ); +productionWebpackConfig.plugins.push( + new ExtractTextPlugin('styles.[hash].css') +); productionWebpackConfig.plugins.push( new webpack.optimize.OccurenceOrderPlugin() ); diff --git a/yarn.lock b/yarn.lock index f446a4752..3b83cf3ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -306,7 +306,7 @@ async@^0.9.0: version "0.9.2" resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" -async@^1.3.0, async@^1.4.0: +async@^1.3.0, async@^1.4.0, async@^1.5.0: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" @@ -3035,6 +3035,14 @@ extglob@^0.3.1: dependencies: is-extglob "^1.0.0" +extract-text-webpack-plugin@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c" + dependencies: + async "^1.5.0" + loader-utils "^0.2.3" + webpack-sources "^0.1.0" + extsprintf@1.3.0, extsprintf@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05" @@ -5298,7 +5306,7 @@ load-json-file@^2.0.0: pify "^2.0.0" strip-bom "^3.0.0" -loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@~0.2.5: +loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.3, loader-utils@~0.2.5: version "0.2.17" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" dependencies: @@ -8190,7 +8198,7 @@ source-map@0.5.6: version "0.5.6" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" -source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1: +source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -9100,6 +9108,13 @@ webpack-hot-middleware@2.x: querystring "^0.2.0" strip-ansi "^3.0.0" +webpack-sources@^0.1.0: + version "0.1.5" + resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750" + dependencies: + source-list-map "~0.1.7" + source-map "~0.5.3" + webpack@1.13.2: version "1.13.2" resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.2.tgz#f11a96f458eb752970a86abe746c0704fabafaf3"