Reuse the editor across response bodies via portals

Author: pimterry

package-lock.json

@@ -87,6 +87,7 @@
     "react-dom": "^16.6.3",
     "react-ga": "^2.5.6",
     "react-monaco-editor": "^0.22.0",
+    "react-reverse-portal": "^1.0.1",
     "react-sortable-hoc": "^1.10.1",
     "react-split-pane": "^0.1.84",
     "react-virtualized": "^9.20.1",

package.json

@@ -107,9 +107,9 @@ export const Formatters: { [key in HtkContentType]?: Formatter } = {
 };
 
 interface ContentEditorProps {
-    children: Buffer;
+    children: Buffer | string;
     schema?: SchemaObject;
-    rawContentType: string | undefined;
+    rawContentType?: string;
     contentType: HtkContentType;
     contentObservable?: IObservableValue<string | undefined>;
 }
@@ -130,10 +130,17 @@ export class ContentEditor extends React.Component<ContentEditorProps> {
         return Formatters[this.props.contentType] || Formatters.text!;
     }
 
+    @computed
+    private get contentBuffer() {
+        return _.isString(this.props.children)
+            ? Buffer.from(this.props.children)
+            : this.props.children;
+    }
+
     @computed
     private get renderedContent() {
         if (isEditorFormatter(this.formatter)) {
-            return this.formatter.render(this.props.children);
+            return this.formatter.render(this.contentBuffer);
         }
     }
 
@@ -167,7 +174,7 @@ export class ContentEditor extends React.Component<ContentEditorProps> {
             }
         } else {
             const Viewer = this.formatter;
-            return <Viewer content={this.props.children} rawContentType={this.props.rawContentType} />;
+            return <Viewer content={this.contentBuffer} rawContentType={this.props.rawContentType} />;
         }
     }
 }

src/components/editor/content-editor.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { observable, autorun, action } from 'mobx';
 import { disposeOnUnmount, observer, inject } from 'mobx-react';
 import { SchemaObject } from 'openapi-directory';
+import * as portals from 'react-reverse-portal';
 
 import { ExchangeMessage } from '../../types';
 import { styled } from '../../styles';
@@ -39,6 +40,7 @@ export class ExchangeBodyCard extends React.Component<{
     direction: 'left' | 'right',
     collapsed: boolean,
     onCollapseToggled: () => void,
+    editorNode: portals.PortalNode
 }> {
 
     @observable
@@ -112,14 +114,15 @@ export class ExchangeBodyCard extends React.Component<{
                     <h1>{ title }</h1>
                 </header>
                 <EditorCardContent>
-                    <ContentEditor
+                    <portals.OutPortal<ContentEditor>
+                        node={this.props.editorNode}
                         rawContentType={message.headers['content-type']}
                         contentType={contentType}
                         contentObservable={this.currentContent}
                         schema={apiBodySchema}
                     >
                         {decodedBody}
-                    </ContentEditor>
+                    </portals.OutPortal>
                 </EditorCardContent>
             </ExchangeCard>
         :

src/components/view/exchange-body-card.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { get } from 'typesafe-get';
 import { action, observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
+import * as portals from 'react-reverse-portal';
 
 import { HtkResponse, Omit } from '../../types';
 import { styled } from '../../styles';
@@ -54,7 +55,9 @@ export class ExchangeDetailsPane extends React.Component<{
     exchange: HttpExchange,
     // Injected:
     uiStore?: UiStore,
-    accountStore?: AccountStore
+    accountStore?: AccountStore,
+    requestEditor: portals.PortalNode,
+    responseEditor: portals.PortalNode
 }> {
 
     @observable
@@ -92,6 +95,7 @@ export class ExchangeDetailsPane extends React.Component<{
                 title='Request Body'
                 direction='right'
                 message={request}
+                editorNode={this.props.requestEditor}
                 apiBodySchema={get(apiExchange, 'request', 'bodySchema')}
                 {...this.cardProps.requestBody}
             />);
@@ -121,6 +125,7 @@ export class ExchangeDetailsPane extends React.Component<{
                     title='Response Body'
                     direction='left'
                     message={response}
+                    editorNode={this.props.responseEditor}
                     apiBodySchema={get(apiExchange, 'response', 'bodySchema')}
                     {...this.cardProps.responseBody}
                 />);

src/components/view/exchange-details-pane.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-
-import { observable, autorun, action, runInAction } from 'mobx';
+import { autorun, action, observable, runInAction } from 'mobx';
 import { observer, disposeOnUnmount, inject } from 'mobx-react';
+import * as portals from 'react-reverse-portal';
 
 import { WithInjected } from '../../types';
 import { styled } from '../../styles';
@@ -15,6 +15,7 @@ import { EmptyState } from '../common/empty-state';
 import { ViewEventList, CollectedEvent } from './view-event-list';
 import { ExchangeDetailsPane } from './exchange-details-pane';
 import { TlsFailureDetailsPane } from './tls-failure-details-pane';
+import { ContentEditor } from '../editor/content-editor';
 
 interface ViewPageProps {
     className?: string,
@@ -27,6 +28,9 @@ class ViewPage extends React.Component<ViewPageProps> {
 
     @observable.ref selectedEvent: CollectedEvent | undefined = undefined;
 
+    requestEditor = portals.createPortalNode<ContentEditor>();
+    responseEditor = portals.createPortalNode<ContentEditor>();
+
     componentDidMount() {
         disposeOnUnmount(this, autorun(() => {
             if (!_.includes(this.props.interceptionStore.events, this.selectedEvent)) {
@@ -49,7 +53,11 @@ class ViewPage extends React.Component<ViewPageProps> {
                 Select an exchange to see the full details.
             </EmptyState>;
         } else if ('request' in this.selectedEvent) {
-            rightPane = <ExchangeDetailsPane exchange={this.selectedEvent} />;
+            rightPane = <ExchangeDetailsPane
+                exchange={this.selectedEvent}
+                requestEditor={this.requestEditor}
+                responseEditor={this.responseEditor}
+            />;
         } else {
             rightPane = <TlsFailureDetailsPane failure={this.selectedEvent} certPath={certPath} />;
         }
@@ -70,6 +78,16 @@ class ViewPage extends React.Component<ViewPageProps> {
                 />
                 { rightPane }
             </SplitPane>
+
+            {[this.requestEditor, this.responseEditor].map((editorNode, i) =>
+                <portals.InPortal key={i} node={editorNode}>
+                    <ContentEditor
+                        contentType='text'
+                        rawContentType=''
+                        children=''
+                    />
+                </portals.InPortal>
+            )}
         </div>;
     }