vzcode 0.5.0 → 0.7.0

package/src/client/CodeEditor.jsx

@@ -1,31 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-import { getOrCreateEditor } from './getOrCreateEditor';
-
-export const CodeEditor = ({
-  activeFileId,
-  shareDBDoc,
-  localPresence,
-  docPresence,
-  theme,
-}) => {
-  const ref = useRef();
-
-  // useEffect was buggy in that sometimes ref.current was undefined.
-  // useLayoutEffect seems to solve that issue.
-  useLayoutEffect(() => {
-    const editor = getOrCreateEditor({
-      fileId: activeFileId,
-      shareDBDoc,
-      localPresence,
-      docPresence,
-      theme,
-    });
-    ref.current.appendChild(editor.dom);
-
-    return () => {
-      ref.current.removeChild(editor.dom);
-    };
-  }, [shareDBDoc, activeFileId]);
-
-  return <div className="editor" ref={ref} />;
-};

package/src/client/Sidebar/Directory.jsx

@@ -1,62 +0,0 @@
-import { useCallback } from 'react';
-import { Item } from './Item';
-import { FileOrDirectory } from './FileOrDirectory';
-import { DirectoryArrowSVG } from './DirectoryArrowSVG';
-
-export const Directory = ({
-  name,
-  path,
-  children,
-  handleRenameFileClick,
-  handleDeleteFileClick,
-  handleFileClick,
-  openDirectories,
-  toggleDirectory,
-}) => {
-  const handleClick = useCallback(() => {
-    toggleDirectory(path);
-  }, [toggleDirectory]);
-
-  const handleDeleteClick = useCallback(() => {
-    console.log('TODO handleDeleteDirectoryClick');
-  }, []);
-
-  const handleRenameClick = useCallback(() => {
-    console.log('TODO handleRenameDirectoryClick');
-  }, []);
-
-  const isOpen = openDirectories[path];
-  return (
-    <>
-      <Item
-        name={name}
-        handleClick={handleClick}
-        handleDeleteClick={handleDeleteClick}
-        handleRenameClick={handleRenameClick}
-      >
-        <div
-          className="arrow-wrapper"
-          style={{ transform: `rotate(${isOpen ? 90 : 0}deg)` }}
-        >
-          <DirectoryArrowSVG />
-        </div>
-        {name}
-      </Item>
-      {children && isOpen ? (
-        <div className="indentation">
-          {children.map((entity) => (
-            <FileOrDirectory
-              entity={entity}
-              key={entity.fileId || entity.path}
-              handleRenameFileClick={handleRenameFileClick}
-              handleDeleteFileClick={handleDeleteFileClick}
-              handleFileClick={handleFileClick}
-              openDirectories={openDirectories}
-              toggleDirectory={toggleDirectory}
-            />
-          ))}
-        </div>
-      ) : null}
-    </>
-  );
-};

package/src/client/Sidebar/FileOrDirectory.jsx

@@ -1,33 +0,0 @@
-import { File } from './File';
-import { Directory } from './Directory';
-
-export const FileOrDirectory = ({
-  entity,
-  handleRenameFileClick,
-  handleDeleteFileClick,
-  handleFileClick,
-  openDirectories,
-  toggleDirectory,
-}) => {
-  const { name, path, fileId, file, children } = entity;
-  return file ? (
-    <File
-      fileId={fileId}
-      name={name}
-      handleRenameFileClick={handleRenameFileClick}
-      handleDeleteFileClick={handleDeleteFileClick}
-      handleFileClick={handleFileClick}
-    />
-  ) : (
-    <Directory
-      name={name}
-      path={path}
-      children={children}
-      handleRenameFileClick={handleRenameFileClick}
-      handleDeleteFileClick={handleDeleteFileClick}
-      handleFileClick={handleFileClick}
-      openDirectories={openDirectories}
-      toggleDirectory={toggleDirectory}
-    />
-  );
-};

package/src/client/Sidebar/index.jsx

@@ -1,64 +0,0 @@
-import { useMemo } from 'react';
-import { getFileTree } from '../getFileTree';
-import { sortFileTree } from '../sortFileTree';
-import { disableSettings } from '../featureFlags';
-import { FileOrDirectory } from './FileOrDirectory';
-import { useOpenDirectories } from './useOpenDirectories';
-
-import './styles.css';
-
-export const Sidebar = ({
-  createFile,
-  data,
-  handleRenameFileClick,
-  handleDeleteFileClick,
-  handleFileClick,
-  setSettings,
-  settings,
-}) => {
-  const fileTree = useMemo(
-    () => (data ? sortFileTree(getFileTree(data)) : null),
-    [data]
-  );
-
-  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>
-      </div>
-      {fileTree
-        ? fileTree.children.map((entity) => (
-            <FileOrDirectory
-              entity={entity}
-              key={entity.fileId || entity.path}
-              handleRenameFileClick={handleRenameFileClick}
-              handleDeleteFileClick={handleDeleteFileClick}
-              handleFileClick={handleFileClick}
-              openDirectories={openDirectories}
-              toggleDirectory={toggleDirectory}
-            />
-          ))
-        : null}
-      {disableSettings ? null : (
-        <div className="settings" onClick={() => setSettings(!settings)}>
-          Settings
-        </div>
-      )}
-    </div>
-  );
-};

package/src/client/Sidebar/styles.css

@@ -1,88 +0,0 @@
-.vz-sidebar {
-  /* TODO remove position: fixed, overhaul CSS to use Flexbox for entire app */
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 200px;
-  background: rgb(54, 65, 89);
-}
-
-.vz-sidebar .full-box {
-  padding: 7px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.vz-sidebar .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;
-}
-
-.vz-sidebar .link-name {
-  margin-top: 30px;
-  margin-left: 10px;
-  color: rgb(154, 160, 172);
-  font-size: 12px;
-  text-decoration: none;
-}
-
-.vz-sidebar .new-btn {
-  justify-content: right;
-  margin-right: 10px;
-  cursor: pointer;
-}
-
-.vz-sidebar .utils {
-  display: flex;
-}
-
-.vz-sidebar .utilities {
-  margin-right: 3px;
-}
-
-.vz-sidebar .settings {
-  position: absolute;
-  bottom: 0;
-  height: 30px;
-  width: 180px;
-  z-index: 100;
-  color: rgb(219, 221, 225);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 14px 0;
-  margin: 10px;
-  border-radius: 5px;
-}
-
-.vz-sidebar .file-or-directory:hover,
-.vz-sidebar .settings:hover {
-  background-color: rgb(74, 84, 105);
-}
-
-.vz-sidebar .name {
-  display: flex;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-/* Responsible for indenting directories */
-.vz-sidebar .indentation {
-  margin-left: 20px;
-}
-
-.vz-sidebar .arrow-wrapper {
-  margin-right: 4px;
-}

package/src/client/getOrCreateEditor.js

@@ -1,84 +0,0 @@
-import { EditorView, basicSetup } from 'codemirror';
-import { 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 { json1PresenceBroadcast } from './json1PresenceBroadcast';
-import { json1PresenceDisplay } from './json1PresenceDisplay';
-
-// Singleton cache of CodeMirror instances
-// These are created, but never destroyed.
-// TODO consider invalidating this cache at some point.
-//  * Keys are file ids
-//  * Values are CodeMirror instances
-const editorCache = new Map();
-
-// Gets or creates a CodeMirror editor for the given file id.
-export const getOrCreateEditor = ({
-  fileId,
-  shareDBDoc,
-  localPresence,
-  docPresence,
-}) => {
-  const data = shareDBDoc.data;
-
-  const fileExtension = data[fileId].name.split('.').pop();
-
-  // The path for this file in the ShareDB document.
-  const path = [fileId, 'text'];
-
-  const extensions = [
-    // This plugin implements multiplayer editing,
-    // real-time synchronozation of changes across clients.
-    // Does not deal with showing others' cursors.
-    json1Sync({
-      shareDBDoc,
-      path,
-      json1: json1Presence,
-      textUnicode,
-    }),
-
-    // Deals with broadcasting changes in cursor location and selection.
-    json1PresenceBroadcast({ path, localPresence }),
-
-    // Deals with receiving the broadcas from other clients and displaying them.
-    json1PresenceDisplay({ path, docPresence }),
-
-    basicSetup,
-    oneDark,
-  ];
-
-  if (
-    fileExtension === 'js' ||
-    fileExtension === 'json' ||
-    fileExtension == 'jsx' ||
-    fileExtension == 'ts'
-  ) {
-    extensions.push(javascript());
-  } else if (fileExtension === 'html') {
-    extensions.push(html());
-  } else if (fileExtension === 'css') {
-    extensions.push(css());
-  } else if (fileExtension === 'md') {
-    extensions.push(markdown());
-  }
-
-  let editor = editorCache.get(fileId);
-  if (!editor) {
-    // Cache miss --> mint a new editor.
-    editor = new EditorView({
-      state: EditorState.create({
-        doc: data[fileId].text,
-        extensions,
-      }),
-    });
-
-    // Populate the cache.
-    editorCache.set(fileId, editor);
-  }
-  return editor;
-};

package/src/client/settings.jsx

@@ -1,141 +0,0 @@
-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';
-
-// TODO document where this list came from
-// TODO research which themes are available for CodeMirror 6
-const themes = [
-  { value: 'default', label: 'default' },
-  { value: '3024-day', label: '3024-day' },
-  { value: '3024-night', label: '3024-night' },
-  { value: 'abbott', label: 'abbott' },
-  { value: 'abcdef', label: 'abcdef' },
-  { value: 'ambiance', label: 'ambiance' },
-  { value: 'ayu-dark', label: 'ayu-dark' },
-  { value: 'ayu-mirage', label: 'ayu-mirage' },
-  { value: 'base16-dark', label: 'base16-dark' },
-  { value: 'base16-light', label: 'base16-light' },
-  { value: 'bespin', label: 'bespin' },
-  { value: 'blackboard', label: 'blackboard' },
-  { value: 'cobalt', label: 'cobalt' },
-  { value: 'colorforth', label: 'colorforth' },
-  { value: 'darcula', label: 'darcula' },
-  { value: 'duotone-dark', label: 'duotone-dark' },
-  { value: 'duotone-light', label: 'duotone-light' },
-  { value: 'eclipse', label: 'eclipse' },
-  { value: 'elegant', label: 'elegant' },
-  { value: 'erlang-dark', label: 'erlang-dark' },
-  { value: 'gruvbox-dark', label: 'gruvbox-dark' },
-  { value: 'hopscotch', label: 'hopscotch' },
-  { value: 'icecoder', label: 'icecoder' },
-  { value: 'idea', label: 'idea' },
-  { value: 'isotope', label: 'isotope' },
-  { value: 'juejin', label: 'juejin' },
-  { value: 'lesser-dark', label: 'lesser-dark' },
-  { value: 'liquibyte', label: 'liquibyte' },
-  { value: 'lucario', label: 'lucario' },
-  { value: 'material', label: 'material' },
-  { value: 'material-darker', label: 'material-darker' },
-  { value: 'material-palenight', label: 'material-palenight' },
-  { value: 'material-ocean', label: 'material-ocean' },
-  { value: 'mbo', label: 'mbo' },
-  { value: 'mdn-like', label: 'mdn-like' },
-  { value: 'midnight', label: 'midnight' },
-  { value: 'monokai', label: 'monokai' },
-  { value: 'moxer', label: 'moxer' },
-  { value: 'neat', label: 'neat' },
-  { value: 'neo', label: 'neo' },
-  { value: 'night', label: 'night' },
-  { value: 'nord', label: 'nord' },
-  { value: 'oceanic-next', label: 'oceanic-next' },
-  { value: 'OneDark', label: 'One Dark' },
-  { value: 'panda-syntax', label: 'panda-syntax' },
-  { value: 'paraiso-dark', label: 'paraiso-dark' },
-  { value: 'paraiso-light', label: 'paraiso-light' },
-  { value: 'pastel-on-dark', label: 'pastel-on-dark' },
-  { value: 'railscasts', label: 'railscasts' },
-  { value: 'rubyblue', label: 'rubyblue' },
-  { value: 'seti', label: 'seti' },
-  { value: 'shadowfox', label: 'shadowfox' },
-  { value: 'solarized', label: 'solarized' },
-  { value: 'ssms', label: 'ssms' },
-  { value: 'the-matrix', label: 'the-matrix' },
-  { value: 'tomorrow-night-bright', label: 'tomorrow-night-bright' },
-  { value: 'tomorrow-night-eighties', label: 'tomorrow-night-eighties' },
-  { value: 'ttcn', label: 'ttcn' },
-  { value: 'twilight', label: 'twilight' },
-  { value: 'vibrant-ink', label: 'vibrant-ink' },
-  { value: 'xq-dark', label: 'xq-dark' },
-  { value: 'xq-light', label: 'xq-light' },
-  { value: 'yeti', label: 'yeti' },
-  { value: 'yonce', label: 'yonce' },
-  { value: 'zenburn', label: 'zenburn' },
-];
-
-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 }) => {
-  const handleChange = useCallback((selectedOption) => {
-    setTheme(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/style.css

@@ -1,120 +0,0 @@
-/* Inspired by: https://www.codinglabweb.com/2021/06/dropdown-sidebar-menu-html-css.html */
-/* Google Fonts Import Link */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-@import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css');
-@import url('https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* width */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 20px;
-}
-
-/* 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;
-}
-
-:root {
-  --main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-    Liberation Mono, monospace;
-}
-
-body {
-  background: rgb(41, 44, 52);
-  font-family: 'Poppins', sans-serif;
-  overflow-x: hidden;
-}
-
-.tab {
-  width: max-content;
-  height: 30px;
-  background: rgb(45, 45, 45);
-  text-align: center;
-  color: #fff;
-  font-family: var(--main-font-family);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  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.active {
-  background-color: rgb(41, 44, 52);
-}
-
-.tab-close {
-  display: flex;
-  cursor: pointer;
-  margin-left: 5px;
-  justify-content: center;
-  align-items: center;
-}
-
-.tab-close:hover {
-  border-radius: 30%;
-  background-color: rgb(37, 37, 38);
-}
-
-.editor {
-  position: relative;
-  margin-left: 200px;
-  width: 100%;
-  height: 100%;
-  top: 30px;
-  bottom: 0;
-  background-color: rgb(41, 44, 52);
-  color: #fff;
-  font-family: var(--main-font-family);
-}
-
-.tab-list {
-  position: fixed;
-  display: flex;
-  flex-direction: row;
-  top: 0;
-  left: 200px;
-  height: 35px;
-  width: 100%;
-  background: rgb(37, 37, 38);
-  z-index: 100;
-  transition: all 0.5s ease;
-}
-
-.bottom-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 20px;
-  width: 100%;
-  background: rgb(45, 45, 45);
-  z-index: 100;
-  transition: all 0.5s ease;
-}
-
-.themes {
-  color: rgb(37, 37, 38);
-}