Adding tour step command to tree

CHANGELOG.md

@@ -1,3 +1,10 @@
+## v0.0.46 (03/09/2021)
+
+- Added the new `Add Tour Step` command to tour step nodes in the `CodeTour` tree
+- When you add a new tour step, you're now transitioned into preview mode.
+- Fixed a bug with the rendering of shell commands, immediately after saving a step.
+- The `CodeTour: Edit Tour` command is now hidden from the command palette
+
 ## v0.0.45 (03/09/2021)
 
 - Fixed an issue with gutter decorators being duplicated when copying/pasting code on lines associated with a tour step

package.json

@@ -3,7 +3,7 @@
   "displayName": "CodeTour",
   "description": "VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor",
   "publisher": "vsls-contrib",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "author": {
     "name": "Microsoft Corporation"
   },
@@ -219,18 +219,10 @@
           "command": "codetour.addContentStep",
           "when": "codetour:inTour && codetour:recording && codetour:canEditTour"
         },
-        {
-          "command": "codetour.editTour",
-          "when": "codetour:inTour && !codetour:recording && codetour:canEditTour"
-        },
         {
           "command": "codetour.endTour",
           "when": "codetour:inTour"
         },
-        {
-          "command": "codetour.previewTour",
-          "when": "codetour:inTour && codetour:recording"
-        },
         {
           "command": "codetour.recordTour",
           "when": "workspaceFolderCount != 0"
@@ -287,6 +279,10 @@
           "command": "codetour.deleteTourStep",
           "when": "false"
         },
+        {
+          "command": "codetour.editTour",
+          "when": "false"
+        },
         {
           "command": "codetour.editTourAtStep",
           "when": "false"
@@ -355,12 +351,12 @@
         {
           "command": "codetour.editTour",
           "group": "inline@4",
-          "when": "commentController == codetour && !codetour:recording && codetour:canEditTour"
+          "when": "commentController == codetour && !codetour:isEditing && codetour:canEditTour"
         },
         {
           "command": "codetour.previewTour",
           "group": "inline@4",
-          "when": "commentController == codetour && codetour:recording && !commentThreadIsEmpty"
+          "when": "commentController == codetour && codetour:isEditing && !commentThreadIsEmpty"
         }
       ],
       "comments/commentThread/context": [
@@ -527,6 +523,11 @@
           "when": "viewItem =~ /^codetour.tourStep/",
           "group": "change@1"
         },
+        {
+          "command": "codetour.addContentStep",
+          "when": "viewItem =~ /^codetour.tourStep/ && codetour:recording",
+          "group": "change@2"
+        },
         {
           "command": "codetour.editTourAtStep",
           "when": "viewItem =~ /^codetour.tourStep/ && !codetour:recording",

src/recorder/commands.ts

@@ -10,6 +10,7 @@ import { api, RefType } from "../git";
 import { CodeTourComment } from "../player";
 import { CodeTour, CodeTourStep, store } from "../store";
 import {
+  EDITING_KEY,
   endCurrentCodeTour,
   exportTour,
   onDidEndTour,
@@ -264,7 +265,7 @@ export function registerRecorderCommands() {
 
   vscode.commands.registerCommand(
     `${EXTENSION_NAME}.addContentStep`,
-    action(async () => {
+    action(async (node?: CodeTourStepNode) => {
       const value = store.activeTour?.step === -1 ? "Introduction" : "";
       const title = await vscode.window.showInputBox({
         prompt: "Specify the title of the step",
@@ -275,7 +276,14 @@ export function registerRecorderCommands() {
         return;
       }
 
-      const stepNumber = ++store.activeTour!.step;
+      let stepNumber;
+      if (node) {
+        stepNumber = node.stepNumber + 1;
+        store.activeTour!.step = stepNumber;
+      } else {
+        stepNumber = ++store.activeTour!.step;
+    }
+    
       const tour = store.activeTour!.tour;
 
       tour.steps.splice(stepNumber, 0, {
@@ -283,6 +291,11 @@ export function registerRecorderCommands() {
         description: ""
       });
 
+      if (!store.isEditing) {
+        store.isEditing = true;
+        vscode.commands.executeCommand("setContext", EDITING_KEY, false);
+      }
+
       saveTour(tour);
     })
   );
@@ -301,6 +314,11 @@ export function registerRecorderCommands() {
         description: ""
       });
 
+      if (!store.isEditing) {
+        store.isEditing = true;
+        vscode.commands.executeCommand("setContext", EDITING_KEY, false);
+      }
+
       saveTour(tour);
     })
   );
@@ -320,6 +338,11 @@ export function registerRecorderCommands() {
         description: ""
       });
 
+      if (!store.isEditing) {
+        store.isEditing = true;
+        vscode.commands.executeCommand("setContext", EDITING_KEY, false);
+      }
+
       saveTour(tour);
     })
   );
@@ -356,6 +379,9 @@ export function registerRecorderCommands() {
 
       tour.steps.splice(stepNumber, 0, step);
 
+      store.isEditing = false;
+      vscode.commands.executeCommand("setContext", EDITING_KEY, false);
+
       saveTour(tour);
 
       let label = `Step #${stepNumber + 1} of ${tour.steps.length}`;
@@ -391,7 +417,8 @@ export function registerRecorderCommands() {
         "codetour:recording",
         true
       );
-
+      await vscode.commands.executeCommand("setContext", EDITING_KEY, true);
+      
       if (node instanceof CodeTourNode) {
         startCodeTour(node.tour);
       } else if (store.activeTour) {
@@ -417,6 +444,7 @@ export function registerRecorderCommands() {
     `${EXTENSION_NAME}.previewTour`,
     async (node: CodeTourNode | vscode.CommentThread) => {
       store.isEditing = false;
+      vscode.commands.executeCommand("setContext", EDITING_KEY, false);
       await vscode.commands.executeCommand(
         "setContext",
         "codetour:recording",
@@ -485,6 +513,7 @@ export function registerRecorderCommands() {
       });
 
       store.isEditing = false;
+      vscode.commands.executeCommand("setContext", EDITING_KEY, false);
       await saveTour(store.activeTour!.tour);
     }
   );

src/store/actions.ts

@@ -23,6 +23,7 @@ import { progress } from "./storage";
 const CAN_EDIT_TOUR_KEY = `${EXTENSION_NAME}:canEditTour`;
 const IN_TOUR_KEY = `${EXTENSION_NAME}:inTour`;
 const RECORDING_KEY = `${EXTENSION_NAME}:recording`;
+export const EDITING_KEY = `${EXTENSION_NAME}:isEditing`;
 
 const _onDidEndTour = new EventEmitter<CodeTour>();
 export const onDidEndTour = _onDidEndTour.event;
@@ -60,6 +61,7 @@ export function startCodeTour(
     store.isRecording = true;
     store.isEditing = true;
     commands.executeCommand("setContext", RECORDING_KEY, true);
+    commands.executeCommand("setContext", EDITING_KEY, true);
   } else {
     _onDidStartTour.fire([tour, step]);
   }
@@ -101,6 +103,7 @@ export async function endCurrentCodeTour(fireEvent: boolean = true) {
     store.isRecording = false;
     store.isEditing = false;
     commands.executeCommand("setContext", RECORDING_KEY, false);
+    commands.executeCommand("setContext", EDITING_KEY, false);
   }
 
   stopPlayer();