Added line wrap feature in expanded editor

frontend/src/components/ShuffleCodeEditor.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useLayoutEffect} from 'react';
 import {
-	IconButton, 
+	IconButton,
 	Dialog, 
 	Modal, 
 	Tooltip,
@@ -8,6 +8,9 @@ import {
 	DialogContent
 } from '@material-ui/core';
 
+import Checkbox from '@mui/material/Checkbox';
+import { orange } from '@mui/material/colors';
+
 import {
 	FullscreenExit as FullscreenExitIcon,
 } from "@material-ui/icons";
@@ -27,10 +30,11 @@ import 'codemirror/theme/gruvbox-dark.css';
 const CodeEditor = (props) => {
 	const { fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata } = props
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
-  // const {codelang, setcodelang} = props
-  const theme = useTheme();
+  	// const {codelang, setcodelang} = props
+  	const theme = useTheme();
 	const [validation, setValidation] = React.useState(false);
 	const [expOutput, setExpOutput] = React.useState(" ");
+	const [linewrap, setlinewrap] = React.useState(true);
 
 	const autoFormat = (input) => {
 		if (validation !== true) {
@@ -129,13 +133,14 @@ const CodeEditor = (props) => {
 					</IconButton>
 				</div>
 			</div>
+			
 			<span style={{
 				border: `2px solid ${theme.palette.inputColor}`,
 				borderRadius: theme.palette.borderRadius,
 			}}>
 				<CodeMirror
 					value = {localcodedata}
-					height="250px"
+					height="200px"
 					style={{
 					}}
 					onChange={(value) => {
@@ -146,11 +151,48 @@ const CodeEditor = (props) => {
 						theme: 'gruvbox-dark',
 						keyMap: 'sublime',
 						mode: 'javascript',
+						lineWrapping: linewrap,
 						// mode: {codelang},
 					}}
 				/>
 			</span>
 
+			<div
+				style={{
+					marginBottom: -30,
+				}}
+			>
+				<p
+					style={{
+						color: "white",
+						fontFamily: "monospace",
+						paddingLeft: 480,
+						width: 100,
+						display: 'inline',
+					}}
+				>
+					Line Wrap
+					<Checkbox
+						onClick={() => {
+							if (linewrap) {
+								setlinewrap(false)
+							}
+							if (!linewrap){
+								setlinewrap(true)
+							}
+						}}
+						defaultChecked
+						size="small"
+						sx={{
+							color: orange[600],
+							'&.Mui-checked': {
+							  color: orange[800],
+							},
+						}}
+					/>
+				</p>
+			</div>
+
 			<div>
 				<DialogTitle
 					style={{
@@ -172,8 +214,8 @@ const CodeEditor = (props) => {
 						theme={theme.palette.jsonTheme}
 						style={{
 							borderRadius: 5,
-							border: "1px solid rgba(255,255,255,0.7)",
-							padding: 5, 
+							border: `2px solid ${theme.palette.inputColor}`,
+							padding: 10, 
 							maxHeight: 250, 
 							minheight: 250, 
 							overflow: "auto",

package-lock.json

@@ -0,0 +1,16 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "codemirror": {
+      "version": "5.65.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.0.tgz",
+      "integrity": "sha512-gWEnHKEcz1Hyz7fsQWpK7P0sPI2/kSkRX2tc7DFA6TmZuDN75x/1ejnH/Pn8adYKrLEA1V2ww6L00GudHZbSKw=="
+    },
+    "react-codemirror-runmode": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-codemirror-runmode/-/react-codemirror-runmode-1.0.5.tgz",
+      "integrity": "sha512-6TzbODi0WSllc0VOwOjTpZxE9wUheMMpmBNydzR5o0NbbBLX0j73xutH/o85BTG9NKs06sFEBMvCsRKT6jRz8A=="
+    }
+  }
+}