vzcode 0.5.0 → 0.6.0

package/src/client/getOrCreateEditor.js

@@ -1,10 +1,9 @@
 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 { json1PresenceBroadcast } from './json1PresenceBroadcast';
@@ -23,6 +22,7 @@ export const getOrCreateEditor = ({
   shareDBDoc,
   localPresence,
   docPresence,
+  theme
 }) => {
   const data = shareDBDoc.data;
 
@@ -31,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.
@@ -49,7 +51,7 @@ export const getOrCreateEditor = ({
     json1PresenceDisplay({ path, docPresence }),
 
     basicSetup,
-    oneDark,
+    themeSet.of(theme),
   ];
 
   if (
@@ -69,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/client/settings.jsx

@@ -3,75 +3,28 @@ 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: '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' },
+  { 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 = [
@@ -81,9 +34,12 @@ const saveTimes = [
   { value: 30, label: '30 seconds' },
 ];
 
-export const Settings = ({ show, onClose, setTheme }) => {
+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) => {

package/src/client/{sortFileTree.js → sortFileTree.ts}

@@ -1,12 +1,16 @@
 // 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) => {
+export const sortFileTree = (fileTree: FileTree) => {
   if (fileTree.children) {
     fileTree.children.sort((a, b) => {
-      const aIsFile = a.file ? 1 : 0;
-      const bIsFile = b.file ? 1 : 0;
+      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);

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/types.ts

@@ -0,0 +1,57 @@
+// FileId
+//   * A unique ID for a file.
+//   * This is a random string.
+export type FileId = string;
+
+// Files
+//  * A collection of files.
+//  * Keys are _not_ file names or array indices,
+//    because based on past experience, that
+//    leads to very difficult frontend logic around
+//    OT in the case that a file is renamed or deleted.
+//  * When the file name changes, or files are added/deleted,
+//    this ID stays the same, simplifying things re:OT.
+export interface Files {
+  [fileId: FileId]: File;
+}
+
+// File
+//  * A file with `name` and `text`.
+export interface File {
+  // The file name.
+  // e.g. "index.html".
+  name: string;
+
+  // The text content of the file.
+  // e.g. "<body>Hello</body>"
+  text: string;
+}
+
+// FileTree
+//  * A tree of files.
+//  * Each node in the tree is either a directory or a file.
+//  * Each directory has a `children` array.
+//  * Each file has a `file` object.
+//  * Each file has a `fileId` string.
+//  * Each directory has a `name` string.
+//  * Each directory has a `path` string.
+//  * The `path` string is the path to the directory.
+//    e.g. "src/components".
+//  * The `path` string is the path to the file.
+//    e.g. "src/components/HelloWorld.js".
+export interface FileTree {
+  name: string;
+  path?: string;
+  children?: Array<FileTree | FileTreeFile>;
+}
+
+// FileTreeFile
+//  * A file in a file tree.
+//  * Each file has a `name` string.
+//  * Each file has a `file` object.
+//  * Each file has a `fileId` string.
+export interface FileTreeFile {
+  name: string;
+  file: File;
+  fileId: FileId;
+}

package/dist/assets/index-29b6a606.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";@import"https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css";@import"https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";.vz-sidebar{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:#dbdde1;border-radius:5px}.vz-sidebar .link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;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:#dbdde1;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:#4a5469}.vz-sidebar .name{display:flex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vz-sidebar .indentation{margin-left:20px}.vz-sidebar .arrow-wrapper{margin-right:4px}*{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{width:10px;height:20px}::-webkit-scrollbar-track{background:rgb(41,44,52)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-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:#292c34}.tab-close{display:flex;cursor:pointer;margin-left:5px;justify-content:center;align-items:center}.tab-close:hover{border-radius:30%;background-color:#252526}.editor{position:relative;margin-left:200px;width:100%;height:100%;top:30px;bottom:0;background-color:#292c34;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 .5s ease}.bottom-bar{position:absolute;bottom:0;left:0;height:20px;width:100%;background:rgb(45,45,45);z-index:100;transition:all .5s ease}.themes{color:#252526}