npm - vzcode - Versions diffs - 0.19.0 → 0.20.1 - Mend

vzcode 0.19.0 → 0.20.1

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/README.md +21 -0
package/dist/assets/index-12dbf516.js +121 -0
package/dist/index.html +1 -1
package/package.json +11 -11
package/src/client/App.tsx +12 -21
package/src/client/CodeEditor/json1PresenceDisplay.js +26 -12
package/src/client/CodeEditor/widgets.ts +95 -0
package/src/client/Settings.tsx +1 -3
package/src/client/Sidebar/ConfirmationBox.tsx +33 -0
package/src/client/Sidebar/DirectoryListing.tsx +7 -1
package/src/client/Sidebar/FileListing.tsx +13 -6
package/src/client/Sidebar/Item.tsx +121 -0
package/src/client/Sidebar/Listing.tsx +4 -1
package/src/client/Sidebar/index.tsx +4 -1
package/src/client/TabList/index.tsx +23 -1
package/src/client/bootstrap.ts +8 -0
package/src/server/index.js +1 -1
package/dist/assets/index-34134182.js +0 -118
package/src/client/Sidebar/Item.jsx +0 -43

package/dist/index.html CHANGED Viewed

@@ -28,7 +28,7 @@
       href="https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-34134182.js"></script>
+    <script type="module" crossorigin src="/assets/index-12dbf516.js"></script>
     <link rel="stylesheet" href="/assets/index-0053b846.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "Multiplayer code editor system",
   "main": "index.js",
   "type": "module",
@@ -49,12 +49,12 @@
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.6",
     "@codemirror/lang-javascript": "^6.2.1",
-    "@codemirror/lang-markdown": "^6.2.0",
+    "@codemirror/lang-markdown": "^6.2.1",
     "@codemirror/state": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@replit/codemirror-interact": "^6.3.0",
     "@teamwork/websocket-json-stream": "^2.0.0",
-    "@uiw/codemirror-themes-all": "^4.21.13",
+    "@uiw/codemirror-themes-all": "^4.21.18",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.1.0",
     "d3-array": "^3.2.4",
@@ -65,22 +65,22 @@
     "ngrok": "^4.3.3",
     "open": "^9.1.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.8.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "^18.2.0",
-    "react-select": "^5.7.4",
+    "react-select": "^5.7.5",
     "sharedb": "^4.0.1",
     "sharedb-client-browser": "^4.3.1",
     "ot-json1": "^1.0.2",
-    "ws": "^8.13.0"
+    "ws": "^8.14.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@vitejs/plugin-react": "^4.1.0",
     "prettier": "^3.0.3",
-    "sass": "^1.66.1",
+    "sass": "^1.68.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vitest": "^0.34.3"
+    "vitest": "^0.34.5"
   }
 }

package/src/client/App.tsx CHANGED Viewed

@@ -198,24 +198,19 @@ function App() {
     }
   }, [submitOperation]);
-  // Called when a file in the sidebar is double-clicked.
+  // Called when a file in the sidebar is renamed.
   const handleRenameFileClick = useCallback(
-    (fileId: FileId) => {
-      // TODO better UX, maybe Bootstrap modal? Maybe edit inline?
-      const newName = prompt('Enter new name');
-      if (newName) {
-        submitOperation((document) => ({
-          ...document,
-          files: {
-            ...document.files,
-            [fileId]: {
-              ...document.files[fileId],
-              name: newName,
-            },
+    (fileId: FileId, newName: string) => {
+      submitOperation((document) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [fileId]: {
+            ...document.files[fileId],
+            name: newName,
           },
-        }));
-      }
+        },
+      }));
     },
     [submitOperation],
   );
@@ -232,12 +227,8 @@ function App() {
     [submitOperation, closeTab],
   );
-  // TODO prompt the user "Are you sure?"
   const handleDeleteFileClick = useCallback(
-    (fileId: FileId, event: React.MouseEvent) => {
-      // Stop propagation so that the outer listener doesn't fire,
-      // which would try to open this file in a tab.
-      event.stopPropagation();
+    (fileId: FileId) => {
       deleteFile(fileId);
     },
     [deleteFile],

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

@@ -47,17 +47,32 @@ export const json1PresenceDisplay = ({
               const { start, end } = presence;
               const from = start[start.length - 1];
               // TODO support selection ranges (first attempt introduced layout errors)
-              //const to = end[end.length - 1];
-              return {
-                from,
-                //to,
-                to: from, // Temporary meaure
-                value: Decoration.widget({
-                  side: -1,
-                  block: false,
-                  widget: new PresenceWidget(id),
-                }),
-              };
+              const to = end[end.length - 1];
+              if (from === to) {
+                return {
+                  from,
+                  to,
+                  value: Decoration.widget({
+                    side: -1,
+                    block: false,
+                    widget: new PresenceWidget(id),
+                  }),
+                };
+              } else {
+                return {
+                  from,
+                  to,
+                  value: Decoration.mark({
+                    class: 'cm-json1-presence',
+                    attributes: {
+                      style: `
+                        background-color: rgba(255, 255, 0, 0.5);
+                        box-shadow: 1px 0 0 yellow;
+                        `,
+                    },
+                  }),
+                };
+              }
             }),
             // Without this argument, we get the following error:
             // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
@@ -142,6 +157,5 @@ const presenceTheme = EditorView.baseTheme({
     left: '0',
     right: '0',
     borderLeft: '1px solid yellow',
-    //borderRight: '1px solid black',
   },
 });

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

@@ -43,6 +43,61 @@ export const widgets = ({
           }
         },
       },
+      //vec2 slider
+      // Inspired by: https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L61
+      {
+        regexp:
+          /vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)/g,
+        cursor: 'move',
+        onDrag: (text, setText, e) => {
+          const res =
+            /vec2\((?<x>-?\b\d+\.?\d*\b)\s*(,\s*(?<y>-?\b\d+\.?\d*\b))?\)/.exec(
+              text,
+            );
+          const x = Number(res?.groups?.x);
+          let y = Number(res?.groups?.y);
+          if (isNaN(x)) return;
+          if (isNaN(y)) y = x;
+          setText(
+            `vec2(${x + e.movementX}, ${y - e.movementY})`,
+          );
+        },
+      },
+      //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 (el.value) {
+              const [r, g, b] = hex2RGB(el.value);
+              setText(`rgb(${r}, ${g}, ${b})`);
+            }
+            sel.removeEventListener('change', updateRGB);
+          };
+          sel.addEventListener('change', updateRGB);
+          sel.click();
+        },
+      },
       // url clicker
       {
         regexp: /https?:\/\/[^ "]+/g,
@@ -51,5 +106,45 @@ export const widgets = ({
           window.open(text);
         },
       },
+      //Set rotation to the angle between the x-axis and a line from the word "rotate" to the mouse pointer  (while dragging).
+      //The rotation is in range (-180,180]
+      {
+        regexp: /rotate\(-?\d*\.?\d*\)/g,
+        cursor: 'move',
+        onDragStart(text, setText, e) {
+          rotationOrigin = { x: e.screenX, y: e.screenY };
+        },
+        onDrag(text, setText, e) {
+          if (rotationOrigin == null) return;
+          //Calculate the angle between the x axis and a line from where the user first clicks to the current location of the mouse.
+          setText(
+            `rotate(${Math.round(
+              (Math.atan2(
+                rotationOrigin.y - e.screenY,
+                e.screenX - rotationOrigin.x,
+              ) *
+                180) /
+                Math.PI,
+            )})`,
+          );
+        },
+        onDragEnd(text, setText) {
+          rotationOrigin = null;
+        },
+      },
     ],
   });
+let rotationOrigin: { x: number; y: number } = null;
+// 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);

package/src/client/Settings.tsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import { useCallback } from 'react';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import Button from 'react-bootstrap/Button';
+import { Button, Modal, Form } from './bootstrap';
 import Select from 'react-select';
 import {
   ThemeLabel,

package/src/client/Sidebar/ConfirmationBox.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button, Modal } from '../bootstrap';
+// Inspired by https://react-bootstrap.netlify.app/docs/components/modal/#live-demo
+export const ConfirmationBox = ({
+  show,
+  onClose,
+  onConfirm,
+}) => (
+  <Modal
+    show={show}
+    onHide={onClose}
+    // confirm={onConfirm}
+    centered
+  >
+    <Modal.Header closeButton onClick={onClose}>
+      <Modal.Title>Delete File</Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <p>Are you sure you want to delete this file?</p>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant="primary" onClick={onConfirm}>
+        Yes
+      </Button>
+      <Button variant="secondary" onClick={onClose}>
+        No
+      </Button>
+    </Modal.Footer>
+  </Modal>
+);

package/src/client/Sidebar/DirectoryListing.tsx CHANGED Viewed

@@ -17,7 +17,10 @@ export const DirectoryListing = ({
   name: string;
   path: string;
   children: Array<FileTree | FileTreeFile>;
-  handleRenameFileClick: (fileId: string) => void;
+  handleRenameFileClick: (
+    fileId: string,
+    newName: string,
+  ) => void;
   handleDeleteFileClick: (
     fileId: string,
     event: React.MouseEvent,
@@ -31,10 +34,12 @@ export const DirectoryListing = ({
   }, [toggleDirectory]);
   const handleDeleteClick = useCallback(() => {
+    // https://github.com/vizhub-core/vzcode/issues/102
     console.log('TODO handleDeleteDirectoryClick');
   }, []);
   const handleRenameClick = useCallback(() => {
+    // https://github.com/vizhub-core/vzcode/issues/103
     console.log('TODO handleRenameDirectoryClick');
   }, []);
@@ -50,6 +55,7 @@ export const DirectoryListing = ({
         handleClick={handleClick}
         handleDeleteClick={handleDeleteClick}
         handleRenameClick={handleRenameClick}
+        isDir={true}
       >
         <div
           className="arrow-wrapper"

package/src/client/Sidebar/FileListing.tsx CHANGED Viewed

@@ -11,7 +11,10 @@ export const FileListing = ({
 }: {
   name: string;
   fileId: FileId;
-  handleRenameFileClick: (fileId: FileId) => void;
+  handleRenameFileClick: (
+    fileId: FileId,
+    newName: string,
+  ) => void;
   handleDeleteFileClick: (
     fileId: FileId,
     event: React.MouseEvent,
@@ -23,21 +26,25 @@ export const FileListing = ({
   }, [fileId, handleFileClick]);
   const handleDeleteClick = useCallback(
-    (event) => {
+    (event: React.MouseEvent) => {
       handleDeleteFileClick(fileId, event);
     },
-    [fileId],
+    [fileId, handleDeleteFileClick],
   );
-  const handleRenameClick = useCallback(() => {
-    handleRenameFileClick(fileId);
-  }, [fileId]);
+  const handleRenameClick = useCallback(
+    (newName: string) => {
+      handleRenameFileClick(fileId, newName);
+    },
+    [fileId, handleRenameFileClick],
+  );
   return (
     <Item
       handleClick={handleClick}
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
+      isDir={false}
     >
       {name}
     </Item>

package/src/client/Sidebar/Item.tsx ADDED Viewed

@@ -0,0 +1,121 @@
+import { useState, useCallback, useMemo } from 'react';
+import { ConfirmationBox } from './ConfirmationBox';
+export const Item = ({
+  name,
+  children,
+  handleClick,
+  handleRenameClick,
+  handleDeleteClick,
+  isDir,
+}) => {
+  // Tracks whether the mouse is hovering over the file or directory
+  const [isHovered, setIsHovered] = useState(false);
+  // Tracks whether the file is being renamed (inline text input)
+  const [isRenaming, setIsRenaming] = useState(false);
+  // Tracks the value of the input field when renaming
+  const [renameValue, setRenameValue] = useState('');
+  const onKeyDown = useCallback((event) => {
+    // TODO make 'Escape' cancel the changes - do not commit the rename
+    // https://github.com/vizhub-core/vzcode/issues/207
+    if (event.key === 'Enter' || event.key === 'Escape') {
+      event.target.blur();
+    }
+  }, []);
+  const onBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      if (event.target.value.trim() === '') {
+        // setEditingValue(value);
+        console.log('TODO: handle empty rename');
+      } else {
+        setIsRenaming(false);
+        handleRenameClick(event.target.value);
+      }
+    },
+    [handleRenameClick],
+  );
+  const [showModal, setShowModal] = useState(false);
+  // Function to open the delete file confirmation modal
+  const handleModalOpen = useCallback(() => {
+    setShowModal(true);
+  }, []);
+  // Function to close the modal
+  const handleModalClose = useCallback(() => {
+    setShowModal(false);
+  }, []);
+  // Function to handle confirmation on modal
+  const handleConfirmModal = useCallback(() => {
+    setShowModal(false);
+    handleDeleteClick();
+  }, [handleDeleteClick]);
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+  const onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setRenameValue(event.target.value);
+    },
+    [],
+  );
+  return (
+    <div
+      className="full-box file-or-directory"
+      onClick={isRenaming ? null : handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="name">
+        {isRenaming ? (
+          <input
+            type="text"
+            aria-label="Field name"
+            value={renameValue}
+            onKeyDown={onKeyDown}
+            onBlur={onBlur}
+            onChange={onChange}
+          />
+        ) : (
+          children
+        )}
+      </div>
+      {isHovered ? (
+        <div className="utils">
+          <i
+            className="bx bxs-edit utilities"
+            style={{ color: '#abdafb' }}
+            onClick={() => {
+              setIsRenaming(!isRenaming);
+              setRenameValue(isDir ? name : children);
+            }}
+          ></i>
+          <i
+            className="bx bx-trash"
+            style={{ color: '#eb336c' }}
+            onClick={handleModalOpen}
+          ></i>
+        </div>
+      ) : null}
+      <ConfirmationBox
+        show={showModal}
+        onClose={handleModalClose}
+        onConfirm={handleConfirmModal}
+      />
+    </div>
+  );
+};

package/src/client/Sidebar/Listing.tsx CHANGED Viewed

@@ -17,7 +17,10 @@ export const Listing = ({
   toggleDirectory,
 }: {
   entity: FileTree | FileTreeFile;
-  handleRenameFileClick: (fileId: FileId) => void;
+  handleRenameFileClick: (
+    fileId: FileId,
+    newName: string,
+  ) => void;
   handleDeleteFileClick: (
     fileId: FileId,
     event: React.MouseEvent,

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

@@ -24,7 +24,10 @@ export const Sidebar = ({
 }: {
   files: Files;
   createFile?: () => void;
-  handleRenameFileClick?: (fileId: FileId) => void;
+  handleRenameFileClick?: (
+    fileId: FileId,
+    newName: string,
+  ) => void;
   handleDeleteFileClick?: (
     fileId: FileId,
     event: React.MouseEvent,

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import { FileId, Files } from '../../types';
 import './style.scss';
@@ -69,6 +69,28 @@ export const TabList = ({
   setActiveFileId: (fileId: FileId) => void;
   closeTab: (fileId: FileId) => void;
 }) => {
+  //Create a function to perform the logic to delete the current tab
+  const handleKeyPress = useCallback(
+    (event: { altKey: boolean; key: string }) => {
+      if (event.altKey == true) {
+        if (event.key == 'w') {
+          closeTab(activeFileId);
+        }
+      }
+    },
+    [closeTab, activeFileId],
+  );
+  useEffect(() => {
+    // attach the event listener
+    document.addEventListener('keydown', handleKeyPress);
+    // remove the event listener
+    return () => {
+      document.removeEventListener(
+        'keydown',
+        handleKeyPress,
+      );
+    };
+  }, [handleKeyPress]);
   return (
     <div className="vz-tab-list">
       {files &&

package/src/client/bootstrap.ts ADDED Viewed

@@ -0,0 +1,8 @@
+// A central place where we import what we need from react-bootstrap.
+// This strange looking way of importing makes it work with Vite's SSR build.
+// Otherwise we get `Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import`
+import Form from 'react-bootstrap/cjs/Form.js';
+import Button from 'react-bootstrap/cjs/Button.js';
+import Modal from 'react-bootstrap/cjs/Modal.js';
+export { Form, Button, Modal };

package/src/server/index.js CHANGED Viewed

@@ -109,7 +109,7 @@ const save = () => {
       // Handle renaming files.
       if (previous.name !== current.name) {
-        fs.renamesync(previous.name, current.name);
+        fs.renameSync(previous.name, current.name);
       }
     }