Fixed google sign in

src/components/Toc.vue

@@ -90,7 +90,7 @@ export default {
 .toc__inner {
   color: rgba(0, 0, 0, 0.75);
   cursor: pointer;
-  font-size: 10px;
+  font-size: 9px;
   padding: 10px 20px 40px;
   white-space: nowrap;
   -webkit-user-select: none;

src/components/common/app.scss

@@ -260,6 +260,10 @@ textarea {
 
 .discussion-preview-highlighting {
   cursor: pointer;
+
+  &.discussion-preview-highlighting--selected {
+    cursor: auto;
+  }
 }
 
 .hidden-rendering-container {

src/components/common/base.scss

@@ -160,6 +160,10 @@ img {
   vertical-align: top;
 }
 
+.page-break-after {
+  page-break-after: always;
+}
+
 .stackedit__html {
   margin-bottom: 180px;
   margin-left: auto;

src/components/gutters/CommentList.vue

@@ -186,20 +186,6 @@ export default {
   padding-top: 10px;
 }
 
-.comment--last {
-  opacity: 0.33;
-  cursor: pointer;
-
-  * {
-    pointer-events: none;
-  }
-
-  &:hover,
-  &.comment--hover {
-    opacity: 0.67;
-  }
-}
-
 .comment-list__current-discussion {
   border-top: 2px solid;
   border-bottom: 2px solid;
@@ -217,10 +203,25 @@ export default {
   font-weight: 600;
 }
 
-.comment {
+/* use div selector to avoid collision with Prism */
+div.comment {
   padding: 5px 10px 10px;
 }
 
+.comment--last {
+  opacity: 0.33;
+  cursor: pointer;
+
+  * {
+    pointer-events: none;
+  }
+
+  &:hover,
+  &.comment--hover {
+    opacity: 0.5;
+  }
+}
+
 .comment__header {
   font-size: 0.75em;
   padding-bottom: 0.25em;

src/components/gutters/NewComment.vue

@@ -39,6 +39,7 @@ export default {
   methods: {
     ...mapMutations('discussion', [
       'setIsCommenting',
+      'setNewCommentFocus',
     ]),
     addComment() {
       const text = this.$store.state.discussion.newCommentText.trim();
@@ -88,7 +89,7 @@ export default {
       selectionEnd: this.$store.state.discussion.newCommentSelection.end,
       getCursorFocusRatio: () => 0.2,
     });
-    this.$nextTick(() => clEditor.focus());
+    clEditor.on('focus', () => this.setNewCommentFocus(true));
 
     // Save typed content and selection
     clEditor.on('contentChanged', value =>
@@ -98,6 +99,15 @@ export default {
         start, end,
       }));
 
+    this.$watch(
+      () => this.$store.state.discussion.currentDiscussionId,
+      () => this.$nextTick(() => {
+        if (this.$store.state.discussion.newCommentFocus) {
+          clEditor.focus();
+        }
+      }),
+      { immediate: true });
+
     const isSticky = this.$el.parentNode.classList.contains('sticky-comment');
     if (isSticky) {
       let scrollerMirrorElt;
@@ -124,7 +134,9 @@ export default {
             clEditor.setContent(text);
             const selection = this.$store.state.discussion.newCommentSelection;
             clEditor.selectionMgr.setSelectionStartEnd(selection.start, selection.end);
-            clEditor.focus();
+            if (this.$store.state.discussion.newCommentFocus) {
+              clEditor.focus();
+            }
           }
         },
         { immediate: true },

src/services/diffUtils.js

@@ -64,21 +64,28 @@ function stripDiscussionOffsets(objectMap) {
 }
 
 function restoreDiscussionOffsets(content, markerKeys) {
-  const len = content.text.length;
+  // Init offsets (just in case)
+  Object.keys(content.discussions).forEach((discussionId) => {
+    const discussion = content.discussions[discussionId];
+    discussion.start = 0;
+    discussion.end = 0;
+  });
+  // Go through markers
+  let count = 0;
   const maxIdx = markerKeys.length;
-  for (let i = 0; i < len; i += 1) {
-    const idx = content.text.charCodeAt(i) - 0xe000;
-    if (idx >= 0 && idx < maxIdx) {
-      const markerKey = markerKeys[idx];
-      content.text = content.text.slice(0, i) + content.text.slice(i + 1);
-      const discussion = content.discussions[markerKey.id];
-      if (discussion) {
-        discussion[markerKey.offsetName] = i;
-      }
-      // We just removed the current character, we may have multiple markers with same offset
-      i -= 1;
+  content.text = content.text.replace(/[\ue000-\uf8ff]/g, (match, offset) => {
+    const idx = match.charCodeAt(0) - 0xe000;
+    if (idx >= maxIdx) {
+      return match;
     }
-  }
+    const markerKey = markerKeys[idx];
+    const discussion = content.discussions[markerKey.id];
+    if (discussion) {
+      discussion[markerKey.offsetName] = offset - count;
+    }
+    count += 1;
+    return '';
+  });
 }
 
 function mergeText(serverText, clientText, lastMergedText) {

src/services/editorSvcDiscussions.js

@@ -18,7 +18,7 @@ let editorClassAppliers = {};
 let previewClassAppliers = {};
 
 function getDiscussionMarkers(discussion, discussionId, onMarker) {
-  function getMarker(offsetName) {
+  const getMarker = (offsetName) => {
     const markerKey = `${discussionId}:${offsetName}`;
     let marker = discussionMarkers[markerKey];
     if (!marker) {
@@ -29,7 +29,7 @@ function getDiscussionMarkers(discussion, discussionId, onMarker) {
       discussionMarkers[markerKey] = marker;
     }
     onMarker(marker);
-  }
+  };
   getMarker('start');
   getMarker('end');
 }
@@ -117,7 +117,6 @@ export default {
   createClEditor(editorElt) {
     this.clEditor = cledit(editorElt, editorElt.parentNode);
     clEditor = this.clEditor;
-    removeDiscussionMarkers();
     clEditor.on('contentChanged', (text) => {
       const oldContent = store.getters['content/current'];
       const newContent = {
@@ -136,10 +135,12 @@ export default {
       store.dispatch('content/patchCurrent', newContent);
       isChangePatch = false;
     });
+    clEditor.on('focus', () => store.commit('discussion/setNewCommentFocus', false));
   },
   initClEditorInternal(opts) {
     const content = store.getters['content/current'];
     if (content) {
+      removeDiscussionMarkers(); // Markers will be recreated on contentChanged
       const contentState = store.getters['contentState/current'];
       const options = Object.assign({
         selectionStart: contentState.selectionStart,

src/services/providers/helpers/googleHelper.js

@@ -168,9 +168,12 @@ export default {
       }))
       // Call the user info endpoint
       .then(token => this.getUser(token.sub)
-        .then((user) => {
+        .catch(() => {
+          store.dispatch('notification/info', 'Please activate Google Plus to change your account name!');
+        })
+        .then((user = {}) => {
           // Add name to token
-          token.name = user.displayName;
+          token.name = user.displayName || 'Unknown';
           const existingToken = store.getters['data/googleTokens'][token.sub];
           if (existingToken) {
             // We probably retrieved a new token with restricted scopes.

src/store/discussion.js

@@ -12,9 +12,10 @@ export default {
     currentDiscussionId: null,
     newDiscussion: null,
     newDiscussionId: null,
+    isCommenting: false,
     newCommentText: '',
     newCommentSelection: { start: 0, end: 0 },
-    isCommenting: false,
+    newCommentFocus: false,
     stickyComment: null,
   },
   mutations: {
@@ -29,21 +30,27 @@ export default {
       state.newDiscussionId = utils.uid();
       state.currentDiscussionId = state.newDiscussionId;
       state.isCommenting = true;
+      state.newCommentFocus = true;
     },
     patchNewDiscussion: (state, value) => {
       Object.assign(state.newDiscussion, value);
     },
+    setIsCommenting: (state, value) => {
+      state.isCommenting = value;
+      if (!value) {
+        state.newDiscussionId = null;
+      } else {
+        state.newCommentFocus = true;
+      }
+    },
     setNewCommentText: (state, value) => {
       state.newCommentText = value || '';
     },
     setNewCommentSelection: (state, value) => {
       state.newCommentSelection = value;
     },
-    setIsCommenting: (state, value) => {
-      state.isCommenting = value;
-      if (!value) {
-        state.newDiscussionId = null;
-      }
+    setNewCommentFocus: (state, value) => {
+      state.newCommentFocus = value;
     },
     setStickyComment: (state, value) => {
       state.stickyComment = value;

src/store/layout.js

@@ -39,6 +39,11 @@ function computeStyles(state, getters, localSettings = getters['data/localSettin
   }
 
   styles.innerWidth = state.layout.bodyWidth;
+  if (styles.innerWidth < constants.editorMinWidth
+    + constants.gutterWidth + constants.buttonBarWidth
+  ) {
+    styles.layoutOverflow = true;
+  }
   if (styles.showSideBar) {
     styles.innerWidth -= constants.sideBarWidth;
   }
@@ -53,7 +58,6 @@ function computeStyles(state, getters, localSettings = getters['data/localSettin
   }
   if (doublePanelWidth < constants.editorMinWidth) {
     doublePanelWidth = constants.editorMinWidth;
-    styles.layoutOverflow = true;
   }
 
   if (styles.showSidePreview && doublePanelWidth / 2 < constants.editorMinWidth) {