LG-5446: CodeEditor QA Fixes (#3261)

* Vertically align panel buttons

* Fix persistent copy button styles

* More complete live example

* Decrease tooltip delay

* Add comment on decrease in tooltip speed

* Fix gutter padding when line numbers disabled

* Fix close chevron alignment

* Remove fold placeholder color

* Remove some default imports

* Make Panel respect editor width props

* Some more default imports

* Disable undo/redo on readonly

* Add change depth states (broken)

* Fix re-init editor bug on prop change

* Remove caret when readonly

* Refactor editor initialization check to remove unnecessary dependencies

* Update inert attribute handling in SearchPanel for better type compatibility

* Add context menu interaction handling to prevent selection changes

* Fix font size and dark mode

* Enhance undo/redo functionality to focus editor and scroll cursor into view after actions

* Add extension initialization tracking to CodeEditor component to prevent unstyled render

* Refactor editor initialization to use requestAnimationFrame for better rendering control and optimize extension return with useMemo for performance

* Update contact form header by removing emoji for a cleaner presentation

* Dynamically calculate height of loader based on future content

* Add additional configuration options to PanelTestContextConfig for enhanced testing capabilities

* Add loading indicator integration to CodeEditor component, including styles and package configuration

* Fix container width

* Update gutter position style in useThemeExtension to improve shadow visibility

* feat(code-editor): render top and bottom shadows

* fix(code-editor): update selector for editor styles to improve specificity

* feat(code-editor): add configurable top and bottom shadows to editor styles

* refactor(code-editor): rename InnerEditor selector to Scroller for consistency

* chore(code-editor): remove polished dependency and related imports from package.json and styles

* feat(code-editor): implement scroll shadows for overflow indication in editor

* feat(code-editor): integrate lodash for debounced scroll shadow updates

* refactor(code-editor): remove lodash dependency and optimize scroll shadow handling

* refactor(code-editor): remove unused styles from useThemeExtension for cleaner code

* Fix inner height issue

* feat(code-editor): add LoadingWithPanel story and adjust styles for panel integration

* Fix panel tests

* Remove Spinner

* WIP: Fix tests

* Remove unused logs

* Refactor tests

* All tests passing

* Linting passed

* refactor(code-editor): remove overflow shadow styles and update gutter background color

* refactor(code-editor): remove unused theme prop from CodeEditor styles and component

* Fix interaction tests by using preloaded modules to prevent loading

* changeset

* Misc comments and cleanup

* copilot review fixes

* Fix copy tooltip in darkmode

* CR feedback

* Use test utils to get panel

* Update changeset to major release

* CR feedback

* Fix build

* Fix darkMode again on prettify button

Author: tsck

.changeset/bumpy-turtles-start.md

@@ -0,0 +1,24 @@
+---
+'@leafygreen-ui/code-editor': major
+---
+
+This release marks the V1.0.0 release of `@leafygreen-ui/code-editor`.
+
+Fixes remaining known of bugs. These include:
+
+- Adds gutter padding between the border and the caret when line numbers are turned off
+- Fixes icon button vertical alignment in the panel
+- Adds comprehensive story, that also include tooltips
+- Increases tooltip speed
+- Fixes collapsed chevron alignment
+- Darkens unfold icon in dark mode
+- Fixes widths. This includes making sure the panel and editor containers respect any set widths
+- Corrects the color of the copied icon checkmark
+- Disabled undo/redo when no undo/redo actions are available
+- Hides blinking cursor when editor is in read only mode
+- Allows for CTRL+click to pull up the context menu without losing the selection.
+- Insert the cursor in the location of the undone action when the undo button is pressed in the panel menu
+- Sets the loading height to be the same height as the future rendered editor
+- Persists editor when props change
+- Assures that font size and dark mode are respected in the panel
+- Enhances tests

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

@@ -16,6 +16,7 @@ import {
   CopyButtonAppearance,
   IndentUnits,
 } from './CodeEditor/CodeEditor.types';
+import { preLoadedModules } from './testing/preLoadedModules';
 import { CodeEditor, LanguageName } from '.';
 
 const meta: StoryMetaType<typeof CodeEditor> = {
@@ -196,6 +197,7 @@ export const ErrorTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -227,6 +229,7 @@ export const HintTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -258,6 +261,7 @@ export const InfoTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -289,6 +293,7 @@ export const WarningTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -319,6 +324,7 @@ export const ContextMenuOnRightClick: StoryObj<{}> = {
   render: () => {
     return (
       <CodeEditor
+        preLoadedModules={preLoadedModules}
         customContextMenuItems={[{ label: 'Custom Action', action: () => {} }]}
       />
     );

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

@@ -25,7 +25,10 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { Modal } from '@leafygreen-ui/modal';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
-import { CopyButtonAppearance } from './CodeEditor/CodeEditor.types';
+import {
+  CodeEditorTooltipSeverity,
+  CopyButtonAppearance,
+} from './CodeEditor/CodeEditor.types';
 import { LanguageName } from './CodeEditor/hooks/extensions/useLanguageExtension';
 import { IndentUnits } from './CodeEditor';
 import { ShortcutTable } from './ShortcutTable';
@@ -172,12 +175,64 @@ export default meta;
 const Template: StoryFn<typeof CodeEditor> = args => <CodeEditor {...args} />;
 
 export const LiveExample = Template.bind({});
-
-export const WithPanel = Template.bind({});
 const language = LanguageName.tsx;
-WithPanel.args = {
+LiveExample.args = {
   language,
   defaultValue: codeSnippets[language],
+  tooltips: [
+    {
+      line: 4,
+      column: 11,
+      length: 11,
+      messages: ['This is an error tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Error,
+    },
+    {
+      line: 10,
+      column: 25,
+      length: 8,
+      messages: ['This is an info tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Info,
+    },
+    {
+      line: 12,
+      column: 14,
+      length: 7,
+      messages: ['This is an hint tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Hint,
+    },
+    {
+      line: 28,
+      column: 11,
+      length: 11,
+      messages: ['This is an warning tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Warning,
+    },
+  ],
   children: (
     <CodeEditor.Panel
       showCopyButton
@@ -196,11 +251,37 @@ WithPanel.args = {
   ),
 };
 
+export const Minimal = Template.bind({});
+Minimal.args = {
+  enableLineNumbers: false,
+};
+
 export const Loading = Template.bind({});
 Loading.args = {
   isLoading: true,
 };
 
+export const LoadingWithPanel = Template.bind({});
+LoadingWithPanel.args = {
+  isLoading: true,
+  children: (
+    <CodeEditor.Panel
+      showCopyButton
+      showFormatButton
+      showSecondaryMenuButton
+      customSecondaryButtons={[
+        {
+          label: 'Custom Button',
+          onClick: () => {},
+          'aria-label': 'Custom Button',
+          glyph: <CloudIcon />,
+        },
+      ]}
+      title={`index.${language}`}
+    />
+  ),
+};
+
 /**
  * Syntax Highlighting Examples / Regressions
  * These have been hardcoded for now, but we could potentially determine a good

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

@@ -0,0 +1,112 @@
+import { renderCodeEditor } from './CodeEditor.testUtils';
+import { LanguageName } from './hooks';
+
+// Enhanced MutationObserver mock for CodeMirror compatibility
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+  takeRecords: jest.fn().mockReturnValue([]),
+}));
+
+// Mock ResizeObserver which is used by CodeMirror
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// Mock IntersectionObserver which may be used by CodeMirror
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+  root: null,
+  rootMargin: '',
+  thresholds: [],
+}));
+
+describe('packages/code-editor/CodeEditor imperative handle', () => {
+  test('getContents works', () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'test',
+    });
+    expect(editor.getHandle().getContents()).toBe('test');
+  });
+
+  test('getEditorViewInstance works', () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'console.log("hello")',
+    });
+    expect(editor.getHandle().getEditorViewInstance()).toBeDefined();
+  });
+
+  test('undo and redo works', async () => {
+    const initialContent = 'console.log("hello");';
+    const { editor } = renderCodeEditor({
+      defaultValue: initialContent,
+    });
+    const handle = editor.getHandle();
+    expect(handle.getContents()).toBe(initialContent);
+
+    // Make a change
+    editor.interactions.insertText('\nconsole.log("world");');
+    const content = handle.getContents();
+    expect(handle.getContents()).toBe(
+      'console.log("hello");\nconsole.log("world");',
+    );
+
+    // Undo the change
+    const undoResult = handle.undo();
+    expect(undoResult).toBe(true);
+    expect(handle.getContents()).toBe(initialContent);
+
+    // Redo the change
+    const redoResult = editor.interactions.redo();
+    expect(redoResult).toBe(true);
+    expect(handle.getContents()).toBe(content);
+  });
+
+  test('undo returns false when there is nothing to undo', async () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'test',
+    });
+    const undoResult = editor.getHandle().undo();
+    expect(undoResult).toBe(false);
+  });
+
+  test('redo returns false when there is nothing to redo', async () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'test',
+    });
+    const redoResult = editor.getHandle().redo();
+    expect(redoResult).toBe(false);
+  });
+
+  test('formatCode works', async () => {
+    const { editor } = renderCodeEditor({
+      language: LanguageName.javascript,
+      defaultValue: "console.log('hello')",
+    });
+    const handle = editor.getHandle();
+    await handle.formatCode();
+    expect(handle.getContents()).toBe("console.log('hello');\n");
+  });
+
+  test('isFormattingAvailable returns true when formatting is available', () => {
+    const { editor } = renderCodeEditor({
+      language: LanguageName.javascript,
+      defaultValue: "console.log('hello')",
+    });
+    const handle = editor.getHandle();
+    expect(handle.isFormattingAvailable).toBe(true);
+  });
+
+  test('isFormattingAvailable returns false when formatting is not available', () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'plain text',
+    });
+    const handle = editor.getHandle();
+    expect(handle.isFormattingAvailable).toBe(false);
+  });
+});