LG-5706: Fix stuck CodeEditor loading state (#3297)

* refactor(CodeEditor): normalize props handling and clean up unused styles in SearchPanel

- Introduced a `normalizedProps` object in CodeEditor to ensure all default values are included when spreading props.
- Updated the usage of props in various hooks to utilize `normalizedProps`.
- Removed unused `findInputStyles` from SearchPanel styles and component to streamline the code.

* changeset

* copilot feedback

* Add stories to assert correctness

Author: tsck

.changeset/tidy-bushes-fly.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/code-editor': patch
+---
+
+- Fixes stuck loading state
+- Includes minor small visual improvements

packages/code-editor/src/CodeEditor.stories.tsx

@@ -43,6 +43,17 @@ const meta: StoryMetaType<typeof CodeEditor> = {
     controls: {
       exclude: [...storybookExcludedControlParams, 'extensions'],
     },
+    generate: {
+      args: {
+        width: '100%',
+      },
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+        copyButtonAppearance: Object.values(CopyButtonAppearance),
+        enableLineNumbers: [true, false],
+      },
+    },
   },
   decorators: [
     (Story: StoryFn, context) => (
@@ -251,6 +262,35 @@ LiveExample.args = {
   ),
 };
 
+/** This asserts that the editor loads correctly when no defaults are provided. */
+export const NoDefaults = Template.bind({});
+NoDefaults.args = {
+  copyButtonAppearance: undefined,
+  customContextMenuItems: undefined,
+  enableClickableUrls: undefined,
+  enableCodeFolding: undefined,
+  enableLineNumbers: undefined,
+  enableLineWrapping: undefined,
+  enableSearchPanel: undefined,
+  baseFontSize: undefined,
+  forceParsing: undefined,
+  placeholder: undefined,
+  readOnly: undefined,
+  indentSize: undefined,
+  indentUnit: undefined,
+  isLoading: undefined,
+  defaultValue: undefined,
+  tooltips: undefined,
+  darkMode: undefined,
+  height: undefined,
+  maxHeight: '',
+  maxWidth: undefined,
+  minHeight: undefined,
+  minWidth: undefined,
+  preLoadedModules: undefined,
+  width: undefined,
+};
+
 export const Minimal = Template.bind({});
 Minimal.args = {
   enableLineNumbers: false,
@@ -416,3 +456,5 @@ export const WithPreLoadedModules: StoryObj<typeof CodeEditor> = {
     />
   ),
 };
+
+export const Generated = () => {};

packages/code-editor/src/CodeEditor/CodeEditor.tsx

@@ -90,7 +90,22 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
     const [undoDepth, setUndoDepth] = useState(0);
     const [redoDepth, setRedoDepth] = useState(0);
 
-    const { modules, isLoading } = useModules(props);
+    // Create normalized props object with all defaults applied
+    // This ensures that when we spread props, all default values are included
+    // Note: We spread props first, then override with destructured values (which have defaults applied)
+    // This ensures that if a prop is undefined in props, the default value is used
+    const normalizedProps: CodeEditorProps = {
+      ...props,
+      copyButtonAppearance,
+      enableSearchPanel,
+      extensions: consumerExtensions,
+      forceParsing: forceParsingProp,
+      isLoading: isLoadingProp,
+    };
+
+    const { modules, isLoading } = useModules({
+      ...normalizedProps,
+    });
 
     // Get formatting functionality
     const { formatCode, isFormattingAvailable } = useCodeFormatter({
@@ -102,11 +117,8 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
     const customExtensions = useExtensions({
       editorViewInstance: editorViewRef.current,
       props: {
-        ...props,
-        forceParsing: forceParsingProp,
+        ...normalizedProps,
         onChange: onChangeProp,
-        isLoading: isLoadingProp,
-        extensions: consumerExtensions,
         baseFontSize,
         /**
          * CodeEditorTooltip in particular renders outside of the LeafyGreenProvider
@@ -283,7 +295,7 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
 
     const searchPanelExtension = useSearchPanelExtension({
       props: {
-        ...props,
+        ...normalizedProps,
         darkMode,
         baseFontSize,
       },
@@ -335,7 +347,6 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
         !EditorView ||
         !Prec ||
         !commands ||
-        !searchModule ||
         !StateEffect
       ) {
         return;

packages/code-editor/src/SearchPanel/SearchPanel.styles.ts

@@ -88,7 +88,6 @@ export const findSectionStyles = css`
   display: flex;
   align-items: center;
   padding: ${spacing[200]}px;
-  height: 100%;
 `;
 
 export const replaceSectionStyles = css`
@@ -162,7 +161,3 @@ export const replaceInputContainerStyles = css`
 export const replaceButtonStyles = css`
   margin-left: ${spacing[100]}px;
 `;
-
-export const findInputStyles = css`
-  width: 100%;
-`;

packages/code-editor/src/SearchPanel/SearchPanel.tsx

@@ -32,7 +32,6 @@ import { Body, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 import {
   closeButtonStyles,
   findInputContainerStyles,
-  findInputStyles,
   findOptionsContainerStyles,
   findSectionStyles,
   getContainerStyles,
@@ -294,7 +293,6 @@ export function SearchPanel({
               aria-labelledby="find"
               onChange={handleSearchQueryChange}
               onKeyDown={handleFindInputKeyDown}
-              className={findInputStyles}
               value={searchString}
               // CodeMirror looks for this attribute to refocus when CMD+F is pressed and the panel is already open
               main-field="true"