Renamed /src to /frontend

frontend/scenes/DocumentEdit/DocumentEdit.js

@@ -0,0 +1,183 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { browserHistory, withRouter } from 'react-router';
+import keydown from 'react-keydown';
+
+import DocumentEditStore, {
+  DOCUMENT_EDIT_SETTINGS,
+} from './DocumentEditStore';
+
+import Switch from 'components/Switch';
+import Layout, { Title, HeaderAction } from 'components/Layout';
+import Flex from 'components/Flex';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+import CenteredContent from 'components/CenteredContent';
+import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
+
+import EditorLoader from './components/EditorLoader';
+import SaveAction from './components/SaveAction';
+
+const DISREGARD_CHANGES = `You have unsaved changes.
+Are you sure you want to disgard them?`;
+
+@keydown([
+  'cmd+enter', 'ctrl+enter',
+  'cmd+esc', 'ctrl+esc',
+  'cmd+shift+p', 'ctrl+shift+p'])
+@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 = () => {
+    if (this.props.route.newDocument) {
+      this.store.atlasId = this.props.params.id;
+      this.store.newDocument = true;
+    } else if (this.props.route.newChildDocument) {
+      this.store.documentId = this.props.params.id;
+      this.store.newChildDocument = true;
+      this.store.fetchDocument();
+    } else {
+      this.store.documentId = this.props.params.id;
+      this.store.newDocument = false;
+      this.store.fetchDocument();
+    }
+
+    // Load editor async
+    EditorLoader()
+    .then(({ Editor }) => {
+      this.setState({ Editor });
+    });
+
+    // Set onLeave hook
+    this.props.router.setRouteLeaveHook(this.props.route, () => {
+      if (this.store.hasPendingChanges) {
+        return confirm(DISREGARD_CHANGES);
+      }
+      return;
+    });
+  }
+
+  componentWillReceiveProps = (nextProps) => {
+    const key = nextProps.keydown.event;
+
+    if (key) {
+      // Cmd + Enter
+      if(key.key === 'Enter' && (key.metaKey || key.ctrl.Key)) {
+        this.onSave();
+      }
+
+      // Cmd + Esc
+      if(key.key === 'Escape' && (key.metaKey || key.ctrl.Key)) {
+        this.onCancel();
+      }
+
+      // Cmd + m
+      console.log(key)
+      if(key.key === 'P' && key.shiftKey && (key.metaKey || key.ctrl.Key)) {
+        this.store.togglePreview();
+      }
+    }
+  }
+
+  onSave = () => {
+    // if (this.props.title.length === 0) {
+    //   alert("Please add a title before saving (hint: Write a markdown header)");
+    //   return
+    // }
+    if (this.store.newDocument || this.store.newChildDocument) {
+      this.store.saveDocument();
+    } else {
+      this.store.updateDocument();
+    }
+  }
+
+  onCancel = () => {
+    browserHistory.goBack();
+  }
+
+  onScroll = (scrollTop) => {
+    this.setState({
+      scrollTop,
+    });
+  }
+
+  render() {
+    console.log("DocumentEdit#render", this.store.preview);
+
+    let title = (
+      <Title
+        truncate={ 60 }
+        placeholder={ "Untitle document" }
+      >
+        { this.store.title }
+      </Title>
+    );
+
+    let titleText = this.store.title;
+
+    const actions = (
+      <Flex direction="row">
+        <HeaderAction>
+          <SaveAction
+            onClick={ this.onSave }
+            disabled={ this.store.isSaving }
+          />
+        </HeaderAction>
+        <DropdownMenu label="More">
+          <MenuItem onClick={ this.store.togglePreview }>
+            Preview <Switch checked={ this.store.preview } />
+          </MenuItem>
+          <MenuItem onClick={ this.onCancel }>
+            Cancel
+          </MenuItem>
+        </DropdownMenu>
+      </Flex>
+    );
+
+    return (
+      <Layout
+        actions={ actions }
+        title={ title }
+        titleText={ titleText }
+        fixed
+        loading={ this.store.isSaving }
+        search={ false }
+      >
+        { (this.store.isFetching || !('Editor' in this.state)) ? (
+          <CenteredContent>
+            <AtlasPreviewLoading />
+          </CenteredContent>
+        ) : (
+          <this.state.Editor
+            store={ this.store }
+            scrollTop={ this.state.scrollTop }
+            onScroll={ this.onScroll }
+            onSave={ this.onSave }
+            onCancel={ this.onCancel }
+            togglePreview={ this.togglePreview }
+          />
+        ) }
+      </Layout>
+    );
+  }
+}
+
+export default DocumentEdit;

frontend/scenes/DocumentEdit/DocumentEdit.scss

@@ -0,0 +1,46 @@
+@import '~styles/constants.scss';
+
+.preview {
+  display: flex;
+  flex: 1;
+  padding: 50px 0;
+  padding: 50px 3em;
+  max-width: 50em;
+  line-height: 1.5em;
+}
+
+.container {
+  display: flex;
+  position: fixed;
+  top: $headerHeight;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.editorPane {
+  flex: 0 0 50%;
+  justify-content: center;
+  overflow: scroll;
+}
+
+.paneContent {
+  flex: 1;
+  justify-content: center;
+  height: 100%;
+}
+
+.fullWidth {
+  flex: 1;
+  display: flex;
+
+  .paneContent {
+    display: flex;
+  }
+}
+
+:global {
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}

frontend/scenes/DocumentEdit/DocumentEditStore.js

@@ -0,0 +1,147 @@
+import { observable, action, toJS, autorun } from 'mobx';
+import { client } from 'utils/ApiClient';
+import { browserHistory } from 'react-router';
+import emojify from 'utils/emojify';
+
+const DOCUMENT_EDIT_SETTINGS = 'DOCUMENT_EDIT_SETTINGS';
+
+const parseHeader = (text) => {
+  const firstLine = text.split(/\r?\n/)[0];
+  if (firstLine) {
+    const match = firstLine.match(/^#+ +(.*)$/);
+
+    if (match) {
+      return emojify(match[1]);
+    } else {
+      return '';
+    }
+  }
+  return '';
+};
+
+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;
+
+  /* Actions */
+
+  @action fetchDocument = async () => {
+    this.isFetching = true;
+
+    try {
+      const data = await client.get('/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 () => {
+    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;
+
+      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
+};

frontend/scenes/DocumentEdit/components/Editor.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { convertToMarkdown } from 'utils/markdown';
+
+import MarkdownEditor from 'components/MarkdownEditor';
+import Preview from './Preview';
+import EditorPane from './EditorPane';
+
+import styles from '../DocumentEdit.scss';
+
+const Editor = observer((props) => {
+  const store = props.store;
+
+  return (
+    <div className={ styles.container }>
+      <EditorPane
+        fullWidth={ !store.preview }
+        onScroll={ props.onScroll }
+      >
+        <MarkdownEditor
+          onChange={ store.updateText }
+          text={ store.text }
+          replaceText={ store.replaceText }
+          preview={ store.preview }
+          onSave={ props.onSave }
+          onCancel={ props.onCancel }
+          togglePreview={ props.togglePreview }
+        />
+      </EditorPane>
+      { store.preview ? (
+        <EditorPane
+          scrollTop={ props.scrollTop }
+        >
+          <Preview html={ convertToMarkdown(store.text) } />
+        </EditorPane>
+      ) : null }
+    </div>
+  );
+});
+
+export default Editor;

frontend/scenes/DocumentEdit/components/EditorLoader.js

@@ -0,0 +1,9 @@
+export default () => {
+  return new Promise(resolve => {
+    require.ensure([], () => {
+      resolve({
+        Editor: require('./Editor').default,
+      });
+    });
+  });
+};

frontend/scenes/DocumentEdit/components/EditorPane.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import styles from '../DocumentEdit.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+class EditorPane extends React.Component {
+  static propTypes = {
+    children: React.PropTypes.node.isRequired,
+    onScroll: React.PropTypes.func.isRequired,
+    scrollTop: React.PropTypes.number,
+    fullWidth: React.PropTypes.bool,
+  }
+
+  componentWillReceiveProps = (nextProps) => {
+
+    if (nextProps.scrollTop) {
+      this.scrollToPosition(nextProps.scrollTop)
+    }
+  }
+
+  componentDidMount = () => {
+    this.refs.pane.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount = () => {
+    this.refs.pane.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = (e) => {
+    setTimeout(() => {
+      const element = this.refs.pane;
+      const contentEl = this.refs.content;
+      this.props.onScroll(element.scrollTop / contentEl.offsetHeight);
+    }, 50);
+  }
+
+  scrollToPosition = (percentage) => {
+    const contentEl = this.refs.content;
+
+    // Push to edges
+    if (percentage < 0.02) percentage = 0;
+    if (percentage > 0.99) percentage = 100;
+
+    this.refs.pane.scrollTop = percentage * contentEl.offsetHeight;
+  }
+
+  render() {
+    return (
+      <div
+        className={ cx(styles.editorPane, { fullWidth: this.props.fullWidth }) }
+        ref="pane"
+      >
+        <div ref="content" className={ styles.paneContent }>
+          { this.props.children }
+        </div>
+      </div>
+    );
+  }
+};
+
+export default EditorPane;

frontend/scenes/DocumentEdit/components/Preview.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { DocumentHtml } from 'components/Document';
+
+import styles from '../DocumentEdit.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+const Preview = (props) => {
+  return (
+    <div className={ styles.preview }>
+      <DocumentHtml html={ props.html } />
+    </div>
+  );
+};
+
+Preview.propTypes = {
+  html: React.PropTypes.string.isRequired,
+};
+
+export default Preview;

frontend/scenes/DocumentEdit/components/SaveAction.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+
+@observer
+class SaveAction extends React.Component {
+  static propTypes = {
+    onClick: React.PropTypes.func.isRequired,
+    disabled: React.PropTypes.bool,
+  }
+
+  onClick = (event) => {
+    if (this.props.disabled) return;
+
+    event.preventDefault();
+    this.props.onClick();
+  }
+
+  render() {
+    return (
+      <div>
+        <a
+          href
+          onClick={ this.onClick }
+          style={{ opacity: this.props.disabled ? 0.5 : 1 }}
+        >Save</a>
+      </div>
+    );
+  }
+};
+
+export default SaveAction;

frontend/scenes/DocumentEdit/index.js

@@ -0,0 +1,2 @@
+import DocumentEdit from './DocumentEdit';
+export default DocumentEdit;