Update web editor layout and add scripts

The editor's layout in edytor.html has been significantly modified. An additional javascript source, 'leader-line.min.js', is now being loaded, and new layout elements including input fields and buttons have been introduced. Additionally, predefined values for the monaco editor AND a new scripts template are provided.
PiotrFerenc · Apr 23, 2024 · 6d84d00 · 6d84d00
1 parent ef704fd
commit 6d84d00
Showing 1 changed file with 27 additions and 8 deletions.
diff --git a/web/public/views/edytor.html b/web/public/views/edytor.html
@@ -3,21 +3,39 @@
 <head>
     <title>Monaco Editor with Echo</title>
     <script src="/assets/monaco/vs/loader.js"></script>
+    <script src="/assets/leader-line/leader-line.min.js"></script>
+    {{template "styles" .}}
 </head>
 <body>
-<div id="container" style="height:600px;"></div>
+
+<div class="col">
+    <div class="row">
+        <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
+                   aria-describedby="button-addon2">
+            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <div id="container" style="height:600px;"></div>
+        </div>
+        <div class="col-6">
+
+        </div>
+    </div>
+</div>
 <script>
-    require.config({ paths: { 'vs': '/assets/monaco/vs' }});
+    require.config({paths: {'vs': '/assets/monaco/vs'}});
 
-    require(['vs/editor/editor.main'], function() {
+    require(['vs/editor/editor.main'], function () {
         monaco.editor.create(document.getElementById('container'), {
-            value: '{' +
-                '' +
-                '}',
+            value: '' +
+                '{\n    "Parameters": {\n       "console.text":"hallo word"\n    },\n    "Tasks": [\n        {\n            "Sequence": 1,\n            "Name": "log",\n            "Action": "console"\n        }\n    ]\n}',
             language: 'json'
         });
         monaco.languages.registerCompletionItemProvider('json', {
-            provideCompletionItems: function(model, position) {
+            provideCompletionItems: function (model, position) {
                 const word = model.getWordUntilPosition(position);
                 const range = {
                     startLineNumber: position.lineNumber,
@@ -40,10 +58,11 @@
                         range: range
                     }
                 ];
-                return { suggestions: suggestions };
+                return {suggestions: suggestions};
             }
         });
     });
 </script>
+{{template "scripts" .}}
 </body>
 </html>