diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index bb62321..bcfcdd9 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -75,7 +75,7 @@ export class PyRepl extends BaseEvalElement { // } // }) - ]; + ]; const customTheme = EditorView.theme({ '&.cm-focused .cm-editor': { outline: '0px' }, '.cm-scroller': { lineHeight: 2.5 }, @@ -95,35 +95,37 @@ export class PyRepl extends BaseEvalElement { let startState = EditorState.create({ doc: this.code.trim(), extensions: extensions - }) + }); - this.editor = new EditorView({ + this.editor = new EditorView({ state: startState, parent: this.editorNode - }) + }); - let mainDiv = document.createElement('div'); - addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8"]) - // add Editor to main PyScript div + let mainDiv = document.createElement('div'); + addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8"]) + // add Editor to main PyScript div - // Butons DIV - var eDiv = document.createElement('div'); - addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group -mt-2 first-of-type:m-0".split(" ")) - eDiv.setAttribute("role", "group"); + // Butons DIV + var eDiv = document.createElement('div'); + addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group -mt-2 first-of-type:m-0".split(" ")) + eDiv.setAttribute("role", "group"); - // Play Button - this.btnRun = document.createElement('button'); - this.btnRun.innerHTML = ''; - let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"]; - addClasses(this.btnRun, buttonClasses); - addClasses(this.btnRun, ["bg-green-500"]) - eDiv.appendChild(this.btnRun); + // Play Button + this.btnRun = document.createElement('button'); + this.btnRun.innerHTML = ''; + let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"]; + addClasses(this.btnRun, buttonClasses); + addClasses(this.btnRun, ["bg-green-500"]) + eDiv.appendChild(this.btnRun); - this.btnRun.onclick = wrap(this); + this.btnRun.onclick = wrap(this); - function wrap(el: any){ - async function evaluatePython() { - el.evaluate() + function wrap(el: any){ + async function evaluatePython() { + el.evaluate(); + } + return evaluatePython; } // Settings button @@ -131,15 +133,15 @@ export class PyRepl extends BaseEvalElement { this.btnConfig.innerHTML = ''; this.btnConfig.onclick = function toggleNavBar(evt) { - console.log('clicked'); - componentDetailsNavOpen.set(!propertiesNavOpen); + console.log('clicked'); + componentDetailsNavOpen.set(!propertiesNavOpen); - currentComponentDetails.set([ - { key: 'auto-generate', value: true }, - { key: 'output', value: 'default' }, - { key: 'source', value: 'self' }, - { key: 'output-mode', value: 'clear' }, - ]); + currentComponentDetails.set([ + { key: 'auto-generate', value: true }, + { key: 'output', value: 'default' }, + { key: 'source', value: 'self' }, + { key: 'output-mode', value: 'clear' }, + ]); }; addClasses(this.btnConfig, buttonClasses);