feat(CodeEditor): introduce code-editor package and CodeEditor component (#3122)

* LG-5067: Create basic CodeEditor component/package (#2858)

* feat(code-editor): initialize code editor package with README, configuration, and basic components

* feat(code-editor): enhance CodeEditor component with new props and dependencies

* refactor(code-editor): change import statements to use 'type' for CodeEditorProps

* feat(code-editor): update CodeEditor stories with args and argTypes for better customization

* Start test suite

* Fix deps

* feat(code-editor): refactor extensions handling using Compartment for dynamic configuration

* feat(tests): enhance CodeEditor tests with improved selector handling and new assertions

* feat(code-editor): rename 'value' prop to 'initialValue' for consistency and clarity

* feat(code-editor): rename 'initialValue' prop to 'defaultValue' for consistency and update related tests

* feat(code-editor): enable active line highlighting based on prop for improved editor usability

* feat(tests): enable forceParsing test and update mock implementation for consistency

* feat(tests): refactor CodeEditor tests to use new renderCodeEditor utility and update selectors

* refactor(tests): move MutationObserver mock to testUtils for better organization

* feat(docs): update README to include new CodeEditor properties and test utilities

* refactor(tests): update typing test to use userEvent and export editor utilities

* refactor(tests): update CodeEditor interactions and test utilities for improved clarity

* test: update forceParsing method test to remove async and improve clarity

* changeset

* feat(docs): add CodeEditor package information to README

* feat: expand exports in index.ts to include additional CodeEditor types and functions

* refactor(tests): move renderCodeEditor utility to CodeEditor.testUtils for better organization

* feat(tests): add TestUtils for improved test rendering utilities

* fix: correct rendering description in tests and update README for CodeEditor example
refactor: extract CodeMirror dimensions into constants for better maintainability
docs: enhance CodeMirror types documentation with detailed descriptions
chore: remove unused package from ALL_PACKAGES.ts

* docs(code-editor): update README with CodeEditor example and default value

* chore(package): update node engine version to >= 18.20.8 (#2868)

* chore(package): update node engine version to >= 18.22.0

* chore(package): update node engine version to >= 18.20.8

* fix(package): update main and types paths in package.json

* chore(package): add @lg-tools/build to devDependencies

* chore(package): update build script in package.json

* feat(button): add exports field for module resolution

* feat(code-editor): add exports field for module resolution
fix(button): remove exports field from package.json

* LG-5069: Add indentation configuration to `CodeEditor` (#2873)

* feat(code-editor): implement indent unit and size configuration

* refactor(code-editor): reorder indent size and unit props in CodeEditorProps

* Changeset

* docs(code-editor): update README to include indentSize and indentUnit properties

* LG-5073: Add tooltip support to CodeEditor (#2874)

* feat(code-editor): implement indent unit and size configuration

* refactor(code-editor): reorder indent size and unit props in CodeEditorProps

* feat(code-editor): add tooltip functionality with customizable content

* feat(code-editor): add getAllBySelector and queryAllBySelector functions for element retrieval

* feat(code-editor): add Line and Tooltip selectors to CodeEditorSelectors

* feat(code-editor): enhance tooltip content handling for string and React elements

* feat: add @storybook/test dependency and implement TooltipOnHover story

- Updated package.json to include @storybook/test as a dev dependency.
- Enhanced CodeEditor.stories.tsx with a new TooltipOnHover story to test tooltip visibility on hover.
- Implemented play function to simulate mouse movement and verify tooltip appearance.

* feat(code-editor): export IndentUnits and Tooltip types from CodeEditor

* feat(code-editor): add tooltips property to editor and enhance selector functions

* changeset

* fix(code-editor): reset defaultValue to an empty string in story configuration

* CR changes

* docs(createTooltipExtension): update tooltip parameter descriptions to reflect one-based indexing

* feat(code-editor): implement diagnostics-based tooltips in CodeEditor

- Replaced the existing tooltip extension with a new diagnostics-based tooltip extension.
- Updated CodeEditorTooltip interface to include severity and length properties.
- Introduced CodeEditorTooltipSeverity enum for tooltip severity levels (info, warning, error, hint).
- Modified the createDiagnosticsTooltipExtension function to handle multiple tooltips as diagnostics.
- Updated the CodeEditor component to utilize the new tooltip extension.
- Adjusted the tooltip rendering logic to support React components and strings.
- Updated relevant type definitions and imports across the codebase.

* refactor(code-editor): remove commented-out line for clarity

* LG-5073: Adds support for custom CodeMirror extensions to `CodeEditor` (#2883)

* feat(code-editor): add custom extension support

* Bring lockfile in line with integration

* Manually fix lock file

* One more time, fix lock

* LG-5078: Add language support to `CodeEditor` (#2895)

* WIP

* feat(codeMirror): implement language extensions for CodeMirror

* feat(codeEditor): add language prop for syntax highlighting support

* fix(codeEditor): rename customExtensions to consumerExtensions for clarity

* refactor(codeEditor): remove unused CODE_MIRROR_HEIGHT constant

* feat(codeEditor): export language extensions and code snippets from index

* fix(codeEditor): rename langNames to languageNames for consistency

* feat(codeEditor): add code snippets for multiple programming languages

* feat(codeEditor): add support for multiple programming languages with corresponding code snippets

* feat(codeEditor): implement language extensions and tooltips for enhanced code editing experience

* docs(codeEditor): update README and types for clarity on language extensions and tooltips

* feat(codeEditor): update language handling and improve type exports

* refactor(codeEditor): streamline extension setup and separate language handling

* test(codeEditor): add tests for language support including tsx and jsx

* refactor(codeEditor): remove unused import from test file

* changeset

* refactor(createCodeMirrorLanguageExtension): remove functional comment

* fix(codeEditor.stories): correct typo in language property name

* refactor(codeEditor): rename variable for clarity and consistency

* LG-5101/5102: Updates editor and syntax highlight styling (#2916)

* First pass

* style(CodeEditor): increase gutter width from 40px to 52px

* feat(CodeEditor): add custom fold gutter functionality and integrate icon support

* style(CodeEditor): adjust padding for line elements and remove redundant padding

* feat(CodeEditor): get height and passed down styling working as expected

* Broken state

* Fix darkmode

* chore(tooltip): remove unused createTooltipExtension file

* refactor(CodeEditor): remove active line highlighting feature and related tests

* docs(CodeMirror): update comments to include styling information reference

* feat(code-editor): add syntax highlighting and tooltip extensions

* changeset

* refactor(code-editor): rename createCodeMirrorLanguageExtensions to createCodeMirrorLanguageExtension and update code snippets formatting

* fix(code-editor): fix broken test

* refactor(code-editor): remove unused styles and enhance editor sizing props

* feat(code-editor): add responsive sizing props for height and width

* refactor(code-editor): reorganize test utilities and update imports

* fix(tsconfig): add missing reference to palette

* refactor(ALL_PACKAGES): remove unused crawler package

* refactor(code-editor): update padding and background color handling in theme extension

* refactor(testUtils): update import path for CodeEditor modules

* refactor(code-editor): update darkMode argType handling in story metadata

* test(code-editor): update line numbers visibility check in spec

* feat(code-editor): add getEditorStyles function for dynamic styling

* refactor(code-editor): simplify styling logic by using getEditorStyles function

* fix(code-editor): apply !important to selection background for correct styling

* feat(package.json): add exports for testing module

* feat(code-editor): move code snippets into testing utilities export and update docs

* [LG-5379] perf(CodeEditor): Reduce bundle size by 31% with lazy module loading (#2992)

* feat(code-editor): add useCodeMirrorExtensionCompartment hook for dynamic extension management

* feat(useLazyModules): implement lazy loading of modules with error handling

* feat(useModuleLoaders): implement dynamic module loading for CodeEditor

* refactor(useLazyModules, useModuleLoaders): simplify type definitions for module interfaces

* feat(useModuleLoaders): implement dynamic loading of language extensions based on specified language

* Revert "feat(useModuleLoaders): implement dynamic loading of language extensions based on specified language"

This reverts commit 41793f294e1e5c18c68a3a1f12c0814e2593e898.

* feat(useExtension): add hook for managing dynamic CodeMirror extensions

* feat(CodeEditor): implement dynamic loading of extensions and refactor extension handling

* refactor(CodeEditor): remove unused useCodeMirrorExtensionCompartment hook

* Rename util to hooks

* refactor(CodeEditor): move hooks to hooks directory

* feat(CodeEditor): implement useHyperLinkExtension for managing clickable URLs

* refactor(CodeEditor): simplify useHyperLinkExtension by directly passing module

* feat(CodeEditor): add useLineWrapExtension for managing line wrapping functionality

* feat(CodeEditor): implement useIndentExtension for managing indentation functionality

* docs(useExtension): update documentation for clarity and remove redundant comments

* refactor(CodeEditor): remove unused EditorState import

* feat(CodeEditor): implement useFoldGutterExtension for code folding functionality

* refactor(CodeEditor): replace createTooltipsExtension with useTooltipExtension and remove unused code

* refactor(CodeEditor): move onChange callback definition for clarity and improve forceParsing condition

* feat(CodeEditor): implement useLanguageExtension for dynamic language support

* refactor(code-editor): remove createLanguageExtension and related exports

* refactor(CodeEditor): remove LanguageName export from codeMirrorExtensions

* refactor(useModuleLoaders): update LanguageName import to use useLanguageExtension

* refactor(CodeEditor.stories): remove LanguageName import from CodeEditor

* refactor(CodeEditor): replace createHighlightExtension with useHighlightExtension for syntax highlighting

* refactor(CodeEditor): replace createThemeExtension with useThemeExtension and remove unused files

* refactor(CodeEditor): reorganize extensions and update imports for consistency

* refactor(index.ts): remove unused createCodeMirror extensions and update exports

* Working state

* working state

* feat(CodeEditor): add line number extension and integrate with editor

* feat(CodeEditor): add autocomplete extension and update dependencies

* feat(CodeEditor): add read-only extension support

* feat(CodeEditor): integrate read-only extension support

* refactor(CodeEditor): remove commented-out CodeMirror implementation

* refactor(CodeEditor): update imports to use @codemirror packages and clean up types

* fix(useModuleLoaders): include language check for loader initialization

* refactor(CodeEditor): rename useFoldGutterExtension to useCodeFoldingExtension and update imports

* refactor(CodeEditor): update extension hooks to accept configuration objects

* docs(extensions): add detailed JSDoc comments for various CodeMirror extension hooks

* refactor(extensions): export LanguageName alongside useLanguageExtension

* refactor(extensions): enhance JSDoc comments for clarity and consistency across extensions

* docs(README): update CodeMirror extension hooks section for clarity and consistency

* refactor(useModuleLoaders): enhance documentation and improve module loading logic

* refactor(useLazyModules): improve error handling and improve documentation

* feat(CodeEditor): add loading state and styles

- Introduced `isLoading` prop to render the editor in a loading state.
- Updated the CodeEditor component to display a loading message using the Body component from @leafygreen-ui/typography.
- Enhanced styles for the loading state using new styles from CodeEditor.styles.
- Updated TypeScript definitions to include the new `isLoading` prop.
- Added dependency on @leafygreen-ui/typography for loading text styling.

* refactor(CodeEditor): implement imperative handle for editor view access

* refactor(testUtils): initialize editorView as null and update reference assignment

* refactor(CodeEditor): remove unused useMergeRefs import

* feat(CodeEditor): add placeholder extension for enhanced user experience

- Introduced `usePlaceholderExtension` hook to manage placeholder functionality in the CodeEditor.
- Integrated the placeholder extension into the CodeEditor component, allowing for customizable placeholder text.
- Updated the editor's rendering logic to include the new placeholder extension.

* test(CodeEditor): enhance tests with async handling and wait for editor view

- Updated all tests in CodeEditor.spec.tsx to use async/await for better handling of asynchronous operations.
- Introduced waitForEditorView utility in testUtils.tsx to ensure the editor view is available before running assertions.
- Improved test reliability by ensuring the editor is fully initialized before performing checks.

* refactor(CodeEditor): streamline extension hooks by consolidating parameters

- Refactored various extension hooks in the CodeEditor to accept a unified parameter structure, improving consistency and reducing redundancy.
- Updated the `useAutoCompleteExtension`, `useCodeFoldingExtension`, `useHighlightExtension`, `useHyperLinkExtension`, `useIndentExtension`, `useLanguageExtension`, `useLineNumbersExtension`, `useLineWrapExtension`, `usePlaceholderExtension`, `useReadOnlyExtension`, `useThemeExtension`, and `useTooltipExtension` to utilize the new props and modules structure.
- Enhanced the integration of props within the extensions, allowing for more flexible and maintainable code.

* refactor(CodeEditor): rename editor view access methods for clarity

- Updated the imperative handle in the CodeEditor to rename `getEditorView` to `getEditorViewInstance` for better clarity.
- Adjusted the parameter names in various extension hooks to consistently use `editorViewInstance` instead of `editorView`, enhancing code readability and maintainability.
- Ensured all related references and types were updated accordingly to reflect these changes.

* refactor(CodeEditor): enhance documentation and remove redundant comments

- Updated documentation for various hooks in the CodeEditor to improve clarity and consistency.
- Removed unnecessary comments in `useLazyModules` to streamline the code.
- Revised comments in `useModuleLoaders` and other extension hooks to better reflect their functionality and parameters.

* refactor(CodeEditor): update hook exports and enhance type definitions

- Changed the export structure in `index.ts` to streamline hook exports from the CodeEditor.
- Updated `useModuleLoaders.ts` to export the `CodeEditorModules` interface, improving type visibility.
- Adjusted the code snippet in `codeSnippets.ts` for consistency in object declaration.

* fix(CodeEditor): enhance README documentation

- Fixed a typo in the language name from `javascipt` to `javascript` in the README.
- Added new optional properties to the CodeEditor documentation, including `className`, `darkMode`, `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, and `isLoading`.
- Updated existing property descriptions for clarity and consistency.

* refactor(CodeEditor): streamline hook exports and remove redundant index file

- Simplified the export structure in `index.ts` by consolidating hook exports from the `hooks` directory.
- Removed the now-unnecessary `extensions/index.ts` file, enhancing code organization and clarity.
- Ensured `usePlaceholderExtension` is correctly imported and utilized in `CodeEditor.tsx`.

* refactor(CodeEditor): small refactor

* refactor(CodeEditor): reintroduce CodeEditorModules type export

- Added the `CodeEditorModules` type export back to `index.ts` for improved type visibility.
- Removed the previous export statement from `useModuleLoaders.ts` to streamline the code structure.

* refactor(CodeEditor): add LanguageName type export

- Introduced the `LanguageName` type export in `index.ts` to enhance type visibility and support for language-specific features in the CodeEditor.

* refactor(CodeEditor): enhance useLazyModules documentation and loading logic

- Improved the documentation for the `useLazyModules` hook, providing clearer descriptions of parameters, return values, and usage examples.
- Updated the loading logic to ensure modules are loaded concurrently and to provide better feedback on loading states, enhancing the overall usability of the hook.

* changeset

* feat(CodeEditor): add baseFontSize prop and update documentation

- Introduced a new optional `baseFontSize` prop to the CodeEditor, allowing customization of the font size in the editor.
- Updated the README to include the new `baseFontSize` prop in the documentation.
- Adjusted required props in the documentation to reflect changes in the CodeEditor component.
- Enhanced storybook configuration to support `baseFontSize` as a selectable control.

* docs(CodeEditor): update README to clarify stateModule requirements

- Enhanced the documentation for the `stateModule` parameter, specifying its necessity for creating compartments and the lazy-loading behavior.
- Updated required modules for various extensions to include `@codemirror/state`, ensuring accurate representation of dependencies in the README.

* fix(CodeEditor): update baseFontSize type to specific values

- Changed the type of the `baseFontSize` prop in the CodeEditorProps interface from a generic BaseFontSize to specific values of 14 or 16, enhancing type safety and clarity for users.

* refactor(CodeEditor): remove unused imports in CodeEditor.types.ts and useThemeExtension.ts

- Removed the unused `BaseFontSize` import from `CodeEditor.types.ts` to clean up the code.
- Eliminated the duplicate import of `useDarkMode` in `useThemeExtension.ts`, ensuring a more streamlined import structure.

* feat(CodeEditor): add useExtensions hook for aggregated CodeMirror extensions

- Introduced a new `useExtensions` hook that aggregates and configures all CodeMirror extensions for the CodeEditor component.
- Updated the README to document the new hook, including its parameters, return values, and an example usage.
- This enhancement streamlines the integration of multiple extensions, improving the overall editor configuration process.

* refactor(CodeEditor): streamline CodeEditor component by consolidating extension usage

- Refactored the CodeEditor component to utilize a new `useExtensions` hook, simplifying the integration of multiple CodeMirror extensions.
- Removed individual extension hooks from the component, enhancing readability and maintainability.
- Updated the `useLazyModules` hook to use a reducer for better state management during module loading.
- Improved cleanup logic for extensions to ensure proper resource management.

* refactor(CodeEditor): simplify imports and consolidate extension hooks

- Removed individual extension hooks from the CodeEditor component, further streamlining the code.
- Consolidated imports for `useExtensions`, `useLazyModules`, and `useModuleLoaders` to enhance readability and maintainability.
- Continued to improve the overall structure of the CodeEditor component following recent refactoring efforts.

* refactor(CodeEditor): adjust order of code folding extension in useExtensions hook

- Moved the code folding extension to follow the line numbers extension in the useExtensions hook to ensure proper functionality.
- This change maintains the intended behavior of the editor while improving the organization of extensions.

* refactor(CodeEditor): update README with new import structure and example usage

- Revised the README to reflect the consolidated imports for `useExtensions`, `useLazyLoadedModules`, and `useModuleLoaders`.
- Updated the example usage to utilize the new props structure, enhancing clarity and usability for developers integrating the CodeEditor component.

* refactor(CodeEditor): enhance type safety with HTMLElementWithCodeMirror interface

- Introduced a new interface, HTMLElementWithCodeMirror, to provide a more specific type for the DOM node used in the CodeMirror editor.
- Updated the CodeEditor component to utilize this new type, improving type safety and clarity in the code.
- Simplified the cleanup logic by directly accessing the _cm property on the DOM node.

* test(code-editor): add extension testing utilities and comprehensive test coverage (#3036)

* feat(CodeEditor): add extension testing utilities and comprehensive test coverage

- Introduced specialized testing utilities for CodeMirror extension hooks to streamline testing processes.
- Added comprehensive test cases for various extension hooks including useAutoCompleteExtension, useCodeFoldingExtension, useHighlightExtension, and others.
- Enhanced documentation for testing utilities to improve clarity and usability.
- Implemented new test files for lazy module loading and module loaders to ensure robust functionality and error handling.

* changeset

* refactor(CodeEditor): rename testing utilities for consistency and clarity

- Updated testing utility function names from `createFake*` to `createMock*` for better clarity and consistency across the codebase.
- Enhanced documentation in the README to reflect the changes in utility names and their usage.
- Adjusted all relevant test files to utilize the new naming convention, ensuring uniformity in the testing framework.

* refactor(CodeEditor): update useLazyModules tests to remove unnecessary dependencies

- Modified test cases in `useLazyModules.spec.ts` to eliminate redundant module dependencies, enhancing clarity and focus on the lazy loading functionality.
- Updated the export structure in `index.ts` to include `createLanguageModuleFactory`, improving the organization of testing utilities.

* [LG-5095] feat(CodeEditor): adds `CodeEditorCopyButton` (#3041)

* feat(CodeEditor): add CodeEditorCopyButton component with copy functionality and visual feedback

- Implemented CodeEditorCopyButton to allow users to copy text content to the clipboard.
- Added visual feedback for copy success with tooltip support.
- Integrated accessibility features including aria-labels and screen reader announcements.
- Enhanced styling for different button variants (Button and IconButton).
- Included tests for rendering, copy functionality, and keyboard interactions.
- Updated package.json to include new dependencies for the component.

* refactor(CodeEditorCopyButton): rename getContents prop to getContentsToCopy for clarity

- Updated the CodeEditorCopyButton component to rename the `getContents` prop to `getContentsToCopy`, enhancing clarity in its purpose.
- Adjusted all related tests and documentation to reflect the new prop name, ensuring consistency across the codebase.

* refactor(CodeEditorCopyButton): update prop name for clarity and remove unused isPanelVariant

- Changed the `isPanelVariant` prop to `variant` in the CodeEditorCopyButton component for improved clarity.
- Removed the unused `isPanelVariant` prop from the CodeEditorCopyButtonProps interface, streamlining the code and enhancing type safety.

* refactor(CodeEditorCopyButton): simplify clipboard copy logic

- Streamlined the copyToClipboard function by removing the fallback method for copying text, relying solely on the navigator.clipboard API for improved performance and clarity.
- This change enhances the code's readability and maintains the same functionality for copying text to the clipboard.

* refactor(CodeEditorCopyButton): enhance tooltip functionality and remove execCommand fallback

- Improved tooltip handling by introducing state management for tooltip visibility, ensuring better user experience during copy actions.
- Removed the fallback to document.execCommand for clipboard operations, streamlining the copy logic to rely solely on the modern Clipboard API.
- Updated tests to reflect changes in tooltip behavior and removed outdated fallback tests, enhancing overall test coverage and clarity.

* refactor(CodeEditorCopyButton): introduce CopyButtonTrigger component and enhance tests

- Created a new `CopyButtonTrigger` component to handle button rendering for copy actions, supporting both Button and IconButton variants.
- Updated the `CodeEditorCopyButton` to utilize the new `CopyButtonTrigger`, improving code organization and readability.
- Enhanced tests for `CodeEditorCopyButton` and added comprehensive tests for `CopyButtonTrigger`, ensuring proper rendering and accessibility features.
- Adjusted tooltip hover logic in tests to account for timing, improving test reliability.

* [LG-5444] feat(code-editor): adds copy button to editor (#3043)

* feat(CodeEditor): enhance copy button functionality and styling

- Introduced `copyButtonAppearance` prop to control the visibility of the copy button in the CodeEditor.
- Implemented styles for different copy button appearances: 'hover', 'persist', and 'none'.
- Updated tests to verify the rendering behavior of the copy button based on the new prop.
- Refactored CodeEditor component to integrate the new copy button functionality and ensure proper rendering based on user interactions.

* feat(CodeEditor): enhance styling for code folding and theme extensions

- Updated the `useCodeFoldingExtension` to use dynamic spacing for icon margins and set custom dimensions for icons.
- Enhanced the `useThemeExtension` by adding padding to improve layout consistency.

* changeset

* refactor(CodeEditor): remove unused import from CodeEditor.types.ts

- Eliminated the unused `copyButtonClassName` import to clean up the code and improve maintainability.

* feat(CodeEditor): add copyButtonAppearance prop and update README

- Introduced a new optional `copyButtonAppearance` prop to control the visibility of the copy button in the CodeEditor, allowing for 'hover', 'persist', and 'none' options.
- Updated the README to include the new `copyButtonAppearance` prop and its description.
- Enhanced existing property descriptions for clarity and consistency.

* refactor(CodeEditor): rename getContents prop for clarity

- Updated the `CodeEditor` component to rename the `getContents` prop to `getContentsToCopy`, improving clarity regarding its functionality.
- Ensured consistency with the recent changes in the `CodeEditorCopyButton` component.

* refactor(CodeEditor): use constant for custom icon size in code folding extension

- Updated the `useCodeFoldingExtension` hook to define a constant for the custom icon size, improving code readability and maintainability.
- Replaced hardcoded icon dimensions with the new constant to ensure consistency across the component.

* refactor(CodeEditor): update copyButtonClassName for consistency

- Renamed the `copyButtonClassName` to `lg-code_editor-code_editor_copy_button` to enhance naming consistency across the CodeEditor component.
- This change improves clarity and aligns with the updated styling conventions.

* refactor(CodeEditor): standardize icon size in useCodeFoldingExtension

- Updated the `useCodeFoldingExtension` hook to use a constant for the icon size, replacing hardcoded values for improved consistency and maintainability.
- Adjusted icon dimensions to align with the new constant, enhancing code readability.

* [LG-5094] feat(code-editor): add panel component for toolbar functionality (#3047)

* feat(CodeEditor): enhance copy button functionality and styling

- Introduced `copyButtonAppearance` prop to control the visibility of the copy button in the CodeEditor.
- Implemented styles for different copy button appearances: 'hover', 'persist', and 'none'.
- Updated tests to verify the rendering behavior of the copy button based on the new prop.
- Refactored CodeEditor component to integrate the new copy button functionality and ensure proper rendering based on user interactions.

* refactor(CodeEditor): remove unused import from CodeEditor.types.ts

- Eliminated the unused `copyButtonClassName` import to clean up the code and improve maintainability.

* feat(CodeEditor): add CodeEditorContext for internal state management

- Introduced a new `CodeEditorContext` to provide internal context values to child components, enhancing state management within the CodeEditor.
- Implemented `CodeEditorProvider` for context provisioning and `useCodeEditorContext` hook for easy access to context values.
- This addition supports better organization and encapsulation of editor-related functionalities.

* feat(CodeEditor): introduce Panel component for enhanced toolbar functionality

- Added a new `Panel` component to the CodeEditor, providing a toolbar interface with options for formatting, copying, and custom actions.
- Integrated the `Panel` into the CodeEditor, allowing for a customizable user experience with buttons for common actions like undo, redo, and download.
- Updated the README to include documentation for the new `Panel` component and its properties.
- Enhanced TypeScript definitions to support the new component and its props.
- Included storybook examples to demonstrate the usage of the `Panel` component.

* changeset

* fix(Panel): disable dark menu rendering in the Panel component

- Updated the Panel component to set `renderDarkMenu` to false, ensuring the dark menu is not rendered.
- This change improves the consistency of the user interface in light mode.

* feat(CodeEditor): integrate Panel component and enhance CodeEditor functionality

- Added the `Panel` component to the `CodeEditor`, allowing for a customizable toolbar with options for formatting, copying, and additional actions.
- Updated `CodeEditor` to accept a `panel` prop, enabling the rendering of the `Panel` within the editor.
- Enhanced TypeScript definitions to support the new `panel` prop and its interaction with the `copyButtonAppearance` prop.
- Modified styling in `useThemeExtension` to accommodate the new panel layout.
- Removed the `Panel.stories.tsx` file as part of the integration process.

* refactor(CodeEditor, Panel): reorganize props for improved clarity and consistency

- Rearranged the props in both `CodeEditor` and `Panel` components for better readability and logical grouping.
- Ensured that related props are positioned together, enhancing the overall structure of the components.
- Maintained existing functionality while improving the code organization.

* docs(CodeEditor): update README to include new `panel` prop details

- Added documentation for the optional `panel` prop in the CodeEditor, which allows rendering a toolbar interface at the top of the editor.
- Provided a description of the `Panel` component's functionality and its available options, enhancing the clarity of the README.

* test(Panel): add comprehensive unit tests for Panel component functionality

- Introduced a new test suite for the Panel component, covering various aspects including rendering, button functionality, and accessibility.
- Implemented tests for the format, copy, and secondary menu buttons, ensuring they behave as expected when interacted with.
- Verified the integration with the CodeEditor context and confirmed proper handling of props like `showFormatButton`, `showCopyButton`, and custom secondary buttons.
- Included tests for edge cases, such as handling undefined callback functions and empty custom button arrays, to enhance robustness.

* Updated changeset

* feat(CodeEditorCopyButton): enhance icon fill color handling and simplify styles

- Introduced a new `getIconFill` function to dynamically determine the icon fill color based on the theme and copied state.
- Simplified the CSS styles for the copy button by removing redundant selectors and consolidating transition properties.
- Updated the `CopyButtonTrigger` component to accept an `iconFill` prop, allowing for more flexible icon color management.

* refactor(CodeEditor): rename getContents prop for clarity

- Updated the `CodeEditor` component to rename the `getContents` prop to `getContentsToCopy`, improving clarity regarding its functionality.
- Ensured consistency with the recent changes in the `CodeEditorCopyButton` component.

* feat(CodeEditor): enhance copy button functionality and styling

- Introduced `copyButtonAppearance` prop to control the visibility of the copy button in the CodeEditor.
- Implemented styles for different copy button appearances: 'hover', 'persist', and 'none'.
- Updated tests to verify the rendering behavior of the copy button based on the new prop.
- Refactored CodeEditor component to integrate the new copy button functionality and ensure proper rendering based on user interactions.

* refactor(CodeEditor): remove unused import from CodeEditor.types.ts

- Eliminated the unused `copyButtonClassName` import to clean up the code and improve maintainability.

* refactor(CodeEditor): rename getContents prop to getContentsToCopy

- Updated the `getContents` prop in the `CodeEditorCopyButton` to `getContentsToCopy` for improved clarity regarding its purpose.
- This change aligns with recent naming conventions and enhances the overall consistency of the CodeEditor component.

* docs(CodeEditor): add SecondaryButtonConfig section to README

- Introduced a new section in the README for `SecondaryButtonConfig`, detailing its properties including `aria-label`, `glyph`, `href`, `label`, and `onClick`.
- This addition enhances documentation clarity and provides developers with comprehensive information on configuring secondary buttons in the CodeEditor component.

* fix(Panel): update copy button accessibility labels in tests

- Changed the accessibility label for the copy button in tests from 'Copy text' to 'Copy' to align with the actual implementation.
- Updated related test cases to ensure consistency and accuracy in verifying the copy button's presence and functionality.

* refactor(Panel): update panel styles for consistency and clarity

- Replaced hardcoded height with a constant for better maintainability.
- Adjusted padding values to use spacing tokens for consistency with design system.
- Renamed grid area from 'children' to 'innerContent' to improve clarity in layout structure.

* feat(Panel): add support for custom secondary button properties

- Introduced a new `disabled` property to the `SecondaryButtonConfig` interface, allowing buttons to be disabled.
- Updated the `Panel` component to handle the `disabled` state for custom secondary buttons.
- Enhanced the README documentation for `SecondaryButtonConfig` to include the new `disabled` property, improving clarity for developers.

* fix(CodeEditor): remove href from custom secondary button configuration

- Eliminated the `href` property from the custom secondary button configuration in the CodeEditor stories, streamlining the button setup.
- This change enhances clarity and aligns with the updated button properties.

* fix(Panel): update grid area naming and type definitions

- Renamed the grid area from 'innerContent' to 'inner-content' for consistency with CSS naming conventions.
- Updated type definitions in `Panel.types.ts` to use `ReactElement` and `ReactNode` directly, enhancing clarity and type safety for the `glyph` and `innerContent` properties.
- Changed the `title` property type to `ReactNode` to allow for more flexible content rendering in the panel header.

* [LG-5128] feat(code-editor): add code formatting functionality with multi-language support (#3058)

* feat(CodeEditor): integrate code formatting functionality with Prettier and WASM support

- Added support for code formatting in the CodeEditor component using Prettier-based and WASM-based formatters.
- Introduced `useCodeFormatter` and `useFormattingModuleLoaders` hooks for dynamic loading of formatting modules based on the selected language.
- Updated the CodeEditor context to include formatting capabilities, allowing users to format code directly within the editor.
- Enhanced the README to document the new formatting features and supported languages.
- Added new dependencies for Prettier plugins and WASM formatters in the package configuration.

* refactor(CodeEditor): update imports for CodeEditorModules type

- Changed imports of `CodeEditorModules` from `useModuleLoaders` to `moduleLoaders.types` across various hooks for improved clarity and consistency.
- Updated the export statement for `CodeEditorModules` in the hooks index file to align with the new import structure.

* feat(Panel): enhance rendering with code formatting capabilities

- Updated the `CodeEditorProvider` in the `Panel` component to include `formatCode` and `isFormattingAvailable` properties, enabling code formatting features.
- Added a mock for `formatCode` in the test suite to ensure proper testing of the new functionality.
- Ensured that `mockGetContents` returns the expected content during tests for consistent behavior.

* feat(CodeEditor): add comprehensive tests for code formatting and module loaders

- Introduced unit tests for the `useCodeFormatter` hook, covering various programming languages and formatting scenarios, including error handling and custom options.
- Added tests for the `useFormattingModuleLoaders` hook to ensure correct loading of formatting modules for supported languages.
- Enhanced test coverage for edge cases, such as unsupported languages and missing modules, ensuring robust functionality of the formatting features.

* test(CodeEditor): suppress console warnings and errors in tests

- Mocked console.warn and console.error methods in the test suite to suppress expected warnings related to missing formatting modules and React testing library deprecation notices.
- This enhancement improves test output clarity and focuses on relevant test results without unnecessary console noise.

* feat(CodeEditor): update code formatting support and integrate new plugins

- Removed external Prettier plugin support for Java, Kotlin, PHP, and Ruby due to browser compatibility issues, transitioning to WASM-based formatting for Java and C++.
- Added type declarations for Kotlin and Ruby Prettier plugins to enhance type safety.
- Updated the `useCodeFormatter` and `useFormattingModuleLoaders` hooks to reflect the changes in formatting capabilities and module loading logic.
- Enhanced the `CodeEditor` stories to demonstrate the new formatting features with updated language settings.

* refactor(CodeEditor): clean up useFormattingModuleLoaders hook

- Removed commented-out code related to Node.js environment checks and external Prettier plugin support for Java, enhancing code clarity and maintainability.
- Streamlined the logic within the `useFormattingModuleLoaders` hook to focus on active functionality.

* fix(CodeEditor): update language handling and import logic

- Changed the default language in the CodeEditor stories from Java to C++, ensuring the correct language is displayed in the example.
- Refactored the `useFormattingModuleLoaders` and `useModuleLoaders` hooks to define stable import functions outside the hooks, preventing infinite re-renders and improving performance.
- Updated the logic for loading language-specific modules, enhancing clarity and maintainability of the code.

* refactor(CodeEditor): remove unsupported Prettier plugins and clean up code

- Eliminated support for Kotlin, PHP, Ruby, and Rust Prettier plugins due to browser compatibility issues, streamlining the codebase.
- Removed related type declarations and test cases for these plugins, enhancing clarity and maintainability.
- Updated the `useFormattingModuleLoaders` hook to reflect the removal of unsupported languages, ensuring a more focused implementation.

* test(CodeEditor): enhance unit tests for useCodeFormatter hook

- Added comprehensive tests for various programming languages, ensuring correct formatting behavior for JavaScript, TypeScript, JSON, CSS, HTML, Java, C++, C#, Go, and Python.
- Implemented checks for unsupported languages, confirming that appropriate warnings are issued and original code is returned.
- Enhanced error handling tests to verify graceful handling of missing modules and formatting errors.
- Updated the `useCodeFormatter` hook to enforce multi-line formatting for JSON by adjusting the default print width.

* feat(CodeEditor): add JSX and TSX support in stories and code snippets

- Introduced new story exports for JSX and TSX languages in CodeEditor stories, enhancing the demonstration of language support.
- Added corresponding code snippets for JSX and TSX to the testing module, providing examples for users and improving test coverage.

* fix(CodeEditor): update language handling and formatting for C# support

- Changed the default language in the CodeEditor stories from C++ to C#, ensuring accurate representation in the example.
- Enhanced the formatting logic in the `useCodeFormatter` hook to apply Microsoft style settings for C#.
- Updated test cases to reflect the new formatting expectations for C#, improving overall test coverage and accuracy.

* refactor(CodeEditor): streamline formatting options in useCodeFormatter hook

- Removed direct tabWidth and useTabs options from the FormattingOptions interface, deriving them from CodeEditor props instead.
- Updated the useCodeFormatter hook to consistently apply editor configuration for tab width and tab usage across various formatting functions.
- Enhanced code clarity by centralizing formatting option logic, improving maintainability and reducing redundancy.

* feat(CodeEditor): enhance formatting capabilities and modularize code

- Introduced a new `formatters.ts` file to centralize formatting logic for various languages, improving code organization and maintainability.
- Added `useFormattingModuleLoaders` hook to dynamically load formatting modules based on the selected language, enhancing flexibility.
- Updated `useCodeFormatter` to utilize the new formatting functions and options, ensuring consistent behavior across different languages.
- Removed the deprecated `useCodeFormatter` implementation, streamlining the codebase and reducing redundancy.
- Added comprehensive tests for the new formatting logic, ensuring correct behavior across supported languages and handling of edge cases.

* feat(CodeEditor): modularize formatting functions for improved code organization

- Introduced helper functions `formatWithPrettier` and `formatWithWasm` to encapsulate formatting logic for Prettier and WASM-based formatters, enhancing code clarity and reusability.
- Updated the `formatCode` function to utilize these new helpers, streamlining the formatting process for JavaScript, TypeScript, JSON, CSS, HTML, and other languages.
- Improved error handling by providing consistent warning messages when required modules are not loaded, ensuring better user feedback during formatting operations.

* chore(typings): remove deprecated prettier-plugins type declaration file

- Deleted the `prettier-plugins.d.ts` file as it is no longer needed, streamlining the typings and improving code organization.

* refactor(CodeEditor): improve code organization and clarity in CodeEditor component

- Updated comments for better clarity and understanding of the code structure, including loading core modules, formatting functionality, and custom extensions.
- Removed outdated comments to streamline the code and enhance readability.
- Ensured consistent documentation style throughout the CodeEditor component for improved maintainability.

* refactor(Panel): remove outdated comments for improved clarity

- Deleted unnecessary comments in the Panel component to enhance code readability and maintainability.
- Streamlined the code by removing comments that no longer provide value, ensuring a cleaner codebase.

* feat(CodeEditor): add FormattingOptions type to enhance formatting capabilities

- Introduced the `FormattingOptions` type to the CodeEditor module, improving type safety and clarity for formatting configurations.
- This addition supports ongoing enhancements to the formatting logic and options within the CodeEditor component.

* refactor(CodeEditor): streamline code formatting documentation and functionality

- Updated the README to clarify the integration of code formatting with the `Panel` component and the `useCodeFormatter` hook.
- Simplified the list of supported languages and removed outdated details regarding formatting backends.
- Enhanced the `useCodeFormatter` hook to derive formatting options directly from the CodeEditor props, improving usability and consistency.
- Removed unnecessary module loading logic from the `CodeEditor` component, ensuring a cleaner implementation.
- Improved test coverage for the `useCodeFormatter` hook by removing redundant module dependencies in tests.

* docs(CodeEditor): enhance README with detailed code formatting methods

- Expanded the documentation to outline three distinct methods for formatting code: via the Panel component, programmatically using the CodeEditor ref, and through the standalone useCodeFormatter hook.
- Included code examples for each method to improve clarity and usability for developers.
- Updated the section on FormattingOptions to reflect comprehensive support for various languages, enhancing the overall understanding of formatting capabilities.

* Passing tests - but not testing correctly

* test(CodeEditor): enhance unit tests for useCodeFormatter hook

- Updated tests to mock WASM formatters for better compatibility with Jest, ensuring accurate testing of formatting functionality across multiple languages.
- Simplified test cases by removing conditional checks for module availability, directly asserting expected outcomes for formatted code.
- Improved coverage for various languages including Java, C++, C#, Go, and Python, ensuring consistent behavior and correctness in formatting operations.

* feat(CodeEditor): introduce comprehensive code formatting system

- Added a powerful code formatting functionality supporting multiple languages, including JavaScript, TypeScript, CSS, HTML, JSON, Java, C++, C#, Go, and Python.
- Integrated a format button in the Panel component with automatic language detection and introduced a `formatCode` method for programmatic use.
- Created a standalone `useCodeFormatter` hook for independent formatting capabilities.
- Enhanced the Panel and CodeEditor components with new context integrations and formatting options.
- Introduced new dependencies including `prettier` and WASM-based formatters for various languages.
- Automatically manages dependencies and provides fallback behavior for unsupported languages.

* chore(CodeEditor): remove prettier-plugin-java references and clean up dependencies

- Removed `prettier-plugin-java` from the package.json and pnpm-lock.yaml files as it is no longer needed.
- Updated tests and type definitions to eliminate references to `prettier-plugin-java`, ensuring a cleaner codebase.
- Streamlined the CodeEditor module by focusing on essential dependencies for formatting functionality.

* fix(Panel): update grid-template-areas for consistency

- Changed the grid-template-areas property in Panel.styles.ts from 'title innerContent buttons' to 'title inner-content buttons' for improved consistency in naming conventions.

* fix(CodeEditor): update language in WithPanel story from HTML to TSX

- Changed the language in the WithPanel story from LanguageName.html to LanguageName.tsx to reflect the correct code snippet usage.

* refactor(Panel): simplify IconButton component in format trigger

- Removed unnecessary props from the IconButton in the Panel component's format trigger, enhancing code readability and maintainability.

* refactor(Panel): remove unused isFormattingAvailable from context

- Eliminated the unused `isFormattingAvailable` property from the `useCodeEditorContext` in the Panel component, streamlining the code and improving clarity.

* docs(CodeEditor): update README and code structure for module loading

- Enhanced the README to include detailed instructions on module loading requirements for code formatting, emphasizing the use of `useFormattingModuleLoaders` and `useLazyModules`.
- Updated the `CodeEditor` component to integrate formatting module loaders, ensuring that necessary modules are loaded based on the selected language.
- Refined the `useCodeFormatter` hook to utilize pre-loaded modules, improving the overall formatting functionality and user experience.

* refactor(useCodeFormatter): rename state variable for clarity

- Updated the state variable from `isFormattingReady` to `isFormattingAvailable` in the `useCodeFormatter` hook for improved clarity and consistency in naming conventions.
- Adjusted the corresponding useEffect to reflect the new variable name, enhancing code readability.

* docs(README): streamline module loading instructions for formatting

- Removed references to `useFormattingModuleLoaders` and `useLazyModules` from the README to simplify the example for the `useCodeFormatter` hook.
- Added a comment to clarify the need for language-specific modules in the formatting process, enhancing the documentation's clarity and usability.

* docs(README): simplify code formatting example by removing module loader references

- Streamlined the README example for the `useCodeFormatter` hook by removing references to `useFormattingModuleLoaders` and `useLazyModules`, enhancing clarity and usability for users.

* docs(README): update code formatting instructions to clarify module loading

- Revised the README to emphasize that consumers must load and provide the required modules for code formatting, removing references to `useFormattingModuleLoaders` and `useLazyModules`.
- Updated code examples to reflect the new approach, enhancing clarity and usability for users.

* refactor(CodeEditor): optimize module loading with useMemo

- Introduced useMemo to combine core and formatting module loaders in the CodeEditor component, improving performance by memoizing the merged loaders.
- Updated the useLazyModules call to utilize the memoized loaders, enhancing the efficiency of module loading during rendering.

* test(CodeEditor): enhance unit tests for useCodeFormatter with mock modules

- Refactored unit tests for the `useCodeFormatter` hook to utilize a new `createMockModules` function, simplifying the setup of mock modules for various languages.
- Updated tests to verify that formatting functions are called correctly and return expected results, ensuring robust coverage for JavaScript, TypeScript, JSON, CSS, HTML, Java, C++, C#, Go, and Python.
- Improved error handling tests to ensure original code is returned when formatting fails, enhancing the reliability of the formatter.

* refactor(CodeEditor): enhance type safety and structure in formatting functions

- Introduced improved type definitions for Prettier and WASM formatter configurations, enhancing type safety and flexibility.
- Refactored formatting functions to use destructured parameters, improving readability and maintainability.
- Updated the `formatCode` function to accept an object for parameters, streamlining the function signature and enhancing clarity.
- Adjusted related utility functions to align with the new type definitions, ensuring consistency across the formatting module.

* refactor(CodeEditor): simplify formatting options and streamline code formatting functionality

- Removed the `FormattingOptions` type and associated options from the `formatCode` function, adopting opinionated defaults for consistency across languages.
- Updated README documentation to reflect the changes in formatting options and usage examples.
- Refactored related formatting functions to eliminate unnecessary parameters, enhancing clarity and maintainability.

* refactor(CodeEditor): enhance type safety in update listener

- Updated the type definition for the update listener in the CodeEditor component to include `ViewUpdate`, improving type safety and clarity in the handling of editor updates.
- This change ensures better integration with the CodeMirror library and enhances maintainability of the code.

* refactor(CodeEditor): improve configuration structure and type safety in formatting functions

- Refactored the `createPrettierConfig` and `createJavaScriptConfig` functions to use destructured parameters, enhancing readability and maintainability.
- Updated the `formatCode` function to align with the new configuration structure, improving clarity in the formatting process.
- Enhanced type safety in the `areModulesLoaded` function by adopting a destructured parameter approach, ensuring better integration with the modules.
- Adjusted related utility functions to maintain consistency across the formatting module.

* refactor(CodeEditor): streamline change handling in editor updates

- Added a call to `onChangeProp` after dispatching the transaction in the CodeEditor component, ensuring that changes are communicated immediately.
- Removed the redundant `onChangeProp` call within the controlled value update block, simplifying the change handling logic and improving code clarity.

* docs(README): enhance clarity and structure in code editor documentation

- Updated section headers for consistency and improved readability.
- Removed outdated module loading requirements and examples, streamlining the documentation.
- Added detailed notes on required props and modules for various extensions, enhancing user understanding.
- Clarified usage examples and parameters for better guidance on implementing the CodeEditor features.

* refactor(CodeEditor): add FormattingOptions type to formatting module

- Introduced the `FormattingOptions` type to enhance type safety and flexibility in the formatting module.
- Updated exports in the formatting index to include the new type, ensuring better integration with formatting functions.

* docs(README): update link formatting for clarity in code editor documentation

- Changed the link to MongoDB.design to a header format for improved visibility and consistency.
- This adjustment enhances the overall structure of the README, aligning with recent documentation updates.

* refactor(CodeEditor): separate core and formatting module loading for improved clarity

- Refactored the CodeEditor component to distinctly load core and formatting modules, enhancing code organization and readability.
- Updated the handling of module loading states to reflect the separation, ensuring better management of loading indicators.
- Adjusted the usage of modules in various functionalities to align with the new loading structure, improving maintainability.

* [LG-5464] chore(code-editor): remove unused dependencies and standardize test syntax (#3065)

* refactor(tests): update test cases to use 'test' instead of 'it'

- Replaced all instances of 'it' with 'test' in the test files for consistency across the codebase.
- This change improves readability and aligns with the preferred testing syntax in the project.

* chore: remove unused Codemirror dependencies and clean up imports

- Removed '@uiw/react-codemirror' from package.json and pnpm-lock.yaml as it is no longer needed.
- Cleaned up imports in useThemeExtension.ts to eliminate references to the removed dependency.
- Updated testUtils.tsx to use ChangeSpec from '@codemirror/state' instead of the removed '@uiw/react-codemirror'.

* [LG-5129] feat(code-editor): add undo/redo functionality #3063 (#3091)

* feat(CodeEditor): add undo and redo functionality to the editor

- Implemented handleUndo and handleRedo methods to allow users to undo and redo editor actions.
- Updated CodeEditorHandle interface to include undo and redo methods, enhancing the editor's capabilities.
- Improved user experience by providing feedback when undo/redo actions are unavailable.

* feat(CodeEditor): add undo and redo methods to context and editor

- Introduced undo and redo functions in the CodeEditorContext to enhance user interaction.
- Updated the CodeEditor component to integrate these new functionalities, improving the overall editing experience.

* feat(Panel): integrate undo and redo functionality in the editor panel

- Added handleUndoClick and handleRedoClick methods to the Panel component to utilize the new undo and redo functions from the CodeEditorContext.
- Updated the onClick handlers for the Undo and Redo menu items to call the new methods, enhancing user interaction and experience.

* feat(CodeEditor): implement undo and redo methods in tests and utilities

- Added tests for undo and redo functionalities in the CodeEditor component, ensuring they work correctly with content changes.
- Enhanced test utilities to include getContent, undo, and redo methods, providing a more comprehensive testing framework for the editor.
- Updated the Panel component tests to verify the integration of undo and redo actions in the user interface, improving overall test coverage.

* feat(CodeEditor): enhance imperative handle API and testing utilities

- Updated the imperative handle test to expose a complete API, including methods for undo, redo, getContents, formatCode, and getEditorViewInstance.
- Added a new utility function, getHandle, to retrieve the editor handle instance for testing imperative methods.
- Modified the insertText function to default to inserting text at the end of the document, improving usability in tests.

* feat(CodeEditor): enhance documentation and add imperative API details

- Updated the README to clarify the various methods for formatting code in the CodeEditor, emphasizing the programmatic access through the CodeEditor ref.
- Introduced a new section detailing the imperative API, including methods for content manipulation, formatting, and undo/redo operations.
- Added examples for using the imperative methods, improving the documentation for developers.
- Adjusted the formatting options description to enhance clarity and usability.

* changeset

* chore: remove obsolete clever-editors-undo changeset file

* refactor(CodeEditor): reorganize testing utilities

- Moved `codeSnippets` to a dedicated testing file for better organization and accessibility.
- Updated import paths in the CodeEditor stories and specs to reflect the new location of `codeSnippets`.
- Introduced comprehensive test utilities for CodeMirror extension hooks, enhancing the testing framework's capabilities.

* feat(CodeEditor): add comprehensive testing utilities for Panel component

- Introduced `renderPanel` function to facilitate rendering of the Panel component with necessary context for testing.
- Added `PanelSelectors` for consistent access to panel elements in tests.
- Implemented various interaction methods for testing user interactions with the Panel, including format and copy button actions.
- Enhanced README documentation to include new testing utilities and examples for better guidance on testing Panel interactions.

* refactor(CodeEditor): update import paths for testing utilities

- Changed import paths in various extension spec files to reflect the new location of testing utilities, improving organization and accessibility.
- Ensured consistency across all extension tests by standardizing the import structure.

* refactor(CodeEditor): update module references for undo/redo functionality

- Changed references from `modules` to `coreModules` in the `handleUndo` and `handleRedo` functions to align with the updated module loading structure.
- Improved code clarity and maintainability by ensuring consistent usage of the core modules for command handling.

* refactor(CodeEditor): update testing utilities and documentation

- Renamed mock functions to default stub functions for clarity in the CodeEditor context.
- Updated the README to reflect changes in the testing utilities, including new context configuration options for overriding default functions in tests.
- Enhanced test cases to utilize the new stub functions, improving consistency and maintainability in testing the Panel component.

* refactor(CodeEditor): update import structure in useIndentExtension tests

- Reorganized import statements in the useIndentExtension.spec.ts file to improve clarity and maintainability.
- Moved the IndentUnits import to align with the updated structure of testing utilities.

* refactor(CodeEditor): update Panel tests to use default context functions

- Removed the use of mockPanelFunctions in Panel tests, replacing them with defaultPanelContextFunctions for improved clarity and consistency.
- Updated test cases to directly utilize context configuration for undo and redo actions, enhancing maintainability and readability of the tests.

* [LG-5455] feat(code-editor): add download functionality with smart file extensions #3066 (#3097)

* feat(CodeEditor): add download functionality for editor content

- Introduced a new method to download the current editor content as a file, with the extension determined by the selected programming language.
- Updated the CodeEditorHandle and CodeEditorContext interfaces to include the new downloadContent method.
- Added a mapping of language names to their corresponding file extensions to facilitate the download process.

* feat(Panel): implement download functionality in the editor panel

- Added a new handleDownloadClick method to the Panel component to trigger the downloadContent function from the CodeEditorContext.
- Updated the onClick handler for the Download menu item to use the new method, enhancing the user experience by allowing content downloads directly from the panel.

* feat(tests): add unit tests for download functionality in CodeEditor and Panel

- Implemented comprehensive tests for the download feature in the CodeEditor, verifying correct filename generation based on language and handling of empty content.
- Enhanced Panel tests to ensure the downloadContent function is called when the download menu item is clicked, including handling cases where the function is not available.
- Improved test coverage for the download functionality, ensuring robustness and reliability in the editor's user experience.

* feat(CodeEditor): add comprehensive download functionality for editor content

- Introduced a `downloadContent` method to the CodeEditor ref for programmatic file downloads, supporting various file extensions based on the editor's language.
- Integrated a download button in the Panel's secondary menu for direct content downloads, with proper filename handling.
- Enhanced context support for child components via `CodeEditorContext`, allowing custom UI implementations for downloads.
- Implemented content validation to prevent downloads of empty or whitespace-only content, providing user-friendly warnings.
- Updated TypeScript definitions and added extensive tests to ensure robust functionality and user experience.

* docs(README): update Panel component description and add download functionality details

- Enhanced the description of the Panel component to include the new download button and its integration with the CodeEditor's functionality.
- Updated the properties table to reflect the addition of the download feature, including the `onDownloadClick` callback and its behavior.
- Added a new section detailing the `downloadContent` method, including examples and supported file extensions for improved documentation clarity.

* refactor(tests): streamline Panel tests for download functionality

- Updated Panel tests to utilize the new renderPanel utility, improving clarity and reducing redundancy.
- Simplified test cases for the downloadContent function, ensuring proper handling when the function is undefined.
- Enhanced test maintainability by integrating default context functions for download actions.

* refactor(CodeEditor): move language extension mapping to constants file

- Extracted the LANGUAGE_EXTENSION_MAP from CodeEditor.tsx to a new constants.ts file for better organization and maintainability.
- Simplified the extension determination logic in CodeEditor.tsx by directly referencing the imported LANGUAGE_EXTENSION_MAP.

* docs(CodeEditor): update download function

* feat(Panel): add downloadFileName property for customizable download filenames

- Introduced the `downloadFileName` property to the Panel component, allowing users to specify a custom filename for downloaded editor content.
- Updated the download handling logic to utilize the provided filename, enhancing the flexibility of the download functionality.
- Added tests to ensure correct behavior when the `downloadFileName` is specified or omitted.

* docs(README): correct default filename behavior in downloadContent example

- Upda…

Author: tsck

.changeset/new-code-editor-package.md

@@ -0,0 +1,30 @@
+---
+'@leafygreen-ui/code-editor': minor
+---
+
+Introduces a new `@leafygreen-ui/code-editor` package - a comprehensive code editor component built on CodeMirror 6.
+
+## Features
+
+**Core Editor:**
+- Syntax highlighting support for multiple programming languages (JavaScript, TypeScript, JSON, CSS, HTML, Java, C++, C#, Go, Python, PHP, Rust)
+- Code formatting with Prettier and WASM formatters
+- Line numbers, code folding, and line wrapping
+- Auto-completion and syntax-aware editing
+- Read-only mode support
+- Customizable themes (light/dark) and font sizes
+- Clickable URLs within code content
+
+**Built-in UI Features:**
+- **Panel**: Compound component providing toolbar with formatting, copy, undo/redo, download, and custom action buttons
+- Built-in context menu with copy, cut, paste functionality
+- Integrated copy button with visual feedback and tooltips
+- Diagnostic tooltips for displaying errors, warnings, and information
+
+**Accessibility & Testing:**
+- Full keyboard navigation support
+- Screen reader compatibility
+- Comprehensive test utilities for component testing
+- Storybook integration with multiple usage examples
+
+The package includes extensive TypeScript support, modular architecture for tree-shaking, and follows LeafyGreen design system patterns for consistent styling and behavior.

README.md

@@ -79,6 +79,7 @@ import Button from '@leafygreen-ui/button';
 | [@leafygreen-ui/checkbox](./packages/checkbox)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/checkbox)](https://www.npmjs.com/package/@leafygreen-ui/checkbox)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/checkbox?color=white)            | [Live Example](http://mongodb.design/component/checkbox/live-example)                 |
 | [@leafygreen-ui/chip](./packages/chip)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/chip)](https://www.npmjs.com/package/@leafygreen-ui/chip)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/chip?color=white)                | [Live Example](http://mongodb.design/component/chip/live-example)                     |
 | [@leafygreen-ui/code](./packages/code)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/code)](https://www.npmjs.com/package/@leafygreen-ui/code)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/code?color=white)                | [Live Example](http://mongodb.design/component/code/live-example)                     |
+| [@leafygreen-ui/code-editor](./packages/code-editor)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/code-editor)](https://www.npmjs.com/package/@leafygreen-ui/code-editor)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/code-editor?color=white)         | [Live Example](http://mongodb.design/component/code-editor/live-example)              |
 | [@leafygreen-ui/combobox](./packages/combobox)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/combobox)](https://www.npmjs.com/package/@leafygreen-ui/combobox)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/combobox?color=white)            | [Live Example](http://mongodb.design/component/combobox/live-example)                 |
 | [@leafygreen-ui/confirmation-modal](./packages/confirmation-modal)   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/confirmation-modal)](https://www.npmjs.com/package/@leafygreen-ui/confirmation-modal)   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/confirmation-modal?color=white)  | [Live Example](http://mongodb.design/component/confirmation-modal/live-example)       |
 | [@leafygreen-ui/context-drawer](./packages/context-drawer)           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/context-drawer)](https://www.npmjs.com/package/@leafygreen-ui/context-drawer)           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/context-drawer?color=white)      | [Live Example](http://mongodb.design/component/context-drawer/live-example)           |

packages/code-editor/README.md

@@ -0,0 +1,88 @@
+{
+  "name": "@leafygreen-ui/code-editor",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Code Editor",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./testing": {
+      "require": "./dist/umd/testing/index.js",
+      "import": "./dist/esm/testing/index.js",
+      "types": "./dist/types/testing/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "lg-build bundle",
+    "tsc": "lg-build tsc",
+    "docs": "lg-build docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-php": "^6.0.1",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.1",
+    "@codemirror/language": "^6.11.0",
+    "@codemirror/legacy-modes": "^6.5.1",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
+    "@leafygreen-ui/a11y": "workspace:^",
+    "@leafygreen-ui/badge": "^10.1.0",
+    "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
+    "@leafygreen-ui/icon": "workspace:^",
+    "@leafygreen-ui/icon-button": "workspace:^",
+    "@leafygreen-ui/leafygreen-provider": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/menu": "workspace:^",
+    "@leafygreen-ui/modal": "^20.0.0",
+    "@leafygreen-ui/palette": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/tooltip": "workspace:^",
+    "@leafygreen-ui/typography": "^22.1.0",
+    "@lezer/highlight": "^1.2.1",
+    "@lg-tools/test-harnesses": "^0.3.4",
+    "@replit/codemirror-lang-csharp": "^6.2.0",
+    "@uiw/codemirror-extensions-hyper-link": "^4.23.12",
+    "@wasm-fmt/clang-format": "^20.1.7",
+    "@wasm-fmt/gofmt": "^0.4.9",
+    "@wasm-fmt/ruff_fmt": "^0.10.0",
+    "codemirror": "^6.0.2",
+    "prettier": "2.8.8"
+  },
+  "devDependencies": {
+    "@lg-tools/build": "workspace:^",
+    "@storybook/test": "^8.6.14"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "workspace:^"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/code-editor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  }
+}