feat(react): add allowEditPatterns to FileTree

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx

@@ -116,6 +116,8 @@ A component to list files in a tree view.
   }
   ```
 
+* `allowEditPatterns?: string[]` - Glob patterns for paths that allow editing files and folders. Defaults to `['**']`.
+
 * `hideRoot: boolean` - Whether or not to hide the root directory in the tree. Defaults to `false`.
 
 * `hiddenFiles: (string | RegExp)[]` - A list of file paths that should be hidden from the tree.

packages/react/package.json

@@ -85,12 +85,14 @@
     "codemirror": "^6.0.1",
     "framer-motion": "^11.2.11",
     "nanostores": "^0.10.3",
+    "picomatch": "^4.0.2",
     "react": "^18.3.1",
     "react-resizable-panels": "^2.0.19"
   },
   "devDependencies": {
     "@codemirror/search": "^6.5.6",
     "@tutorialkit/types": "workspace:*",
+    "@types/picomatch": "^3.0.1",
     "@types/react": "^18.3.3",
     "chokidar": "3.6.0",
     "execa": "^9.2.0",

packages/react/src/Panels/EditorPanel.tsx

@@ -25,6 +25,7 @@ interface Props {
   helpAction?: 'solve' | 'reset';
   editorDocument?: EditorDocument;
   selectedFile?: string | undefined;
+  allowEditPatterns?: ComponentProps<typeof FileTree>['allowEditPatterns'];
   onEditorChange?: OnEditorChange;
   onEditorScroll?: OnEditorScroll;
   onHelpClick?: () => void;
@@ -43,6 +44,7 @@ export function EditorPanel({
   helpAction,
   editorDocument,
   selectedFile,
+  allowEditPatterns,
   onEditorChange,
   onEditorScroll,
   onHelpClick,
@@ -83,6 +85,7 @@ export function EditorPanel({
           hideRoot={hideRoot ?? true}
           files={files}
           scope={fileTreeScope}
+          allowEditPatterns={allowEditPatterns}
           onFileSelect={onFileSelect}
           onFileChange={onFileTreeChange}
         />

packages/react/src/Panels/WorkspacePanel.tsx

@@ -161,6 +161,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
         onHelpClick={lessonFullyLoaded ? onHelpClick : undefined}
         onFileSelect={(filePath) => tutorialStore.setSelectedFile(filePath)}
         onFileTreeChange={editorConfig.fileTree.allowEdits ? onFileTreeChange : undefined}
+        allowEditPatterns={editorConfig.fileTree.allowEdits ? editorConfig.fileTree.allowEdits : undefined}
         selectedFile={selectedFile}
         onEditorScroll={(position) => tutorialStore.setCurrentDocumentScrollPosition(position)}
         onEditorChange={(update) => tutorialStore.setCurrentDocumentContent(update.content)}

packages/react/src/core/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState, type ComponentProps } from 'react';
 import { Root, Portal, Content, Item, Trigger } from '@radix-ui/react-context-menu';
+import picomatch from 'picomatch/posix';
 import type { FileDescriptor, I18n } from '@tutorialkit/types';
 
 interface FileChangeEvent {
@@ -17,6 +18,9 @@ interface Props extends ComponentProps<'div'> {
   /** Callback invoked when file is changed. */
   onFileChange?: (event: FileChangeEvent | FileRenameEvent) => void;
 
+  /** Glob patterns for paths that allow editing files and folders. Defaults to `['**']`. */
+  allowEditPatterns?: string[];
+
   /** Directory of the clicked file. */
   directory: string;
 
@@ -32,6 +36,7 @@ interface Props extends ComponentProps<'div'> {
 
 export function ContextMenu({
   onFileChange,
+  allowEditPatterns = ['**'],
   directory,
   i18n,
   position = 'before',
@@ -50,11 +55,19 @@ export function ContextMenu({
     const name = event.currentTarget.value;
 
     if (name) {
-      onFileChange?.({
-        value: `${directory}/${name}`,
-        type: state === 'add_file' ? 'file' : 'folder',
-        method: 'add',
-      });
+      const value = `${directory}/${name}`;
+      const isAllowed = picomatch.isMatch(value, allowEditPatterns);
+
+      if (isAllowed) {
+        onFileChange?.({
+          value,
+          type: state === 'add_file' ? 'file' : 'folder',
+          method: 'add',
+        });
+      } else {
+        // TODO: Use `@radix-ui/react-dialog` instead
+        alert(`File "${value}" is not allowed. Allowed patterns: [${allowEditPatterns.join(', ')}].`);
+      }
     }
 
     setState('idle');

packages/react/src/core/FileTree.tsx

@@ -11,6 +11,7 @@ interface Props {
   selectedFile?: string;
   onFileSelect?: (filePath: string) => void;
   onFileChange?: ComponentProps<typeof ContextMenu>['onFileChange'];
+  allowEditPatterns?: ComponentProps<typeof ContextMenu>['allowEditPatterns'];
   i18n?: ComponentProps<typeof ContextMenu>['i18n'];
   hideRoot: boolean;
   scope?: string;
@@ -22,6 +23,7 @@ export function FileTree({
   files,
   onFileSelect,
   onFileChange,
+  allowEditPatterns,
   selectedFile,
   hideRoot,
   scope,
@@ -109,6 +111,7 @@ export function FileTree({
                 collapsed={collapsedFolders.has(fileOrFolder.id)}
                 onClick={() => toggleCollapseState(fileOrFolder.id)}
                 onFileChange={onFileChange}
+                allowEditPatterns={allowEditPatterns}
               />
             );
           }
@@ -121,6 +124,7 @@ export function FileTree({
         style={getDepthStyle(0)}
         directory=""
         onFileChange={onFileChange}
+        allowEditPatterns={allowEditPatterns}
         triggerProps={{ className: 'h-full', 'data-testid': 'file-tree-root-context-menu' }}
       />
     </div>
@@ -134,12 +138,26 @@ interface FolderProps {
   collapsed: boolean;
   onClick: () => void;
   onFileChange: Props['onFileChange'];
+  allowEditPatterns: Props['allowEditPatterns'];
   i18n: Props['i18n'];
 }
 
-function Folder({ folder: { depth, name, fullPath }, i18n, collapsed, onClick, onFileChange }: FolderProps) {
+function Folder({
+  folder: { depth, name, fullPath },
+  i18n,
+  collapsed,
+  onClick,
+  onFileChange,
+  allowEditPatterns,
+}: FolderProps) {
   return (
-    <ContextMenu onFileChange={onFileChange} i18n={i18n} directory={fullPath} style={getDepthStyle(1 + depth)}>
+    <ContextMenu
+      onFileChange={onFileChange}
+      allowEditPatterns={allowEditPatterns}
+      i18n={i18n}
+      directory={fullPath}
+      style={getDepthStyle(1 + depth)}
+    >
       <NodeButton
         className="group transition-theme bg-tk-elements-fileTree-folder-backgroundColor hover:bg-tk-elements-fileTree-folder-backgroundColorHover text-tk-elements-fileTree-folder-textColor hover:text-tk-elements-fileTree-folder-textColor"
         depth={depth}

packages/react/src/types.d.ts

@@ -0,0 +1,4 @@
+// https://github.com/micromatch/picomatch?tab=readme-ov-file#api
+declare module 'picomatch/posix' {
+  export { default } from 'picomatch';
+}