implement rename and delete for files

README.md

@@ -10,9 +10,9 @@ All commands are run from the root of the project, from a terminal:
 
 | Command                   | Action                                           |
 | :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
+| `pnpm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `pnpm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
+| `pnpm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
+| `pnpm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `pnpm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+| `pnpm run astro -- --help` | Get help using the Astro CLI                     |

src/components/Playground.tsx

@@ -175,8 +175,32 @@ export default function Playground({ lang }: { lang: PlaygroundLang }) {
                 <FileView
                     className="file-view"
                     root={rootDir}
-                    fileName={fileName}
+                    selectedFileName={fileName}
                     setSelectedFileName={setFileName}
+                    deleteFile={(name) => {
+                        if (monaco) {
+                            console.log(name);
+                            deleteFile(monaco, updateRootDir, name);
+                            if (name === fileName) {
+                                const newFile = monaco.editor
+                                    .getModels()[0]
+                                    ?.uri.path.slice(1);
+                                if (newFile) {
+                                    setFileName(newFile);
+                                } else {
+                                    setFileName("");
+                                }
+                            }
+                        }
+                    }}
+                    renameFile={(oldName, newName) => {
+                        if (monaco) {
+                            renameFile(monaco, updateRootDir, oldName, newName);
+                            if (oldName === fileName) {
+                                setFileName(newName);
+                            }
+                        }
+                    }}
                     lang={lang.explorer}
                 />
                 <Editor
@@ -274,9 +298,20 @@ function loadFile(
     file: File,
     name: string
 ) {
+    let extension = name.split(".").pop()!;
+    let lang = undefined;
+    if (extension === "shu") {
+        lang = "shulkerscript";
+    } else if (extension === "toml") {
+        lang = "toml";
+    } else if (extension === "mcfunction") {
+        lang = "mcfunction";
+    } else if (extension === "json") {
+        lang = "json";
+    }
     const uri = monaco.Uri.parse(name);
     if (!monaco.editor.getModel(uri)) {
-        monaco.editor.createModel(file.content, file.language, uri);
+        monaco.editor.createModel(file.content, lang, uri);
     }
     updater((dir) => {
         if (dir) {
@@ -295,7 +330,10 @@ function loadFile(
             if (!current.files) {
                 current.files = {};
             }
-            current.files[last] = file;
+            current.files[last] = {
+                content: file.content,
+                language: lang,
+            };
         }
     });
 }
@@ -320,3 +358,36 @@ function jsonReplacer(key: any, value: any): any {
         return value;
     }
 }
+
+function deleteFile(monaco: Monaco, updater: Updater<Directory>, name: string) {
+    const uri = monaco.Uri.parse(name);
+    const model = monaco.editor.getModel(uri);
+    if (model) {
+        model.dispose();
+    }
+    updater((dir) => {
+        let current = dir;
+        const parts = name.split("/").filter((s) => s !== "");
+        const last = parts.pop()!;
+        for (const part of parts) {
+            if (!current.dirs) {
+                current.dirs = {};
+            }
+            if (!current.dirs[part]) {
+                current.dirs[part] = {};
+            }
+            current = current.dirs[part];
+        }
+        if (current.files) {
+            delete current.files[last];
+        }
+    });
+}
+
+function renameFile(monaco: Monaco, updater: Updater<Directory>, oldName: string, newName: string) {
+    const file = getFile(getFiles(monaco), oldName);
+    if (file) {
+        deleteFile(monaco, updater, oldName);
+        loadFile(monaco, updater, file, newName);
+    }
+}

src/components/playground/FileView/DirElement.tsx

@@ -4,86 +4,31 @@ import {
     GoChevronDown as ChevDown,
     GoChevronRight as ChevRight,
 } from "react-icons/go";
+import FileElement from "./FileElement";
 
-export default function FileView({
+export default function DirElement({
-    lang,
-    root,
-    fileName,
-    setSelectedFileName,
-    className,
-}: {
-    lang: PlaygroundExplorerLang;
-    root: Directory;
-    fileName: string;
-    setSelectedFileName: SetState<string>;
-    className?: string;
-}) {
-    return (
-        <div className={className}>
-            <h3>{lang.title}</h3>
-            <div className="entries">
-                {Object.entries(root.dirs ?? {}).map(([name, dir]) => {
-                    return (
-                        <DirElement
-                            key={name}
-                            name={name}
-                            dir={dir}
-                            fileName={fileName.slice(name.length + 1)}
-                            setSelectedFileName={setSelectedFileName}
-                        />
-                    );
-                })}
-                {Object.entries(root.files ?? {}).map(([name, _]) => {
-                    return (
-                        <span key={name}>
-                            <FileElement
-                                name={name}
-                                disabled={fileName == name}
-                                onClick={() => setSelectedFileName(name)}
-                            />
-                        </span>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}
-
-function FileElement({
-    name,
-    disabled,
-    onClick,
-}: {
-    name: string;
-    disabled: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}) {
-    return (
-        <button disabled={disabled} onClick={onClick} className="file">
-            {name}
-        </button>
-    );
-}
-
-function DirElement({
     name,
+    fullPath,
     dir: currentDir,
     collapsed: pCollapsed,
-    fileName,
+    selectedFileName,
+    lang,
     setSelectedFileName,
+    deleteFile,
+    renameFile,
 }: {
     name: string;
+    fullPath: string;
     dir: Directory;
     collapsed?: boolean;
-    fileName: string;
+    selectedFileName: string;
+    lang: PlaygroundExplorerLang;
     setSelectedFileName: SetState<string>;
+    deleteFile: (name: string) => void;
+    renameFile: (oldName: string, newName: string) => void;
 }) {
     const [collapsed, setCollapsed] = useState(pCollapsed ?? false);
 
-    const modSetSelectedFileName: SetState<string> = (selected) => {
-        setSelectedFileName(name + "/" + selected);
-    };
-
     const chevStyles: React.CSSProperties = {
         marginBottom: "-2px",
     };
@@ -117,27 +62,36 @@ function DirElement({
                                     <DirElement
                                         key={dirname}
                                         name={dirname}
+                                        fullPath={fullPath + "/" + dirname}
                                         dir={dir}
-                                        fileName={fileName.slice(
+                                        selectedFileName={selectedFileName}
-                                            dirname.length + 1
+                                        lang={lang}
-                                        )}
                                         setSelectedFileName={
-                                            modSetSelectedFileName
+                                            setSelectedFileName
                                         }
+                                        deleteFile={deleteFile}
+                                        renameFile={renameFile}
                                     />
                                 );
                             }
                         )}
                         {Object.entries(currentDir.files ?? {}).map(
                             ([currentName, _]) => {
+                                const currentPath = fullPath + "/" + currentName;
                                 return (
                                     <FileElement
                                         key={currentName}
+                                        fullPath={currentPath}
                                         name={currentName}
-                                        disabled={fileName == currentName}
+                                        isSelected={selectedFileName == currentPath}
+                                        lang={lang}
                                         onClick={() =>
-                                            modSetSelectedFileName(currentName)
+                                            setSelectedFileName(currentPath)
                                         }
+                                        onDelete={() =>
+                                            deleteFile(currentPath)
+                                        }
+                                        renameFile={renameFile}
                                     />
                                 );
                             }

src/components/playground/FileView/FileElement.tsx

@@ -0,0 +1,113 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Menu, MenuItem, TextField } from "@mui/material";
+import type { PlaygroundExplorerLang } from "@utils/playground";
+import React from "react";
+import { useState } from "react";
+
+export default function FileElement({
+    name,
+    fullPath,
+    isSelected,
+    lang,
+    onClick,
+    renameFile,
+    onDelete,
+}: {
+    name: string;
+    fullPath: string;
+    isSelected: boolean;
+    lang: PlaygroundExplorerLang;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    renameFile?: (oldName: string, newName: string) => void;
+    onDelete?: React.MouseEventHandler<HTMLLIElement>;
+}) {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const contextOpen = Boolean(anchorEl);
+    const handleContext = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleContextClose = () => {
+        setAnchorEl(null);
+    };
+    const [renameOpen, setRenameOpen] = React.useState(false);
+
+    const handleRenameClose = () => {
+        setRenameOpen(false);
+    };
+
+    return (
+        <div className="file">
+            <button
+                onClick={onClick}
+                onContextMenu={handleContext}
+                className={"file" + (isSelected ? " selected" : "")}
+            >
+                {name}
+            </button>
+            <Menu
+                anchorEl={anchorEl}
+                open={contextOpen}
+                onClose={handleContextClose}
+            >
+                <MenuItem
+                    onClick={(ev) => {
+                        handleContextClose();
+                        setRenameOpen(true);
+                    }}
+                >
+                    {lang.menu.rename}
+                </MenuItem>
+                <MenuItem
+                    onClick={(ev) => {
+                        handleContextClose();
+                        onDelete?.(ev);
+                    }}
+                >
+                    {lang.menu.delete}
+                </MenuItem>
+            </Menu>
+            <Dialog
+                open={renameOpen}
+                onClose={handleRenameClose}
+                PaperProps={{
+                    component: "form",
+                    onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
+                        event.preventDefault();
+                        const formData = new FormData(event.currentTarget);
+                        const formJson = Object.fromEntries(
+                            (formData as any).entries()
+                        );
+                        const filepath = formJson.filepath;
+                        if (renameFile) {
+                            renameFile(fullPath, filepath);
+                        }
+                        handleRenameClose();
+                    },
+                }}
+            >
+                <DialogTitle>{lang.menu.rename} - {fullPath}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        {lang.menu.renamePrompt.message}
+                    </DialogContentText>
+                    <TextField
+                        autoFocus
+                        required
+                        margin="dense"
+                        id="filepath"
+                        name="filepath"
+                        label={lang.menu.renamePrompt.label}
+                        type="text"
+                        fullWidth
+                        variant="filled"
+                        defaultValue={fullPath}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleRenameClose}>{lang.menu.cancel}</Button>
+                    <Button type="submit">{lang.menu.rename}</Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

src/components/playground/FileView/index.tsx

@@ -0,0 +1,71 @@
+import type {
+    Directory,
+    PlaygroundExplorerLang,
+    SetState,
+} from "@utils/playground";
+import DirElement from "./DirElement";
+import FileElement from "./FileElement";
+
+export default function FileView({
+    lang,
+    root,
+    selectedFileName,
+    setSelectedFileName,
+    deleteFile,
+    renameFile,
+    className,
+}: {
+    lang: PlaygroundExplorerLang;
+    root: Directory;
+    selectedFileName: string;
+    setSelectedFileName: SetState<string>;
+    deleteFile: (name: string) => void;
+    renameFile: (oldName: string, newName: string) => void;
+    className?: string;
+}) {
+    return (
+        <div className={className}>
+            <h3>{lang.title}</h3>
+            <div className="entries">
+                {Object.entries(root.dirs ?? {}).map(([name, dir]) => {
+                    return (
+                        <DirElement
+                            key={name}
+                            name={name}
+                            fullPath={name}
+                            dir={dir}
+                            selectedFileName={selectedFileName}
+                            lang={lang}
+                            setSelectedFileName={setSelectedFileName}
+                            deleteFile={deleteFile}
+                            renameFile={renameFile}
+                        />
+                    );
+                })}
+                {Object.entries(root.files ?? {}).map(([name, _]) => {
+                    const isSelected = selectedFileName == name;
+                    return (
+                        <span key={name}>
+                            <FileElement
+                                name={name}
+                                fullPath={name}
+                                isSelected={isSelected}
+                                lang={lang}
+                                onClick={
+                                    isSelected
+                                        ? () => {}
+                                        : () => setSelectedFileName(name)
+                                }
+                                onDelete={() => deleteFile(name)}
+                                renameFile={renameFile}
+                            />
+                        </span>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+
+

src/pages/de/playground.astro

@@ -15,6 +15,15 @@ const lang: PlaygroundLang = {
     },
     explorer: {
         title: "Dateien",
+        menu: {
+            delete: "Löschen",
+            rename: "Umbenennen",
+            renamePrompt: {
+                label: "Neuer Dateipfad",
+                message: "Pfad eingeben, zu dem die Datei umbenannt/verschoben werden soll."
+            },
+			cancel: "Abbrechen",
+        }
     },
 };
 ---

src/pages/playground.astro

@@ -15,6 +15,15 @@ const lang: PlaygroundLang = {
     },
     explorer: {
         title: "Explorer",
+        menu: {
+            delete: "Delete",
+            rename: "Rename",
+            renamePrompt: {
+                label: "New file path",
+                message: "Enter the path you want the file to be renamed/moved to."
+            },
+            cancel: "Cancel",
+        }
     },
 };
 ---

src/styles/playground.scss

@@ -25,13 +25,12 @@
                 cursor: pointer;
 
                 &:hover {
-                    background-color: #444444;
+                    background-color: var(--sl-color-gray-5);
                 }
 
-                &:disabled {
+                &.selected {
-                    cursor: default;
                     color: var(--sl-color-text);
-                    background-color: #333;
+                    background-color: var(--sl-color-gray-6);
                 }
             }
         }
@@ -40,15 +39,3 @@
         grid-area: editor;
     }
 }
-
-:root[data-theme='light'] {
-    .playground > .file-view .entries button {
-        &:hover {
-            background-color: var(--sl-color-gray-5);
-        }
-
-        &:disabled {
-            background-color: var(--sl-color-gray-6);
-        }
-    }
-}

src/utils/playground.ts

@@ -14,6 +14,15 @@ export type PlaygroundHeaderLang = {
 };
 export type PlaygroundExplorerLang = {
     title: string;
+    menu: {
+        rename: string;
+        renamePrompt: {
+            message: string;
+            label: string;
+        }
+        delete: string;
+        cancel: string;
+    }
 };
 
 export type File = {

src/wasm/webcompiler/Cargo.toml

@@ -10,7 +10,7 @@ crate-type = ["cdylib"]
 
 [dependencies]
 wasm-bindgen = "0.2.92"
-shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox"], rev = "af544ac79eea4498ef4563acfb7e8dd14ec5c84e" }
+shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox", "lua"], rev = "af544ac79eea4498ef4563acfb7e8dd14ec5c84e" }
 serde = "1.0"
 serde-wasm-bindgen = "0.6.5"
 anyhow = "1.0.86"