fix(schema): use editor for rendering schema export instead of LG code for performance COMPASS-8980 (#6731)

Author: Anemy

package-lock.json

@@ -308,9 +308,7 @@ describe('Automatically connecting from the command line', function () {
 
       await browser.execute(() => {
         // eslint-disable-next-line @typescript-eslint/no-var-requires
-        (require('electron').ipcRenderer as any).call(
-          'test:show-connect-window'
-        );
+        require('electron').ipcRenderer.call('test:show-connect-window');
       });
 
       // Switch to the other window

packages/compass-e2e-tests/tests/auto-connect.test.ts

@@ -135,7 +135,9 @@ describe('Collection schema tab', function () {
 
       const exportSchemaContent = browser.$(Selectors.ExportSchemaOutput);
       await exportSchemaContent.waitForDisplayed();
-      const text = await browser.$(Selectors.ExportSchemaOutput).getText();
+      const text = await browser.getCodemirrorEditorText(
+        Selectors.ExportSchemaOutput
+      );
       const parsedText = JSON.parse(text);
       delete parsedText.$defs;
       expect(parsedText).to.deep.equal({

packages/compass-e2e-tests/tests/collection-schema-tab.test.ts

@@ -1407,6 +1407,7 @@ type MultilineEditorProps = EditorProps & {
   editorClassName?: string;
   actionsClassName?: string;
   onExpand?: () => void;
+  onCopy?: () => void;
   expanded?: boolean;
 };
 
@@ -1420,6 +1421,7 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
       editorClassName,
       actionsClassName,
       darkMode: _darkMode,
+      onCopy,
       onExpand,
       expanded,
       ...props
@@ -1430,6 +1432,9 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
     const containerRef = useRef<HTMLDivElement>(null);
     const editorRef = useRef<EditorRef>(null);
 
+    const onCopyRef = useRef(onCopy);
+    onCopyRef.current = onCopy;
+
     useImperativeHandle(
       ref,
       () => {
@@ -1441,6 +1446,7 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
             return editorRef.current?.unfoldAll() ?? false;
           },
           copyAll() {
+            onCopyRef.current?.();
             return editorRef.current?.copyAll() ?? false;
           },
           prettify() {

packages/compass-editor/src/editor.tsx

@@ -75,6 +75,7 @@
     "@mongodb-js/compass-collection": "^4.49.2",
     "@mongodb-js/compass-components": "^1.34.2",
     "@mongodb-js/compass-connections": "^1.50.2",
+    "@mongodb-js/compass-editor": "^0.36.2",
     "@mongodb-js/compass-field-store": "^9.25.2",
     "@mongodb-js/compass-logging": "^1.6.2",
     "@mongodb-js/compass-telemetry": "^1.4.2",

packages/compass-schema/package.json

@@ -2,7 +2,7 @@ import React, { type ChangeEvent, useCallback } from 'react';
 import { connect } from 'react-redux';
 import {
   Button,
-  Code,
+  KeylineCard,
   ModalBody,
   ModalHeader,
   ModalFooter,
@@ -15,6 +15,7 @@ import {
   Label,
   CancelLoader,
 } from '@mongodb-js/compass-components';
+import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
 import type { RootState } from '../stores/store';
 import {
@@ -35,11 +36,17 @@ const contentContainerStyles = css({
   paddingBottom: spacing[400],
 });
 
-const codeStyles = css({
+const codeEditorContainerStyles = css({
   maxHeight: `${spacing[1600] * 4 - spacing[800]}px`,
   overflow: 'auto',
 });
 
+const codeStyles = css({
+  '& .cm-editor': {
+    paddingLeft: spacing[2],
+  },
+});
+
 const footerStyles = css({
   display: 'flex',
   gap: spacing[200],
@@ -139,17 +146,22 @@ const ExportSchemaModal: React.FunctionComponent<{
               onCancel={onCancelSchemaExport}
             />
           )}
-          {exportStatus === 'complete' && (
-            <Code
-              id="export-schema-content"
-              data-testid="export-schema-content"
-              language="json"
-              className={codeStyles}
-              copyable={true}
-              onCopy={onExportedSchemaCopied}
-            >
-              {exportedSchema ?? 'Empty'}
-            </Code>
+          {exportStatus === 'complete' && exportedSchema && (
+            <KeylineCard className={codeEditorContainerStyles}>
+              <CodemirrorMultilineEditor
+                data-testid="export-schema-content"
+                language="json"
+                className={codeStyles}
+                copyable={true}
+                showAnnotationsGutter={false}
+                showLineNumbers={false}
+                formattable={false}
+                initialJSONFoldAll={false}
+                readOnly
+                text={exportedSchema}
+                onCopy={onExportedSchemaCopied}
+              ></CodemirrorMultilineEditor>
+            </KeylineCard>
           )}
           {exportStatus === 'error' && errorMessage && (
             <ErrorSummary