vzcode 1.11.0 → 1.12.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 +1 -1
- package/dist/assets/{index-BSuijdti.js → index-4cYZN5Uf.js} +56 -56
- package/dist/assets/{index--bvX81xc.js → index-CvSVuMne.js} +57 -57
- package/dist/assets/worker-CJWrLBN2.js +286 -0
- package/dist/index.html +1 -1
- package/package.json +13 -12
- package/src/client/AIAssist/AIAssistCodeMirrorKeyMap.ts +5 -2
- package/src/client/AIAssist/startAIAssist.ts +1 -1
- package/src/client/CodeEditor/getOrCreateEditor.ts +1 -1
- package/src/client/CodeEditor/json1PresenceDisplay.ts +1 -1
- package/src/client/TabList/Tab.tsx +1 -2
- package/src/client/TabList/index.tsx +1 -1
- package/src/client/VZCodeContext.tsx +14 -7
- package/src/client/VZKeyboardShortcutsDoc.tsx +2 -1
- package/src/client/VZSidebar/Search.tsx +7 -2
- package/src/client/VZSidebar/index.tsx +87 -24
- package/src/client/tabsSearchParameters.ts +1 -2
- package/src/client/useActions.ts +10 -1
- package/src/client/useKeyboardShortcuts.ts +31 -1
- package/src/client/useURLSync.ts +1 -2
- package/src/client/vzReducer/closeTabReducer.test.ts +49 -33
- package/src/client/vzReducer/closeTabsReducer.ts +51 -19
- package/src/client/vzReducer/createInitialState.ts +8 -3
- package/src/client/vzReducer/findPane.ts +19 -0
- package/src/client/vzReducer/index.ts +17 -25
- package/src/client/vzReducer/openTabReducer.test.ts +38 -21
- package/src/client/vzReducer/openTabReducer.ts +26 -10
- package/src/client/vzReducer/searchReducer.ts +21 -1
- package/src/client/vzReducer/setActiveFileIdReducer.ts +23 -4
- package/src/client/vzReducer/setActiveFileLeftRightReducer.ts +37 -8
- package/src/client/vzReducer/updatePane.ts +44 -0
- package/src/server/index.js +1 -0
- package/src/types.ts +62 -0
- package/dist/assets/worker-Cs0ZU3m1.js +0 -291
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-4cYZN5Uf.js"></script>
|
|
24
24
|
<link rel="stylesheet" crossorigin href="/assets/index-BKRpkJER.css">
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"test-interactive": "cd test/sampleDirectories/kitchenSink && node ../../../src/server/index.js",
|
|
15
15
|
"prettier": "prettier {*.*,**/*.*} --write",
|
|
16
16
|
"tsc": "tsc --noEmit",
|
|
17
|
-
"dev": "
|
|
17
|
+
"dev": "cross-env EDITOR_PORT=5173 concurrently \"npm run test-interactive\" \"vite\"",
|
|
18
18
|
"build": "vite build",
|
|
19
19
|
"build-release": "vite build --mode release",
|
|
20
20
|
"preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
|
|
@@ -111,14 +111,14 @@
|
|
|
111
111
|
"@codemirror/lang-markdown": "^6.2.5",
|
|
112
112
|
"@codemirror/state": "^6.4.1",
|
|
113
113
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
114
|
-
"@codemirror/view": "^6.28.
|
|
114
|
+
"@codemirror/view": "^6.28.6",
|
|
115
115
|
"@lezer/highlight": "^1.2.0",
|
|
116
|
-
"@replit/codemirror-indentation-markers": "^6.5.
|
|
116
|
+
"@replit/codemirror-indentation-markers": "^6.5.3",
|
|
117
117
|
"@replit/codemirror-interact": "^6.3.1",
|
|
118
118
|
"@replit/codemirror-lang-svelte": "^6.0.0",
|
|
119
119
|
"@replit/codemirror-vscode-keymap": "^6.0.2",
|
|
120
120
|
"@teamwork/websocket-json-stream": "^2.0.0",
|
|
121
|
-
"@typescript/vfs": "^1.
|
|
121
|
+
"@typescript/vfs": "^1.6.0",
|
|
122
122
|
"@uiw/codemirror-theme-abcdef": "^4.23.0",
|
|
123
123
|
"@uiw/codemirror-theme-dracula": "^4.23.0",
|
|
124
124
|
"@uiw/codemirror-theme-eclipse": "^4.23.0",
|
|
@@ -140,12 +140,12 @@
|
|
|
140
140
|
"json0-ot-diff": "^1.1.2",
|
|
141
141
|
"ngrok": "^4.3.3",
|
|
142
142
|
"open": "^10.1.0",
|
|
143
|
-
"openai": "^4.52.
|
|
144
|
-
"prettier-plugin-svelte": "^3.2.
|
|
143
|
+
"openai": "^4.52.7",
|
|
144
|
+
"prettier-plugin-svelte": "^3.2.6",
|
|
145
145
|
"react": "^18.3.1",
|
|
146
146
|
"react-bootstrap": "^2.10.4",
|
|
147
147
|
"react-dom": "^18.3.1",
|
|
148
|
-
"react-router-dom": "^6.
|
|
148
|
+
"react-router-dom": "^6.25.1",
|
|
149
149
|
"sharedb": "^5.0.2",
|
|
150
150
|
"sharedb-client-browser": "^5.0.2",
|
|
151
151
|
"vizhub-ui": "^3.23.0",
|
|
@@ -156,11 +156,12 @@
|
|
|
156
156
|
"@types/react-dom": "^18.3.0",
|
|
157
157
|
"@vitejs/plugin-react": "^4.3.1",
|
|
158
158
|
"concurrently": "^8.2.2",
|
|
159
|
-
"
|
|
160
|
-
"
|
|
159
|
+
"cross-env": "^7.0.3",
|
|
160
|
+
"prettier": "^3.3.3",
|
|
161
|
+
"sass": "^1.77.8",
|
|
161
162
|
"typescript": "^5.5.3",
|
|
162
|
-
"vite": "^5.3.
|
|
163
|
-
"vitest": "^2.0.
|
|
163
|
+
"vite": "^5.3.4",
|
|
164
|
+
"vitest": "^2.0.3"
|
|
164
165
|
},
|
|
165
166
|
"optionalDependencies": {
|
|
166
167
|
"@rollup/rollup-darwin-arm64": "^4.18.1",
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { EditorView, keymap } from '@codemirror/view';
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
ShareDBDoc,
|
|
4
|
+
TabState,
|
|
5
|
+
VZCodeContent,
|
|
6
|
+
} from '../../types';
|
|
4
7
|
|
|
5
8
|
export const AIAssistCodeMirrorKeyMap = ({
|
|
6
9
|
shareDBDoc,
|
|
@@ -19,6 +19,7 @@ import { json1Presence, textUnicode } from '../../ot';
|
|
|
19
19
|
import {
|
|
20
20
|
FileId,
|
|
21
21
|
ShareDBDoc,
|
|
22
|
+
TabState,
|
|
22
23
|
Username,
|
|
23
24
|
VZCodeContent,
|
|
24
25
|
} from '../../types';
|
|
@@ -40,7 +41,6 @@ import { keymap } from '@codemirror/view';
|
|
|
40
41
|
import { basicSetup } from './basicSetup';
|
|
41
42
|
import { InteractRule } from '@replit/codemirror-interact';
|
|
42
43
|
import rainbowBrackets from '../CodeEditor/rainbowBrackets';
|
|
43
|
-
import { TabState } from '../vzReducer';
|
|
44
44
|
import { cssLanguage } from '@codemirror/lang-css';
|
|
45
45
|
import { javascriptLanguage } from '@codemirror/lang-javascript';
|
|
46
46
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import type { FileId } from '../../types';
|
|
3
|
-
import type { TabState } from '../vzReducer';
|
|
2
|
+
import type { FileId, TabState } from '../../types';
|
|
4
3
|
import { CloseSVG } from '../Icons';
|
|
5
4
|
|
|
6
5
|
// Supports adding the file's containing folder to the tab name
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import { VZCodeContext } from '../VZCodeContext';
|
|
3
|
-
import { TabState } from '../vzReducer';
|
|
4
3
|
import { Tab } from './Tab';
|
|
5
4
|
import './style.scss';
|
|
5
|
+
import { TabState } from '../../types';
|
|
6
6
|
|
|
7
7
|
// Displays the list of tabs above the code editor.
|
|
8
8
|
export const TabList = () => {
|
|
@@ -14,14 +14,11 @@ import {
|
|
|
14
14
|
VZCodeContent,
|
|
15
15
|
SearchResults,
|
|
16
16
|
SearchFileVisibility,
|
|
17
|
+
TabState,
|
|
17
18
|
} from '../types';
|
|
18
19
|
import { usePrettier } from './usePrettier';
|
|
19
20
|
import { useTypeScript } from './useTypeScript';
|
|
20
|
-
import {
|
|
21
|
-
TabState,
|
|
22
|
-
createInitialState,
|
|
23
|
-
vzReducer,
|
|
24
|
-
} from './vzReducer';
|
|
21
|
+
import { createInitialState, vzReducer } from './vzReducer';
|
|
25
22
|
import {
|
|
26
23
|
ThemeLabel,
|
|
27
24
|
defaultTheme,
|
|
@@ -121,6 +118,7 @@ export type VZCodeContextValue = {
|
|
|
121
118
|
id: string,
|
|
122
119
|
visibility: SearchFileVisibility,
|
|
123
120
|
) => void;
|
|
121
|
+
toggleSearchFocused: () => void;
|
|
124
122
|
|
|
125
123
|
isCreateFileModalOpen: boolean;
|
|
126
124
|
handleOpenCreateFileModal: () => void;
|
|
@@ -226,8 +224,7 @@ export const VZCodeProvider = ({
|
|
|
226
224
|
|
|
227
225
|
// Unpack state.
|
|
228
226
|
const {
|
|
229
|
-
|
|
230
|
-
activeFileId,
|
|
227
|
+
pane,
|
|
231
228
|
theme,
|
|
232
229
|
search,
|
|
233
230
|
isSearchOpen,
|
|
@@ -238,6 +235,13 @@ export const VZCodeProvider = ({
|
|
|
238
235
|
enableAutoFollow,
|
|
239
236
|
} = state;
|
|
240
237
|
|
|
238
|
+
// TODO support splitPane type
|
|
239
|
+
if (pane.type !== 'leafPane') {
|
|
240
|
+
throw new Error('Expected leafPane');
|
|
241
|
+
}
|
|
242
|
+
const tabList = pane.tabList;
|
|
243
|
+
const activeFileId = pane.activeFileId;
|
|
244
|
+
|
|
241
245
|
// Functions for dispatching actions to the reducer.
|
|
242
246
|
const {
|
|
243
247
|
setActiveFileId,
|
|
@@ -250,6 +254,7 @@ export const VZCodeProvider = ({
|
|
|
250
254
|
setSearch,
|
|
251
255
|
setSearchResults,
|
|
252
256
|
setSearchFileVisibility,
|
|
257
|
+
toggleSearchFocused,
|
|
253
258
|
setIsSettingsOpen,
|
|
254
259
|
setIsDocOpen,
|
|
255
260
|
closeSettings,
|
|
@@ -344,6 +349,7 @@ export const VZCodeProvider = ({
|
|
|
344
349
|
handleOpenCreateFileModal,
|
|
345
350
|
setActiveFileLeft,
|
|
346
351
|
setActiveFileRight,
|
|
352
|
+
toggleSearchFocused,
|
|
347
353
|
runPrettierRef,
|
|
348
354
|
runCodeRef,
|
|
349
355
|
sidebarRef,
|
|
@@ -386,6 +392,7 @@ export const VZCodeProvider = ({
|
|
|
386
392
|
setSearch,
|
|
387
393
|
setSearchResults,
|
|
388
394
|
setSearchFileVisibility,
|
|
395
|
+
toggleSearchFocused,
|
|
389
396
|
|
|
390
397
|
isSettingsOpen,
|
|
391
398
|
setIsSettingsOpen,
|
|
@@ -46,7 +46,7 @@ export const Search = () => {
|
|
|
46
46
|
shareDBDoc,
|
|
47
47
|
editorCache,
|
|
48
48
|
} = useContext(VZCodeContext);
|
|
49
|
-
const { pattern, results } = search;
|
|
49
|
+
const { pattern, results, focused } = search;
|
|
50
50
|
|
|
51
51
|
useEffect(() => {
|
|
52
52
|
if (isMounted) {
|
|
@@ -67,10 +67,15 @@ export const Search = () => {
|
|
|
67
67
|
return () => clearTimeout(delaySearch);
|
|
68
68
|
} else {
|
|
69
69
|
setIsMounted(true);
|
|
70
|
-
inputRef.current.focus();
|
|
71
70
|
}
|
|
72
71
|
}, [pattern]);
|
|
73
72
|
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (inputRef.current) {
|
|
75
|
+
inputRef.current.focus();
|
|
76
|
+
}
|
|
77
|
+
}, [focused]);
|
|
78
|
+
|
|
74
79
|
return (
|
|
75
80
|
<div>
|
|
76
81
|
<Form.Group
|
|
@@ -35,21 +35,74 @@ import './styles.scss';
|
|
|
35
35
|
const enableConnectionStatus = true;
|
|
36
36
|
|
|
37
37
|
export const VZSidebar = ({
|
|
38
|
-
createFileTooltipText =
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
createFileTooltipText = (
|
|
39
|
+
<>
|
|
40
|
+
<strong>New file</strong>
|
|
41
|
+
{/* TODO verify that Ctrl + Shift + N works - does not work in Linux */}
|
|
42
|
+
<div>(Alt + N or Ctrl + Shift + N)</div>
|
|
43
|
+
</>
|
|
44
|
+
),
|
|
45
|
+
createDirTooltipText = (
|
|
46
|
+
<div>
|
|
47
|
+
<strong>New Directory</strong>
|
|
48
|
+
{/* TODO consider Alt+D, as Ctrl + Shift + D does not work in Linux */}
|
|
49
|
+
<div>(Ctrl + Shift + D)</div>
|
|
50
|
+
</div>
|
|
51
|
+
),
|
|
52
|
+
openSettingsTooltipText = (
|
|
53
|
+
<div>
|
|
54
|
+
<strong>Open Settings</strong>
|
|
55
|
+
<div>(Ctrl + Shift + S or Ctrl + ,)</div>
|
|
56
|
+
</div>
|
|
57
|
+
),
|
|
58
|
+
openKeyboardShortcuts = (
|
|
59
|
+
<div>
|
|
60
|
+
<strong>Keyboard Shortcuts</strong>
|
|
61
|
+
<div>(Ctrl + Shift + K)</div>
|
|
62
|
+
</div>
|
|
63
|
+
),
|
|
64
|
+
reportBugTooltipText = (
|
|
65
|
+
<div>
|
|
66
|
+
<strong>Report Bug</strong>
|
|
67
|
+
{/* TODO get this keyboard shortcut working? */}
|
|
68
|
+
{/* <div>(Ctrl + Shift + B)</div> */}
|
|
69
|
+
</div>
|
|
70
|
+
),
|
|
71
|
+
searchToolTipText = (
|
|
72
|
+
<div>
|
|
73
|
+
<strong>Search</strong>
|
|
74
|
+
<div>(Ctrl + Shift + F)</div>
|
|
75
|
+
</div>
|
|
76
|
+
),
|
|
77
|
+
filesToolTipText = (
|
|
78
|
+
<div>
|
|
79
|
+
<strong>Files</strong>
|
|
80
|
+
<div>(Ctrl + Shift + E)</div>
|
|
81
|
+
</div>
|
|
82
|
+
),
|
|
83
|
+
enableAutoFollowTooltipText = (
|
|
84
|
+
<div>
|
|
85
|
+
<strong>Enable Auto Follow</strong>
|
|
86
|
+
<div>(Ctrl + Shift + A)</div>
|
|
87
|
+
</div>
|
|
88
|
+
),
|
|
89
|
+
disableAutoFollowTooltipText = (
|
|
90
|
+
<div>
|
|
91
|
+
<strong>Disable Auto Follow</strong>
|
|
92
|
+
{/* TODO consider Alt+A, this breaks in Linux */}
|
|
93
|
+
<div>(Ctrl + Shift + A)</div>
|
|
94
|
+
</div>
|
|
95
|
+
),
|
|
45
96
|
}: {
|
|
46
|
-
createFileTooltipText?:
|
|
47
|
-
createDirTooltipText?:
|
|
48
|
-
openSettingsTooltipText?:
|
|
49
|
-
reportBugTooltipText?:
|
|
50
|
-
openKeyboardShortcuts?:
|
|
51
|
-
searchToolTipText?:
|
|
52
|
-
filesToolTipText?:
|
|
97
|
+
createFileTooltipText?: React.ReactNode;
|
|
98
|
+
createDirTooltipText?: React.ReactNode;
|
|
99
|
+
openSettingsTooltipText?: React.ReactNode;
|
|
100
|
+
reportBugTooltipText?: React.ReactNode;
|
|
101
|
+
openKeyboardShortcuts?: React.ReactNode;
|
|
102
|
+
searchToolTipText?: React.ReactNode;
|
|
103
|
+
filesToolTipText?: React.ReactNode;
|
|
104
|
+
enableAutoFollowTooltipText?: React.ReactNode;
|
|
105
|
+
disableAutoFollowTooltipText?: React.ReactNode;
|
|
53
106
|
}) => {
|
|
54
107
|
const {
|
|
55
108
|
files,
|
|
@@ -135,8 +188,9 @@ export const VZSidebar = ({
|
|
|
135
188
|
}
|
|
136
189
|
>
|
|
137
190
|
<i
|
|
138
|
-
|
|
191
|
+
id="files-icon"
|
|
139
192
|
className="icon-button icon-button-dark"
|
|
193
|
+
onClick={() => setIsSearchOpen(false)}
|
|
140
194
|
>
|
|
141
195
|
<FolderSVG />
|
|
142
196
|
</i>
|
|
@@ -151,8 +205,9 @@ export const VZSidebar = ({
|
|
|
151
205
|
}
|
|
152
206
|
>
|
|
153
207
|
<i
|
|
154
|
-
|
|
208
|
+
id="search-icon"
|
|
155
209
|
className="icon-button icon-button-dark"
|
|
210
|
+
onClick={() => setIsSearchOpen(true)}
|
|
156
211
|
>
|
|
157
212
|
<SearchSVG />
|
|
158
213
|
</i>
|
|
@@ -167,8 +222,9 @@ export const VZSidebar = ({
|
|
|
167
222
|
}
|
|
168
223
|
>
|
|
169
224
|
<i
|
|
170
|
-
|
|
225
|
+
id="shortcut-icon"
|
|
171
226
|
className="icon-button icon-button-dark"
|
|
227
|
+
onClick={handleQuestionMarkClick}
|
|
172
228
|
>
|
|
173
229
|
<QuestionMarkSVG />
|
|
174
230
|
</i>
|
|
@@ -187,7 +243,10 @@ export const VZSidebar = ({
|
|
|
187
243
|
target="_blank"
|
|
188
244
|
rel="noopener noreferrer"
|
|
189
245
|
>
|
|
190
|
-
<i
|
|
246
|
+
<i
|
|
247
|
+
id="bug-icon"
|
|
248
|
+
className="icon-button icon-button-dark"
|
|
249
|
+
>
|
|
191
250
|
<BugSVG />
|
|
192
251
|
</i>
|
|
193
252
|
</a>
|
|
@@ -202,8 +261,9 @@ export const VZSidebar = ({
|
|
|
202
261
|
}
|
|
203
262
|
>
|
|
204
263
|
<i
|
|
205
|
-
|
|
264
|
+
id="settings-icon"
|
|
206
265
|
className="icon-button icon-button-dark"
|
|
266
|
+
onClick={handleSettingsClick}
|
|
207
267
|
>
|
|
208
268
|
<GearSVG />
|
|
209
269
|
</i>
|
|
@@ -218,8 +278,9 @@ export const VZSidebar = ({
|
|
|
218
278
|
}
|
|
219
279
|
>
|
|
220
280
|
<i
|
|
221
|
-
|
|
281
|
+
id="new-file-icon"
|
|
222
282
|
className="icon-button icon-button-dark"
|
|
283
|
+
onClick={handleOpenCreateFileModal}
|
|
223
284
|
>
|
|
224
285
|
<NewSVG />
|
|
225
286
|
</i>
|
|
@@ -235,8 +296,9 @@ export const VZSidebar = ({
|
|
|
235
296
|
}
|
|
236
297
|
>
|
|
237
298
|
<i
|
|
238
|
-
|
|
299
|
+
id="new-directory-icon"
|
|
239
300
|
className="icon-button icon-button-dark"
|
|
301
|
+
onClick={handleOpenCreateDirModal}
|
|
240
302
|
>
|
|
241
303
|
<FileSVG />
|
|
242
304
|
</i>
|
|
@@ -248,18 +310,19 @@ export const VZSidebar = ({
|
|
|
248
310
|
overlay={
|
|
249
311
|
<Tooltip id="toggle-auto-follow">
|
|
250
312
|
{enableAutoFollow
|
|
251
|
-
?
|
|
252
|
-
:
|
|
313
|
+
? disableAutoFollowTooltipText
|
|
314
|
+
: enableAutoFollowTooltipText}
|
|
253
315
|
</Tooltip>
|
|
254
316
|
}
|
|
255
317
|
>
|
|
256
318
|
<i
|
|
257
|
-
|
|
319
|
+
id="auto-focus-icon"
|
|
258
320
|
className={`icon-button icon-button-dark${
|
|
259
321
|
enableAutoFollow
|
|
260
322
|
? ' vh-color-success-01'
|
|
261
323
|
: ''
|
|
262
324
|
}`}
|
|
325
|
+
onClick={toggleAutoFollow}
|
|
263
326
|
>
|
|
264
327
|
<PinSVG />
|
|
265
328
|
</i>
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { FileId, VZCodeContent } from '../types';
|
|
2
|
-
import { TabState } from './vzReducer';
|
|
1
|
+
import { FileId, TabState, VZCodeContent } from '../types';
|
|
3
2
|
|
|
4
3
|
// The delimiter used to separate file names in the `tabs` parameter.
|
|
5
4
|
// We need a character that is both URL-safe (does not get escaped in URLs)
|
package/src/client/useActions.ts
CHANGED
|
@@ -4,10 +4,11 @@ import {
|
|
|
4
4
|
FileId,
|
|
5
5
|
SearchFileVisibility,
|
|
6
6
|
ShareDBDoc,
|
|
7
|
+
TabState,
|
|
7
8
|
Username,
|
|
8
9
|
VZCodeContent,
|
|
9
10
|
} from '../types';
|
|
10
|
-
import {
|
|
11
|
+
import { VZAction } from './vzReducer';
|
|
11
12
|
|
|
12
13
|
// This is a custom hook that returns a set of functions
|
|
13
14
|
// that can be used to dispatch actions to the reducer.
|
|
@@ -113,6 +114,13 @@ export const useActions = (
|
|
|
113
114
|
[dispatch],
|
|
114
115
|
);
|
|
115
116
|
|
|
117
|
+
// Toggle the focused variable, which should focus the search input
|
|
118
|
+
const toggleSearchFocused = useCallback(() => {
|
|
119
|
+
dispatch({
|
|
120
|
+
type: 'toggle_search_focused',
|
|
121
|
+
});
|
|
122
|
+
}, [dispatch]);
|
|
123
|
+
|
|
116
124
|
// True to show the settings modal.
|
|
117
125
|
const setIsSettingsOpen = useCallback(
|
|
118
126
|
(value: boolean) => {
|
|
@@ -175,6 +183,7 @@ export const useActions = (
|
|
|
175
183
|
setSearch,
|
|
176
184
|
setSearchResults,
|
|
177
185
|
setSearchFileVisibility,
|
|
186
|
+
toggleSearchFocused,
|
|
178
187
|
setIsSettingsOpen,
|
|
179
188
|
setIsDocOpen,
|
|
180
189
|
closeSettings,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
1
|
+
import { useContext, useEffect } from 'react';
|
|
2
2
|
import { shouldTriggerRun } from './shouldTriggerRun';
|
|
3
3
|
import { syntaxTree } from '@codemirror/language';
|
|
4
4
|
import { SyntaxNode, SyntaxNodeRef } from '@lezer/common';
|
|
@@ -151,6 +151,18 @@ function jumpToDefinition(
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
+
// Sidebar keyboard shortcuts in form Ctrl + Shift + <key>
|
|
155
|
+
const sideBarKeyBoardMap = {
|
|
156
|
+
E: 'files-icon',
|
|
157
|
+
F: 'search-icon',
|
|
158
|
+
K: 'shortcut-icon',
|
|
159
|
+
B: 'bug-icon',
|
|
160
|
+
S: 'settings-icon',
|
|
161
|
+
N: 'new-file-icon',
|
|
162
|
+
D: 'new-directory-icon',
|
|
163
|
+
A: 'auto-focus-icon',
|
|
164
|
+
};
|
|
165
|
+
|
|
154
166
|
// This module implements the keyboard shortcuts
|
|
155
167
|
// for the VZCode editor.
|
|
156
168
|
// These include:
|
|
@@ -166,6 +178,7 @@ export const useKeyboardShortcuts = ({
|
|
|
166
178
|
handleOpenCreateFileModal,
|
|
167
179
|
setActiveFileLeft,
|
|
168
180
|
setActiveFileRight,
|
|
181
|
+
toggleSearchFocused,
|
|
169
182
|
runPrettierRef,
|
|
170
183
|
runCodeRef,
|
|
171
184
|
sidebarRef,
|
|
@@ -177,6 +190,7 @@ export const useKeyboardShortcuts = ({
|
|
|
177
190
|
handleOpenCreateFileModal: () => void;
|
|
178
191
|
setActiveFileLeft: () => void;
|
|
179
192
|
setActiveFileRight: () => void;
|
|
193
|
+
toggleSearchFocused: () => void;
|
|
180
194
|
runPrettierRef: React.MutableRefObject<() => void>;
|
|
181
195
|
runCodeRef: React.MutableRefObject<() => void>;
|
|
182
196
|
sidebarRef: React.RefObject<HTMLDivElement>;
|
|
@@ -203,6 +217,22 @@ export const useKeyboardShortcuts = ({
|
|
|
203
217
|
return;
|
|
204
218
|
}
|
|
205
219
|
|
|
220
|
+
if (event.ctrlKey && event.shiftKey) {
|
|
221
|
+
// Handle keyboard shortcuts related to the side bar icons
|
|
222
|
+
document
|
|
223
|
+
.getElementById(sideBarKeyBoardMap[event.key])
|
|
224
|
+
?.click();
|
|
225
|
+
|
|
226
|
+
// Ensure the search input is always focused
|
|
227
|
+
if (event.key === 'F') {
|
|
228
|
+
toggleSearchFocused();
|
|
229
|
+
}
|
|
230
|
+
} else if (event.ctrlKey && event.key === ',') {
|
|
231
|
+
document
|
|
232
|
+
.getElementById(sideBarKeyBoardMap['S'])
|
|
233
|
+
?.click();
|
|
234
|
+
}
|
|
235
|
+
|
|
206
236
|
if (event.ctrlKey === true) {
|
|
207
237
|
// On holding CTRL key, search for a potential definition jump using mouse location
|
|
208
238
|
document.addEventListener(
|
package/src/client/useURLSync.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useSearchParams } from 'react-router-dom';
|
|
2
|
-
import { FileId, VZCodeContent } from '../types';
|
|
3
|
-
import { TabState } from './vzReducer';
|
|
2
|
+
import { FileId, TabState, VZCodeContent } from '../types';
|
|
4
3
|
import { useEffect, useMemo, useRef } from 'react';
|
|
5
4
|
import {
|
|
6
5
|
TabStateParams,
|