vzcode 0.4.0 → 0.6.0

package/src/client/Sidebar/index.tsx

@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import { getFileTree } from '../getFileTree';
+import { sortFileTree } from '../sortFileTree';
+import { disableSettings } from '../featureFlags';
+import { Listing } from './Listing';
+import { useOpenDirectories } from './useOpenDirectories';
+
+import './styles.scss';
+import { FileId, FileTree, FileTreeFile, Files } from '../../types';
+
+export const Sidebar = ({
+  createFile,
+  files,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  setIsSettingsOpen,
+  isSettingsOpen,
+}: {
+  files: Files;
+  createFile?: () => void;
+  handleRenameFileClick?: (fileId: FileId) => void;
+  handleDeleteFileClick?: (fileId: FileId, event: React.MouseEvent) => void;
+  handleFileClick?: (fileId: FileId) => void;
+  setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
+  isSettingsOpen?: boolean;
+}) => {
+  const fileTree = useMemo(
+    () => (files ? sortFileTree(getFileTree(files)) : null),
+    [files]
+  );
+
+  const { openDirectories, toggleDirectory } = useOpenDirectories();
+
+  return (
+    <div className="vz-sidebar">
+      <div className="files">
+        <div className="full-box">
+          <div>
+            <a className="link-name" href="#">
+              Files
+            </a>
+          </div>
+          <div>
+            <i
+              className="bx bxs-file-plus new-btn"
+              style={{ color: '#dbdde1' }}
+              onClick={createFile}
+            ></i>
+          </div>
+        </div>
+        {fileTree
+          ? fileTree.children.map((entity) => {
+              const { fileId } = entity as FileTreeFile;
+              const { path } = entity as FileTree;
+              return (
+                <Listing
+                  entity={entity}
+                  key={fileId || path}
+                  handleRenameFileClick={handleRenameFileClick}
+                  handleDeleteFileClick={handleDeleteFileClick}
+                  handleFileClick={handleFileClick}
+                  openDirectories={openDirectories}
+                  toggleDirectory={toggleDirectory}
+                />
+              );
+            })
+          : null}
+      </div>
+      {disableSettings ? null : (
+        <div
+          className="settings"
+          onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+        >
+          Settings
+        </div>
+      )}
+    </div>
+  );
+};

package/src/client/Sidebar/styles.scss

@@ -0,0 +1,84 @@
+.vz-sidebar {
+  height: 100%;
+  width: 200px;
+  background: rgb(54, 65, 89);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .full-box {
+    padding: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .files {
+    overflow: auto;
+  }
+
+  .file-or-directory {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    margin: 0 10px;
+    color: rgb(219, 221, 225);
+    border-radius: 5px;
+  }
+
+  .link-name {
+    margin-top: 30px;
+    margin-left: 10px;
+    color: rgb(154, 160, 172);
+    font-size: 12px;
+    text-decoration: none;
+  }
+
+  .new-btn {
+    justify-content: right;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  .utils {
+    display: flex;
+  }
+  .utilities {
+    margin-right: 3px;
+  }
+
+  .file-or-directory:hover,
+  .settings:hover {
+    background-color: rgb(74, 84, 105);
+  }
+
+  .name {
+    display: flex;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .indentation {
+    margin-left: 20px;
+  }
+
+  .arrow-wrapper {
+    margin-right: 4px;
+  }
+
+  .settings {
+    height: 30px;
+    color: rgb(219, 221, 225);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 14px 0;
+    margin: 10px;
+    border-radius: 5px;
+  }
+}

package/src/client/Sidebar/useOpenDirectories.ts

@@ -0,0 +1,37 @@
+import { useState, useCallback } from 'react';
+
+// TODO bring this feature back
+// When a page is opened with an active file,
+// make sure all the directories leading to that file
+// are opened automatically.
+//export const initialOpenDirectories = (activeFile) => {
+//  const openDirectories = {};
+//  if (activeFile) {
+//    const path = activeFile.split('/');
+//    for (let i = 1; i < path.length; i++) {
+//      openDirectories[path.slice(0, i).join('/')] = true;
+//    }
+//  }
+//  return openDirectories;
+//};
+
+// Inspired by
+// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
+export const useOpenDirectories = () => {
+  const [openDirectories, setOpenDirectories] = useState<{
+    [path: string]: boolean;
+  }>({});
+
+  // TODO consider useReducer to avoid event listener churn
+  const toggleDirectory = useCallback(
+    (path) => {
+      setOpenDirectories(
+        Object.assign({}, openDirectories, {
+          [path]: !openDirectories[path],
+        })
+      );
+    },
+    [openDirectories]
+  );
+  return { openDirectories, toggleDirectory };
+};

package/src/{diff.js → client/diff.js}

@@ -1,6 +1,6 @@
 import jsondiff from 'json0-ot-diff';
 import diffMatchPatch from 'diff-match-patch';
-import { json1Presence, textUnicode } from './ot';
+import { json1Presence, textUnicode } from '../ot';
 
 export const diff = (a, b) =>
   jsondiff(a, b, diffMatchPatch, json1Presence, textUnicode);

package/src/client/featureFlags.js

@@ -0,0 +1,3 @@
+// A feature flag to disable settings for release, until it's completed.
+// See https://vitejs.dev/guide/env-and-mode.html
+export const disableSettings = import.meta.env.VITE_DISABLE_SETTINGS === 'true';

package/src/client/getFileTree.ts

@@ -0,0 +1,52 @@
+// Inspired by
+
+import { Files, FileTree } from '../types';
+
+// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/getFileTree.js
+export const getFileTree = (files: Files): FileTree => {
+  const tree: FileTree = { name: 'files' };
+  for (const fileId of Object.keys(files)) {
+    const file = files[fileId];
+    const path = file.name.split('/');
+    const n = path.length;
+    let node = tree;
+
+    // Walk the path.
+    for (let i = 0; i < n - 1; i++) {
+      // Search for an existing child.
+      let child: FileTree | undefined;
+      const name = path[i];
+      if (node.children) {
+        for (let j = 0; j < node.children.length; j++) {
+          const nodeChild = node.children[j];
+          if (nodeChild.name === name) {
+            child = nodeChild;
+            break;
+          }
+        }
+      }
+
+      // Create a child if none with matching name exists.
+      if (!child) {
+        child = {
+          name: path[i],
+          path: path.slice(0, i + 1).join('/'),
+        };
+        (node.children || (node.children = [])).push(child);
+      }
+
+      node = child;
+    }
+
+    // file.text being `null` signifies
+    // that this is a directory.
+    if (file.text !== null) {
+      (node.children || (node.children = [])).push({
+        name: path[n - 1],
+        file,
+        fileId,
+      });
+    }
+  }
+  return tree;
+};

package/src/{getOrCreateEditor.js → client/getOrCreateEditor.js}

@@ -1,12 +1,11 @@
 import { EditorView, basicSetup } from 'codemirror';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
 import { markdown } from '@codemirror/lang-markdown';
 import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';
-import { oneDark } from '@codemirror/theme-one-dark';
 import { json1Sync } from 'codemirror-ot';
-import { json1Presence, textUnicode } from './ot';
+import { json1Presence, textUnicode } from '../ot';
 import { json1PresenceBroadcast } from './json1PresenceBroadcast';
 import { json1PresenceDisplay } from './json1PresenceDisplay';
 
@@ -23,7 +22,7 @@ export const getOrCreateEditor = ({
   shareDBDoc,
   localPresence,
   docPresence,
-  theme,
+  theme
 }) => {
   const data = shareDBDoc.data;
 
@@ -32,6 +31,8 @@ export const getOrCreateEditor = ({
   // The path for this file in the ShareDB document.
   const path = [fileId, 'text'];
 
+  let themeSet = new Compartment();
+
   const extensions = [
     // This plugin implements multiplayer editing,
     // real-time synchronozation of changes across clients.
@@ -50,7 +51,7 @@ export const getOrCreateEditor = ({
     json1PresenceDisplay({ path, docPresence }),
 
     basicSetup,
-    oneDark,
+    themeSet.of(theme),
   ];
 
   if (
@@ -70,7 +71,6 @@ export const getOrCreateEditor = ({
 
   let editor = editorCache.get(fileId);
   if (!editor) {
-    // Cache miss --> mint a new editor.
     editor = new EditorView({
       state: EditorState.create({
         doc: data[fileId].text,

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

@@ -5,7 +5,6 @@ import {
   Decoration,
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
-import { randomId } from './randomId';
 
 // Deals with receiving the broadcasted presence cursor locations
 // from other clients and displaying them.

package/src/client/settings.jsx

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import Select from 'react-select';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { okaidia } from '@uiw/codemirror-theme-okaidia';
+import { abcdef } from '@uiw/codemirror-theme-abcdef';
+import { dracula } from '@uiw/codemirror-theme-dracula';
+import { eclipse } from '@uiw/codemirror-theme-eclipse';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import { material } from '@uiw/codemirror-theme-material';
+import { nord } from '@uiw/codemirror-theme-nord';
+import { xcodeLight } from '@uiw/codemirror-theme-xcode';
+
+// TODO document where this list came from
+// TODO research which themes are available for CodeMirror 6
+const themes = [
+  { value: abcdef, label: 'abcdef' },
+  { value: dracula, label: 'darcula' },
+  { value: eclipse, label: 'eclipse' },
+  { value: material, label: 'material' },
+  { value: nord, label: 'nord' },
+  { value: oneDark, label: 'One Dark' },
+  { value: okaidia, label: 'okaidia' },
+  { value: githubDark, label: 'github' },
+  { value: xcodeLight, label: 'xcode' },
+];
+
+const saveTimes = [
+  { value: 1, label: '1 second' },
+  { value: 5, label: '5 seconds' },
+  { value: 10, label: '10 seconds' },
+  { value: 30, label: '30 seconds' },
+];
+
+export const Settings = ({ show, onClose, setTheme, editor }) => {
+  const handleChange = useCallback((selectedOption) => {
+    setTheme(selectedOption.value);
+    editor.dispatch({
+      effects: themeSet.reconfigure(selectedOption.value),
+    });
+  }, []);
+
+  const handleSaveTimeChange = useCallback((selectedOption) => {
+    const time = [{ value: selectedOption.value }];
+    fetch('/saveTime', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(time),
+    });
+  }, []);
+
+  return show ? (
+    <Modal show={show} onHide={onClose} animation={false}>
+      <Modal.Header closeButton>
+        <Modal.Title>Settings</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Username</Form.Label>
+          <Form.Control type="text" placeholder="Enter username" />
+          <Form.Text className="text-muted">
+            Enter a username to be displayed on your cursor
+          </Form.Text>
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Theme</Form.Label>
+          <Select
+            classvalue="themes"
+            options={themes}
+            onChange={handleChange}
+          />
+          <Form.Text className="text-muted">
+            Select a color theme for the editor
+          </Form.Text>
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Auto-Save Time</Form.Label>
+          <Select
+            classvalue="themes"
+            options={saveTimes}
+            onChange={handleSaveTimeChange}
+          />
+          <Form.Text className="text-muted">Select an auto save time</Form.Text>
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" onClick={onClose}>
+          Done
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  ) : null;
+};

package/src/client/sortFileTree.ts

@@ -0,0 +1,19 @@
+// Recursively sorts the file tree in-place.
+// Sorts first to group directories before files.
+// Sorts second alphabetically.
+
+import { FileTree, FileTreeFile } from '../types';
+
+// From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/sortFileTree.js
+export const sortFileTree = (fileTree: FileTree) => {
+  if (fileTree.children) {
+    fileTree.children.sort((a, b) => {
+      const aIsFile = (a as FileTreeFile).file ? 1 : 0;
+      const bIsFile = (b as FileTreeFile).file ? 1 : 0;
+      // Directories before files.
+      return aIsFile - bIsFile || a.name.localeCompare(b.name);
+    });
+    fileTree.children.forEach(sortFileTree);
+  }
+  return fileTree;
+};

package/src/client/style.scss

@@ -0,0 +1,93 @@
+:root {
+  --vzcode-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(41, 44, 52);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(37, 37, 38);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+html,
+body,
+#root,
+.app {
+  height: 100%;
+}
+.app {
+  /* TODO use a variable for this */
+  background-color: rgb(41, 44, 52);
+
+  font-family: 'Poppins', sans-serif;
+  display: flex;
+
+  .left {
+    display: flex;
+  }
+  .right {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+
+    .tab-list {
+      display: flex;
+      background-color: rgb(37, 37, 38);
+
+      .tab {
+        background: rgb(45, 45, 45);
+        color: #fff;
+        font-family: var(--vzcode-font-family);
+        align-items: center;
+        display: flex;
+        padding-top: 2px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        margin-top: 5px;
+        margin-left: 2px;
+        margin-right: 2px;
+        cursor: pointer;
+
+        .tab-close {
+          margin-left: 5px;
+        }
+        .tab-close:hover {
+          border-radius: 30%;
+          background-color: rgb(37, 37, 38);
+        }
+      }
+      .tab.active {
+        background-color: rgb(41, 44, 52);
+      }
+    }
+
+    .editor {
+      flex: 1;
+      display: flex;
+      font-family: var(--vzcode-font-family);
+      overflow-x: auto;
+    }
+  }
+}
+
+.themes {
+  color: rgb(37, 37, 38);
+}

package/src/server/computeInitialDocument.js

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import { randomId } from '../randomId.js';
+import { enableDirectories, debugDirectories } from './featureFlags.js';
+
+const isDirectory = (file) => file.endsWith('/');
+
+// Lists files from the file system,
+// converts them into the VZCode internal
+// ShareDB-compatible data structure.
+export const computeInitialDocument = ({ fullPath }) => {
+  // Isolate files, not directories.
+  // Inspired by https://stackoverflow.com/questions/41472161/fs-readdir-ignore-directories
+
+  const unsearchedDirectories = [''];
+
+  // Initialize the document using our data structure for representing files.
+  //  * Keys are file ids, which are random numbers.
+  //  * Values are objects with properties:
+  //    * text - the text content of the file
+  //    * name - the file name
+  const initialDocument = {};
+
+  // Stack for recursively traversing directories.
+  let files = [];
+
+  while (unsearchedDirectories.length !== 0) {
+    const currentDirectory = unsearchedDirectories.pop();
+    const currentDirectoryPath = path.join(fullPath, currentDirectory);
+    const newFiles = fs
+      .readdirSync(currentDirectoryPath, { withFileTypes: true })
+      .filter((dirent) => (enableDirectories ? true : dirent.isFile()))
+
+      // Add a trailing slash for directories
+      .map((dirent) => {
+        const relativePath =
+          currentDirectory === ''
+            ? dirent.name
+            : currentDirectory + '/' + dirent.name;
+
+        if (dirent.isFile()) {
+          return relativePath;
+        }
+        unsearchedDirectories.push(relativePath);
+        return relativePath + '/';
+      });
+    // console.log(currentDirectory);
+
+    files = [...files, ...newFiles];
+  }
+
+  files.forEach((file) => {
+    const id = randomId();
+    initialDocument[id] = {
+      text: isDirectory(file)
+        ? null
+        : fs.readFileSync(path.join(fullPath, file), 'utf-8'),
+      name: file,
+    };
+  });
+
+  if (debugDirectories) {
+    console.log('files:');
+    console.log(files);
+    console.log('initialDocument:');
+    console.log(JSON.stringify(initialDocument, null, 2));
+  }
+  return initialDocument;
+};

package/src/server/featureFlags.js

@@ -0,0 +1,4 @@
+// Feature flag for directories, disabled until it's fully working.
+export const enableDirectories = true;
+
+export const debugDirectories = false;

package/{cli.js → src/server/index.js}

@@ -7,9 +7,13 @@ import WebSocketJSONStream from '@teamwork/websocket-json-stream';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { json1Presence } from './src/ot.js';
-import { randomId } from './src/randomId.js';
 import open from 'open';
+import ngrok from 'ngrok';
+import dotenv from 'dotenv';
+import { computeInitialDocument } from './computeInitialDocument.js';
+import { json1Presence } from '../ot.js';
+
+dotenv.config({ path: '../../.env' });
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoSaveDebounceTimeMS = 800;
@@ -17,28 +21,9 @@ const autoSaveDebounceTimeMS = 800;
 // Server port.
 const port = 3030;
 
-// Use the current working directory to look for files.
-const fullPath = process.cwd();
-
-// Isolate files, not directories.
-// Inspired by https://stackoverflow.com/questions/41472161/fs-readdir-ignore-directories
-const files = fs
-  .readdirSync(fullPath, { withFileTypes: true })
-  .filter((dirent) => dirent.isFile())
-  .map((dirent) => dirent.name);
-
-// Initialize the document using our data structure for representing files.
-//  * Keys are file ids, which are random numbers.
-//  * Values are objects with properties:
-//    * text - the text content of the file
-//    * name - the file name
-const initialDocument = {};
-files.forEach((file) => {
-  const id = randomId();
-  initialDocument[id] = {
-    text: fs.readFileSync(file, 'utf-8'),
-    name: file,
-  };
+const initialDocument = computeInitialDocument({
+  // Use the current working directory to look for files.
+  fullPath: process.cwd(),
 });
 
 // Register our custom OT type,
@@ -66,9 +51,9 @@ wss.on('connection', (ws) => {
 });
 
 // Serve static files
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const dir = path.join(__dirname, '/dist');
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+const dir = path.join(dirname, '..', '..', 'dist');
 app.use(express.static(dir));
 
 // Create the initial "document",
@@ -127,7 +112,16 @@ shareDBDoc.subscribe(() => {
   });
 });
 
-server.listen(port, () => {
-  console.log(`Editor is live at http://localhost:${port}`);
-  open(`http://localhost:${port}`);
+server.listen(port, async () => {
+  if (process.env.NGROK_TOKEN) {
+    (async function () {
+      await ngrok.authtoken(process.env.NGROK_TOKEN);
+      const url = await ngrok.connect(port);
+      console.log(`Editor is live at ${url}`);
+      open(url);
+    })();
+  } else {
+    console.log(`Editor is live at http://localhost:${port}`);
+    open(`http://localhost:${port}`);
+  }
 });