vzcode 1.19.0 → 1.21.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-CrtGDLnC.js +192 -0
- package/dist/assets/{index-CSSpCKM0.js → index-DsFO9Tm4.js} +102 -102
- package/dist/assets/worker-BEnuuaHS.js +293 -0
- package/dist/index.html +1 -1
- package/package.json +41 -40
- package/src/client/CodeEditor/InteractiveWidgets/colorsInTextPlugin.ts +14 -14
- package/src/client/CodeEditor/getOrCreateEditor.ts +22 -10
- package/src/client/CodeEditor/style.scss +26 -26
- package/src/client/RunCodeWidget/index.tsx +11 -3
- package/src/client/VZKeyboardShortcutsDoc.tsx +34 -8
- package/src/client/VZSettings.tsx +112 -119
- package/src/server/handleAICopilot.js +2 -2
- package/dist/assets/index-DIcMeAET.js +0 -181
- package/dist/assets/worker-8af7bTHW.js +0 -293
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-CrtGDLnC.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.21.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -103,33 +103,34 @@
|
|
|
103
103
|
},
|
|
104
104
|
"homepage": "https://github.com/vizhub-core/vzcode#readme",
|
|
105
105
|
"dependencies": {
|
|
106
|
-
"@
|
|
106
|
+
"@babel/runtime": "^7.26.9",
|
|
107
|
+
"@codemirror/autocomplete": "^6.18.6",
|
|
107
108
|
"@codemirror/lang-css": "^6.3.1",
|
|
108
109
|
"@codemirror/lang-html": "^6.4.9",
|
|
109
|
-
"@codemirror/lang-javascript": "^6.2.
|
|
110
|
+
"@codemirror/lang-javascript": "^6.2.3",
|
|
110
111
|
"@codemirror/lang-json": "^6.0.1",
|
|
111
|
-
"@codemirror/lang-markdown": "^6.3.
|
|
112
|
-
"@codemirror/state": "^6.
|
|
112
|
+
"@codemirror/lang-markdown": "^6.3.2",
|
|
113
|
+
"@codemirror/state": "^6.5.2",
|
|
113
114
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
114
|
-
"@codemirror/view": "^6.
|
|
115
|
+
"@codemirror/view": "^6.36.2",
|
|
115
116
|
"@lezer/highlight": "^1.2.1",
|
|
116
|
-
"@livekit/components-react": "^2.
|
|
117
|
+
"@livekit/components-react": "^2.8.1",
|
|
117
118
|
"@livekit/components-styles": "^1.1.4",
|
|
118
119
|
"@replit/codemirror-indentation-markers": "^6.5.3",
|
|
119
120
|
"@replit/codemirror-interact": "^6.3.1",
|
|
120
121
|
"@replit/codemirror-lang-svelte": "^6.0.0",
|
|
121
122
|
"@replit/codemirror-vscode-keymap": "^6.0.2",
|
|
122
123
|
"@teamwork/websocket-json-stream": "^2.0.0",
|
|
123
|
-
"@typescript/vfs": "^1.6.
|
|
124
|
-
"@uiw/codemirror-theme-abcdef": "^4.23.
|
|
125
|
-
"@uiw/codemirror-theme-dracula": "^4.23.
|
|
126
|
-
"@uiw/codemirror-theme-eclipse": "^4.23.
|
|
127
|
-
"@uiw/codemirror-theme-github": "^4.23.
|
|
128
|
-
"@uiw/codemirror-theme-material": "^4.23.
|
|
129
|
-
"@uiw/codemirror-theme-nord": "^4.23.
|
|
130
|
-
"@uiw/codemirror-theme-okaidia": "^4.23.
|
|
131
|
-
"@uiw/codemirror-theme-xcode": "^4.23.
|
|
132
|
-
"@uiw/codemirror-themes": "^4.23.
|
|
124
|
+
"@typescript/vfs": "^1.6.1",
|
|
125
|
+
"@uiw/codemirror-theme-abcdef": "^4.23.8",
|
|
126
|
+
"@uiw/codemirror-theme-dracula": "^4.23.8",
|
|
127
|
+
"@uiw/codemirror-theme-eclipse": "^4.23.8",
|
|
128
|
+
"@uiw/codemirror-theme-github": "^4.23.8",
|
|
129
|
+
"@uiw/codemirror-theme-material": "^4.23.8",
|
|
130
|
+
"@uiw/codemirror-theme-nord": "^4.23.8",
|
|
131
|
+
"@uiw/codemirror-theme-okaidia": "^4.23.8",
|
|
132
|
+
"@uiw/codemirror-theme-xcode": "^4.23.8",
|
|
133
|
+
"@uiw/codemirror-themes": "^4.23.8",
|
|
133
134
|
"body-parser": "^1.20.3",
|
|
134
135
|
"codemirror": "^6.0.1",
|
|
135
136
|
"codemirror-copilot": "^0.0.7",
|
|
@@ -137,40 +138,40 @@
|
|
|
137
138
|
"color-hash": "^2.0.2",
|
|
138
139
|
"d3-array": "^3.2.4",
|
|
139
140
|
"diff-match-patch": "^1.0.5",
|
|
140
|
-
"dotenv": "^16.4.
|
|
141
|
-
"express": "^4.21.
|
|
142
|
-
"ignore": "^
|
|
141
|
+
"dotenv": "^16.4.7",
|
|
142
|
+
"express": "^4.21.2",
|
|
143
|
+
"ignore": "^7.0.3",
|
|
143
144
|
"json0-ot-diff": "^1.1.2",
|
|
144
|
-
"livekit-client": "^2.
|
|
145
|
-
"livekit-server-sdk": "^2.
|
|
145
|
+
"livekit-client": "^2.9.1",
|
|
146
|
+
"livekit-server-sdk": "^2.10.1",
|
|
146
147
|
"ngrok": "^4.3.3",
|
|
147
148
|
"open": "^10.1.0",
|
|
148
|
-
"openai": "^4.
|
|
149
|
-
"prettier-plugin-svelte": "^3.3.
|
|
150
|
-
"react": "^
|
|
151
|
-
"react-bootstrap": "^2.10.
|
|
152
|
-
"react-dom": "^
|
|
153
|
-
"react-router-dom": "^7.
|
|
149
|
+
"openai": "^4.85.1",
|
|
150
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
151
|
+
"react": "^19.0.0",
|
|
152
|
+
"react-bootstrap": "^2.10.9",
|
|
153
|
+
"react-dom": "^19.0.0",
|
|
154
|
+
"react-router-dom": "^7.1.5",
|
|
154
155
|
"sharedb": "^5.1.1",
|
|
155
|
-
"sharedb-client-browser": "^5.
|
|
156
|
-
"uuid": "^11.0.
|
|
156
|
+
"sharedb-client-browser": "^5.1.1",
|
|
157
|
+
"uuid": "^11.0.5",
|
|
157
158
|
"vizhub-ui": "^3.23.0",
|
|
158
159
|
"ws": "^8.18.0"
|
|
159
160
|
},
|
|
160
161
|
"devDependencies": {
|
|
161
|
-
"@types/react": "^
|
|
162
|
-
"@types/react-dom": "^
|
|
162
|
+
"@types/react": "^19.0.10",
|
|
163
|
+
"@types/react-dom": "^19.0.4",
|
|
163
164
|
"@vitejs/plugin-react": "^4.3.4",
|
|
164
|
-
"concurrently": "^9.1.
|
|
165
|
+
"concurrently": "^9.1.2",
|
|
165
166
|
"cross-env": "^7.0.3",
|
|
166
|
-
"prettier": "^3.
|
|
167
|
-
"sass": "^1.
|
|
168
|
-
"typescript": "^5.7.
|
|
169
|
-
"vite": "^6.0
|
|
170
|
-
"vitest": "^
|
|
167
|
+
"prettier": "^3.5.1",
|
|
168
|
+
"sass": "^1.85.0",
|
|
169
|
+
"typescript": "^5.7.3",
|
|
170
|
+
"vite": "^6.1.0",
|
|
171
|
+
"vitest": "^3.0.5"
|
|
171
172
|
},
|
|
172
173
|
"optionalDependencies": {
|
|
173
|
-
"@rollup/rollup-darwin-arm64": "^4.
|
|
174
|
-
"@rollup/rollup-win32-x64-msvc": "^4.
|
|
174
|
+
"@rollup/rollup-darwin-arm64": "^4.34.8",
|
|
175
|
+
"@rollup/rollup-win32-x64-msvc": "^4.34.8"
|
|
175
176
|
}
|
|
176
177
|
}
|
|
@@ -32,8 +32,8 @@ class ColorWidget extends WidgetType {
|
|
|
32
32
|
|
|
33
33
|
parent.setAttribute(
|
|
34
34
|
'style',
|
|
35
|
-
`width:${size}px;height:${size}px;position:relative;`,
|
|
36
|
-
// Position relative for the hovering tool tip to work
|
|
35
|
+
`width:${size}px;height:${size}px;position:relative;`,
|
|
36
|
+
// Position relative for the hovering tool tip to work
|
|
37
37
|
);
|
|
38
38
|
parent.className = 'color-circle-parent';
|
|
39
39
|
const svg = document.createElementNS(
|
|
@@ -80,12 +80,9 @@ class ColorWidget extends WidgetType {
|
|
|
80
80
|
// Set class for tooltip to use CSS styles
|
|
81
81
|
hoveringTooltip.className = 'tooltip_hover_circle';
|
|
82
82
|
|
|
83
|
-
|
|
84
|
-
hoveringTooltip.innerHTML =
|
|
85
|
-
`<strong>Alt + Click on a hex color</strong><br />
|
|
83
|
+
hoveringTooltip.innerHTML = `<strong>Alt + Click on a hex color</strong><br />
|
|
86
84
|
<div>Open a color picker to modify the color</div>`;
|
|
87
85
|
|
|
88
|
-
|
|
89
86
|
parent.appendChild(hoveringTooltip);
|
|
90
87
|
|
|
91
88
|
// Timer to prevent constant pop-ups when scrolling through code
|
|
@@ -93,13 +90,16 @@ class ColorWidget extends WidgetType {
|
|
|
93
90
|
|
|
94
91
|
// Fade in and fade out effect for when user hovers over the circle
|
|
95
92
|
// Mouse Event to set y and x of the tool tip pop up to prevent overlap onto circle
|
|
96
|
-
parent.addEventListener(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
parent.addEventListener(
|
|
94
|
+
'mouseenter',
|
|
95
|
+
(event: MouseEvent) => {
|
|
96
|
+
hoverTimeout = window.setTimeout(() => {
|
|
97
|
+
hoveringTooltip.style.top = `${event.clientY - 60}px`;
|
|
98
|
+
hoveringTooltip.style.left = `${event.clientX}px`;
|
|
99
|
+
hoveringTooltip.style.opacity = '1';
|
|
100
|
+
}, 700);
|
|
101
|
+
},
|
|
102
|
+
);
|
|
103
103
|
|
|
104
104
|
parent.addEventListener('mouseleave', () => {
|
|
105
105
|
clearTimeout(hoverTimeout);
|
|
@@ -108,7 +108,7 @@ class ColorWidget extends WidgetType {
|
|
|
108
108
|
|
|
109
109
|
return parent;
|
|
110
110
|
}
|
|
111
|
-
|
|
111
|
+
|
|
112
112
|
ignoreEvent() {
|
|
113
113
|
return false;
|
|
114
114
|
}
|
|
@@ -108,7 +108,8 @@ const getAtPath = (obj, path) => {
|
|
|
108
108
|
};
|
|
109
109
|
|
|
110
110
|
// Extend the EditorCacheValue type to include the compartments and the updateRainbowBrackets method
|
|
111
|
-
interface ExtendedEditorCacheValue
|
|
111
|
+
interface ExtendedEditorCacheValue
|
|
112
|
+
extends EditorCacheValue {
|
|
112
113
|
themeCompartment: Compartment;
|
|
113
114
|
rainbowBracketsCompartment: Compartment;
|
|
114
115
|
updateRainbowBrackets: (enabled: boolean) => void;
|
|
@@ -179,7 +180,9 @@ export const getOrCreateEditor = ({
|
|
|
179
180
|
const cacheKey = editorCacheKey(fileId, paneId);
|
|
180
181
|
|
|
181
182
|
if (editorCache.has(cacheKey)) {
|
|
182
|
-
return editorCache.get(
|
|
183
|
+
return editorCache.get(
|
|
184
|
+
cacheKey,
|
|
185
|
+
) as ExtendedEditorCacheValue;
|
|
183
186
|
}
|
|
184
187
|
|
|
185
188
|
// Cache miss
|
|
@@ -194,7 +197,7 @@ export const getOrCreateEditor = ({
|
|
|
194
197
|
// Create a compartment for the theme so that it can be changed dynamically.
|
|
195
198
|
// Inspired by: https://github.com/craftzdog/cm6-themes/blob/main/example/index.ts
|
|
196
199
|
let themeCompartment = new Compartment();
|
|
197
|
-
|
|
200
|
+
|
|
198
201
|
// Create a compartment for rainbow brackets so that it can be enabled/disabled dynamically.
|
|
199
202
|
let rainbowBracketsCompartment = new Compartment();
|
|
200
203
|
|
|
@@ -260,7 +263,7 @@ export const getOrCreateEditor = ({
|
|
|
260
263
|
// Adds compartment for rainbow brackets with initial toggle state.
|
|
261
264
|
extensions.push(
|
|
262
265
|
rainbowBracketsCompartment.of(
|
|
263
|
-
rainbowBracketsEnabled ? rainbowBrackets() : []
|
|
266
|
+
rainbowBracketsEnabled ? rainbowBrackets() : [],
|
|
264
267
|
),
|
|
265
268
|
);
|
|
266
269
|
|
|
@@ -420,17 +423,26 @@ export const getOrCreateEditor = ({
|
|
|
420
423
|
}),
|
|
421
424
|
});
|
|
422
425
|
|
|
423
|
-
const editorCacheValue: ExtendedEditorCacheValue = {
|
|
424
|
-
editor
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
426
|
+
const editorCacheValue: ExtendedEditorCacheValue = {
|
|
427
|
+
editor,
|
|
428
|
+
themeCompartment,
|
|
429
|
+
rainbowBracketsCompartment,
|
|
430
|
+
updateRainbowBrackets: (enabled) => {
|
|
431
|
+
editor.dispatch({
|
|
432
|
+
effects: rainbowBracketsCompartment.reconfigure(
|
|
433
|
+
enabled ? rainbowBrackets() : [],
|
|
434
|
+
),
|
|
435
|
+
});
|
|
436
|
+
},
|
|
437
|
+
};
|
|
428
438
|
|
|
429
439
|
// Populate the cache.
|
|
430
440
|
editorCache.set(cacheKey, editorCacheValue);
|
|
431
441
|
|
|
432
442
|
// Initialize rainbow brackets based on the toggle state
|
|
433
|
-
editorCacheValue.updateRainbowBrackets(
|
|
443
|
+
editorCacheValue.updateRainbowBrackets(
|
|
444
|
+
rainbowBracketsEnabled,
|
|
445
|
+
);
|
|
434
446
|
|
|
435
447
|
return editorCacheValue;
|
|
436
448
|
};
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
.tooltip_hover_circle div {
|
|
71
71
|
font-size: 12px;
|
|
72
72
|
}
|
|
73
|
-
|
|
73
|
+
|
|
74
74
|
.cm-panel.cm-search {
|
|
75
75
|
padding: 5px;
|
|
76
76
|
position: relative;
|
|
@@ -79,14 +79,14 @@
|
|
|
79
79
|
color: var(--vh-color-neutral-04);
|
|
80
80
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
81
81
|
}
|
|
82
|
-
|
|
82
|
+
|
|
83
83
|
.cm-panels {
|
|
84
84
|
background-color: #333338;
|
|
85
85
|
color: var(--vh-color-neutral-04);
|
|
86
86
|
border: 2px solid var(--vh-color-neutral-02);
|
|
87
87
|
border-radius: 6px;
|
|
88
88
|
}
|
|
89
|
-
|
|
89
|
+
|
|
90
90
|
.cm-textfield {
|
|
91
91
|
background-color: var(--vh-color-neutral-01);
|
|
92
92
|
color: #efe7dc;
|
|
@@ -95,10 +95,10 @@
|
|
|
95
95
|
border-radius: 6px;
|
|
96
96
|
font-size: 14px;
|
|
97
97
|
}
|
|
98
|
-
|
|
98
|
+
|
|
99
99
|
.cm-button {
|
|
100
100
|
background-color: var(--vh-color-neutral-01);
|
|
101
|
-
|
|
101
|
+
border: 1px solid #193350;
|
|
102
102
|
color: var(--vh-color-neutral-04);
|
|
103
103
|
border: 1px solid var(--vh-color-neutral-04);
|
|
104
104
|
border-radius: 5px;
|
|
@@ -107,50 +107,50 @@
|
|
|
107
107
|
cursor: pointer;
|
|
108
108
|
transition: all 0.3s ease-in-out;
|
|
109
109
|
}
|
|
110
|
-
|
|
110
|
+
|
|
111
111
|
.cm-button:hover {
|
|
112
112
|
background-color: #50c878;
|
|
113
113
|
color: #ffffff;
|
|
114
114
|
transform: scale(1.1);
|
|
115
115
|
}
|
|
116
|
-
|
|
116
|
+
|
|
117
117
|
.cm-button:active {
|
|
118
118
|
background-color: #202e46;
|
|
119
119
|
transform: scale(0.95);
|
|
120
120
|
}
|
|
121
|
-
|
|
121
|
+
|
|
122
122
|
.cm-searchMatch {
|
|
123
123
|
background-color: rgba(255, 255, 0, 0.5);
|
|
124
124
|
border-radius: 2px;
|
|
125
125
|
}
|
|
126
|
-
|
|
126
|
+
|
|
127
127
|
.cm-searchMatch-selected {
|
|
128
128
|
background-color: rgba(255, 140, 0, 0.5);
|
|
129
129
|
border: 2px solid #ff8800;
|
|
130
130
|
border-radius: 2px;
|
|
131
131
|
}
|
|
132
|
-
.cm-panel.cm-search [name=
|
|
132
|
+
.cm-panel.cm-search [name='close'] {
|
|
133
133
|
position: absolute;
|
|
134
134
|
top: 0;
|
|
135
135
|
right: 4px;
|
|
136
|
-
background-color: var(--vh-color-neutral-01);
|
|
136
|
+
background-color: var(--vh-color-neutral-01);
|
|
137
137
|
color: var(--vh-color-neutral-04);
|
|
138
|
-
border: none;
|
|
139
|
-
font: inherit;
|
|
140
|
-
padding: 4px 8px;
|
|
138
|
+
border: none;
|
|
139
|
+
font: inherit;
|
|
140
|
+
padding: 4px 8px;
|
|
141
141
|
margin: 4px;
|
|
142
|
-
border-radius: 4px;
|
|
143
|
-
cursor: pointer;
|
|
144
|
-
transition: all 0.3s ease-in-out;
|
|
142
|
+
border-radius: 4px;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
transition: all 0.3s ease-in-out;
|
|
145
145
|
}
|
|
146
|
-
|
|
147
|
-
.cm-panel.cm-search [name=
|
|
148
|
-
background-color: var(--vh-color-caution-01);
|
|
149
|
-
color: #ffffff;
|
|
146
|
+
|
|
147
|
+
.cm-panel.cm-search [name='close']:hover {
|
|
148
|
+
background-color: var(--vh-color-caution-01);
|
|
149
|
+
color: #ffffff;
|
|
150
150
|
}
|
|
151
|
-
|
|
152
|
-
.cm-panel.cm-search [name=
|
|
153
|
-
background-color: var(--vh-color-caution-02);
|
|
154
|
-
transform: scale(0.95);
|
|
151
|
+
|
|
152
|
+
.cm-panel.cm-search [name='close']:active {
|
|
153
|
+
background-color: var(--vh-color-caution-02);
|
|
154
|
+
transform: scale(0.95);
|
|
155
155
|
}
|
|
156
|
-
}
|
|
156
|
+
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
useCallback,
|
|
3
|
+
useContext,
|
|
4
|
+
useEffect,
|
|
5
|
+
useState,
|
|
6
|
+
} from 'react';
|
|
2
7
|
import { PlaySVG } from '../Icons';
|
|
3
8
|
import { SplitEditorSVG } from '../Icons/SplitEditorSVG';
|
|
4
9
|
import { VZCodeContext } from '../VZCodeContext';
|
|
@@ -17,7 +22,7 @@ export const RunCodeWidget = ({
|
|
|
17
22
|
</>
|
|
18
23
|
),
|
|
19
24
|
}: {
|
|
20
|
-
|
|
25
|
+
runCodeWidgetTooltipText?: JSX.Element;
|
|
21
26
|
}) => {
|
|
22
27
|
const { runCodeRef, runPrettierRef, splitCurrentPane } =
|
|
23
28
|
useContext(VZCodeContext);
|
|
@@ -51,7 +56,10 @@ export const RunCodeWidget = ({
|
|
|
51
56
|
// Add the keyboard event listener for Ctrl+S and Shift+Enter
|
|
52
57
|
useEffect(() => {
|
|
53
58
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
54
|
-
if (
|
|
59
|
+
if (
|
|
60
|
+
(event.ctrlKey && event.key === 's') ||
|
|
61
|
+
(event.shiftKey && event.key === 'Enter')
|
|
62
|
+
) {
|
|
55
63
|
event.preventDefault();
|
|
56
64
|
handleClick();
|
|
57
65
|
}
|
|
@@ -46,41 +46,67 @@ export const VZKeyboardShortcutsDoc = ({
|
|
|
46
46
|
{/* <Form.Label>WINDOWS</Form.Label> */}
|
|
47
47
|
<ul>
|
|
48
48
|
<li>
|
|
49
|
-
<strong
|
|
50
|
-
|
|
49
|
+
<strong>
|
|
50
|
+
<kbd>Ctrl</kbd> + <kbd>S</kbd>
|
|
51
|
+
</strong>{' '}
|
|
52
|
+
or{' '}
|
|
53
|
+
<strong>
|
|
54
|
+
<kbd>Shift↑</kbd> + <kbd>Enter←</kbd>
|
|
55
|
+
</strong>{' '}
|
|
56
|
+
<br />
|
|
51
57
|
<span>Run and format code</span>
|
|
52
58
|
</li>
|
|
53
59
|
<li>
|
|
54
|
-
<strong
|
|
60
|
+
<strong>
|
|
61
|
+
<kbd>Alt</kbd> + Drag on a number
|
|
62
|
+
</strong>
|
|
55
63
|
<br />
|
|
56
64
|
<span>
|
|
57
65
|
Modify the number by dragging left or right
|
|
58
66
|
</span>
|
|
59
67
|
</li>
|
|
60
68
|
<li>
|
|
61
|
-
<strong
|
|
69
|
+
<strong>
|
|
70
|
+
<kbd>Alt</kbd> + Click on a hex color
|
|
71
|
+
</strong>
|
|
62
72
|
<br />
|
|
63
73
|
<span>
|
|
64
74
|
Open a color picker to modify the color
|
|
65
75
|
</span>
|
|
66
76
|
</li>
|
|
67
77
|
<li>
|
|
68
|
-
<strong
|
|
78
|
+
<strong>
|
|
79
|
+
<kbd>Alt</kbd> + <kbd>W</kbd>
|
|
80
|
+
</strong>{' '}
|
|
81
|
+
<br />
|
|
69
82
|
<span>Close the current tab</span>
|
|
70
83
|
</li>
|
|
71
84
|
<li>
|
|
72
|
-
<strong
|
|
85
|
+
<strong>
|
|
86
|
+
<kbd>Alt</kbd> + <kbd>N</kbd>
|
|
87
|
+
</strong>{' '}
|
|
88
|
+
or{' '}
|
|
89
|
+
<strong>
|
|
90
|
+
<kbd>Ctrl</kbd> + <kbd>Shift↑</kbd> +{' '}
|
|
91
|
+
<kbd>N</kbd>
|
|
92
|
+
</strong>{' '}
|
|
73
93
|
<br />
|
|
74
94
|
<span>Open the create file modal</span>
|
|
75
95
|
</li>
|
|
76
96
|
<li>
|
|
77
|
-
<strong
|
|
97
|
+
<strong>
|
|
98
|
+
<kbd>Alt</kbd> + <kbd>PgUp↑</kbd>
|
|
99
|
+
</strong>{' '}
|
|
100
|
+
<br />
|
|
78
101
|
<span>
|
|
79
102
|
Change the active tab to the previous one
|
|
80
103
|
</span>
|
|
81
104
|
</li>
|
|
82
105
|
<li>
|
|
83
|
-
<strong
|
|
106
|
+
<strong>
|
|
107
|
+
<kbd>Alt</kbd> + <kbd>PgDn↓</kbd>
|
|
108
|
+
</strong>{' '}
|
|
109
|
+
<br />
|
|
84
110
|
<span>
|
|
85
111
|
Change the active tab to the next one
|
|
86
112
|
</span>
|