wip

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

@@ -234,7 +234,7 @@ export const FitToContent = (params: CodeEditorStorybookParams) => {
         action('on change');
       }}
       value={value}
-      fitToContent={{ minHeight: 100, maxHeight: 500 }}
+      fitToContent={{ minLines: 3, maxLines: 5 }}
       options={{ automaticLayout: true }}
     />
   );

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

@@ -134,12 +134,12 @@ export interface CodeEditorProps {
   readOnlyMessage?: string;
 
   /**
-   * Enabled the editor to grow vertically to fit its content.
+   * Enables the editor to grow vertically to fit its content.
    * This option overrides the `height` option.
    */
   fitToContent?: {
-    minHeight?: number;
-    maxHeight?: number;
+    minLines?: number;
+    maxLines?: number;
   };
 }
 
@@ -449,7 +449,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
     };
   }, [placeholder, value, euiTheme, _editor]);
 
-  useFitToContent({ editor: _editor, fitToContent });
+  useFitToContent({ editor: _editor, fitToContent, isFullScreen });
 
   const { CopyButton } = useCopy({ isCopyable, value });
 
@@ -630,18 +630,23 @@ const useCopy = ({ isCopyable, value }: { isCopyable: boolean; value: string })
 const useFitToContent = ({
   editor,
   fitToContent,
+  isFullScreen,
 }: {
   editor: monaco.editor.IStandaloneCodeEditor | null;
-  fitToContent?: { minHeight?: number; maxHeight?: number };
+  isFullScreen: boolean;
+  fitToContent?: { minLines?: number; maxLines?: number };
 }) => {
   useEffect(() => {
     if (!editor) return;
 
     const updateHeight = () => {
-      if (fitToContent) {
+      if (fitToContent && !isFullScreen) {
         const contentHeight = editor.getContentHeight();
-        const minHeight = fitToContent.minHeight ?? 21; /* line height */
-        const maxHeight = fitToContent.maxHeight ?? contentHeight;
+        const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
+        const minHeight = (fitToContent.minLines ?? 1) * lineHeight;
+        const maxHeight = fitToContent.maxLines
+          ? fitToContent.maxLines * lineHeight
+          : contentHeight;
         editor.layout({
           height: Math.min(maxHeight, Math.max(minHeight, contentHeight)),
           width: editor.getLayoutInfo().width,
@@ -655,5 +660,5 @@ const useFitToContent = ({
     return () => {
       disposable.dispose();
     };
-  }, [editor, fitToContent]);
+  }, [editor, fitToContent, isFullScreen]);
 };

packages/shared-ux/code_editor/mocks/monaco_mock/index.tsx

@@ -106,7 +106,9 @@ export const MockedMonacoEditor = ({
   className?: string;
   ['data-test-subj']?: string;
 }) => {
-  editorWillMount?.(monaco);
+  useComponentWillMount(() => {
+    editorWillMount?.(monaco);
+  });
 
   useEffect(() => {
     editorDidMount?.(
@@ -133,3 +135,11 @@ export const MockedMonacoEditor = ({
     </div>
   );
 };
+
+const useComponentWillMount = (cb: Function) => {
+  const willMount = React.useRef(true);
+
+  if (willMount.current) cb();
+
+  willMount.current = false;
+};

src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx

@@ -88,7 +88,7 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfigProps>
         labelAppend={variablesDropdown}
       >
         <UrlTemplateEditor
-          fitToContent={{ minHeight: 21 * 5, maxHeight: 21 * 15 /* 21 is lineheight */ }}
+          fitToContent={{ minLines: 5, maxLines: 15 }}
           variables={variables}
           value={urlTemplate}
           placeholder={exampleUrl}