feat: add files via file tree

[AriPerkkio]

• Closes https://github.com/stackblitz/tutorialkit/issues/263
• Related to https://github.com/stackblitz/tutorialkit/discussions/204
• Not related to https://github.com/stackblitz/tutorialkit/issues/208. That one requires WebContainer changes so that we can listen for fs changes.
• While working on the FileTree I noticed plenty of issues with it and created https://github.com/stackblitz/tutorialkit/issues/326 as follow-up.

BREAKING CHANGES

• Projects that are using @tutorialkit/react package directly, without TutorialKit need to update <FileTree> component's props.files type

Description

Adds new metadata option that can be used to enable file and folder creation in the file tree. By default this feature is disabled.

---
type: lesson
editor:
  fileTree:
    allowEdits: true
---

tk-filetree-example.webm

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

Early draft PR, mostly so that 81eac67d57180f7df4b6bb699dddb21fa58ee519 can be used if #208 is started before this is finalized.

[AriPerkkio]

@Nemikolh ready for review round 2! 🔔

Added support for identifying files and folders from each other - we no longer require files to have extensions.

However there's still an edge case that causes issues. As we are using filepath as map key here, there's no way for us to have file and folder with same name in the tree.

https://github.com/stackblitz/tutorialkit/blob/38df1f39f16ff3c7f228cd90c4ecdf2a71232072/packages/runtime/src/store/editor.ts#L16

So for example this will fail:

test('empty directories are removed when new content is added', () => {
  const store = new EditorStore();
  store.setDocuments({
    example: 'should not be confused as directory',
  });

  store.addFileOrFolder({ path: 'example', type: 'FOLDER' });
  store.addFileOrFolder({ path: 'example/another', type: 'FOLDER' });

  expect(store.files.get().map(toFilename)).toMatchInlineSnapshot(`
    [
      "example/another",
      "example",
    ]
  `);
});

Is this really an issue that users could run into? Maybe not.

[Nemikolh]

@AriPerkkio I'm not up to date with every file systems that exists out there, but AFAIK, in most of them you cannot have a file and a folder named the same. If you think about it, that make sense with the Linux open function and its equivalent in node.

In our case, what matter is what the WebContainer fs does and it does not allow multiple files given a single path. So this is completely fine :+1:

[AriPerkkio]

Oh that's right! It does make sense, when you think from the file system's perspective! I guess I was looking at this too much from FileTree's visual representation and didn't realize it's not possible on fs. 💯

[AriPerkkio]

I agree on all points! I'll continue on that next.