Merge 533c813166 into 1e3fb5e27a

2025-07-09 15:52:26 +03:00 · 2025-06-17 19:46:45 -04:00 · 2025-06-17 19:46:45 -04:00 · d818d8c834
commit d818d8c834
parent 1e3fb5e27a 533c813166
5 changed files with 241 additions and 146 deletions
--- a/packages/redux-devtools-ui/package.json
+++ b/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",
--- a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
+++ b/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 } },
--- a/packages/redux-devtools-ui/src/Editor/Editor.tsx
+++ b/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,
+      }}
+    />
+  );
 }
--- a/packages/redux-devtools-ui/test/Editor.test.tsx
+++ b/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();
-  });
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -2360,6 +2360,12 @@ importers:
      '@babel/runtime':
        specifier: ^7.27.1
        version: 7.27.1
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.4
+        version: 6.2.4
+      '@codemirror/view':
+        specifier: ^6.37.2
+        version: 6.37.2
      '@rjsf/core':
        specifier: ^5.24.10
        version: 5.24.10(@rjsf/utils@5.24.10(react@19.1.0))(react@19.1.0)
@ -2369,18 +2375,15 @@ importers:
      '@rjsf/validator-ajv8':
        specifier: ^5.24.10
        version: 5.24.10(@rjsf/utils@5.24.10(react@19.1.0))
-      '@types/codemirror':
-        specifier: ^5.60.15
-        version: 5.60.15
      '@types/json-schema':
        specifier: ^7.0.15
        version: 7.0.15
      '@types/simple-element-resize-detector':
        specifier: ^1.3.3
        version: 1.3.3
-      codemirror:
-        specifier: ^5.65.19
-        version: 5.65.19
+      '@uiw/react-codemirror':
+        specifier: ^4.23.13
+        version: 4.23.13(@babel/runtime@7.27.1)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.37.2)(codemirror@6.0.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      color:
        specifier: ^5.0.0
        version: 5.0.0
@ -3547,6 +3550,33 @@ packages:
  '@changesets/write@0.4.0':
    resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}

+  '@codemirror/autocomplete@6.18.6':
+    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
+
+  '@codemirror/commands@6.8.1':
+    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
+
+  '@codemirror/lang-javascript@6.2.4':
+    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
+
+  '@codemirror/language@6.11.0':
+    resolution: {integrity: sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==}
+
+  '@codemirror/lint@6.8.5':
+    resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
+
+  '@codemirror/search@6.5.11':
+    resolution: {integrity: sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==}
+
+  '@codemirror/state@6.5.2':
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+
+  '@codemirror/view@6.37.2':
+    resolution: {integrity: sha512-XD3LdgQpxQs5jhOOZ2HRVT+Rj59O4Suc7g2ULvZ+Yi8eCkickrkZ5JFuoDhs2ST1mNI5zSsNYgR3NGa4OUrbnw==}
+
  '@cspotcode/source-map-support@0.8.1':
    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
    engines: {node: '>=12'}
@ -4075,12 +4105,27 @@ packages:
  '@leichtgewicht/ip-codec@2.0.5':
    resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}

+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/javascript@1.5.1':
+    resolution: {integrity: sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
  '@manypkg/find-root@1.1.0':
    resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}

  '@manypkg/get-packages@1.1.3':
    resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}

+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
  '@mswjs/data@0.16.2':
    resolution: {integrity: sha512-/C0d/PBcJyQJokUhcjO4HiZPc67hzllKlRtD1XELygl2t991/ATAAQJVcStn4YtVALsNodruzOHT0JIvgr0hnA==}

@ -4591,9 +4636,6 @@ packages:
  '@types/chrome@0.0.323':
    resolution: {integrity: sha512-ipiDwx41lmGeLnbiT6ENOayvWXdkqKqNwqDQWEuz6dujaX7slSkk1nbSt5Q5c6xnQ708+kuCFrC00VLltSbWVA==}

-  '@types/codemirror@5.60.15':
-    resolution: {integrity: sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==}
-
  '@types/color-convert@2.0.4':
    resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}

@ -4955,9 +4997,6 @@ packages:
  '@types/supertest@6.0.3':
    resolution: {integrity: sha512-8WzXq62EXFhJ7QsH3Ocb/iKQ/Ty9ZVWnVzoTKc9tyyFRRF3a74Tk2+TLFgaFFw364Ere+npzHKEJ6ga2LzIL7w==}

-  '@types/tern@0.23.9':
-    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
-
  '@types/tough-cookie@4.0.5':
    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}

@ -5038,6 +5077,28 @@ packages:
    resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@uiw/codemirror-extensions-basic-setup@4.23.13':
+    resolution: {integrity: sha512-U1CnDFpq6ydNqrRDS5Bdnvgso8ezwwbrmKvmAD3hmoVyRDsDU6HTtmcV+w0rZ3kElUCkKI5lY0DMvTTQ4+L3RQ==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
+  '@uiw/react-codemirror@4.23.13':
+    resolution: {integrity: sha512-y65ULzxOAfpxrA/8epoAOeCfmJXu9z0P62BbGOkITJTtU7WI59KfPbbwj35npSsMAkAmDE841qZo2I8jst/THg==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
  '@vitest/expect@3.0.9':
    resolution: {integrity: sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==}

@ -5858,8 +5919,8 @@ packages:
    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}

-  codemirror@5.65.19:
-    resolution: {integrity: sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==}
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}

  collect-v8-coverage@1.0.2:
    resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
@ -6043,6 +6104,9 @@ packages:
  create-require@1.1.1:
    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}

+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
  cross-env@7.0.3:
    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@ -9452,6 +9516,9 @@ packages:
    peerDependencies:
      webpack: ^5.27.0

+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
  stylis@4.2.0:
    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}

@ -9924,6 +9991,9 @@ packages:
    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
    engines: {node: '>=0.10.0'}

+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
  w3c-xmlserializer@4.0.0:
    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
    engines: {node: '>=14'}
@ -11336,6 +11406,69 @@ snapshots:
      human-id: 4.1.1
      prettier: 2.8.8

+  '@codemirror/autocomplete@6.18.6':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.8.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-javascript@6.2.4':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/lint': 6.8.5
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+      '@lezer/javascript': 1.5.1
+
+  '@codemirror/language@6.11.0':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.5':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.11':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.2':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.2':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/highlight': 1.2.1
+
+  '@codemirror/view@6.37.2':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      crelt: 1.0.6
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
  '@cspotcode/source-map-support@0.8.1':
    dependencies:
      '@jridgewell/trace-mapping': 0.3.9
@ -11936,6 +12069,22 @@ snapshots:

  '@leichtgewicht/ip-codec@2.0.5': {}

+  '@lezer/common@1.2.3': {}
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/javascript@1.5.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
  '@manypkg/find-root@1.1.0':
    dependencies:
      '@babel/runtime': 7.27.1
@ -11952,6 +12101,8 @@ snapshots:
      globby: 11.1.0
      read-yaml-file: 1.1.0

+  '@marijn/find-cluster-break@1.0.2': {}
+
  '@mswjs/data@0.16.2(@types/node@22.15.21)(typescript@5.8.3)':
    dependencies:
      '@types/lodash': 4.17.17
@ -12469,10 +12620,6 @@ snapshots:
      '@types/filesystem': 0.0.36
      '@types/har-format': 1.2.16

-  '@types/codemirror@5.60.15':
-    dependencies:
-      '@types/tern': 0.23.9
-
  '@types/color-convert@2.0.4':
    dependencies:
      '@types/color-name': 1.1.5
@ -12899,10 +13046,6 @@ snapshots:
      '@types/methods': 1.1.4
      '@types/superagent': 8.1.9

-  '@types/tern@0.23.9':
-    dependencies:
-      '@types/estree': 1.0.7
-
  '@types/tough-cookie@4.0.5': {}

  '@types/use-sync-external-store@0.0.6': {}
@ -13011,6 +13154,33 @@ snapshots:
      '@typescript-eslint/types': 8.32.1
      eslint-visitor-keys: 4.2.0

+  '@uiw/codemirror-extensions-basic-setup@4.23.13(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.8.1)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.1
+      '@codemirror/language': 6.11.0
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.11
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+
+  '@uiw/react-codemirror@4.23.13(@babel/runtime@7.27.1)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.37.2)(codemirror@6.0.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.1
+      '@codemirror/commands': 6.8.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/theme-one-dark': 6.1.2
+      '@codemirror/view': 6.37.2
+      '@uiw/codemirror-extensions-basic-setup': 4.23.13(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.8.1)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      codemirror: 6.0.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+
  '@vitest/expect@3.0.9':
    dependencies:
      '@vitest/spy': 3.0.9
@ -14265,7 +14435,15 @@ snapshots:

  co@4.6.0: {}

-  codemirror@5.65.19: {}
+  codemirror@6.0.1:
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.1
+      '@codemirror/language': 6.11.0
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.11
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2

  collect-v8-coverage@1.0.2: {}

@ -14444,6 +14622,8 @@ snapshots:

  create-require@1.1.1: {}

+  crelt@1.0.6: {}
+
  cross-env@7.0.3:
    dependencies:
      cross-spawn: 7.0.6
@ -18515,6 +18695,8 @@ snapshots:
    dependencies:
      webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1)

+  style-mod@4.1.2: {}
+
  stylis@4.2.0: {}

  sumchecker@3.0.1:
@ -18983,6 +19165,8 @@ snapshots:

  void-elements@3.1.0: {}

+  w3c-keyname@2.2.8: {}
+
  w3c-xmlserializer@4.0.0:
    dependencies:
      xml-name-validator: 4.0.0