npm - vzcode - Versions diffs - 1.17.0 → 1.19.0 - Mend

vzcode 1.17.0 → 1.19.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 (11) hide show

package/dist/assets/index-DIcMeAET.js +181 -0
package/dist/index.html +1 -1
package/package.json +1 -1
package/src/client/App/useShareDB.ts +0 -2
package/src/client/CodeEditor/InteractiveWidgets/colorPicker.ts +57 -176
package/src/client/VZLeft.tsx +2 -1
package/src/client/VZSidebar/index.tsx +41 -27
package/src/client/featureFlags.ts +2 -0
package/src/server/livekit.js +1 -1
package/src/vite-env.d.ts +10 -0
package/dist/assets/index-BQgRA0SD.js +0 -181

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       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-BQgRA0SD.js"></script>
+    <script type="module" crossorigin src="/assets/index-DIcMeAET.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-zzK6rRiK.css">
   </head>
   <body>

package/package.json CHANGED Viewed

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

package/src/client/App/useShareDB.ts CHANGED Viewed

@@ -142,8 +142,6 @@ export const useShareDB = ({
   // False for "Saved"
   const pending = usePending(shareDBDoc);
-  console.log('pending ', pending);
   // A convenience function for mutating the ShareDB document
   // based submitting OT ops generated by diffing the JSON.
   const submitOperation =

package/src/client/CodeEditor/InteractiveWidgets/colorPicker.ts CHANGED Viewed

@@ -8,180 +8,61 @@ export const colorPickerRegex = /#[0-9A-Fa-f]{6}/g;
 // Works without quotes to support CSS.
 export const colorPicker = (
   onInteract?: () => void,
-):  InteractRule => {
-  // Create the color picker element when the page loads
-  const sel: HTMLInputElement = document.createElement('input');
-  sel.type = 'color';
-  sel.style.position = 'fixed';
-  sel.style.left = '-9999px'; // Initially off-screen
-  sel.style.top = '-9999px';
-  document.body.appendChild(sel);
-  // Create a close button element to hide the color picker
-  const closeButton: HTMLButtonElement = document.createElement('button');
-  closeButton.innerText = 'X';
-  closeButton.style.position = 'absolute';
-  closeButton.style.width = '20px';
-  closeButton.style.height = '20px';
-  closeButton.style.borderRadius = '50%';
-  closeButton.style.border = 'none';
-  closeButton.style.backgroundColor = '#ff4d4f';
-  closeButton.style.color = 'white';
-  closeButton.style.fontSize = '12px';
-  closeButton.style.display = 'none'; // Initially hidden
-  closeButton.style.cursor = 'pointer';
-  closeButton.style.top = '-10px'; // Adjust position relative to color picker
-  closeButton.style.right = '-10px';
-  sel.parentElement?.appendChild(closeButton); // Add button to the same container
-  // Function to hide the color picker and close button
-  const hideColorPicker = () => {
-    sel.style.left = '-9999px';
-    sel.style.top = '-9999px';
-    closeButton.style.display = 'none';
-  };
-  // Add event listener to the close button to hide color picker
-  closeButton.addEventListener('click', (event) => {
-    event.stopPropagation(); // Prevent click event from bubbling to document
-    hideColorPicker();
-  });
-  // Add event listener for clicks outside the color picker
-  document.addEventListener('click', (event: MouseEvent) => {
-    if (event.target !== sel && event.target !== closeButton) {
-      hideColorPicker();
-    }
-  });
-  // Function to set the text and color
-  const setText = (newText: string) => {
-    console.log('Applying color to the element:', newText);
-    // Assuming you're applying the color to a circle element with id 'colorCircle'
-    const colorCircle = document.getElementById('colorCircle');
-    if (colorCircle) {
-      colorCircle.style.backgroundColor = newText;
-      console.log(`Color applied to colorCircle: ${newText}`);
-    } else {
-      console.log('colorCircle element not found');
-    }
-    // If there is any other text element (like an input or div for displaying hex color), update it too.
-    const hexDisplay = document.getElementById('hexDisplay');
-    if (hexDisplay) {
-      hexDisplay.textContent = newText;
-      console.log(`Hex value applied to hexDisplay: ${newText}`);
-    } else {
-      console.log('hexDisplay element not found');
-    }
-  };
-  return {
-    regexp: colorPickerRegex,
-    cursor: 'pointer',
-    onClick(
-      text: string,
-      setText: (newText: string) => void,
-      event: MouseEvent
-    ) {
-      const startingColor: string = text;
-      // Set the initial value of the color picker
-      console.log('Initial color:', startingColor);
-      sel.value = startingColor.toLowerCase();
-      console.log('Color picker initial value set to:', sel.value);
-      // Position the color picker near the cursor
-      const cursorX = event.clientX;
-      const cursorY = event.clientY;
-      sel.style.left = cursorX + 'px';
-      sel.style.top = cursorY + 'px';
-      // Show and position the close button
-      closeButton.style.display = 'block';
-      closeButton.style.left = `${cursorX + sel.offsetWidth - 15}px`; // Adjust to place in corner
-      closeButton.style.top = `${cursorY - 15}px`;
-      // Update the color selection and setText on change
-      const updateHex = (e: Event) => {
-        const el: HTMLInputElement = e.target as HTMLInputElement;
-        console.log('Hex color value selected:', el.value);
-        if (el.value) {
-          setText(el.value.toUpperCase()); // Use uppercase for consistency
-        }
-        if (onInteract) {
-          console.log('onInteract called');
-          onInteract();
-        }
-        // Update color display directly (for example, changing the background color of an element)
-        const colorDisplay = document.getElementById('colorDisplay');
-        if (colorDisplay) {
-          colorDisplay.style.backgroundColor = el.value;
-          console.log(`colorDisplay updated to: ${el.value}`);
-        } else {
-          console.log('colorDisplay element not found');
-        }
-      };
-      // Add input event listener to handle color selection
-      sel.addEventListener('input', updateHex);
-      // Trigger click event on the color picker to display it
+): InteractRule => ({
+  regexp: colorPickerRegex,
+  cursor: 'pointer',
+  onClick(
+    text: string,
+    setText: (newText: string) => void,
+    event: MouseEvent,
+  ) {
+    const startingColor: string = text;
+    const sel: HTMLInputElement =
+      document.createElement('input');
+    sel.type = 'color';
+    sel.value = startingColor.toLowerCase();
+    // `valueIsUpper` maintains the style of the user's code.
+    // It keeps the case of a-f the same case as the original.
+    const valueIsUpper: boolean =
+      startingColor.toUpperCase() === startingColor;
+    const updateHex = (e: Event) => {
+      const el: HTMLInputElement =
+        e.target as HTMLInputElement;
+      if (el.value) {
+        setText(
+          valueIsUpper ? el.value.toUpperCase() : el.value,
+        );
+      }
+      if (onInteract) onInteract();
+    };
+    sel.addEventListener('input', updateHex);
+    // Position the color input at the mouse cursor
+    sel.style.position = 'absolute';
+    sel.style.left = `${event.clientX}px`;
+    sel.style.top = `${event.clientY}px`;
+    // Make it invisible
+    sel.style.opacity = '0';
+    sel.style.height = '0';
+    sel.style.width = '0';
+    sel.style.border = 'none';
+    sel.style.padding = '0';
+    sel.style.margin = '0';
+    document.body.appendChild(sel);
+    // Click the input after a delay, so that
+    // it gets the correct position
+    setTimeout(() => {
       sel.click();
-    },
-  };
-};
-// TODO get this working
-// rgb color picker
-// Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
-//TODO: create color picker for hsl colors
-// {
-//   regexp: /rgb\(.*\)/g,
-//   cursor: 'pointer',
-//   onClick: (text, setText, e) => {
-//     const res =
-//       /rgb\((?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)\)/.exec(
-//         text,
-//       );
-//     const r = Number(res?.groups?.r);
-//     const g = Number(res?.groups?.g);
-//     const b = Number(res?.groups?.b);
-//     //sel will open the color picker when sel.click is called.
-//     const sel = document.createElement('input');
-//     sel.type = 'color';
-//     if (!isNaN(r + g + b)) sel.value = rgb2Hex(r, g, b);
-//     const updateRGB = (e: Event) => {
-//       const el = e.target as HTMLInputElement;
-//       if (onInteract) onInteract();
-//       if (el.value) {
-//         const [r, g, b] = hex2RGB(el.value);
-//         setText(`rgb(${r}, ${g}, ${b})`);
-//       }
-//       sel.removeEventListener('change', updateRGB);
-//     };
-//     sel.addEventListener('change', updateRGB);
-//     sel.click();
-//   },
-// },
-// // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L108
-// const hex2RGB = (hex: string): [number, number, number] => {
-//   const v = parseInt(hex.substring(1), 16);
-//   return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
-// };
-// // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L117
-// const rgb2Hex = (r: number, g: number, b: number): string =>
-//   '#' + r.toString(16) + g.toString(16) + b.toString(16);
+    }, 10);
+    // Remove the input after interaction
+    sel.addEventListener('blur', () => {
+      document.body.removeChild(sel);
+    });
+  },
+});

package/src/client/VZLeft.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { enableLiveKit } from './featureFlags';
 import { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
 import { VZSettings } from './VZSettings';
 import { VZSidebar } from './VZSidebar';
@@ -21,7 +22,7 @@ export const VZLeft = ({ enableUsernameField = true }) => {
       />
       <CreateFileModal />
       <CreateDirModal />
-      <VoiceChatModal />
+      {enableLiveKit && <VoiceChatModal />}
     </div>
   );
 };

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

@@ -4,7 +4,7 @@ import {
   useEffect,
   useMemo,
   useState,
-  useRef
+  useRef,
 } from 'react';
 import {
   FileId,
@@ -34,6 +34,7 @@ import { Listing } from './Listing';
 import { Search } from './Search';
 import './styles.scss';
 import { useDragAndDrop } from './useDragAndDrop';
+import { enableLiveKit } from '../featureFlags';
 // TODO turn this UI back on when we are actually detecting
 // the connection status.
@@ -231,7 +232,12 @@ export const VZSidebar = ({
   // Handle 'saved' state based on 'pending' transition
   useEffect(() => {
     // Check if 'pending' transitioned from true to false
-    if (previousPendingRef.current && !pending && connected && !isConnecting) {
+    if (
+      previousPendingRef.current &&
+      !pending &&
+      connected &&
+      !isConnecting
+    ) {
       setSaved(true);
       const timer = setTimeout(() => {
         setSaved(false);
@@ -242,7 +248,6 @@ export const VZSidebar = ({
     previousPendingRef.current = pending;
   }, [pending, connected, isConnecting]);
   return (
     <div
       className="vz-sidebar"
@@ -408,25 +413,30 @@ export const VZSidebar = ({
             </i>
           </OverlayTrigger>
           {/* Start Voice Chat */}
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="voice-chat">
-                {voiceChatToolTipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="mic-icon"
-              className="icon-button icon-button-dark"
-              onClick={() => {
-                console.log('clicking', liveKitConnection);
-                setVoiceChatModalOpen(true);
-              }}
+          {enableLiveKit && (
+            <OverlayTrigger
+              placement="right"
+              overlay={
+                <Tooltip id="voice-chat">
+                  {voiceChatToolTipText}
+                </Tooltip>
+              }
             >
-              <MicSVG />
-            </i>
-          </OverlayTrigger>
+              <i
+                id="mic-icon"
+                className="icon-button icon-button-dark"
+                onClick={() => {
+                  console.log(
+                    'clicking',
+                    liveKitConnection,
+                  );
+                  setVoiceChatModalOpen(true);
+                }}
+              >
+                <MicSVG />
+              </i>
+            </OverlayTrigger>
+          )}
         </div>
         <div className="files" id="sidebar-view-container">
           {!isSearchOpen ? (
@@ -472,11 +482,15 @@ export const VZSidebar = ({
       </div>
       {enableConnectionStatus && (
         <div className="connection-status">
-          {isConnecting ? 'Connecting...' :
-            !connected ? 'Connection Lost' :
-              pending ? 'Saving...' :
-                saved ? 'Saved.' :
-                  'Connected'}
+          {isConnecting
+            ? 'Connecting...'
+            : !connected
+              ? 'Connection Lost'
+              : pending
+                ? 'Saving...'
+                : saved
+                  ? 'Saved.'
+                  : 'Connected'}
           <div className="connection">
             <div
               className={`connection-status-indicator ${
@@ -487,7 +501,7 @@ export const VZSidebar = ({
                     : pending
                       ? 'pending'
                       : 'connected'
-            }`}
+              }`}
             />
           </div>
         </div>

package/src/client/featureFlags.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export const enableLiveKit =
2	+ import.meta.env.VITE_ENABLE_LIVEKIT === 'true';

package/src/server/livekit.js CHANGED Viewed

@@ -7,7 +7,7 @@ export const createToken = async (roomName, username) => {
   // client joins
   // Identifier to be used for participant.
   // It's available as LocalParticipant.identity with livekit-client SDK
-  console.log(username);
+  // console.log(username);
   const participantName = `${username}`;
   const at = new AccessToken(

package/src/vite-env.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_ENABLE_LIVEKIT: string;
+  // Add other environment variables here as needed
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}