npm - vzcode - Versions diffs - 1.2.0 → 1.4.0 - Mend

vzcode 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/assets/{index-BmJyUPq5.js → index-Bx5B6Xgl.js} +45 -45
package/dist/assets/{index-CWMOj-be.css → index-ClPo_hzs.css} +1 -1
package/dist/assets/index-wJsFLYuD.js +156 -0
package/dist/assets/{worker-DtIkBAuN.js → worker-DqNV0IYq.js} +206 -197
package/dist/index.html +2 -2
package/package.json +34 -22
package/src/client/CodeEditor/getOrCreateEditor.ts +4 -1
package/src/client/CodeEditor/index.tsx +9 -2
package/src/client/CodeEditor/json1PresenceDisplay.ts +33 -0
package/src/client/CodeEditor/rainbowBrackets.ts +110 -0
package/src/client/VZCodeContext.tsx +14 -0
package/src/client/VZSidebar/index.tsx +2 -1
package/src/client/VZSidebar/styles.scss +1 -0
package/src/client/themes/themes.ts +19 -1
package/src/client/useKeyboardShortcuts.ts +297 -2
package/src/client/useTypeScript/worker/constants.ts +14 -0
package/src/client/useTypeScript/worker/index.ts +1 -12
package/src/server/index.js +5 -2
package/dist/assets/index-Blj_0vZF.js +0 -155

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-Blj_0vZF.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CWMOj-be.css">
+    <script type="module" crossorigin src="/assets/index-wJsFLYuD.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-ClPo_hzs.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -14,7 +14,7 @@
     "test-interactive": "cd test/sampleDirectories/kitchenSink && node ../../../src/server/index.js",
     "prettier": "prettier {*.*,**/*.*} --write",
     "tsc": "tsc --noEmit",
-    "dev": "concurrently \"npm run test-interactive\" \"vite\"",
+    "dev": "EDITOR_PORT=5173 concurrently \"npm run test-interactive\" \"vite\"",
     "build": "vite build",
     "build-release": "vite build --mode release",
     "preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
@@ -79,6 +79,18 @@
     {
       "name": "Nghia Minh Huynh",
       "url": "https://github.com/NghiaMinhHuynh"
+    },
+    {
+      "name": "Michael Halpern",
+      "url": "https://github.com/michaelhelper"
+    },
+    {
+      "name": "Pratheet Joshi",
+      "url": "https://github.com/DaCatDude"
+    },
+    {
+      "name": "Philip Park",
+      "url": "https://github.com/philippark"
     }
   ],
   "license": "MIT",
@@ -95,23 +107,23 @@
     "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.27.0",
+    "@codemirror/view": "^6.28.1",
     "@lezer/highlight": "^1.2.0",
     "@replit/codemirror-indentation-markers": "^6.5.2",
     "@replit/codemirror-interact": "^6.3.1",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
-    "@typescript/vfs": "^1.5.2",
-    "@uiw/codemirror-theme-abcdef": "^4.22.1",
-    "@uiw/codemirror-theme-dracula": "^4.22.1",
-    "@uiw/codemirror-theme-eclipse": "^4.22.1",
-    "@uiw/codemirror-theme-github": "^4.22.1",
-    "@uiw/codemirror-theme-material": "^4.22.1",
-    "@uiw/codemirror-theme-nord": "^4.22.1",
-    "@uiw/codemirror-theme-okaidia": "^4.22.1",
-    "@uiw/codemirror-theme-xcode": "^4.22.1",
-    "@uiw/codemirror-themes": "^4.22.1",
+    "@typescript/vfs": "^1.5.3",
+    "@uiw/codemirror-theme-abcdef": "^4.22.2",
+    "@uiw/codemirror-theme-dracula": "^4.22.2",
+    "@uiw/codemirror-theme-eclipse": "^4.22.2",
+    "@uiw/codemirror-theme-github": "^4.22.2",
+    "@uiw/codemirror-theme-material": "^4.22.2",
+    "@uiw/codemirror-theme-nord": "^4.22.2",
+    "@uiw/codemirror-theme-okaidia": "^4.22.2",
+    "@uiw/codemirror-theme-xcode": "^4.22.2",
+    "@uiw/codemirror-themes": "^4.22.2",
     "body-parser": "^1.20.2",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.4.0",
@@ -124,13 +136,13 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.48.2",
-    "prettier-plugin-svelte": "^3.2.3",
+    "openai": "^4.51.0",
+    "prettier-plugin-svelte": "^3.2.4",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
-    "sharedb": "^5.0.1",
+    "sharedb": "^5.0.2",
     "sharedb-client-browser": "^5.0.1",
     "vizhub-ui": "^3.23.0",
     "ws": "^8.17.0"
@@ -138,16 +150,16 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "concurrently": "^8.2.2",
-    "prettier": "^3.3.1",
-    "sass": "^1.77.4",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.5",
     "typescript": "^5.4.5",
-    "vite": "^5.2.12",
+    "vite": "^5.3.1",
     "vitest": "^1.6.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-win32-x64-msvc": "^4.18.0",
-    "@rollup/rollup-darwin-arm64": "^4.18.0"
+    "@rollup/rollup-darwin-arm64": "^4.18.0",
+    "@rollup/rollup-win32-x64-msvc": "^4.18.0"
   }
 }

package/src/client/CodeEditor/getOrCreateEditor.ts CHANGED Viewed

@@ -39,6 +39,7 @@ import { typeScriptLinter } from './typeScriptLinter';
 import { keymap } from '@codemirror/view';
 import { basicSetup } from './basicSetup';
 import { InteractRule } from '@replit/codemirror-interact';
+import rainbowBrackets from '../CodeEditor/rainbowBrackets';
 // Feature flag to enable TypeScript completions & TypeScript Linter.
 const enableTypeScriptCompletions = true;
@@ -166,7 +167,7 @@ export const getOrCreateEditor = ({
       );
     }
-    // Deals with receiving the broadcas from other clients and displaying them.
+    // Deals with receiving the broadcast from other clients and displaying them.
     if (docPresence) {
       extensions.push(
         json1PresenceDisplay({
@@ -328,6 +329,8 @@ export const getOrCreateEditor = ({
       }),
     ),
   );
+  // adds rainbow brackets
+  extensions.push(rainbowBrackets());
   const editor = new EditorView({
     state: EditorState.create({

package/src/client/CodeEditor/index.tsx CHANGED Viewed

@@ -35,9 +35,10 @@ export const CodeEditor = ({
     editorNoLongerWantsFocus,
     typeScriptWorker,
     theme,
+    codeEditorRef,
   } = useContext(VZCodeContext);
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = codeEditorRef;
   // Set `doc.data.isInteracting` to `true` when the user is interacting
   // via interactive code widgets (e.g. Alt+drag), and `false` when they are not.
@@ -138,5 +139,11 @@ export const CodeEditor = ({
     editorNoLongerWantsFocus,
   ]);
-  return <div className="vz-code-editor" ref={ref}></div>;
+  return (
+    <div
+      className="vz-code-editor"
+      ref={ref}
+      tabIndex={-1}
+    ></div>
+  );
 };

package/src/client/CodeEditor/json1PresenceDisplay.ts CHANGED Viewed

@@ -27,6 +27,9 @@ export const json1PresenceDisplay = ({
       // See https://codemirror.net/6/docs/ref/#view.Decoration
       decorations: RangeSet<Decoration>;
+      //Added variable for cursor position
+      cursorPosition = {};
       constructor(view: EditorView) {
         // Initialize decorations to empty array so CodeMirror doesn't crash.
         this.decorations = RangeSet.of([]);
@@ -36,8 +39,18 @@ export const json1PresenceDisplay = ({
         //  * Values are presence objects as defined by ot-json1-presence
         const presenceState = {};
+        // Add the scroll event listener
+        //This runs for the arrow key scrolling, it should result in the users scrolling to eachother's location.
+        view.dom.addEventListener('scroll', () => {
+          this.scrollToCursor(view);
+        });
         // Receive remote presence changes.
         docPresence.on('receive', (id, presence) => {
+          if (debug)
+            console.log(
+              `Received presence for id ${id}`,
+              presence,
+            ); // Debug statement
           // If presence === null, the user has disconnected / exited
           // We also check if the presence is for the current file or not.
           if (presence && pathMatches(path, presence)) {
@@ -97,6 +110,13 @@ export const json1PresenceDisplay = ({
                 }),
               });
             }
+            if (view.state.doc.length >= from) {
+              // Ensure position is valid
+              this.cursorPosition[id] = from; // Store the cursor position, important to run if we cant get the regular scroll to work
+              // console.log(`Stored cursor position for id ${id}: ${from}`); // Debug statement
+            } else {
+              // console.warn(`Invalid cursor position for id ${id}: ${from}`); // Debug statement
+            }
           }
           this.decorations = Decoration.set(
@@ -116,8 +136,21 @@ export const json1PresenceDisplay = ({
               annotations: [presenceAnnotation.of(true)],
             });
           }, 0);
+          //call to scroll to the cursor of the other user
+          this.scrollToCursor(view);
         });
       }
+      // Method to scroll the view to keep the cursor in view
+      scrollToCursor(view) {
+        for (const id in this.cursorPosition) {
+          //getting the cursor position of the other cursor
+          const cursorPos = this.cursorPosition[id];
+          view.dispatch({
+            //if the other person's cursor has jumped off screen, we will follow it by scrolling there directly.
+            effects: EditorView.scrollIntoView(cursorPos),
+          });
+        }
+      }
     },
     {
       decorations: (v) => v.decorations,

package/src/client/CodeEditor/rainbowBrackets.ts ADDED Viewed

@@ -0,0 +1,110 @@
+import {
+  EditorView,
+  Decoration,
+  ViewPlugin,
+} from '@codemirror/view';
+function generateColors() {
+  return ['red', 'orange', 'yellow', 'green'];
+}
+const rainbowBracketsPlugin = ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = this.getBracketDecorations(view);
+    }
+    update(update) {
+      if (
+        update.docChanged ||
+        update.selectionSet ||
+        update.viewportChanged
+      ) {
+        this.decorations = this.getBracketDecorations(
+          update.view,
+        );
+      }
+    }
+    getBracketDecorations(view) {
+      const { doc } = view.state;
+      const decorations = [];
+      const stack = [];
+      const colors = generateColors();
+      for (let pos = 0; pos < doc.length; pos += 1) {
+        const char = doc.sliceString(pos, pos + 1);
+        if (char === '(' || char === '[' || char === '{') {
+          stack.push({ type: char, from: pos });
+        } else if (
+          char === ')' ||
+          char === ']' ||
+          char === '}'
+        ) {
+          const open = stack.pop();
+          if (
+            open &&
+            open.type === this.getMatchingBracket(char)
+          ) {
+            const color =
+              colors[stack.length % colors.length];
+            decorations.push(
+              Decoration.mark({
+                class: `rainbow-bracket-${color}`,
+              }).range(open.from, open.from + 1),
+              Decoration.mark({
+                class: `rainbow-bracket-${color}`,
+              }).range(pos, pos + 1),
+            );
+          }
+        }
+      }
+      decorations.sort(
+        (a, b) =>
+          a.from - b.from || a.startSide - b.startSide,
+      );
+      return Decoration.set(decorations);
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getMatchingBracket(closingBracket) {
+      switch (closingBracket) {
+        case ')':
+          return '(';
+        case ']':
+          return '[';
+        case '}':
+          return '{';
+        default:
+          return null;
+      }
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+export default function rainbowBrackets() {
+  return [
+    rainbowBracketsPlugin,
+    EditorView.baseTheme({
+      '.rainbow-bracket-red': { color: 'white' },
+      '.rainbow-bracket-red > span': { color: 'white' },
+      '.rainbow-bracket-orange': { color: '#FFFFB2' },
+      '.rainbow-bracket-orange > span': {
+        color: '#FFFFB2',
+      },
+      '.rainbow-bracket-yellow': { color: '#FFB2DA' },
+      '.rainbow-bracket-yellow > span': {
+        color: '#FFB2DA',
+      },
+      '.rainbow-bracket-green': { color: '#B2FFB2' },
+      '.rainbow-bracket-green > span': { color: '#B2FFB2' },
+    }),
+  ];
+}

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import {
   useCallback,
   useReducer,
   useState,
+  useRef,
 } from 'react';
 import {
   FileId,
@@ -126,6 +127,10 @@ export type VZCodeContextValue = {
   >;
   runCodeRef: React.MutableRefObject<null | (() => void)>;
+  sidebarRef: React.RefObject<HTMLDivElement>;
+  codeEditorRef: React.RefObject<HTMLDivElement>;
   connected: boolean;
   hoveredItemId: ItemId | null;
@@ -174,6 +179,10 @@ export const VZCodeProvider = ({
   const runCodeRef = useRunCode(submitOperation);
+  const sidebarRef = useRef(null);
+  const codeEditorRef = useRef(null);
   // The error message shows either:
   // * `prettierError` - errors from Prettier, client-side only
   // * `codeError` - errors from an external source, such as
@@ -316,6 +325,9 @@ export const VZCodeProvider = ({
     setActiveFileRight,
     runPrettierRef,
     runCodeRef,
+    sidebarRef,
+    editorCache,
+    codeEditorRef,
   });
   // Track the currently hovered file id.
@@ -382,6 +394,8 @@ export const VZCodeProvider = ({
     handleCreateDirClick,
     runPrettierRef,
     runCodeRef,
+    sidebarRef,
+    codeEditorRef,
     connected,

package/src/client/VZSidebar/index.tsx CHANGED Viewed

@@ -46,6 +46,7 @@ export const VZSidebar = ({
     handleOpenCreateFileModal,
     handleOpenCreateDirModal,
     connected,
+    sidebarRef,
   } = useContext(VZCodeContext);
   const fileTree = useMemo(
@@ -102,7 +103,7 @@ export const VZSidebar = ({
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="files">
+      <div className="files" ref={sidebarRef} tabIndex={-1}>
         <div className="full-box">
           <div className="sidebar-section-hint">Files</div>
           <div className="sidebar-section-buttons">

package/src/client/VZSidebar/styles.scss CHANGED Viewed

@@ -20,6 +20,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+    outline: none;
   }
   .file-or-directory {

package/src/client/themes/themes.ts CHANGED Viewed

@@ -26,7 +26,25 @@ export type ThemeOption = {
   value: any;
   label: ThemeLabel;
 };
+// add light theme brackets to eclipse theme
+// const modifiedEclipse = {
+//   ...eclipse,
+//   '.rainbow-bracket-red > span': {
+//     color: 'white',
+//   },
+//   '.rainbow-bracket-orange > span': {
+//     //yellow
+//     color: '#FFFFB2',
+//   },
+//   '.rainbow-bracket-yellow > span': {
+//     // orange
+//     color: '#FFB2DA',
+//   },
+//   '.rainbow-bracket-green > span': {
+//     // green
+//     color: '#B2FFB2',
+//   }
+// };
 export const themes: Array<ThemeOption> = [
   { value: abcdef, label: 'abcdef' },
   { value: dracula, label: 'dracula' },