feat: optimize editing experience flarum#9

0xffff-one · Apr 7, 2020 · 323609f · 323609f
1 parent c7f4852
commit 323609f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git a/js/dist/forum.js b/js/dist/forum.js
diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map
diff --git a/js/src/forum/components/Composer.js b/js/src/forum/components/Composer.js
@@ -92,6 +92,14 @@ class Composer extends Component {
       return (this.component && this.component.preventExit()) || undefined;
     };
 
+    // 若用户需要退出，则完全清除
+    window.onunload = () => {
+      if ((this.component && this.component.preventExit())) {
+        localStorage.removeItem('last-edit-text');
+        localStorage.removeItem('last-edit-title');
+      }
+    };
+
     const handlers = {};
 
     $(window).on('resize', handlers.onresize = this.updateHeight.bind(this)).resize();
@@ -365,6 +373,8 @@ class Composer extends Component {
    */
   close() {
     if (!this.preventExit()) {
+      localStorage.removeItem('last-edit-title');
+      localStorage.removeItem('last-edit-text');
       this.hide();
     }
   }

diff --git a/js/src/forum/components/DiscussionComposer.js b/js/src/forum/components/DiscussionComposer.js
@@ -21,12 +21,13 @@ export default class DiscussionComposer extends ComposerBody {
      *
      * @type {Function}
      */
-    this.title = m.prop('');
+    this.title = m.prop(localStorage.getItem('last-edit-title') || '');
   }
 
   static initProps(props) {
     super.initProps(props);
 
+    props.originalContent = props.originalContent || localStorage.getItem('last-edit-text');
     props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_discussion.body_placeholder'));
     props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
     props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
@@ -43,6 +44,7 @@ export default class DiscussionComposer extends ComposerBody {
       <h3>
         <input className="FormControl"
           value={this.title()}
+          onchange={(ev) => localStorage.setItem('last-edit-title', ev.currentTarget.value)}
           oninput={m.withAttr('value', this.title)}
           placeholder={this.props.titlePlaceholder}
           disabled={!!this.props.disabled}
@@ -94,6 +96,8 @@ export default class DiscussionComposer extends ComposerBody {
         app.composer.hide();
         app.cache.discussionList.addDiscussion(discussion);
         m.route(app.route.discussion(discussion));
+        localStorage.removeItem('last-edit-title');
+        localStorage.removeItem('last-edit-text');
       },
       this.loaded.bind(this)
     );

diff --git a/js/src/forum/components/ReplyComposer.js b/js/src/forum/components/ReplyComposer.js
@@ -37,6 +37,7 @@ export default class ReplyComposer extends ComposerBody {
     props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_reply.body_placeholder'));
     props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_reply.submit_button');
     props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_reply.discard_confirmation'));
+    props.originalContent = props.originalContent || localStorage.getItem('last-edit-text');
   }
 
   headerItems() {
@@ -109,6 +110,7 @@ export default class ReplyComposer extends ComposerBody {
         }
 
         app.composer.hide();
+        localStorage.removeItem('last-edit-text');
       },
       this.loaded.bind(this)
     );

diff --git a/js/src/forum/components/TextEditor.js b/js/src/forum/components/TextEditor.js
@@ -173,6 +173,7 @@ export default class TextEditor extends Component {
     this.props.onchange(this.value());
 
     m.redraw.strategy('none');
+    localStorage.setItem('last-edit-text', value);
   }
 
   /**