Skip to content

Commit e65cf3c

Browse files
kolovoskolovos
authored
Support for live sharing in the Playground (#50)
Switched Playground editor from Ace to Monaco and implemented live sharing using [y-websocket](https://github.com/yjs/y-websocket) and Yjs's [Monaco binding](https://github.com/yjs/y-monaco).
1 parent b1208d6 commit e65cf3c

35 files changed

+820
-1481
lines changed

‎mkdocs/docs/playground/backend.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
{"name": "RunEpsilonFunction", "url": "https://uk-ac-york-cs-epsilon-playground.h5rwqzvxy5sr4.eu-west-1.cs.amazonlightsail.com/epsilon"},
44
{"name": "FlexmiToPlantUMLFunction", "url": "https://uk-ac-york-cs-epsilon-playground.h5rwqzvxy5sr4.eu-west-1.cs.amazonlightsail.com/flexmi2plantuml"},
55
{"name": "EmfaticToPlantUMLFunction", "url": "https://uk-ac-york-cs-epsilon-playground.h5rwqzvxy5sr4.eu-west-1.cs.amazonlightsail.com/emfatic2plantuml"},
6-
{"name": "ShortURLFunction", "url": "https://l4p4ni4wo4lqtxk4qfedsapbtm0olxqn.lambda-url.eu-west-1.on.aws/"}
6+
{"name": "ShortURLFunction", "url": "https://l4p4ni4wo4lqtxk4qfedsapbtm0olxqn.lambda-url.eu-west-1.on.aws/"},
7+
{"name": "Yjs", "url":"wss://uk-ac-york-cs-epsilon-yjs.h5rwqzvxy5sr4.eu-west-1.cs.amazonlightsail.com/ws/", "public": "wss://demos.yjs.dev/ws"},
8+
{"name": "Kroki", "url": "https://uk-ac-york-cs-epsilon-kroki.h5rwqzvxy5sr4.eu-west-1.cs.amazonlightsail.com"}
79
]
810
}

‎mkdocs/docs/playground/backend.local.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
{"name": "RunEpsilonFunction", "url": "http://localhost:8080/epsilon"},
44
{"name": "FlexmiToPlantUMLFunction", "url": "http://localhost:8080/flexmi2plantuml"},
55
{"name": "EmfaticToPlantUMLFunction", "url": "http://localhost:8080/emfatic2plantuml"},
6-
{"name": "ShortURLFunction", "url": "http://localhost:8080/shorturl"}
6+
{"name": "ShortURLFunction", "url": "http://localhost:8080/shorturl"},
7+
{"name": "Yjs", "url": "ws://localhost:1234", "alternative": "wss://demos.yjs.dev/ws"},
8+
{"name": "Kroki", "url": "https://uk-ac-york-cs-epsilon-kroki.h5rwqzvxy5sr4.eu-west-1.cs.amazonlightsail.com"}
79
]
810
}

‎mkdocs/docs/playground/css/custom.css‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,10 @@
180180
content: url("../images/maximise.png");
181181
}
182182

183+
.mif-liveshare::before {
184+
content: url("../images/liveshare.png");
185+
}
186+
183187
.active-toggle .icon .mif-folder::before {
184188
content: url("../images/open-folder.png");
185189
}
@@ -226,16 +230,6 @@ body {
226230
display:none;
227231
}
228232

229-
.ace_gutter {
230-
background-color: white !important;
231-
border-right: 1px solid rgb(215,215,215) !important;
232-
z-index: 0;
233-
}
234-
235-
.ace_gutter-active-line {
236-
background-color: white !important;
237-
}
238-
239233
#preloader {
240234
position: fixed;
241235
height: 100%;
@@ -308,3 +302,14 @@ body {
308302
text-align:center;
309303
color: rgb(205, 53, 44);
310304
}
305+
306+
#liveShareStatus {
307+
background-color1: #63BCE9;
308+
background-color: #62A92F;
309+
color: white;
310+
display: none;
311+
}
312+
313+
#preloader-message {
314+
padding: 10px;
315+
}

‎mkdocs/docs/playground/images/liveshare.png‎

497 Bytes
Loading

‎mkdocs/docs/playground/index.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,31 @@
1212
</head>
1313

1414
<body class="h-100" onresize="fit()" onload="fit();updateGutterVisibility();">
15-
<div id="preloader"><img src="images/preloader.gif" width="100px"></div>
15+
<div id="preloader"><img src="images/preloader.gif" width="100px"><div id="preloader-message"></div></div>
1616
<div id="navview" data-role="navview" style="display:none">
1717
<div class="navview-pane">
1818
<button class="pull-button">
1919
<span class="default-icon-menu" id="toggleNavViewPane"></span>
2020
</button>
2121
<ul class="navview-menu">
22-
<li class="item-header">Epsilon Playground</li>
22+
<li class="item-header">Epsilon Playground
23+
<span class="badges" style="display:none;float:right;position:relative;top:-2px" id="liveShareTitleBadges">
24+
<span class="badge inline" style="font-size:12px; background-color:#41A030;color:white">LIVE</span>
25+
</span>
26+
</li>
2327
<li class="item-separator"></li>
2428
<li class="item-separator" id="examplesEnd"></li>
2529
<li>
30+
<a href="#" onclick="showLiveShare(event)" id="liveShare">
31+
<span class="icon"><span class="mif-example-16 mif-liveshare"></span></span>
32+
<span class="caption">Live Share</span>
33+
<div class="badges" id="liveShareBadges" style="display:none">
34+
<div class="badge inline" style="background-color:#41A030;color:white">ON</div>
35+
</div>
36+
</a>
2637
<a href="#" onclick="copyShortenedLink(event)" id="copyShortened">
2738
<span class="icon"><span class="mif-example-16 mif-link"></span></span>
28-
<span class="caption">Share</span>
39+
<span class="caption">Share Snapshot</span>
2940
</a>
3041
<a href="#" onclick="showDownloadOptions(event)" id="showDownloadOptions">
3142
<span class="icon"><span class="mif-example-16 mif-download"></span></span>
@@ -42,6 +53,7 @@
4253
</li>
4354
</ul>
4455
</div>
56+
4557
<div class="navview-content" id="navview-content"/>
4658
</div>
4759

‎mkdocs/docs/playground/js/Backend.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ class Backend {
3535
getShortURLService() {
3636
return this.services["ShortURLFunction"];
3737
}
38+
39+
getYjsService() {
40+
return this.services["Yjs"];
41+
}
42+
43+
getKrokiService() {
44+
return this.services["Kroki"];
45+
}
3846
}
3947

4048
export { Backend };

0 commit comments

Comments
 (0)