marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finally made the code editor side-by-side as it should've been all along

Browse Source
This commit is contained in:
frikky
2023-03-17 00:47:22 +01:00
parent b8e3470c8e
commit 2bda021105
1 changed files with 758 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ShuffleCodeEditor.jsx
+98 -45
View File
@@ -14,6 +14,7 @@ import {
Button,
} from '@material-ui/core';
import theme from '../theme';
import Checkbox from '@mui/material/Checkbox';
import { orange } from '@mui/material/colors';
import { isMobile } from "react-device-detect"
@@ -34,10 +35,11 @@ import {
} from '@mui/icons-material';
import {
AutoFixHigh as AutoFixHighIcon, CompressOutlined, QrCodeScannerOutlined,
AutoFixHigh as AutoFixHighIcon,
CompressOutlined,
QrCodeScannerOutlined,
} from '@mui/icons-material';
import { useTheme } from '@material-ui/core/styles';
import { validateJson } from "../views/Workflows.jsx";
import ReactJson from "react-json-view";
import PaperComponent from "../components/PaperComponent.jsx";
@@ -50,6 +52,9 @@ import 'codemirror/theme/duotone-light.css';
import { padding, textAlign } from '@mui/system';
import data from '../frameworkStyle.jsx';
import { useNavigate, Link, useParams } from "react-router-dom";
import { createTheme } from '@uiw/codemirror-themes';
import { tags } from '@lezer/highlight';
const liquidFilters = [
{"name": "Size", "value": "size", "example": ""},
@@ -74,12 +79,44 @@ const pythonFilters = [
{"name": "Handle JSON", "value": `{% python %}\nimport json\njsondata = json.loads(r"""$nodename""")\n{% endpython %}`, "example": ``},
]
const shuffleTheme = createTheme({
theme: 'dark',
settings: {
background: '#282828',
foreground: '#ffffff',
caret: '#5d00ff',
selection: '#036dd626',
selectionMatch: '#036dd626',
lineHighlight: '#8a91991a',
gutterBackground: '#fff',
gutterForeground: '#8a919966',
fontSize: 18,
borderRadius: theme.palette.borderRadius,
border: `2px solid ${theme.palette.inputColor}`,
},
styles: [
{ tag: tags.comment, color: '#787b8099' },
{ tag: tags.variableName, color: '#0080ff' },
{ tag: [tags.string, tags.special(tags.brace)], color: '#5c6166' },
{ tag: tags.number, color: '#5c6166' },
{ tag: tags.bool, color: '#5c6166' },
{ tag: tags.null, color: '#5c6166' },
{ tag: tags.keyword, color: '#5c6166' },
{ tag: tags.operator, color: '#5c6166' },
{ tag: tags.className, color: '#5c6166' },
{ tag: tags.definition(tags.typeName), color: '#5c6166' },
{ tag: tags.typeName, color: '#5c6166' },
{ tag: tags.angleBracket, color: '#5c6166' },
{ tag: tags.tagName, color: '#5c6166' },
{ tag: tags.attributeName, color: '#5c6166' },
],
});
const CodeEditor = (props) => {
const { globalUrl, fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata, isFileEditor, runUpdateText } = props
const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
// const {codelang, setcodelang} = props
const theme = useTheme();
const [validation, setValidation] = React.useState(false);
const [expOutput, setExpOutput] = React.useState(" ");
const [linewrap, setlinewrap] = React.useState(true);
@@ -298,7 +335,7 @@ const CodeEditor = (props) => {
var variable_occurence = current_code_line.match(/[\\]{0,1}[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
if (variable_occurence === null || variable_occurence === undefined) {
console.log("No variables found. Returning")
//console.log("No variables found. Returning")
continue
}
@@ -310,7 +347,7 @@ const CodeEditor = (props) => {
}
variable_occurence = new_occurences.valueOf()
console.log("Match2: ", variable_occurence)
//console.log("Match2: ", variable_occurence)
// console.log(variable_occurence)
// console.log()
@@ -410,10 +447,6 @@ const CodeEditor = (props) => {
//const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
//if (found === null || found === undefined) {
// console.log("No output found!")
// return
//}
console.log("FOUND: ", found)
@@ -510,7 +543,7 @@ const CodeEditor = (props) => {
}
}
} catch (e) {
console.log("Outer replace error: ", e)
//console.log("Outer replace error: ", e)
}
const tmpValidation = validateJson(input.valueOf())
@@ -656,14 +689,18 @@ const CodeEditor = (props) => {
style: {
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: isMobile ? "100%" : 600,
maxHeight: isMobile ? "100%" : 800,
minWidth: isMobile ? "100%" : 1200,
maxWidth: isMobile ? "100%" : 1200,
minHeight: isMobile ? "100%" : 900,
maxHeight: isMobile ? "100%" : 900,
padding: isMobile ? "25px 10px 25px 10px" : 25,
border: theme.palette.defaultBorder,
zIndex: 12501,
},
}}
>
<div style={{display: "flex"}}>
<div style={{flex: 1, }}>
{ isFileEditor ?
<div
style={{
@@ -742,7 +779,8 @@ const CodeEditor = (props) => {
</Tooltip>
</IconButton>
</div>
</div> }
</div>
}
{ isFileEditor ? null :
@@ -1107,18 +1145,17 @@ const CodeEditor = (props) => {
);
})}
</Menu>
</div> }
</div>
}
<span style={{
border: `2px solid ${theme.palette.inputColor}`,
borderRadius: theme.palette.borderRadius,
position: "relative",
}}>
<CodeMirror
theme={shuffleTheme}
value = {localcodedata}
height= {isFileEditor ? "450px" : "200px"}
style={{
}}
height={isFileEditor ? 450 : 700}
onCursorActivity = {(value) => {
// console.log(value.getCursor())
setCurrentCharacter(value.getCursor().ch)
@@ -1140,14 +1177,15 @@ const CodeEditor = (props) => {
}}
options={{
styleSelectedText: true,
theme: codeTheme,
keyMap: 'sublime',
mode: 'python',
lineWrapping: linewrap,
//theme: codeTheme,
// mode: {codelang},
}}
/>
</span>
{/*editorPopupOpen ?
<Paper
style={{
@@ -1259,23 +1297,23 @@ const CodeEditor = (props) => {
*/}
</div>
{isFileEditor ? null : (
</div>
<div style={{flex: 1, marginLeft: 25, }}>
{isFileEditor ? null :
<div>
{isMobile ? null :
<DialogTitle
style={{
marginTop: 20,
paddingLeft: 10,
display: "flex",
}}
>
<span
style={{
color: "white"
}}
>
<span style={{color: "white"}}>
Expected Output
</span>
<IconButton disabled={executing} color="primary" style={{border: `1px solid ${theme.palette.primary.main}`, marginLeft: 300, padding: 8}} variant="contained" onClick={() => {
<IconButton disabled={executing} color="primary" style={{border: `1px solid ${theme.palette.primary.main}`, marginLeft: 100, padding: 8}} variant="contained" onClick={() => {
executeSingleAction(expOutput)
}}>
<Tooltip title="Try it! This runs the Shuffle Tools 'repeat back to me' action with what you see in the expected output window. Commonly used to test your Python scripts or Liquid filters, not requiring the full workflow to run again." placement="top">
@@ -1283,8 +1321,10 @@ const CodeEditor = (props) => {
</Tooltip>
</IconButton>
</DialogTitle>
}
{isMobile ? null :
validation === true ?
<ReactJson
@@ -1294,8 +1334,8 @@ const CodeEditor = (props) => {
borderRadius: 5,
border: `2px solid ${theme.palette.inputColor}`,
padding: 10,
maxHeight: 250,
minheight: 250,
maxHeight: 500,
minheight: 500,
overflow: "auto",
}}
collapsed={false}
@@ -1316,17 +1356,19 @@ const CodeEditor = (props) => {
color: "#f85a3e",
fontFamily: "monospace",
backgroundColor: "#282828",
padding: 20,
padding: 10,
marginTop: -2,
border: `2px solid ${theme.palette.inputColor}`,
borderRadius: theme.palette.borderRadius,
maxHeight: 250,
maxHeight: 500,
minHeight: 500,
overflow: "auto",
}}
>
{expOutput}
</p>
}
{executionResult.valid === true ?
<ReactJson
src={executionResult.result}
@@ -1335,8 +1377,8 @@ const CodeEditor = (props) => {
borderRadius: 5,
border: `2px solid ${theme.palette.inputColor}`,
padding: 10,
maxHeight: 100,
minheight: 100,
maxHeight: 190,
minheight: 190,
overflow: "auto",
}}
collapsed={false}
@@ -1350,12 +1392,21 @@ const CodeEditor = (props) => {
name={"Test result"}
/>
:
<span>
<span style={{maxHeight: 190, minHeight: 190, }}>
{executionResult.result.length > 0 ?
<Typography variant="body2" style={{maxHeight: 100, overflow: "auto",}}>
Test output: {executionResult.result}
<span style={{maxHeight: 150, overflow: "auto", marginTop: 20, }}>
<Typography variant="body2">
<b>Test output</b>
</Typography>
: null}
<Typography variant="body2">
{executionResult.result}
</Typography>
</span>
:
<Typography variant="body2" style={{maxHeight: 150, overflow: "auto", marginTop: 20,}}>
No test output yet.
</Typography>
}
{executionResult.errors !== undefined && executionResult.errors !== null && executionResult.errors.length > 0 ?
<Typography variant="body2" style={{maxHeight: 100, overflow: "auto", color: "#f85a3e",}}>
Errors ({executionResult.errors.length}): {executionResult.errors.join("\n")}
@@ -1364,13 +1415,15 @@ const CodeEditor = (props) => {
</span>
}
</div>
)
}
<div style={{
display: 'flex',
paddingTop : 30, // maybe handle this as well?
}}
>
</div>
{/* Flexbox stop */}
</div>
<div style={{display: 'flex',}}>
<button
style={{
color: "white",
@@ -1379,7 +1432,7 @@ const CodeEditor = (props) => {
height: 35,
flex: 1,
marginLeft: 5,
marginTop: 20,
marginTop: 5,
cursor: "pointer"
}}
onClick={() => {
@@ -1397,7 +1450,7 @@ const CodeEditor = (props) => {
height: 35,
flex: 1,
marginLeft: 10,
marginTop: 20,
marginTop: 5,
cursor: "pointer"
}}
onClick={(event) => {