fix: highlight text syntax (#2069)

src/components/SourceCode/SourceCode.tsx

@@ -9,24 +9,21 @@ export interface SourceCodeProps {
   lang: string;
 }
 
-export class SourceCode extends React.PureComponent<SourceCodeProps> {
+export const SourceCode = (props: SourceCodeProps) => {
-  render() {
+  const { source, lang } = props;
-    const { source, lang } = this.props;
+  return <StyledPre dangerouslySetInnerHTML={{ __html: highlight(source, lang) }} />;
-    return <StyledPre dangerouslySetInnerHTML={{ __html: highlight(source, lang) }} />;
+};
-  }
-}
 
-export class SourceCodeWithCopy extends React.Component<SourceCodeProps> {
+export const SourceCodeWithCopy = (props: SourceCodeProps) => {
-  render() {
+  const { source, lang } = props;
-    return (
+  return (
-      <CopyButtonWrapper data={this.props.source}>
+    <CopyButtonWrapper data={source}>
-        {({ renderCopyButton }) => (
+      {({ renderCopyButton }) => (
-          <SampleControlsWrap>
+        <SampleControlsWrap>
-            <SampleControls>{renderCopyButton()}</SampleControls>
+          <SampleControls>{renderCopyButton()}</SampleControls>
-            <SourceCode lang={this.props.lang} source={this.props.source} />
+          <SourceCode lang={lang} source={source} />
-          </SampleControlsWrap>
+        </SampleControlsWrap>
-        )}
+      )}
-      </CopyButtonWrapper>
+    </CopyButtonWrapper>
-    );
+  );
-  }
+};
-}

src/utils/__tests__/openapi.test.ts

@@ -13,6 +13,7 @@ import {
   humanizeNumberRange,
   getContentWithLegacyExamples,
   getDefinitionName,
+  langFromMime,
 } from '../';
 
 import { FieldModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
@@ -1320,4 +1321,18 @@ describe('Utils', () => {
       expect(getDefinitionName()).toBeUndefined();
     });
   });
+
+  describe('langFromMime', () => {
+    test('should return correct lang name from content type', () => {
+      expect(langFromMime('application/xml')).toEqual('xml');
+      expect(langFromMime('application/x-xml')).toEqual('xml');
+      expect(langFromMime('application/csv')).toEqual('csv');
+      expect(langFromMime('application/x-csv')).toEqual('csv');
+      expect(langFromMime('text/plain')).toEqual('tex');
+      expect(langFromMime('text/x-plain')).toEqual('tex');
+      expect(langFromMime('application/plain')).toEqual('tex');
+
+      expect(langFromMime('text/some-type')).toEqual('clike');
+    });
+  });
 });

src/utils/highlight.ts

@@ -21,6 +21,7 @@ import 'prismjs/components/prism-scala.js';
 import 'prismjs/components/prism-sql.js';
 import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-yaml.js';
+import 'prismjs/components/prism-csv.js';
 
 const DEFAULT_LANG = 'clike';
 

src/utils/openapi.ts

@@ -395,6 +395,15 @@ export function langFromMime(contentType: string): string {
   if (contentType.search(/xml/i) !== -1) {
     return 'xml';
   }
+
+  if (contentType.search(/csv/i) !== -1) {
+    return 'csv';
+  }
+
+  if (contentType.search(/plain/i) !== -1) {
+    return 'tex';
+  }
+
   return 'clike';
 }