editor-ui/src/web-component.html at a7d9da6488eceeed73e52ce3a0e294b22bf04d8e · RaspberryPiFoundation/editor-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Editor Web component</title>
  </head>
  <body>
    <editor-wc code="print('Hello component')"></editor-wc>
    <p id="results"></p>
  </body>

  <script>
    document.addEventListener('DOMContentLoaded', (e) => {
      const webComp = document.querySelector('editor-wc');

      // subscribe to the 'codeChanged' custom event which is pushed by the project react component
      webComp.addEventListener('codeChanged', function(e) {
        console.log('listener in index html');
        const code = webComp.editorCode
        console.log(code)
      });

      webComp.addEventListener('runCompleted', (e) => {
        // const error = webComp.isErrorFree
        console.log(e.detail)
        document.getElementById("results").innerText = JSON.stringify(e.detail)
      })
    });
  </script>
</html>