vzcode 0.21.0 → 0.24.0

package/src/client/Sidebar/Item.tsx

@@ -42,9 +42,13 @@ export const Item = ({
   const [showModal, setShowModal] = useState(false);
 
   // Function to open the delete file confirmation modal
-  const handleModalOpen = useCallback(() => {
-    setShowModal(true);
-  }, []);
+  const handleModalOpen = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(true);
+    },
+    [],
+  );
 
   // Function to close the modal
   const handleModalClose = useCallback(() => {
@@ -52,10 +56,14 @@ export const Item = ({
   }, []);
 
   // Function to handle confirmation on modal
-  const handleConfirmModal = useCallback(() => {
-    setShowModal(false);
-    handleDeleteClick();
-  }, [handleDeleteClick]);
+  const handleConfirmModal = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(false);
+      handleDeleteClick();
+    },
+    [handleDeleteClick],
+  );
 
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
@@ -98,7 +106,8 @@ export const Item = ({
           <i
             className="bx bxs-edit utilities"
             style={{ color: '#abdafb' }}
-            onClick={() => {
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
               setIsRenaming(!isRenaming);
               setRenameValue(isDir ? name : children);
             }}

package/src/client/TabList/style.scss

@@ -1,6 +1,8 @@
 .vz-tab-list {
   display: flex;
   background-color: rgb(37, 37, 38);
+  // When the tab list becomes too large, a horizontal scroll bar appears.
+  overflow-x: auto;
 
   .tab {
     background: rgb(45, 45, 45);
@@ -17,6 +19,8 @@
     margin-left: 2px;
     margin-right: 2px;
     cursor: pointer;
+    // Make sure text doesn't wrap within tabs.
+    white-space: nowrap;
 
     .tab-close {
       margin-left: 5px;

package/src/client/reducer.ts

@@ -0,0 +1,122 @@
+import { FileId } from '../types';
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    // TODO phase this out
+    case 'set_tab_list': {
+      return { ...state, tabList: action.tabList };
+    }
+    case 'set_active_fileId': {
+      return {
+        ...state,
+        activeFileId: action.activeFileId,
+      };
+    }
+    case 'open_tab': {
+      if (!state.tabList.includes(action.fileId)) {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+          tabList: [...state.tabList, action.fileId],
+        };
+      } else {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+        };
+      }
+    }
+    case 'close_tab': {
+      const i = state.tabList.findIndex(
+        (fileId) => fileId === action.fileIdToRemove,
+      );
+      if (i != -1) {
+        const newTabList = [
+          ...state.tabList.slice(0, i),
+          ...state.tabList.slice(i + 1),
+        ];
+        if (state.activeFileId === action.fileIdToRemove) {
+          // set the new active file to the next tab over,
+          if (newTabList.length > 0) {
+            return {
+              ...state,
+              activeFileId:
+                i === 0 ? newTabList[i] : newTabList[i - 1],
+              tabList: newTabList,
+            };
+          } else {
+            // or clear out the active file
+            // if we've closed the last tab.
+            return {
+              ...state,
+              activeFileId: null,
+              tabList: newTabList,
+            };
+          }
+        }
+        return {
+          ...state,
+          tabList: newTabList,
+        };
+      }
+      return {
+        ...state,
+      };
+    }
+    case 'multi_close_tab': {
+      let newTabList = [...state.tabList]; // Create a copy of the tabList array.
+      let newActiveFileId: FileId = state.activeFileId;
+      action.idsToDelete.forEach((id) => {
+        const i = newTabList.findIndex(
+          (fileId) => fileId === id,
+        );
+        if (i !== -1) {
+          // Remove the tab from the tab list.
+          newTabList = [
+            ...newTabList.slice(0, i),
+            ...newTabList.slice(i + 1),
+          ];
+          // If we are closing the active file,
+          if (newActiveFileId === id) {
+            // set the new active file to the next tab over,
+            if (newTabList.length > 0) {
+              newActiveFileId =
+                i === 0 ? newTabList[i] : newTabList[i - 1];
+            } else {
+              // or clear out the active file if we've closed the last tab.
+              newActiveFileId = null;
+            }
+          }
+        }
+      });
+      return {
+        ...state,
+        tabList: newTabList,
+        activeFileId: newActiveFileId,
+      };
+    }
+    // TODO eventually
+    // case 'init_sharedb': {
+    //   return {
+    //     ...state,
+    //     submitOperation: action.submitOperation
+    //   }
+    // }
+    // case 'delete_file': {
+    // case 'delete_directory': {
+    // case 'create_file': {
+    //           state.submitOperation((document) => ({
+    //             ...document,
+    //             files: {
+    //               ...document.files,
+    //               [randomId()]: { name:action.name, text: '' },
+    //             },
+    //           }))
+    //           return state;
+
+    //     }
+    // case 'rename_file': {
+    // ...
+  }
+  throw Error('Unknown action: ' + action.type);
+};

package/src/client/style.scss

@@ -45,6 +45,9 @@ body,
   .left,
   .right {
     display: flex;
+
+    /* To suport PrettierErrorOverlay, which is position: absolute */
+    position: relative;
   }
 
   .right {

package/src/client/usePrettier/index.ts

@@ -4,7 +4,7 @@ import {
   ShareDBDoc,
   VZCodeContent,
 } from '../../types';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoPrettierDebounceTimeMS = 1200;
@@ -31,6 +31,14 @@ export const usePrettier = (
   // since the last Prettier run.
   const dirtyFiles: Set<FileId> = new Set<FileId>();
 
+  // State to hold the error from Prettier
+  // `null` means no errors
+  // If this is a string, it's the
+  // error message from Prettier.
+  const [prettierError, setPrettierError] = useState<
+    string | null
+  >(null);
+
   // A ref to keep track of whether an op is being applied.
   // This is used to prevent Prettier from running
   // when the op is coming from Prettier itself.
@@ -46,9 +54,18 @@ export const usePrettier = (
     const handleMessage = (event) => {
       const { fileId, error, fileTextPrettified } =
         event.data;
+
+      // Handle syntax errors
       if (error) {
-        console.log(error);
+        // If there's an error, set the error state
+        setPrettierError(error);
+
+        // Return early as there is no text change to apply.
         return;
+      } else {
+        // Make sure the error overlay goes away
+        // when Prettier runs successfully with no errors.
+        setPrettierError(null);
       }
 
       isApplyingOpRef.current = true;
@@ -159,19 +176,20 @@ export const usePrettier = (
         } else {
           // console.log('ignoring op from remote', op, isLocal);
         }
-
-        // In the event that the component unmounts,
-        return () => {
-          // Remove the event listener
-          prettierWorker.removeEventListener(
-            'message',
-            handleMessage,
-          );
-
-          // Clear the timeout
-          clearTimeout(debounceTimeout);
-        };
       },
     );
+
+    // In the event that the component unmounts,
+    return () => {
+      // Remove the event listener
+      prettierWorker.removeEventListener(
+        'message',
+        handleMessage,
+      );
+
+      // Clear the timeout
+      clearTimeout(debounceTimeout);
+    };
   }, [shareDBDoc]);
+  return { prettierError }; // Return the errors for use in other files
 };

package/src/client/usePrettier/worker.ts

@@ -90,7 +90,7 @@ onmessage = async ({
   } catch (error) {
     postMessage({
       fileId,
-      error,
+      error: error.toString(),
     });
   }
 };

package/src/client/useTabsState.ts

@@ -11,6 +11,7 @@ export const useTabsState = (
   // Called when a tab is closed.
   const closeTab = useCallback(
     (fileIdToRemove: FileId) => {
+      let newActiveFileId: FileId = activeFileId;
       const i = tabList.findIndex(
         (fileId) => fileId === fileIdToRemove,
       );
@@ -29,16 +30,52 @@ export const useTabsState = (
         if (activeFileId === fileIdToRemove) {
           // set the new active file to the next tab over,
           if (newTabList.length > 0) {
-            setActiveFileId(
-              i === 0 ? newTabList[i] : newTabList[i - 1],
-            );
+            newActiveFileId =
+              i === 0 ? newTabList[i] : newTabList[i - 1];
           } else {
             // or clear out the active file
             // if we've closed the last tab.
-            setActiveFileId(null);
+            newActiveFileId = null;
           }
         }
       }
+      setActiveFileId(newActiveFileId);
+    },
+    [tabList, activeFileId],
+  );
+
+  //When closing multiple tabs use this function over CloseTab()
+  const multiCloseTab = useCallback(
+    (idsToDelete: Array<FileId>) => {
+      let newTabList = [...tabList]; // Create a copy of the tabList array.
+      let newActiveFileId: FileId = activeFileId;
+      idsToDelete.forEach((id) => {
+        const i = newTabList.findIndex(
+          (fileId) => fileId === id,
+        );
+        if (i !== -1) {
+          // Remove the tab from the tab list.
+          newTabList = [
+            ...newTabList.slice(0, i),
+            ...newTabList.slice(i + 1),
+          ];
+
+          // If we are closing the active file,
+          if (newActiveFileId === id) {
+            // set the new active file to the next tab over,
+            if (newTabList.length > 0) {
+              newActiveFileId =
+                i === 0 ? newTabList[i] : newTabList[i - 1];
+            } else {
+              // or clear out the active file if we've closed the last tab.
+              newActiveFileId = null;
+            }
+          }
+        }
+      });
+      //Run setStates after doing multiple changes to the two variables. Will properly render tabList and activeFileID.
+      setActiveFileId(newActiveFileId);
+      setTabList(newTabList);
     },
     [tabList, activeFileId],
   );
@@ -54,5 +91,5 @@ export const useTabsState = (
     [tabList],
   );
 
-  return { tabList, closeTab, openTab };
+  return { tabList, closeTab, openTab, multiCloseTab };
 };

package/src/server/index.js

@@ -109,13 +109,30 @@ const save = () => {
 
       // Handle renaming files.
       if (previous.name !== current.name) {
-        fs.renameSync(previous.name, current.name);
+        fs.renamesync(previous.name, current.name);
       }
     }
 
-    // handle deleting files.
+    // handle deleting files and directories.
     if (previous && !current) {
-      fs.unlinkSync(previous.name);
+      let stats = fs.statSync(previous.name);
+      //Check if the file path we are trying to delete is a directory
+      if (!stats.isDirectory()) {
+        fs.unlinkSync(previous.name);
+      } else {
+        //Performs directory deletion.
+        fs.rm(
+          previous.name,
+          {
+            recursive: true, //Makes sure that all files in directory are deleted.
+          },
+          (error) => {
+            if (error) {
+              console.log(error);
+            }
+          },
+        );
+      }
     }
 
     // Handle creating files.

package/dist/assets/index-1547f7b8.css

@@ -1 +0,0 @@
-.vz-code-editor{flex:1;display:flex;font-family:var(--vzcode-font-family);overflow-x:auto}.vz-code-editor .cm-editor{flex:1}.vz-sidebar{height:100%;background:rgb(54,65,89);display:flex;flex-direction:column;justify-content:space-between}.vz-sidebar .full-box{padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.vz-sidebar .files{overflow:auto}.vz-sidebar .file-or-directory{display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer;margin:0 10px;color:#dbdde1;border-radius:5px}.vz-sidebar .link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.vz-sidebar .new-btn{justify-content:right;margin-right:10px;cursor:pointer}.vz-sidebar .utils{display:flex}.vz-sidebar .utilities{margin-right:3px}.vz-sidebar .file-or-directory:hover,.vz-sidebar .settings:hover{background-color:#4a5469}.vz-sidebar .name{display:flex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vz-sidebar .indentation{margin-left:20px}.vz-sidebar .arrow-wrapper{margin-right:4px}.vz-sidebar .settings{height:30px;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.vz-tab-list{display:flex;background-color:#252526}.vz-tab-list .tab{background:rgb(45,45,45);color:#fff;font-family:var(--vzcode-font-family);align-items:center;display:flex;padding-top:2px;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.vz-tab-list .tab .tab-close{margin-left:5px}.vz-tab-list .tab .tab-close:hover{border-radius:30%;background-color:#252526}.vz-tab-list .tab.active{background-color:#292c34}.vz-resizer{position:absolute;top:0;left:0;bottom:0}.vz-resizer:hover{cursor:col-resize}.vz-resizer .vz-resizer-thumb{position:absolute;top:0;bottom:0;transition:background-color .15s .25s}.vz-resizer:hover .vz-resizer-thumb{background-color:#0078d4}.vz-notification{position:fixed;display:flex;flex-direction:column;gap:10px;bottom:20px;right:20px;color:#9aa0ac;padding:15px}.vz-notification .vz-notification-item{background-color:#364159;padding:5px;border-radius:5px}:root{--vzcode-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;--vz-bg-color: rgb( 41, 44, 52 )}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--app-bg-color)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}html,body,#root,.app{height:100%}.app{background-color:var(--vz-bg-color);font-family:Poppins,sans-serif;display:flex;position:relative}.app .left,.app .right{display:flex}.app .right{flex:1;flex-direction:column;min-width:0}