diff --git a/client/app/components/Pages/CodeEditor.js b/client/app/components/Pages/CodeEditor.js
new file mode 100644
index 0000000..bad7004
--- /dev/null
+++ b/client/app/components/Pages/CodeEditor.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import TextIDE from "../common/TextIDE";
+import sampleFunction from '../common/TextIDE/sampleFunction';
+
+export default class CodeEditor extends Component {
+ render() {
+ return (
+
+
+
+
+ )
+ }
+}
+
+/*
+DEFAULT VALUES FOR
+ width= "700px"
+ height= "600px"
+ languages = ['C','C++','Python 2','Python 3','Java']
+ defaultCode = '' for all languages defined above
+ fontSize = '12pt'
+ fontSizes = {['12pt','14pt','16pt']}
+ theme = 'vs'
+ readOnly = {false}
+ showToolbar= {true}
+ showCustomInput = {true}
+ showRunButton = {true}
+ showSubmitButton = {true}
+ runFunction = NO DEFAULTS
+ submitFunction = NO DEFAULTS
+*/
\ No newline at end of file
diff --git a/client/app/components/common/TextIDE/RunButton.js b/client/app/components/common/TextIDE/RunButton.js
new file mode 100644
index 0000000..54d5df0
--- /dev/null
+++ b/client/app/components/common/TextIDE/RunButton.js
@@ -0,0 +1,52 @@
+import React,{Component} from 'react';
+import {Button} from 'reactstrap';
+
+
+class RunCodeButton extends Component {
+
+ constructor(props){
+ super(props);
+
+ this.submitCode = this.submitCode.bind(this);
+ }
+
+ submitCode(event) {
+ event.preventDefault()
+
+ const codeText = this.props.editor.getValue()
+ const codeLanguage = this.props.language.toLowerCase()
+ const isCustomInput = this.props.isCustomInput
+ var stdin = ''
+
+ if(isCustomInput){
+ stdin = document.getElementById('customInput').value
+ }
+
+ var data = {
+ content: codeText,
+ language: codeLanguage,
+ customInput: isCustomInput,
+ stdin: stdin,
+ submit: false
+ }
+ if(this.props.customFunction === undefined){
+ console.error('No Run Function is defined for the TextIDE Component')
+ }
+ else {
+ this.props.customFunction(data)
+ }
+ }
+
+ render(){
+ return (
+
+
+
+ )
+ }
+
+}
+
+export default RunCodeButton;
\ No newline at end of file
diff --git a/client/app/components/common/TextIDE/SubmitButton.js b/client/app/components/common/TextIDE/SubmitButton.js
new file mode 100644
index 0000000..55f5387
--- /dev/null
+++ b/client/app/components/common/TextIDE/SubmitButton.js
@@ -0,0 +1,68 @@
+import React,{Component} from 'react'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+
+class SubmitCodeButton extends Component {
+
+ constructor(props){
+ super(props);
+ this.state = {
+ showConfirmation: false,
+ }
+ this.submitCode = this.submitCode.bind(this);
+ this.toggleConfirmation = this.toggleConfirmation.bind(this);
+ }
+
+ toggleConfirmation(){
+ this.setState(prevState => ({
+ showConfirmation: !prevState.showConfirmation
+ }))
+ }
+
+ submitCode(event) {
+ event.preventDefault()
+ this.toggleConfirmation()
+
+ const codeText = this.props.editor.getValue()
+ const codeLanguage = this.props.language.toLowerCase()
+
+ var data = {
+ content: codeText,
+ language: codeLanguage,
+ customInput: false,
+ stdin: '',
+ submit: true
+ }
+
+ if(this.props.customFunction === undefined){
+ console.error('No Submit Function is defined for the TextIDE Component')
+ }
+ else {
+ this.props.customFunction(data)
+ }
+ }
+
+ render(){
+ return (
+
+
+
+
+
+ Confirm to Submit
+
+ Are you sure you want to submit?
+
+
+
+
+
+
+
+ )
+ }
+
+}
+
+export default SubmitCodeButton;
\ No newline at end of file
diff --git a/client/app/components/common/TextIDE/TextIDE.js b/client/app/components/common/TextIDE/TextIDE.js
new file mode 100644
index 0000000..f4127bd
--- /dev/null
+++ b/client/app/components/common/TextIDE/TextIDE.js
@@ -0,0 +1,294 @@
+import React from 'react';
+import Toolbar from './Toolbar';
+import RunCodeButton from './RunButton';
+import SubmitCodeButton from './SubmitButton';
+import MonacoEditor from 'react-monaco-editor';
+import { InputGroup, InputGroupText, Input } from 'reactstrap';
+
+
+
+const buttonRowStyle ={
+ marginBottom: '5px',
+ marginTop :'5px'
+
+}
+
+const bottomRowStyle ={
+ overflow: 'auto',
+ marginTop: '15px',
+ marginBottom: '5px',
+ padding: '0px',
+}
+
+const editorStyle ={
+ padding:'0px',
+ boxShadow: '0px 3px 5px black'
+}
+
+// Add(in the same format) or remove languages
+
+const languages = {
+ 'C' : 'c',
+ 'C++' : 'cpp',
+ 'Python 2' : 'python',
+ 'Python 3' : 'python',
+ 'Java' : 'java'
+}
+
+//No other themes available
+const themes = {
+ 'Light' : 'vs',
+ 'Dark' : 'vs-dark',
+ 'High Contrast' : 'hc-black'
+}
+
+// Add(in the same format) or remove fontSizes
+// First fontSize is the default fontSize
+const fontSizes = ['12pt','14pt','16pt']
+
+class TextIDE extends React.Component{
+
+ constructor(props){
+ super(props);
+ this.customLanguages = this.props.languages===undefined? Object.keys(languages):this.props.languages
+ this.languages = Object()
+
+ for (const i in this.customLanguages) {
+ if (this.customLanguages[i] in languages){
+ this.languages[this.customLanguages[i]] = languages[this.customLanguages[i]]
+ }
+ else{
+ var lang_name = this.customLanguages[i].charAt(0).toUpperCase() + this.customLanguages[i].toLowerCase().slice(1)
+ var lang_name_lowercase = this.customLanguages[i].toLowerCase()
+ this.languages[lang_name] = lang_name_lowercase
+ }
+ }
+
+ this.defaultWidth = '700px'
+ this.defaultHeight = '600px'
+ if(this.props.width===undefined){
+ this.width = this.defaultWidth
+ }else{
+ if(this.props.width.indexOf('px')>-1)
+ this.width = this.props.width
+ else
+ this.width = parseInt(this.props.width)+'px'
+ }
+ if(this.props.height===undefined){
+ this.height = this.defaultHeight
+ }else{
+ if(this.props.height.indexOf('px')>-1)
+ this.height = this.props.height
+ else
+ this.height = parseInt(this.props.height)+'px'
+ }
+
+ this.defaultCode = Object()
+ for (const lang in this.props.defaultCode){
+ var lang_name = lang.charAt(0).toUpperCase() + lang.toLowerCase().slice(1)
+ this.defaultCode[lang_name] = this.props.defaultCode[lang]
+ }
+
+ for(const lang in this.languages){
+ if (!(lang in this.defaultCode)){
+ this.defaultCode[lang] = ''
+ }
+ }
+
+ this.fontSize = this.props.fontSize===undefined? fontSizes[0]:this.props.fontSize
+ this.fontSizes = this.props.fontSizes===undefined? fontSizes:this.props.fontSizes
+ this.theme = this.props.theme===undefined? Object.values(themes)[0]:this.props.theme
+
+ this.readOnly = this.props.readOnly===undefined? false:this.props.readOnly
+ //this.showButtons = this.props.showButtons===undefined ? (!this.readOnly):(this.props.showButtons && !this.readOnly)
+ this.showRunButton = this.props.showRunButton===undefined ? (!this.readOnly): (this.props.showRunButton && !this.readOnly)
+ this.showSubmitButton = this.props.showSubmitButton===undefined ? (!this.readOnly): (this.props.showSubmitButton && !this.readOnly)
+
+ this.state = {
+ width: this.width,
+ height: this.height,
+ editorTheme: this.theme,
+ editorLanguage: Object.values(this.languages)[0],
+ editorLanguageKey: Object.keys(this.languages)[0],
+ editorFontSize: this.fontSize,
+ editorText: this.defaultCode[Object.keys(this.languages)[0]],
+ languages: this.languages,
+ themes: themes,
+ fontSizes: this.fontSizes,
+ customInput: false,
+ readOnly: this.readOnly,
+ showToolbar: this.props.showToolbar===undefined ? (!this.readOnly):(this.props.showToolbar && !this.readOnly),
+ //showButtons: this.showButtons,
+ showRunButton: this.showRunButton,
+ showSubmitButton: this.showSubmitButton,
+ showCustomInputOption: this.props.showCustomInput===undefined ? (!this.readOnly && (this.showRunButton || this.showSubmitButton)):
+ (this.props.showCustomInput && !this.readOnly && (this.showRunButton || this.showSubmitButton)),
+
+ }
+
+ this.changeEditorBackground = this.changeEditorBackground.bind(this)
+ this.changeEditorLanguage = this.changeEditorLanguage.bind(this)
+ this.changeEditorFontSize = this.changeEditorFontSize.bind(this)
+ this.editorDidMount = this.editorDidMount.bind(this)
+ this.showCustomInput = this.showCustomInput.bind(this)
+ this.resetCode = this.resetCode.bind(this)
+
+ }
+
+ changeEditorBackground(event,theme){
+ this.setState({
+ editorTheme: theme
+ })
+ }
+
+ changeEditorLanguage(event,language,languageKey){
+ this.setState({
+ editorLanguage: language,
+ editorLanguageKey: languageKey,
+ editorText: this.defaultCode[languageKey]
+ })
+ this.state.editor.getModel().setValue(this.defaultCode[languageKey])
+ }
+
+ changeEditorFontSize(event,fontsize){
+ this.setState({
+ editorFontSize: fontsize
+ })
+ }
+
+ showCustomInput(event){
+ this.setState( prevState => ({
+ customInput: !prevState.customInput
+ }))
+ }
+
+ editorDidMount(editor) {
+ this.setState({
+ editor: editor
+ });
+ editor.focus()
+ }
+
+ //Reset Code to defualt value
+ resetCode() {
+ this.state.editor.getModel().setValue(this.defaultCode[this.state.editorLanguageKey])
+ this.state.editor.focus()
+ }
+
+ componentDidMount() {
+ //Check if runFunction and submitFunction have been defined as the props..
+ if(!this.readOnly){
+ if(this.showRunButton && this.props.runFunction === undefined){
+ console.warn('Run Function is not defined for the TextIDE\nPass a function as a prop(runFunction) to the TextIDE component')
+ }
+ if(this.showSubmitButton && this.props.submitFunction === undefined){
+ console.warn('Submit Function is not defined for the TextIDE\nPass a function as a prop(submitFunction) to the TextIDE component')
+ }
+ }
+ window.addEventListener("resize", this.updateDimensions.bind(this));
+ }
+
+ //Auto-resizing of the editor
+ updateDimensions() {
+ this.state.editor.layout();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener("resize", this.updateDimensions.bind(this));
+ }
+
+ render() {
+
+ const containerStyle = {
+ padding: '15px 15px 2px 15px',
+ maxWidth: this.state.width
+ }
+
+ const editorOptions= {
+ fontSize: this.state.editorFontSize,
+ value: this.state.editorText,
+ readOnly: this.state.readOnly,
+ snippetSuggestions: true,
+ autoClosingBrackets: true,
+ autoClosingQuotes: true,
+ quickSuggestions: true,
+ copyWithSyntaxHighlighting: true,
+ formatOnPaste: true,
+ autoIndent: true,
+ }
+
+
+ return(
+
+
+ {(this.state.showToolbar) && (
+
+
+
+ )}
+
+
+
+
+
+ {(
+
+ {(this.state.showCustomInputOption) && (
+
+ )}
+
+ {(this.state.showRunButton) && (
+
+
+
+ )}
+ {(this.state.showSubmitButton) && (
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+ theme_items.push(theme_button)
+ }
+
+ const font_items = []
+ for (const font_size in this.state.fontSizes) {
+ const btnclass = this.props.editorFontSize === this.state.fontSizes[font_size]?'btn btn-sm btn-success':'btn btn-sm'
+ var font_button =
+
+
+ font_items.push(font_button)
+ }
+
+ return(
+
+
+
+
+
+
+
+
+
+ {this.state.chosenLanguageShow}
+
+
+ {lang_items}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {theme_items}
+
+
+
+
+
+
+
+ {font_items}
+
+
+
+
+
+
+
+
+
+ {theme_items}
+
+
+
+
+
+
+
+ {font_items}
+
+
+
+
+
+
+
+
+
+