vzcode 0.40.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/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/TabList/style.scss +1 -0
- package/src/client/VZSidebar/styles.scss +2 -0
- package/dist/assets/index-ZDmwFqlb.css +0 -1
- package/dist/assets/index-oU3BPloT.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,
|