Fixed duplicate Main workspace

src/components/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app" :class="classes">
+  <div class="app" :class="classes" @keydown.esc="close">
     <splash-screen v-if="!ready"></splash-screen>
     <layout v-else></layout>
     <modal></modal>
@@ -46,6 +46,11 @@ export default {
       return Array.isArray(result) ? result : themeClasses.light;
     },
   },
+  methods: {
+    close() {
+      tempFileSvc.close();
+    },
+  },
   async created() {
     try {
       await syncSvc.init();

src/components/ExplorerNode.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--folder': node.isFolder, 'explorer-node--open': isOpen, 'explorer-node--trash': node.isTrash, 'explorer-node--temp': node.isTemp, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="node.noDrop || setDragTarget(node)" @dragleave.stop="isDragTarget && setDragTarget()" @drop.prevent.stop="onDrop" @contextmenu="onContextMenu">
     <div class="explorer-node__item-editor" v-if="isEditing" :style="{paddingLeft: leftPadding}" draggable="true" @dragstart.stop.prevent>
-      <input type="text" class="text-input" v-focus @blur="submitEdit()" @keydown.stop @keydown.enter="submitEdit()" @keydown.esc="submitEdit(true)" v-model="editingNodeName">
+      <input type="text" class="text-input" v-focus @blur="submitEdit()" @keydown.stop @keydown.enter="submitEdit()" @keydown.esc.stop="submitEdit(true)" v-model="editingNodeName">
     </div>
     <div class="explorer-node__item" v-else :style="{paddingLeft: leftPadding}" @click="select()" draggable="true" @dragstart.stop="setDragSourceId" @dragend.stop="setDragTarget()">
       {{node.item.name}}
@@ -10,7 +10,7 @@
     <div class="explorer-node__children" v-if="node.isFolder && isOpen">
       <explorer-node v-for="node in node.folders" :key="node.item.id" :node="node" :depth="depth + 1"></explorer-node>
       <div v-if="newChild" class="explorer-node__new-child" :class="{'explorer-node__new-child--folder': newChild.isFolder}" :style="{paddingLeft: childLeftPadding}">
-        <input type="text" class="text-input" v-focus @blur="submitNewChild()" @keydown.stop @keydown.enter="submitNewChild()" @keydown.esc="submitNewChild(true)" v-model.trim="newChildName">
+        <input type="text" class="text-input" v-focus @blur="submitNewChild()" @keydown.stop @keydown.enter="submitNewChild()" @keydown.esc.stop="submitNewChild(true)" v-model.trim="newChildName">
       </div>
       <explorer-node v-for="node in node.files" :key="node.item.id" :node="node" :depth="depth + 1"></explorer-node>
     </div>

src/components/FindReplace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="find-replace" @keydown.esc="onEscape">
+  <div class="find-replace" @keydown.esc.stop="onEscape">
     <button class="find-replace__close-button button not-tabbable" @click="close()" v-title="'Close'">
       <icon-close></icon-close>
     </button>

src/components/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal" v-if="config" @keydown.esc="onEscape" @keydown.tab="onTab" @focusin="onFocusInOut" @focusout="onFocusInOut">
+  <div class="modal" v-if="config" @keydown.esc.stop="onEscape" @keydown.tab="onTab" @focusin="onFocusInOut" @focusout="onFocusInOut">
     <div class="modal__sponsor-banner" v-if="!isSponsor">
       StackEdit is <a class="not-tabbable" target="_blank" href="https://github.com/benweet/stackedit/">open source</a>, please consider
       <a class="not-tabbable" href="javascript:void(0)" @click="sponsor">sponsoring</a> for just $5.

src/components/NavigationBar.vue

@@ -2,7 +2,7 @@
   <nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent, 'navigation-bar--light': light}">
     <!-- Explorer -->
     <div class="navigation-bar__inner navigation-bar__inner--left navigation-bar__inner--button">
-      <button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close-circle></icon-close-circle></button>
+      <button class="navigation-bar__button navigation-bar__button--close button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-check-circle></icon-check-circle></button>
       <button class="navigation-bar__button navigation-bar__button--explorer-toggler button" v-else tour-step-anchor="explorer" @click="toggleExplorer()" v-title="'Toggle explorer'"><icon-folder></icon-folder></button>
     </div>
     <!-- Side bar -->
@@ -19,7 +19,7 @@
       <!-- Title -->
       <div class="navigation-bar__title navigation-bar__title--fake text-input"></div>
       <div class="navigation-bar__title navigation-bar__title--text text-input" :style="{width: titleWidth + 'px'}">{{title}}</div>
-      <input class="navigation-bar__title navigation-bar__title--input text-input" :class="{'navigation-bar__title--focus': titleFocus, 'navigation-bar__title--scrolling': titleScrolling}" :style="{width: titleWidth + 'px'}" @focus="editTitle(true)" @blur="editTitle(false)" @keydown.enter="submitTitle(false)" @keydown.esc="submitTitle(true)" @mouseenter="titleHover = true" @mouseleave="titleHover = false" v-model="title">
+      <input class="navigation-bar__title navigation-bar__title--input text-input" :class="{'navigation-bar__title--focus': titleFocus, 'navigation-bar__title--scrolling': titleScrolling}" :style="{width: titleWidth + 'px'}" @focus="editTitle(true)" @blur="editTitle(false)" @keydown.enter="submitTitle(false)" @keydown.esc.stop="submitTitle(true)" @mouseenter="titleHover = true" @mouseleave="titleHover = false" v-model="title">
       <!-- Sync/Publish -->
       <div class="flex flex--row" :class="{'navigation-bar__hidden': styles.hideLocations}">
         <a class="navigation-bar__button navigation-bar__button--location button" :class="{'navigation-bar__button--blink': location.id === currentLocation.id}" v-for="location in syncLocations" :key="location.id" :href="location.url" target="_blank" v-title="'Synchronized location'"><icon-provider :provider-id="location.providerId"></icon-provider></a>
@@ -433,6 +433,16 @@ export default {
   display: inline-block;
 }
 
+.navigation-bar__button--close {
+  color: lighten($link-color, 15%);
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: lighten($link-color, 25%);
+  }
+}
+
 .navigation-bar__title--input {
   cursor: pointer;
 

src/components/Tour.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tour" @keydown.esc="skip">
+  <div class="tour" @keydown.esc.stop="skip">
     <div class="tour-step" :class="'tour-step--' + step" :style="stepStyle">
       <div class="tour-step__inner" v-if="step === 'welcome'">
         <h2>Welcome back!</h2>
@@ -139,7 +139,7 @@ export default {
   position: absolute;
 }
 
-$tour-step-background: mix(#f3f3f3, $selection-highlighting-color, 75%);
+$tour-step-background: transparentize(mix(#f3f3f3, $selection-highlighting-color, 75%), 0.025);
 $tour-step-width: 240px;
 
 .tour-step__inner {

src/components/gutters/NewComment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comment comment--new" @keydown.esc="cancelNewComment">
+  <div class="comment comment--new" @keydown.esc.stop="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">

src/components/modals/providers/GithubOpenModal.vue

@@ -8,7 +8,7 @@
       <form-entry label="Repository URL" error="repoUrl">
         <input slot="field" class="textfield" type="text" v-model.trim="repoUrl" @keydown.enter="resolve()">
         <div class="form-entry__info">
-          <b>Example:</b> https://github.com/benweet/stackedit
+          <b>Example:</b> https://github.com/owner/my-repo
         </div>
       </form-entry>
       <form-entry label="File path" error="path">

src/components/modals/providers/GithubPublishModal.vue

@@ -8,7 +8,7 @@
       <form-entry label="Repository URL" error="repoUrl">
         <input slot="field" class="textfield" type="text" v-model.trim="repoUrl" @keydown.enter="resolve()">
         <div class="form-entry__info">
-          <b>Example:</b> https://github.com/benweet/stackedit
+          <b>Example:</b> https://github.com/owner/my-repo
         </div>
       </form-entry>
       <form-entry label="File path" error="path">

src/components/modals/providers/GithubSaveModal.vue

@@ -8,7 +8,7 @@
       <form-entry label="Repository URL" error="repoUrl">
         <input slot="field" class="textfield" type="text" v-model.trim="repoUrl" @keydown.enter="resolve()">
         <div class="form-entry__info">
-          <b>Example:</b> https://github.com/benweet/stackedit
+          <b>Example:</b> https://github.com/owner/my-repo
         </div>
       </form-entry>
       <form-entry label="File path" error="path">

src/components/modals/providers/GithubWorkspaceModal.vue

@@ -8,7 +8,7 @@
       <form-entry label="Repository URL" error="repoUrl">
         <input slot="field" class="textfield" type="text" v-model.trim="repoUrl" @keydown.enter="resolve()">
         <div class="form-entry__info">
-          <b>Example:</b> https://github.com/benweet/stackedit
+          <b>Example:</b> https://github.com/owner/my-repo
         </div>
       </form-entry>
       <form-entry label="Folder path" info="optional">

src/data/defaults/defaultWorkspaces.js

@@ -1,5 +1,6 @@
 export default () => ({
   main: {
+    id: 'main',
     name: 'Main workspace',
     // The rest will be filled by the workspace/workspacesById getter
   },

src/icons/CheckCircle.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
+    <path d="M 12,2C 17.5228,2 22,6.47716 22,12C 22,17.5228 17.5228,22 12,22C 6.47715,22 2,17.5228 2,12C 2,6.47716 6.47715,2 12,2 Z M 10.9999,16.5019L 17.9999,9.50193L 16.5859,8.08794L 10.9999,13.6739L 7.91391,10.5879L 6.49991,12.0019L 10.9999,16.5019 Z "/>
+  </svg>
+</template>

src/icons/CloseCircle.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
-    <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
-  </svg>
-</template>

src/icons/index.js

@@ -49,7 +49,7 @@ import History from './History';
 import Database from './Database';
 import Magnify from './Magnify';
 import FormatListChecks from './FormatListChecks';
-import CloseCircle from './CloseCircle';
+import CheckCircle from './CheckCircle';
 import ContentCopy from './ContentCopy';
 
 Vue.component('iconProvider', Provider);
@@ -102,5 +102,5 @@ Vue.component('iconHistory', History);
 Vue.component('iconDatabase', Database);
 Vue.component('iconMagnify', Magnify);
 Vue.component('iconFormatListChecks', FormatListChecks);
-Vue.component('iconCloseCircle', CloseCircle);
+Vue.component('iconCheckCircle', CheckCircle);
 Vue.component('iconContentCopy', ContentCopy);

src/services/tempFileSvc.js

@@ -10,23 +10,26 @@ const {
   contentText,
   contentProperties,
 } = utils.queryParams;
+const isLight = origin && window.parent;
 
 export default {
   setReady() {
-    if (origin && window.parent) {
+    if (isLight) {
       // Wait for the editor to init
       setTimeout(() => window.parent.postMessage({ type: 'ready' }, origin), 1);
     }
   },
   closed: false,
   close() {
-    if (!this.closed && origin && window.parent) {
+    if (isLight) {
+      if (!this.closed) {
         window.parent.postMessage({ type: 'close' }, origin);
       }
       this.closed = true;
+    }
   },
   async init() {
-    if (!origin || !window.parent) {
+    if (!isLight) {
       return;
     }
     store.commit('setLight', true);

src/store/workspace.js

@@ -103,18 +103,20 @@ export default {
     patchWorkspacesById: ({ commit, rootGetters }, workspaces) => {
       const sanitizedWorkspaces = {};
       Object
-        .values({
+        .entries({
           ...rootGetters['data/workspaces'],
           ...workspaces,
         })
-        .forEach((workspace) => {
+        .forEach(([id, workspace]) => {
-          sanitizedWorkspaces[workspace.id] = {
+          sanitizedWorkspaces[id] = {
             ...workspace,
+            id,
             // Do not store urls
             url: undefined,
             locationUrl: undefined,
           };
         });
+
       commit(
         'data/setItem',
         { id: 'workspaces', data: sanitizedWorkspaces },