vzcode 0.88.0 → 0.89.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 +0 -1
- package/dist/assets/{index-DubfLBmh.js → index-C4h28erw.js} +57 -57
- package/dist/assets/{index-Dx3HipqX.js → index-pzvwg1lq.js} +58 -58
- package/dist/assets/{worker-1Ck54dGO.js → worker-BIf7QrAH.js} +19 -19
- package/dist/index.html +1 -1
- package/package.json +13 -13
- package/src/client/Icons/QuestionMarkSVG.tsx +18 -0
- package/src/client/Icons/index.tsx +1 -0
- package/src/client/SplitPaneResizeContext.tsx +1 -1
- package/src/client/VZCodeContext.tsx +11 -0
- package/src/client/VZKeyboardShortcutsDoc.tsx +121 -0
- package/src/client/VZLeft.tsx +4 -0
- package/src/client/VZSettings.tsx +4 -43
- package/src/client/VZSidebar/CreateDirModal.tsx +14 -2
- package/src/client/VZSidebar/CreateFileModal.tsx +14 -2
- package/src/client/VZSidebar/index.tsx +49 -36
- package/src/client/index.ts +1 -0
- package/src/client/useActions.ts +16 -0
- package/src/client/vzReducer/createInitialState.ts +1 -0
- package/src/client/vzReducer/index.ts +5 -0
- package/src/client/vzReducer/setIsDocOpenReducer.ts +9 -0
- package/src/client/featureFlags.js +0 -4
package/dist/index.html
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
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-
|
|
23
|
+
<script type="module" crossorigin src="/assets/index-pzvwg1lq.js"></script>
|
|
24
24
|
<link rel="stylesheet" crossorigin href="/assets/index-9yhZQKtK.css">
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.89.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -67,15 +67,15 @@
|
|
|
67
67
|
},
|
|
68
68
|
"homepage": "https://github.com/vizhub-core/vzcode#readme",
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@codemirror/autocomplete": "^6.
|
|
70
|
+
"@codemirror/autocomplete": "^6.16.0",
|
|
71
71
|
"@codemirror/lang-css": "^6.2.1",
|
|
72
|
-
"@codemirror/lang-html": "^6.4.
|
|
72
|
+
"@codemirror/lang-html": "^6.4.9",
|
|
73
73
|
"@codemirror/lang-javascript": "^6.2.2",
|
|
74
74
|
"@codemirror/lang-json": "^6.0.1",
|
|
75
|
-
"@codemirror/lang-markdown": "^6.2.
|
|
75
|
+
"@codemirror/lang-markdown": "^6.2.5",
|
|
76
76
|
"@codemirror/state": "^6.4.1",
|
|
77
77
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
78
|
-
"@codemirror/view": "^6.26.
|
|
78
|
+
"@codemirror/view": "^6.26.3",
|
|
79
79
|
"@lezer/highlight": "^1.2.0",
|
|
80
80
|
"@replit/codemirror-indentation-markers": "^6.5.1",
|
|
81
81
|
"@replit/codemirror-interact": "^6.3.1",
|
|
@@ -104,8 +104,8 @@
|
|
|
104
104
|
"json0-ot-diff": "^1.1.2",
|
|
105
105
|
"ngrok": "^4.3.3",
|
|
106
106
|
"open": "^10.1.0",
|
|
107
|
-
"openai": "^4.
|
|
108
|
-
"prettier-plugin-svelte": "^3.2.
|
|
107
|
+
"openai": "^4.36.0",
|
|
108
|
+
"prettier-plugin-svelte": "^3.2.3",
|
|
109
109
|
"react": "^18.2.0",
|
|
110
110
|
"react-bootstrap": "^2.10.2",
|
|
111
111
|
"react-dom": "^18.2.0",
|
|
@@ -116,14 +116,14 @@
|
|
|
116
116
|
"ws": "^8.16.0"
|
|
117
117
|
},
|
|
118
118
|
"devDependencies": {
|
|
119
|
-
"@types/react": "^18.2.
|
|
120
|
-
"@types/react-dom": "^18.2.
|
|
119
|
+
"@types/react": "^18.2.79",
|
|
120
|
+
"@types/react-dom": "^18.2.25",
|
|
121
121
|
"@vitejs/plugin-react": "^4.2.1",
|
|
122
122
|
"concurrently": "^8.2.2",
|
|
123
123
|
"prettier": "^3.2.5",
|
|
124
|
-
"sass": "^1.
|
|
125
|
-
"typescript": "^5.4.
|
|
126
|
-
"vite": "^5.2.
|
|
127
|
-
"vitest": "^1.
|
|
124
|
+
"sass": "^1.75.0",
|
|
125
|
+
"typescript": "^5.4.5",
|
|
126
|
+
"vite": "^5.2.9",
|
|
127
|
+
"vitest": "^1.5.0"
|
|
128
128
|
}
|
|
129
129
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// From https://heroicons.com/
|
|
2
|
+
export const QuestionMarkSVG = () => (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill="none"
|
|
6
|
+
width="24"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 24 24"
|
|
9
|
+
strokeWidth="1.5"
|
|
10
|
+
stroke="currentColor"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
strokeLinecap="round"
|
|
14
|
+
strokeLinejoin="round"
|
|
15
|
+
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
@@ -30,7 +30,7 @@ const localStorageWriteDebounceMS = 800;
|
|
|
30
30
|
const sidebarWidthProperty = 'vzCodeSidebarWidth';
|
|
31
31
|
const codeEditorWidthProperty = 'vzCodeCodeEditorWidth';
|
|
32
32
|
|
|
33
|
-
const initialSidebarWidthDefault =
|
|
33
|
+
const initialSidebarWidthDefault = 250;
|
|
34
34
|
let initialSidebarWidth: number =
|
|
35
35
|
initialSidebarWidthDefault;
|
|
36
36
|
|
|
@@ -87,6 +87,10 @@ export type VZCodeContextValue = {
|
|
|
87
87
|
setIsSettingsOpen: (isSettingsOpen: boolean) => void;
|
|
88
88
|
closeSettings: () => void;
|
|
89
89
|
|
|
90
|
+
isDocOpen: boolean;
|
|
91
|
+
setIsDocOpen: (isDocOpen: boolean) => void;
|
|
92
|
+
closeDoc: () => void;
|
|
93
|
+
|
|
90
94
|
theme: ThemeLabel;
|
|
91
95
|
setTheme: (theme: ThemeLabel) => void;
|
|
92
96
|
|
|
@@ -204,6 +208,7 @@ export const VZCodeProvider = ({
|
|
|
204
208
|
activeFileId,
|
|
205
209
|
theme,
|
|
206
210
|
isSettingsOpen,
|
|
211
|
+
isDocOpen,
|
|
207
212
|
editorWantsFocus,
|
|
208
213
|
username,
|
|
209
214
|
} = state;
|
|
@@ -217,7 +222,9 @@ export const VZCodeProvider = ({
|
|
|
217
222
|
closeTabs,
|
|
218
223
|
setTheme,
|
|
219
224
|
setIsSettingsOpen,
|
|
225
|
+
setIsDocOpen,
|
|
220
226
|
closeSettings,
|
|
227
|
+
closeDoc,
|
|
221
228
|
editorNoLongerWantsFocus,
|
|
222
229
|
setUsername,
|
|
223
230
|
} = useActions(dispatch);
|
|
@@ -344,6 +351,10 @@ export const VZCodeProvider = ({
|
|
|
344
351
|
setIsSettingsOpen,
|
|
345
352
|
closeSettings,
|
|
346
353
|
|
|
354
|
+
isDocOpen,
|
|
355
|
+
setIsDocOpen,
|
|
356
|
+
closeDoc,
|
|
357
|
+
|
|
347
358
|
theme,
|
|
348
359
|
setTheme,
|
|
349
360
|
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React, { useCallback, useContext } from 'react';
|
|
2
|
+
import { Button, Modal, Form } from './bootstrap';
|
|
3
|
+
import { ThemeLabel, themes } from './themes';
|
|
4
|
+
import { VZCodeContext } from './VZCodeContext';
|
|
5
|
+
|
|
6
|
+
export const VZKeyboardShortcutsDoc = ({
|
|
7
|
+
enableUsernameField = true,
|
|
8
|
+
}: {
|
|
9
|
+
// Feature flag to enable/disable username field
|
|
10
|
+
enableUsernameField?: boolean;
|
|
11
|
+
}) => {
|
|
12
|
+
const {
|
|
13
|
+
isDocOpen,
|
|
14
|
+
closeDoc,
|
|
15
|
+
|
|
16
|
+
setTheme,
|
|
17
|
+
|
|
18
|
+
setUsername,
|
|
19
|
+
} = useContext(VZCodeContext);
|
|
20
|
+
|
|
21
|
+
const handleThemeChange = useCallback(
|
|
22
|
+
(event: React.ChangeEvent<HTMLSelectElement>) => {
|
|
23
|
+
setTheme(event.target.value as ThemeLabel);
|
|
24
|
+
},
|
|
25
|
+
[],
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
return isDocOpen ? (
|
|
29
|
+
<Modal
|
|
30
|
+
className="vz-settings"
|
|
31
|
+
show={isDocOpen}
|
|
32
|
+
onHide={closeDoc}
|
|
33
|
+
animation={false}
|
|
34
|
+
>
|
|
35
|
+
<Modal.Header closeButton>
|
|
36
|
+
<Modal.Title>Keyboard Shortcuts</Modal.Title>
|
|
37
|
+
</Modal.Header>
|
|
38
|
+
<Modal.Body className="pt-1">
|
|
39
|
+
<Form.Group className="mb-3">
|
|
40
|
+
<Form.Text className="text-muted">
|
|
41
|
+
Keyboard shortcuts and interactive widgets for
|
|
42
|
+
quick actions
|
|
43
|
+
</Form.Text>
|
|
44
|
+
</Form.Group>
|
|
45
|
+
<Form.Group>
|
|
46
|
+
{/* <Form.Label>WINDOWS</Form.Label> */}
|
|
47
|
+
<ul>
|
|
48
|
+
<li>
|
|
49
|
+
<strong>Ctrl + s</strong> or{' '}
|
|
50
|
+
<strong>Shift + Enter</strong> <br />
|
|
51
|
+
<span>Run and format code</span>
|
|
52
|
+
</li>
|
|
53
|
+
<li>
|
|
54
|
+
<strong>Alt + drag on a number</strong>
|
|
55
|
+
<br />
|
|
56
|
+
<span>
|
|
57
|
+
Modify the number by dragging left or right
|
|
58
|
+
</span>
|
|
59
|
+
</li>
|
|
60
|
+
<li>
|
|
61
|
+
<strong>Alt + click on a hex color</strong>
|
|
62
|
+
<br />
|
|
63
|
+
<span>
|
|
64
|
+
Open a color picker to modify the color
|
|
65
|
+
</span>
|
|
66
|
+
</li>
|
|
67
|
+
<li>
|
|
68
|
+
<strong>Alt + w</strong> <br />
|
|
69
|
+
<span>Close the current tab</span>
|
|
70
|
+
</li>
|
|
71
|
+
<li>
|
|
72
|
+
<strong>Alt + n</strong> <br />
|
|
73
|
+
<span>Open the create file modal</span>
|
|
74
|
+
</li>
|
|
75
|
+
<li>
|
|
76
|
+
<strong>Alt + Page Up</strong> <br />
|
|
77
|
+
<span>
|
|
78
|
+
Change the active tab to the previous one
|
|
79
|
+
</span>
|
|
80
|
+
</li>
|
|
81
|
+
<li>
|
|
82
|
+
<strong>Alt + Page Down</strong> <br />
|
|
83
|
+
<span>
|
|
84
|
+
Change the active tab to the next one
|
|
85
|
+
</span>
|
|
86
|
+
</li>
|
|
87
|
+
<li>
|
|
88
|
+
<strong>Most VSCode Shortcuts</strong> <br />
|
|
89
|
+
See VSCode docs:{' '}
|
|
90
|
+
<a
|
|
91
|
+
href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf"
|
|
92
|
+
target="_blank"
|
|
93
|
+
>
|
|
94
|
+
Windows
|
|
95
|
+
</a>
|
|
96
|
+
,{' '}
|
|
97
|
+
<a
|
|
98
|
+
href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf"
|
|
99
|
+
target="_blank"
|
|
100
|
+
>
|
|
101
|
+
MacOS
|
|
102
|
+
</a>
|
|
103
|
+
,{' '}
|
|
104
|
+
<a
|
|
105
|
+
href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf"
|
|
106
|
+
target="_blank"
|
|
107
|
+
>
|
|
108
|
+
Linux
|
|
109
|
+
</a>
|
|
110
|
+
</li>
|
|
111
|
+
</ul>
|
|
112
|
+
</Form.Group>
|
|
113
|
+
</Modal.Body>
|
|
114
|
+
<Modal.Footer>
|
|
115
|
+
<Button variant="primary" onClick={closeDoc}>
|
|
116
|
+
Done
|
|
117
|
+
</Button>
|
|
118
|
+
</Modal.Footer>
|
|
119
|
+
</Modal>
|
|
120
|
+
) : null;
|
|
121
|
+
};
|
package/src/client/VZLeft.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { VZSettings } from './VZSettings';
|
|
2
|
+
import { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
|
|
2
3
|
import { VZSidebar } from './VZSidebar';
|
|
3
4
|
import { CreateFileModal } from './VZSidebar/CreateFileModal';
|
|
4
5
|
import { CreateDirModal } from './VZSidebar/CreateDirModal';
|
|
@@ -14,6 +15,9 @@ export const VZLeft = ({ enableUsernameField = true }) => {
|
|
|
14
15
|
<VZSettings
|
|
15
16
|
enableUsernameField={enableUsernameField}
|
|
16
17
|
/>
|
|
18
|
+
<VZKeyboardShortcutsDoc
|
|
19
|
+
enableUsernameField={enableUsernameField}
|
|
20
|
+
/>
|
|
17
21
|
<CreateFileModal />
|
|
18
22
|
<CreateDirModal />
|
|
19
23
|
</div>
|
|
@@ -164,6 +164,7 @@ export const VZSettings = ({
|
|
|
164
164
|
|
|
165
165
|
<Form.Group className="mb-3" controlId="formFork">
|
|
166
166
|
<Form.Label>Font</Form.Label>
|
|
167
|
+
|
|
167
168
|
<select
|
|
168
169
|
className="form-select"
|
|
169
170
|
onChange={handleFontChange}
|
|
@@ -175,6 +176,7 @@ export const VZSettings = ({
|
|
|
175
176
|
</option>
|
|
176
177
|
))}
|
|
177
178
|
</select>
|
|
179
|
+
|
|
178
180
|
<Form.Text className="text-muted">
|
|
179
181
|
Select font for the editor
|
|
180
182
|
</Form.Text>
|
|
@@ -182,6 +184,7 @@ export const VZSettings = ({
|
|
|
182
184
|
|
|
183
185
|
<Form.Group className="mb-3" controlId="formFork">
|
|
184
186
|
<Form.Label>Font Size</Form.Label>
|
|
187
|
+
|
|
185
188
|
<select
|
|
186
189
|
className="form-select"
|
|
187
190
|
onChange={handleFontSizeChange}
|
|
@@ -193,51 +196,9 @@ export const VZSettings = ({
|
|
|
193
196
|
</option>
|
|
194
197
|
))}
|
|
195
198
|
</select>
|
|
196
|
-
<Form.Text className="text-muted">
|
|
197
|
-
Select a font size for the editor
|
|
198
|
-
</Form.Text>
|
|
199
|
-
</Form.Group>
|
|
200
199
|
|
|
201
|
-
{/* Keyboard Shortcuts Documentation */}
|
|
202
|
-
<Form.Group className="mb-3" controlId="formFork">
|
|
203
|
-
<Form.Label>Keyboard Shortcuts</Form.Label>
|
|
204
|
-
<ul>
|
|
205
|
-
<li>
|
|
206
|
-
<strong>Alt-w</strong> <span>⌥W</span>
|
|
207
|
-
<br />
|
|
208
|
-
<span>Close the current tab</span>
|
|
209
|
-
</li>
|
|
210
|
-
<li>
|
|
211
|
-
<strong>Alt-n</strong> <span>⌥N</span>
|
|
212
|
-
<br />
|
|
213
|
-
<span>Open the create file modal</span>
|
|
214
|
-
</li>
|
|
215
|
-
<li>
|
|
216
|
-
<strong>Alt-PageUp</strong> <span>⌥⇞</span>
|
|
217
|
-
<br />
|
|
218
|
-
<span>
|
|
219
|
-
Change the active tab to the previous one
|
|
220
|
-
</span>
|
|
221
|
-
</li>
|
|
222
|
-
<li>
|
|
223
|
-
<strong>Alt-PageDown</strong> <span>⌥⇟</span>
|
|
224
|
-
<br />
|
|
225
|
-
<span>
|
|
226
|
-
Change the active tab to the next one
|
|
227
|
-
</span>
|
|
228
|
-
</li>
|
|
229
|
-
<li>
|
|
230
|
-
<strong>Ctrl-s</strong> or{' '}
|
|
231
|
-
<strong>Shift-Enter</strong> <span>⌘S</span>{' '}
|
|
232
|
-
or <span>⇧↩</span>
|
|
233
|
-
<br />
|
|
234
|
-
<span>
|
|
235
|
-
Run the code and format it with Prettier
|
|
236
|
-
</span>
|
|
237
|
-
</li>
|
|
238
|
-
</ul>
|
|
239
200
|
<Form.Text className="text-muted">
|
|
240
|
-
|
|
201
|
+
Select a font size for the editor
|
|
241
202
|
</Form.Text>
|
|
242
203
|
</Form.Group>
|
|
243
204
|
</Modal.Body>
|
|
@@ -15,6 +15,7 @@ export const CreateDirModal = ({
|
|
|
15
15
|
const inputRef = useRef(null);
|
|
16
16
|
|
|
17
17
|
const {
|
|
18
|
+
files,
|
|
18
19
|
isCreateDirModalOpen,
|
|
19
20
|
handleCloseCreateDirModal,
|
|
20
21
|
handleCreateDirClick,
|
|
@@ -38,11 +39,22 @@ export const CreateDirModal = ({
|
|
|
38
39
|
// Returns true if file name is valid, false otherwise.
|
|
39
40
|
const validateFileName = useCallback(
|
|
40
41
|
(fileName: string) => {
|
|
42
|
+
let valid;
|
|
43
|
+
//General Character Check
|
|
41
44
|
const regex =
|
|
42
45
|
/^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
|
|
43
|
-
|
|
46
|
+
valid = regex.test(fileName);
|
|
47
|
+
|
|
48
|
+
//Check for Duplicate Filename
|
|
49
|
+
for (const key in files) {
|
|
50
|
+
if (fileName + '/' === files[key].name) {
|
|
51
|
+
valid = false;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return valid;
|
|
44
56
|
},
|
|
45
|
-
[],
|
|
57
|
+
[files],
|
|
46
58
|
);
|
|
47
59
|
|
|
48
60
|
const handleKeyDown = useCallback(
|
|
@@ -15,6 +15,7 @@ export const CreateFileModal = ({
|
|
|
15
15
|
const inputRef = useRef(null);
|
|
16
16
|
|
|
17
17
|
const {
|
|
18
|
+
files,
|
|
18
19
|
isCreateFileModalOpen,
|
|
19
20
|
handleCloseCreateFileModal,
|
|
20
21
|
handleCreateFileClick,
|
|
@@ -38,11 +39,22 @@ export const CreateFileModal = ({
|
|
|
38
39
|
// Returns true if file name is valid, false otherwise.
|
|
39
40
|
const validateFileName = useCallback(
|
|
40
41
|
(fileName: string) => {
|
|
42
|
+
let valid;
|
|
43
|
+
//General Character Check
|
|
41
44
|
const regex =
|
|
42
45
|
/^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
|
|
43
|
-
|
|
46
|
+
valid = regex.test(fileName);
|
|
47
|
+
|
|
48
|
+
//Check for Duplicate Filename
|
|
49
|
+
for (const key in files) {
|
|
50
|
+
if (fileName === files[key].name) {
|
|
51
|
+
valid = false;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return valid;
|
|
44
56
|
},
|
|
45
|
-
[],
|
|
57
|
+
[files],
|
|
46
58
|
);
|
|
47
59
|
|
|
48
60
|
const handleKeyDown = useCallback(
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useCallback,
|
|
3
|
-
useContext,
|
|
4
|
-
useEffect,
|
|
5
|
-
useMemo,
|
|
6
|
-
} from 'react';
|
|
1
|
+
import { useCallback, useContext, useMemo } from 'react';
|
|
7
2
|
import {
|
|
8
3
|
FileId,
|
|
9
4
|
FileTree,
|
|
@@ -12,9 +7,15 @@ import {
|
|
|
12
7
|
import { Tooltip, OverlayTrigger } from '../bootstrap';
|
|
13
8
|
import { getFileTree } from '../getFileTree';
|
|
14
9
|
import { sortFileTree } from '../sortFileTree';
|
|
15
|
-
import { disableSettings } from '../featureFlags';
|
|
16
10
|
import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
|
|
17
|
-
import { BugSVG, GearSVG, NewSVG
|
|
11
|
+
import { BugSVG, GearSVG, NewSVG } from '../Icons';
|
|
12
|
+
import {
|
|
13
|
+
BugSVG,
|
|
14
|
+
GearSVG,
|
|
15
|
+
NewSVG,
|
|
16
|
+
FileSVG,
|
|
17
|
+
QuestionMarkSVG,
|
|
18
|
+
} from '../Icons';
|
|
18
19
|
import { Listing } from './Listing';
|
|
19
20
|
import { VZCodeContext } from '../VZCodeContext';
|
|
20
21
|
import { useDragAndDrop } from './useDragAndDrop';
|
|
@@ -29,24 +30,20 @@ export const VZSidebar = ({
|
|
|
29
30
|
createFileTooltipText = 'New File',
|
|
30
31
|
createDirTooltipText = 'New Directory',
|
|
31
32
|
openSettingsTooltipText = 'Open Settings',
|
|
33
|
+
openKeyboardShortcuts = 'Keyboard Shortcuts',
|
|
32
34
|
reportBugTooltipText = 'Report Bug',
|
|
33
35
|
}: {
|
|
34
36
|
createFileTooltipText?: string;
|
|
35
37
|
createDirTooltipText?: string;
|
|
36
38
|
openSettingsTooltipText?: string;
|
|
37
39
|
reportBugTooltipText?: string;
|
|
40
|
+
openKeyboardShortcuts?: string;
|
|
38
41
|
}) => {
|
|
39
42
|
const {
|
|
40
43
|
files,
|
|
41
|
-
renameFile,
|
|
42
|
-
deleteFile,
|
|
43
|
-
renameDirectory,
|
|
44
|
-
deleteDirectory,
|
|
45
|
-
activeFileId,
|
|
46
44
|
openTab,
|
|
47
45
|
setIsSettingsOpen,
|
|
48
|
-
|
|
49
|
-
toggleDirectory,
|
|
46
|
+
setIsDocOpen,
|
|
50
47
|
handleOpenCreateFileModal,
|
|
51
48
|
handleOpenCreateDirModal,
|
|
52
49
|
connected,
|
|
@@ -56,7 +53,9 @@ export const VZSidebar = ({
|
|
|
56
53
|
() => (files ? sortFileTree(getFileTree(files)) : null),
|
|
57
54
|
[files],
|
|
58
55
|
);
|
|
59
|
-
|
|
56
|
+
const handleQuestionMarkClick = useCallback(() => {
|
|
57
|
+
setIsDocOpen(true);
|
|
58
|
+
}, []);
|
|
60
59
|
const handleSettingsClick = useCallback(() => {
|
|
61
60
|
setIsSettingsOpen(true);
|
|
62
61
|
}, []);
|
|
@@ -106,12 +105,26 @@ export const VZSidebar = ({
|
|
|
106
105
|
>
|
|
107
106
|
<div className="files">
|
|
108
107
|
<div className="full-box">
|
|
109
|
-
<div className="sidebar-section-hint">
|
|
110
|
-
Project Files
|
|
111
|
-
</div>
|
|
108
|
+
<div className="sidebar-section-hint">Files</div>
|
|
112
109
|
<div className="sidebar-section-buttons">
|
|
113
110
|
<OverlayTrigger
|
|
114
|
-
placement="
|
|
111
|
+
placement="right"
|
|
112
|
+
overlay={
|
|
113
|
+
<Tooltip id="open-keyboard-shortcuts">
|
|
114
|
+
{openKeyboardShortcuts}
|
|
115
|
+
</Tooltip>
|
|
116
|
+
}
|
|
117
|
+
>
|
|
118
|
+
<i
|
|
119
|
+
onClick={handleQuestionMarkClick}
|
|
120
|
+
className="icon-button icon-button-dark"
|
|
121
|
+
>
|
|
122
|
+
<QuestionMarkSVG />
|
|
123
|
+
</i>
|
|
124
|
+
</OverlayTrigger>
|
|
125
|
+
|
|
126
|
+
<OverlayTrigger
|
|
127
|
+
placement="right"
|
|
115
128
|
overlay={
|
|
116
129
|
<Tooltip id="report-bug-tooltip">
|
|
117
130
|
{reportBugTooltipText}
|
|
@@ -128,23 +141,23 @@ export const VZSidebar = ({
|
|
|
128
141
|
</i>
|
|
129
142
|
</a>
|
|
130
143
|
</OverlayTrigger>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
144
|
+
|
|
145
|
+
<OverlayTrigger
|
|
146
|
+
placement="left"
|
|
147
|
+
overlay={
|
|
148
|
+
<Tooltip id="open-settings-tooltip">
|
|
149
|
+
{openSettingsTooltipText}
|
|
150
|
+
</Tooltip>
|
|
151
|
+
}
|
|
152
|
+
>
|
|
153
|
+
<i
|
|
154
|
+
onClick={handleSettingsClick}
|
|
155
|
+
className="icon-button icon-button-dark"
|
|
139
156
|
>
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
<GearSVG />
|
|
145
|
-
</i>
|
|
146
|
-
</OverlayTrigger>
|
|
147
|
-
)}
|
|
157
|
+
<GearSVG />
|
|
158
|
+
</i>
|
|
159
|
+
</OverlayTrigger>
|
|
160
|
+
|
|
148
161
|
<OverlayTrigger
|
|
149
162
|
placement="left"
|
|
150
163
|
overlay={
|
package/src/client/index.ts
CHANGED
|
@@ -4,6 +4,7 @@ export type { EditorCache } from './useEditorCache';
|
|
|
4
4
|
export { VZCodeProvider } from './VZCodeContext';
|
|
5
5
|
export { VZSidebar } from './VZSidebar';
|
|
6
6
|
export { VZSettings } from './VZSettings';
|
|
7
|
+
export { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
|
|
7
8
|
export { VZResizer } from './VZResizer';
|
|
8
9
|
export { VZLeft } from './VZLeft';
|
|
9
10
|
export { VZMiddle } from './VZMiddle';
|
package/src/client/useActions.ts
CHANGED
|
@@ -68,10 +68,24 @@ export const useActions = (
|
|
|
68
68
|
[dispatch],
|
|
69
69
|
);
|
|
70
70
|
|
|
71
|
+
const setIsDocOpen = useCallback(
|
|
72
|
+
(value: boolean) => {
|
|
73
|
+
dispatch({
|
|
74
|
+
type: 'set_is_doc_open',
|
|
75
|
+
value: value,
|
|
76
|
+
});
|
|
77
|
+
},
|
|
78
|
+
[dispatch],
|
|
79
|
+
);
|
|
80
|
+
|
|
71
81
|
const closeSettings = useCallback(() => {
|
|
72
82
|
setIsSettingsOpen(false);
|
|
73
83
|
}, [setIsSettingsOpen]);
|
|
74
84
|
|
|
85
|
+
const closeDoc = useCallback(() => {
|
|
86
|
+
setIsDocOpen(false);
|
|
87
|
+
}, [setIsDocOpen]);
|
|
88
|
+
|
|
75
89
|
const editorNoLongerWantsFocus = useCallback(() => {
|
|
76
90
|
dispatch({
|
|
77
91
|
type: 'editor_no_longer_wants_focus',
|
|
@@ -96,7 +110,9 @@ export const useActions = (
|
|
|
96
110
|
closeTabs,
|
|
97
111
|
setTheme,
|
|
98
112
|
setIsSettingsOpen,
|
|
113
|
+
setIsDocOpen,
|
|
99
114
|
closeSettings,
|
|
115
|
+
closeDoc,
|
|
100
116
|
editorNoLongerWantsFocus,
|
|
101
117
|
setUsername,
|
|
102
118
|
};
|
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
setActiveFileRightReducer,
|
|
9
9
|
} from './setActiveFileLeftRightReducer';
|
|
10
10
|
import { setIsSettingsOpenReducer } from './setIsSettingsOpenReducer';
|
|
11
|
+
import { setIsDocOpenReducer } from './setIsDocOpenReducer';
|
|
11
12
|
import { setThemeReducer } from './setThemeReducer';
|
|
12
13
|
import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
|
|
13
14
|
import { setUsernameReducer } from './setUsernameReducer';
|
|
@@ -29,6 +30,8 @@ export type VZState = {
|
|
|
29
30
|
// True to show the settings modal.
|
|
30
31
|
isSettingsOpen: boolean;
|
|
31
32
|
|
|
33
|
+
isDocOpen: boolean;
|
|
34
|
+
|
|
32
35
|
// True if the editor should focus on the next render.
|
|
33
36
|
editorWantsFocus: boolean;
|
|
34
37
|
|
|
@@ -68,6 +71,7 @@ export type VZAction =
|
|
|
68
71
|
// `set_is_settings_open`
|
|
69
72
|
// * Sets whether the settings modal is open.
|
|
70
73
|
| { type: 'set_is_settings_open'; value: boolean }
|
|
74
|
+
| { type: 'set_is_doc_open'; value: boolean }
|
|
71
75
|
|
|
72
76
|
// `editor_no_longer_wants_focus`
|
|
73
77
|
// * Sets `editorWantsFocus` to `false`.
|
|
@@ -104,6 +108,7 @@ const reducers = [
|
|
|
104
108
|
closeTabsReducer,
|
|
105
109
|
setThemeReducer,
|
|
106
110
|
setIsSettingsOpenReducer,
|
|
111
|
+
setIsDocOpenReducer,
|
|
107
112
|
editorNoLongerWantsFocusReducer,
|
|
108
113
|
setUsernameReducer,
|
|
109
114
|
];
|