Skip to content

Commit 2d19ad7

Browse files
aadams0aadams0
authored
Merge pull request #42 from oslabs-beta/codemirrorFix/Ethan
Codemirror fix/ethan
2 parents 4851d81 + 1fa89e9 commit 2d19ad7

21 files changed

+231
-239
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
"@codemirror/lang-javascript": "^0.20.0",
114114
"@codemirror/lang-json": "^0.20.0",
115115
"@codemirror/lang-xml": "^0.20.0",
116+
"@codemirror/language": "^0.20.0",
116117
"@doyensec/electronegativity": "^1.9.1",
117118
"@emotion/react": "^11.9.0",
118119
"@emotion/styled": "^11.8.1",
@@ -121,6 +122,7 @@
121122
"@grpc/grpc-js": "^1.6.7",
122123
"@grpc/proto-loader": "^0.6.9",
123124
"@jest-runner/electron": "^3.0.1",
125+
"@monaco-editor/react": "^4.4.5",
124126
"@mui/icons-material": "^5.6.2",
125127
"@mui/lab": "^5.0.0-alpha.80",
126128
"@mui/material": "^5.6.4",
@@ -138,7 +140,6 @@
138140
"chart.js": "^3.7.1",
139141
"classnames": "^2.3.1",
140142
"codemirror": "^5.65.3",
141-
"codemirror-graphql": "^1.3.0",
142143
"concurrently": "^7.1.0",
143144
"cookie-parser": "^1.4.6",
144145
"cross-fetch": "^3.1.5",

‎src/client/components/composer/NewRequest/BodyEntryForm.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import BodyTypeSelect from './BodyTypeSelect.jsx';
44
import JSONTextArea from './JSONTextArea.jsx';
55
import RawBodyTypeSelect from './RawBodyTypeSelect.jsx';
66
import JSONPrettify from './JSONPrettify.jsx';
7-
import TextCodeAreaEditable from './TextCodeAreaEditable.jsx';
7+
import TextCodeArea from './TextCodeArea.jsx';
88

99
const BodyEntryForm = (props) => {
1010
const {
@@ -40,7 +40,7 @@ const BodyEntryForm = (props) => {
4040
}
4141

4242
return (
43-
<TextCodeAreaEditable
43+
<TextCodeArea
4444
mode={newRequestBody.rawType}
4545
value={newRequestBody.bodyContent}
4646
onChange={(editor, data, value) => {

‎src/client/components/composer/NewRequest/GRPCBodyStream.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable lines-between-class-members */
22
import React, { useState, useEffect } from 'react';
3-
import TextCodeAreaEditable from './TextCodeAreaEditable';
3+
import TextCodeArea from './TextCodeArea';
44

55
const GRPCBodyStream = (props) => {
66
const [showError, setError] = useState(null);
@@ -38,9 +38,8 @@ const GRPCBodyStream = (props) => {
3838
props.newRequestStreams.streamContent[props.stream.id];
3939
// if none or the first stream query in the array
4040
const streamBody = (
41-
<TextCodeAreaEditable
41+
<TextCodeArea
4242
value={`${streamContentID || ''}`}
43-
theme="neo grpc"
4443
mode="application/json"
4544
onChange={(editor, data, value) =>
4645
props.changeHandler(props.stream.id, value)

‎src/client/components/composer/NewRequest/GRPCProtoEntryForm.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import { useSelector } from 'react-redux';
33
import GRPCAutoInputForm from './GRPCAutoInputForm.jsx';
4-
import TextCodeAreaEditable from './TextCodeAreaEditable.jsx';
4+
import TextCodeArea from './TextCodeArea.jsx';
55
// import protoParserFunc from "../../../protoParser.js";
66

77
const { api } = window;
@@ -128,7 +128,7 @@ const GRPCProtoEntryForm = (props) => {
128128

129129
<div className="is-danger subtitle">{protoError}</div>
130130
<div id="grpcProtoEntryTextArea">
131-
<TextCodeAreaEditable
131+
<TextCodeArea
132132
id="grpcProtoEntryTextArea"
133133
onChange={(editor, data, value) => updateProtoBody(value)}
134134
value={props.newRequestStreams.protoContent}

‎src/client/components/composer/NewRequest/GraphQLBodyEntryForm.jsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import React, { useState, useEffect } from 'react';
22
import CodeMirror from '@uiw/react-codemirror';
33
import { useSelector } from 'react-redux';
4-
import 'codemirror/addon/edit/matchbrackets';
5-
import 'codemirror/addon/edit/closebrackets';
6-
import 'codemirror/theme/twilight.css';
7-
import 'codemirror/lib/codemirror.css';
8-
import 'codemirror/addon/hint/show-hint';
9-
import 'codemirror/addon/hint/show-hint.css';
10-
import 'codemirror-graphql/hint';
11-
import 'codemirror-graphql/lint';
12-
import 'codemirror-graphql/mode';
13-
import 'codemirror/addon/lint/lint.css';
4+
// import 'codemirror/addon/edit/matchbrackets';
5+
// import 'codemirror/addon/edit/closebrackets';
6+
// import 'codemirror/theme/twilight.css';
7+
// import 'codemirror/lib/codemirror.css';
8+
// import 'codemirror/addon/hint/show-hint';
9+
// import 'codemirror/addon/hint/show-hint.css';
10+
// import 'codemirror-graphql/hint';
11+
// import 'codemirror-graphql/lint';
12+
// import 'codemirror-graphql/mode';
13+
// import 'codemirror/addon/lint/lint.css';
14+
1415

1516
const GraphQLBodyEntryForm = (props) => {
1617
const {
@@ -39,7 +40,7 @@ const GraphQLBodyEntryForm = (props) => {
3940
}
4041
<div className="composer-section-title">Body</div>
4142
<div id="gql-body-entry" className={`${isDark ? 'is-dark-400' : ''}is-neutral-200-box p-3`}>
42-
<CodeMirror
43+
{/* <CodeMirror
4344
value={cmValue}
4445
options={{
4546
mode: 'graphql',
@@ -74,7 +75,7 @@ const GraphQLBodyEntryForm = (props) => {
7475
bodyIsNew: true,
7576
});
7677
}}
77-
/>
78+
/> */}
7879
</div>
7980
</div>
8081
);

‎src/client/components/composer/NewRequest/GraphQLIntrospectionLog.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { useSelector } from 'react-redux';
33
import graphQLController from '../../../controllers/graphQLController';
4-
import TextCodeAreaReadOnly from './TextCodeAreaReadOnly';
4+
import TextCodeArea from './TextCodeArea';
55

66
const GraphQLIntrospectionLog = () => {
77
const headers = useSelector(
@@ -30,11 +30,11 @@ const GraphQLIntrospectionLog = () => {
3030
<div>{introspectionData}</div>
3131
)}
3232
{!!introspectionData.schemaSDL && (
33-
<TextCodeAreaReadOnly
33+
<TextCodeArea
3434
value={introspectionData.schemaSDL}
35-
theme="neo sidebar"
3635
mode="application/json"
3736
onChange={() => {}}
37+
readOnly = {true}
3838
/>
3939
)}
4040
</div>

‎src/client/components/composer/NewRequest/GraphQLVariableEntryForm.jsx‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import React, { useState, useEffect, useRef } from 'react';
2-
import CodeMirror from '@uiw/react-codemirror';
2+
import CodeMirror, { EditorState } from '@uiw/react-codemirror';
33
import { useSelector } from 'react-redux';
4-
import 'codemirror/addon/edit/matchbrackets';
5-
import 'codemirror/addon/edit/closebrackets';
6-
import 'codemirror/theme/twilight.css';
7-
import 'codemirror/lib/codemirror.css';
8-
import 'codemirror/addon/display/autorefresh';
9-
import 'codemirror/addon/display/placeholder';
10-
import 'codemirror/mode/javascript/javascript';
4+
// import 'codemirror/addon/edit/matchbrackets';
5+
// import 'codemirror/addon/edit/closebrackets';
6+
// import 'codemirror/theme/twilight.css';
7+
// import 'codemirror/lib/codemirror.css';
8+
// import 'codemirror/addon/display/autorefresh';
9+
// import 'codemirror/addon/display/placeholder';
10+
// import 'codemirror/mode/javascript/javascript';
11+
import { EditorView } from "@codemirror/view"
12+
export { EditorState } from '@codemirror/state';
13+
14+
import { json } from '@codemirror/lang-json';
15+
import { EditRoadOutlined, ModeEditRounded } from '@mui/icons-material';
16+
import { bracketMatching, matchBrackets } from '@codemirror/language';
1117

1218
const GraphQLVariableEntryForm = (props) => {
1319
const {
@@ -36,26 +42,19 @@ const GraphQLVariableEntryForm = (props) => {
3642
<CodeMirror
3743
ref={cmVariables}
3844
value={cmValue}
39-
options={{
40-
mode: { name: 'javascript', json: true },
41-
theme: 'neo sidebar',
42-
scrollbarStyle: 'native',
43-
lineNumbers: false,
44-
matchBrackets: true,
45-
autoCloseBrackets: true,
46-
indentUnit: 2,
47-
tabSize: 2,
48-
autoRefresh: true,
49-
placeholder: 'Variables must be JSON format',
50-
}}
51-
height="200px"
52-
editorDidMount={(editor) => {
53-
editor.setSize('100%', 100);
54-
}}
55-
onBeforeChange={(editor, data, value) => {
56-
setValue(value);
57-
}}
45+
extensions={[
46+
json(),
47+
EditorView.lineWrapping,
48+
]}
49+
placeholder = 'Variables must be JSON format'
50+
theme = 'dark'
51+
height="100%"
52+
width = "100%"
53+
// onBeforeChange={(editor, data, value) => {
54+
// setValue(value);
55+
// }}
5856
onChange={(editor, data, value) => {
57+
setValue(value) // maybe? the onBeforeChange hook was removed, but all it did was fire before "onChange"
5958
setNewRequestBody({
6059
...newRequestBody,
6160
bodyVariables: value,

‎src/client/components/composer/NewRequest/JSONTextArea.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
22
import PropTypes from 'prop-types';
33
import CodeMirror from '@uiw/react-codemirror';
4-
import TextCodeAreaEditable from './TextCodeAreaEditable.jsx';
4+
import TextCodeArea from './TextCodeArea.jsx';
55

66
export default function JSONTextArea({ newRequestBody, setNewRequestBody }) {
77
useEffect(() => {
@@ -31,7 +31,7 @@ export default function JSONTextArea({ newRequestBody, setNewRequestBody }) {
3131
});
3232

3333
return (
34-
<TextCodeAreaEditable
34+
<TextCodeArea
3535
mode={newRequestBody.rawType}
3636
onChange={(editor, data, value) => {
3737
setNewRequestBody({

‎src/client/components/composer/NewRequest/TestEntryForm.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import BodyTypeSelect from './BodyTypeSelect.jsx';
77
import JSONTextArea from './JSONTextArea.jsx';
88
import RawBodyTypeSelect from './RawBodyTypeSelect.jsx';
99
import JSONPrettify from './JSONPrettify.jsx';
10-
import TextCodeAreaEditable from './TextCodeAreaEditable.jsx';
10+
import TextCodeArea from './TextCodeArea.jsx';
1111
import dropDownArrow from '../../../../assets/icons/caret-down-tests.svg';
1212
import dropDownArrowUp from '../../../../assets/icons/caret-up-tests.svg';
1313
// import { isAbsolute, relative } from 'path';
@@ -44,7 +44,7 @@ const TestEntryForm = (props) => {
4444
</div>
4545
{showTests === true && (
4646
<div id="test-script-entry">
47-
<TextCodeAreaEditable
47+
<TextCodeArea
4848
mode="javascript"
4949
value={testContent}
5050
onChange={(editor, data, value) => {

‎src/client/components/composer/NewRequest/TextCodeArea.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
//import { POINT_CONVERSION_UNCOMPRESSED } from 'constants';
2+
import React from 'react';
3+
import CodeMirror from '@uiw/react-codemirror';
4+
import { javascript } from '@codemirror/lang-javascript';
5+
import { xml } from '@codemirror/lang-xml';
6+
import { json } from '@codemirror/lang-json';
7+
import { html } from '@codemirror/lang-html';
8+
import { EditorView } from "@codemirror/view"
9+
10+
11+
const langs = {
12+
"json": json,
13+
"xml": xml,
14+
"html": html,
15+
"javascript": javascript,
16+
"plain": xml // TODO: plaintext language is not yet supported in react codemirror (CM v6), please update when it becomes available
17+
}
18+
19+
export default function TextCodeArea({ value, mode, onChange, theme = 'dark' , readOnly = false}) {
20+
const lang = mode.substring(mode.indexOf('/') + 1) // Grab language mode based on value passed in
21+
return (
22+
<div className="is-neutral-200-box">
23+
<CodeMirror
24+
value={value}
25+
height="200px"
26+
extensions={[
27+
langs[lang](),
28+
EditorView.lineWrapping,
29+
]}
30+
placeholder='Enter body here'
31+
theme={theme}
32+
onChange={onChange}
33+
readOnly = {readOnly}
34+
/>
35+
</div>
36+
);
37+
}

0 commit comments

Comments
 (0)