vzcode 0.28.0 → 0.30.0

package/src/client/CodeEditor/typeScriptCompletions.ts

@@ -0,0 +1,108 @@
+import {
+  CompletionContext,
+  CompletionSource,
+} from '@codemirror/autocomplete';
+import {
+  AutocompleteRequest,
+  AutocompleteResponse,
+} from '../useTypeScript/requestTypes';
+
+type RequestId = string;
+
+export const generateRequestId = (): RequestId =>
+  (Math.random() + '').slice(2);
+
+export const typeScriptCompletions = ({
+  typeScriptWorker,
+  fileName,
+}): CompletionSource => {
+  const tsComplete: CompletionSource = async (
+    completionContext: CompletionContext,
+  ) => {
+    // A random unique ID for this request.
+    const requestId = generateRequestId();
+
+    const fileContent =
+      completionContext.state.doc.toString();
+
+    const autocompleteRequest: AutocompleteRequest = {
+      event: 'autocomplete-request',
+
+      // Location is the file path (string)
+      fileName,
+
+      // Latest file content (string)
+      fileContent,
+
+      // Cursor position (integer, like index in a string)
+      position: completionContext.pos,
+
+      // Unique ID for this request
+      requestId,
+    };
+
+    //Post message to our sharedWorker to get completions.
+    typeScriptWorker.postMessage(autocompleteRequest);
+
+    //An async promise to ensure that we are getting our completion entries
+    const tsCompletions = await new Promise((resolve) => {
+      typeScriptWorker.onmessage = (message: {
+        data: AutocompleteResponse;
+      }) => {
+        const autocompleteResponse: AutocompleteResponse =
+          message.data;
+        const { event, requestId, completions } =
+          autocompleteResponse;
+        if (
+          event === 'post-completions' &&
+          requestId === requestId
+        ) {
+          resolve(completions);
+        }
+      };
+    });
+
+    if (!tsCompletions) {
+      // console.log('Unable to get completions');
+      return { from: completionContext.pos, options: [] };
+    }
+
+    // Logic to get the text and cursor location in between punctuation.
+    // Taken from https://codemirror.net/examples/autocompletion/
+    // Also inspired by
+    // https://stackblitz.com/edit/codemirror-6-typescript?file=client%2Findex.ts%3AL86
+    const from = completionContext.matchBefore(/\w*/).from;
+
+    // `lastWord` represents the word that the user has partially typed
+    // and is currently at the end of the text, immediately before
+    // the cursor position.
+    const lastWord =
+      completionContext.matchBefore(/\w*/).text;
+    if (lastWord) {
+      // @ts-ignore
+      tsCompletions.entries = tsCompletions.entries.filter(
+        (completion) =>
+          completion.name.startsWith(lastWord),
+      );
+    }
+
+    return {
+      from: completionContext.pos,
+      // @ts-ignore
+      options: tsCompletions.entries.map((completion) => ({
+        label: completion.name,
+        // Applies autocompletions to be seen in the code Editor
+        apply: (view) => {
+          view.dispatch({
+            changes: {
+              from,
+              to: completionContext.pos,
+              insert: completion.name,
+            },
+          });
+        },
+      })),
+    };
+  };
+  return tsComplete;
+};

package/src/client/CodeEditor/typeScriptLinter.ts

@@ -0,0 +1,45 @@
+import { generateRequestId } from './typeScriptCompletions';
+import {
+  LinterResponse,
+  LinterRequest,
+} from '../useTypeScript/requestTypes';
+import ts from 'typescript';
+
+export const typeScriptLinter = ({
+  typeScriptWorker,
+  fileName,
+  shareDBDoc,
+  fileId,
+}) => {
+  return async () => {
+    const requestId = generateRequestId();
+    //Get the fileContent from shareDB to pass to web worker
+    const fileContent = shareDBDoc.data.files[fileId].text;
+    const linterRequest: LinterRequest = {
+      event: 'lint-request',
+      fileName,
+      fileContent,
+      requestId,
+    };
+    typeScriptWorker.postMessage(linterRequest);
+
+    //An array of diagnostic (CodeMirror) objects.
+    const tsErrors: ts.Diagnostic[] = await new Promise(
+      (resolve) => {
+        typeScriptWorker.onmessage = (message: {
+          data: LinterResponse;
+        }) => {
+          const ErrorData: LinterResponse = message.data;
+          const { event, requestId, tsErrors } = ErrorData;
+          if (
+            event === 'post-error-linter' &&
+            requestId === requestId
+          ) {
+            resolve(tsErrors);
+          }
+        };
+      },
+    );
+    return tsErrors;
+  };
+};

package/src/client/CodeErrorOverlay/index.tsx

@@ -18,14 +18,40 @@ export const CodeErrorOverlay = ({
     }
   }, [errorMessage]);
 
+  useEffect(() => {
+    document.addEventListener(
+      'keydown',
+      detectKeyDown,
+      true,
+    );
+
+    return () => {
+      // Remove the event listener when the component unmounts
+      document.removeEventListener(
+        'keydown',
+        detectKeyDown,
+        true,
+      );
+    };
+  }, []);
+
   const handleCloseClick = useCallback(() => {
     // Set the visibility state to false when the button is clicked
     setIsOverlayVisible(false);
   }, []);
 
+  const detectKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleCloseClick();
+      }
+    },
+    [handleCloseClick],
+  );
+
   return isOverlayVisible && errorMessage !== null ? (
     <div className="vz-code-error-overlay">
-      {errorMessage}
+      <pre>{errorMessage}</pre>
       {enableErrorDismiss ? (
         <div
           className={'bx bx-x error-dismiss-button'}

package/src/client/CodeErrorOverlay/style.scss

@@ -1,26 +1,26 @@
 .vz-code-error-overlay {
   color: rgb(255, 35, 35);
-  font-family: var(--vzcode-font-family);
-  font-size: var(--vzcode-font-size);
-  background-color: rgba(0, 0, 0, 0.6);
+
+  background-color: rgba(0, 0, 0, 0.9);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   // pointer-events: none;
   margin: 0;
-  padding: 8px;
+  padding: 8px 12px;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 
-  /* Define your custom styles here */
-  /* For example, change the font size and color */
-  font-size: 16px;
-  color: #FF5733;
-
   /* Add a box shadow for a subtle effect */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 
+  /* Style the monospace font */
+  pre {
+    font-family: var(--vzcode-font-family);
+    font-size: var(--vzcode-font-size);
+  }
+
   /* Customize the dismiss button style */
   .error-dismiss-button {
     position: absolute;
@@ -30,12 +30,12 @@
     padding: 5px; /* Adjust padding for the button */
     cursor: pointer;
     color: white;
-    background-color: #FF5733; /* Change the button's background color */
+    background-color: #ff5733; /* Change the button's background color */
     border-radius: 50%; /* Make it circular */
   }
 
   /* Style the button on hover */
   .error-dismiss-button:hover {
-    background-color: #FF826D; /* Change the background color on hover */
+    background-color: #ff826d; /* Change the background color on hover */
   }
 }

package/src/client/SplitPaneResizeContext.tsx

@@ -1,81 +1,240 @@
 // From https://github.com/vizhub-core/vizhub/edit/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/SplitPaneResizeContext/index.js
 import {
-  useState,
   createContext,
   useReducer,
   useEffect,
+  useCallback,
+  useLayoutEffect,
 } from 'react';
 
+export type Side = 'left' | 'right';
+
+export type SplitPaneResizeContextValue = {
+  codeEditorWidth: number;
+  sidebarWidth: number;
+  moveSplitPane: (a: number, side: Side) => void;
+  isDraggingRight: boolean;
+  isDraggingLeft: boolean;
+  setIsDragging: (a: boolean, side: Side) => void;
+};
+
+// Feature flag for developers to use when testing.
+const enableLocalStorage = true;
+
 // The amount of time to wait idle before writing to localStorage.
 // This is to avoid writing to localStorage on every resize event.
 // MS = milliseconds
 const localStorageWriteDebounceMS = 800;
 
-const localStoragePropertyName = 'vizHubCodeEditorWidth';
+// Properties in LocalStorage
+const sidebarWidthProperty = 'vzCodeSidebarWidth';
+const codeEditorWidthProperty = 'vzCodeCodeEditorWidth';
+
+const initialSidebarWidthDefault = 220;
+let initialSidebarWidth: number =
+  initialSidebarWidthDefault;
 
-const initialWidthDefault = 220;
-let initialWidth: number = initialWidthDefault;
+const initialCodeEditorWidthDefault = 800;
+let initialCodeEditorWidth: number =
+  initialCodeEditorWidthDefault;
+
+// If no value is found in localStorage, we'll use the default.
+let needsInitialization = false;
 
 // If we're in the browser,
-if (typeof window !== 'undefined') {
+if (typeof window !== 'undefined' && enableLocalStorage) {
   //check localStorage for a previously stored width.
-  const initialWidthFromLocalStorage: string | null =
-    window.localStorage.getItem(localStoragePropertyName);
+  const sidebarWidthLocal: string | null =
+    window.localStorage.getItem(sidebarWidthProperty);
+
+  const codeEditorWidthLocal: string | null =
+    window.localStorage.getItem(codeEditorWidthProperty);
 
   // If there is a previously stored width,
-  if (initialWidthFromLocalStorage !== null) {
+  if (sidebarWidthLocal !== null) {
+    // use it as the initial width.
+    initialSidebarWidth = +sidebarWidthLocal;
+    needsInitialization = true;
+  }
+
+  if (codeEditorWidthLocal !== null) {
     // use it as the initial width.
-    initialWidth = +initialWidthFromLocalStorage;
+    initialCodeEditorWidth = +codeEditorWidthLocal;
+    needsInitialization = true;
   }
 } else {
   // If we're not in the browser, use the default initial width.
 }
 
-export const SplitPaneResizeContext = createContext<{
-  codeEditorWidth: number;
-  moveSplitPane: (a: number) => void;
-  isDragging: boolean;
-  setIsDragging: (a: boolean) => void;
-}>({
-  codeEditorWidth: initialWidth,
+const initialValue: SplitPaneResizeContextValue = {
+  codeEditorWidth: initialCodeEditorWidth,
+  sidebarWidth: initialSidebarWidth,
   moveSplitPane: () => {},
-  isDragging: false,
+  isDraggingRight: false,
+  isDraggingLeft: false,
   setIsDragging: () => {},
-});
+};
+
+export const SplitPaneResizeContext =
+  createContext<SplitPaneResizeContextValue>(initialValue);
+
+type SplitPaneState = {
+  // The width of the sidebar, in pixels.
+  sidebarWidth: number;
+  codeEditorWidth: number;
+  isDraggingLeft: boolean;
+  isDraggingRight: boolean;
+
+  // False on first render
+  isInitialized: boolean;
+};
+
+const initialState: SplitPaneState = {
+  // sidebarWidth: initialSidebarWidth,
+  // codeEditorWidth: initialCodeEditorWidth,
+
+  // These need to match between SSR and the first
+  // client-side render (hydration), to avoid
+  // React hydration errors like this one:
+  //  * Warning: Prop `style` did not match.
+  //  * Server: "left:210px;width:20px"
+  //  * Client: "left:218px;width:20px"
+
+  sidebarWidth: initialSidebarWidthDefault,
+  codeEditorWidth: initialCodeEditorWidthDefault,
+  isDraggingLeft: false,
+  isDraggingRight: false,
+
+  // Solution for hydration errors: we set the value from localStorage
+  // in a layoutEffect that happens after first render.
+  isInitialized: false,
+};
 
-const add = (a: number, b: number) => a + b;
+type SplitPaneAction =
+  | {
+      type: 'move';
+      side: Side;
+      movementX: number;
+    }
+  | {
+      type: 'setIsDragging';
+      side: Side;
+      isDragging: boolean;
+    }
+  | {
+      type: 'initialize';
+    };
+
+const splitPaneReducer = (
+  state: SplitPaneState,
+  action: SplitPaneAction,
+) => {
+  switch (action.type) {
+    case 'initialize':
+      return {
+        ...state,
+        sidebarWidth: initialSidebarWidth,
+        codeEditorWidth: initialCodeEditorWidth,
+        isInitialized: true,
+      };
+    case 'move':
+      return action.side === 'left'
+        ? {
+            ...state,
+            sidebarWidth:
+              state.sidebarWidth + action.movementX,
+          }
+        : {
+            ...state,
+            codeEditorWidth:
+              state.codeEditorWidth + action.movementX,
+          };
+    // Handle setIsDragging
+    case 'setIsDragging':
+      return action.side === 'left'
+        ? {
+            ...state,
+            isDraggingLeft: action.isDragging,
+          }
+        : {
+            ...state,
+            isDraggingRight: action.isDragging,
+          };
+    default:
+      return state;
+  }
+};
 
 export const SplitPaneResizeProvider = ({ children }) => {
-  const [codeEditorWidth, moveSplitPane] = useReducer(
-    add,
-    initialWidth,
+  const [state, dispatch] = useReducer(
+    splitPaneReducer,
+    initialState,
+  );
+
+  const setIsDragging = useCallback(
+    (isDragging: boolean, side: Side) => {
+      dispatch({ type: 'setIsDragging', isDragging, side });
+    },
+    [dispatch],
+  );
+
+  const moveSplitPane = useCallback(
+    (movementX: number, side: Side) => {
+      dispatch({ type: 'move', movementX, side });
+    },
+    [dispatch],
   );
-  const [isDragging, setIsDragging] = useState(false);
 
+  const {
+    sidebarWidth,
+    codeEditorWidth,
+    isDraggingLeft,
+    isDraggingRight,
+    isInitialized,
+  } = state;
+
+  // Logic around initializing from localStorage.
+  // Only run this on the client.
+  if (typeof window !== 'undefined') {
+    useLayoutEffect(() => {
+      if (needsInitialization && !isInitialized) {
+        dispatch({ type: 'initialize' });
+      }
+    }, [isInitialized]);
+  }
+
+  // Logic around storing the values in localStorage.
   useEffect(() => {
-    if (codeEditorWidth !== initialWidth) {
-      const timeout = setTimeout(() => {
+    if (sidebarWidth !== initialSidebarWidth) {
+      setTimeout(() => {
         window.localStorage.setItem(
-          localStoragePropertyName,
-          '' + codeEditorWidth,
+          sidebarWidthProperty,
+          '' + sidebarWidth,
         );
       }, localStorageWriteDebounceMS);
+    }
 
-      return () => {
-        clearTimeout(timeout);
-      };
+    if (codeEditorWidth !== initialCodeEditorWidth) {
+      setTimeout(() => {
+        window.localStorage.setItem(
+          codeEditorWidthProperty,
+          '' + codeEditorWidth,
+        );
+      }, localStorageWriteDebounceMS);
     }
-  }, [codeEditorWidth]);
+  }, [codeEditorWidth, sidebarWidth]);
+
+  const value: SplitPaneResizeContextValue = {
+    codeEditorWidth,
+    sidebarWidth,
+    moveSplitPane,
+    isDraggingLeft,
+    isDraggingRight,
+    setIsDragging,
+  };
 
   return (
-    <SplitPaneResizeContext.Provider
-      value={{
-        codeEditorWidth,
-        moveSplitPane,
-        isDragging,
-        setIsDragging,
-      }}
-    >
+    <SplitPaneResizeContext.Provider value={value}>
       {children}
     </SplitPaneResizeContext.Provider>
   );

package/src/client/TabList/index.tsx

@@ -20,34 +20,8 @@ export const TabList = ({
   setActiveFileId: (fileId: FileId) => void;
   openTab: (tabState: TabState) => void;
   closeTabs: (fileIds: FileId[]) => void;
-  createFile: () => void;
+  createFile: (fileName: string) => void;
 }) => {
-  // Close the active tab on alt+w
-  const handleKeyPress = useCallback(
-    (event: { altKey: boolean; key: string }) => {
-      if (event.altKey == true) {
-        if (event.key == 'w') {
-          closeTabs([activeFileId]);
-        }
-        if (event.key == 'n') {
-          createFile();
-        }
-      }
-    },
-    [createFile, closeTabs, activeFileId],
-  );
-
-  // Add the global keydown event listener
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyPress);
-    return () => {
-      document.removeEventListener(
-        'keydown',
-        handleKeyPress,
-      );
-    };
-  }, [handleKeyPress]);
-
   return (
     <div className="vz-tab-list">
       {files &&

package/src/client/{Resizer → VZResizer}/index.tsx

@@ -7,8 +7,12 @@ import {
   useRef,
 } from 'react';
 
-import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
+import {
+  Side,
+  SplitPaneResizeContext,
+} from '../SplitPaneResizeContext';
 import './styles.scss';
+import { VZCodeContext } from '../App/VZCodeContext';
 
 // This is the width of the resizer interaction surface.
 // On this surface, the cursor changes to a resize cursor.
@@ -22,40 +26,54 @@ const resizerInteractionSurfaceWidthWhileDragging = 200;
 // This is the part of the resizer that is visible to the user.
 const resizerThumbWidth = 4;
 
-export const Resizer = () => {
+export const VZResizer = ({ side }: { side: Side }) => {
   const {
+    sidebarWidth,
     codeEditorWidth,
     moveSplitPane,
-    isDragging,
+    isDraggingRight,
+    isDraggingLeft,
     setIsDragging,
   } = useContext(SplitPaneResizeContext);
+
+  // If there is no active file, don't render the resizer
+  // for the right side.
+  const { activeFileId } = useContext(VZCodeContext);
+  const shouldRenderResizer =
+    side === 'left' || activeFileId;
+
   const previousClientX = useRef<number>(0);
 
   const onMouseDown = useCallback(
     (event: React.MouseEvent) => {
       event.preventDefault();
       previousClientX.current = event.clientX;
-      setIsDragging(true);
+      setIsDragging(true, side);
       document.body.style.cursor = 'col-resize';
     },
-    [setIsDragging],
+    [setIsDragging, side],
   );
 
   const onMouseMove = useCallback(
     (event: MouseEvent) => {
       event.preventDefault();
-      const movementClientX =
+      const movementX =
         event.clientX - previousClientX.current;
       previousClientX.current = event.clientX;
-      moveSplitPane(movementClientX);
+      moveSplitPane(movementX, side);
     },
-    [moveSplitPane],
+    [moveSplitPane, side],
   );
 
   const onMouseUp = useCallback(() => {
-    setIsDragging(false);
+    setIsDragging(false, side);
     document.body.style.cursor = 'default';
-  }, [setIsDragging]);
+  }, [setIsDragging, side]);
+
+  // Is the resizer currently being dragged?
+  const isDragging =
+    (side === 'left' && isDraggingLeft) ||
+    (side === 'right' && isDraggingRight);
 
   useEffect(() => {
     if (isDragging) {
@@ -75,12 +93,18 @@ export const Resizer = () => {
     ? resizerInteractionSurfaceWidthWhileDragging
     : resizerInteractionSurfaceWidth;
 
-  return (
+  const left =
+    (side === 'left'
+      ? sidebarWidth
+      : sidebarWidth + codeEditorWidth) -
+    resizerWidth / 2;
+
+  return shouldRenderResizer ? (
     <div
       className="vz-resizer"
       onMouseDown={onMouseDown}
       style={{
-        left: codeEditorWidth - resizerWidth / 2,
+        left,
         width: resizerWidth,
       }}
     >
@@ -92,5 +116,5 @@ export const Resizer = () => {
         }}
       />
     </div>
-  );
+  ) : null;
 };

package/src/client/VZSettings.tsx

@@ -65,7 +65,7 @@ export const VZSettings = ({
       animation={false}
     >
       <Modal.Header closeButton>
-        <Modal.Title>Settings</Modal.Title>
+        <Modal.Title>Editor Settings</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         {enableUsernameField ? (