experimental... probably broken

pyscriptjs/src/index.ts

@@ -1,25 +1,29 @@
-import {EditorState} from "@codemirror/state";
-import {EditorView, keymap} from "@codemirror/view";
-import {defaultKeymap} from "@codemirror/commands";
-import {loadInterpreter} from "./interpreter";
+// import { EditorState } from "@codemirror/state";
+import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup"
+// import {gutter, GutterMarker} from "@codemirror/gutter"
+
+import { python } from "@codemirror/lang-python"
+import { keymap } from "@codemirror/view";
+import { defaultKeymap } from "@codemirror/commands";
+import { oneDarkTheme } from "@codemirror/theme-one-dark";
+// @codemirror/lang-python
+
+import { loadInterpreter } from "./interpreter";
 // import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
 // import {javascript} from "@codemirror/lang-javascript"
 
-let startState = EditorState.create({
-  doc: "Hello World",
-  extensions: [keymap.of(defaultKeymap)]
-})
-
 
 class PyScript extends HTMLElement {
     shadow: ShadowRoot;
     wrapper: HTMLElement;
-    editor: HTMLElement;
+    editor: EditorView;
+    editorNode: HTMLElement;
     code: string;
     cm: any;
     btnEdit: HTMLElement;
     btnRun: HTMLElement;
     editorOut: HTMLTextAreaElement;
+    editorState: EditorState;
 
     constructor() {
         super();
@@ -30,10 +34,10 @@ class PyScript extends HTMLElement {
         this.wrapper = document.createElement('slot');
 
         // add an extra div where we can attach the codemirror editor
-        this.editor = document.createElement('div');
+        this.editorNode = document.createElement('div');
         
         this.shadow.appendChild(this.wrapper);
-        this.shadow.appendChild(this.editor);
+        this.shadow.appendChild(this.editorNode);
         this.code = this.wrapper.innerHTML;
       }
     connectedCallback() {
@@ -49,31 +53,43 @@ class PyScript extends HTMLElement {
 
 
   function create_menu (){
+    let leftBar = document.createElement("div");
+        
+    // example: https://codepen.io/Markshall/pen/wQyWqq
+    leftBar.innerHTML = `
+    <div class="adminActions">
+    <input type="checkbox" name="adminToggle" class="adminToggle" />
+    <a class="adminButton" href="#!"><i class="fa fa-cog">+</i></a>
+    <div class="adminButtons">
+        <a href="#" title="Add Company"><i class="fa fa-building">Script</i></a>
+        <a href="#" title="Edit Company"><i class="fa fa-pen">Panel</i></a>
+        <a href="#" title="Add User"><i class="fa fa-user-plus">Button</i></a>
+        <a href="#" title="Edit User"><i class="fa fa-user-edit">TextArea</i></a>
+    </div>
+    </div>
+    `;
+    document.body.appendChild(leftBar);
+
     
-      var div = document.createElement("div");
-
-      div.innerHTML = `
-        <div class="adminActions">
-        <input type="checkbox" name="adminToggle" class="adminToggle" />
-        <a class="adminButton" href="#!"><i class="fa fa-cog"></i></a>
-        <div class="adminButtons">
-            <a href="#" title="Add Company"><i class="fa fa-building"></i></a>
-            <a href="#" title="Edit Company"><i class="fa fa-pen"></i></a>
-            <a href="#" title="Add User"><i class="fa fa-user-plus"></i></a>
-            <a href="#" title="Edit User"><i class="fa fa-user-edit"></i></a>
-        </div>
-        </div>
-      `;
-      document.body.appendChild(div);
-
       document.querySelectorAll('py-script').forEach((elem: PyScript, i) => {
             let code = elem.innerHTML;
             elem.innerHTML = "";
             elem.code = code;
+
+            let startState = EditorState.create({
+                doc: code,
+                extensions: [
+                    keymap.of(defaultKeymap),
+                    oneDarkTheme,
+                    // python()
+                ]
+            })
+
             let view = new EditorView({
-  state: startState,
-  parent: elem
-})
+                state: startState,
+
+                parent: elem
+            })
 
             // elem.cm = CodeMirror(elem, {
             //     lineNumbers: true,
@@ -81,7 +97,7 @@ class PyScript extends HTMLElement {
             //     value: code,
             //     mode: 'python'
             // });
-            
+            elem.editor = view;
             elem.btnRun = document.createElement('button');
             elem.btnRun.innerHTML = "run";
             elem.btnRun.classList.add("run");
@@ -107,10 +123,9 @@ class PyScript extends HTMLElement {
             elem.btnRun.onclick = evaluatePython;
 
             async function evaluatePython() {
-                var code = elem.cm.getValue();
                 let pyodide = await pyodideReadyPromise;
                 try {
-                let output = pyodide.runPython(code);
+                let output = pyodide.runPython(elem.editor.state.doc.toString());
                 addToOutput(output);
                 } catch (err) {
                 addToOutput(err);