diff --git a/src/components/PayloadSamples/Example.tsx b/src/components/PayloadSamples/Example.tsx
index 392e2138..07fb50b7 100644
--- a/src/components/PayloadSamples/Example.tsx
+++ b/src/components/PayloadSamples/Example.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
import { StyledPre } from '../../common-elements/samples';
import { ExampleModel } from '../../services/models';
-import { isJsonLike, langFromMime } from '../../utils';
+import { isJsonLike, isTextPlainLike, langFromMime } from '../../utils';
+import { jsonToTextPlain } from '../../utils/jsonToTextPlain';
import { JsonViewer } from '../JsonViewer/JsonViewer';
import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
import { ExampleValue } from './ExampleValue';
@@ -43,10 +44,13 @@ export function ExternalExample({ example, mimeType }: ExampleProps) {
if (isJsonLike(mimeType)) {
return ;
} else {
- if (typeof value === 'object') {
+ if (isTextPlainLike(mimeType)) {
+ value = jsonToTextPlain(value);
+ } else if (typeof value === 'object') {
// just in case example was cached as json but used as non-json
value = JSON.stringify(value, null, 2);
}
+
return ;
}
}
diff --git a/src/components/PayloadSamples/ExampleValue.tsx b/src/components/PayloadSamples/ExampleValue.tsx
index fa35e842..0aec9206 100644
--- a/src/components/PayloadSamples/ExampleValue.tsx
+++ b/src/components/PayloadSamples/ExampleValue.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
-import { isJsonLike, langFromMime } from '../../utils/openapi';
+import { isJsonLike, isTextPlainLike, langFromMime } from '../../utils/openapi';
import { JsonViewer } from '../JsonViewer/JsonViewer';
import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
+import { jsonToTextPlain } from '../../utils/jsonToTextPlain';
export interface ExampleValueProps {
value: any;
@@ -13,6 +14,13 @@ export function ExampleValue({ value, mimeType }: ExampleValueProps) {
if (isJsonLike(mimeType)) {
return ;
} else {
+ if (isTextPlainLike(mimeType)) {
+ value = jsonToTextPlain(value);
+ } else if (typeof value === 'object') {
+ // just in case example was cached as json but used as non-json
+ value = JSON.stringify(value, null, 2);
+ }
+
return ;
}
}
diff --git a/src/utils/__tests__/jsonToTextPlain.test.ts b/src/utils/__tests__/jsonToTextPlain.test.ts
new file mode 100644
index 00000000..99b6ad02
--- /dev/null
+++ b/src/utils/__tests__/jsonToTextPlain.test.ts
@@ -0,0 +1,14 @@
+import { jsonToTextPlain } from '../jsonToTextPlain';
+
+describe('Utils', () => {
+ test('jsonToTextPlain', () => {
+ const json = {
+ key: 'value',
+ anotherKey: 'anotherValue',
+ };
+
+ const actual = jsonToTextPlain(json);
+ const expected = '"key": "value"
' + '"anotherKey": "anotherValue"';
+ expect(actual).toEqual(expected);
+ });
+});
diff --git a/src/utils/highlight.ts b/src/utils/highlight.ts
index 07606d82..4a668243 100644
--- a/src/utils/highlight.ts
+++ b/src/utils/highlight.ts
@@ -65,7 +65,7 @@ export function mapLang(lang: string): string {
* Highlight source code string using Prism.js
* @param source source code to highlight
* @param lang highlight language
- * @return highlighted souce code as **html string**
+ * @return highlighted source code as **html string**
*/
export function highlight(source: string, lang: string = DEFAULT_LANG): string {
lang = lang.toLowerCase();
diff --git a/src/utils/jsonToTextPlain.ts b/src/utils/jsonToTextPlain.ts
new file mode 100644
index 00000000..ced8e724
--- /dev/null
+++ b/src/utils/jsonToTextPlain.ts
@@ -0,0 +1,16 @@
+/**
+ * Convert simple JSON to plain text.
+ * @param {object} json
+ * @return string
+ */
+export function jsonToTextPlain(json: object): string {
+ let result: string = '';
+
+ for (const key in json) {
+ if (json.hasOwnProperty(key)) {
+ result += `"${key}": "${json[key]}"\n`;
+ }
+ }
+
+ return result;
+}
diff --git a/src/utils/openapi.ts b/src/utils/openapi.ts
index a9bd35e2..86b8a944 100644
--- a/src/utils/openapi.ts
+++ b/src/utils/openapi.ts
@@ -130,10 +130,17 @@ export function isJsonLike(contentType: string): boolean {
return contentType.search(/json/i) !== -1;
}
+export function isTextPlainLike(contentType: string): boolean {
+ return contentType.search(/form-data/i) !== -1;
+}
+
export function langFromMime(contentType: string): string {
if (contentType.search(/xml/i) !== -1) {
return 'xml';
+ } else if (isTextPlainLike(contentType)) {
+ return 'markup';
}
+
return 'clike';
}