npm - vzcode - Versions diffs - 1.6.0 → 1.8.0 - Mend

vzcode 1.6.0 → 1.8.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 (17) hide show

package/dist/assets/{index-BwUWRAvf.js → index--bvX81xc.js} +44 -44
package/dist/assets/{index-DAYbg783.css → index-BKRpkJER.css} +1 -1
package/dist/assets/{index-B2OgpmfL.js → index-CU0jqXHm.js} +62 -62
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/client/CodeEditor/getOrCreateEditor.ts +6 -0
package/src/client/CodeEditor/index.tsx +19 -7
package/src/client/CodeEditor/json1PresenceDisplay.ts +6 -5
package/src/client/Icons/index.tsx +1 -0
package/src/client/TabList/style.scss +2 -2
package/src/client/VZCodeContext.tsx +8 -0
package/src/client/VZSidebar/index.tsx +32 -1
package/src/client/VZSidebar/styles.scss +5 -4
package/src/client/useActions.ts +7 -0
package/src/client/useTypeScript/worker/constants.ts +2 -1
package/src/client/vzReducer/index.ts +12 -1
package/src/client/vzReducer/toggleAutoFollowReducer.ts +12 -0

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-B2OgpmfL.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DAYbg783.css">
+    <script type="module" crossorigin src="/assets/index-CU0jqXHm.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BKRpkJER.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",

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

@@ -92,6 +92,7 @@ export const getOrCreateEditor = ({
   typeScriptWorker,
   customInteractRules,
   allowGlobals,
+  enableAutoFollowRef,
 }: {
   fileId: FileId;
@@ -121,6 +122,10 @@ export const getOrCreateEditor = ({
   typeScriptWorker: Worker;
   customInteractRules?: Array<InteractRule>;
   allowGlobals: boolean;
+  // Ref to a boolean that determines whether to
+  // enable auto-following the cursors of remote users.
+  enableAutoFollowRef: React.MutableRefObject<boolean>;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -173,6 +178,7 @@ export const getOrCreateEditor = ({
         json1PresenceDisplay({
           path: textPath,
           docPresence,
+          enableAutoFollowRef,
         }),
       );
     }

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

@@ -4,6 +4,7 @@ import {
   useCallback,
   useMemo,
   useContext,
+  useEffect,
 } from 'react';
 import { Username } from '../../types';
 import { EditorCacheValue } from '../useEditorCache';
@@ -36,10 +37,9 @@ export const CodeEditor = ({
     typeScriptWorker,
     theme,
     codeEditorRef,
+    enableAutoFollow,
   } = useContext(VZCodeContext);
-  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.
   const interactTimeoutRef = useRef(null);
@@ -71,6 +71,13 @@ export const CodeEditor = ({
   const usernameRef = useRef<Username>(username);
   usernameRef.current = username;
+  // Track enableAutoFollow on a ref, so that we can use it in the
+  // CodeMirror extension.
+  const enableAutoFollowRef = useRef(enableAutoFollow);
+  useEffect(() => {
+    enableAutoFollowRef.current = enableAutoFollow;
+  }, [enableAutoFollow]);
   // Get the editor corresponding to the active file.
   // Looks in `editorCache` first, and if not found, creates a new editor.
   const editorCacheValue: EditorCacheValue = useMemo(
@@ -89,6 +96,7 @@ export const CodeEditor = ({
         typeScriptWorker,
         customInteractRules,
         allowGlobals,
+        enableAutoFollowRef,
       }),
     [
       activeFileId,
@@ -109,11 +117,13 @@ export const CodeEditor = ({
   // and the editor corresponding to the new file is added to the DOM.
   useLayoutEffect(() => {
     // Guard against cases where page is still loading.
-    if (!ref.current) return;
+    if (!codeEditorRef.current) return;
     if (!content) return;
     // Add the editor and apply the prior scroll position to the DOM.
-    ref.current.appendChild(editorCacheValue.editor.dom);
+    codeEditorRef.current.appendChild(
+      editorCacheValue.editor.dom,
+    );
     editorCacheValue.editor.scrollDOM.scrollTo({
       top: editorCacheValue.scrollPosition ?? 0,
     });
@@ -123,7 +133,9 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       editorCacheValue.scrollPosition =
         editorCacheValue.editor.scrollDOM.scrollTop;
-      ref.current.removeChild(editorCacheValue.editor.dom);
+      codeEditorRef.current.removeChild(
+        editorCacheValue.editor.dom,
+      );
     };
   }, [shareDBDoc, editorCacheValue]);
@@ -142,8 +154,8 @@ export const CodeEditor = ({
   return (
     <div
       className="vz-code-editor"
-      ref={ref}
+      ref={codeEditorRef}
       tabIndex={-1}
-    ></div>
+    />
   );
 };

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

@@ -10,10 +10,10 @@ import { Username } from '../../types';
 const debug = false;
-// TODO: Make this a setting in the UI.
-// See https://github.com/vizhub-core/vzcode/issues/739
-const enableAutoFollow = false;
+// export let enableAutoFollow = false;
+// export const toggleAutoFollowButton = () => {
+//   enableAutoFollow = !enableAutoFollow;
+// };
 // Deals with receiving the broadcasted presence cursor locations
 // from other clients and displaying them.
 //
@@ -25,6 +25,7 @@ const enableAutoFollow = false;
 export const json1PresenceDisplay = ({
   path,
   docPresence,
+  enableAutoFollowRef,
 }) => [
   ViewPlugin.fromClass(
     class {
@@ -146,7 +147,7 @@ export const json1PresenceDisplay = ({
           // Auto-follow all users when their presence is broadcast
           // by scrolling them into view.
-          if (enableAutoFollow) {
+          if (enableAutoFollowRef.current) {
             this.scrollToCursor(view);
           }
         });

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

@@ -10,6 +10,7 @@ export { FileSVG } from './FileSVG';
 export { DirectoryArrowSVG } from './DirectoryArrowSVG';
 export { PlaySVG } from './PlaySVG';
 export { QuestionMarkSVG } from './QuestionMarkSVG';
+export { PinSVG } from './PinSVG';
 export { FolderSVG } from './FolderSVG';
 export { SearchSVG } from './SearchSVG';
 export { SearchFileSVG } from './SearchFileSVG';

package/src/client/TabList/style.scss CHANGED Viewed

@@ -11,8 +11,8 @@
     font-weight: 500;
     align-items: center;
     display: flex;
-    gap: 8px;
-    padding: 6px 6px 6px 16px;
+    gap: 6px;
+    padding: 4px 4px 4px 14px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     margin-top: 6px;

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -149,6 +149,9 @@ export type VZCodeContextValue = {
   hoveredItemId: ItemId | null;
   setHoveredItemId: (itemId: ItemId | null) => void;
+  enableAutoFollow: boolean;
+  toggleAutoFollow: () => void;
 };
 export const VZCodeProvider = ({
@@ -236,6 +239,7 @@ export const VZCodeProvider = ({
     isDocOpen,
     editorWantsFocus,
     username,
+    enableAutoFollow,
   } = state;
   // Functions for dispatching actions to the reducer.
@@ -256,6 +260,7 @@ export const VZCodeProvider = ({
     closeDoc,
     editorNoLongerWantsFocus,
     setUsername,
+    toggleAutoFollow,
   } = useActions(dispatch);
   // Sync tab state to the URL.
@@ -428,6 +433,9 @@ export const VZCodeProvider = ({
     hoveredItemId,
     setHoveredItemId,
+    enableAutoFollow,
+    toggleAutoFollow,
   };
   return (

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

@@ -1,4 +1,9 @@
-import { useCallback, useContext, useMemo } from 'react';
+import {
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import {
   FileId,
   FileTree,
@@ -17,6 +22,7 @@ import {
   NewSVG,
   FileSVG,
   QuestionMarkSVG,
+  PinSVG,
 } from '../Icons';
 import { VZCodeContext } from '../VZCodeContext';
 import { Listing } from './Listing';
@@ -56,6 +62,8 @@ export const VZSidebar = ({
     handleOpenCreateDirModal,
     connected,
     sidebarRef,
+    enableAutoFollow,
+    toggleAutoFollow,
   } = useContext(VZCodeContext);
   const fileTree = useMemo(
@@ -233,6 +241,29 @@ export const VZSidebar = ({
               <FileSVG />
             </i>
           </OverlayTrigger>
+          {/*Toggle Follow*/}
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="toggle-auto-follow">
+                {enableAutoFollow
+                  ? 'Disable Auto Follow'
+                  : 'Enable Auto Follow'}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={toggleAutoFollow}
+              className={`icon-button icon-button-dark${
+                enableAutoFollow
+                  ? ' vh-color-success-01'
+                  : ''
+              }`}
+            >
+              <PinSVG />
+            </i>
+          </OverlayTrigger>
         </div>
         <div className="files">

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

@@ -18,6 +18,7 @@
   }
   .files {
+    margin-top: 6px;
     display: flex;
     flex-direction: row;
     justify-content: start;
@@ -35,9 +36,9 @@
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
-    margin: 0 8px;
-    padding: 0 4px 0 6px;
-    border-radius: 4px;
+    margin: 0 6px;
+    padding: 0 4px 0 8px;
+    border-radius: 8px;
     font-family: var(--vzcode-font-family);
     font-weight: 500;
   }
@@ -59,7 +60,7 @@
     gap: 6px;
     padding: 6px;
-    * {
+    a {
       color: inherit;
     }
   }

package/src/client/useActions.ts CHANGED Viewed

@@ -158,6 +158,12 @@ export const useActions = (
     [dispatch],
   );
+  const toggleAutoFollow = useCallback(() => {
+    dispatch({
+      type: 'toggle_auto_follow',
+    });
+  }, [dispatch]);
   return {
     setActiveFileId,
     setActiveFileLeft,
@@ -175,5 +181,6 @@ export const useActions = (
     closeDoc,
     editorNoLongerWantsFocus,
     setUsername,
+    toggleAutoFollow,
   };
 };

package/src/client/useTypeScript/worker/constants.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import ts from 'typescript';
 export const compilerOptions: ts.CompilerOptions = {
-  lib: ['dom', 'esnext'],
+  target: ts.ScriptTarget.ES2022,
+  lib: ['dom', 'es2022'],
   // Disable warnings around "Any type".
   noImplicitAny: false,

package/src/client/vzReducer/index.ts CHANGED Viewed

@@ -25,6 +25,7 @@ import {
   setSearchResultsReducer,
   setSearchFileVisibilityReducer,
 } from './searchReducer';
+import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 export { createInitialState } from './createInitialState';
 // The shape of the state managed by the reducer.
@@ -55,6 +56,11 @@ export type VZState = {
   // The username of the current user.
   username: Username;
+  // True if "auto-follow" is enabled.
+  // This is a feature that automatically scrolls the editor to the
+  // currently active remote user's cursor position.
+  enableAutoFollow: boolean;
 };
 // The shape of the actions that can be dispatched to the reducer.
@@ -121,7 +127,11 @@ export type VZAction =
   // `set_username`
   //  * Sets the username.
-  | { type: 'set_username'; username: Username };
+  | { type: 'set_username'; username: Username }
+  // `toggle_auto_follow
+  //  * Toggles the auto-follow feature.
+  | { type: 'toggle_auto_follow' };
 // Representation of an open tab.
 export type TabState = {
@@ -157,6 +167,7 @@ const reducers = [
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,
   setUsernameReducer,
+  toggleAutoFollowReducer,
 ];
 export const vzReducer = (

package/src/client/vzReducer/toggleAutoFollowReducer.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { VZAction, VZState } from '.';
+export const toggleAutoFollowReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'toggle_auto_follow'
+    ? {
+        ...state,
+        enableAutoFollow: !state.enableAutoFollow,
+      }
+    : state;