vzcode 0.84.0 → 0.86.0

package/src/client/VZCodeContext.tsx

@@ -57,6 +57,10 @@ export type VZCodeContextValue = {
   createFile: (fileName: string, text?: string) => void;
   renameFile: (fileId: string, fileName: string) => void;
   deleteFile: (fileId: string) => void;
+  createDirectory: (
+    fileName: string,
+    text?: string,
+  ) => void;
   renameDirectory: (
     directoryId: string,
     directoryOldName: string,
@@ -107,6 +111,12 @@ export type VZCodeContextValue = {
   handleOpenCreateFileModal: () => void;
   handleCloseCreateFileModal: () => void;
   handleCreateFileClick: (newFileName: string) => void;
+
+  isCreateDirModalOpen: boolean;
+  handleOpenCreateDirModal: () => void;
+  handleCloseCreateDirModal: () => void;
+  handleCreateDirClick: (newFileName: string) => void;
+
   runPrettierRef: React.MutableRefObject<
     null | (() => void)
   >;
@@ -237,6 +247,7 @@ export const VZCodeProvider = ({
     createFile,
     renameFile,
     deleteFile,
+    createDirectory,
     renameDirectory,
     deleteDirectory,
   } = useFileCRUD({
@@ -265,6 +276,26 @@ export const VZCodeProvider = ({
     [createFile, setIsCreateFileModalOpen],
   );
 
+  // State to control the create directory modal's visibility
+  const [isCreateDirModalOpen, setIsCreateDirModalOpen] =
+    useState(false);
+
+  const handleOpenCreateDirModal = useCallback(() => {
+    setIsCreateDirModalOpen(true);
+  }, []);
+
+  const handleCloseCreateDirModal = useCallback(() => {
+    setIsCreateDirModalOpen(false);
+  }, []);
+
+  const handleCreateDirClick = useCallback(
+    (newDirName: string) => {
+      createDirectory(newDirName);
+      setIsCreateDirModalOpen(false);
+    },
+    [createDirectory, setIsCreateDirModalOpen],
+  );
+
   // Isolate the files object from the document.
   const files: Files | null = content
     ? content.files
@@ -296,6 +327,7 @@ export const VZCodeProvider = ({
     createFile,
     renameFile,
     deleteFile,
+    createDirectory,
     renameDirectory,
     deleteDirectory,
 
@@ -333,6 +365,10 @@ export const VZCodeProvider = ({
     handleOpenCreateFileModal,
     handleCloseCreateFileModal,
     handleCreateFileClick,
+    isCreateDirModalOpen,
+    handleOpenCreateDirModal,
+    handleCloseCreateDirModal,
+    handleCreateDirClick,
     runPrettierRef,
     runCodeRef,
 

package/src/client/VZLeft.tsx

@@ -1,6 +1,7 @@
 import { VZSettings } from './VZSettings';
 import { VZSidebar } from './VZSidebar';
 import { CreateFileModal } from './VZSidebar/CreateFileModal';
+import { CreateDirModal } from './VZSidebar/CreateDirModal';
 
 // The middle portion of the VZCode environment, containing:
 // * The sidebar
@@ -14,6 +15,7 @@ export const VZLeft = ({ enableUsernameField = true }) => {
         enableUsernameField={enableUsernameField}
       />
       <CreateFileModal />
+      <CreateDirModal />
     </div>
   );
 };

package/src/client/VZSettings.tsx

@@ -34,27 +34,24 @@ export const VZSettings = ({
     [],
   );
 
-  // Track selected font and font size.
-  // TODO store these in local storage
-  const [selectedFont, setSelectedFont] =
-    useState('Roboto Mono');
-  const [selectedFontSize, setSelectedFontSize] =
-    useState('16px');
+  // Initialize font and size from localStorage or defaults
+  const [selectedFont, setSelectedFont] = useState(localStorage.getItem('vzcodeSelectedFont') || 'Roboto Mono');
+  const [selectedFontSize, setSelectedFontSize] = useState(localStorage.getItem('vzcodeSelectedFontSize') || '16px');
 
   // Called when the user selects a different font
-  const handleFontChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      setSelectedFont(event.target.value);
-    },
-    [],
-  );
+  const handleFontChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newFont = event.target.value;
+    localStorage.setItem('vzcodeSelectedFont', newFont);
+    setSelectedFont(newFont);
+  }, []);
 
   // Called when the user selects a different font size
-  const handleFontSizeChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    setSelectedFontSize(event.target.value);
-  };
+  const handleFontSizeChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newSize = event.target.value;
+    localStorage.setItem('vzcodeSelectedFontSize', newSize);
+    setSelectedFontSize(newSize);
+  }, []);
+
 
   useEffect(() => {
     document.body.style.setProperty(

package/src/client/VZSidebar/CreateDirModal.tsx

@@ -0,0 +1,99 @@
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useContext,
+} from 'react';
+import { Modal, Form, Button } from '../bootstrap';
+import { VZCodeContext } from '../VZCodeContext';
+
+export const CreateDirModal = ({
+  initialFileName = '',
+}) => {
+  const [newName, setNewName] = useState(initialFileName);
+  const inputRef = useRef(null);
+
+  const {
+    isCreateDirModalOpen,
+    handleCloseCreateDirModal,
+    handleCreateDirClick,
+  } = useContext(VZCodeContext);
+
+  useEffect(() => {
+    if (isCreateDirModalOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isCreateDirModalOpen]);
+
+  const handleNameChange = useCallback((event) => {
+    setNewName(event.target.value);
+  }, []);
+
+  const onCreateClick = useCallback(() => {
+    handleCreateDirClick(newName);
+    setNewName('');
+  }, [newName, handleCreateDirClick]);
+
+  // Returns true if file name is valid, false otherwise.
+  const validateFileName = useCallback(
+    (fileName: string) => {
+      const regex =
+        /^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
+      return regex.test(fileName);
+    },
+    [],
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (
+        e.key === 'Enter' &&
+        validateFileName(newName) &&
+        (e.ctrlKey ||
+          e.shiftKey ||
+          (!e.altKey && !e.metaKey))
+      ) {
+        onCreateClick();
+      }
+    },
+    [onCreateClick, validateFileName, newName],
+  );
+
+  return isCreateDirModalOpen ? (
+    <Modal
+      show={isCreateDirModalOpen}
+      onHide={handleCloseCreateDirModal}
+      animation={false}
+      onKeyDown={handleKeyDown}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Create Directory</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3" controlId="fileName">
+          <Form.Label>Directory Name</Form.Label>
+          <Form.Control
+            type="text"
+            value={newName}
+            onChange={handleNameChange}
+            ref={inputRef}
+            spellCheck="false"
+          />
+          <Form.Text className="text-muted">
+            Enter the name for your file
+          </Form.Text>
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="primary"
+          onClick={onCreateClick}
+          disabled={!validateFileName(newName)}
+        >
+          Create Directory
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  ) : null;
+};

package/src/client/VZSidebar/index.tsx

@@ -14,7 +14,7 @@ import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
 import { disableSettings } from '../featureFlags';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
-import { BugSVG, GearSVG, NewSVG } from '../Icons';
+import { BugSVG, GearSVG, NewSVG, FileSVG } from '../Icons';
 import { Listing } from './Listing';
 import { VZCodeContext } from '../VZCodeContext';
 import { useDragAndDrop } from './useDragAndDrop';
@@ -27,10 +27,12 @@ const enableConnectionStatus = true;
 
 export const VZSidebar = ({
   createFileTooltipText = 'New File',
+  createDirTooltipText = 'New Directory',
   openSettingsTooltipText = 'Open Settings',
   reportBugTooltipText = 'Report Bug',
 }: {
   createFileTooltipText?: string;
+  createDirTooltipText?: string;
   openSettingsTooltipText?: string;
   reportBugTooltipText?: string;
 }) => {
@@ -46,6 +48,7 @@ export const VZSidebar = ({
     isDirectoryOpen,
     toggleDirectory,
     handleOpenCreateFileModal,
+    handleOpenCreateDirModal,
     connected,
   } = useContext(VZCodeContext);
 
@@ -157,6 +160,23 @@ export const VZSidebar = ({
                 <NewSVG />
               </i>
             </OverlayTrigger>
+
+            {/*Directory Rename*/}
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="create-dir-tooltip">
+                  {createDirTooltipText}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleOpenCreateDirModal}
+                className="icon-button icon-button-dark"
+              >
+                <FileSVG />
+              </i>
+            </OverlayTrigger>
           </div>
         </div>
         {isDragOver ? (

package/src/client/VZSidebar/useDragAndDrop.tsx

@@ -37,24 +37,35 @@ export const useDragAndDrop = () => {
       event.preventDefault();
       event.stopPropagation();
       setIsDragOver(false);
-      const files = event.dataTransfer.files;
-
-      if (debug) {
-        console.log(files);
-      }
-
-      Array.from(files).forEach((file) => {
-        const reader = new FileReader();
-        reader.onload = (readEvent) => {
-          createFile(
-            file.name,
-            readEvent.target.result as string,
-          );
-        };
-        reader.onerror = (error) => {
-          console.error('Error reading file:', error);
-        };
-        reader.readAsText(file);
+  
+      const items = event.dataTransfer.items;
+  
+      const processEntry = (entry, path) => {
+        if (entry.isFile) {
+          entry.file((file) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              const content = e.target.result as string;
+              createFile(`${path}${file.name}`, content);
+            };
+            reader.readAsText(file);
+          });
+        } else if (entry.isDirectory) {
+          const dirReader = entry.createReader();
+          dirReader.readEntries((entries) => {
+            const newPath = `${path}${entry.name}/`;
+            for (const entry of entries) {
+              processEntry(entry, newPath);
+            }
+          });
+        }
+      };
+      const itemsArray = Array.from(items);
+      itemsArray.forEach((item) => {
+        const entry = item.webkitGetAsEntry();
+        if (entry) {
+          processEntry(entry, '');
+        }
       });
     },
     [createFile],

package/src/client/useFileCRUD.ts

@@ -45,6 +45,23 @@ export const useFileCRUD = ({
     [submitOperation],
   );
 
+  const createDirectory = useCallback(
+    (name: string, text = null) => {
+      if (name) {
+        name += '/';
+        const fileId: FileId = randomId();
+        submitOperation((document: VZCodeContent) => ({
+          ...document,
+          files: {
+            ...document.files,
+            [fileId]: { name, text },
+          },
+        }));
+      }
+    },
+    [submitOperation],
+  );
+
   // Called when a file in the sidebar is renamed.
   const renameFile = useCallback(
     (fileId: FileId, newName: string) => {
@@ -148,6 +165,7 @@ export const useFileCRUD = ({
     createFile,
     renameFile,
     deleteFile,
+    createDirectory,
     renameDirectory,
     deleteDirectory,
   };

package/src/server/index.js

@@ -217,10 +217,16 @@ const save = () => {
       }
     }
 
-    // Handle creating files.
+    // Handle creating files and Directories.
     if (!previous && current) {
-      fs.writeFileSync(current.name, current.text);
+      //File Creation
+      if(!isDirectory(current.name)){
+        fs.writeFileSync(current.name, current.text);
+      }else{
+        fs.mkdirSync(current.name, { recursive: true });
+      }
     }
+
   }
   // TODO deleted all directories under directoriesToDelete