docs: editor.fileTree.allowEdits and FileTree's onFileChange

Author: AriPerkkio

docs/tutorialkit.dev/src/components/react-examples/ExampleFileTree.tsx

@@ -2,25 +2,31 @@ import { useState } from 'react';
 import FileTree from '@tutorialkit/react/core/FileTree';
 
 export default function ExampleFileTree() {
-  const [selectedFile, setSelectedFile] = useState(FILES[0]);
+  const [files, setFiles] = useState(INITIAL_FILES);
+  const [selectedFile, setSelectedFile] = useState(INITIAL_FILES[0]);
 
   return (
     <FileTree
-      files={FILES}
+      files={files}
       hideRoot
       className="my-file-tree"
       hiddenFiles={['package-lock.json']}
       selectedFile={selectedFile}
       onFileSelect={setSelectedFile}
+      onFileChange={(event) => {
+        if (event.method === 'ADD') {
+          setFiles([...files, event.value].sort());
+        }
+      }}
     />
   );
 }
 
-const FILES = [
-  '/src/index.js',
-  '/src/index.html',
-  '/src/assets/logo.svg',
+const INITIAL_FILES = [
   '/package-lock.json',
   '/package.json',
+  '/src/assets/logo.svg',
+  '/src/index.html',
+  '/src/index.js',
   '/vite.config.js',
 ];

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -134,8 +134,34 @@ Defines which file should be opened in the [code editor](/guides/ui/#code-editor
 <PropertyTable inherited type="string" />
 
 ##### `editor`
-Configure whether or not the editor should be rendered. If an object is provided with `fileTree: false`, only the file tree is hidden.
-<PropertyTable inherited type="boolean | { fileTree: false }" />
+Configures options for the editor and its file tree. Editor can be hidden by providing `false`.
+Optionally you can hide just file tree by providing `fileTree: false`.
+
+File tree can be set to allow file editing from right clicks by setting `fileTree.allowEdits: true`.
+
+<PropertyTable inherited type={'Editor'} />
+
+The `Editor` type has the following shape:
+
+```ts
+type Editor =
+    | false
+    | { editor: { allowEdits: boolean } }
+
+```
+
+Example values:
+
+```yaml
+editor: false # Editor is hidden
+
+editor: # Editor is visible
+  fileTree: false # File tree is hidden
+
+editor: # Editor is visible
+  fileTree: # File tree is visible
+    allowEdits: true # User can add new files and folders from the file tree
+```
 
 ##### `previews`
 Configure which ports should be used for the previews allowing you to align the behavior with your demo application's dev server setup. If not specified, the lowest port will be used.

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

@@ -107,12 +107,23 @@ A component to list files in a tree view.
 
 * `onFileSelect: (file: string) => void` - A callback that will be called when a file is clicked. The path of the file that was clicked will be passed as an argument.
 
+* `onFileChange: (event: FileChangeEvent) => void` - An optional callback that will be called when a new file or folder is created from the file tree's context menu. When callback is not passed, file tree does not allow adding new files.
+  ```ts
+  interface FileChangeEvent {
+    type: 'FILE' | 'FOLDER';
+    method: 'ADD' | 'REMOVE' | 'RENAME';
+    value: string;
+  }
+  ```
+
 * `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.
 
 * `scope?: string` - Every file path that does not start with this scope will be hidden.
 
+* `i18n?: object` - Texts for file tree's components.
+
 * `className?: string` - A class name to apply to the root element of the component.