Use monaco-editor in WfoJsonCodeBlock

Author: RichieB2B

.changeset/tango-orange-house.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Use monaco-editor in WfoJsonCodeBlock

packages/orchestrator-ui-components/package.json

@@ -41,6 +41,7 @@
         "@elastic/eui": "101.3.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
+        "@monaco-editor/react": "^4.7.0",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
         "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",

packages/orchestrator-ui-components/src/components/WfoJsonCodeBlock/WfoJsonCodeBlock.tsx

@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 
-import { EuiCodeBlock } from '@elastic/eui';
+import { editor } from 'monaco-editor';
 
-import { useWithOrchestratorTheme } from '@/hooks';
+import Editor from '@monaco-editor/react';
+import type { Monaco } from '@monaco-editor/react';
+
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 
 import { getStyles } from './styles';
 
@@ -11,6 +14,17 @@ export type WfoJsonCodeBlockProps = {
     isBasicStyle?: boolean;
 };
 
+const WFO_THEME = {
+    light: 'wfo-light',
+    dark: 'wfo-dark',
+};
+
+const MONACO_THEME: { light: editor.BuiltinTheme; dark: editor.BuiltinTheme } =
+    {
+        light: 'vs',
+        dark: 'vs-dark',
+    };
+
 /**
  * WfoJsonCodeBlock is used to render objects in JSON format
  * @param data
@@ -21,19 +35,87 @@ export const WfoJsonCodeBlock: FC<WfoJsonCodeBlockProps> = ({
     data,
     isBasicStyle = false,
 }) => {
+    const { theme, isDarkThemeActive } = useOrchestratorTheme();
     const { euiCodeBlockStyle, euiBasicCodeBlockStyle } =
         useWithOrchestratorTheme(getStyles);
 
     const json = JSON.stringify(data, null, 4);
 
+    const [editorHeight, setEditorHeight] = useState(0);
+    const [monacoInstance, setMonacoInstance] = useState<Monaco | undefined>(
+        undefined,
+    );
+
+    const addThemeToEditor = useCallback(
+        (monaco: Monaco) => {
+            monaco.editor.defineTheme(
+                isDarkThemeActive ? WFO_THEME.dark : WFO_THEME.light,
+                {
+                    base: isDarkThemeActive
+                        ? MONACO_THEME.dark
+                        : MONACO_THEME.light,
+                    inherit: true,
+                    rules: [
+                        {
+                            token: '',
+                            foreground: theme.colors.textPrimary.replace(
+                                '#',
+                                '',
+                            ),
+                            background:
+                                theme.colors.backgroundBasePlain.replace(
+                                    '#',
+                                    '',
+                                ),
+                        },
+                    ],
+                    colors: {
+                        'editor.foreground': theme.colors.textPrimary,
+                        'editor.background': theme.colors.backgroundBasePlain,
+                    },
+                },
+            );
+        },
+        [isDarkThemeActive, theme],
+    );
+
+    function editorDidMount(
+        editor: editor.IStandaloneCodeEditor,
+        monaco: Monaco,
+    ) {
+        const scrollHeight = editor.getScrollHeight();
+        setMonacoInstance(monaco);
+        setEditorHeight(Math.min(scrollHeight, 500));
+    }
+
+    useEffect(() => {
+        if (monacoInstance) {
+            addThemeToEditor(monacoInstance);
+            monacoInstance.editor.setTheme(
+                isDarkThemeActive ? WFO_THEME.dark : WFO_THEME.light,
+            );
+        }
+    }, [monacoInstance, isDarkThemeActive, addThemeToEditor, theme]);
+
     return (
-        <EuiCodeBlock
+        <Editor
+            height={editorHeight}
             css={isBasicStyle ? euiBasicCodeBlockStyle : euiCodeBlockStyle}
-            isCopyable={true}
+            theme={isDarkThemeActive ? WFO_THEME.dark : WFO_THEME.light}
+            options={{
+                readOnly: true,
+                lineNumbers: isBasicStyle ? 'off' : 'on',
+                scrollBeyondLastLine: false,
+                contextmenu: false,
+                minimap: { enabled: false },
+                mouseWheelZoom: true,
+                renderLineHighlight: 'none',
+                fontFamily: theme.font.family,
+            }}
+            beforeMount={addThemeToEditor}
+            onMount={editorDidMount}
             language="json"
-            lineNumbers={!isBasicStyle}
-        >
-            {json}
-        </EuiCodeBlock>
+            value={json}
+        />
     );
 };