Fixed new comment cancel to keep discussion gutter open

src/components/gutters/NewComment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comment comment--new" @keyup.esc="setIsCommenting(false)">
+  <div class="comment comment--new" @keyup.esc="cancelNewComment">
     <div class="comment__header flex flex--row flex--space-between flex--align-center">
       <div class="comment__user flex flex--row flex--align-center">
         <div class="comment__user-image">
@@ -14,14 +14,14 @@
       </div>
     </div>
     <div class="comment__buttons flex flex--row flex--end">
-      <button class="comment__button button" @click="setIsCommenting(false)">Cancel</button>
+      <button class="comment__button button" @click="cancelNewComment">Cancel</button>
       <button class="comment__button button" @click="addComment">Ok</button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex';
+import { mapGetters, mapMutations, mapActions } from 'vuex';
 import Prism from 'prismjs';
 import UserImage from '../UserImage';
 import cledit from '../../libs/cledit';
@@ -38,9 +38,11 @@ export default {
   ]),
   methods: {
     ...mapMutations('discussion', [
-      'setIsCommenting',
       'setNewCommentFocus',
     ]),
+    ...mapActions('discussion', [
+      'cancelNewComment',
+    ]),
     addComment() {
       const text = this.$store.state.discussion.newCommentText.trim();
       if (text.length) {

src/services/diffUtils.js

@@ -64,31 +64,32 @@ function stripDiscussionOffsets(objectMap) {
 }
 
 function restoreDiscussionOffsets(content, markerKeys) {
-  // Go through markers
+  if (markerKeys.length) {
-  let count = 0;
+    // Go through markers
-  const maxIdx = markerKeys.length;
+    let count = 0;
-  content.text = content.text.replace(/[\ue000-\uf8ff]/g, (match, offset) => {
+    content.text = content.text.replace(
-    const idx = match.charCodeAt(0) - 0xe000;
+      new RegExp(`[\ue000-${String.fromCharCode((0xe000 + markerKeys.length) - 1)}]`, 'g'),
-    if (idx >= maxIdx) {
+      (match, offset) => {
-      return match;
+        const idx = match.charCodeAt(0) - 0xe000;
-    }
+        const markerKey = markerKeys[idx];
-    const markerKey = markerKeys[idx];
+        const discussion = content.discussions[markerKey.id];
-    const discussion = content.discussions[markerKey.id];
+        if (discussion) {
-    if (discussion) {
+          discussion[markerKey.offsetName] = offset - count;
-      discussion[markerKey.offsetName] = offset - count;
+        }
-    }
+        count += 1;
-    count += 1;
+        return '';
-    return '';
+      });
-  });
+    // Sanitize offsets
-  Object.keys(content.discussions).forEach((discussionId) => {
+    Object.keys(content.discussions).forEach((discussionId) => {
-    const discussion = content.discussions[discussionId];
+      const discussion = content.discussions[discussionId];
-    if (discussion.start === undefined) {
+      if (discussion.start === undefined) {
-      discussion.start = discussion.end || 0;
+        discussion.start = discussion.end || 0;
-    }
+      }
-    if (discussion.end === undefined) {
+      if (discussion.end === undefined || discussion.end < discussion.start) {
-      discussion.end = discussion.start;
+        discussion.end = discussion.start;
-    }
+      }
-  });
+    });
+  }
 }
 
 function mergeText(serverText, clientText, lastMergedText) {

src/services/editorSvc.js

@@ -493,8 +493,6 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
     this.clEditor.on('contentChanged',
       (content, diffs, sectionList) => onEditorChanged(sectionList));
 
-    this.$emit('inited');
-
     // clEditorSvc.setPreviewElt(element[0].querySelector('.preview__inner-2'))
     // var previewElt = element[0].querySelector('.preview')
     // clEditorSvc.isPreviewTop = previewElt.scrollTop < 10
@@ -551,6 +549,7 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
       () => this.measureSectionDimensions(false, true));
 
     this.initHighlighters();
+    this.$emit('inited');
   },
 });
 

src/services/editorSvcDiscussions.js

@@ -7,6 +7,7 @@ import EditorClassApplier from '../components/common/EditorClassApplier';
 import PreviewClassApplier from '../components/common/PreviewClassApplier';
 
 let clEditor;
+// let discussionIds = {};
 let discussionMarkers = {};
 let markerKeys;
 let markerIdxMap;
@@ -137,6 +138,25 @@ export default {
       isChangePatch = false;
     });
     clEditor.on('focus', () => store.commit('discussion/setNewCommentFocus', false));
+
+    // Track new discussions (not sure it's a good idea)
+    // store.watch(
+    //   () => store.getters['content/current'].discussions,
+    //   (discussions) => {
+    //     const oldDiscussionIds = discussionIds;
+    //     discussionIds = {};
+    //     let hasNewDiscussion = false;
+    //     Object.keys(discussions).forEach((discussionId) => {
+    //       discussionIds[discussionId] = true;
+    //       if (!oldDiscussionIds[discussionId]) {
+    //         hasNewDiscussion = true;
+    //       }
+    //     });
+    //     if (hasNewDiscussion) {
+    //       const content = store.getters['content/current'];
+    //       currentPatchableText = diffUtils.makePatchableText(content, markerKeys, markerIdxMap);
+    //     }
+    //   });
   },
   initClEditorInternal(opts) {
     const content = store.getters['content/current'];

src/store/discussion.js

@@ -117,6 +117,12 @@ export default {
       getters.currentDiscussionComments[getters.currentDiscussionLastCommentId],
   },
   actions: {
+    cancelNewComment({ commit, getters }) {
+      commit('setIsCommenting', false);
+      if (!getters.currentDiscussion) {
+        commit('setCurrentDiscussionId', getters.nextDiscussionId);
+      }
+    },
     createNewDiscussion({ commit, dispatch, rootGetters }, selection) {
       const loginToken = rootGetters['data/loginToken'];
       if (!loginToken) {