Fixes to editing

src/components/MarkdownEditor/MarkdownEditor.js

@@ -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 = () => {

src/scenes/DocumentEdit/DocumentEdit.js

@@ -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';
+const DISREGARD_CHANGES = `You have unsaved changes.
-import classNames from 'classnames/bind';
+Are you sure you want to disgard them?`;
-const cx = classNames.bind(styles);
 
+@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;
+      this.store.atlasId = this.props.params.id;
-      store.newDocument = true;
+      this.store.newDocument = true;
     } else if (this.props.route.newChildDocument) {
-      store.documentId = this.props.params.id;
+      this.store.documentId = this.props.params.id;
-      store.newChildDocument = true;
+      this.store.newChildDocument = true;
-      store.fetchDocument();
+      this.store.fetchDocument();
     } else {
-      store.documentId = this.props.params.id;
+      this.store.documentId = this.props.params.id;
-      store.newDocument = false;
+      this.store.newDocument = false;
-      store.fetchDocument();
+      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) {
+    if (this.store.newDocument || this.store.newChildDocument) {
-      store.saveDocument();
+      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,
+      scrollTop,
-    })
+    });
-  }
-
-  onPreviewToggle = () => {
-    store.togglePreview();
   }
 
   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 }>
+          <MenuItem onClick={ this.store.togglePreview }>
-            Preview <Switch checked={ store.preview } />
+            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 }
+        fixed
-        loading={ store.isSaving }
+        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 }
           />

src/scenes/DocumentEdit/DocumentEditStore.js

@@ -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,19 +7,25 @@ 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 '';
+};
 
-const documentEditStore = new class DocumentEditStore {
+class DocumentEditStore {
   @observable documentId = null;
   @observable atlasId = null;
   @observable parentDocument;
   @observable title;
   @observable text;
+  @observable hasPendingChanges = false;
   @observable newDocument;
   @observable newChildDocument;
 
@@ -36,7 +41,7 @@ const documentEditStore = new class DocumentEditStore {
     try {
       const data = await client.post('/documents.info', {
         id: this.documentId,
-        })
+      });
       if (this.newChildDocument) {
         this.parentDocument = data.data;
       } else {
@@ -45,12 +50,12 @@ const documentEditStore = new class DocumentEditStore {
         this.text = text;
       }
     } catch (e) {
-        console.error("Something went wrong");
+      console.error('Something went wrong');
     }
     this.isFetching = false;
   }
 
-    @action saveDocument = async (nextPath) => {
+  @action saveDocument = async () => {
     if (this.isSaving) return;
 
     this.isSaving = true;
@@ -61,8 +66,10 @@ const documentEditStore = new class DocumentEditStore {
         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");
@@ -70,17 +77,19 @@ const documentEditStore = new class DocumentEditStore {
     this.isSaving = false;
   }
 
-    @action updateDocument = async (nextPath) => {
+  @action updateDocument = async () => {
     if (this.isSaving) return;
 
     this.isSaving = true;
 
     try {
-        const data = await client.post('/documents.update', {
+      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");
@@ -91,6 +100,7 @@ const documentEditStore = new class DocumentEditStore {
   @action updateText = (text) => {
     this.text = text;
     this.title = parseHeader(text);
+    this.hasPendingChanges = true;
   }
 
   @action updateTitle = (title) => {
@@ -99,6 +109,7 @@ const documentEditStore = new class DocumentEditStore {
 
   @action replaceText = (args) => {
     this.text = this.text.replace(args.original, args.new);
+    this.hasPendingChanges = true;
   }
 
   @action togglePreview = () => {
@@ -110,20 +121,27 @@ const documentEditStore = new class DocumentEditStore {
     this.text = '# Lets start with a title\n\nAnd continue from there...';
   }
 
-    constructor() {
+  // Generic
-      // Rehydrate settings
+
-      localforage.getItem(DOCUMENT_EDIT_SETTINGS)
+  persistSettings = () => {
-      .then(data => {
+    localStorage[DOCUMENT_EDIT_SETTINGS] = JSON.stringify({
-        this.preview = data.preview;
+      preview: toJS(this.preview),
     });
   }
-}();
 
-// Persist settings to localStorage
+  constructor(settings) {
-autorun(() => {
+    // Rehydrate settings
-  localforage.setItem(DOCUMENT_EDIT_SETTINGS, {
+    this.preview = settings.preview
-    preview: documentEditStore.preview,
+
+    // Persist settings to localStorage
+    // TODO: This could be done more selectively
+    autorun(() => {
+      this.persistSettings();
     });
-});
+  }
+};
 
-export default documentEditStore;
+export default DocumentEditStore;
+export {
+  DOCUMENT_EDIT_SETTINGS
+};

src/utils/emojify.js

@@ -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;