vzcode 0.21.0 → 0.24.0

package/src/client/CodeEditor/widgets.ts

@@ -1,5 +1,18 @@
 import interact from '@replit/codemirror-interact';
 
+import {
+  ViewPlugin,
+  Decoration,
+  WidgetType,
+  keymap,
+} from '@codemirror/view';
+import {
+  Annotation,
+  Extension,
+  RangeSet,
+} from '@codemirror/state';
+import { EditorView } from 'codemirror';
+
 // Interactive code widgets.
 //  * Number dragger
 //  * Boolean toggler
@@ -15,10 +28,49 @@ export const widgets = ({
 }) =>
   interact({
     rules: [
+      // hex color picker
+      // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
+      {
+        regexp: /\"\#([0-9]|[A-F]|[a-f]){6}\"/g,
+        cursor: 'pointer',
+        onClick(text, setText, e) {
+          const res =
+            /\"(?<hex>\#([0-9]|[A-F]|[a-f]){6})\"/.exec(
+              text,
+            );
+          const startingColor = res.groups?.hex;
+
+          const sel = document.createElement('input');
+          sel.type = 'color';
+
+          sel.value = startingColor.toLowerCase();
+
+          //valueIsUpper maintains style of user's code. It keeps the case of a-f the same case as the original."
+          const valueIsUpper =
+            startingColor.toUpperCase() === startingColor;
+
+          const updateHex = (e: Event) => {
+            const el = e.target as HTMLInputElement;
+
+            if (el.value) {
+              setText(
+                `"${
+                  valueIsUpper
+                    ? el.value.toUpperCase()
+                    : el.value
+                }"`,
+              );
+            }
+          };
+          sel.addEventListener('input', updateHex);
+          sel.click();
+        },
+      },
+
       // a rule for a number dragger
       {
         // the regexp matching the value
-        regexp: /-?\b\d+\.?\d*\b/g,
+        regexp: /(?<!\#)-?\b\d+\.?\d*\b/g,
         // set cursor to "ew-resize" on hover
         cursor: 'ew-resize',
         // change number value based on mouse X movement on drag
@@ -43,7 +95,7 @@ export const widgets = ({
           }
         },
       },
-      //vec2 slider
+      // vec2 slider
       // Inspired by: https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L61
       {
         regexp:
@@ -64,7 +116,7 @@ export const widgets = ({
           );
         },
       },
-      //color picker
+      // rgb color picker
       // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
       //TODO: create color picker for hsl colors
       {
@@ -82,6 +134,7 @@ export const widgets = ({
           //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);
 
@@ -148,3 +201,185 @@ const hex2RGB = (hex: string): [number, number, number] => {
 // 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);
+
+const colorCircleTheme = EditorView.baseTheme({
+  '.color-circle-parent': { display: 'inline-block' },
+});
+
+const colorCircleAnnotation = Annotation.define();
+
+export const colorsInTextPlugin: Extension = [
+  ViewPlugin.fromClass(
+    class {
+      decorations: any;
+      view: EditorView;
+      constructor(view: EditorView) {
+        this.decorations = RangeSet.of([]);
+        this.view = view;
+      }
+    },
+    {
+      decorations: (v) => {
+        const colorInfos = [];
+
+        const lines = v.view.state.doc.iter();
+        let line = lines.next();
+
+        //Offset is the number of characters before the hex so the circle can be placed properly.
+        let offset = 0;
+        while (!line.done) {
+          if (line.value === '\n') {
+            offset++;
+            line = lines.next();
+            continue;
+          }
+          const hexColorOccurances = line.value.matchAll(
+            /\"\#([0-9]|[A-F]|[a-f]){6}\"/g,
+          );
+          let hexOccurance = hexColorOccurances.next();
+          while (!hexOccurance.done) {
+            const offsetColorInfo = hexOccurance.value;
+            offsetColorInfo.index += offset;
+            colorInfos.push(offsetColorInfo);
+            hexOccurance = hexColorOccurances.next();
+          }
+          offset += line.value.length;
+          line = lines.next();
+        }
+
+        return Decoration.set(
+          colorInfos.map((colorInfo) => {
+            return {
+              //9 is the length of the hex color string including quotation marks
+              from: colorInfo.index + 9,
+              to: colorInfo.index + 9,
+              value: Decoration.widget({
+                side: -1,
+                widget: new ColorWidget(colorInfo[0]),
+              }),
+            };
+          }),
+        );
+      },
+    },
+  ),
+  colorCircleTheme,
+];
+
+class ColorWidget extends WidgetType {
+  color: string;
+  constructor(color: string) {
+    super();
+    this.color = color;
+  }
+
+  eq(widget: ColorWidget): boolean {
+    // TODO consider possibly adding a random ID to support multiple instances with the same color
+    return widget.color === this.color;
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const parent = document.createElement('div');
+
+    parent.setAttribute('style', 'width:10px;height:10px');
+    parent.className = 'color-circle-parent';
+    const svg = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    const colorCircle = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'circle',
+    );
+    colorCircle.setAttributeNS(
+      null,
+      'fill',
+      this.color.replace(/\"/g, ''),
+    );
+    colorCircle.setAttributeNS(null, 'r', '5');
+    colorCircle.setAttributeNS(null, 'cx', '5');
+    colorCircle.setAttributeNS(null, 'cy', '5');
+
+    svg.setAttributeNS(null, 'viewBox', '0 0 10 10');
+    svg.setAttributeNS(null, 'width', '10');
+    svg.setAttributeNS(null, 'height', '10');
+
+    svg.appendChild(colorCircle);
+
+    parent.appendChild(svg);
+    return parent;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+
+export const highlightWidgets = ViewPlugin.fromClass(
+  class {
+    showHighlight: boolean;
+    view: EditorView;
+    constructor(view: EditorView) {
+      this.showHighlight = false;
+      this.view = view;
+    }
+  },
+  {
+    decorations: (v) => {
+      if (!v.showHighlight) {
+        return Decoration.none;
+      }
+
+      const interactOpportunities = [];
+      const lines = v.view.state.doc.iter();
+      let line = lines.next();
+
+      //Offset is the number of characters before the regex so the highlighting can be placed properly.
+      let offset = 0;
+      while (!line.done) {
+        if (line.value === '\n') {
+          offset++;
+          line = lines.next();
+          continue;
+        }
+        const interactiveOccurances = line.value.matchAll(
+          //The below line contains all of the Regexes for all of the interactive widgets.
+          /\"\#([0-9]|[A-F]|[a-f]){6}\"|rotate\(-?\d*\.?\d*\)|https?:\/\/[^ "]+|vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)|true|false|(?<!\#)-?\b\d+\.?\d*\b|rgb\(.*\)/dg,
+        );
+        let interactOccurance =
+          interactiveOccurances.next();
+        while (!interactOccurance.done) {
+          const offsetInteract = interactOccurance.value;
+          offsetInteract.indices[0][0] += offset;
+          offsetInteract.indices[0][1] += offset;
+          interactOpportunities.push(offsetInteract);
+          interactOccurance = interactiveOccurances.next();
+        }
+        offset += line.value.length;
+        line = lines.next();
+      }
+      return Decoration.set(
+        interactOpportunities.map((opportunity) => {
+          return {
+            from: opportunity.indices[0][0],
+            to: opportunity.indices[0][1],
+            value: Decoration.mark({
+              class: 'cm-interact ',
+            }),
+          };
+        }),
+      );
+    },
+    eventHandlers: {
+      keydown(event, view) {
+        if (event.key == 'Alt') {
+          this.showHighlight = true;
+        }
+      },
+      keyup(event, view) {
+        if (event.key == 'Alt') {
+          this.showHighlight = false;
+        }
+      },
+    },
+  },
+);

package/src/client/PresenceNotifications/index.tsx

@@ -1,6 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import './style.scss';
 
+type PresenceId = string;
+
 // A presence notification is a message that is displayed when a user joins or leaves a session.
 // It has the following properties:
 // - `user` is the username of the user who joined or left the session.
@@ -10,7 +12,7 @@ import './style.scss';
 type PresenceNotification = {
   user: string;
   join: boolean;
-  presenceId: string;
+  presenceId: PresenceId;
 };
 
 export const PresenceNotifications = ({
@@ -21,86 +23,117 @@ export const PresenceNotifications = ({
   const [presenceNotifications, setPresenceNotifications] =
     useState<Array<PresenceNotification>>([]);
 
-  // // console.log('docPresence:', docPresence);
-  // const [visible, setVisible] = useState(true);
-  // const [user, setUser] = useState('');
-
-  // // `true` means user has joined the session.
-  // // `false` means user has left the session.
-  // const [join, setJoin] = useState<boolean>(true);
+  // const [presenceIds, setPresenceIds] = useState<
+  //   Array<any>
+  // >([]);
+  const alreadyJoinedPresenceIds = useRef<Set<PresenceId>>(
+    new Set(),
+  );
 
   useEffect(() => {
     // console.log('useEffect triggered.');
     if (docPresence) {
       // See https://share.github.io/sharedb/presence
       docPresence.on('receive', (presenceId, update) => {
+        // Reason for notifications appearing on every cursor movement:
+        //  code doesn't check if a notification about a user joining was previously sent
+
+        // Attempted solutions:
+        //  - create an array called presenceIds that keeps track of the presences that join and leave
+        //      - if presenceId is in presenceIds: local user was already alerted that a remote user joined
+        //      - if presenceId is not in presenceIds: local user needs to be notified about a new user
+        //      - problems:
+        //          - the array is always empty inside useEffect (array works outside of useEffect)
+        //              - causes check to fail
+        //  - check docPresence.remotePresences, which keeps track of all the remote presences on the doc
+        //      - see https://share.github.io/sharedb/api/presence
+        //      - if presenceId is in docPresence.remotePresences: local user was already alerted that a remote user joined
+        //      - if presenceId is not in docPresence.remotePresences: local user needs to be notified about a new user
+        //      - problems:
+        //          - useEffects is called when docPresence changes (in some cases, it's when the remote presence changes)
+        //          - remotePresences already has the remote presence in the array, so check fails
+        //      - could add another property to presence (true: already notified, false: need to be notified)
+        //          - doesn't seem like an ideal solution
+
+        // console.log('docPresence:', docPresence);
+        // console.log('docPresence remotePresences:', docPresence.remotePresences);
+        // console.log('check for presence:', docPresence.remotePresences[presenceId]);
+
         // TODO figure out how to get username from `presenceId`.
         const user = 'someone';
 
         // `true` means user has joined the session.
         // `false` means user has left the session.
-        const join = update === null;
-
-        // Add an entry to the presence notifications array.
-        setPresenceNotifications((prev) => [
-          ...prev,
-          { user, join, presenceId },
-        ]);
-
-        // Remove it after 5 seconds.
-        setTimeout(() => {
-          setPresenceNotifications((prev) =>
-            prev.filter(
-              (notification) =>
-                notification.presenceId !== presenceId,
-            ),
-          );
-        }, 5000);
-      });
+        const join = update !== null;
+
+        console.log('join', join);
 
-      // console.log('inside if of useEffect.');
-      // docPresence.on('receive', (presence) => {
-      //   console.log('presence', presence);
-
-      // // Add an entry to the presence notifications array.
-      // setPresenceNotifications((prev) => [
-      //   ...prev,
-      //   { user: presence.username, join: presence === null },
-      // ]);
-
-      // console.log('receive triggered.');
-      // if (presence === null) {
-      //   setJoin(false);
-      // }
-      // const { username } = presence;
-      // setUser(username);
-      // });
-
-      // const timer = setTimeout(() => {
-      //   setVisible(false);
-      // }, 10000);
-      return () => {
-        // clearTimeout(timer);
-      };
-    } else {
-      // setVisible(false);
+        // Figure out if we have ever seen this user before.
+
+        // if (join && docPresence.remotePresences[presenceId] === undefined){
+        if (join) {
+          if (
+            !alreadyJoinedPresenceIds.current.has(
+              presenceId,
+            )
+          ) {
+            alreadyJoinedPresenceIds.current.add(
+              presenceId,
+            );
+            setPresenceNotifications((prev) => [
+              ...prev,
+              { user, join, presenceId },
+            ]);
+
+            // Remove it after 5 seconds.
+            setTimeout(() => {
+              setPresenceNotifications((prev) =>
+                prev.filter(
+                  (notification) =>
+                    notification.presenceId !==
+                      presenceId &&
+                    notification.join !== join,
+                ),
+              );
+            }, 5000);
+          }
+        } else if (!join) {
+          setPresenceNotifications((prev) => [
+            ...prev,
+            { user, join, presenceId },
+          ]);
+
+          // Remove it after 5 seconds.
+          // TODO clean up this duplication.
+          setTimeout(() => {
+            setPresenceNotifications((prev) =>
+              prev.filter(
+                (notification) =>
+                  notification.presenceId !== presenceId &&
+                  notification.join !== join,
+              ),
+            );
+          }, 5000);
+        }
+      });
     }
   }, [docPresence]);
 
-  console.log(
-    'presenceNotifications',
-    presenceNotifications,
-  );
+  // console.log(
+  //   'presenceNotifications',
+  //   presenceNotifications,
+  // );
+  // console.log(
+  //   'presenceIds',
+  //   presenceIds,
+  // );
 
   return presenceNotifications.length > 0 ? (
     <div className="vz-notification">
-      {presenceNotifications.map((notification) => {
+      {presenceNotifications.map((notification, i) => {
         const { user, join } = notification;
         return (
-          <div
-            key={notification.presenceId}
-            className="vz-notification-item"
-          >
+          <div key={i} className="vz-notification-item">
             {join
               ? `${user} has joined the session.`
               : `${user} has left the session.`}
@@ -109,20 +142,4 @@ export const PresenceNotifications = ({
       })}
     </div>
   ) : null;
-  // return null;
-
-  // return (
-  //   <Modal
-  //     className="vz-notification"
-  //     show={visible}
-  //     onHide={() => setVisible(false)}
-  //     animation={false}
-  //   >
-  //     <Modal.Body>
-  //       {join
-  //         ? `${user} has joined the session.`
-  //         : `${user} has left the session.`}
-  //     </Modal.Body>
-  //   </Modal>
-  // );
 };

package/src/client/PrettierErrorOverlay/index.tsx

@@ -0,0 +1,9 @@
+import './style.scss';
+
+export const PrettierErrorOverlay = ({ prettierError }) => {
+  return prettierError !== null ? (
+    <pre className="prettier-error-overlay">
+      {prettierError}
+    </pre>
+  ) : null;
+};

package/src/client/PrettierErrorOverlay/style.scss

@@ -0,0 +1,9 @@
+.prettier-error-overlay {
+  color: rgb(255, 53, 53);
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}

package/src/client/Settings.tsx

@@ -1,18 +1,13 @@
 import { useCallback, useRef } from 'react';
 import { Button, Modal, Form } from './bootstrap';
-import Select from 'react-select';
-import {
-  ThemeLabel,
-  themeOptionsByLabel,
-  themes,
-} from './themes';
+import { ThemeLabel, themes } from './themes';
 
-const saveTimes = [
-  { value: 1, label: '1 second' },
-  { value: 5, label: '5 seconds' },
-  { value: 10, label: '10 seconds' },
-  { value: 30, label: '30 seconds' },
-];
+// const saveTimes = [
+//   { value: 1, label: '1 second' },
+//   { value: 5, label: '5 seconds' },
+//   { value: 10, label: '10 seconds' },
+//   { value: 30, label: '30 seconds' },
+// ];
 
 export let username = 'Anonymous';
 
@@ -27,23 +22,26 @@ export const Settings = ({
   setTheme: (theme: ThemeLabel) => void;
   theme: ThemeLabel;
 }) => {
-  const handleChange = useCallback((selectedOption) => {
-    setTheme(selectedOption.label);
+  const handleThemeChange = useCallback((event) => {
+    const selectedValue = event.target.value;
+    console.log(selectedValue);
+    setTheme(selectedValue);
   }, []);
 
-  const handleSaveTimeChange = useCallback(
-    (selectedOption) => {
-      const time = [{ value: selectedOption.value }];
-      fetch('/saveTime', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(time),
-      });
-    },
-    [],
-  );
+  // TODO https://github.com/vizhub-core/vzcode/issues/95
+  // const handleSaveTimeChange = useCallback(
+  //   (selectedOption) => {
+  //     const time = [{ value: selectedOption.value }];
+  //     fetch('/saveTime', {
+  //       method: 'POST',
+  //       headers: {
+  //         'Content-Type': 'application/json',
+  //       },
+  //       body: JSON.stringify(time),
+  //     });
+  //   },
+  //   [],
+  // );
 
   const usernameRef = useRef<HTMLInputElement>(null);
   const handleUsernameChange = () => {
@@ -76,16 +74,26 @@ export const Settings = ({
         </Form.Group>
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Theme</Form.Label>
-          <Select
-            options={themes}
-            onChange={handleChange}
-            value={themeOptionsByLabel[theme]}
-          />
+
+          <select
+            className="form-select"
+            value={theme}
+            onChange={handleThemeChange}
+          >
+            {themes.map(({ label }) => (
+              <option key={label} value={label}>
+                {label}
+              </option>
+            ))}
+          </select>
+
           <Form.Text className="text-muted">
             Select a color theme for the editor
           </Form.Text>
         </Form.Group>
-        <Form.Group className="mb-3" controlId="formFork">
+        {/*
+          TODO https://github.com/vizhub-core/vzcode/issues/95
+          <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Auto-Save Time</Form.Label>
           <Select
             options={saveTimes}
@@ -94,7 +102,7 @@ export const Settings = ({
           <Form.Text className="text-muted">
             Select an auto save time
           </Form.Text>
-        </Form.Group>
+        </Form.Group> */}
       </Modal.Body>
       <Modal.Footer>
         <Button variant="primary" onClick={onClose}>

package/src/client/Sidebar/DirectoryListing.tsx

@@ -33,10 +33,13 @@ export const DirectoryListing = ({
     toggleDirectory(path);
   }, [toggleDirectory]);
 
-  const handleDeleteClick = useCallback(() => {
-    // https://github.com/vizhub-core/vzcode/issues/102
-    console.log('TODO handleDeleteDirectoryClick');
-  }, []);
+  const handleDeleteClick = useCallback(
+    (event) => {
+      // https://github.com/vizhub-core/vzcode/issues/102
+      handleDeleteFileClick(path, event);
+    },
+    [handleDeleteFileClick, path],
+  );
 
   const handleRenameClick = useCallback(() => {
     // https://github.com/vizhub-core/vzcode/issues/103

package/src/client/Sidebar/FileListing.tsx

@@ -41,11 +41,11 @@ export const FileListing = ({
 
   return (
     <Item
+      name={name}
       handleClick={handleClick}
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
       isDir={false}
-      name={name}
     >
       {name}
     </Item>