vzcode 0.25.0 → 0.27.0

package/src/client/CodeEditor/index.tsx

@@ -1,7 +1,13 @@
-import { useRef, useLayoutEffect, useContext } from 'react';
+import {
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+} from 'react';
 import {
   FileId,
   ShareDBDoc,
+  Username,
   VZCodeContent,
 } from '../../types';
 import { ThemeLabel, defaultTheme } from '../themes';
@@ -11,20 +17,25 @@ import {
 } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import './style.scss';
-// import { usePrettier } from '../usePrettier';
 
 export const CodeEditor = ({
   activeFileId,
   shareDBDoc,
+  submitOperation,
   localPresence,
   docPresence,
   theme = defaultTheme,
   filesPath = ['files'],
-  onInteract,
   editorCache,
+  editorWantsFocus,
+  editorNoLongerWantsFocus,
+  username,
 }: {
   activeFileId: FileId;
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
+  submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void;
   localPresence?: any;
   docPresence?: any;
   theme?: ThemeLabel;
@@ -32,22 +43,51 @@ export const CodeEditor = ({
   // The path of the files object in the ShareDB document.
   // Defaults to `files` if not provided.
   filesPath?: string[];
-  onInteract?: () => void;
   editorCache: EditorCache;
+
+  // Whether the editor should be focused.
+  editorWantsFocus: boolean;
+
+  // Signals that the editor no longer wants focus.
+  editorNoLongerWantsFocus: () => void;
+  username: Username;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
-  // Every time the active file switches from one file to another,
-  // the editor corresponding to the old file is removed from the DOM,
-  // 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 (!shareDBDoc) return;
+  // 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);
+
+  const onInteract = useCallback(() => {
+    // Set `isInteracting: true` if not already set.
+    if (!interactTimeoutRef.current) {
+      submitOperation((document) => ({
+        ...document,
+        isInteracting: true,
+      }));
+    } else {
+      clearTimeout(interactTimeoutRef.current);
+    }
+
+    // Set `isInteracting: false` after a delay.
+    interactTimeoutRef.current = setTimeout(() => {
+      interactTimeoutRef.current = null;
+      submitOperation((document) => ({
+        ...document,
+        isInteracting: false,
+      }));
+    }, 800);
+  }, [submitOperation]);
 
-    // Get the editor corresponding to the active file.
-    // Looks in `editorCache` first, and if not found, creates a new editor.
-    const editorCacheValue: EditorCacheValue =
+  // Track username on a ref, so that we can use it in the
+  // presence object's `username` property.
+  const usernameRef = useRef<Username>(username);
+  usernameRef.current = username;
+
+  // Get the editor corresponding to the active file.
+  // Looks in `editorCache` first, and if not found, creates a new editor.
+  const editorCacheValue: EditorCacheValue = useMemo(
+    () =>
       getOrCreateEditor({
         fileId: activeFileId,
         shareDBDoc,
@@ -57,7 +97,28 @@ export const CodeEditor = ({
         theme,
         onInteract,
         editorCache,
-      });
+        usernameRef,
+      }),
+    [
+      activeFileId,
+      shareDBDoc,
+      filesPath,
+      localPresence,
+      docPresence,
+      theme,
+      onInteract,
+      editorCache,
+      usernameRef,
+    ],
+  );
+
+  // Every time the active file switches from one file to another,
+  // the editor corresponding to the old file is removed from the DOM,
+  // 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 (!shareDBDoc) return;
 
     // Add the editor to the DOM.
     ref.current.appendChild(editorCacheValue.editor.dom);
@@ -67,7 +128,24 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       ref.current.removeChild(editorCacheValue.editor.dom);
     };
-  }, [shareDBDoc, activeFileId]);
+  }, [shareDBDoc, editorCacheValue]);
+
+  // useEffect(() => {
+  //   if (editorWantsFocus) {
+  //     editorCacheValue.editor.focus();
+  //   }
+
+  // Focus the editor
+  useLayoutEffect(() => {
+    if (editorWantsFocus) {
+      editorCacheValue.editor.focus();
+      editorNoLongerWantsFocus();
+    }
+  }, [
+    editorWantsFocus,
+    editorCacheValue,
+    editorNoLongerWantsFocus,
+  ]);
 
   return <div className="vz-code-editor" ref={ref}></div>;
 };

package/src/client/CodeEditor/{json1PresenceBroadcast.js → json1PresenceBroadcast.ts}

@@ -1,15 +1,17 @@
+import { ViewUpdate } from '@codemirror/view';
 import { EditorView } from 'codemirror';
-import { username } from '../Settings.tsx';
 
 // Deals with broadcasting changes in cursor location and selection.
 export const json1PresenceBroadcast = ({
   path,
   localPresence,
+  usernameRef,
 }) =>
   // See https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/10
-  EditorView.updateListener.of((viewUpdate) => {
+  EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
     // If this update modified the cursor / selection,
     // we broadcast the selection update via ShareDB presence.
+
     if (viewUpdate.selectionSet) {
       // Isolate the single selection to use for presence.
       // Unfortunately JSON1 with presence does not yet
@@ -23,7 +25,11 @@ export const json1PresenceBroadcast = ({
       const presence = {
         start: [...path, from],
         end: [...path, to],
-        username: username,
+
+        // We use a ref here so that the presence always broadcasts
+        // the latest username, in the case that it has been changed
+        // in the Settings mid-session.
+        username: usernameRef.current,
       };
 
       // Broadcast presence to remote clients!

package/src/client/CodeEditor/{json1PresenceDisplay.js → json1PresenceDisplay.ts}

@@ -20,7 +20,12 @@ export const json1PresenceDisplay = ({
 }) => [
   ViewPlugin.fromClass(
     class {
-      constructor(view) {
+      // The decorations to display.
+      // This is a RangeSet of Decoration objects.
+      // See https://codemirror.net/6/docs/ref/#view.Decoration
+      decorations: RangeSet<Decoration>;
+
+      constructor(view: EditorView) {
         // Initialize decorations to empty array so CodeMirror doesn't crash.
         this.decorations = RangeSet.of([]);
 
@@ -32,10 +37,6 @@ export const json1PresenceDisplay = ({
         // Receive remote presence changes.
         docPresence.on('receive', (id, presence) => {
           // If presence === null, the user has disconnected / exited
-          // notification(presence);
-          // console.log('docPresence in presenceDisplay:',docPresence);
-          // console.log('presence in presenceDisplay:', presence);
-
           // We also check if the presence is for the current file or not.
           if (presence && pathMatches(path, presence)) {
             presenceState[id] = presence;
@@ -102,47 +103,6 @@ export const json1PresenceDisplay = ({
   presenceTheme,
 ];
 
-// const notification = (presence) => {
-//   const notif = document.createElement('div');
-//   notif.className = 'notification-presence';
-//   if (presence === null){
-//     notif.textContent = 'User asdfgasdfgasdfg left the collaboration session.';
-//     notif.style.display = 'block';
-//   }
-//   // The following causes the popup to show every time the remote cursor moves
-//   // to a different location on the file and not when the user first joins
-//   // else {
-//   //   notif.textContent = presence + 'joined the collaboration session.';
-//   //   notif.style.display = 'block';
-//   // }
-//   document.body.appendChild(notif);
-
-//   const notifStyle = document.createElement('style');
-//   notifStyle.innerText = `
-//     .notification-presence {
-//       position: fixed;
-//       display: none;
-//       bottom: 20px;
-//       right: 20px;
-//       max-width: 300px;
-//       overflow-x: hidden;
-//       white-space: nowrap;
-//       background-color: rgb(54, 65, 89);
-//       color: rgb(154, 160, 172);
-//       padding: 15px;
-//     }
-//     .notification-presence:hover {
-//       overflow-x: auto;
-//     }`;
-//   document.head.appendChild(notifStyle);
-
-//   setTimeout(() => {
-//     notif.style.display = 'none';
-//   }, 10000);
-
-//   return notif;
-// };
-
 const presenceAnnotation = Annotation.define();
 
 // Checks that the path of this file
@@ -161,12 +121,13 @@ const pathMatches = (path, presence) => {
 
 // Displays a single remote presence cursor.
 class PresenceWidget extends WidgetType {
-  constructor(id) {
+  id: string;
+  constructor(id: string) {
     super();
     this.id = id;
   }
 
-  eq(other) {
+  eq(other: PresenceWidget) {
     return other.id === this.id;
   }
 

package/src/client/CodeEditor/style.scss

@@ -4,8 +4,12 @@
   font-family: var(--vzcode-font-family);
   overflow-x: auto;
 
-  /* TODO QA this */
   .cm-editor {
     flex: 1;
   }
+
+  .cm-scroller {
+    font-family: var(--vzcode-font-family);
+    font-size: var(--vzcode-font-size);
+  }
 }

package/src/client/CodeErrorOverlay/index.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import './style.scss';
+
+// Feature flag for the button that dismisses the error.
+const enableErrorDismiss = false;
+
+export const CodeErrorOverlay = ({
+  errorMessage,
+}: {
+  errorMessage: string | null;
+}) => {
+  const handleCloseClick = useCallback(() => {
+    console.log('TODO dismiss the error');
+  }, []);
+
+  return errorMessage !== null ? (
+    <pre className="vz-code-error-overlay">
+      {errorMessage}
+      {enableErrorDismiss ? (
+        <div
+          className={'bx bx-x error-dismiss-button'}
+          onClick={handleCloseClick}
+        ></div>
+      ) : null}
+    </pre>
+  ) : null;
+};

package/src/client/CodeErrorOverlay/style.scss

@@ -0,0 +1,30 @@
+.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);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // pointer-events: none;
+  margin: 0;
+  padding: 8px;
+
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+
+  // TODO unify with styles in tab close button
+  .error-dismiss-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 5px;
+    cursor: pointer;
+    color: white;
+  }
+  .error-dismiss-button:hover {
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}

package/src/client/PresenceNotifications/PresenceNotifications.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest';
+import {
+  extractTimestampFromId,
+  shouldShowNotification,
+  handleJoin,
+  handleLeave,
+} from '.';
+
+describe('extractTimestampFromId', () => {
+  it('Extracts a timestamp from a given ID', () => {
+    const id = 'abcd-xyz';
+    const timestamp = extractTimestampFromId(id);
+    expect(timestamp).toBe(parseInt('abcd', 36));
+  });
+});
+
+describe('shouldShowNotification', () => {
+  it('Returns true if remote presence timestamp is greater than local', () => {
+    const remoteId = 'abcd-xyz';
+    const localId = 'aaa-xyz';
+    const result = shouldShowNotification(
+      remoteId,
+      localId,
+    );
+    expect(result).toBe(true);
+  });
+
+  it('Returns false if remote presence timestamp is not greater than local', () => {
+    const remoteId = 'aaa-xyz';
+    const localId = 'abcd-xyz';
+    const result = shouldShowNotification(
+      remoteId,
+      localId,
+    );
+    expect(result).toBe(false);
+  });
+});
+
+describe('handleJoin', () => {
+  it('Adds a new user if not already present', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = { current: new Map() };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleJoin(
+      presenceId,
+      username,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(1);
+    expect(notifications[0].user).toBe(username);
+    expect(notifications[0].join).toBe(true);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      true,
+    );
+  });
+
+  it('Updates username if user already present', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = {
+      current: new Map([[presenceId, 'Doe']]),
+    };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleJoin(
+      presenceId,
+      username,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(0);
+    expect(alreadyJoined.current.get(presenceId)).toBe(
+      username,
+    );
+  });
+});
+
+describe('handleLeave', () => {
+  it('Removes an existing user', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = {
+      current: new Map([[presenceId, username]]),
+    };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleLeave(
+      presenceId,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(1);
+    expect(notifications[0].user).toBe(username);
+    expect(notifications[0].join).toBe(false);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      false,
+    );
+  });
+
+  it('Does nothing if user not present', () => {
+    const presenceId = 'abcd-xyz';
+    const alreadyJoined = { current: new Map() };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleLeave(
+      presenceId,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(0);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      false,
+    );
+  });
+});