@dao42/d42paas-front 0.7.33 → 0.7.34

package/dist/DaoPaaS.es.js

@@ -15083,16 +15083,14 @@ create$5((set2) => ({
 }));
 const shadowUserStore = create$5(persist((set2) => ({
   shadowUser: {},
-  switchShadowUser: (arg) => set2(() => {
-    if (arg.uuid || arg.userId) {
-      console.log(`\u5DF2\u5207\u6362\u81F3\u3010${arg.username}\u3011\u89C6\u89D2`);
+  switchShadowUser: (id2) => set2(() => {
+    let user;
+    if (id2 !== void 0) {
+      user = userListStore.getState().userList.find((user2) => user2.userId === id2);
+      console.log(`\u5DF2\u5207\u6362\u81F3\u3010${user.username}\u3011\u89C6\u89D2`);
     } else {
       console.log(`\u5DF2\u9000\u51FA\u8DDF\u968F\u89C6\u89D2`);
     }
-    const user = userListStore.getState().userList.find((x2) => {
-      var _a2;
-      return x2.userId === ((_a2 = arg.userId) == null ? void 0 : _a2.toString());
-    });
     return {
       shadowUser: user ? user : {}
     };
@@ -28620,6 +28618,21 @@ const PlaygroundInit = (arg) => {
         callback && callback();
       }
     });
+    io.on("dockerInfo", (data) => {
+      var _a2;
+      const {
+        dockerInfo: dockerInfo2
+      } = JSON.parse(data);
+      const otPlaygroundInfo = oTStore.getState().playgroundInfo;
+      if (dockerInfo2) {
+        (_a2 = otPlaygroundInfo == null ? void 0 : otPlaygroundInfo.dockerInfos) == null ? void 0 : _a2.set(dockerInfo2.dockerId, dockerInfo2);
+        setDockerInfo(__spreadValues(__spreadValues({}, oTStore.getState().dockerInfo), dockerInfo2));
+        dockerState.getState().setDockerStatus(dockerInfo2.status);
+        dockerInfo2.fileTree && switchFileTree({
+          data: dockerInfo2.fileTree
+        });
+      }
+    });
     io.on("playgroundStatus", (data) => {
       setPlaygroundStatus(data);
     });
@@ -44711,18 +44724,18 @@ class DaoPaaS {
       callback && callback();
     };
   }
-  followUser(userInfo, callback) {
+  followUser(userId, callback) {
     const {
       switchShadowUser
     } = shadowUserStore.getState();
-    switchShadowUser(userInfo);
-    callback && callback();
+    switchShadowUser(userId);
+    callback && callback(this.userList.find((u2) => u2.userId === userId));
   }
   unFollowUser(userInfo, callback) {
     const {
       switchShadowUser
     } = shadowUserStore.getState();
-    switchShadowUser({});
+    switchShadowUser();
     callback && callback();
   }
   replay(arg) {
@@ -46111,7 +46124,7 @@ var TreeItemRenamingInput = function(props2) {
       environment.setActiveTree(treeId);
     });
   };
-  var confirm = function() {
+  var confirm2 = function() {
     var _a3;
     (_a3 = environment.onRenameItem) === null || _a3 === void 0 ? void 0 : _a3.call(environment, item, title, treeInformation.treeId);
     setRenamingItem(null);
@@ -46146,13 +46159,13 @@ var TreeItemRenamingInput = function(props2) {
   var submitButtonProps = {
     onClick: function(e2) {
       e2.stopPropagation();
-      confirm();
+      confirm2();
     }
   };
   var formProps = {
     onSubmit: function(e2) {
       e2.preventDefault();
-      confirm();
+      confirm2();
     }
   };
   return renderers.renderRenameInput({
@@ -48271,6 +48284,9 @@ Transition.Child = function Child(props2) {
   return !hasTransitionContext && hasOpenClosedContext ? /* @__PURE__ */ jsx(Transition, __spreadValues({}, Object.assign({}, props2))) : /* @__PURE__ */ jsx(TransitionChild, __spreadValues({}, Object.assign({}, props2)));
 };
 Transition.Root = Transition;
+const checkIfTheFileHasDeleted = (fileTree, value) => {
+  return !JSON.stringify(fileTree).includes(value);
+};
 const IoClient = function(revision) {
   this.revision = revision;
   this.state = synchronized_;
@@ -48404,25 +48420,25 @@ const FollowLayout = ({
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     onKeyDown: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     onScroll: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     onWheel: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     children: [oTStore.getState().appStatus === "replay" && FROZEN_CONTROL_COMPONENTS.some((d2) => d2 === name) ? /* @__PURE__ */ jsx(Freezer, {}) : null, children]
   });
@@ -48444,583 +48460,6 @@ const Freezer = ({
 }) => /* @__PURE__ */ jsx(FreezerLayout, {
   children
 });
-function addChildrenArray(children, parent2) {
-  var _a2, _b2;
-  for (let i = 0; i < children.length; i++) {
-    if (children[i].type === "DIRECTORY") {
-      (_a2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _a2.push(`${parent2.index}${children[i].name}/`);
-    } else {
-      (_b2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _b2.push(`${parent2.index}${children[i].name}`);
-    }
-  }
-}
-function formatFileToTree(data) {
-  if (!data)
-    return;
-  const formatData = {};
-  const root2 = data.name;
-  formatData[root2] = {
-    index: root2,
-    children: [],
-    hasChildren: true,
-    data: root2
-  };
-  addChildrenArray(data.children, formatData[root2]);
-  let nodeChildren = [...data.children];
-  let pathChildren = [...formatData[root2].children];
-  while (nodeChildren.length) {
-    const size2 = nodeChildren.length;
-    for (let i = 0; i < size2; i++) {
-      const child = nodeChildren.shift();
-      const path2 = pathChildren.shift();
-      nodeChildren = nodeChildren.concat(child.children);
-      switch (child.type) {
-        case "DIRECTORY":
-          const dirPath = path2;
-          formatData[dirPath] = {
-            index: dirPath,
-            hasChildren: true,
-            children: [],
-            data: child.name
-          };
-          addChildrenArray(child.children, formatData[dirPath]);
-          pathChildren = pathChildren.concat(formatData[dirPath].children);
-          break;
-        case "FILE":
-          const filePath = path2;
-          formatData[filePath] = {
-            index: filePath,
-            hasChildren: false,
-            data: child.name
-          };
-          break;
-      }
-    }
-  }
-  return formatData;
-}
-const getStringFromFile = async (file) => {
-  const base64String = await new Promise((resolve2) => {
-    const reader2 = new FileReader();
-    reader2.readAsDataURL(file);
-    reader2.onload = (e2) => {
-      resolve2(e2.target.result);
-    };
-  });
-  return base64String;
-};
-const FileTree = ({
-  onCustomSelect
-}) => {
-  const addedFolder = {
-    target: "",
-    files: []
-  };
-  const io = useOT.getState().socket;
-  const [focusedItem, setFocusedItem] = react.exports.useState();
-  const [expandedItems, setExpandedItems] = react.exports.useState([]);
-  const [selectedItems, setSelectedItems] = react.exports.useState([]);
-  const [remoteUserList, setRemoteUserList] = react.exports.useState({});
-  const [renameItem, setRenameItem] = react.exports.useState("");
-  const [renameValue, setRenameValue] = react.exports.useState("");
-  const treeRef = react.exports.useRef(null);
-  const {
-    CRDTInfo: CRDTInfo2,
-    dockerInfo: dockerInfo2
-  } = oTStore((state2) => state2);
-  const {
-    fileTree
-  } = fileTreeStore((state2) => state2);
-  const [treeData, setTreeData] = react.exports.useState({});
-  react.exports.useEffect(() => {
-    if (oTStore.getState().appStatus === "replay") {
-      setSelectedItems([]);
-      setExpandedItems([]);
-    }
-    if (!fileTree.data)
-      return;
-    const newData = formatFileToTree(fileTree == null ? void 0 : fileTree.data);
-    setSelectedItems(selectedItems.filter((item) => newData[item]));
-    setExpandedItems(expandedItems.filter((item) => newData[item]));
-    setTreeData(newData);
-  }, [fileTree]);
-  react.exports.useEffect(() => {
-    setSelectedItems([]);
-    setExpandedItems([]);
-  }, [dockerInfo2]);
-  const onSelect = (items) => {
-    if (items.length === 1) {
-      setSelectedItems(items);
-      if (oTStore.getState().appStatus === "code") {
-        const crdt = {
-          timestamp: Date.now(),
-          userInfo: userStore.getState().userInfo,
-          editor: {
-            extraInfo: {
-              messageId: "1",
-              playgroundId: oTStore.getState().playgroundInfo.playgroundId
-            },
-            evtType: "File"
-          },
-          file: {
-            action: "Get",
-            path: items[0]
-          }
-        };
-        io == null ? void 0 : io.emit("fileContent", JSON.stringify(crdt));
-      }
-    }
-  };
-  const onExpand = (item) => {
-    setExpandedItems([...expandedItems, item]);
-  };
-  const onCollapse = (item) => {
-    setExpandedItems(expandedItems.filter((expandedItemIndex) => expandedItemIndex !== item));
-  };
-  const onUploadFile = (payload) => {
-    io == null ? void 0 : io.emit("upload", payload);
-    addedFolder.target = "";
-    addedFolder.files = [];
-  };
-  const formatUploadFileTarget = (path2) => {
-    if (path2[path2.length - 1] !== "/") {
-      addedFolder.target = `${path2.split("/").slice(0, -1).join("/")}/`;
-    } else {
-      addedFolder.target = path2;
-    }
-  };
-  const traverseFileTree = async (item, path2 = "/") => {
-    const data = await new Promise((resolve2) => {
-      if (item.isFile) {
-        item.file(async (file) => {
-          resolve2([{
-            path: `${path2}${file.name}`,
-            content: await getStringFromFile(file)
-          }]);
-        });
-      } else if (item.isDirectory) {
-        let result = [{
-          path: `${path2}${item.name}/`,
-          content: ""
-        }];
-        const dirReader = item.createReader();
-        dirReader.readEntries(async (entries) => {
-          for (let i = 0; i < entries.length; i++) {
-            result = result.concat(await traverseFileTree(entries[i], `${path2}${item.name}/`));
-          }
-          resolve2(result);
-        });
-      }
-    });
-    return data;
-  };
-  const onOriginDrop = async (event) => {
-    var _a2;
-    event.preventDefault();
-    let buttonElement = event.target;
-    while (buttonElement && ((_a2 = buttonElement.tagName) == null ? void 0 : _a2.toLowerCase()) !== "button") {
-      buttonElement = buttonElement.lastChild;
-    }
-    const node2 = buttonElement ? buttonElement.dataset["rctItemId"] : "/";
-    formatUploadFileTarget(node2);
-    const items = event.dataTransfer.items;
-    if (items.length === 0)
-      return;
-    const itemsIterate = [];
-    for (const i of items) {
-      itemsIterate.push(i.webkitGetAsEntry());
-    }
-    for (const item of itemsIterate) {
-      if (item) {
-        addedFolder.files = addedFolder.files.concat(await traverseFileTree(item));
-      }
-    }
-    buttonElement == null ? void 0 : buttonElement.parentNode.classList.remove("rct-tree-item-title-container-selected");
-    buttonElement == null ? void 0 : buttonElement.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
-    onUploadFile(JSON.stringify(addedFolder));
-  };
-  react.exports.useEffect(() => {
-    if (treeRef.current) {
-      treeRef.current.removeEventListener("drop", onOriginDrop);
-      treeRef.current.addEventListener("drop", onOriginDrop, false);
-      treeRef.current.addEventListener("dragover", (e2) => {
-        if (e2.dataTransfer.items.length === 0)
-          return;
-        e2.preventDefault();
-        e2.stopPropagation();
-      }, false);
-      treeRef.current.addEventListener("dragenter", (e2) => {
-        var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
-        if (((_a2 = e2 == null ? void 0 : e2.dataTransfer) == null ? void 0 : _a2.items.length) === 0)
-          return;
-        e2.preventDefault();
-        e2.stopPropagation();
-        if (((_c2 = (_b2 = e2 == null ? void 0 : e2.target) == null ? void 0 : _b2.tagName) == null ? void 0 : _c2.toLowerCase()) === "button") {
-          (_e2 = (_d2 = e2.target) == null ? void 0 : _d2.parentNode) == null ? void 0 : _e2.classList.add("rct-tree-item-title-container-selected");
-          (_g2 = (_f2 = e2.target) == null ? void 0 : _f2.parentNode) == null ? void 0 : _g2.parentNode.classList.add("rct-tree-item-li-selected");
-        }
-      }, false);
-      treeRef.current.addEventListener("dragleave", (e2) => {
-        if (e2.dataTransfer.items.length === 0)
-          return;
-        e2.preventDefault();
-        e2.stopPropagation();
-        if (e2.target.tagName.toLowerCase() === "button") {
-          e2.target.parentNode.classList.remove("rct-tree-item-title-container-selected");
-          e2.target.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
-        }
-      }, false);
-    }
-  }, [treeRef]);
-  react.exports.useEffect(() => {
-    var _a2, _b2;
-    const user = userListStore.getState().userList.find((item) => item.uuid === CRDTInfo2.userInfo.uuid);
-    if (((_a2 = CRDTInfo2 == null ? void 0 : CRDTInfo2.editor) == null ? void 0 : _a2.evtType) === "File" && user) {
-      const path2 = (_b2 = CRDTInfo2 == null ? void 0 : CRDTInfo2.file) == null ? void 0 : _b2.path;
-      if (!IsMe(CRDTInfo2.userInfo)) {
-        setRemoteUserList((oldUserListItem) => {
-          const userListItem = __spreadValues({}, oldUserListItem);
-          const remoteUserListObj = Object.entries(userListItem);
-          for (const iteratorItem of remoteUserListObj) {
-            const [key, value] = iteratorItem;
-            const index2 = value.findIndex((item) => item.uuid === user.uuid);
-            if (index2 > -1) {
-              userListItem[key].splice(index2, 1);
-              if (userListItem[key].length === 0) {
-                delete userListItem[key];
-              }
-              break;
-            }
-          }
-          if (userListItem[path2]) {
-            userListItem[path2].push({
-              uuid: user.uuid,
-              color: user.color,
-              avatar: user.avatar
-            });
-          } else {
-            userListItem[path2] = [{
-              uuid: user.uuid,
-              color: user.color,
-              avatar: user.avatar
-            }];
-          }
-          return userListItem;
-        });
-        if (path2[path2.length - 1] === "/") {
-          const index2 = expandedItems.indexOf(path2);
-          if (index2 === -1) {
-            onExpand(path2);
-          } else {
-            onCollapse(path2);
-          }
-        }
-      } else if (oTStore.getState().appStatus === "replay" && !ignoreReplayerStore.getState().ignoreReplayers.some((d2) => d2 === "file")) {
-        onSelect([path2]);
-        if (path2[path2.length - 1] === "/") {
-          const index2 = expandedItems.indexOf(path2);
-          if (index2 === -1) {
-            onExpand(path2);
-          } else {
-            onCollapse(path2);
-          }
-        }
-      }
-    }
-  }, [CRDTInfo2]);
-  const handleAddFile = (path2) => {
-    onExpand(path2);
-    if (path2[path2.length - 1] !== "/") {
-      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
-    }
-    setTreeData((treeData2) => {
-      var _a2;
-      const newFilePath = `${path2}${v4$1().substring(0, 6)}`;
-      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFilePath);
-      treeData2[newFilePath] = {
-        index: newFilePath,
-        hasChildren: false,
-        data: "Untitled"
-      };
-      setRenameItem(newFilePath);
-      setRenameValue("");
-      return treeData2;
-    });
-  };
-  const handleAddFolder = (path2) => {
-    onExpand(path2);
-    if (path2[path2.length - 1] !== "/") {
-      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
-    }
-    setTreeData((treeData2) => {
-      var _a2;
-      const newFolderPath = `${path2}${v4$1().substring(0, 6)}/`;
-      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFolderPath);
-      treeData2[newFolderPath] = {
-        index: newFolderPath,
-        hasChildren: true,
-        children: [],
-        data: "Untitled"
-      };
-      setRenameItem(newFolderPath);
-      setRenameValue("");
-      return treeData2;
-    });
-  };
-  const handleStopRenaming = (path2) => {
-    if (renameValue === "") {
-      setTreeData((treeData2) => {
-        delete treeData2[path2];
-        return treeData2;
-      });
-    }
-    setRenameItem("");
-  };
-  const handleSave = (treeNode, name = "") => {
-    const payload = {
-      action: "",
-      path: "",
-      newPath: ""
-    };
-    const newPath = treeNode.index.split("/");
-    if (treeNode.hasChildren) {
-      newPath.splice(-2, 1, name);
-    } else {
-      newPath.splice(-1, 1, name);
-    }
-    if (treeNode.data === "Untitled") {
-      payload.action = "CREATE";
-      payload.path = newPath.join("/");
-    } else {
-      payload.action = "RENAME";
-      payload.path = treeNode.index;
-      payload.newPath = newPath.join("/");
-    }
-    io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
-  };
-  const handleUpload = (path2, uploadType) => {
-    formatUploadFileTarget(path2);
-    document.getElementById(`manual-upload-${uploadType}`).click();
-  };
-  const handleManualUploadFile = async (files) => {
-    for (const item of files) {
-      addedFolder.files = addedFolder.files.concat([{
-        path: `/${item.name}`,
-        content: await getStringFromFile(item)
-      }]);
-    }
-    onUploadFile(JSON.stringify(addedFolder));
-  };
-  const handleManualUploadFolder = async (files) => {
-    for (const item of files) {
-      addedFolder.files = addedFolder.files.concat([{
-        path: `/${item.webkitRelativePath}`,
-        content: await getStringFromFile(item)
-      }]);
-    }
-    onUploadFile(JSON.stringify(addedFolder));
-  };
-  const handleDeleteFileFolder = (path2) => {
-    io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify({
-      action: "DELETE",
-      path: path2
-    }));
-  };
-  return /* @__PURE__ */ jsx(FollowLayout, {
-    name: "file",
-    children: /* @__PURE__ */ jsxs("div", {
-      ref: treeRef,
-      style: {
-        height: "100%",
-        overflow: "auto"
-      },
-      children: [/* @__PURE__ */ jsx("input", {
-        id: "manual-upload-file",
-        type: "file",
-        multiple: true,
-        hidden: true,
-        onChange: (event) => {
-          handleManualUploadFile(event.target.files);
-        }
-      }), /* @__PURE__ */ jsx("input", {
-        id: "manual-upload-folder",
-        type: "file",
-        multiple: true,
-        hidden: true,
-        webkitdirectory: "",
-        mozdirectory: "",
-        directory: "",
-        onChange: (event) => {
-          handleManualUploadFolder(event.target.files);
-        }
-      }), /* @__PURE__ */ jsx(ControlledTreeEnvironment, {
-        canDragAndDrop: true,
-        canSearch: false,
-        items: treeData,
-        onFocusItem: (item) => setFocusedItem(item.index),
-        onExpandItem: (item) => {
-          onExpand(item.index);
-        },
-        onCollapseItem: (item) => {
-          onCollapse(item.index);
-        },
-        getItemTitle: (item) => item.data,
-        viewState: {
-          ["tree-1"]: {
-            focusedItem,
-            expandedItems,
-            selectedItems
-          }
-        },
-        onSelectItems: (items) => {
-          onSelect(items);
-          onCustomSelect == null ? void 0 : onCustomSelect(items);
-        },
-        renderItem: ({
-          title,
-          arrow,
-          depth,
-          context,
-          children
-        }) => {
-          return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
-            className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
-            children: [/* @__PURE__ */ jsxs("div", {
-              className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
-              style: {
-                paddingLeft: `${depth}0px`
-              },
-              children: [remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
-                className: "rct-tree-item-avatar rounded-full absolute border",
-                style: {
-                  borderColor: remoteUser.color,
-                  backgroundImage: `url(${remoteUser.avatar})`
-                }
-              }, remoteUser.uuid)), /* @__PURE__ */ jsxs("div", {
-                className: "rct-tree-item-toolbar absolute right-0",
-                children: [/* @__PURE__ */ jsx("button", {
-                  onClick: () => {
-                    handleAddFile(context.interactiveElementProps["data-rct-item-id"]);
-                  },
-                  children: /* @__PURE__ */ jsx("i", {
-                    className: "d42 add-file"
-                  })
-                }), /* @__PURE__ */ jsx("button", {
-                  onClick: () => {
-                    handleAddFolder(context.interactiveElementProps["data-rct-item-id"]);
-                  },
-                  children: /* @__PURE__ */ jsx("i", {
-                    className: "d42 add-folder"
-                  })
-                }), /* @__PURE__ */ jsx(Menu$2, {
-                  as: "div",
-                  className: "relative",
-                  children: ({
-                    open: open2
-                  }) => /* @__PURE__ */ jsxs(Fragment, {
-                    children: [/* @__PURE__ */ jsx(Menu$2.Button, {
-                      children: /* @__PURE__ */ jsx("i", {
-                        className: "d42 more"
-                      })
-                    }), /* @__PURE__ */ jsx(Transition, {
-                      show: open2,
-                      as: react.exports.Fragment,
-                      enter: "transition ease-out duration-100",
-                      enterFrom: "transform opacity-0 scale-95",
-                      enterTo: "transform opacity-100 scale-100",
-                      leave: "transition ease-in duration-75",
-                      leaveFrom: "transform opacity-100 scale-100",
-                      leaveTo: "transform opacity-0 scale-95",
-                      children: /* @__PURE__ */ jsxs(Menu$2.Items, {
-                        static: true,
-                        className: "absolute z-1 w-20 right-0 top-full",
-                        children: [/* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center my-2",
-                              onClick: () => {
-                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "file");
-                              },
-                              children: "\u4E0A\u4F20\u6587\u4EF6"
-                            })
-                          })
-                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center my-2",
-                              onClick: () => {
-                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "folder");
-                              },
-                              children: "\u4E0A\u4F20\u6587\u4EF6\u5939"
-                            })
-                          })
-                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center my-2",
-                              onClick: () => {
-                                setRenameValue(title.props.children);
-                                setRenameItem(context.interactiveElementProps["data-rct-item-id"]);
-                              },
-                              children: "\u91CD\u547D\u540D"
-                            })
-                          })
-                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center text-red-800 my-2",
-                              onClick: () => handleDeleteFileFolder(context.interactiveElementProps["data-rct-item-id"]),
-                              children: "\u5220\u9664"
-                            })
-                          })
-                        })]
-                      })
-                    })]
-                  })
-                })]
-              }), arrow, renameItem === context.interactiveElementProps["data-rct-item-id"] ? /* @__PURE__ */ jsx("input", {
-                className: "text-black focus:outline-none active:outline-none",
-                type: "text",
-                autoFocus: true,
-                value: renameValue,
-                onInput: (event) => setRenameValue(event.target.value),
-                onKeyDown: (event) => {
-                  switch (event.key) {
-                    case "Enter":
-                      handleStopRenaming(renameItem);
-                      handleSave(treeData[renameItem], renameValue);
-                      break;
-                    case "Escape":
-                      handleStopRenaming(renameItem);
-                      break;
-                  }
-                }
-              }) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
-                className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
-                children: title
-              }))]
-            }), children]
-          }));
-        },
-        children: /* @__PURE__ */ jsx(Tree, {
-          treeId: "tree-1",
-          rootItem: "/",
-          treeLabel: "File Tree"
-        })
-      })]
-    })
-  });
-};
-var index$6 = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  [Symbol.toStringTag]: "Module",
-  getStringFromFile,
-  FileTree
-});
 function _format$1(message, args) {
   let result;
   if (args.length === 0) {
@@ -174461,6 +173900,649 @@ var monaco = /* @__PURE__ */ Object.freeze({
   editor: editor$1,
   languages
 });
+create$5((set2) => ({
+  cursor: {},
+  setCursor: (arg) => set2((state2) => ({ cursor: arg }))
+}));
+const editorStore = create$5((set2) => ({
+  fileTreeStack: [],
+  setFileTreeStack: (arg) => set2(() => ({ fileTreeStack: arg }))
+}));
+class EditorData {
+  localSetFileTreeStack(arg) {
+    editorStore.getState().setFileTreeStack(arg);
+  }
+  static get fileTreeStack() {
+    const fileTreeStack = editorStore.getState().fileTreeStack;
+    return fileTreeStack;
+  }
+  static setFileTreeStack(arg) {
+    return editorStore.getState().setFileTreeStack(arg);
+  }
+  static updateModel({
+    value,
+    path: path2,
+    language: language2,
+    APP_DIR: APP_DIR2
+  }, callback, cover = false) {
+    let gotModel = editor$1.getModels().find((x2) => x2.uri.path.includes(path2));
+    if (!gotModel && !!cover) {
+      gotModel = editor$1.createModel(value, language2, Uri.parse(`file://${APP_DIR2}${path2}`));
+    }
+    const _fileTreeStack = [
+      ...this.fileTreeStack,
+      {
+        label: path2,
+        path: path2,
+        model: gotModel
+      }
+    ];
+    this.setFileTreeStack(lodash$2.exports.uniqBy(_fileTreeStack, "path"));
+    if (cover) {
+      gotModel == null ? void 0 : gotModel.setValue(value);
+    }
+    callback && callback(gotModel);
+  }
+}
+__publicField(EditorData, "EditorData");
+const TreeRootLayout = newStyled.div`
+  height: 100%;
+  overflow: auto;
+`;
+function addChildrenArray(children, parent2) {
+  var _a2, _b2;
+  for (let i = 0; i < children.length; i++) {
+    if (children[i].type === "DIRECTORY") {
+      (_a2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _a2.push(`${parent2.index}${children[i].name}/`);
+    } else {
+      (_b2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _b2.push(`${parent2.index}${children[i].name}`);
+    }
+  }
+}
+function formatFileToTree(data) {
+  if (!data)
+    return;
+  const formatData = {};
+  const root2 = data.name;
+  formatData[root2] = {
+    index: root2,
+    children: [],
+    hasChildren: true,
+    data: root2
+  };
+  addChildrenArray(data.children, formatData[root2]);
+  let nodeChildren = [...data.children];
+  let pathChildren = [...formatData[root2].children];
+  while (nodeChildren.length) {
+    const size2 = nodeChildren.length;
+    for (let i = 0; i < size2; i++) {
+      const child = nodeChildren.shift();
+      const path2 = pathChildren.shift();
+      nodeChildren = nodeChildren.concat(child.children);
+      switch (child.type) {
+        case "DIRECTORY":
+          const dirPath = path2;
+          formatData[dirPath] = {
+            index: dirPath,
+            hasChildren: true,
+            children: [],
+            data: child.name
+          };
+          addChildrenArray(child.children, formatData[dirPath]);
+          pathChildren = pathChildren.concat(formatData[dirPath].children);
+          break;
+        case "FILE":
+          const filePath = path2;
+          formatData[filePath] = {
+            index: filePath,
+            hasChildren: false,
+            data: child.name
+          };
+          break;
+      }
+    }
+  }
+  return formatData;
+}
+const getStringFromFile = async (file) => {
+  const base64String = await new Promise((resolve2) => {
+    const reader2 = new FileReader();
+    reader2.readAsDataURL(file);
+    reader2.onload = (e2) => {
+      resolve2(e2.target.result);
+    };
+  });
+  return base64String;
+};
+const FileTree = ({
+  onCustomSelect,
+  className
+}) => {
+  const addedFolder = {
+    target: "",
+    files: []
+  };
+  useOT.getState().socket;
+  const [focusedItem, setFocusedItem] = react.exports.useState();
+  const [expandedItems, setExpandedItems] = react.exports.useState([]);
+  const [selectedItems, setSelectedItems] = react.exports.useState([]);
+  const [remoteUserList, setRemoteUserList] = react.exports.useState({});
+  const [renameItem, setRenameItem] = react.exports.useState("");
+  const [renameValue, setRenameValue] = react.exports.useState("");
+  const treeRef = react.exports.useRef(null);
+  const {
+    CRDTInfo: CRDTInfo2,
+    dockerInfo: dockerInfo2
+  } = oTStore((state2) => state2);
+  const {
+    fileTree
+  } = fileTreeStore((state2) => state2);
+  const [treeData, setTreeData] = react.exports.useState({});
+  react.exports.useEffect(() => {
+    if (oTStore.getState().appStatus === "replay") {
+      setSelectedItems([]);
+      setExpandedItems([]);
+    }
+    if (!fileTree.data)
+      return;
+    const newData = formatFileToTree(fileTree == null ? void 0 : fileTree.data);
+    setSelectedItems(selectedItems.filter((item) => newData[item]));
+    setExpandedItems(expandedItems.filter((item) => newData[item]));
+    setTreeData(newData);
+  }, [fileTree]);
+  react.exports.useEffect(() => {
+    setSelectedItems([]);
+    setExpandedItems([]);
+  }, [dockerInfo2]);
+  const onSelect = (items) => {
+    var _a2;
+    if (items.length === 1) {
+      setSelectedItems(items);
+      if (oTStore.getState().appStatus === "code") {
+        const crdt = {
+          timestamp: Date.now(),
+          userInfo: userStore.getState().userInfo,
+          editor: {
+            extraInfo: {
+              messageId: "1",
+              playgroundId: oTStore.getState().playgroundInfo.playgroundId
+            },
+            evtType: "File"
+          },
+          file: {
+            action: "Get",
+            path: items[0]
+          }
+        };
+        (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileContent", JSON.stringify(crdt));
+      }
+    }
+  };
+  const onExpand = (item) => {
+    setExpandedItems([...expandedItems, item]);
+  };
+  const onCollapse = (item) => {
+    setExpandedItems(expandedItems.filter((expandedItemIndex) => expandedItemIndex !== item));
+  };
+  const onUploadFile = (payload) => {
+    var _a2;
+    console.log(payload, 213);
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("upload", payload);
+    addedFolder.target = "";
+    addedFolder.files = [];
+    console.log(addedFolder, 217);
+  };
+  const formatUploadFileTarget = (path2) => {
+    if (path2[path2.length - 1] !== "/") {
+      addedFolder.target = `${path2.split("/").slice(0, -1).join("/")}/`;
+    } else {
+      addedFolder.target = path2;
+    }
+  };
+  const traverseFileTree = async (item, path2 = "/") => {
+    const data = await new Promise((resolve2) => {
+      if (item.isFile) {
+        item.file(async (file) => {
+          resolve2([{
+            path: `${path2}${file.name}`,
+            content: await getStringFromFile(file)
+          }]);
+        });
+      } else if (item.isDirectory) {
+        let result = [{
+          path: `${path2}${item.name}/`,
+          content: ""
+        }];
+        const dirReader = item.createReader();
+        dirReader.readEntries(async (entries) => {
+          for (let i = 0; i < entries.length; i++) {
+            result = result.concat(await traverseFileTree(entries[i], `${path2}${item.name}/`));
+          }
+          resolve2(result);
+        });
+      }
+    });
+    return data;
+  };
+  const onOriginDrop = async (event) => {
+    var _a2;
+    event.preventDefault();
+    event.currentTarget.lastElementChild.classList.remove("root-drag-over");
+    let buttonElement = event.target;
+    while (buttonElement && ((_a2 = buttonElement.tagName) == null ? void 0 : _a2.toLowerCase()) !== "button") {
+      buttonElement = buttonElement.lastChild;
+    }
+    const node2 = buttonElement ? buttonElement.dataset["rctItemId"] : "/";
+    formatUploadFileTarget(node2);
+    const items = event.dataTransfer.items;
+    if (items.length === 0)
+      return;
+    const itemsIterate = [];
+    for (const i of items) {
+      itemsIterate.push(i.webkitGetAsEntry());
+    }
+    console.log("drop5", 295);
+    for (const item of itemsIterate) {
+      if (item) {
+        addedFolder.files = addedFolder.files.concat(await traverseFileTree(item));
+      }
+    }
+    buttonElement == null ? void 0 : buttonElement.parentNode.classList.remove("rct-tree-item-title-container-selected");
+    buttonElement == null ? void 0 : buttonElement.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
+    console.log("drop5", 310);
+    onUploadFile(JSON.stringify(addedFolder));
+  };
+  react.exports.useEffect(() => {
+    if (treeRef.current) {
+      treeRef.current.removeEventListener("drop", onOriginDrop);
+      treeRef.current.addEventListener("drop", onOriginDrop, false);
+      treeRef.current.addEventListener("dragover", (e2) => {
+        if (e2.dataTransfer.items.length === 0)
+          return;
+        e2.preventDefault();
+        e2.stopPropagation();
+      }, false);
+      treeRef.current.addEventListener("dragenter", (e2) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+        if (((_a2 = e2 == null ? void 0 : e2.dataTransfer) == null ? void 0 : _a2.items.length) === 0)
+          return;
+        e2.preventDefault();
+        e2.stopPropagation();
+        console.log(e2.currentTarget.lastElementChild);
+        e2.currentTarget.lastElementChild.classList.remove("root-drag-over");
+        if (e2.target.classList.contains("rct-tree-root")) {
+          console.log(e2.target);
+          e2.target.classList.add("root-drag-over");
+        }
+        if (((_c2 = (_b2 = e2 == null ? void 0 : e2.target) == null ? void 0 : _b2.tagName) == null ? void 0 : _c2.toLowerCase()) === "button") {
+          (_e2 = (_d2 = e2.target) == null ? void 0 : _d2.parentNode) == null ? void 0 : _e2.classList.add("rct-tree-item-title-container-selected");
+          (_g2 = (_f2 = e2.target) == null ? void 0 : _f2.parentNode) == null ? void 0 : _g2.parentNode.classList.add("rct-tree-item-li-selected");
+        }
+      }, false);
+      treeRef.current.addEventListener("dragleave", (e2) => {
+        if (e2.dataTransfer.items.length === 0)
+          return;
+        e2.preventDefault();
+        e2.stopPropagation();
+        if (e2.target.tagName.toLowerCase() === "button") {
+          e2.target.parentNode.classList.remove("rct-tree-item-title-container-selected");
+          e2.target.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
+        }
+      }, false);
+    }
+  }, [treeRef]);
+  react.exports.useEffect(() => {
+    var _a2;
+    const user = userListStore.getState().userList.find((item) => item.uuid === CRDTInfo2.userInfo.uuid);
+    if (((_a2 = CRDTInfo2 == null ? void 0 : CRDTInfo2.editor) == null ? void 0 : _a2.evtType) === "File" && user) {
+      const path2 = CRDTInfo2.file.path;
+      if (!IsMe(CRDTInfo2.userInfo)) {
+        setRemoteUserList((oldUserListItem) => {
+          const userListItem = __spreadValues({}, oldUserListItem);
+          const remoteUserListObj = Object.entries(userListItem);
+          for (const iteratorItem of remoteUserListObj) {
+            const [key, value] = iteratorItem;
+            const index2 = value.findIndex((item) => item.uuid === user.uuid);
+            if (index2 > -1) {
+              userListItem[key].splice(index2, 1);
+              if (userListItem[key].length === 0) {
+                delete userListItem[key];
+              }
+              break;
+            }
+          }
+          if (userListItem[path2]) {
+            userListItem[path2].push({
+              uuid: user.uuid,
+              color: user.color,
+              avatar: user.avatar
+            });
+          } else {
+            userListItem[path2] = [{
+              uuid: user.uuid,
+              color: user.color,
+              avatar: user.avatar
+            }];
+          }
+          return userListItem;
+        });
+        if (path2[path2.length - 1] === "/") {
+          const index2 = expandedItems.indexOf(path2);
+          if (index2 === -1) {
+            onExpand(path2);
+          } else {
+            onCollapse(path2);
+          }
+        }
+      } else if (oTStore.getState().appStatus === "replay" && !ignoreReplayerStore.getState().ignoreReplayers.some((d2) => d2 === "file")) {
+        onSelect([path2]);
+        if (path2[path2.length - 1] === "/") {
+          const index2 = expandedItems.indexOf(path2);
+          if (index2 === -1) {
+            onExpand(path2);
+          } else {
+            onCollapse(path2);
+          }
+        }
+      }
+    }
+  }, [CRDTInfo2]);
+  const handleAddFile = (path2) => {
+    onExpand(path2);
+    if (path2[path2.length - 1] !== "/") {
+      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
+    }
+    setTreeData((treeData2) => {
+      var _a2;
+      const newFilePath = `${path2}${v4$1().substring(0, 6)}`;
+      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFilePath);
+      treeData2[newFilePath] = {
+        index: newFilePath,
+        hasChildren: false,
+        data: "Untitled"
+      };
+      setRenameItem(newFilePath);
+      setRenameValue("");
+      return treeData2;
+    });
+  };
+  const handleAddFolder = (path2) => {
+    onExpand(path2);
+    if (path2[path2.length - 1] !== "/") {
+      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
+    }
+    setTreeData((treeData2) => {
+      var _a2;
+      const newFolderPath = `${path2}${v4$1().substring(0, 6)}/`;
+      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFolderPath);
+      treeData2[newFolderPath] = {
+        index: newFolderPath,
+        hasChildren: true,
+        children: [],
+        data: "Untitled"
+      };
+      setRenameItem(newFolderPath);
+      setRenameValue("");
+      return treeData2;
+    });
+  };
+  const handleStopRenaming = (path2) => {
+    if (renameValue === "") {
+      setTreeData((treeData2) => {
+        delete treeData2[path2];
+        return treeData2;
+      });
+    }
+    setRenameItem("");
+  };
+  const handleSave = (treeNode, name = "") => {
+    var _a2;
+    const payload = {
+      action: "",
+      path: "",
+      newPath: "",
+      userInfo: userStore.getState().userInfo
+    };
+    const newPath = treeNode.index.split("/");
+    if (treeNode.hasChildren) {
+      newPath.splice(-2, 1, name);
+    } else {
+      newPath.splice(-1, 1, name);
+    }
+    if (treeNode.data === "Untitled") {
+      payload.action = "CREATE";
+      payload.path = newPath.join("/");
+    } else {
+      payload.action = "RENAME";
+      payload.path = treeNode.index;
+      payload.newPath = newPath.join("/");
+    }
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileTreeOp", JSON.stringify(payload));
+  };
+  const handleUpload = (path2, uploadType) => {
+    formatUploadFileTarget(path2);
+    document.getElementById(`manual-upload-${uploadType}`).click();
+  };
+  const handleManualUploadFile = async (files) => {
+    for (const item of files) {
+      addedFolder.files = addedFolder.files.concat([{
+        path: `/${item.name}`,
+        content: await getStringFromFile(item)
+      }]);
+    }
+    onUploadFile(JSON.stringify(addedFolder));
+  };
+  const handleManualUploadFolder = async (files) => {
+    for (const item of files) {
+      addedFolder.files = addedFolder.files.concat([{
+        path: `/${item.webkitRelativePath}`,
+        content: await getStringFromFile(item)
+      }]);
+    }
+    onUploadFile(JSON.stringify(addedFolder));
+  };
+  const handleDeleteFileFolder = (path2) => {
+    var _a2;
+    EditorData.setFileTreeStack(EditorData.fileTreeStack.filter((file) => file.path !== path2));
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileTreeOp", JSON.stringify({
+      action: "DELETE",
+      path: path2
+    }));
+    oTStore.getState().switchDoc({
+      value: "",
+      path: "/"
+    });
+  };
+  return /* @__PURE__ */ jsx(FollowLayout, {
+    name: "file",
+    children: /* @__PURE__ */ jsxs(TreeRootLayout, {
+      className: `tree-root-layout ${className ? className : ""}`,
+      ref: treeRef,
+      children: [/* @__PURE__ */ jsx("input", {
+        id: "manual-upload-file",
+        type: "file",
+        multiple: true,
+        hidden: true,
+        onChange: (event) => {
+          handleManualUploadFile(event.target.files);
+        }
+      }), /* @__PURE__ */ jsx("input", {
+        id: "manual-upload-folder",
+        type: "file",
+        multiple: true,
+        hidden: true,
+        onChange: (event) => {
+          handleManualUploadFolder(event.target.files);
+        }
+      }), /* @__PURE__ */ jsx(ControlledTreeEnvironment, {
+        canDragAndDrop: true,
+        canSearch: false,
+        items: treeData,
+        onFocusItem: (item) => setFocusedItem(item.index),
+        onExpandItem: (item) => {
+          onExpand(item.index);
+        },
+        onCollapseItem: (item) => {
+          onCollapse(item.index);
+        },
+        getItemTitle: (item) => item.data,
+        viewState: {
+          ["tree-1"]: {
+            focusedItem,
+            expandedItems,
+            selectedItems
+          }
+        },
+        onSelectItems: (items) => {
+          onSelect(items);
+          onCustomSelect == null ? void 0 : onCustomSelect(items);
+        },
+        renderItem: ({
+          title,
+          arrow,
+          depth,
+          context,
+          children
+        }) => {
+          return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
+            className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
+              style: {
+                paddingLeft: `${depth}0px`
+              },
+              children: [remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
+                className: "rct-tree-item-avatar rounded-full absolute border",
+                style: {
+                  borderColor: remoteUser.color,
+                  backgroundImage: `url(${remoteUser.avatar})`
+                }
+              }, remoteUser.uuid)), /* @__PURE__ */ jsxs("div", {
+                className: "rct-tree-item-toolbar absolute right-0",
+                children: [/* @__PURE__ */ jsx("button", {
+                  onClick: () => {
+                    handleAddFile(context.interactiveElementProps["data-rct-item-id"]);
+                  },
+                  children: /* @__PURE__ */ jsx("i", {
+                    className: "d42 add-file"
+                  })
+                }), /* @__PURE__ */ jsx("button", {
+                  onClick: () => {
+                    handleAddFolder(context.interactiveElementProps["data-rct-item-id"]);
+                  },
+                  children: /* @__PURE__ */ jsx("i", {
+                    className: "d42 add-folder"
+                  })
+                }), /* @__PURE__ */ jsx(Menu$2, {
+                  as: "div",
+                  className: "relative",
+                  children: ({
+                    open: open2
+                  }) => /* @__PURE__ */ jsxs(Fragment, {
+                    children: [/* @__PURE__ */ jsx(Menu$2.Button, {
+                      children: /* @__PURE__ */ jsx("i", {
+                        className: "d42 more"
+                      })
+                    }), /* @__PURE__ */ jsx(Transition, {
+                      show: open2,
+                      as: react.exports.Fragment,
+                      enter: "transition ease-out duration-100",
+                      enterFrom: "transform opacity-0 scale-95",
+                      enterTo: "transform opacity-100 scale-100",
+                      leave: "transition ease-in duration-75",
+                      leaveFrom: "transform opacity-100 scale-100",
+                      leaveTo: "transform opacity-0 scale-95",
+                      children: /* @__PURE__ */ jsxs(Menu$2.Items, {
+                        static: true,
+                        className: "absolute z-1 w-20 right-0 top-full",
+                        children: [/* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center my-2",
+                              onClick: () => {
+                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "file");
+                              },
+                              children: "\u4E0A\u4F20\u6587\u4EF6"
+                            })
+                          })
+                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center my-2",
+                              onClick: () => {
+                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "folder");
+                              },
+                              children: "\u4E0A\u4F20\u6587\u4EF6\u5939"
+                            })
+                          })
+                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center my-2",
+                              onClick: () => {
+                                var _a2;
+                                setRenameValue((_a2 = title == null ? void 0 : title.props) == null ? void 0 : _a2.children);
+                                setRenameItem(context.interactiveElementProps["data-rct-item-id"]);
+                              },
+                              children: "\u91CD\u547D\u540D"
+                            })
+                          })
+                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center text-red-800 my-2",
+                              onClick: () => handleDeleteFileFolder(context.interactiveElementProps["data-rct-item-id"]),
+                              children: "\u5220\u9664"
+                            })
+                          })
+                        })]
+                      })
+                    })]
+                  })
+                })]
+              }), arrow, renameItem === context.interactiveElementProps["data-rct-item-id"] ? /* @__PURE__ */ jsx("input", {
+                className: "text-black focus:outline-none active:outline-none",
+                type: "text",
+                autoFocus: true,
+                value: renameValue,
+                onInput: (event) => setRenameValue(event.target.value),
+                onKeyDown: (event) => {
+                  switch (event.key) {
+                    case "Enter":
+                      handleStopRenaming(renameItem);
+                      handleSave(treeData[renameItem], renameValue);
+                      break;
+                    case "Escape":
+                      handleStopRenaming(renameItem);
+                      break;
+                  }
+                }
+              }) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
+                className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
+                children: title
+              }))]
+            }), children]
+          }));
+        },
+        children: /* @__PURE__ */ jsx(Tree, {
+          treeId: "tree-1",
+          rootItem: "/",
+          treeLabel: "File Tree"
+        })
+      })]
+    })
+  });
+};
+var index$6 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  getStringFromFile,
+  FileTree
+});
 var FExtension;
 (function(FExtension2) {
   FExtension2["erb"] = "erb";
@@ -190152,51 +190234,6 @@ class MonacoAdapter {
     return new Cursor(start, end);
   }
 }
-create$5((set2) => ({
-  cursor: {},
-  setCursor: (arg) => set2((state2) => ({ cursor: arg }))
-}));
-const editorStore = create$5((set2) => ({
-  fileTreeStack: [],
-  setFileTreeStack: (arg) => set2(() => ({ fileTreeStack: arg }))
-}));
-class EditorData {
-  localSetFileTreeStack(arg) {
-    editorStore.getState().setFileTreeStack(arg);
-  }
-  static get fileTreeStack() {
-    const fileTreeStack = editorStore.getState().fileTreeStack;
-    return fileTreeStack;
-  }
-  static setFileTreeStack(arg) {
-    return editorStore.getState().setFileTreeStack(arg);
-  }
-  static updateModel({
-    value,
-    path: path2,
-    language: language2,
-    APP_DIR: APP_DIR2
-  }, callback, cover = false) {
-    let gotModel = editor$1.getModels().find((x2) => x2.uri.path.includes(path2));
-    if (!gotModel && !!cover) {
-      gotModel = editor$1.createModel(value, language2, Uri.parse(`file://${APP_DIR2}${path2}`));
-    }
-    const _fileTreeStack = [
-      ...this.fileTreeStack,
-      {
-        label: path2,
-        path: path2,
-        model: gotModel
-      }
-    ];
-    this.setFileTreeStack(lodash$2.exports.uniqBy(_fileTreeStack, "path"));
-    if (cover) {
-      gotModel == null ? void 0 : gotModel.setValue(value);
-    }
-    callback && callback(gotModel);
-  }
-}
-__publicField(EditorData, "EditorData");
 class ClientMeta {
   constructor(editor2, clientList) {
     __publicField(this, "clientList");
@@ -220162,7 +220199,8 @@ const Editor = ({
   menuStyle,
   editorStyle,
   serviceWorkerOrigin,
-  useLsp
+  useLsp,
+  className
 }) => {
   const divEl = react.exports.useRef(null);
   const [clientEditor, setClientEditor] = react.exports.useState(null);
@@ -220176,9 +220214,11 @@ const Editor = ({
   } = oTStore.getState();
   const CRDTInfo2 = oTStore((state2) => state2.CRDTInfo);
   const dockerInfo2 = oTStore((state2) => state2.dockerInfo);
+  const fileTree = fileTreeStore((state2) => state2.fileTree);
   oTStore((state2) => state2.CRDTInfo.file);
   const docFile = oTStore((state2) => state2.doc);
   const globalData = oTStore((state2) => state2.globalData);
+  const [keepVal, setKeepVal] = react.exports.useState("");
   const userList = userListStore((state2) => state2.userList);
   const userInfo = userStore((state2) => state2.userInfo);
   const io = useOT((state2) => state2.socket);
@@ -220242,6 +220282,7 @@ const Editor = ({
   const onChange = (operation) => {
     var _a2;
     const applyDoc = oTStore.getState().doc;
+    console.log(clientEditor.liveOperationCode);
     setTimeout(() => {
       client.applyClient(operation);
       setLocalFile((applyDoc == null ? void 0 : applyDoc.path) ? applyDoc == null ? void 0 : applyDoc.path : "singleFile", {
@@ -220252,6 +220293,7 @@ const Editor = ({
     if ((_a2 = applyDoc == null ? void 0 : applyDoc.path) == null ? void 0 : _a2.includes("md")) {
       setMarkdownVal(editor.getValue());
     }
+    setKeepVal(editor.getValue());
   };
   const onDidScroll = (evt) => {
     var _a2;
@@ -220407,6 +220449,28 @@ const Editor = ({
         enabled: true
       }
     });
+    editor.onDidAttemptReadOnlyEdit(() => {
+      var _a2, _b2;
+      const text2 = "\u8BE5\u6587\u4EF6\u5DF2\u88AB\u5220\u9664\uFF0C\u7EE7\u7EED\u7F16\u8F91\u9700\u8981\u91CD\u65B0\u521B\u5EFA\u6B64\u6587\u4EF6\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u91CD\u65B0\u521B\u5EFA\uFF1F";
+      if (confirm(text2)) {
+        editor.updateOptions({
+          readOnly: false
+        });
+        const _fileTreeStack = EditorData.fileTreeStack.map((value) => {
+          return __spreadProps(__spreadValues({}, value), {
+            deleted: false,
+            label: value.label.replace(" has deleted", "")
+          });
+        });
+        EditorData.setFileTreeStack(_fileTreeStack);
+        const payload = {
+          action: "RECORVERY",
+          path: (_b2 = (_a2 = oTStore.getState()) == null ? void 0 : _a2.doc) == null ? void 0 : _b2.path,
+          newPath: ""
+        };
+        io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
+      }
+    });
     editor$1.defineTheme("myCoolTheme", {
       base: "vs-dark",
       inherit: false,
@@ -220537,6 +220601,9 @@ const Editor = ({
     } = oTStore.getState();
     if (appStatus === "replay")
       return;
+    if (docFile.path === "/") {
+      editor.setValue("");
+    }
     if (/\/$/.test(docFile.path))
       return;
     updateModel(docFile);
@@ -220561,6 +220628,23 @@ const Editor = ({
       readOnly: globalData.disableEditor
     });
   }, [globalData]);
+  react.exports.useEffect(() => {
+    const _fileTreeStack = EditorData.fileTreeStack.map((value) => {
+      if (checkIfTheFileHasDeleted(fileTree, value.path)) {
+        return __spreadProps(__spreadValues({}, value), {
+          deleted: true,
+          label: `${value.label} has deleted`
+        });
+      }
+      return value;
+    });
+    EditorData.setFileTreeStack(_fileTreeStack);
+    if ((docFile == null ? void 0 : docFile.path) && checkIfTheFileHasDeleted(fileTree, docFile.path)) {
+      editor.updateOptions({
+        readOnly: true
+      });
+    }
+  }, [fileTree]);
   return /* @__PURE__ */ jsxs(FollowLayout, {
     name: "editor",
     children: [/* @__PURE__ */ jsx(Markdown, {
@@ -220571,7 +220655,7 @@ const Editor = ({
       }
     }), /* @__PURE__ */ jsxs(EditorLayout, {
       style: containerStyle,
-      className: "editor-layout flex flex-col",
+      className: `editor-layout ${className ? className : ""} flex flex-col`,
       children: [/* @__PURE__ */ jsx(FileTreeStack, {
         editor,
         menuStyle,
@@ -220593,6 +220677,7 @@ const FileTreeStack = ({
   clearPlayground
 }) => {
   const switchDoc2 = oTStore((state2) => state2.switchDoc);
+  oTStore((state2) => state2.dockerInfo);
   const docFile = oTStore((state2) => state2.doc);
   const fileTreeStack = editorStore((state2) => state2.fileTreeStack);
   const setFileTreeStack = editorStore((state2) => state2.setFileTreeStack);
@@ -227885,6 +227970,7 @@ const Console = (_e2) => {
   }, [dockerStatus]);
   return /* @__PURE__ */ jsx(FollowLayout, {
     children: /* @__PURE__ */ jsx("div", {
+      className: props2.className ? props2.className : "",
       style: {
         height: "100%",
         width: "100%"
@@ -227951,7 +228037,11 @@ const StopMask = newStyled.div`
   opacity: 0.6;
 `;
 const OutputBrowser = (_g2) => {
-  var props2 = __objRest(_g2, []);
+  var _h2 = _g2, {
+    showURL = false
+  } = _h2, props2 = __objRest(_h2, [
+    "showURL"
+  ]);
   var _a2;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
   const dStatus = oTStore((state2) => state2.dockerStatus);
@@ -228006,7 +228096,7 @@ const OutputBrowser = (_g2) => {
   }, [playgroundStatus, dockerStatus]);
   return /* @__PURE__ */ jsxs(FollowLayout, {
     name: "browser",
-    children: [/* @__PURE__ */ jsxs(NavBar, {
+    children: [showURL ? /* @__PURE__ */ jsxs(NavBar, {
       children: [/* @__PURE__ */ jsx("i", {
         className: "d42 text-xl reload cursor-pointer",
         onClick: onRefresh
@@ -228019,7 +228109,7 @@ const OutputBrowser = (_g2) => {
         className: "d42 text-xl file-copy cursor-pointer",
         onClick: onOpenInNewTab
       })]
-    }), dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
+    }) : null, dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
       children: /* @__PURE__ */ jsx("span", {
         children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
       })
@@ -228038,10 +228128,10 @@ var index$2 = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": OutputBrowser
 });
-const TerminalComponent = (_h2) => {
-  var _i = _h2, {
+const TerminalComponent = (_i) => {
+  var _j = _i, {
     options
-  } = _i, props2 = __objRest(_i, [
+  } = _j, props2 = __objRest(_j, [
     "options"
   ]);
   const defaultOptions2 = __spreadValues({}, options);
@@ -228161,6 +228251,7 @@ const TerminalComponent = (_h2) => {
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "terminal",
     children: /* @__PURE__ */ jsx("div", {
+      className: props2.className ? props2.className : "",
       id: "terminal",
       style: {
         height: "100%",
@@ -228178,12 +228269,12 @@ var index$1 = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": TerminalComponent
 });
-const Tabs = (_j) => {
-  var _k = _j, {
+const Tabs = (_k) => {
+  var _l = _k, {
     activeKey,
     onSelect,
     tabItems
-  } = _k, props2 = __objRest(_k, [
+  } = _l, props2 = __objRest(_l, [
     "activeKey",
     "onSelect",
     "tabItems"
@@ -228501,10 +228592,10 @@ const AvatarLayout = newStyled.div`
   border-color: ${(props2) => props2.user.color};
   background-image: ${(props2) => 'url("' + props2.user.avatar + '")'};
 `;
-const Avatar = (_l) => {
-  var _m = _l, {
+const Avatar = (_m) => {
+  var _n = _m, {
     user
-  } = _m, props2 = __objRest(_m, [
+  } = _n, props2 = __objRest(_n, [
     "user"
   ]);
   return /* @__PURE__ */ jsx(AvatarLayout, __spreadValues({
@@ -228513,8 +228604,8 @@ const Avatar = (_l) => {
   }, props2));
 };
 const SkeletonThemeContext = React.createContext({});
-function SkeletonTheme(_n) {
-  var _o = _n, { children } = _o, styleOptions = __objRest(_o, ["children"]);
+function SkeletonTheme(_o) {
+  var _p = _o, { children } = _p, styleOptions = __objRest(_p, ["children"]);
   return React.createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children);
 }
 const defaultEnableAnimation = true;
@@ -228540,8 +228631,8 @@ function styleOptionsToCssProperties({ baseColor, highlightColor, width, height,
     style2["--highlight-color"] = highlightColor;
   return style2;
 }
-function Skeleton$1(_p) {
-  var _q = _p, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _q, propsStyleOptions = __objRest(_q, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
+function Skeleton$1(_q) {
+  var _r = _q, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _r, propsStyleOptions = __objRest(_r, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
   var _a2, _b2;
   const contextStyleOptions = React.useContext(SkeletonThemeContext);
   const styleOptions = __spreadProps(__spreadValues(__spreadValues({}, contextStyleOptions), propsStyleOptions), {
@@ -228664,8 +228755,8 @@ const ButtonContent = ({
     })()
   });
 };
-const ToolBar = (_r) => {
-  var props2 = __objRest(_r, []);
+const ToolBar = (_s) => {
+  var props2 = __objRest(_s, []);
   const io = useOT.getState().socket;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
   const dStatus = oTStore((state2) => state2.dockerStatus);
@@ -228783,7 +228874,7 @@ const MainLayout = newStyled.div`
 const PreviewWrapper = newStyled.div`
   height: 40vh;
   color: #333333;
-  background-color: #eaeaea;
+  /* background-color: #eaeaea; */
 `;
 const TermWrapper = newStyled.div`
   height: calc(100% - 40vh - 51px);
@@ -228869,6 +228960,7 @@ const Index = (props2) => {
               count: 10
             }),
             children: /* @__PURE__ */ jsx(LazyEditorComponent, {
+              className: "editor-custom-style",
               serviceWorkerOrigin: props2.serviceWorkerOrigin,
               useLsp: true
             })