vzcode 0.73.0 → 0.75.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/dist/assets/{index-CpIQ8AoQ.css → index-BpuOxvvE.css} +1 -1
- package/dist/assets/{index-DGGHVX25.js → index-Cs47XQOn.js} +42 -42
- package/dist/index.html +2 -2
- package/package.json +5 -5
- package/src/client/CodeEditor/style.scss +1 -0
- package/src/client/VZCodeContext.tsx +1 -1
- package/src/client/VZSidebar/DragAndDrop.tsx +74 -0
- package/src/client/VZSidebar/Item.tsx +15 -11
- package/src/client/VZSidebar/index.tsx +2 -0
- package/src/client/VZSidebar/styles.scss +22 -1
- package/src/client/useFileCRUD.ts +2 -2
package/dist/index.html
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
21
21
|
rel="stylesheet"
|
|
22
22
|
/>
|
|
23
|
-
<script type="module" crossorigin src="/assets/index-
|
|
24
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
23
|
+
<script type="module" crossorigin src="/assets/index-Cs47XQOn.js"></script>
|
|
24
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BpuOxvvE.css">
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
|
27
27
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.75.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
"homepage": "https://github.com/vizhub-core/vzcode#readme",
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@codemirror/autocomplete": "^6.
|
|
66
|
+
"@codemirror/autocomplete": "^6.14.0",
|
|
67
67
|
"@codemirror/lang-css": "^6.2.1",
|
|
68
68
|
"@codemirror/lang-html": "^6.4.8",
|
|
69
69
|
"@codemirror/lang-javascript": "^6.2.2",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"@uiw/codemirror-themes": "^4.21.24",
|
|
91
91
|
"body-parser": "^1.20.2",
|
|
92
92
|
"codemirror": "^6.0.1",
|
|
93
|
-
"codemirror-ot": "^4.
|
|
93
|
+
"codemirror-ot": "^4.4.0",
|
|
94
94
|
"color-hash": "^2.0.2",
|
|
95
95
|
"d3-array": "^3.2.4",
|
|
96
96
|
"diff-match-patch": "^1.0.5",
|
|
@@ -112,14 +112,14 @@
|
|
|
112
112
|
"ws": "^8.16.0"
|
|
113
113
|
},
|
|
114
114
|
"devDependencies": {
|
|
115
|
-
"@types/react": "^18.2.
|
|
115
|
+
"@types/react": "^18.2.65",
|
|
116
116
|
"@types/react-dom": "^18.2.21",
|
|
117
117
|
"@vitejs/plugin-react": "^4.2.1",
|
|
118
118
|
"concurrently": "^8.2.2",
|
|
119
119
|
"prettier": "^3.2.5",
|
|
120
120
|
"sass": "^1.71.1",
|
|
121
121
|
"typescript": "^5.4.2",
|
|
122
|
-
"vite": "^5.1.
|
|
122
|
+
"vite": "^5.1.6",
|
|
123
123
|
"vitest": "^1.3.1"
|
|
124
124
|
}
|
|
125
125
|
}
|
|
@@ -52,7 +52,7 @@ export type VZCodeContextValue = {
|
|
|
52
52
|
docPresence: any;
|
|
53
53
|
|
|
54
54
|
files: Files | null;
|
|
55
|
-
createFile: (fileName: string) => void;
|
|
55
|
+
createFile: (fileName: string, text?: string) => void;
|
|
56
56
|
renameFile: (fileId: string, fileName: string) => void;
|
|
57
57
|
deleteFile: (fileId: string) => void;
|
|
58
58
|
renameDirectory: (
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { useState, useContext, useCallback } from 'react';
|
|
2
|
+
import { VZCodeContext } from '../VZCodeContext';
|
|
3
|
+
import './styles.scss';
|
|
4
|
+
|
|
5
|
+
const debug = false;
|
|
6
|
+
|
|
7
|
+
export const DragAndDrop = () => {
|
|
8
|
+
const [isDragOver, setIsDragOver] = useState(false);
|
|
9
|
+
const { createFile } = useContext(VZCodeContext);
|
|
10
|
+
|
|
11
|
+
const handleDragEnter = useCallback((event) => {
|
|
12
|
+
event.preventDefault();
|
|
13
|
+
event.stopPropagation();
|
|
14
|
+
setIsDragOver(true);
|
|
15
|
+
}, []);
|
|
16
|
+
|
|
17
|
+
const handleDragOver = useCallback(
|
|
18
|
+
(event) => {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
event.stopPropagation();
|
|
21
|
+
if (!isDragOver) setIsDragOver(true);
|
|
22
|
+
},
|
|
23
|
+
[isDragOver],
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
const handleDragLeave = useCallback(
|
|
27
|
+
(event: React.DragEvent<HTMLDivElement>) => {
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
setIsDragOver(false);
|
|
31
|
+
},
|
|
32
|
+
[],
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
const handleDrop = useCallback(
|
|
36
|
+
(event: React.DragEvent<HTMLDivElement>) => {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
event.stopPropagation();
|
|
39
|
+
setIsDragOver(false);
|
|
40
|
+
const files = event.dataTransfer.files;
|
|
41
|
+
|
|
42
|
+
if (debug) {
|
|
43
|
+
console.log(files);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
Array.from(files).forEach((file) => {
|
|
47
|
+
const reader = new FileReader();
|
|
48
|
+
reader.onload = (readEvent) => {
|
|
49
|
+
createFile(
|
|
50
|
+
file.name,
|
|
51
|
+
readEvent.target.result as string,
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
reader.onerror = (error) => {
|
|
55
|
+
console.error('Error reading file:', error);
|
|
56
|
+
};
|
|
57
|
+
reader.readAsText(file);
|
|
58
|
+
});
|
|
59
|
+
},
|
|
60
|
+
[createFile],
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<div
|
|
65
|
+
className={`drop-zone ${isDragOver ? 'dragover' : ''}`}
|
|
66
|
+
onDragEnter={handleDragEnter}
|
|
67
|
+
onDragOver={handleDragOver}
|
|
68
|
+
onDragLeave={handleDragLeave}
|
|
69
|
+
onDrop={handleDrop}
|
|
70
|
+
>
|
|
71
|
+
Drag files here
|
|
72
|
+
</div>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
@@ -5,7 +5,6 @@ import {
|
|
|
5
5
|
useEffect,
|
|
6
6
|
} from 'react';
|
|
7
7
|
import { EditSVG, FileSVG, TrashSVG } from '../Icons';
|
|
8
|
-
|
|
9
8
|
import { Tooltip, OverlayTrigger } from '../bootstrap';
|
|
10
9
|
|
|
11
10
|
// TODO consider moving this up to a higher level of the component tree
|
|
@@ -150,16 +149,21 @@ export const Item = ({
|
|
|
150
149
|
>
|
|
151
150
|
<div className="name">
|
|
152
151
|
{isRenaming ? (
|
|
153
|
-
|
|
154
|
-
className="
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
152
|
+
<>
|
|
153
|
+
<i className="file-icon">
|
|
154
|
+
<FileSVG />
|
|
155
|
+
</i>
|
|
156
|
+
<input
|
|
157
|
+
className="rename-input"
|
|
158
|
+
ref={renameInputRef}
|
|
159
|
+
type="text"
|
|
160
|
+
aria-label="Field name"
|
|
161
|
+
value={renameValue}
|
|
162
|
+
onKeyDown={onKeyDown}
|
|
163
|
+
onBlur={onBlur}
|
|
164
|
+
onChange={onChange}
|
|
165
|
+
/>
|
|
166
|
+
</>
|
|
163
167
|
) : (
|
|
164
168
|
children
|
|
165
169
|
)}
|
|
@@ -17,6 +17,7 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
|
|
|
17
17
|
import { BugSVG, GearSVG, NewSVG } from '../Icons';
|
|
18
18
|
import { Listing } from './Listing';
|
|
19
19
|
import { VZCodeContext } from '../VZCodeContext';
|
|
20
|
+
import { DragAndDrop } from './DragAndDrop';
|
|
20
21
|
import './styles.scss';
|
|
21
22
|
|
|
22
23
|
// TODO turn this UI back on when we are actually detecting
|
|
@@ -146,6 +147,7 @@ export const VZSidebar = ({
|
|
|
146
147
|
</OverlayTrigger>
|
|
147
148
|
</div>
|
|
148
149
|
</div>
|
|
150
|
+
<DragAndDrop />
|
|
149
151
|
{filesExist ? (
|
|
150
152
|
fileTree.children.map((entity) => {
|
|
151
153
|
const { fileId } = entity as FileTreeFile;
|
|
@@ -89,8 +89,15 @@
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.rename-input {
|
|
92
|
-
|
|
92
|
+
width: 100%;
|
|
93
93
|
border: 0px;
|
|
94
|
+
outline: none;
|
|
95
|
+
background: transparent;
|
|
96
|
+
color: var(--vh-color-neutral-04);
|
|
97
|
+
font-family: var(--vzcode-font-family);
|
|
98
|
+
font-size: inherit;
|
|
99
|
+
font-weight: inherit;
|
|
100
|
+
padding: 0px;
|
|
94
101
|
margin: 0px;
|
|
95
102
|
}
|
|
96
103
|
|
|
@@ -147,4 +154,18 @@
|
|
|
147
154
|
}
|
|
148
155
|
}
|
|
149
156
|
}
|
|
157
|
+
|
|
158
|
+
.drop-zone {
|
|
159
|
+
border: 3px dashed #bdc7dc;
|
|
160
|
+
width: auto;
|
|
161
|
+
padding: 20px;
|
|
162
|
+
color: #bdc7dc;
|
|
163
|
+
text-align: center;
|
|
164
|
+
font-family: var(--vzcode-font-family);
|
|
165
|
+
font-weight: 500;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.drop-zone.dragover {
|
|
169
|
+
border-color: #009639;
|
|
170
|
+
}
|
|
150
171
|
}
|
|
@@ -27,14 +27,14 @@ export const useFileCRUD = ({
|
|
|
27
27
|
}) => {
|
|
28
28
|
// Create a new file
|
|
29
29
|
const createFile = useCallback(
|
|
30
|
-
(name: string) => {
|
|
30
|
+
(name: string, text = '') => {
|
|
31
31
|
if (name) {
|
|
32
32
|
const fileId: FileId = randomId();
|
|
33
33
|
submitOperation((document: VZCodeContent) => ({
|
|
34
34
|
...document,
|
|
35
35
|
files: {
|
|
36
36
|
...document.files,
|
|
37
|
-
[fileId]: { name, text
|
|
37
|
+
[fileId]: { name, text },
|
|
38
38
|
},
|
|
39
39
|
}));
|
|
40
40
|
// When a new file is created, open it in a new tab
|