[Console Monaco Migration] Handle editor resize

packages/shared-ux/code_editor/impl/code_editor.tsx

@@ -112,6 +112,8 @@ export interface CodeEditorProps {
    */
   editorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
 
+  editorWillUnmount?: () => void;
+
   /**
    * Should the editor use the dark theme
    */
@@ -165,6 +167,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   overrideEditorWillMount,
   editorDidMount,
   editorWillMount,
+  editorWillUnmount,
   useDarkTheme: useDarkThemeProp,
   transparentBackground,
   suggestionProvider,
@@ -446,10 +449,12 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
 
   const _editorWillUnmount = useCallback<NonNullable<ReactMonacoEditorProps['editorWillUnmount']>>(
     (editor) => {
+      editorWillUnmount?.();
+
       const model = editor.getModel();
       model?.dispose();
     },
-    []
+    [editorWillUnmount]
   );
 
   useEffect(() => {

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

@@ -6,12 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { CodeEditor } from '@kbn/code-editor';
 import { css } from '@emotion/react';
-import { CONSOLE_LANG_ID, CONSOLE_THEME_ID } from '@kbn/monaco';
+import { CONSOLE_LANG_ID, CONSOLE_THEME_ID, monaco } from '@kbn/monaco';
 import { useSetInitialValue } from './use_set_initial_value';
 import { useSetupAutosave } from './use_setup_autosave';
+import { useResizeCheckerUtils } from './use_resize_checker_utils';
 import { useServicesContext, useEditorReadContext } from '../../../contexts';
 
 export interface EditorProps {
@@ -25,6 +26,19 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
     },
   } = useServicesContext();
   const { settings } = useEditorReadContext();
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
+
+  const editorDidMountCallback = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor) => {
+      setupResizeChecker(divRef.current!, editor);
+    },
+    [setupResizeChecker]
+  );
+
+  const editorWillUnmountCallback = useCallback(() => {
+    destroyResizeChecker();
+  }, [destroyResizeChecker]);
 
   const [value, setValue] = useState(initialTextValue);
 
@@ -41,13 +55,16 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
       css={css`
         width: 100%;
       `}
+      ref={divRef}
     >
       <CodeEditor
         languageId={CONSOLE_LANG_ID}
         value={value}
         onChange={setValue}
         fullWidth={true}
         accessibilityOverlayEnabled={settings.isAccessibilityOverlayEnabled}
+        editorDidMount={editorDidMountCallback}
+        editorWillUnmount={editorWillUnmountCallback}
         options={{
           fontSize: settings.fontSize,
           wordWrap: settings.wrapMode === true ? 'on' : 'off',

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx

@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { CodeEditor } from '@kbn/code-editor';
 import { css } from '@emotion/react';
 import { VectorTile } from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
 import { i18n } from '@kbn/i18n';
 import { EuiScreenReaderOnly } from '@elastic/eui';
-import { CONSOLE_OUTPUT_THEME_ID, CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
+import { CONSOLE_OUTPUT_THEME_ID, CONSOLE_OUTPUT_LANG_ID, monaco } from '@kbn/monaco';
 import { useEditorReadContext, useRequestReadContext } from '../../../contexts';
 import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile';
 import {
@@ -22,6 +22,7 @@ import {
   safeExpandLiteralStrings,
   languageForContentType,
 } from '../utilities';
+import { useResizeCheckerUtils } from './use_resize_checker_utils';
 
 export const MonacoEditorOutput: FunctionComponent = () => {
   const { settings: readOnlySettings } = useEditorReadContext();
@@ -30,6 +31,19 @@ export const MonacoEditorOutput: FunctionComponent = () => {
   } = useRequestReadContext();
   const [value, setValue] = useState('');
   const [mode, setMode] = useState('text');
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
+
+  const editorDidMountCallback = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor) => {
+      setupResizeChecker(divRef.current!, editor);
+    },
+    [setupResizeChecker]
+  );
+
+  const editorWillUnmountCallback = useCallback(() => {
+    destroyResizeChecker();
+  }, [destroyResizeChecker]);
 
   useEffect(() => {
     if (data) {
@@ -69,6 +83,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
       css={css`
         width: 100%;
       `}
+      ref={divRef}
     >
       <EuiScreenReaderOnly>
         <label htmlFor={'ConAppOutputTextarea'}>
@@ -81,10 +96,13 @@ export const MonacoEditorOutput: FunctionComponent = () => {
         languageId={mode}
         value={value}
         fullWidth={true}
+        editorDidMount={editorDidMountCallback}
+        editorWillUnmount={editorWillUnmountCallback}
         options={{
           fontSize: readOnlySettings.fontSize,
           wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off',
           theme: mode === CONSOLE_OUTPUT_LANG_ID ? CONSOLE_OUTPUT_THEME_ID : undefined,
+          automaticLayout: true,
         }}
       />
     </div>

src/plugins/console/public/application/containers/editor/monaco/use_resize_checker_utils.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useRef } from 'react';
+import { ResizeChecker } from '@kbn/kibana-utils-plugin/public';
+import { monaco } from '@kbn/monaco';
+
+/**
+ * Hook that returns functions for setting up and destroying a {@link ResizeChecker}
+ * for a Monaco editor.
+ */
+export const useResizeCheckerUtils = () => {
+  const resizeChecker = useRef<ResizeChecker | null>(null);
+
+  const setupResizeChecker = (
+    divElement: HTMLDivElement,
+    editor: monaco.editor.IStandaloneCodeEditor
+  ) => {
+    resizeChecker.current = new ResizeChecker(divElement);
+    resizeChecker.current.on('resize', () => {
+      editor.layout();
+    });
+  };
+
+  const destroyResizeChecker = () => {
+    resizeChecker.current!.destroy();
+  };
+
+  return { setupResizeChecker, destroyResizeChecker };
+};