From 1fbe9f3e044dbbc69cb341bd4b5a8bcce75a67c1 Mon Sep 17 00:00:00 2001
From: lqqyt2423 <974923609@qq.com>
Date: Wed, 24 Nov 2021 15:58:21 +0800
Subject: [PATCH] web addon: control response body line break

---
 addon/web/client/src/components/ViewFlow.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/addon/web/client/src/components/ViewFlow.tsx b/addon/web/client/src/components/ViewFlow.tsx
index 1b8b88a..6af4b09 100644
--- a/addon/web/client/src/components/ViewFlow.tsx
+++ b/addon/web/client/src/components/ViewFlow.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Button from 'react-bootstrap/Button'
+import FormCheck from 'react-bootstrap/FormCheck'
 import fetchToCurl from 'fetch-to-curl'
 import copy from 'copy-to-clipboard'
 import JSONPretty from 'react-json-pretty'
@@ -19,6 +20,7 @@ interface IState {
   flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview'
   copied: boolean
   requestBodyViewTab: 'Raw' | 'Preview'
+  responseBodyLineBreak: boolean
 }
 
 class ViewFlow extends React.Component<Iprops, IState> {
@@ -29,6 +31,7 @@ class ViewFlow extends React.Component<Iprops, IState> {
       flowTab: 'Headers',
       copied: false,
       requestBodyViewTab: 'Raw',
+      responseBodyLineBreak: false,
     }
   }
 
@@ -253,7 +256,19 @@ class ViewFlow extends React.Component<Iprops, IState> {
               !(response.body && response.body.byteLength) ? <div style={{ color: 'gray' }}>No response</div> :
                 !(flow.isTextResponse()) ? <div style={{ color: 'gray' }}>Not text response</div> :
                   <div>
-                    {flow.responseBody()}
+                    <div style={{ marginBottom: '20px' }}>
+                      <FormCheck
+                        inline
+                        type="checkbox"
+                        checked={this.state.responseBodyLineBreak}
+                        onChange={e => {
+                          this.setState({ responseBodyLineBreak: e.target.checked })
+                        }}
+                        label="自动换行"></FormCheck>
+                    </div>
+                    <div style={{ whiteSpace: this.state.responseBodyLineBreak ? 'pre-wrap' : 'pre' }}>
+                      {flow.responseBody()}
+                    </div>
                   </div>
           }