vzcode 0.7.0 → 0.8.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/index.html
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
href="https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
19
19
|
rel="stylesheet"
|
|
20
20
|
/>
|
|
21
|
-
<script type="module" crossorigin src="/assets/index-
|
|
21
|
+
<script type="module" crossorigin src="/assets/index-80e9e6df.js"></script>
|
|
22
22
|
<link rel="stylesheet" href="/assets/index-ccd52a89.css">
|
|
23
23
|
</head>
|
|
24
24
|
<body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -46,14 +46,15 @@
|
|
|
46
46
|
},
|
|
47
47
|
"homepage": "https://github.com/vizhub-core/vzcode#readme",
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@codemirror/lang-css": "^6.2.
|
|
49
|
+
"@codemirror/lang-css": "^6.2.1",
|
|
50
50
|
"@codemirror/lang-html": "^6.4.5",
|
|
51
51
|
"@codemirror/lang-javascript": "^6.1.9",
|
|
52
52
|
"@codemirror/lang-markdown": "^6.2.0",
|
|
53
53
|
"@codemirror/state": "^6.2.1",
|
|
54
54
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
55
|
+
"@replit/codemirror-interact": "^6.1.0",
|
|
55
56
|
"@teamwork/websocket-json-stream": "^2.0.0",
|
|
56
|
-
"@uiw/codemirror-themes-all": "^4.21.
|
|
57
|
+
"@uiw/codemirror-themes-all": "^4.21.9",
|
|
57
58
|
"codemirror": "^6.0.1",
|
|
58
59
|
"codemirror-ot": "^4.0.0",
|
|
59
60
|
"d3-array": "^3.2.4",
|
|
@@ -72,13 +73,13 @@
|
|
|
72
73
|
"ws": "^8.13.0"
|
|
73
74
|
},
|
|
74
75
|
"devDependencies": {
|
|
75
|
-
"@types/react": "^18.2.
|
|
76
|
+
"@types/react": "^18.2.20",
|
|
76
77
|
"@types/react-dom": "^18.2.7",
|
|
77
|
-
"@vitejs/plugin-react": "^4.0.
|
|
78
|
-
"prettier": "^3.0.
|
|
79
|
-
"sass": "^1.
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
78
|
+
"@vitejs/plugin-react": "^4.0.4",
|
|
79
|
+
"prettier": "^3.0.1",
|
|
80
|
+
"sass": "^1.65.1",
|
|
81
|
+
"typescript": "^5.1.6",
|
|
82
|
+
"vite": "^4.4.9",
|
|
83
|
+
"vitest": "^0.34.1"
|
|
83
84
|
}
|
|
84
85
|
}
|
package/src/client/App.tsx
CHANGED
|
@@ -94,7 +94,7 @@ function App() {
|
|
|
94
94
|
|
|
95
95
|
// Set up presence.
|
|
96
96
|
// See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/client.js#L53
|
|
97
|
-
const docPresence =
|
|
97
|
+
const docPresence = connection.getDocPresence(collection, id);
|
|
98
98
|
|
|
99
99
|
// Subscribe to receive remote presence updates.
|
|
100
100
|
docPresence.subscribe(function (error) {
|
|
@@ -9,7 +9,7 @@ import { json1Presence, textUnicode } from '../../ot';
|
|
|
9
9
|
import { FileId, ShareDBDoc } from '../../types';
|
|
10
10
|
import { json1PresenceBroadcast } from './json1PresenceBroadcast';
|
|
11
11
|
import { json1PresenceDisplay } from './json1PresenceDisplay';
|
|
12
|
-
|
|
12
|
+
import { widgets } from './widgets';
|
|
13
13
|
// Singleton cache of CodeMirror instances
|
|
14
14
|
// These are created, but never destroyed.
|
|
15
15
|
// TODO consider invalidating this cache at some point.
|
|
@@ -97,6 +97,8 @@ export const getOrCreateEditor = ({
|
|
|
97
97
|
extensions.push(markdown());
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
+
extensions.push(widgets());
|
|
101
|
+
|
|
100
102
|
let editor = editorCache.get(fileId);
|
|
101
103
|
if (!editor) {
|
|
102
104
|
editor = new EditorView({
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import interact from '@replit/codemirror-interact';
|
|
2
|
+
|
|
3
|
+
// Interactive code widgets.
|
|
4
|
+
// * Number dragger
|
|
5
|
+
// * Boolean toggler
|
|
6
|
+
// * URL clicker
|
|
7
|
+
// * TODO color picker
|
|
8
|
+
// Inspired by:
|
|
9
|
+
// https://github.com/replit/codemirror-interact/blob/master/dev/index.ts
|
|
10
|
+
export const widgets = () =>
|
|
11
|
+
interact({
|
|
12
|
+
rules: [
|
|
13
|
+
// a rule for a number dragger
|
|
14
|
+
{
|
|
15
|
+
// the regexp matching the value
|
|
16
|
+
regexp: /-?\b\d+\.?\d*\b/g,
|
|
17
|
+
// set cursor to "ew-resize" on hover
|
|
18
|
+
cursor: 'ew-resize',
|
|
19
|
+
// change number value based on mouse X movement on drag
|
|
20
|
+
onDrag: (text, setText, e) => {
|
|
21
|
+
const newVal = Number(text) + e.movementX;
|
|
22
|
+
if (isNaN(newVal)) return;
|
|
23
|
+
setText(newVal.toString());
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
// bool toggler
|
|
27
|
+
{
|
|
28
|
+
regexp: /true|false/g,
|
|
29
|
+
cursor: 'pointer',
|
|
30
|
+
onClick: (text, setText) => {
|
|
31
|
+
switch (text) {
|
|
32
|
+
case 'true':
|
|
33
|
+
return setText('false');
|
|
34
|
+
case 'false':
|
|
35
|
+
return setText('true');
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
// url clicker
|
|
40
|
+
{
|
|
41
|
+
regexp: /https?:\/\/[^ "]+/g,
|
|
42
|
+
cursor: 'pointer',
|
|
43
|
+
onClick: (text) => {
|
|
44
|
+
window.open(text);
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
});
|