feat: Using CodeEditor for displaying response (more performant, no flicker :D)

renderer/components/ResponsePane/QueryResult/StyledWrapper.js

@@ -2,14 +2,9 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    border: solid 1px var(--color-codemirror-border);
     /* todo: find a better way */
     height: calc(100vh - 255px);
   }
-
-  textarea.cm-editor {
-    position: relative;
-  }
 `;
 
 export default StyledWrapper;

renderer/components/ResponsePane/QueryResult/index.js

@@ -1,56 +1,12 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'react';
+import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 
-let CodeMirror;
-const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-}
-
-const QueryResult = ({data, width}) => {
-  const [cmEditor, setCmEditor] = useState(null);
-  const editor = useRef();
-
-  useEffect(() => {
-    if (editor.current && !cmEditor) {
-      const _cmEditor = CodeMirror.fromTextArea(editor.current, {
-        value: '',
-        lineNumbers: true,
-        matchBrackets: true,
-        autoCloseBrackets: true,
-        mode: "application/ld+json",
-        foldGutter: true,
-        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-        readOnly: true,
-        lineWrapping: true
-      });
-
-      setCmEditor(_cmEditor);
-    }
-
-    if(editor.current && cmEditor && data) {
-      cmEditor.setValue(JSON.stringify(data, null, 2));
-    }
-
-    return () => {
-      if(cmEditor) {
-        cmEditor.toTextArea();
-        setCmEditor(null);
-      }
-    }
-  }, [editor.current, cmEditor, data]);
-
-
+const QueryResult = ({value, width}) => {
   return (
     <StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
       <div className="h-full">
-        <textarea
-          id="query-result"
-          ref={editor}
-          className="cm-editor"
-        >
-        </textarea>
+        <CodeEditor value={value || ''} />
       </div>
     </StyledWrapper>
   );

renderer/components/ResponsePane/index.js

@@ -26,7 +26,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
         return (
           <QueryResult
             width={rightPaneWidth}
-            data={response.data}
+            value={response.data ? JSON.stringify(response.data, null, 2) : ''}
           />
         );
       }