vzcode 0.2.0 → 0.3.0
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.
- package/README.md +30 -17
- package/cli.js +5 -0
- package/dist/assets/{index-5e86a45f.js → index-4694dca8.js} +33 -33
- package/dist/assets/index-58524f84.css +1 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.html +3 -4
- package/package.json +3 -2
- package/src/App.jsx +315 -0
- package/src/CodeEditor.jsx +31 -0
- package/src/diff.js +6 -0
- package/src/getOrCreateEditor.js +85 -0
- package/src/json1PresenceBroadcast.js +26 -0
- package/src/json1PresenceDisplay.js +143 -0
- package/src/main.jsx +9 -0
- package/src/ot.js +5 -0
- package/src/randomId.js +2 -0
- package/src/settings.jsx +141 -0
- package/src/style.css +207 -0
- package/dist/assets/index-5c2f5f84.css +0 -1
- package/dist/vite.svg +0 -1
package/src/settings.jsx
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
import Modal from 'react-bootstrap/Modal';
|
|
3
|
+
import Form from 'react-bootstrap/Form';
|
|
4
|
+
import Button from 'react-bootstrap/Button';
|
|
5
|
+
import Select from 'react-select';
|
|
6
|
+
|
|
7
|
+
// TODO document where this list came from
|
|
8
|
+
// TODO research which themes are available for CodeMirror 6
|
|
9
|
+
const themes = [
|
|
10
|
+
{ value: 'default', label: 'default' },
|
|
11
|
+
{ value: '3024-day', label: '3024-day' },
|
|
12
|
+
{ value: '3024-night', label: '3024-night' },
|
|
13
|
+
{ value: 'abbott', label: 'abbott' },
|
|
14
|
+
{ value: 'abcdef', label: 'abcdef' },
|
|
15
|
+
{ value: 'ambiance', label: 'ambiance' },
|
|
16
|
+
{ value: 'ayu-dark', label: 'ayu-dark' },
|
|
17
|
+
{ value: 'ayu-mirage', label: 'ayu-mirage' },
|
|
18
|
+
{ value: 'base16-dark', label: 'base16-dark' },
|
|
19
|
+
{ value: 'base16-light', label: 'base16-light' },
|
|
20
|
+
{ value: 'bespin', label: 'bespin' },
|
|
21
|
+
{ value: 'blackboard', label: 'blackboard' },
|
|
22
|
+
{ value: 'cobalt', label: 'cobalt' },
|
|
23
|
+
{ value: 'colorforth', label: 'colorforth' },
|
|
24
|
+
{ value: 'darcula', label: 'darcula' },
|
|
25
|
+
{ value: 'duotone-dark', label: 'duotone-dark' },
|
|
26
|
+
{ value: 'duotone-light', label: 'duotone-light' },
|
|
27
|
+
{ value: 'eclipse', label: 'eclipse' },
|
|
28
|
+
{ value: 'elegant', label: 'elegant' },
|
|
29
|
+
{ value: 'erlang-dark', label: 'erlang-dark' },
|
|
30
|
+
{ value: 'gruvbox-dark', label: 'gruvbox-dark' },
|
|
31
|
+
{ value: 'hopscotch', label: 'hopscotch' },
|
|
32
|
+
{ value: 'icecoder', label: 'icecoder' },
|
|
33
|
+
{ value: 'idea', label: 'idea' },
|
|
34
|
+
{ value: 'isotope', label: 'isotope' },
|
|
35
|
+
{ value: 'juejin', label: 'juejin' },
|
|
36
|
+
{ value: 'lesser-dark', label: 'lesser-dark' },
|
|
37
|
+
{ value: 'liquibyte', label: 'liquibyte' },
|
|
38
|
+
{ value: 'lucario', label: 'lucario' },
|
|
39
|
+
{ value: 'material', label: 'material' },
|
|
40
|
+
{ value: 'material-darker', label: 'material-darker' },
|
|
41
|
+
{ value: 'material-palenight', label: 'material-palenight' },
|
|
42
|
+
{ value: 'material-ocean', label: 'material-ocean' },
|
|
43
|
+
{ value: 'mbo', label: 'mbo' },
|
|
44
|
+
{ value: 'mdn-like', label: 'mdn-like' },
|
|
45
|
+
{ value: 'midnight', label: 'midnight' },
|
|
46
|
+
{ value: 'monokai', label: 'monokai' },
|
|
47
|
+
{ value: 'moxer', label: 'moxer' },
|
|
48
|
+
{ value: 'neat', label: 'neat' },
|
|
49
|
+
{ value: 'neo', label: 'neo' },
|
|
50
|
+
{ value: 'night', label: 'night' },
|
|
51
|
+
{ value: 'nord', label: 'nord' },
|
|
52
|
+
{ value: 'oceanic-next', label: 'oceanic-next' },
|
|
53
|
+
{ value: 'OneDark', label: 'One Dark' },
|
|
54
|
+
{ value: 'panda-syntax', label: 'panda-syntax' },
|
|
55
|
+
{ value: 'paraiso-dark', label: 'paraiso-dark' },
|
|
56
|
+
{ value: 'paraiso-light', label: 'paraiso-light' },
|
|
57
|
+
{ value: 'pastel-on-dark', label: 'pastel-on-dark' },
|
|
58
|
+
{ value: 'railscasts', label: 'railscasts' },
|
|
59
|
+
{ value: 'rubyblue', label: 'rubyblue' },
|
|
60
|
+
{ value: 'seti', label: 'seti' },
|
|
61
|
+
{ value: 'shadowfox', label: 'shadowfox' },
|
|
62
|
+
{ value: 'solarized', label: 'solarized' },
|
|
63
|
+
{ value: 'ssms', label: 'ssms' },
|
|
64
|
+
{ value: 'the-matrix', label: 'the-matrix' },
|
|
65
|
+
{ value: 'tomorrow-night-bright', label: 'tomorrow-night-bright' },
|
|
66
|
+
{ value: 'tomorrow-night-eighties', label: 'tomorrow-night-eighties' },
|
|
67
|
+
{ value: 'ttcn', label: 'ttcn' },
|
|
68
|
+
{ value: 'twilight', label: 'twilight' },
|
|
69
|
+
{ value: 'vibrant-ink', label: 'vibrant-ink' },
|
|
70
|
+
{ value: 'xq-dark', label: 'xq-dark' },
|
|
71
|
+
{ value: 'xq-light', label: 'xq-light' },
|
|
72
|
+
{ value: 'yeti', label: 'yeti' },
|
|
73
|
+
{ value: 'yonce', label: 'yonce' },
|
|
74
|
+
{ value: 'zenburn', label: 'zenburn' },
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
const saveTimes = [
|
|
78
|
+
{ value: 1, label: '1 second' },
|
|
79
|
+
{ value: 5, label: '5 seconds' },
|
|
80
|
+
{ value: 10, label: '10 seconds' },
|
|
81
|
+
{ value: 30, label: '30 seconds' },
|
|
82
|
+
];
|
|
83
|
+
|
|
84
|
+
export const Settings = ({ show, onClose, setTheme }) => {
|
|
85
|
+
const handleChange = useCallback((selectedOption) => {
|
|
86
|
+
setTheme(selectedOption.value);
|
|
87
|
+
}, []);
|
|
88
|
+
|
|
89
|
+
const handleSaveTimeChange = useCallback((selectedOption) => {
|
|
90
|
+
const time = [{ value: selectedOption.value }];
|
|
91
|
+
fetch('/saveTime', {
|
|
92
|
+
method: 'POST',
|
|
93
|
+
headers: {
|
|
94
|
+
'Content-Type': 'application/json',
|
|
95
|
+
},
|
|
96
|
+
body: JSON.stringify(time),
|
|
97
|
+
});
|
|
98
|
+
}, []);
|
|
99
|
+
|
|
100
|
+
return show ? (
|
|
101
|
+
<Modal show={show} onHide={onClose} animation={false}>
|
|
102
|
+
<Modal.Header closeButton>
|
|
103
|
+
<Modal.Title>Settings</Modal.Title>
|
|
104
|
+
</Modal.Header>
|
|
105
|
+
<Modal.Body>
|
|
106
|
+
<Form.Group className="mb-3" controlId="formFork">
|
|
107
|
+
<Form.Label>Username</Form.Label>
|
|
108
|
+
<Form.Control type="text" placeholder="Enter username" />
|
|
109
|
+
<Form.Text className="text-muted">
|
|
110
|
+
Enter a username to be displayed on your cursor
|
|
111
|
+
</Form.Text>
|
|
112
|
+
</Form.Group>
|
|
113
|
+
<Form.Group className="mb-3" controlId="formFork">
|
|
114
|
+
<Form.Label>Theme</Form.Label>
|
|
115
|
+
<Select
|
|
116
|
+
classvalue="themes"
|
|
117
|
+
options={themes}
|
|
118
|
+
onChange={handleChange}
|
|
119
|
+
/>
|
|
120
|
+
<Form.Text className="text-muted">
|
|
121
|
+
Select a color theme for the editor
|
|
122
|
+
</Form.Text>
|
|
123
|
+
</Form.Group>
|
|
124
|
+
<Form.Group className="mb-3" controlId="formFork">
|
|
125
|
+
<Form.Label>Auto-Save Time</Form.Label>
|
|
126
|
+
<Select
|
|
127
|
+
classvalue="themes"
|
|
128
|
+
options={saveTimes}
|
|
129
|
+
onChange={handleSaveTimeChange}
|
|
130
|
+
/>
|
|
131
|
+
<Form.Text className="text-muted">Select an auto save time</Form.Text>
|
|
132
|
+
</Form.Group>
|
|
133
|
+
</Modal.Body>
|
|
134
|
+
<Modal.Footer>
|
|
135
|
+
<Button variant="primary" onClick={onClose}>
|
|
136
|
+
Done
|
|
137
|
+
</Button>
|
|
138
|
+
</Modal.Footer>
|
|
139
|
+
</Modal>
|
|
140
|
+
) : null;
|
|
141
|
+
};
|
package/src/style.css
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
/* Inspired by: https://www.codinglabweb.com/2021/06/dropdown-sidebar-menu-html-css.html */
|
|
2
|
+
/* Google Fonts Import Link */
|
|
3
|
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
|
4
|
+
@import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css');
|
|
5
|
+
@import url('https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');
|
|
6
|
+
|
|
7
|
+
* {
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* width */
|
|
14
|
+
::-webkit-scrollbar {
|
|
15
|
+
width: 10px;
|
|
16
|
+
height: 20px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Track */
|
|
20
|
+
::-webkit-scrollbar-track {
|
|
21
|
+
background: rgb(41, 44, 52);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Handle */
|
|
25
|
+
::-webkit-scrollbar-thumb {
|
|
26
|
+
background: rgb(37, 37, 38);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Handle on hover */
|
|
30
|
+
::-webkit-scrollbar-thumb:hover {
|
|
31
|
+
background: #555;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
|
|
36
|
+
Liberation Mono, monospace;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
body {
|
|
40
|
+
background: rgb(41, 44, 52);
|
|
41
|
+
font-family: 'Poppins', sans-serif;
|
|
42
|
+
overflow-x: hidden;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.tab {
|
|
46
|
+
width: max-content;
|
|
47
|
+
height: 30px;
|
|
48
|
+
background: rgb(45, 45, 45);
|
|
49
|
+
text-align: center;
|
|
50
|
+
color: #fff;
|
|
51
|
+
font-family: var(--main-font-family);
|
|
52
|
+
justify-content: center;
|
|
53
|
+
align-items: center;
|
|
54
|
+
display: flex;
|
|
55
|
+
padding-left: 10px;
|
|
56
|
+
padding-right: 10px;
|
|
57
|
+
border-top-left-radius: 10px;
|
|
58
|
+
border-top-right-radius: 10px;
|
|
59
|
+
margin-top: 5px;
|
|
60
|
+
margin-left: 2px;
|
|
61
|
+
margin-right: 2px;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.tab.active {
|
|
66
|
+
background-color: rgb(41, 44, 52);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.tab-close {
|
|
70
|
+
display: flex;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
margin-left: 5px;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
align-items: center;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.tab-close:hover {
|
|
78
|
+
border-radius: 30%;
|
|
79
|
+
background-color: rgb(37, 37, 38);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.editor {
|
|
83
|
+
position: relative;
|
|
84
|
+
margin-left: 200px;
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
top: 30px;
|
|
88
|
+
bottom: 0;
|
|
89
|
+
background-color: rgb(41, 44, 52);
|
|
90
|
+
color: #fff;
|
|
91
|
+
font-family: var(--main-font-family);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.tab-list {
|
|
95
|
+
position: fixed;
|
|
96
|
+
display: flex;
|
|
97
|
+
flex-direction: row;
|
|
98
|
+
top: 0;
|
|
99
|
+
left: 200px;
|
|
100
|
+
height: 35px;
|
|
101
|
+
width: 100%;
|
|
102
|
+
background: rgb(37, 37, 38);
|
|
103
|
+
z-index: 100;
|
|
104
|
+
transition: all 0.5s ease;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.bottom-bar {
|
|
108
|
+
position: absolute;
|
|
109
|
+
bottom: 0;
|
|
110
|
+
left: 0;
|
|
111
|
+
height: 20px;
|
|
112
|
+
width: 100%;
|
|
113
|
+
background: rgb(45, 45, 45);
|
|
114
|
+
z-index: 100;
|
|
115
|
+
transition: all 0.5s ease;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.sidebar {
|
|
119
|
+
position: fixed;
|
|
120
|
+
top: 0;
|
|
121
|
+
left: 0;
|
|
122
|
+
height: 100%;
|
|
123
|
+
width: 200px;
|
|
124
|
+
background: rgb(54, 65, 89);
|
|
125
|
+
z-index: 100;
|
|
126
|
+
transition: all 0.5s ease;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.link-name {
|
|
130
|
+
margin-top: 30px;
|
|
131
|
+
margin-left: 10px;
|
|
132
|
+
color: rgb(154, 160, 172);
|
|
133
|
+
font-size: 12px;
|
|
134
|
+
text-decoration: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.file {
|
|
138
|
+
display: flex;
|
|
139
|
+
flex-direction: row;
|
|
140
|
+
align-items: center;
|
|
141
|
+
justify-content: left;
|
|
142
|
+
width: 180px;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
margin-left: 10px;
|
|
145
|
+
color: rgb(219, 221, 225);
|
|
146
|
+
border-radius: 5px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.full-Box {
|
|
150
|
+
width: inherit;
|
|
151
|
+
height: inherit;
|
|
152
|
+
padding: 7px;
|
|
153
|
+
display: flex;
|
|
154
|
+
flex-direction: row;
|
|
155
|
+
align-items: center;
|
|
156
|
+
justify-content: space-between;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.utilities {
|
|
160
|
+
justify-content: right;
|
|
161
|
+
margin-right: 3px;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* TODO consistent naming "no-utils" */
|
|
165
|
+
.noUtils {
|
|
166
|
+
display: none;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.settings {
|
|
170
|
+
position: absolute;
|
|
171
|
+
bottom: 0;
|
|
172
|
+
height: 30px;
|
|
173
|
+
/* TODO overhaul CSS to use Flexbox for entire sidebar */
|
|
174
|
+
width: 180px;
|
|
175
|
+
z-index: 100;
|
|
176
|
+
color: rgb(219, 221, 225);
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
justify-content: center;
|
|
181
|
+
padding: 14px 0;
|
|
182
|
+
margin: 10px;
|
|
183
|
+
border-radius: 5px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.file:hover,
|
|
187
|
+
.settings:hover {
|
|
188
|
+
background-color: rgb(74, 84, 105);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* TODO consistent naming new-btn */
|
|
192
|
+
.newBTN {
|
|
193
|
+
justify-content: right;
|
|
194
|
+
margin-right: 10px;
|
|
195
|
+
cursor: pointer;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.themes {
|
|
199
|
+
color: rgb(37, 37, 38);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.name {
|
|
203
|
+
text-overflow: ellipsis;
|
|
204
|
+
white-space: nowrap;
|
|
205
|
+
overflow: hidden;
|
|
206
|
+
max-width: 130px;
|
|
207
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@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";*{margin:0;padding:0;box-sizing:border-box}: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}.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:fixed;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}.sidebar{position:fixed;top:0;left:0;height:100%;width:200px;background:rgb(54,65,89);z-index:100;transition:all .5s ease}.link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.file{display:flex;flex-direction:row;align-items:center;justify-content:left;width:180px;cursor:pointer;margin-left:10px;color:#dbdde1;border-radius:5px}.full-Box{width:inherit;height:inherit;padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.utilities{justify-content:right;margin-right:3px}.noUtils{display:none}.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}.file:hover,.settings:hover{background-color:#4a5469}.newBTN{justify-content:right;margin-right:10px;cursor:pointer}.themes{color:#252526}
|
package/dist/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|