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, Button,
} from '@material-ui/core'; } from '@material-ui/core';
import theme from '../theme';
import Checkbox from '@mui/material/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import { orange } from '@mui/material/colors'; import { orange } from '@mui/material/colors';
import { isMobile } from "react-device-detect" import { isMobile } from "react-device-detect"
@@ -34,10 +35,11 @@ import {
} from '@mui/icons-material'; } from '@mui/icons-material';
import { import {
AutoFixHigh as AutoFixHighIcon, CompressOutlined, QrCodeScannerOutlined, AutoFixHigh as AutoFixHighIcon,
CompressOutlined,
QrCodeScannerOutlined,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { useTheme } from '@material-ui/core/styles';
import { validateJson } from "../views/Workflows.jsx"; import { validateJson } from "../views/Workflows.jsx";
import ReactJson from "react-json-view"; import ReactJson from "react-json-view";
import PaperComponent from "../components/PaperComponent.jsx"; import PaperComponent from "../components/PaperComponent.jsx";
@@ -50,6 +52,9 @@ import 'codemirror/theme/duotone-light.css';
import { padding, textAlign } from '@mui/system'; import { padding, textAlign } from '@mui/system';
import data from '../frameworkStyle.jsx'; import data from '../frameworkStyle.jsx';
import { useNavigate, Link, useParams } from "react-router-dom"; import { useNavigate, Link, useParams } from "react-router-dom";
import { createTheme } from '@uiw/codemirror-themes';
import { tags } from '@lezer/highlight';
const liquidFilters = [ const liquidFilters = [
{"name": "Size", "value": "size", "example": ""}, {"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": ``}, {"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 CodeEditor = (props) => {
const { globalUrl, fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata, isFileEditor, runUpdateText } = 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 [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
// const {codelang, setcodelang} = props // const {codelang, setcodelang} = props
const theme = useTheme();
const [validation, setValidation] = React.useState(false); const [validation, setValidation] = React.useState(false);
const [expOutput, setExpOutput] = React.useState(" "); const [expOutput, setExpOutput] = React.useState(" ");
const [linewrap, setlinewrap] = React.useState(true); 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) 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) { if (variable_occurence === null || variable_occurence === undefined) {
console.log("No variables found. Returning") //console.log("No variables found. Returning")
continue continue
} }
@@ -310,7 +347,7 @@ const CodeEditor = (props) => {
} }
variable_occurence = new_occurences.valueOf() variable_occurence = new_occurences.valueOf()
console.log("Match2: ", variable_occurence) //console.log("Match2: ", variable_occurence)
// console.log(variable_occurence) // console.log(variable_occurence)
// console.log() // 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)
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) console.log("FOUND: ", found)
@@ -510,7 +543,7 @@ const CodeEditor = (props) => {
} }
} }
} catch (e) { } catch (e) {
console.log("Outer replace error: ", e) //console.log("Outer replace error: ", e)
} }
const tmpValidation = validateJson(input.valueOf()) const tmpValidation = validateJson(input.valueOf())
@@ -656,14 +689,18 @@ const CodeEditor = (props) => {
style: { style: {
backgroundColor: theme.palette.surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: isMobile ? "100%" : 600, minWidth: isMobile ? "100%" : 1200,
maxHeight: isMobile ? "100%" : 800, maxWidth: isMobile ? "100%" : 1200,
minHeight: isMobile ? "100%" : 900,
maxHeight: isMobile ? "100%" : 900,
padding: isMobile ? "25px 10px 25px 10px" : 25, padding: isMobile ? "25px 10px 25px 10px" : 25,
border: theme.palette.defaultBorder, border: theme.palette.defaultBorder,
zIndex: 12501, zIndex: 12501,
}, },
}} }}
> >
<div style={{display: "flex"}}>
<div style={{flex: 1, }}>
{ isFileEditor ? { isFileEditor ?
<div <div
style={{ style={{
@@ -742,7 +779,8 @@ const CodeEditor = (props) => {
</Tooltip> </Tooltip>
</IconButton> </IconButton>
</div> </div>
</div> } </div>
}
{ isFileEditor ? null : { isFileEditor ? null :
@@ -1107,18 +1145,17 @@ const CodeEditor = (props) => {
); );
})} })}
</Menu> </Menu>
</div>
</div> } }
<span style={{ <span style={{
border: `2px solid ${theme.palette.inputColor}`, border: `2px solid ${theme.palette.inputColor}`,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
position: "relative", position: "relative",
}}> }}>
<CodeMirror <CodeMirror
theme={shuffleTheme}
value = {localcodedata} value = {localcodedata}
height= {isFileEditor ? "450px" : "200px"} height={isFileEditor ? 450 : 700}
style={{
}}
onCursorActivity = {(value) => { onCursorActivity = {(value) => {
// console.log(value.getCursor()) // console.log(value.getCursor())
setCurrentCharacter(value.getCursor().ch) setCurrentCharacter(value.getCursor().ch)
@@ -1140,14 +1177,15 @@ const CodeEditor = (props) => {
}} }}
options={{ options={{
styleSelectedText: true, styleSelectedText: true,
theme: codeTheme,
keyMap: 'sublime', keyMap: 'sublime',
mode: 'python', mode: 'python',
lineWrapping: linewrap, lineWrapping: linewrap,
//theme: codeTheme,
// mode: {codelang}, // mode: {codelang},
}} }}
/> />
</span> </span>
{/*editorPopupOpen ? {/*editorPopupOpen ?
<Paper <Paper
style={{ style={{
@@ -1259,23 +1297,23 @@ const CodeEditor = (props) => {
*/} */}
</div> </div>
{isFileEditor ? null : ( </div>
<div style={{flex: 1, marginLeft: 25, }}>
{isFileEditor ? null :
<div> <div>
{isMobile ? null : {isMobile ? null :
<DialogTitle <DialogTitle
style={{ style={{
marginTop: 20,
paddingLeft: 10, paddingLeft: 10,
display: "flex",
}} }}
> >
<span <span style={{color: "white"}}>
style={{
color: "white"
}}
>
Expected Output Expected Output
</span> </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) 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"> <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> </Tooltip>
</IconButton> </IconButton>
</DialogTitle> </DialogTitle>
} }
{isMobile ? null : {isMobile ? null :
validation === true ? validation === true ?
<ReactJson <ReactJson
@@ -1294,8 +1334,8 @@ const CodeEditor = (props) => {
borderRadius: 5, borderRadius: 5,
border: `2px solid ${theme.palette.inputColor}`, border: `2px solid ${theme.palette.inputColor}`,
padding: 10, padding: 10,
maxHeight: 250, maxHeight: 500,
minheight: 250, minheight: 500,
overflow: "auto", overflow: "auto",
}} }}
collapsed={false} collapsed={false}
@@ -1316,17 +1356,19 @@ const CodeEditor = (props) => {
color: "#f85a3e", color: "#f85a3e",
fontFamily: "monospace", fontFamily: "monospace",
backgroundColor: "#282828", backgroundColor: "#282828",
padding: 20, padding: 10,
marginTop: -2, marginTop: -2,
border: `2px solid ${theme.palette.inputColor}`, border: `2px solid ${theme.palette.inputColor}`,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
maxHeight: 250, maxHeight: 500,
minHeight: 500,
overflow: "auto", overflow: "auto",
}} }}
> >
{expOutput} {expOutput}
</p> </p>
} }
{executionResult.valid === true ? {executionResult.valid === true ?
<ReactJson <ReactJson
src={executionResult.result} src={executionResult.result}
@@ -1335,8 +1377,8 @@ const CodeEditor = (props) => {
borderRadius: 5, borderRadius: 5,
border: `2px solid ${theme.palette.inputColor}`, border: `2px solid ${theme.palette.inputColor}`,
padding: 10, padding: 10,
maxHeight: 100, maxHeight: 190,
minheight: 100, minheight: 190,
overflow: "auto", overflow: "auto",
}} }}
collapsed={false} collapsed={false}
@@ -1350,12 +1392,21 @@ const CodeEditor = (props) => {
name={"Test result"} name={"Test result"}
/> />
: :
<span> <span style={{maxHeight: 190, minHeight: 190, }}>
{executionResult.result.length > 0 ? {executionResult.result.length > 0 ?
<Typography variant="body2" style={{maxHeight: 100, overflow: "auto",}}> <span style={{maxHeight: 150, overflow: "auto", marginTop: 20, }}>
Test output: {executionResult.result} <Typography variant="body2">
<b>Test output</b>
</Typography> </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 ? {executionResult.errors !== undefined && executionResult.errors !== null && executionResult.errors.length > 0 ?
<Typography variant="body2" style={{maxHeight: 100, overflow: "auto", color: "#f85a3e",}}> <Typography variant="body2" style={{maxHeight: 100, overflow: "auto", color: "#f85a3e",}}>
Errors ({executionResult.errors.length}): {executionResult.errors.join("\n")} Errors ({executionResult.errors.length}): {executionResult.errors.join("\n")}
@@ -1364,13 +1415,15 @@ const CodeEditor = (props) => {
</span> </span>
} }
</div> </div>
)
} }
<div style={{ </div>
display: 'flex',
paddingTop : 30, // maybe handle this as well? {/* Flexbox stop */}
}} </div>
>
<div style={{display: 'flex',}}>
<button <button
style={{ style={{
color: "white", color: "white",
@@ -1379,7 +1432,7 @@ const CodeEditor = (props) => {
height: 35, height: 35,
flex: 1, flex: 1,
marginLeft: 5, marginLeft: 5,
marginTop: 20, marginTop: 5,
cursor: "pointer" cursor: "pointer"
}} }}
onClick={() => { onClick={() => {
@@ -1397,7 +1450,7 @@ const CodeEditor = (props) => {
height: 35, height: 35,
flex: 1, flex: 1,
marginLeft: 10, marginLeft: 10,
marginTop: 20, marginTop: 5,
cursor: "pointer" cursor: "pointer"
}} }}
onClick={(event) => { onClick={(event) => {