+
+
+ {`${label}${required ? ' *' : ''}`}
+
+
+
+
+ {
+ field.onChange(value, event);
+ }}
+ options={{
+ fontSize: 13,
+ automaticLayout: true,
+ bracketPairColorization: true,
+ formatOnPaste: true,
+ minimap: {
+ enabled: false,
+ },
+ overviewRulerLanes: 0,
+ readOnly: disabled,
+ scrollBeyondLastLine: false,
+ wordWrap: 'on',
+ wrappingStrategy: 'advanced',
+ }}
+ />
+
+
+ )}
+ />
+ );
+}
+
+CodeEditor.propTypes = {
+ required: PropTypes.bool,
+ defaultValue: PropTypes.string,
+ shouldUnregister: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ readOnly: PropTypes.bool,
+ 'data-test': PropTypes.string,
+ disabled: PropTypes.bool,
+};
+
+export default CodeEditor;
diff --git a/packages/web/src/components/CodeEditor/style.js b/packages/web/src/components/CodeEditor/style.js
new file mode 100644
index 00000000..eb37e442
--- /dev/null
+++ b/packages/web/src/components/CodeEditor/style.js
@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+
+export const InputLabelWrapper = styled('div')`
+ position: absolute;
+ top: ${({ theme }) => theme.spacing(1.75)};
+ inset: 0;
+ left: -6px;
+ top: 16px;
+`;
diff --git a/packages/web/src/components/InputCreator/index.jsx b/packages/web/src/components/InputCreator/index.jsx
index af82f000..70eeed70 100644
--- a/packages/web/src/components/InputCreator/index.jsx
+++ b/packages/web/src/components/InputCreator/index.jsx
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import useDynamicFields from 'hooks/useDynamicFields';
import useDynamicData from 'hooks/useDynamicData';
import PowerInput from 'components/PowerInput';
+import CodeEditor from 'components/CodeEditor';
import TextField from 'components/TextField';
import ControlledAutocomplete from 'components/ControlledAutocomplete';
import ControlledCustomAutocomplete from 'components/ControlledCustomAutocomplete';
@@ -126,6 +127,26 @@ function InputCreator(props) {
);
}
+ if (type === 'code') {
+ return (
+