feat(runtime): new metadata option editor.fileTree.allowEdits

Author: AriPerkkio

packages/react/src/Panels/WorkspacePanel.tsx

@@ -98,6 +98,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
   const selectedFile = useStore(tutorialStore.selectedFile);
   const currentDocument = useStore(tutorialStore.currentDocument);
   const lessonFullyLoaded = useStore(tutorialStore.lessonFullyLoaded);
+  const editorConfig = useStore(tutorialStore.editorConfig);
   const storeRef = useStore(tutorialStore.ref);
   const files = useStore(tutorialStore.files);
 
@@ -159,7 +160,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
         helpAction={helpAction}
         onHelpClick={lessonFullyLoaded ? onHelpClick : undefined}
         onFileSelect={(filePath) => tutorialStore.setSelectedFile(filePath)}
-        onFileTreeChange={onFileTreeChange}
+        onFileTreeChange={editorConfig.fileTree.allowEdits ? onFileTreeChange : undefined}
         selectedFile={selectedFile}
         onEditorScroll={(position) => tutorialStore.setCurrentDocumentScrollPosition(position)}
         onEditorChange={(update) => tutorialStore.setCurrentDocumentContent(update.content)}

packages/runtime/src/store/editor.ts

@@ -1,5 +1,6 @@
-import type { FilesRefList, Files } from '@tutorialkit/types';
+import type { FilesRefList, Files, EditorSchema } from '@tutorialkit/types';
 import { atom, map, computed } from 'nanostores';
+import { EditorConfig } from '../webcontainer/editor-config.js';
 
 export interface EditorDocument {
   value: string | Uint8Array;
@@ -16,6 +17,7 @@ export interface ScrollPosition {
 export type EditorDocuments = Record<string, EditorDocument | undefined>;
 
 export class EditorStore {
+  editorConfig = atom<EditorConfig>(new EditorConfig());
   selectedFile = atom<string | undefined>();
   documents = map<EditorDocuments>({});
 
@@ -28,6 +30,10 @@ export class EditorStore {
     return documents[selectedFile];
   });
 
+  setEditorConfig(config?: EditorSchema) {
+    this.editorConfig.set(new EditorConfig(config));
+  }
+
   setSelectedFile(filePath: string | undefined) {
     this.selectedFile.set(filePath);
   }

packages/runtime/src/store/index.ts

@@ -8,6 +8,7 @@ import type { ITerminal } from '../utils/terminal.js';
 import { bootStatus, unblockBoot, type BootStatus } from '../webcontainer/on-demand-boot.js';
 import type { PreviewInfo } from '../webcontainer/preview-info.js';
 import { StepsController } from '../webcontainer/steps.js';
+import type { EditorConfig } from '../webcontainer/editor-config.js';
 import type { TerminalConfig } from '../webcontainer/terminal-config.js';
 import { EditorStore, type EditorDocument, type EditorDocuments, type ScrollPosition } from './editor.js';
 import { PreviewsStore } from './previews.js';
@@ -141,6 +142,7 @@ export class TutorialStore {
 
     this._previewsStore.setPreviews(lesson.data.previews ?? true);
     this._terminalStore.setTerminalConfiguration(lesson.data.terminal);
+    this._editorStore.setEditorConfig(lesson.data.editor);
     this._runner.setCommands(lesson.data);
     this._editorStore.setDocuments(lesson.files);
 
@@ -195,6 +197,10 @@ export class TutorialStore {
     return this._terminalStore.terminalConfig;
   }
 
+  get editorConfig(): ReadableAtom<EditorConfig> {
+    return this._editorStore.editorConfig;
+  }
+
   get currentDocument(): ReadableAtom<EditorDocument | undefined> {
     return this._editorStore.currentDocument;
   }
@@ -243,19 +249,15 @@ export class TutorialStore {
       return false;
     }
 
-    const { editor } = this._lesson.data;
-
-    return editor === undefined || editor === true || (editor !== false && editor?.fileTree !== false);
+    return this.editorConfig.get().fileTree.visible;
   }
 
   hasEditor(): boolean {
     if (!this._lesson) {
       return false;
     }
 
-    const { editor } = this._lesson.data;
-
-    return editor !== false;
+    return this.editorConfig.get().visible;
   }
 
   hasPreviews(): boolean {

packages/runtime/src/webcontainer/editor-config.ts

@@ -0,0 +1,70 @@
+import type { EditorSchema } from '@tutorialkit/types';
+
+interface NormalizedEditorConfig {
+  /** Visibility of editor */
+  visible: boolean;
+
+  fileTree: {
+    /** Visibility of file tree */
+    visible: boolean;
+
+    /** Whether to allow file and folder editing in file tree */
+    allowEdits: boolean;
+  };
+}
+
+export class EditorConfig {
+  private _config: NormalizedEditorConfig;
+
+  constructor(config?: EditorSchema) {
+    this._config = normalizeEditorConfig(config);
+  }
+
+  get visible() {
+    return this._config.visible;
+  }
+
+  get fileTree() {
+    return this._config.fileTree;
+  }
+}
+
+function normalizeEditorConfig(config?: EditorSchema): NormalizedEditorConfig {
+  if (config === false) {
+    return {
+      visible: false,
+      fileTree: {
+        visible: false,
+        allowEdits: false,
+      },
+    };
+  }
+
+  if (config === undefined || config === true) {
+    return {
+      visible: true,
+      fileTree: {
+        visible: true,
+        allowEdits: false,
+      },
+    };
+  }
+
+  if (typeof config.fileTree === 'boolean') {
+    return {
+      visible: true,
+      fileTree: {
+        visible: config.fileTree,
+        allowEdits: false,
+      },
+    };
+  }
+
+  return {
+    visible: true,
+    fileTree: {
+      visible: true,
+      allowEdits: config.fileTree?.allowEdits || false,
+    },
+  };
+}

packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/content.mdx

@@ -8,6 +8,9 @@ previews:
   - [1, 'Test Runner']
   - '2/some/custom/pathname'
   - '2/another/pathname'
+editor:
+  fileTree:
+    allowEdits: true
 terminal:
   panels: 'terminal'
 editPageLink: 'https://tutorialkit.dev'

packages/types/src/schemas/common.ts

@@ -161,8 +161,32 @@ export const terminalSchema = z.union([
   }),
 ]);
 
+export const editorSchema = z.union([
+  // can either be completely removed by setting it to `false`
+  z.boolean().optional(),
+
+  z.strictObject({
+    fileTree: z
+      .union([
+        // or you can only remove the file tree
+        z.boolean(),
+
+        // or configure file tree with options
+        z.strictObject({
+          allowEdits: z
+            .boolean()
+            .describe(
+              'Allow file tree’s items to be edited by right clicking them. Supports file and folder creation.',
+            ),
+        }),
+      ])
+      .optional(),
+  }),
+]);
+
 export type TerminalPanelType = z.infer<typeof panelTypeSchema>;
 export type TerminalSchema = z.infer<typeof terminalSchema>;
+export type EditorSchema = z.infer<typeof editorSchema>;
 
 export const webcontainerSchema = commandsSchema.extend({
   previews: previewSchema
@@ -191,18 +215,10 @@ export const webcontainerSchema = commandsSchema.extend({
     .string()
     .optional()
     .describe('Defines which file should be opened in the code editor by default when lesson loads.'),
-  editor: z
-    .union([
-      // can either be completely removed by setting it to `false`
-      z.boolean().optional(),
-
-      // or you can only remove the file tree
-      z.strictObject({
-        fileTree: z.boolean().optional(),
-      }),
-    ])
+  editor: editorSchema
+    .optional()
     .describe(
-      'Configure whether or not the editor should be rendered. If an object is provided with fileTree: false, only the file tree is hidden.',
+      'Configure whether or not the editor should be rendered. File tree can be configured by proving an object with fileTree option.',
     ),
   i18n: i18nSchema
     .optional()