vzcode 0.39.0 → 0.41.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-7TYVtsYX.css +1 -0
- package/dist/assets/index-APrkOjkE.js +115 -0
- package/dist/assets/{worker-pw8iYY3X.js → worker-i-gsyYZ1.js} +28 -28
- package/dist/index.html +2 -2
- package/package.json +9 -6
- package/src/client/App/style.scss +1 -1
- package/src/client/CodeEditor/basicSetup.ts +73 -0
- package/src/client/CodeEditor/getOrCreateEditor.ts +34 -1
- package/src/client/CodeEditor/json1PresenceDisplay.ts +6 -0
- package/src/client/CodeEditor/typeScriptCompletions.ts +11 -0
- package/src/client/CodeEditor/widgets.ts +4 -2
- package/src/client/TabList/style.scss +1 -0
- package/src/client/VZSidebar/styles.scss +2 -0
- package/src/client/useTypeScript/worker.ts +2 -2
- package/dist/assets/index-ZDmwFqlb.css +0 -1
- package/dist/assets/index-an0ZIKQ3.js +0 -115
package/dist/index.html
CHANGED
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
|
|
25
25
|
rel="stylesheet"
|
|
26
26
|
/>
|
|
27
|
-
<script type="module" crossorigin src="/assets/index-
|
|
28
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
27
|
+
<script type="module" crossorigin src="/assets/index-APrkOjkE.js"></script>
|
|
28
|
+
<link rel="stylesheet" crossorigin href="/assets/index-7TYVtsYX.css">
|
|
29
29
|
</head>
|
|
30
30
|
<body>
|
|
31
31
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.41.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -55,7 +55,10 @@
|
|
|
55
55
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
56
56
|
"@codemirror/view": "^6.22.1",
|
|
57
57
|
"@lezer/highlight": "^1.2.0",
|
|
58
|
+
"@replit/codemirror-indentation-markers": "^6.5.0",
|
|
58
59
|
"@replit/codemirror-interact": "^6.3.0",
|
|
60
|
+
"@replit/codemirror-minimap": "^0.5.1",
|
|
61
|
+
"@replit/codemirror-vscode-keymap": "^6.0.2",
|
|
59
62
|
"@teamwork/websocket-json-stream": "^2.0.0",
|
|
60
63
|
"@typescript/vfs": "^1.5.0",
|
|
61
64
|
"@uiw/codemirror-theme-abcdef": "^4.21.21",
|
|
@@ -84,17 +87,17 @@
|
|
|
84
87
|
"react-dom": "^18.2.0",
|
|
85
88
|
"sharedb": "^4.1.1",
|
|
86
89
|
"sharedb-client-browser": "^4.4.0",
|
|
87
|
-
"vizhub-ui": "^3.
|
|
90
|
+
"vizhub-ui": "^3.10.0",
|
|
88
91
|
"ws": "^8.14.2"
|
|
89
92
|
},
|
|
90
93
|
"devDependencies": {
|
|
91
|
-
"@types/react": "^18.2.
|
|
94
|
+
"@types/react": "^18.2.42",
|
|
92
95
|
"@types/react-dom": "^18.2.17",
|
|
93
|
-
"@vitejs/plugin-react": "^4.2.
|
|
96
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
94
97
|
"prettier": "^3.1.0",
|
|
95
98
|
"sass": "^1.69.5",
|
|
96
99
|
"typescript": "^5.3.2",
|
|
97
|
-
"vite": "^5.0.
|
|
98
|
-
"vitest": "^0.
|
|
100
|
+
"vite": "^5.0.5",
|
|
101
|
+
"vitest": "^1.0.1"
|
|
99
102
|
}
|
|
100
103
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// --vzcode-font-family: ui-monospace, SFMono-Regular,
|
|
3
3
|
// 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
|
|
4
4
|
|
|
5
|
-
--vzcode-font-family: '
|
|
5
|
+
--vzcode-font-family: 'Roboto Mono', monospace !important;
|
|
6
6
|
--vzcode-font-size: 16px;
|
|
7
7
|
|
|
8
8
|
/* Variable for the background color */
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// Customized "basic setup" for CodeMirror.
|
|
2
|
+
// Mainly customized to remove keymaps, for compatibility with
|
|
3
|
+
// codemirror-vscode-keymap.
|
|
4
|
+
//
|
|
5
|
+
// Inspired by
|
|
6
|
+
// https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
|
|
7
|
+
// https://github.com/replit/codemirror-vscode-keymap/blob/master/dev/basicSetupNoKeymap.ts
|
|
8
|
+
import {
|
|
9
|
+
highlightSpecialChars,
|
|
10
|
+
drawSelection,
|
|
11
|
+
highlightActiveLine,
|
|
12
|
+
dropCursor,
|
|
13
|
+
rectangularSelection,
|
|
14
|
+
crosshairCursor,
|
|
15
|
+
lineNumbers,
|
|
16
|
+
highlightActiveLineGutter,
|
|
17
|
+
} from '@codemirror/view';
|
|
18
|
+
import { Extension, EditorState } from '@codemirror/state';
|
|
19
|
+
import {
|
|
20
|
+
defaultHighlightStyle,
|
|
21
|
+
syntaxHighlighting,
|
|
22
|
+
indentOnInput,
|
|
23
|
+
bracketMatching,
|
|
24
|
+
} from '@codemirror/language';
|
|
25
|
+
import { history } from '@codemirror/commands';
|
|
26
|
+
import { highlightSelectionMatches } from '@codemirror/search';
|
|
27
|
+
import {
|
|
28
|
+
autocompletion,
|
|
29
|
+
closeBrackets,
|
|
30
|
+
} from '@codemirror/autocomplete';
|
|
31
|
+
|
|
32
|
+
export const basicSetup: Extension = (() => [
|
|
33
|
+
lineNumbers(),
|
|
34
|
+
highlightActiveLineGutter(),
|
|
35
|
+
highlightSpecialChars(),
|
|
36
|
+
history(),
|
|
37
|
+
|
|
38
|
+
// Not really a fan of foldGutter.
|
|
39
|
+
// Unclear if it's really useful.
|
|
40
|
+
// If we ever want to use it, we should
|
|
41
|
+
// make sure the styling is decent.
|
|
42
|
+
// foldGutter(),
|
|
43
|
+
drawSelection(),
|
|
44
|
+
dropCursor(),
|
|
45
|
+
EditorState.allowMultipleSelections.of(true),
|
|
46
|
+
indentOnInput(),
|
|
47
|
+
syntaxHighlighting(defaultHighlightStyle, {
|
|
48
|
+
fallback: true,
|
|
49
|
+
}),
|
|
50
|
+
bracketMatching(),
|
|
51
|
+
closeBrackets(),
|
|
52
|
+
// We set this to `false` because that is prescribed by
|
|
53
|
+
// https://github.com/replit/codemirror-vscode-keymap
|
|
54
|
+
autocompletion({ defaultKeymap: false }),
|
|
55
|
+
|
|
56
|
+
rectangularSelection(),
|
|
57
|
+
crosshairCursor(),
|
|
58
|
+
highlightActiveLine(),
|
|
59
|
+
highlightSelectionMatches(),
|
|
60
|
+
|
|
61
|
+
// All of these keymaps are disabled because we use
|
|
62
|
+
// codemirror-vscode-keymap, which provides its own
|
|
63
|
+
// keymaps for all of these things.
|
|
64
|
+
// keymap.of([
|
|
65
|
+
// ...closeBracketsKeymap,
|
|
66
|
+
// ...defaultKeymap,
|
|
67
|
+
// ...searchKeymap,
|
|
68
|
+
// ...historyKeymap,
|
|
69
|
+
// // ...foldKeymap,
|
|
70
|
+
// ...completionKeymap,
|
|
71
|
+
// ...lintKeymap,
|
|
72
|
+
// ]),
|
|
73
|
+
])();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { EditorView
|
|
1
|
+
import { EditorView } from 'codemirror';
|
|
2
2
|
import {
|
|
3
3
|
Compartment,
|
|
4
4
|
EditorState,
|
|
@@ -10,6 +10,9 @@ import { html } from '@codemirror/lang-html';
|
|
|
10
10
|
import { css } from '@codemirror/lang-css';
|
|
11
11
|
import { json1Sync } from 'codemirror-ot';
|
|
12
12
|
import { autocompletion } from '@codemirror/autocomplete';
|
|
13
|
+
import { indentationMarkers } from '@replit/codemirror-indentation-markers';
|
|
14
|
+
import { showMinimap } from '@replit/codemirror-minimap';
|
|
15
|
+
import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
|
|
13
16
|
import { Diagnostic, linter } from '@codemirror/lint';
|
|
14
17
|
import { json1Presence, textUnicode } from '../../ot';
|
|
15
18
|
import {
|
|
@@ -35,6 +38,8 @@ import { AIAssist } from '../AIAssist';
|
|
|
35
38
|
import { typeScriptCompletions } from './typeScriptCompletions';
|
|
36
39
|
import { typeScriptLinter } from './typeScriptLinter';
|
|
37
40
|
import { TabState } from '../vzReducer';
|
|
41
|
+
import { keymap } from '@codemirror/view';
|
|
42
|
+
import { basicSetup } from './basicSetup';
|
|
38
43
|
|
|
39
44
|
// Feature flag to enable TypeScript completions & TypeScript Linter.
|
|
40
45
|
const enableTypeScriptCompletions = true;
|
|
@@ -263,6 +268,34 @@ export const getOrCreateEditor = ({
|
|
|
263
268
|
);
|
|
264
269
|
}
|
|
265
270
|
|
|
271
|
+
// Add the extension that provides indentation markers.
|
|
272
|
+
extensions.push(
|
|
273
|
+
indentationMarkers({
|
|
274
|
+
// thickness: 2,
|
|
275
|
+
colors: {
|
|
276
|
+
light: '#4d586b',
|
|
277
|
+
dark: '#4d586b',
|
|
278
|
+
activeLight: '#8e949f',
|
|
279
|
+
activeDark: '#8e949f',
|
|
280
|
+
},
|
|
281
|
+
}),
|
|
282
|
+
);
|
|
283
|
+
|
|
284
|
+
// Show the minimap
|
|
285
|
+
// See https://github.com/replit/codemirror-minimap#usage
|
|
286
|
+
extensions.push(
|
|
287
|
+
showMinimap.compute(['doc'], () => ({
|
|
288
|
+
create: () => ({
|
|
289
|
+
dom: document.createElement('div'),
|
|
290
|
+
}),
|
|
291
|
+
// displayText: 'blocks',
|
|
292
|
+
})),
|
|
293
|
+
);
|
|
294
|
+
|
|
295
|
+
// VSCode keybindings
|
|
296
|
+
// See https://github.com/replit/codemirror-vscode-keymap#usage
|
|
297
|
+
extensions.push(keymap.of(vscodeKeymap));
|
|
298
|
+
|
|
266
299
|
const editor = new EditorView({
|
|
267
300
|
state: EditorState.create({
|
|
268
301
|
doc: text,
|
|
@@ -174,6 +174,12 @@ class PresenceWidget extends WidgetType {
|
|
|
174
174
|
);
|
|
175
175
|
span.appendChild(userDiv);
|
|
176
176
|
|
|
177
|
+
// after 2 seconds of inactivity, username is made less visible
|
|
178
|
+
setTimeout(() => {
|
|
179
|
+
userDiv.style.backgroundColor = `rgba(${this.color}, 0.2)`;
|
|
180
|
+
userDiv.style.color = 'rgba(0,0,0,0.2)';
|
|
181
|
+
}, 2000);
|
|
182
|
+
|
|
177
183
|
return span;
|
|
178
184
|
}
|
|
179
185
|
|
|
@@ -41,6 +41,17 @@ export const typeScriptCompletions = ({
|
|
|
41
41
|
requestId,
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
+
//Prevent completions from appearing on certain characters
|
|
45
|
+
if (
|
|
46
|
+
fileContent[completionContext.pos - 1] === '"' ||
|
|
47
|
+
fileContent[completionContext.pos - 1] === "'" ||
|
|
48
|
+
fileContent[completionContext.pos - 1] === ';' ||
|
|
49
|
+
fileContent[completionContext.pos - 1] === '(' ||
|
|
50
|
+
fileContent[completionContext.pos - 1] === ')'
|
|
51
|
+
) {
|
|
52
|
+
return { from: completionContext.pos, options: [] };
|
|
53
|
+
}
|
|
54
|
+
|
|
44
55
|
//Post message to our sharedWorker to get completions.
|
|
45
56
|
typeScriptWorker.postMessage(autocompleteRequest);
|
|
46
57
|
|
|
@@ -17,7 +17,7 @@ import { EditorView } from 'codemirror';
|
|
|
17
17
|
// * Number dragger
|
|
18
18
|
// * Boolean toggler
|
|
19
19
|
// * URL clicker
|
|
20
|
-
// *
|
|
20
|
+
// * color picker
|
|
21
21
|
// Inspired by:
|
|
22
22
|
// https://github.com/replit/codemirror-interact/blob/master/dev/index.ts
|
|
23
23
|
// `onInteract` is called when the user interacts with a widget.
|
|
@@ -51,7 +51,7 @@ export const widgets = ({
|
|
|
51
51
|
|
|
52
52
|
const updateHex = (e: Event) => {
|
|
53
53
|
const el = e.target as HTMLInputElement;
|
|
54
|
-
|
|
54
|
+
if (onInteract) onInteract();
|
|
55
55
|
if (el.value) {
|
|
56
56
|
setText(
|
|
57
57
|
`"${
|
|
@@ -140,6 +140,8 @@ export const widgets = ({
|
|
|
140
140
|
|
|
141
141
|
const updateRGB = (e: Event) => {
|
|
142
142
|
const el = e.target as HTMLInputElement;
|
|
143
|
+
if (onInteract) onInteract();
|
|
144
|
+
|
|
143
145
|
if (el.value) {
|
|
144
146
|
const [r, g, b] = hex2RGB(el.value);
|
|
145
147
|
setText(`rgb(${r}, ${g}, ${b})`);
|
|
@@ -163,7 +163,7 @@ onmessage = async ({ data }) => {
|
|
|
163
163
|
const tsFileName = getTSFileName(fileName);
|
|
164
164
|
|
|
165
165
|
let completions = null;
|
|
166
|
-
if (isTS(tsFileName)) {
|
|
166
|
+
if (isTS(tsFileName) && fileContent !== '') {
|
|
167
167
|
// Update the file in the file system to the
|
|
168
168
|
// absolute latest version. This is critical
|
|
169
169
|
// for correct completions.
|
|
@@ -197,7 +197,7 @@ onmessage = async ({ data }) => {
|
|
|
197
197
|
const tsFileName = getTSFileName(fileName);
|
|
198
198
|
let tsErrors = [];
|
|
199
199
|
// Since we are also updating the server when we autocomplete we do not need to update
|
|
200
|
-
if (isTS(tsFileName)) {
|
|
200
|
+
if (isTS(tsFileName) && fileContent !== '') {
|
|
201
201
|
setFile(tsFileName, fileContent);
|
|
202
202
|
// Creates an array of diagnostic objects containing
|
|
203
203
|
// both semantic and syntactic diagnostics.
|