+ {aosProcess && (
+ <>
+
+
{
- monaco.editor.defineTheme(
- "notebook",
- notebookTheme as editor.IStandaloneThemeData
- );
- // monaco.editor.setTheme("notebook");
- if (theme == "dark") monaco.editor.setTheme("notebook");
+ onMount={(editor, monaco) => {
+ monaco.editor.defineTheme("notebook", notebookTheme as editor.IStandaloneThemeData);
+ // monaco.editor.setTheme("notebook");
+ if (theme == "dark") monaco.editor.setTheme("notebook");
+ else monaco.editor.setTheme("vs-light");
+ // add a listener to localstorage so whever theme is updated editor theme also updates
+ window.addEventListener("storage", (e) => {
+ if (e.key == "theme") {
+ if (e.newValue == "dark") monaco.editor.setTheme("notebook");
else monaco.editor.setTheme("vs-light");
- // set font family
- editor.updateOptions({ fontFamily: "DM mono" });
- }}
- onChange={(value) => {
- // console.log(value);
- // const newContent = { ...file.content };
- // newContent.cells[cellId] = { ...cell, code: value };
- // manager.updateFile(project, { file, content: newContent });
- setCode(value)
- }}
- // height={
- // (code.split("\n").length > 10
- // ? 10
- // : code.split("\n").length) * 20
- // }
- width="95%"
- className="min-h-[68px] pt-1 font-btr-code"
- value={code}
- defaultValue={code}
- language="lua"
- options={{
- fontSize: 14,
- minimap: { enabled: false },
- // lineNumbers: "off",
- lineHeight: 20,
- lineNumbersMinChars: 2,
- scrollBeyondLastLine: false,
- scrollbar: { vertical: "hidden", horizontal: "hidden" },
- renderLineHighlight: "none",
- }}
+ }
+ });
+ // set keybinding to run code to shift enter
+ editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, runCellCode);
+
+ // set font family
+ // editor.updateOptions({ fontFamily: "DM mono" });
+ editor.updateOptions({ fontFamily: "monospace" });
+ }}
+ onChange={(value) => {
+ // console.log(value);
+ // const newContent = { ...file.content };
+ // newContent.cells[cellId] = { ...cell, code: value };
+ // manager.updateFile(project, { file, content: newContent });
+ setCode(value);
+ }}
+ // height={(code.split("\n").length > 10 ? 10 : code.split("\n").length) * 20}
+ width="95%"
+ className="min-h-[68px] font-btr-code rounded-md"
+ value={code}
+ defaultValue={code}
+ language="lua"
+ options={{
+ fontSize: 14,
+ minimap: { enabled: false },
+ // lineNumbers: "off",
+ lineHeight: 20,
+ lineNumbersMinChars: 2,
+ scrollBeyondLastLine: false,
+ scrollbar: { vertical: "hidden", horizontal: "hidden", verticalScrollbarSize: 0 },
+ renderLineHighlight: "none",
+ }}
/>
+
+
+ {{`${typeof output == "object" ? JSON.stringify(output, null, 2) : output}`}}
+
+ >
+ )}
+ {autoconnect ? (
+ <>{!aosProcess &&
}>
+ ) : (
+
+ {" "}
+
-
- {{`${typeof output == "object" ? JSON.stringify(output, null, 2) : output}`}}
-
- >}
- {autoconnect ?
- <>{!aosProcess &&
}> :
- }
-
-
+ )}
+ setTooltipVisible(true)}
+ onMouseLeave={() => setTooltipVisible(false)}
+ onMouseMove={(e) => {
+ const x = e.clientX;
+ const y = e.clientY;
+ const tooltip = document.getElementById("tooltip");
-}
\ No newline at end of file
+ // position tooltip to left of mouse
+ tooltip.style.left = `${x - tooltip.offsetWidth - 15}px`;
+ tooltip.style.top = `${y - tooltip.offsetHeight / 2}px`;
+ }}
+ >
+
+ {/* tooltip that follows the mouse */}
+ {
+
+ }
+
+
+