Merge remote-tracking branch 'origin/LG-5129/ce-undo-redo' into LG-5464/ce-cleanup

Author: tsck

packages/code-editor/README.md

@@ -13,8 +13,8 @@ import CloudIcon from '@leafygreen-ui/icon/dist/Cloud';
 
 import { CopyButtonAppearance } from './CodeEditor/CodeEditor.types';
 import { LanguageName } from './CodeEditor/hooks/extensions/useLanguageExtension';
-import { codeSnippets } from './CodeEditor/testing';
 import { IndentUnits } from './CodeEditor';
+import { codeSnippets } from './testing';
 import { CodeEditor, Panel } from '.';
 
 const MyTooltip = ({

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

@@ -2,8 +2,9 @@ import { forceParsing } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
 import { act, waitFor } from '@testing-library/react';
 
+import { renderCodeEditor } from '../testing/testUtils';
+
 import { LanguageName } from './hooks/extensions/useLanguageExtension';
-import { renderCodeEditor } from './testing/testUtils';
 import { CopyButtonAppearance } from './CodeEditor.types';
 import { CodeEditorSelectors } from '.';
 

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

@@ -6,14 +6,15 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { type EditorView } from '@codemirror/view';
+import { type EditorView, type ViewUpdate } from '@codemirror/view';
 
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Body } from '@leafygreen-ui/typography';
 
 import { CodeEditorCopyButton } from '../CodeEditorCopyButton';
 import { CopyButtonVariant } from '../CodeEditorCopyButton/CodeEditorCopyButton.types';
 
+import { useFormattingModuleLoaders } from './hooks/formatting/useFormattingModuleLoaders';
 import {
   getCopyButtonStyles,
   getEditorStyles,
@@ -75,12 +76,21 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
     const editorViewRef = useRef<EditorView | null>(null);
 
     // Load core modules
-    const moduleLoaders = useModuleLoaders(props);
-    const { isLoading, modules } = useLazyModules(moduleLoaders);
+    const coreModuleLoaders = useModuleLoaders(props);
+    const { isLoading: isLoadingCoreModules, modules: coreModules } =
+      useLazyModules(coreModuleLoaders);
+
+    // Load formatting modules
+    const formattingModuleLoaders = useFormattingModuleLoaders(language);
+    const {
+      isLoading: isLoadingFormattingModules,
+      modules: formattingModules,
+    } = useLazyModules(formattingModuleLoaders);
 
     // Get formatting functionality
     const { formatCode, isFormattingAvailable } = useCodeFormatter({
       props: { language, indentSize, indentUnit },
+      modules: formattingModules,
     });
 
     // Get custom extensions
@@ -95,7 +105,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
         darkMode: darkModeProp,
         baseFontSize: baseFontSizeProp,
       },
-      modules,
+      modules: coreModules,
     });
 
     // Get the current contents of the editor
@@ -127,12 +137,14 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
               insert: formattedContent,
             },
           });
+
           editorViewRef.current.dispatch(transaction);
 
+          onChangeProp?.(formattedContent);
+
           // Update controlled value if in controlled mode
           if (isControlled) {
             setControlledValue(formattedContent);
-            onChangeProp?.(formattedContent);
           }
         }
 
@@ -180,9 +192,9 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
     }, [modules]);
 
     useLayoutEffect(() => {
-      const EditorView = modules?.['@codemirror/view'];
-      const commands = modules?.['@codemirror/commands'];
-      const Prec = modules?.['@codemirror/state']?.Prec;
+      const EditorView = coreModules?.['@codemirror/view'];
+      const commands = coreModules?.['@codemirror/commands'];
+      const Prec = coreModules?.['@codemirror/state']?.Prec;
 
       if (!editorContainerRef?.current || !EditorView || !Prec || !commands) {
         return;
@@ -198,7 +210,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
 
           commands.history(),
 
-          EditorView.EditorView.updateListener.of(update => {
+          EditorView.EditorView.updateListener.of((update: ViewUpdate) => {
             if (isControlled && update.docChanged) {
               const editorText = getContents();
               onChangeProp?.(editorText);
@@ -216,7 +228,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
       });
 
       if (forceParsingProp) {
-        const Language = modules?.['@codemirror/language'];
+        const Language = coreModules?.['@codemirror/language'];
         const docLength = editorViewRef.current?.state.doc.length;
 
         if (Language && Language.forceParsing && docLength > 0) {
@@ -231,7 +243,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
       };
     }, [
       value,
-      modules,
+      coreModules,
       controlledValue,
       defaultValue,
       isControlled,
@@ -285,11 +297,13 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
               getContentsToCopy={getContents}
               className={getCopyButtonStyles(copyButtonAppearance)}
               variant={CopyButtonVariant.Button}
-              disabled={isLoadingProp || isLoading}
+              disabled={isLoadingProp || isLoadingCoreModules}
               data-lgid={CopyButtonLgId}
             />
           )}
-        {(isLoadingProp || isLoading) && (
+        {(isLoadingProp ||
+          isLoadingCoreModules ||
+          isLoadingFormattingModules) && (
           <div
             className={getLoaderStyles({
               theme,

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

@@ -3,7 +3,7 @@ import { renderHook } from '@testing-library/react';
 import {
   createMockAutoCompleteModule,
   createMockStateModule,
-} from '../../testing';
+} from '../../../testing';
 
 import { useAutoCompleteExtension } from './useAutoCompleteExtension';
 

packages/code-editor/src/CodeEditor/hooks/extensions/useAutoCompleteExtension.spec.ts

@@ -1,6 +1,9 @@
 import { renderHook } from '@testing-library/react';
 
-import { createMockLanguageModule, createMockStateModule } from '../../testing';
+import {
+  createMockLanguageModule,
+  createMockStateModule,
+} from '../../../testing';
 
 import { useCodeFoldingExtension } from './useCodeFoldingExtension';
 

packages/code-editor/src/CodeEditor/hooks/extensions/useCodeFoldingExtension.spec.tsx

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 
-import { createMockExtension, createMockStateModule } from '../../testing';
+import { createMockExtension, createMockStateModule } from '../../../testing';
 
 import { useExtension } from './useExtension';
 

packages/code-editor/src/CodeEditor/hooks/extensions/useExtension.spec.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 
-import { createComprehensiveFakeModules } from '../../testing';
+import { createComprehensiveFakeModules } from '../../../testing';
 
 import { useExtensions } from './useExtensions';
 

packages/code-editor/src/CodeEditor/hooks/extensions/useExtensions.spec.ts

@@ -4,7 +4,7 @@ import {
   createMockLanguageModule,
   createMockLezerHighlightModule,
   createMockStateModule,
-} from '../../testing';
+} from '../../../testing';
 
 import { useHighlightExtension } from './useHighlightExtension';
 

packages/code-editor/src/CodeEditor/hooks/extensions/useHighlightExtension.spec.ts

@@ -3,7 +3,7 @@ import { renderHook } from '@testing-library/react';
 import {
   createMockHyperLinkModule,
   createMockStateModule,
-} from '../../testing';
+} from '../../../testing';
 
 import { useHyperLinkExtension } from './useHyperLinkExtension';