+
+ );
+
+ // console.log(language);
+ return editor;
+}
diff --git a/src/components/MonacoEditor.js b/src/components/MonacoEditor.js
index 61d5ba0..4721580 100644
--- a/src/components/MonacoEditor.js
+++ b/src/components/MonacoEditor.js
@@ -1,3 +1,5 @@
+import { useState, useContext } from "react";
+
import Editor, { DiffEditor } from "@monaco-editor/react";
import MDEditor from "@uiw/react-md-editor";
import { useParams } from "react-router-dom";
@@ -7,9 +9,10 @@ import axios from "axios";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core";
-import { useState } from "react";
import { API_URL } from "../Constants";
+import { StagBinContext } from "../App";
+
let reqData = {};
const getData = async (
@@ -51,28 +54,32 @@ const useStyles = makeStyles((theme) => ({
},
}));
-export default function MEditor(props) {
+export default function MEditor() {
+ const {
+ theme: curTheme,
+ readOnly,
+ language,
+ setLanguage,
+ setReadOnly,
+ setUrl,
+ isDiff,
+ isMarkdownView,
+ updateIsMarkdownView,
+ data,
+ setData,
+ base_url,
+ setIsSameContentbuid,
+ oldData,
+ edited,
+ } = useContext(StagBinContext);
+
const classes = useStyles();
- const curTheme = props.curTheme;
- const readOnly = props.readOnly;
- const [language, setLanguage] = [props.language, props.setLanguage];
- const setReadOnly = props.setReadOnly;
- const setUrl = props.setUrl;
- const isDiff = props.isDiff;
- const [isMarkdownView, updateIsMarkdownView] = [
- props.isMarkdownView,
- props.updateIsMarkdownView,
- ];
- const [data, setData] = [props.data, props.setData];
- const base_url = props.base_url;
- const setIsSameContentbuid = props.setIsSameContentbuid;
- const oldData = props.oldData;
- const edited = props.edited;
let { id } = useParams();
let search = window.location.search;
let params = new URLSearchParams(search);
let redirect = params.get("redirect");
- console.log(redirect);
+
+ // console.log(redirect);
const [loading, setLoading] = useState(id ? true : false);
function set_data_if_exists() {
@@ -134,7 +141,7 @@ export default function MEditor(props) {
// if (data) {
// document.getElementById("m-placeholder").style.display = "none";
// }
- console.log(oldData);
+ // console.log(oldData);
const diffEditor = (
+ * Code and compile right on your browser!!!
+
+
+ {
+ setData(value);
+ }}
+ />
+ {/* Add a output div with remaining height */}
+ Output:
+
+ - Tips & Tricks:
> Use CTRL+S to Save
> Use the URL field - above for personalizing your paste
> We also support Markdown so - feel free to show your skills :P
-
> Use CTRL+S to Save
> Use the + URL field above for personalizing your paste
> We also + support Markdown so feel free to show your skills :P
+
+
+
+
+
+
+
+ );
+}
+
+export default ReportBug;
diff --git a/src/components/TopAppBar.js b/src/components/TopAppBar.js
index 6d13138..fb65b68 100644
--- a/src/components/TopAppBar.js
+++ b/src/components/TopAppBar.js
@@ -1,4 +1,4 @@
-import React from "react";
+import { React, useContext } from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
@@ -9,17 +9,19 @@ import Fab from "@material-ui/core/Fab";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Zoom from "@material-ui/core/Zoom";
import AddIcon from "@material-ui/icons/Add";
+import CodeIcon from "@material-ui/icons/Code";
import SaveIcon from "@material-ui/icons/Save";
import EditIcon from "@material-ui/icons/Edit";
-import GetAppIcon from '@material-ui/icons/GetApp';
+import GetAppIcon from "@material-ui/icons/GetApp";
import FileCopyIcon from "@material-ui/icons/FileCopy";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import IconButton from "@material-ui/core/IconButton";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import Input from "@material-ui/core/Input";
import Tooltip from "@material-ui/core/Tooltip";
-
+import Swal from "sweetalert2";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
@@ -29,6 +31,12 @@ import VSCodeDiffIcon from "./icons/VSCodeDiffIcon";
// Logo
import logo from "../assets/images/logo.png";
+// Compiler
+import compiler from "../utils/compiler";
+
+// Context
+import { StagBinContext } from "../App";
+
const useStyles = makeStyles((theme) => ({
root: {
position: "fixed",
@@ -88,29 +96,45 @@ function ScrollTop(props) {
}
export default function BackToTop(props) {
- const curTheme = props.curTheme;
- // const isEditing = props.isEditing;
- const [url, setUrl] = [props.url, props.setUrl];
- const readOnly = props.readOnly;
- // console.log(readOnly);
- const classes = useStyles();
- const invokeSave = props.invokeSave;
- const [language, setLanguage] = [props.language, props.setLanguage];
- const [isMarkdownView, updateIsMarkdownView] = [
- props.isMarkdownView,
- props.updateIsMarkdownView,
- ];
- const isSameContentbuid = props.isSameContentbuid;
- const base_url = props.base_url;
- // const setContentBuid = props.setContentBuid;
+ const {
+ theme: curTheme,
+ url,
+ compileMode,
+ setUrl,
+ readOnly,
+ invokeSave,
+ language,
+ setLanguage,
+ isMarkdownView,
+ updateIsMarkdownView,
+ isSameContentbuid,
+ base_url,
+ setReadOnly,
+ isDiff,
+ setCompileMode,
+ setIsDiff,
+ edited,
+ setEdited,
+ data,
+ setOldData,
+ setOutput,
+ } = useContext(StagBinContext);
- const setReadOnly = props.setReadOnly;
- const [isDiff, setIsDiff] = [props.isDiff, props.setIsDiff];
- const [edited, setEdited] = [props.edited, props.setEdited];
- const [data, setOldData] = [props.data, props.setOldData];
+ const classes = useStyles();
+ const showCustomUrl = !compileMode && true;
+ const showBinLanguages = !compileMode;
+ const showCompileLanguages = compileMode;
+ const showNewIcon = !compileMode; // Will update when we allow managing sessions for compilers
+ const showDownload = !compileMode && readOnly; // Will update when we allow managing sessions for compilers
+ const showMarkdown = !compileMode && language === "markdown";
+ const showDiffIcon = !compileMode && edited;
+ const showEditIcon = !compileMode && readOnly && isSameContentbuid;
+ const showSaveIcon = !compileMode && !readOnly;
+ const showCompilerIcon = !readOnly;
+ const showRunIcon = !readOnly && compileMode;
return (
- setModalShow(true)}>Report A Bug
+
-
-
- Language
+ {showCustomUrl && (
+
+
+ URL
-
+ style={{ color: "inherit" }}
+ endAdornment={
+ readOnly && (
+
+ {
+ navigator.clipboard.writeText(base_url + "/" + url);
+ }}
+ >
+
+
+ )
+ }
+ />
- {readOnly ? (
+ )}
+
);
}
diff --git a/src/utils/compiler.js b/src/utils/compiler.js
new file mode 100644
index 0000000..09dca15
--- /dev/null
+++ b/src/utils/compiler.js
@@ -0,0 +1,60 @@
+import Swal from "sweetalert2";
+
+const compilePython = async (code) => {
+ // Compiling
+ Swal.fire({
+ title: "Compiling...",
+ text: "Please wait...",
+ allowOutsideClick: false,
+ allowEscapeKey: false,
+ allowEnterKey: false,
+ showConfirmButton: false,
+ didOpen: () => {
+ Swal.showLoading();
+ },
+ });
+ const pyodide = await window.loadPyodide();
+ Swal.close();
+
+ try {
+ pyodide.runPython(`import sys
+import io
+sys.stdout = io.StringIO()`);
+ pyodide.runPython(code);
+ const stdout = pyodide.runPython("sys.stdout.getvalue()");
+ Swal.fire({
+ icon: "success",
+ title: "Success",
+ text: "Code compiled successfully",
+ showConfirmButton: false,
+ timer: 1500,
+ toast: true,
+ position: "center-end",
+ });
+ return stdout;
+ } catch (error) {
+ console.log(error.message);
+ Swal.fire({
+ icon: "error",
+ title: "Error",
+ text: "Code compilation failed",
+ showConfirmButton: false,
+ timer: 1500,
+ toast: true,
+ position: "center-end",
+ });
+ return error.message;
+ }
+};
+
+const compiler = async (code, language) => {
+ switch (language) {
+ case "python":
+ // TODO: Lazy load pyodide
+ return await compilePython(code);
+ default:
+ return "Language not supported";
+ }
+};
+
+export default compiler;
+ {showRunIcon && (
+
+ {
+ // if code is empty, don't run
+ if (data === "") {
+ Swal.fire({
+ icon: "warning",
+ title: "Oops...",
+ text: "Code is empty!",
+ toast: true,
+ position: "center-end",
+ showConfirmButton: false,
+ timer: 1500,
+ });
+ } else {
+ const temp_output = await compiler(data, language);
+ setOutput(temp_output);
+ }
+ }}
+ >
+
+
+ )}
+ {showCompilerIcon && (
+
+ {
+ setCompileMode(!compileMode);
+ }}
+ >
+
+
+ )}
+ {showBinLanguages && (
+
+
+ Language
+
+
+
+ )}
+ {showCompileLanguages && (
+
+
+ Language
+
+
+
+ )}
+ {showDownload && (
{
const element = document.createElement("a");
element.style.display = "none";
- const file = new Blob([data], {type: 'text/plain'});
+ const file = new Blob([data], { type: "text/plain" });
element.href = URL.createObjectURL(file);
element.download = url;
document.body.appendChild(element); // Required for this to work in FireFox
@@ -209,10 +299,8 @@ export default function BackToTop(props) {
- ) : (
- ""
)}
- {readOnly || language === "markdown" ? (
+ {showMarkdown && (
- ) : (
- ""
)}
- {edited ? (
+ {showDiffIcon && (
- ) : (
- ""
)}
- {readOnly ? (
- isSameContentbuid ? (
-
- {
- console.log(data);
- setOldData((" " + data).slice(1));
- setEdited(true);
- setReadOnly(false);
- console.log(readOnly);
- }}
- >
-
-
- ) : (
- ""
- )
- ) : (
+ {showEditIcon && (
+
+ {
+ console.log(data);
+ setOldData((" " + data).slice(1));
+ setEdited(true);
+ setReadOnly(false);
+ console.log(readOnly);
+ }}
+ >
+
+
+ )}
+ {showSaveIcon && (
)}
-
- {
- window.location.href = base_url;
- }}
- >
-
-
+ {showNewIcon && (
+
+ {
+ window.location.href = base_url;
+ }}
+ >
+
+
+ )}
@@ -298,6 +381,6 @@ export default function BackToTop(props) {