vzcode 1.28.0 → 1.29.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-DQm1t_Hp.js → index-wUrsGgYs.js} +5 -5
- package/dist/index.html +1 -1
- package/package.json +2 -1
- package/src/client/AIAssist/AIAssistCodeMirrorKeyMap.ts +3 -6
- package/src/client/AIAssist/AIAssistWidget/index.tsx +3 -2
- package/src/client/AIAssist/formatFile.ts +2 -2
- package/src/client/AIAssist/startAIAssist.ts +7 -8
- package/src/client/App/usePending.ts +3 -2
- package/src/client/App/useShareDB.ts +7 -5
- package/src/client/CodeEditor/getOrCreateEditor.ts +4 -5
- package/src/client/CodeEditor/json1PresenceDisplay.ts +2 -2
- package/src/client/CodeErrorOverlay/index.tsx +2 -2
- package/src/client/TabList/Tab.tsx +5 -4
- package/src/client/VZCodeContext.tsx +12 -23
- package/src/client/VZSidebar/FileListing.tsx +5 -4
- package/src/client/VZSidebar/Listing.tsx +4 -7
- package/src/client/VZSidebar/Search.tsx +5 -4
- package/src/client/VZSidebar/index.tsx +4 -4
- package/src/client/getFileTree.ts +4 -3
- package/src/client/tabsSearchParameters.test.ts +3 -2
- package/src/client/tabsSearchParameters.ts +8 -7
- package/src/client/themes/vizhubTheme/index.ts +13 -16
- package/src/client/useActions.ts +6 -7
- package/src/client/useEditorCache.ts +3 -2
- package/src/client/useFileCRUD.ts +15 -18
- package/src/client/useKeyboardShortcuts.ts +4 -3
- package/src/client/usePrettier/index.ts +6 -10
- package/src/client/usePrettier/worker.ts +3 -3
- package/src/client/useRunCode.tsx +3 -2
- package/src/client/useTypeScript/index.ts +3 -3
- package/src/client/useTypeScript/worker/handleMessageUpdateContent.ts +8 -4
- package/src/client/useURLSync.ts +5 -4
- package/src/client/vzReducer/closeTabsReducer.ts +3 -7
- package/src/client/vzReducer/index.ts +7 -8
- package/src/client/vzReducer/searchReducer.ts +2 -2
- package/src/client/vzReducer/updatePane.ts +3 -7
- package/src/types.ts +7 -52
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-wUrsGgYs.js"></script>
|
|
24
24
|
<link rel="stylesheet" crossorigin href="/assets/index-zzK6rRiK.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.29.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -132,6 +132,7 @@
|
|
|
132
132
|
"@uiw/codemirror-theme-okaidia": "^4.23.10",
|
|
133
133
|
"@uiw/codemirror-theme-xcode": "^4.23.10",
|
|
134
134
|
"@uiw/codemirror-themes": "^4.23.10",
|
|
135
|
+
"@vizhub/viz-types": "^0.0.2",
|
|
135
136
|
"body-parser": "^2.2.0",
|
|
136
137
|
"codemirror": "^6.0.1",
|
|
137
138
|
"codemirror-copilot": "^0.0.7",
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { EditorView, keymap } from '@codemirror/view';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
TabState,
|
|
5
|
-
VZCodeContent,
|
|
6
|
-
} from '../../types';
|
|
2
|
+
import { ShareDBDoc, TabState } from '../../types';
|
|
3
|
+
import { VizContent } from '@vizhub/viz-types';
|
|
7
4
|
|
|
8
5
|
export const AIAssistCodeMirrorKeyMap = ({
|
|
9
6
|
shareDBDoc,
|
|
10
7
|
fileId,
|
|
11
8
|
tabList,
|
|
12
9
|
}: {
|
|
13
|
-
shareDBDoc: ShareDBDoc<
|
|
10
|
+
shareDBDoc: ShareDBDoc<VizContent>;
|
|
14
11
|
fileId: string;
|
|
15
12
|
tabList: Array<TabState>;
|
|
16
13
|
}) =>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useCallback, useContext, useState } from 'react';
|
|
2
2
|
import { OverlayTrigger, Tooltip } from '../../bootstrap';
|
|
3
|
-
import {
|
|
3
|
+
import { PaneId, TabState } from '../../../types';
|
|
4
|
+
import { VizFileId } from '@vizhub/viz-types';
|
|
4
5
|
import { VZCodeContext } from '../../VZCodeContext';
|
|
5
6
|
import {
|
|
6
7
|
RequestId,
|
|
@@ -27,7 +28,7 @@ export const AIAssistWidget = ({
|
|
|
27
28
|
aiAssistOptions: { [key: string]: string };
|
|
28
29
|
aiAssistTooltipText?: string;
|
|
29
30
|
aiAssistClickOverride?: () => void;
|
|
30
|
-
activeFileId:
|
|
31
|
+
activeFileId: VizFileId;
|
|
31
32
|
tabList: Array<TabState>;
|
|
32
33
|
paneId: PaneId;
|
|
33
34
|
}) => {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { VizFile } from '@vizhub/viz-types';
|
|
2
2
|
|
|
3
3
|
const maxFileNameLength = 100;
|
|
4
4
|
const maxFileTextLength = 2000;
|
|
5
5
|
|
|
6
6
|
// Formats a file for the prompt.
|
|
7
7
|
export const formatFile = (
|
|
8
|
-
file:
|
|
8
|
+
file: VizFile,
|
|
9
9
|
truncateText = true,
|
|
10
10
|
) => {
|
|
11
11
|
const nameTruncated = file.name
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { EditorView } from 'codemirror';
|
|
2
|
+
import { ShareDBDoc, TabState } from '../../types';
|
|
2
3
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
VZCodeContent,
|
|
8
|
-
} from '../../types';
|
|
4
|
+
VizFile,
|
|
5
|
+
VizFileId,
|
|
6
|
+
VizContent,
|
|
7
|
+
} from '@vizhub/viz-types';
|
|
9
8
|
import { RequestId } from '../generateRequestId';
|
|
10
9
|
import { formatFile } from './formatFile';
|
|
11
10
|
|
|
@@ -26,8 +25,8 @@ export const startAIAssist = async ({
|
|
|
26
25
|
aiStreamId,
|
|
27
26
|
}: {
|
|
28
27
|
view: EditorView;
|
|
29
|
-
shareDBDoc: ShareDBDoc<
|
|
30
|
-
fileId:
|
|
28
|
+
shareDBDoc: ShareDBDoc<VizContent>;
|
|
29
|
+
fileId: VizFileId;
|
|
31
30
|
tabList: Array<TabState>;
|
|
32
31
|
aiAssistEndpoint?: string;
|
|
33
32
|
aiAssistOptions?: {
|
|
@@ -4,14 +4,15 @@ import {
|
|
|
4
4
|
useCallback,
|
|
5
5
|
useRef,
|
|
6
6
|
} from 'react';
|
|
7
|
-
import { ShareDBDoc
|
|
7
|
+
import { ShareDBDoc } from '../../types';
|
|
8
|
+
import { VizContent } from '@vizhub/viz-types';
|
|
8
9
|
|
|
9
10
|
// import { runDelay } from '../constants';
|
|
10
11
|
// TODO understand what this part is for
|
|
11
12
|
const runDelay = 1000;
|
|
12
13
|
|
|
13
14
|
export const usePending = (
|
|
14
|
-
shareDBDoc: ShareDBDoc<
|
|
15
|
+
shareDBDoc: ShareDBDoc<VizContent>,
|
|
15
16
|
) => {
|
|
16
17
|
const lastOpTimerRef = useRef<NodeJS.Timeout>();
|
|
17
18
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useEffect, useState, useRef } from 'react';
|
|
2
2
|
import { randomId } from '../../randomId';
|
|
3
|
-
import { ShareDBDoc
|
|
3
|
+
import { ShareDBDoc } from '../../types';
|
|
4
|
+
import { VizContent } from '@vizhub/viz-types';
|
|
4
5
|
import { useSubmitOperation } from '../useSubmitOperation';
|
|
5
6
|
import { usePending } from './usePending';
|
|
6
7
|
|
|
@@ -12,7 +13,7 @@ export const useShareDB = ({
|
|
|
12
13
|
}) => {
|
|
13
14
|
// The ShareDB document.
|
|
14
15
|
const [shareDBDoc, setShareDBDoc] =
|
|
15
|
-
useState<ShareDBDoc<
|
|
16
|
+
useState<ShareDBDoc<VizContent> | null>(null);
|
|
16
17
|
|
|
17
18
|
// Local ShareDB presence, for broadcasting our cursor position
|
|
18
19
|
// so other clients can see it.
|
|
@@ -26,8 +27,9 @@ export const useShareDB = ({
|
|
|
26
27
|
// The `doc.data` part of the ShareDB document,
|
|
27
28
|
// updated on each change to decouple rendering from ShareDB.
|
|
28
29
|
// Starts out as `null` until the document is loaded.
|
|
29
|
-
const [content, setContent] =
|
|
30
|
-
|
|
30
|
+
const [content, setContent] = useState<VizContent | null>(
|
|
31
|
+
null,
|
|
32
|
+
);
|
|
31
33
|
|
|
32
34
|
const [connected, setConnected] =
|
|
33
35
|
useState<boolean>(false);
|
|
@@ -145,7 +147,7 @@ export const useShareDB = ({
|
|
|
145
147
|
// A convenience function for mutating the ShareDB document
|
|
146
148
|
// based submitting OT ops generated by diffing the JSON.
|
|
147
149
|
const submitOperation =
|
|
148
|
-
useSubmitOperation<
|
|
150
|
+
useSubmitOperation<VizContent>(shareDBDoc);
|
|
149
151
|
|
|
150
152
|
return {
|
|
151
153
|
shareDBDoc,
|
|
@@ -19,13 +19,12 @@ import { Diagnostic, linter } from '@codemirror/lint';
|
|
|
19
19
|
|
|
20
20
|
import { json1Presence, textUnicode } from '../../ot';
|
|
21
21
|
import {
|
|
22
|
-
FileId,
|
|
23
22
|
PaneId,
|
|
24
23
|
ShareDBDoc,
|
|
25
24
|
TabState,
|
|
26
25
|
Username,
|
|
27
|
-
VZCodeContent,
|
|
28
26
|
} from '../../types';
|
|
27
|
+
import { VizFileId, VizContent } from '@vizhub/viz-types';
|
|
29
28
|
import { json1PresenceBroadcast } from './json1PresenceBroadcast';
|
|
30
29
|
import { json1PresenceDisplay } from './json1PresenceDisplay';
|
|
31
30
|
import {
|
|
@@ -143,7 +142,7 @@ export const getOrCreateEditor = ({
|
|
|
143
142
|
}: {
|
|
144
143
|
// TODO pass this in from the outside
|
|
145
144
|
paneId?: PaneId;
|
|
146
|
-
fileId:
|
|
145
|
+
fileId: VizFileId;
|
|
147
146
|
|
|
148
147
|
// The ShareDB document that contains the file.
|
|
149
148
|
// Used when the editor is created for:
|
|
@@ -155,10 +154,10 @@ export const getOrCreateEditor = ({
|
|
|
155
154
|
// This can be `undefined` in the case where we are
|
|
156
155
|
// viewing files read-only, in which case multiplayer
|
|
157
156
|
// editing is not enabled.
|
|
158
|
-
shareDBDoc: ShareDBDoc<
|
|
157
|
+
shareDBDoc: ShareDBDoc<VizContent> | undefined;
|
|
159
158
|
|
|
160
159
|
// The initial content to present.
|
|
161
|
-
content:
|
|
160
|
+
content: VizContent;
|
|
162
161
|
|
|
163
162
|
filesPath: string[];
|
|
164
163
|
localPresence: any;
|
|
@@ -6,8 +6,8 @@ import {
|
|
|
6
6
|
} from '@codemirror/view';
|
|
7
7
|
import { Annotation, RangeSet } from '@codemirror/state';
|
|
8
8
|
import { assignUserColor } from '../presenceColor';
|
|
9
|
+
import { VizFileId } from '@vizhub/viz-types';
|
|
9
10
|
import {
|
|
10
|
-
FileId,
|
|
11
11
|
Presence,
|
|
12
12
|
PresenceId,
|
|
13
13
|
TabState,
|
|
@@ -98,7 +98,7 @@ export const json1PresenceDisplay = ({
|
|
|
98
98
|
// in the current file, then open the tab of the other user.
|
|
99
99
|
if (enableAutoFollowRef.current) {
|
|
100
100
|
openTab({
|
|
101
|
-
fileId: presence.start[1] as
|
|
101
|
+
fileId: presence.start[1] as VizFileId,
|
|
102
102
|
isTransient: true,
|
|
103
103
|
});
|
|
104
104
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { VizContent } from '@vizhub/viz-types';
|
|
3
3
|
import { CloseSVG } from '../Icons';
|
|
4
4
|
import './style.scss';
|
|
5
5
|
|
|
@@ -10,7 +10,7 @@ export const CodeErrorOverlay = ({
|
|
|
10
10
|
content,
|
|
11
11
|
}: {
|
|
12
12
|
errorMessage: string | null;
|
|
13
|
-
content:
|
|
13
|
+
content: VizContent;
|
|
14
14
|
}) => {
|
|
15
15
|
// console.log(
|
|
16
16
|
// 'errorMessage in CodeErrorOverlay: ',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { TabState } from '../../types';
|
|
3
|
+
import type { VizFileId } from '@vizhub/viz-types';
|
|
3
4
|
import { CloseSVG } from '../Icons';
|
|
4
5
|
|
|
5
6
|
// Supports adding the file's containing folder to the tab name
|
|
@@ -20,12 +21,12 @@ export const Tab = ({
|
|
|
20
21
|
closeTabs,
|
|
21
22
|
fileName,
|
|
22
23
|
}: {
|
|
23
|
-
fileId:
|
|
24
|
+
fileId: VizFileId;
|
|
24
25
|
isTransient?: boolean;
|
|
25
26
|
isActive: boolean;
|
|
26
|
-
setActiveFileId: (fileId:
|
|
27
|
+
setActiveFileId: (fileId: VizFileId) => void;
|
|
27
28
|
openTab: (tabState: TabState) => void;
|
|
28
|
-
closeTabs: (fileIds:
|
|
29
|
+
closeTabs: (fileIds: VizFileId[]) => void;
|
|
29
30
|
fileName: string;
|
|
30
31
|
}) => {
|
|
31
32
|
const handleCloseClick = useCallback(
|
|
@@ -6,7 +6,6 @@ import {
|
|
|
6
6
|
useState,
|
|
7
7
|
} from 'react';
|
|
8
8
|
import {
|
|
9
|
-
Files,
|
|
10
9
|
ItemId,
|
|
11
10
|
LeafPane,
|
|
12
11
|
Pane,
|
|
@@ -18,8 +17,8 @@ import {
|
|
|
18
17
|
SubmitOperation,
|
|
19
18
|
TabState,
|
|
20
19
|
Username,
|
|
21
|
-
VZCodeContent,
|
|
22
20
|
} from '../types';
|
|
21
|
+
import { VizFiles, VizContent } from '@vizhub/viz-types';
|
|
23
22
|
import {
|
|
24
23
|
ThemeLabel,
|
|
25
24
|
defaultTheme,
|
|
@@ -49,17 +48,17 @@ export const VZCodeContext =
|
|
|
49
48
|
|
|
50
49
|
// The type of the object provided by this context.
|
|
51
50
|
export type VZCodeContextValue = {
|
|
52
|
-
content:
|
|
53
|
-
shareDBDoc: ShareDBDoc<
|
|
51
|
+
content: VizContent | null;
|
|
52
|
+
shareDBDoc: ShareDBDoc<VizContent> | null;
|
|
54
53
|
submitOperation: (
|
|
55
|
-
next: (content:
|
|
54
|
+
next: (content: VizContent) => VizContent,
|
|
56
55
|
) => void;
|
|
57
56
|
// TODO pull in this type from ShareDB if possible
|
|
58
57
|
localPresence: any;
|
|
59
58
|
// TODO pull in this type from ShareDB if possible
|
|
60
59
|
docPresence: any;
|
|
61
60
|
|
|
62
|
-
files:
|
|
61
|
+
files: VizFiles | null;
|
|
63
62
|
createFile: (fileName: string, text?: string) => void;
|
|
64
63
|
renameFile: (fileId: string, fileName: string) => void;
|
|
65
64
|
deleteFile: (fileId: string) => void;
|
|
@@ -117,16 +116,14 @@ export type VZCodeContextValue = {
|
|
|
117
116
|
isSearchOpen: boolean;
|
|
118
117
|
setIsSearchOpen: (isSearchOpen: boolean) => void;
|
|
119
118
|
setSearch: (pattern: string) => void;
|
|
120
|
-
setSearchResults: (
|
|
121
|
-
files: ShareDBDoc<VZCodeContent>,
|
|
122
|
-
) => void;
|
|
119
|
+
setSearchResults: (files: ShareDBDoc<VizContent>) => void;
|
|
123
120
|
setSearchFileVisibility: (
|
|
124
|
-
files: ShareDBDoc<
|
|
121
|
+
files: ShareDBDoc<VizContent>,
|
|
125
122
|
id: string,
|
|
126
123
|
visibility: SearchFileVisibility,
|
|
127
124
|
) => void;
|
|
128
125
|
setSearchLineVisibility: (
|
|
129
|
-
files: ShareDBDoc<
|
|
126
|
+
files: ShareDBDoc<VizContent>,
|
|
130
127
|
id: string,
|
|
131
128
|
line: number,
|
|
132
129
|
) => void;
|
|
@@ -201,8 +198,8 @@ export const VZCodeProvider = ({
|
|
|
201
198
|
liveKitConnection,
|
|
202
199
|
setLiveKitConnection,
|
|
203
200
|
}: {
|
|
204
|
-
content:
|
|
205
|
-
shareDBDoc: ShareDBDoc<
|
|
201
|
+
content: VizContent;
|
|
202
|
+
shareDBDoc: ShareDBDoc<VizContent>;
|
|
206
203
|
submitOperation: SubmitOperation;
|
|
207
204
|
localPresence: any;
|
|
208
205
|
docPresence: any;
|
|
@@ -221,15 +218,7 @@ export const VZCodeProvider = ({
|
|
|
221
218
|
setLiveKitConnection: (state: boolean) => void;
|
|
222
219
|
}) => {
|
|
223
220
|
// Auto-run Pretter after local changes.
|
|
224
|
-
const {
|
|
225
|
-
prettierError,
|
|
226
|
-
runPrettierRef,
|
|
227
|
-
}: {
|
|
228
|
-
prettierError: string | null;
|
|
229
|
-
runPrettierRef: React.MutableRefObject<
|
|
230
|
-
null | (() => void)
|
|
231
|
-
>;
|
|
232
|
-
} = usePrettier({
|
|
221
|
+
const { prettierError, runPrettierRef } = usePrettier({
|
|
233
222
|
shareDBDoc,
|
|
234
223
|
submitOperation,
|
|
235
224
|
prettierWorker,
|
|
@@ -393,7 +382,7 @@ export const VZCodeProvider = ({
|
|
|
393
382
|
);
|
|
394
383
|
|
|
395
384
|
// Isolate the files object from the document.
|
|
396
|
-
const files:
|
|
385
|
+
const files: VizFiles | null = content
|
|
397
386
|
? content.files
|
|
398
387
|
: null;
|
|
399
388
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useCallback, useContext } from 'react';
|
|
2
2
|
import { Item } from './Item';
|
|
3
|
-
import {
|
|
3
|
+
import { PresenceIndicator } from '../../types';
|
|
4
|
+
import { VizFileId } from '@vizhub/viz-types';
|
|
4
5
|
import { VZCodeContext } from '../VZCodeContext';
|
|
5
6
|
import { FileTypeIcon } from './FileTypeIcon';
|
|
6
7
|
import { assignUserColor } from '../presenceColor';
|
|
@@ -44,9 +45,9 @@ export const FileListing = ({
|
|
|
44
45
|
presence,
|
|
45
46
|
}: {
|
|
46
47
|
name: string;
|
|
47
|
-
fileId:
|
|
48
|
-
handleFileClick: (fileId:
|
|
49
|
-
handleFileDoubleClick: (fileId:
|
|
48
|
+
fileId: VizFileId;
|
|
49
|
+
handleFileClick: (fileId: VizFileId) => void;
|
|
50
|
+
handleFileDoubleClick: (fileId: VizFileId) => void;
|
|
50
51
|
isActive: boolean;
|
|
51
52
|
presence: PresenceIndicator[];
|
|
52
53
|
}) => {
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
FileTree,
|
|
5
|
-
FileTreeFile,
|
|
6
|
-
} from '../../types';
|
|
2
|
+
import { VizFileId } from '@vizhub/viz-types';
|
|
3
|
+
import type { FileTree, FileTreeFile } from '../../types';
|
|
7
4
|
import { VZCodeContext } from '../VZCodeContext';
|
|
8
5
|
import { DirectoryListing } from './DirectoryListing';
|
|
9
6
|
import { FileListing } from './FileListing';
|
|
@@ -16,8 +13,8 @@ export const Listing = ({
|
|
|
16
13
|
handleFileDoubleClick,
|
|
17
14
|
}: {
|
|
18
15
|
entity: FileTree | FileTreeFile;
|
|
19
|
-
handleFileClick: (fileId:
|
|
20
|
-
handleFileDoubleClick: (fileId:
|
|
16
|
+
handleFileClick: (fileId: VizFileId) => void;
|
|
17
|
+
handleFileDoubleClick: (fileId: VizFileId) => void;
|
|
21
18
|
}) => {
|
|
22
19
|
const { activePane, sidebarPresenceIndicators } =
|
|
23
20
|
useContext(VZCodeContext);
|
|
@@ -7,7 +7,8 @@ import {
|
|
|
7
7
|
} from 'react';
|
|
8
8
|
import { Form } from '../bootstrap';
|
|
9
9
|
import { VZCodeContext } from '../VZCodeContext';
|
|
10
|
-
import {
|
|
10
|
+
import { VizFileId } from '@vizhub/viz-types';
|
|
11
|
+
import { SearchFile } from '../../types';
|
|
11
12
|
import { EditorView } from 'codemirror';
|
|
12
13
|
import { CloseSVG, DirectoryArrowSVG } from '../Icons';
|
|
13
14
|
import { FileTypeIcon } from './FileTypeIcon';
|
|
@@ -112,12 +113,12 @@ export const Search = () => {
|
|
|
112
113
|
[focusedIndex, focusedChildIndex],
|
|
113
114
|
);
|
|
114
115
|
|
|
115
|
-
const closeResult = useCallback((fileId:
|
|
116
|
+
const closeResult = useCallback((fileId: VizFileId) => {
|
|
116
117
|
setSearchFileVisibility(shareDBDoc, fileId, 'closed');
|
|
117
118
|
}, []);
|
|
118
119
|
|
|
119
120
|
const focusFileElement = useCallback(
|
|
120
|
-
(fileId:
|
|
121
|
+
(fileId: VizFileId, index: number) => {
|
|
121
122
|
setActiveFileId(fileId);
|
|
122
123
|
setSearchFocusedIndex(index, null);
|
|
123
124
|
},
|
|
@@ -225,7 +226,7 @@ export const Search = () => {
|
|
|
225
226
|
break;
|
|
226
227
|
case 'Enter':
|
|
227
228
|
case ' ':
|
|
228
|
-
const fileId:
|
|
229
|
+
const fileId: VizFileId = files[focusedIndex][0];
|
|
229
230
|
setActiveFileId(fileId);
|
|
230
231
|
|
|
231
232
|
if (focusedChildIndex !== null) {
|
|
@@ -7,13 +7,13 @@ import {
|
|
|
7
7
|
useRef,
|
|
8
8
|
} from 'react';
|
|
9
9
|
import {
|
|
10
|
-
FileId,
|
|
11
10
|
FileTree,
|
|
12
11
|
FileTreeFile,
|
|
13
12
|
Presence,
|
|
14
13
|
PresenceId,
|
|
15
14
|
PresenceIndicator,
|
|
16
15
|
} from '../../types';
|
|
16
|
+
import { VizFileId } from '@vizhub/viz-types';
|
|
17
17
|
import { OverlayTrigger, Tooltip } from '../bootstrap';
|
|
18
18
|
import { getFileTree } from '../getFileTree';
|
|
19
19
|
import {
|
|
@@ -156,7 +156,7 @@ export const VZSidebar = ({
|
|
|
156
156
|
|
|
157
157
|
// On single-click, open the file in a transient tab.
|
|
158
158
|
const handleFileClick = useCallback(
|
|
159
|
-
(fileId:
|
|
159
|
+
(fileId: VizFileId) => {
|
|
160
160
|
openTab({ fileId, isTransient: true });
|
|
161
161
|
},
|
|
162
162
|
[openTab],
|
|
@@ -164,7 +164,7 @@ export const VZSidebar = ({
|
|
|
164
164
|
|
|
165
165
|
// On double-click, open the file in a persistent tab.
|
|
166
166
|
const handleFileDoubleClick = useCallback(
|
|
167
|
-
(fileId:
|
|
167
|
+
(fileId: VizFileId) => {
|
|
168
168
|
openTab({ fileId, isTransient: false });
|
|
169
169
|
},
|
|
170
170
|
[openTab],
|
|
@@ -199,7 +199,7 @@ export const VZSidebar = ({
|
|
|
199
199
|
) => {
|
|
200
200
|
const presenceIndicator: PresenceIndicator = {
|
|
201
201
|
username: update.username,
|
|
202
|
-
fileId: update.start[1] as
|
|
202
|
+
fileId: update.start[1] as VizFileId,
|
|
203
203
|
};
|
|
204
204
|
|
|
205
205
|
// console.log('Got presence!');
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
// Inspired by
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { FileTree } from '../types';
|
|
4
|
+
import { VizFiles } from '@vizhub/viz-types';
|
|
4
5
|
|
|
5
6
|
// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/getFileTree.js
|
|
6
|
-
export const getFileTree = (files:
|
|
7
|
+
export const getFileTree = (files: VizFiles): FileTree => {
|
|
7
8
|
const tree: FileTree = { name: 'files' };
|
|
8
9
|
for (const fileId of Object.keys(files)) {
|
|
9
10
|
const file = files[fileId];
|
|
@@ -43,7 +44,7 @@ export const getFileTree = (files: Files): FileTree => {
|
|
|
43
44
|
if (file.text !== null) {
|
|
44
45
|
(node.children || (node.children = [])).push({
|
|
45
46
|
name: path[n - 1],
|
|
46
|
-
file,
|
|
47
|
+
file: file as any, // Type assertion to resolve compatibility issue
|
|
47
48
|
fileId,
|
|
48
49
|
});
|
|
49
50
|
}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
decodeTabs,
|
|
5
5
|
delimiter,
|
|
6
6
|
} from './tabsSearchParameters';
|
|
7
|
-
import {
|
|
7
|
+
import { VizContent } from '@vizhub/viz-types';
|
|
8
8
|
|
|
9
9
|
describe('tabsSearchParameters', () => {
|
|
10
10
|
test.each([
|
|
@@ -53,7 +53,8 @@ describe('tabsSearchParameters', () => {
|
|
|
53
53
|
'round trip: $name',
|
|
54
54
|
({ tabStateParams, tabList, activeFileId }) => {
|
|
55
55
|
// Fake Content object
|
|
56
|
-
const content:
|
|
56
|
+
const content: VizContent = {
|
|
57
|
+
id: 'test-viz-id', // Add required id property
|
|
57
58
|
files: {
|
|
58
59
|
'123': { name: 'index.js', text: 'abc' },
|
|
59
60
|
'456': { name: 'README.md', text: 'def' },
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TabState } from '../types';
|
|
2
|
+
import { VizFileId, VizContent } from '@vizhub/viz-types';
|
|
2
3
|
|
|
3
4
|
// The delimiter used to separate file names in the `tabs` parameter.
|
|
4
5
|
// We need a character that is both URL-safe (does not get escaped in URLs)
|
|
@@ -30,7 +31,7 @@ export const delimiter = '~';
|
|
|
30
31
|
// Gets the file id of a file with the given name.
|
|
31
32
|
// Returns null if not found.
|
|
32
33
|
const getFileId = (
|
|
33
|
-
content:
|
|
34
|
+
content: VizContent,
|
|
34
35
|
fileName: string,
|
|
35
36
|
): string | null => {
|
|
36
37
|
if (content && content.files) {
|
|
@@ -48,7 +49,7 @@ const getFileId = (
|
|
|
48
49
|
// guard against failure cases.
|
|
49
50
|
// Returns null if not found.
|
|
50
51
|
const getFileName = (
|
|
51
|
-
content:
|
|
52
|
+
content: VizContent,
|
|
52
53
|
fileId: string,
|
|
53
54
|
): string | null => {
|
|
54
55
|
if (content && content.files) {
|
|
@@ -72,10 +73,10 @@ export const decodeTabs = ({
|
|
|
72
73
|
content,
|
|
73
74
|
}: {
|
|
74
75
|
tabStateParams: TabStateParams;
|
|
75
|
-
content:
|
|
76
|
+
content: VizContent;
|
|
76
77
|
}): {
|
|
77
78
|
tabList: Array<TabState>;
|
|
78
|
-
activeFileId:
|
|
79
|
+
activeFileId: VizFileId;
|
|
79
80
|
} => {
|
|
80
81
|
const { file, tabs } = tabStateParams;
|
|
81
82
|
const tabList: TabState[] = [];
|
|
@@ -106,8 +107,8 @@ export const encodeTabs = ({
|
|
|
106
107
|
content,
|
|
107
108
|
}: {
|
|
108
109
|
tabList: Array<TabState>;
|
|
109
|
-
activeFileId:
|
|
110
|
-
content:
|
|
110
|
+
activeFileId: VizFileId | null;
|
|
111
|
+
content: VizContent;
|
|
111
112
|
}): TabStateParams => {
|
|
112
113
|
// Get the file name of the active file
|
|
113
114
|
const activeFileName = getFileName(content, activeFileId);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// Inspired by https://github.com/uiwjs/react-codemirror/blob/master/themes/vscode/src/index.ts
|
|
4
4
|
|
|
5
5
|
import { tags as t } from '@lezer/highlight';
|
|
6
|
-
import { createTheme } from '
|
|
6
|
+
import { createTheme } from '@uiw/codemirror-themes';
|
|
7
7
|
|
|
8
8
|
import {
|
|
9
9
|
// Colors for various things outside the code itself
|
|
@@ -34,22 +34,19 @@ import { EditorView } from 'codemirror';
|
|
|
34
34
|
// This looks way better as we are pulling in the semi-bold font from Google Fonts
|
|
35
35
|
const boldWeight = '500';
|
|
36
36
|
|
|
37
|
-
const defaultSettingsVizhubTheme
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
};
|
|
37
|
+
const defaultSettingsVizhubTheme = {
|
|
38
|
+
background: backgroundColor,
|
|
39
|
+
foreground: light,
|
|
40
|
+
caret: caretColor,
|
|
41
|
+
selection: selectionBackground,
|
|
42
|
+
selectionMatch: selectionBackgroundMatch,
|
|
43
|
+
lineHighlight,
|
|
44
|
+
gutterBackground: backgroundColor,
|
|
45
|
+
gutterForeground: lineNumbers,
|
|
46
|
+
gutterActiveForeground: lineNumbersActive,
|
|
47
|
+
};
|
|
49
48
|
|
|
50
|
-
function vizhubThemeInit(
|
|
51
|
-
options?: Partial<codemirrorThemes.CreateThemeOptions>,
|
|
52
|
-
) {
|
|
49
|
+
function vizhubThemeInit(options?: Partial<any>) {
|
|
53
50
|
const {
|
|
54
51
|
theme = 'dark',
|
|
55
52
|
settings = {},
|