Skip to content

Commit fa62ce4

Browse files
char0nchar0n
committed
refactor(syntax-highlighting): use component wrapping
1 parent 7260005 commit fa62ce4

File tree

14 files changed

+129
-87
lines changed

14 files changed

+129
-87
lines changed

‎src/core/components/curl.jsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,35 @@
11
import React from "react"
22
import PropTypes from "prop-types"
33
import { CopyToClipboard } from "react-copy-to-clipboard"
4-
import get from "lodash/get"
54
import { requestSnippetGenerator_curl_bash } from "../plugins/request-snippets/fn"
65

76
export default class Curl extends React.Component {
87
static propTypes = {
9-
getConfigs: PropTypes.func.isRequired,
108
getComponent: PropTypes.func.isRequired,
119
request: PropTypes.object.isRequired
1210
}
1311

1412
render() {
15-
let { request, getConfigs, getComponent } = this.props
16-
let curl = requestSnippetGenerator_curl_bash(request)
17-
18-
const config = getConfigs()
13+
const { request, getComponent } = this.props
14+
const curl = requestSnippetGenerator_curl_bash(request)
1915
const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
2016

21-
const curlBlock = get(config, "syntaxHighlight.activated") ? (
22-
<SyntaxHighlighter language="bash" className="curl microlight">
23-
{curl}
24-
</SyntaxHighlighter>
25-
) : (
26-
<textarea readOnly={true} className="curl" value={curl}></textarea>
27-
)
28-
2917
return (
3018
<div className="curl-command">
3119
<h4>Curl</h4>
3220
<div className="copy-to-clipboard">
3321
<CopyToClipboard text={curl}><button/></CopyToClipboard>
3422
</div>
3523
<div>
36-
{curlBlock}
24+
<SyntaxHighlighter
25+
language="bash"
26+
className="curl microlight"
27+
renderPlainText={({ children, PlainTextViewer }) => (
28+
<PlainTextViewer className="curl">{children}</PlainTextViewer>
29+
)}
30+
>
31+
{curl}
32+
</SyntaxHighlighter>
3733
</div>
3834
</div>
3935
)

‎src/core/components/example.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ export default function Example(props) {
2828
{showValue && example.has("value") ? (
2929
<section className="example__section">
3030
<div className="example__section-header">Example Value</div>
31-
<HighlightCode
32-
getConfigs={getConfigs}
33-
value={stringify(example.get("value"))}
31+
<HighlightCode>{stringify(example.get("value"))}</HighlightCode>
3432
/>
3533
</section>
3634
) : null}

‎src/core/components/model-example.jsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,7 @@ const ModelExample = ({
113113
{example ? (
114114
example
115115
) : (
116-
<HighlightCode
117-
value="(no example available)"
118-
getConfigs={getConfigs}
119-
/>
116+
<HighlightCode>(no example available</HighlightCode>
120117
)}
121118
</div>
122119
)}

‎src/core/components/param-body.jsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,7 @@ export default class ParamBody extends PureComponent {
127127
{
128128
isEditBox && isExecute
129129
? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>
130-
: (value && <HighlightCode className="body-param__example"
131-
language={ language }
132-
getConfigs={ getConfigs }
133-
value={ value }/>)
130+
: (value && <HighlightCode className="body-param__example" language={ language }>{value}</HighlightCode>)
134131
}
135132
<div className="body-param-options">
136133
{

‎src/core/components/response-body.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,23 +108,23 @@ export default class ResponseBody extends React.PureComponent {
108108
body = "can't parse JSON. Raw result:\n\n" + content
109109
}
110110

111-
bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} value={ body } getConfigs={ getConfigs } canCopy />
111+
bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} canCopy>{body}</HighlightCode>
112112

113113
// XML
114114
} else if (/xml/i.test(contentType)) {
115115
body = formatXml(content, {
116116
textNodesOnSameLine: true,
117117
indentor: " "
118118
})
119-
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} value={ body } getConfigs={ getConfigs } canCopy />
119+
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} canCopy>{body}</HighlightCode>
120120

121121
// HTML or Plain Text
122122
} else if (toLower(contentType) === "text/html" || /text\/plain/.test(contentType)) {
123-
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} value={ content } getConfigs={ getConfigs } canCopy />
123+
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} canCopy>{content}</HighlightCode>
124124

125125
// CSV
126126
} else if (toLower(contentType) === "text/csv" || /text\/csv/.test(contentType)) {
127-
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.csv`} value={ content } getConfigs={ getConfigs } canCopy />
127+
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.csv`} canCopy>{content}</HighlightCode>
128128

129129
// Image
130130
} else if (/^image\//i.test(contentType)) {
@@ -138,7 +138,7 @@ export default class ResponseBody extends React.PureComponent {
138138
} else if (/^audio\//i.test(contentType)) {
139139
bodyEl = <pre className="microlight"><audio controls key={ url }><source src={ url } type={ contentType } /></audio></pre>
140140
} else if (typeof content === "string") {
141-
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } getConfigs={ getConfigs } canCopy />
141+
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{content}</HighlightCode>
142142
} else if ( content.size > 0 ) {
143143
// We don't know the contentType, but there was some content returned
144144
if(parsedContent) {
@@ -148,7 +148,7 @@ export default class ResponseBody extends React.PureComponent {
148148
<p className="i">
149149
Unrecognized response type; displaying content as text.
150150
</p>
151-
<HighlightCode downloadable fileName={`${downloadName}.txt`} value={ parsedContent } getConfigs={ getConfigs } canCopy />
151+
<HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{parsedContent}</HighlightCode>
152152
</div>
153153

154154
} else {

‎src/core/components/response.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {
1515

1616
return (
1717
<div>
18-
<HighlightCode className="example" getConfigs={ getConfigs } language={ language } value={ stringify(sampleResponse) } />
18+
<HighlightCode className="example" language={language}>{stringify(sampleResponse)}</HighlightCode>
1919
</div>
2020
)
2121
}

‎src/core/plugins/oas3/components/request-body.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -293,8 +293,9 @@ const RequestBody = ({
293293
className="body-param__example"
294294
getConfigs={getConfigs}
295295
language={language}
296-
value={stringify(requestBodyValue) || sampleRequestBody}
297-
/>
296+
>
297+
{stringify(requestBodyValue) || sampleRequestBody}
298+
</HighlightCode>
298299
}
299300
includeWriteOnly={true}
300301
/>

‎src/core/plugins/request-snippets/request-snippets.jsx

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useRef, useEffect, useState } from "react"
22
import PropTypes from "prop-types"
3-
import get from "lodash/get"
4-
import isFunction from "lodash/isFunction"
53
import { CopyToClipboard } from "react-copy-to-clipboard"
64

75
const style = {
@@ -34,9 +32,7 @@ const activeStyle = {
3432
borderBottom: "none"
3533
}
3634

37-
const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getComponent }) => {
38-
const config = isFunction(getConfigs) ? getConfigs() : null
39-
const canSyntaxHighlight = get(config, "syntaxHighlight") !== false && get(config, "syntaxHighlight.activated", true)
35+
const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) => {
4036
const rootRef = useRef(null)
4137

4238
const ArrowIcon = getComponent("ArrowUpIcon")
@@ -45,24 +41,6 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
4541

4642
const [activeLanguage, setActiveLanguage] = useState(requestSnippetsSelectors.getSnippetGenerators()?.keySeq().first())
4743
const [isExpanded, setIsExpanded] = useState(requestSnippetsSelectors?.getDefaultExpanded())
48-
useEffect(() => {
49-
const doIt = () => {
50-
51-
}
52-
doIt()
53-
}, [])
54-
useEffect(() => {
55-
const childNodes = Array
56-
.from(rootRef.current.childNodes)
57-
.filter(node => !!node.nodeType && node.classList?.contains("curl-command"))
58-
// eslint-disable-next-line no-use-before-define
59-
childNodes.forEach(node => node.addEventListener("mousewheel", handlePreventYScrollingBeyondElement, { passive: false }))
60-
61-
return () => {
62-
// eslint-disable-next-line no-use-before-define
63-
childNodes.forEach(node => node.removeEventListener("mousewheel", handlePreventYScrollingBeyondElement))
64-
}
65-
}, [request])
6644

6745
const snippetGenerators = requestSnippetsSelectors.getSnippetGenerators()
6846
const activeGenerator = snippetGenerators.get(activeLanguage)
@@ -99,6 +77,26 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
9977
}
10078
}
10179

80+
useEffect(() => {
81+
const doIt = () => {
82+
83+
}
84+
doIt()
85+
}, [])
86+
87+
useEffect(() => {
88+
const childNodes = Array
89+
.from(rootRef.current.childNodes)
90+
.filter(node => !!node.nodeType && node.classList?.contains("curl-command"))
91+
// eslint-disable-next-line no-use-before-define
92+
childNodes.forEach(node => node.addEventListener("mousewheel", handlePreventYScrollingBeyondElement, { passive: false }))
93+
94+
return () => {
95+
// eslint-disable-next-line no-use-before-define
96+
childNodes.forEach(node => node.removeEventListener("mousewheel", handlePreventYScrollingBeyondElement))
97+
}
98+
}, [request])
99+
102100
const SnippetComponent = canSyntaxHighlight ? (
103101
<SyntaxHighlighter
104102
language={activeGenerator.get("syntax")}
@@ -142,7 +140,15 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
142140
</CopyToClipboard>
143141
</div>
144142
<div>
145-
{SnippetComponent}
143+
<SyntaxHighlighter
144+
language={activeGenerator.get("syntax")}
145+
className="curl microlight"
146+
renderPlainText={({ children, PlainTextViewer }) => (
147+
<PlainTextViewer className="curl"></PlainTextViewer>
148+
)}
149+
>
150+
{snippet}
151+
</SyntaxHighlighter>
146152
</div>
147153
</div>
148154
}
@@ -153,7 +159,6 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
153159
RequestSnippets.propTypes = {
154160
request: PropTypes.object.isRequired,
155161
requestSnippetsSelectors: PropTypes.object.isRequired,
156-
getConfigs: PropTypes.object.isRequired,
157162
getComponent: PropTypes.func.isRequired,
158163
requestSnippetsActions: PropTypes.object,
159164
}

‎src/core/plugins/syntax-highlighting/components/HighlightCode.jsx

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,19 @@ import saveAs from "js-file-download"
99
import { CopyToClipboard } from "react-copy-to-clipboard"
1010

1111
const HighlightCode = ({
12-
value,
1312
fileName = "response.txt",
1413
className,
1514
downloadable,
16-
getConfigs,
1715
getComponent,
1816
canCopy,
1917
language,
18+
children,
2019
}) => {
21-
const config = getConfigs()
22-
const canSyntaxHighlight =
23-
get(config, "syntaxHighlight") !== false &&
24-
get(config, "syntaxHighlight.activated", true)
2520
const rootRef = useRef(null)
26-
2721
const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
2822

2923
const handleDownload = () => {
30-
saveAs(value, fileName)
24+
saveAs(children, fileName)
3125
}
3226

3327
const handlePreventYScrollingBeyondElement = (e) => {
@@ -70,13 +64,13 @@ const HighlightCode = ({
7064
)
7165
)
7266
}
73-
}, [value, className, language])
67+
}, [children, className, language])
7468

7569
return (
7670
<div className="highlight-code" ref={rootRef}>
7771
{canCopy && (
7872
<div className="copy-to-clipboard">
79-
<CopyToClipboard text={value}>
73+
<CopyToClipboard text={children}>
8074
<button />
8175
</CopyToClipboard>
8276
</div>
@@ -88,29 +82,27 @@ const HighlightCode = ({
8882
</button>
8983
)}
9084

91-
{canSyntaxHighlight ? (
92-
<SyntaxHighlighter
93-
language={language}
94-
className={classNames(className, "microlight")}
95-
>
96-
{value}
97-
</SyntaxHighlighter>
98-
) : (
99-
<pre className={classNames(className, "microlight")}>{value}</pre>
100-
)}
85+
<SyntaxHighlighter
86+
language={language}
87+
className={classNames(className, "microlight")}
88+
renderPlainText={({ children, PlainTextViewer }) => (
89+
<PlainTextViewer className={className}>{children}</PlainTextViewer>
90+
)}
91+
>
92+
{children}
93+
</SyntaxHighlighter>
10194
</div>
10295
)
10396
}
10497

10598
HighlightCode.propTypes = {
106-
value: PropTypes.string.isRequired,
107-
getConfigs: PropTypes.func.isRequired,
10899
getComponent: PropTypes.func.isRequired,
109100
className: PropTypes.string,
110101
downloadable: PropTypes.bool,
111102
fileName: PropTypes.string,
112103
language: PropTypes.string,
113104
canCopy: PropTypes.bool,
105+
children: PropTypes.string.isRequired,
114106
}
115107

116108
export default HighlightCode

‎src/core/plugins/syntax-highlighting/components/PlainTextViewer.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @prettier
3+
*/
4+
import React from "react"
5+
import PropTypes from "prop-types"
6+
import classNames from "classnames"
7+
8+
const PlainTextViewer = ({ className = "", children }) => (
9+
<pre className={classNames("microlight", className)}>{children}</pre>
10+
)
11+
12+
PlainTextViewer.propTypes = {
13+
className: PropTypes.string,
14+
children: PropTypes.string.isRequired,
15+
}
16+
17+
export default PlainTextViewer

0 commit comments

Comments
 (0)