Add support for python function runtime
This commit is contained in:
@@ -83,7 +83,9 @@ const Editor = {
|
||||
this.editorJS = ace.edit("js-editor");
|
||||
this.editorJS.setOptions({ maxLines: 100 });
|
||||
this.editorJS.setTheme("ace/theme/github_dark");
|
||||
this.editorJS.session.setMode("ace/mode/javascript");
|
||||
this.editorJS.session.setMode(
|
||||
this.runtime === "python" ? "ace/mode/python" : "ace/mode/javascript"
|
||||
);
|
||||
this.editorJS.setValue(this.jsValue, -1);
|
||||
|
||||
this.editorJS.session.on("change", () => {
|
||||
@@ -397,61 +399,51 @@ const Editor = {
|
||||
|
||||
// Right side: Runtime toggle and Execute button
|
||||
m("div", { class: "flex items-center space-x-4" }, [
|
||||
// Runtime Toggle Switch
|
||||
// Runtime Dropdown
|
||||
m(
|
||||
"label",
|
||||
"select",
|
||||
{
|
||||
for: "runtime-toggle",
|
||||
class: "inline-flex items-center cursor-pointer",
|
||||
key: "runtime-selector",
|
||||
class:
|
||||
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
|
||||
onchange: (e) => {
|
||||
this.runtime = e.target.value;
|
||||
this.editorJS.session.setMode(
|
||||
this.runtime === "python"
|
||||
? "ace/mode/python"
|
||||
: "ace/mode/javascript"
|
||||
);
|
||||
},
|
||||
},
|
||||
[
|
||||
m(
|
||||
"span",
|
||||
{
|
||||
class:
|
||||
"mr-3 text-sm font-medium " +
|
||||
(this.runtime === "node"
|
||||
? "text-green-500"
|
||||
: "text-gray-400 dark:text-gray-500"),
|
||||
},
|
||||
"option",
|
||||
{ value: "node", selected: this.runtime === "node" },
|
||||
"Node"
|
||||
),
|
||||
m("div", { class: "relative" }, [
|
||||
m("input[type=checkbox]", {
|
||||
id: "runtime-toggle",
|
||||
class: "sr-only peer",
|
||||
checked: this.runtime === "deno",
|
||||
onchange: (e) => {
|
||||
this.runtime = e.target.checked ? "deno" : "node";
|
||||
},
|
||||
}),
|
||||
m("div", {
|
||||
class:
|
||||
"w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600",
|
||||
}),
|
||||
]),
|
||||
m(
|
||||
"span",
|
||||
{
|
||||
class:
|
||||
"ml-3 text-sm font-medium " +
|
||||
(this.runtime === "deno"
|
||||
? "text-blue-500"
|
||||
: "text-gray-400 dark:text-gray-500"),
|
||||
},
|
||||
"option",
|
||||
{ value: "deno", selected: this.runtime === "deno" },
|
||||
"Deno"
|
||||
),
|
||||
m(
|
||||
"option",
|
||||
{ value: "python", selected: this.runtime === "python" },
|
||||
"Python"
|
||||
),
|
||||
]
|
||||
),
|
||||
|
||||
this.executeLoading
|
||||
? m("div", {
|
||||
key: "spinner",
|
||||
class:
|
||||
"animate-spin h-6 w-6 border-4 border-green-300 border-t-transparent rounded-full",
|
||||
})
|
||||
: m(
|
||||
"button",
|
||||
{
|
||||
key: "execute-button",
|
||||
class: "p-2 rounded-full hover:bg-gray-200 text-green-700",
|
||||
onclick: () => this.execute(),
|
||||
title: "Execute",
|
||||
|
||||
Reference in New Issue
Block a user