sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

pure monaco editor wip

This commit is contained in:
burnettk 2024-06-24 18:00:19 -04:00
parent 5e3831f4d6
commit ca96063f87
No known key found for this signature in database
5 changed files with 82 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
spiffworkflow-frontend/package-lock.json generated
View File

@ -51,6 +51,7 @@
"jwt-decode": "^4.0.0",
"keycloak-js": "^24.0.4",
"lodash.merge": "^4.6.2",
"monaco-editor": "^0.50.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^4.8.0",
@ -4450,6 +4451,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
"integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
"license": "MIT",
"dependencies": {
"state-local": "^1.0.6"
},
@ -4461,6 +4463,7 @@
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
"integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
"license": "MIT",
"dependencies": {
"@monaco-editor/loader": "^1.4.0"
},
@ -19138,10 +19141,10 @@
"integrity": "sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg=="
},
"node_modules/monaco-editor": {
"version": "0.49.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.49.0.tgz",
"integrity": "sha512-2I8/T3X/hLxB2oPHgqcNYUVdA/ZEFShT7IAujifIPMfKkNbLOqY8XCoyHCXrsdjb36dW9MwoTwBCFpXKMwNwaQ==",
"peer": true
"version": "0.50.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
"integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==",
"license": "MIT"
},
"node_modules/mri": {
"version": "1.2.0",
@ -22377,7 +22380,8 @@
"node_modules/state-local": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
"license": "MIT"
},
"node_modules/static-extend": {
"version": "0.1.2",
@ -39739,10 +39743,9 @@
}
},
"monaco-editor": {
"version": "0.49.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.49.0.tgz",
"integrity": "sha512-2I8/T3X/hLxB2oPHgqcNYUVdA/ZEFShT7IAujifIPMfKkNbLOqY8XCoyHCXrsdjb36dW9MwoTwBCFpXKMwNwaQ==",
"peer": true
"version": "0.50.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
"integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
},
"mri": {
"version": "1.2.0",

5
spiffworkflow-frontend/package.json
View File

@ -14,7 +14,6 @@
"@casl/ability": "^6.7.1",
"@casl/react": "^3.1.0",
"@microsoft/fetch-event-source": "^2.0.1",
"@monaco-editor/react": "^4.4.5",
"@mui/material": "^5.15.18",
"@prefresh/vite": "^2.4.5",
"@react-icons/all-files": "^4.1.0",
@ -23,6 +22,7 @@
"@rjsf/utils": "^5.18.4",
"@rjsf/validator-ajv8": "github:sartography/rjsf-validator-ajv8-test#peformance-improvement-w-build",
"@tanstack/react-query": "^5.40.0",
"@monaco-editor/react": "^4.4.5",
"@tanstack/react-query-devtools": "^5.40.0",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
@ -47,6 +47,7 @@
"jwt-decode": "^4.0.0",
"keycloak-js": "^24.0.4",
"lodash.merge": "^4.6.2",
"monaco-editor": "^0.50.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^4.8.0",
@ -115,6 +116,7 @@
"cypress-slow-down": "^1.3.1",
"cypress-vite": "^1.5.0",
"eslint": "^8.56.0",
"eslint_d": "^12.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-cypress": "^3.3.0",
@ -125,7 +127,6 @@
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-sonarjs": "^1.0.3",
"eslint-plugin-unused-imports": "^3.2.0",
"eslint_d": "^12.2.0",
"inherits-browser": "^0.0.1",
"jsdom": "^24.0.0",
"nice-select2": "^2.1.0",

1
spiffworkflow-frontend/src/App.tsx
View File

@ -7,6 +7,7 @@ import { AbilityContext } from './contexts/Can';
import APIErrorProvider from './contexts/APIErrorContext';
import ContainerForExtensions from './ContainerForExtensions';
import PublicRoutes from './routes/PublicRoutes';
import './monacoEditorWorker';
const queryClient = new QueryClient();

27
spiffworkflow-frontend/src/monacoEditorWorker.ts Normal file
View File

@ -0,0 +1,27 @@
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
// @ts-ignore
self.MonacoEnvironment = {
getWorker(_: any, label: string) {
if (label === 'json') {
return new jsonWorker();
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker();
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker();
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker();
}
return new editorWorker();
}
};
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

62
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -1,5 +1,5 @@
import { ReactElement, useCallback, useEffect, useState } from 'react';
import Editor from '@monaco-editor/react';
import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import {
useParams,
useNavigate,
@ -122,6 +122,38 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
const [eventPayload, setEventPayload] = useState<string>('{}');
const [eventTextEditorEnabled, setEventTextEditorEnabled] =
useState<boolean>(false);
const monacoEl = useRef(null);
const [editor, setEditor] =
useState<monaco.editor.IStandaloneCodeEditor | null>(null);
useEffect(() => {
if (monacoEl.current) {
console.log('monacoEl.current', monacoEl.current);
setEditor((editor) => {
console.log('setting editor');
if (editor) {
return editor;
}
console.log('really setting editor');
return monaco.editor.create(monacoEl.current!, {
value: eventPayload,
language: 'json',
readOnly: !eventTextEditorEnabled,
scrollBeyondLastLine: false,
minimap: { enabled: false },
});
});
}
return () => editor?.dispose();
}, [monacoEl.current, eventTextEditorEnabled, editor, eventPayload]);
useEffect(() => {
if (editor) {
editor.setValue(eventPayload);
}
}, [eventPayload, editor]);
const [addingPotentialOwners, setAddingPotentialOwners] =
useState<boolean>(false);
@ -1248,19 +1280,10 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
) : (
<>
<h3 className={taskDataHeaderClassName}>{taskDataHeader}</h3>
<Editor
height={`${heightInEm}rem`}
width="auto"
defaultLanguage="json"
value={taskDataToDisplay}
onChange={(value) => {
setTaskDataToDisplay(value || '');
}}
options={{
readOnly: editorReadOnly,
scrollBeyondLastLine: scrollEnabled,
minimap: { enabled: minimapEnabled },
}}
<p>monaco time</p>
<div
ref={monacoEl}
style={{ height: `${heightInEm}rem`, width: 'auto' }}
/>
</>
)}
@ -1293,14 +1316,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
if (eventTextEditorEnabled) {
className = '';
editor = (
<Editor
height={300}
width="auto"
defaultLanguage="json"
defaultValue={eventPayload}
onChange={(value: any) => setEventPayload(value || '{}')}
options={{ readOnly: !eventTextEditorEnabled }}
/>
<div ref={monacoEl} style={{ height: '300px', width: 'auto' }} />
);
}
return (