vzcode 0.0.3 → 0.0.5
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/cli.js +2 -11
- package/dist/assets/index-480eb572.css +1 -0
- package/dist/assets/index-6112ced9.js +69 -0
- package/{index.html → dist/index.html} +3 -1
- package/{public → dist}/vite.svg +0 -0
- package/package.json +13 -2
- package/.prettierignore +0 -3
- package/prototype/shell.html +0 -60
- package/src/App.css +0 -0
- package/src/App.jsx +0 -90
- package/src/index.css +0 -0
- package/src/main.jsx +0 -10
- package/src/style.css +0 -256
- package/test/TestFile1.txt +0 -0
- package/test/TestFile2.txt +0 -0
- package/test/TestFile3.txt +0 -0
- package/test/index.html +0 -9
- package/test/index.js +0 -1
- package/vite.config.js +0 -10
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Vite + React</title>
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-6112ced9.js"></script>
|
|
9
|
+
<link rel="stylesheet" href="/assets/index-480eb572.css">
|
|
8
10
|
</head>
|
|
9
11
|
<body>
|
|
10
12
|
<div id="root"></div>
|
|
11
|
-
|
|
13
|
+
|
|
12
14
|
</body>
|
|
13
15
|
</html>
|
package/{public → dist}/vite.svg
RENAMED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"bin": "cli.js",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist/**"
|
|
10
|
+
],
|
|
8
11
|
"scripts": {
|
|
9
12
|
"test": "cd test; node ../cli.js",
|
|
10
13
|
"prettier": "prettier {*.*,**/*.*} --single-quote --write",
|
|
11
|
-
"dev": "vite",
|
|
14
|
+
"dev": "vite; node ./cli.js",
|
|
12
15
|
"build": "vite build",
|
|
13
16
|
"preview": "vite preview",
|
|
14
17
|
"prepublishOnly": "npm run build"
|
|
@@ -35,7 +38,15 @@
|
|
|
35
38
|
},
|
|
36
39
|
"homepage": "https://github.com/vizhub-core/vzcode#readme",
|
|
37
40
|
"dependencies": {
|
|
41
|
+
"@codemirror/lang-css": "^6.0.2",
|
|
42
|
+
"@codemirror/lang-html": "^6.4.1",
|
|
43
|
+
"@codemirror/lang-javascript": "^6.1.3",
|
|
44
|
+
"@codemirror/lang-markdown": "^6.0.5",
|
|
45
|
+
"@codemirror/state": "^6.2.0",
|
|
46
|
+
"@codemirror/theme-one-dark": "^6.1.0",
|
|
38
47
|
"@teamwork/websocket-json-stream": "^2.0.0",
|
|
48
|
+
"codemirror": "^6.0.1",
|
|
49
|
+
"codemirror-ot": "^3.5.0",
|
|
39
50
|
"express": "^4.18.2",
|
|
40
51
|
"ot-json1": "^1.0.2",
|
|
41
52
|
"react": "^18.2.0",
|
package/.prettierignore
DELETED
package/prototype/shell.html
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<!-- Inspired by: https://www.codinglabweb.com/2021/06/dropdown-sidebar-menu-html-css.html -->
|
|
3
|
-
<html lang="en" dir="ltr">
|
|
4
|
-
|
|
5
|
-
<head>
|
|
6
|
-
<meta charset="UTF-8">
|
|
7
|
-
<link rel="stylesheet" href="style.css">
|
|
8
|
-
<!-- Boxiocns CDN Link -->
|
|
9
|
-
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
|
|
10
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
-
</head>
|
|
12
|
-
|
|
13
|
-
<body>
|
|
14
|
-
<div class="tabList"></div>
|
|
15
|
-
<div class="bottomBar"></div>
|
|
16
|
-
<div class="sidebar show">
|
|
17
|
-
|
|
18
|
-
<ul class="nav-links">
|
|
19
|
-
<li>
|
|
20
|
-
<div class="iocn-link">
|
|
21
|
-
<a href="#">
|
|
22
|
-
<i class='bx bx-folder'></i>
|
|
23
|
-
<span class="link_name">Files</span>
|
|
24
|
-
</a>
|
|
25
|
-
<i class='bx bxs-chevron-down arrow'></i>
|
|
26
|
-
</div>
|
|
27
|
-
<ul class="sub-menu">
|
|
28
|
-
<li><a class="link_name" href="#">Files</a></li>
|
|
29
|
-
<li><a href="#">index.html</a></li>
|
|
30
|
-
<li><a href="#">style.css</a></li>
|
|
31
|
-
<li><a href="#">script.js</a></li>
|
|
32
|
-
</ul>
|
|
33
|
-
</li>
|
|
34
|
-
<li>
|
|
35
|
-
<div class="profile-details">
|
|
36
|
-
<a href="#">
|
|
37
|
-
<i class='bx bx-cog'></i>
|
|
38
|
-
<span class="link_name">Setting</span>
|
|
39
|
-
</a>
|
|
40
|
-
<ul class="sub-menu blank">
|
|
41
|
-
<li><a class="link_name" href="#">Setting</a></li>
|
|
42
|
-
</ul>
|
|
43
|
-
</div>
|
|
44
|
-
</li>
|
|
45
|
-
</ul>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
</div>
|
|
49
|
-
<script>
|
|
50
|
-
let arrow = document.querySelectorAll(".arrow");
|
|
51
|
-
for (var i = 0; i < arrow.length; i++) {
|
|
52
|
-
arrow[i].addEventListener("click", (e) => {
|
|
53
|
-
let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
|
|
54
|
-
arrowParent.classList.toggle("showMenu");
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
</script>
|
|
58
|
-
</body>
|
|
59
|
-
|
|
60
|
-
</html>
|
package/src/App.css
DELETED
|
File without changes
|
package/src/App.jsx
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect, useMemo } from "react";
|
|
2
|
-
import "./App.css";
|
|
3
|
-
import "./style.css";
|
|
4
|
-
import ShareDBClient from "sharedb-client-browser/sharedb-client-json1-browser.js";
|
|
5
|
-
|
|
6
|
-
const { Connection } = ShareDBClient;
|
|
7
|
-
const socket = new WebSocket("ws://" + window.location.host);
|
|
8
|
-
const connection = new Connection(socket);
|
|
9
|
-
|
|
10
|
-
function App() {
|
|
11
|
-
const [data, setData] = useState(null);
|
|
12
|
-
|
|
13
|
-
const [isFileMenuOpen, setIsFileMenuOpen] = useState(false);
|
|
14
|
-
const [activeFileId, setActiveFileId] = useState(null)
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
const doc = connection.get("documents", "1");
|
|
18
|
-
|
|
19
|
-
doc.subscribe(() => {
|
|
20
|
-
setData(doc.data);
|
|
21
|
-
});
|
|
22
|
-
}, []);
|
|
23
|
-
|
|
24
|
-
const activeFileText = (data && activeFileId) ? data[activeFileId].text : "";
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<>
|
|
28
|
-
<div className="tabList"></div>
|
|
29
|
-
<div className="bottomBar"></div>
|
|
30
|
-
<div className="sidebar show">
|
|
31
|
-
<ul className="nav-links">
|
|
32
|
-
<li className={isFileMenuOpen ? "showMenu" : ""}>
|
|
33
|
-
<div className="icon-link">
|
|
34
|
-
<a href="#">
|
|
35
|
-
<i
|
|
36
|
-
id="folderIcon"
|
|
37
|
-
className={
|
|
38
|
-
isFileMenuOpen ? "bx bx-folder-open" : "bx bx-folder"
|
|
39
|
-
}
|
|
40
|
-
></i>
|
|
41
|
-
<span className="link_name">Files</span>
|
|
42
|
-
</a>
|
|
43
|
-
<i
|
|
44
|
-
className="bx bxs-chevron-down arrow"
|
|
45
|
-
onClick={() => {
|
|
46
|
-
setIsFileMenuOpen(!isFileMenuOpen);
|
|
47
|
-
}}
|
|
48
|
-
></i>
|
|
49
|
-
</div>
|
|
50
|
-
<ul className="sub-menu">
|
|
51
|
-
<li>
|
|
52
|
-
<a className="link_name" href="#">
|
|
53
|
-
Files
|
|
54
|
-
</a>
|
|
55
|
-
</li>
|
|
56
|
-
{data
|
|
57
|
-
? Object.keys(data).map((key) => (
|
|
58
|
-
<li onClick={() => {
|
|
59
|
-
setActiveFileId(key)
|
|
60
|
-
}
|
|
61
|
-
}>
|
|
62
|
-
<a>{data[key].name}</a>
|
|
63
|
-
</li>
|
|
64
|
-
))
|
|
65
|
-
: null}
|
|
66
|
-
</ul>
|
|
67
|
-
</li>
|
|
68
|
-
<li>
|
|
69
|
-
<div className="profile-details">
|
|
70
|
-
<a href="#">
|
|
71
|
-
<i className="bx bx-cog"></i>
|
|
72
|
-
<span className="link_name">Setting</span>
|
|
73
|
-
</a>
|
|
74
|
-
<ul className="sub-menu blank">
|
|
75
|
-
<li>
|
|
76
|
-
<a className="link_name" href="#">
|
|
77
|
-
Setting
|
|
78
|
-
</a>
|
|
79
|
-
</li>
|
|
80
|
-
</ul>
|
|
81
|
-
</div>
|
|
82
|
-
</li>
|
|
83
|
-
</ul>
|
|
84
|
-
</div >
|
|
85
|
-
<textarea className="TextEdit" name="editor" id="edit" value={activeFileId && activeFileText ? data[activeFileId].text : ""}></textarea>
|
|
86
|
-
</>
|
|
87
|
-
);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
export default App;
|
package/src/index.css
DELETED
|
File without changes
|
package/src/main.jsx
DELETED
package/src/style.css
DELETED
|
@@ -1,256 +0,0 @@
|
|
|
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
|
-
|
|
6
|
-
* {
|
|
7
|
-
margin: 0;
|
|
8
|
-
padding: 0;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
font-family: 'Poppins', sans-serif;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
body {
|
|
14
|
-
background: rgb(34, 34, 34);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.TextEdit {
|
|
18
|
-
position: fixed;
|
|
19
|
-
margin-top: 30px;
|
|
20
|
-
margin-left: 200px;
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
top: 30px;
|
|
24
|
-
bottom: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.tabList {
|
|
28
|
-
position: fixed;
|
|
29
|
-
top: 0;
|
|
30
|
-
left: 0;
|
|
31
|
-
height: 30px;
|
|
32
|
-
width: 100%;
|
|
33
|
-
background: rgb(25, 25, 25);
|
|
34
|
-
z-index: 100;
|
|
35
|
-
transition: all 0.5s ease;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.bottomBar {
|
|
39
|
-
position: absolute;
|
|
40
|
-
bottom: 0;
|
|
41
|
-
left: 0;
|
|
42
|
-
height: 20px;
|
|
43
|
-
width: 100%;
|
|
44
|
-
background: rgb(45, 45, 45);
|
|
45
|
-
z-index: 100;
|
|
46
|
-
transition: all 0.5s ease;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.sidebar {
|
|
50
|
-
position: fixed;
|
|
51
|
-
top: 0;
|
|
52
|
-
left: 0;
|
|
53
|
-
height: 100%;
|
|
54
|
-
width: 200px;
|
|
55
|
-
background: rgb(92, 92, 92);
|
|
56
|
-
z-index: 100;
|
|
57
|
-
transition: all 0.5s ease;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.sidebar.close {
|
|
61
|
-
width: 78px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.sidebar .nav-links {
|
|
65
|
-
height: 100%;
|
|
66
|
-
padding: 0px 0 150px 0;
|
|
67
|
-
overflow: auto;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.sidebar.close .nav-links {
|
|
71
|
-
overflow: visible;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.sidebar .nav-links::-webkit-scrollbar {
|
|
75
|
-
display: none;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.sidebar .nav-links li {
|
|
79
|
-
position: relative;
|
|
80
|
-
list-style: none;
|
|
81
|
-
transition: all 0.4s ease;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.sidebar .nav-links li:hover {
|
|
85
|
-
background: rgb(92, 92, 92);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.sidebar .nav-links li .icon-link {
|
|
89
|
-
display: flex;
|
|
90
|
-
align-items: center;
|
|
91
|
-
justify-content: space-between;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.sidebar.close .nav-links li .icon-link {
|
|
95
|
-
display: block;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.sidebar .nav-links li i {
|
|
99
|
-
height: 50px;
|
|
100
|
-
min-width: 78px;
|
|
101
|
-
text-align: center;
|
|
102
|
-
line-height: 50px;
|
|
103
|
-
color: #fff;
|
|
104
|
-
font-size: 20px;
|
|
105
|
-
cursor: pointer;
|
|
106
|
-
transition: all 0.3s ease;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.sidebar .nav-links li.showMenu i.arrow {
|
|
110
|
-
transform: rotate(-180deg);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.sidebar.close .nav-links i.arrow {
|
|
114
|
-
display: none;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.sidebar .nav-links li a {
|
|
118
|
-
display: flex;
|
|
119
|
-
align-items: center;
|
|
120
|
-
text-decoration: none;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.sidebar .nav-links li a .link_name {
|
|
124
|
-
font-size: 18px;
|
|
125
|
-
font-weight: 400;
|
|
126
|
-
color: #fff;
|
|
127
|
-
transition: all 0.4s ease;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.sidebar.close .nav-links li a .link_name {
|
|
131
|
-
opacity: 0;
|
|
132
|
-
pointer-events: none;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.sidebar .nav-links li .sub-menu {
|
|
136
|
-
padding: 6px 6px 14px 80px;
|
|
137
|
-
margin-top: -10px;
|
|
138
|
-
background: rgb(92, 92, 92);
|
|
139
|
-
display: none;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.sidebar .nav-links li.showMenu .sub-menu {
|
|
143
|
-
display: block;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.sidebar .nav-links li .sub-menu a {
|
|
147
|
-
color: #fff;
|
|
148
|
-
font-size: 15px;
|
|
149
|
-
padding: 5px 0;
|
|
150
|
-
white-space: nowrap;
|
|
151
|
-
opacity: 0.6;
|
|
152
|
-
transition: all 0.3s ease;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.sidebar .nav-links li .sub-menu a:hover {
|
|
156
|
-
opacity: 1;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.sidebar.close .nav-links li .sub-menu {
|
|
160
|
-
position: absolute;
|
|
161
|
-
left: 100%;
|
|
162
|
-
top: -10px;
|
|
163
|
-
margin-top: 0;
|
|
164
|
-
padding: 10px 20px;
|
|
165
|
-
border-radius: 0 6px 6px 0;
|
|
166
|
-
opacity: 0;
|
|
167
|
-
display: block;
|
|
168
|
-
pointer-events: none;
|
|
169
|
-
transition: 0s;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.sidebar.close .nav-links li:hover .sub-menu {
|
|
173
|
-
top: 0;
|
|
174
|
-
opacity: 1;
|
|
175
|
-
pointer-events: auto;
|
|
176
|
-
transition: all 0.4s ease;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.sidebar .nav-links li .sub-menu .link_name {
|
|
180
|
-
display: none;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.sidebar.close .nav-links li .sub-menu .link_name {
|
|
184
|
-
font-size: 18px;
|
|
185
|
-
opacity: 1;
|
|
186
|
-
display: block;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.sidebar .nav-links li .sub-menu.blank {
|
|
190
|
-
opacity: 1;
|
|
191
|
-
pointer-events: auto;
|
|
192
|
-
padding: 3px 20px 6px 16px;
|
|
193
|
-
opacity: 0;
|
|
194
|
-
pointer-events: none;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.sidebar .nav-links li:hover .sub-menu.blank {
|
|
198
|
-
top: 50%;
|
|
199
|
-
transform: translateY(-50%);
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.sidebar .profile-details {
|
|
203
|
-
position: fixed;
|
|
204
|
-
bottom: 0;
|
|
205
|
-
width: 200px;
|
|
206
|
-
display: flex;
|
|
207
|
-
align-items: center;
|
|
208
|
-
justify-content: space-between;
|
|
209
|
-
background: rgb(92, 92, 92);
|
|
210
|
-
padding: 12px 0;
|
|
211
|
-
transition: all 0.5s ease;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.sidebar.close .profile-details {
|
|
215
|
-
background: none;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.sidebar.close .profile-details {
|
|
219
|
-
width: 78px;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.sidebar .profile-details .profile-content {
|
|
223
|
-
display: flex;
|
|
224
|
-
align-items: center;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.sidebar .profile-details img {
|
|
228
|
-
height: 52px;
|
|
229
|
-
width: 52px;
|
|
230
|
-
object-fit: cover;
|
|
231
|
-
border-radius: 16px;
|
|
232
|
-
margin: 0 14px 0 12px;
|
|
233
|
-
background: rgb(92, 92, 92);
|
|
234
|
-
transition: all 0.5s ease;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.sidebar.close .profile-details img {
|
|
238
|
-
padding: 10px;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.sidebar .profile-details .profile_name,
|
|
242
|
-
.sidebar .profile-details .job {
|
|
243
|
-
color: #fff;
|
|
244
|
-
font-size: 18px;
|
|
245
|
-
font-weight: 500;
|
|
246
|
-
white-space: nowrap;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.sidebar .profile-details .job {
|
|
250
|
-
font-size: 12px;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.sidebar.close ~ .home-section {
|
|
254
|
-
left: 78px;
|
|
255
|
-
width: calc(100% - 78px);
|
|
256
|
-
}
|
package/test/TestFile1.txt
DELETED
|
File without changes
|
package/test/TestFile2.txt
DELETED
|
File without changes
|
package/test/TestFile3.txt
DELETED
|
File without changes
|
package/test/index.html
DELETED
package/test/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
console.log('This is a test file to edit');
|
package/vite.config.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
import nodePolyfills from 'rollup-plugin-polyfill-node';
|
|
4
|
-
import commonjs from '@rollup/plugin-commonjs';
|
|
5
|
-
import { nodeResolve } from '@rollup/plugin-node-resolve';
|
|
6
|
-
|
|
7
|
-
// https://vitejs.dev/config/
|
|
8
|
-
export default defineConfig({
|
|
9
|
-
plugins: [commonjs(), nodePolyfills(), nodeResolve(), react()],
|
|
10
|
-
});
|