impl save/clear/restore draft

package.json

@@ -126,6 +126,7 @@
     "socket.io-client": "^2.0.3",
     "style-loader": "^0.19.0",
     "swig-templates": "^2.0.2",
+    "throttle-debounce": "^1.0.1",
     "toastr": "^2.1.2",
     "uglifycss": "^0.0.27",
     "webpack": "^3.1.0",

resource/js/app.js

@@ -32,7 +32,7 @@ let pageId = null;
 let pageRevisionId = null;
 let pageRevisionCreatedAt = null;
 let pagePath;
-let pageContent = null;
+let pageContent = '';
 if (mainContent !== null) {
   pageId = mainContent.attributes['data-page-id'].value;
   pageRevisionId = mainContent.attributes['data-page-revision-id'].value;

resource/js/components/PageEditor.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import * as toastr from 'toastr';
+import {debounce} from 'throttle-debounce';
 
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
@@ -15,8 +16,6 @@ export default class PageEditor extends React.Component {
       revisionId: this.props.revisionId,
       markdown: this.props.markdown,
     };
-    // initial preview
-    this.renderPreview();
 
     this.setCaretLine = this.setCaretLine.bind(this);
     this.focusToEditor = this.focusToEditor.bind(this);
@@ -25,6 +24,18 @@ export default class PageEditor extends React.Component {
     this.onEditorScroll = this.onEditorScroll.bind(this);
     this.getMaxScrollTop = this.getMaxScrollTop.bind(this);
     this.getScrollTop = this.getScrollTop.bind(this);
+    this.saveDraft = this.saveDraft.bind(this);
+    this.clearDraft = this.clearDraft.bind(this);
+
+    // create debounced function
+    this.saveDraftWithDebounce = debounce(300, this.saveDraft);
+  }
+
+  componentWillMount() {
+    // restore draft
+    this.restoreDraft();
+    // initial preview
+    this.renderPreview();
   }
 
   focusToEditor() {
@@ -46,10 +57,11 @@ export default class PageEditor extends React.Component {
   onMarkdownChanged(value) {
     this.setState({
       markdown: value,
-      html: '',
     });
 
     this.renderPreview();
+
+    this.saveDraftWithDebounce()
   }
 
   /**
@@ -96,6 +108,9 @@ export default class PageEditor extends React.Component {
           revisionId: page.revision._id,
           markdown: page.revision.body
         })
+
+        // clear draft
+        this.clearDraft();
       })
       .catch((error) => {
         console.error(error);
@@ -139,6 +154,23 @@ export default class PageEditor extends React.Component {
     return top;
   };
 
+  restoreDraft() {
+    // restore draft when the first time to edit
+    const draft = this.props.crowi.findDraft(this.props.pagePath);
+    if (!this.props.revisionId && draft != null) {
+      this.setState({markdown: draft});
+    }
+  }
+  saveDraft() {
+    // only when the first time to edit
+    if (!this.state.revisionId) {
+      this.props.crowi.saveDraft(this.props.pagePath, this.state.markdown);
+    }
+  }
+  clearDraft() {
+    this.props.crowi.clearDraft(this.props.pagePath);
+  }
+
   renderPreview() {
     const config = this.props.crowi.config;
 
@@ -200,8 +232,8 @@ export default class PageEditor extends React.Component {
 
 PageEditor.propTypes = {
   crowi: PropTypes.object.isRequired,
+  markdown: PropTypes.string.isRequired,
   pageId: PropTypes.string,
   revisionId: PropTypes.string,
   pagePath: PropTypes.string,
-  markdown: PropTypes.string,
 };

resource/js/legacy/crowi-form.js

@@ -133,12 +133,13 @@ $(function() {
       crowi.clearDraft(pagePath);
     }
   });
+  */
   $('#page-form').on('submit', function(e) {
     // avoid message
-    isFormChanged = false;
+    // isFormChanged = false;
     crowi.clearDraft(pagePath);
   });
-
+  /*
   // This is a temporary implementation until porting to React.
   var insertText = function(start, end, newText, mode) {
     var editor = document.querySelector('#form-body');

resource/js/util/Crowi.js

@@ -127,12 +127,12 @@ export default class Crowi {
 
   clearDraft(path) {
     delete this.draft[path];
-    this.localStorage.draft = JSON.stringify(this.draft);
+    this.localStorage.setItem('draft', JSON.stringify(this.draft));
   }
 
   saveDraft(path, body) {
     this.draft[path] = body;
-    this.localStorage.draft = JSON.stringify(this.draft);
+    this.localStorage.setItem('draft', JSON.stringify(this.draft));
   }
 
   findDraft(path) {

yarn.lock

@@ -5932,6 +5932,10 @@ text-encoding@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
 
+throttle-debounce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+
 through2@^2.0.1, through2@^2.0.2, through2@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"