Update CodeMirror

packages/redux-devtools-ui/package.json

@@ -42,13 +42,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/view": "^6.37.2",
     "@rjsf/core": "^5.24.10",
     "@rjsf/utils": "^5.24.10",
     "@rjsf/validator-ajv8": "^5.24.10",
-    "@types/codemirror": "^5.60.15",
     "@types/json-schema": "^7.0.15",
     "@types/simple-element-resize-detector": "^1.3.3",
-    "codemirror": "^5.65.19",
+    "@uiw/react-codemirror": "^4.23.13",
     "color": "^5.0.0",
     "react-base16-styling": "workspace:^",
     "react-icons": "^5.5.0",

packages/redux-devtools-ui/src/Editor/Editor.stories.tsx

@@ -24,14 +24,12 @@ export const Default: Story = {
   args: {
     value,
     lineNumbers: true,
-    lineWrapping: false,
     foldGutter: true,
     readOnly: false,
     autofocus: true,
   },
   argTypes: {
     autofocus: { control: { disable: true } },
-    mode: { control: { disable: true } },
     theme: { control: { disable: true } },
     onChange: { control: { disable: true } },
   },
@@ -45,8 +43,6 @@ export const WithTabs: StoryObj<WithTabsProps> = {
   },
   argTypes: {
     value: { control: { disable: true } },
-    mode: { control: { disable: true } },
-    lineWrapping: { control: { disable: true } },
     readOnly: { control: { disable: true } },
     theme: { control: { disable: true } },
     foldGutter: { control: { disable: true } },

packages/redux-devtools-ui/src/Editor/Editor.tsx

@@ -1,18 +1,13 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
-import CodeMirror, { EditorChange } from 'codemirror';
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
 import type { Base16Theme } from 'react-base16-styling';
 import { defaultStyle, themedStyle } from './styles';
 import { Theme } from '../themes/default';
-
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/fold/foldcode';
-import 'codemirror/addon/fold/brace-fold';
+import type { ViewUpdate } from '@codemirror/view';
 
 import '../../fonts/index.css';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/addon/fold/foldgutter.css';
 
 const EditorContainer = styled.div(
   '' as unknown as TemplateStringsArray,
@@ -23,86 +18,34 @@ const EditorContainer = styled.div(
 );
 
 export interface EditorProps {
-  value: string;
-  mode: string;
-  lineNumbers: boolean;
-  lineWrapping: boolean;
-  readOnly: boolean;
+  value?: string;
+  lineNumbers?: boolean;
+  readOnly?: boolean;
   theme?: Base16Theme;
-  foldGutter: boolean;
-  autofocus: boolean;
-  onChange?: (value: string, change: EditorChange) => void;
+  foldGutter?: boolean;
+  autofocus?: boolean;
+  onChange?: (value: string, viewUpdate: ViewUpdate) => void;
 }
 
-/**
- * Based on [CodeMirror](http://codemirror.net/).
- */
-export default class Editor extends Component<EditorProps> {
-  cm?: CodeMirror.Editor | null;
-  node?: HTMLDivElement | null;
-
-  componentDidMount() {
-    this.cm = CodeMirror(this.node!, {
-      value: this.props.value,
-      mode: this.props.mode,
-      lineNumbers: this.props.lineNumbers,
-      lineWrapping: this.props.lineWrapping,
-      readOnly: this.props.readOnly,
-      autofocus: this.props.autofocus,
-      foldGutter: this.props.foldGutter,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-    });
-
-    if (this.props.onChange) {
-      this.cm.on('change', (doc, change) => {
-        this.props.onChange!(doc.getValue(), change);
-      });
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: EditorProps) {
-    if (nextProps.value !== this.cm!.getValue()) {
-      this.cm!.setValue(nextProps.value);
-    }
-    if (nextProps.readOnly !== this.props.readOnly) {
-      this.cm!.setOption('readOnly', nextProps.readOnly);
-    }
-    if (nextProps.lineNumbers !== this.props.lineNumbers) {
-      this.cm!.setOption('lineNumbers', nextProps.lineNumbers);
-    }
-    if (nextProps.lineWrapping !== this.props.lineWrapping) {
-      this.cm!.setOption('lineWrapping', nextProps.lineWrapping);
-    }
-    if (nextProps.foldGutter !== this.props.foldGutter) {
-      this.cm!.setOption('foldGutter', nextProps.foldGutter);
-    }
-  }
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  componentWillUnmount() {
-    const node = this.node!;
-    node.removeChild(node.children[0]);
-    this.cm = null;
-  }
-
-  getRef: React.RefCallback<HTMLDivElement> = (node) => {
-    this.node = node;
-  };
-
-  render() {
-    return <EditorContainer ref={this.getRef} theme={this.props.theme} />;
-  }
-
-  static defaultProps = {
-    value: '',
-    mode: 'javascript',
-    lineNumbers: true,
-    lineWrapping: false,
-    readOnly: false,
-    foldGutter: true,
-    autofocus: false,
-  };
+export default function Editor({
+  value = '',
+  lineNumbers = true,
+  readOnly = false,
+  foldGutter = true,
+  autofocus = false,
+  onChange,
+}: EditorProps) {
+  return (
+    <CodeMirror
+      value={value}
+      extensions={[javascript()]}
+      onChange={onChange}
+      readOnly={readOnly}
+      autoFocus={autofocus}
+      basicSetup={{
+        lineNumbers,
+        foldGutter,
+      }}
+    />
+  );
 }

packages/redux-devtools-ui/test/Editor.test.tsx

@@ -1,40 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Editor } from '../src';
-import 'codemirror/mode/javascript/javascript';
 
 describe('Editor', function () {
-  const getBoundingClientRect = jest.fn();
-  const getClientRects = jest.fn();
-
-  // See https://github.com/jsdom/jsdom/issues/3002
-  document.createRange = () => {
-    const range = new Range();
-
-    range.getBoundingClientRect = getBoundingClientRect;
-
-    range.getClientRects = () => {
-      getClientRects();
-      return {
-        item: () => null,
-        length: 0,
-        [Symbol.iterator]: jest.fn(),
-      };
-    };
-
-    return range;
-  };
   const { container } = render(<Editor value="var a = 1;" />);
 
   it('renders correctly', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
-
-  it('calls getBoundingClientRect', () => {
-    expect(getBoundingClientRect).toHaveBeenCalled();
-  });
-
-  it('calls getClientRects', () => {
-    expect(getClientRects).toHaveBeenCalled();
-  });
 });