Merge 01fd009f58 into 62cb6ddc25

packages/redux-devtools-ui/package.json

@@ -42,13 +42,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/view": "^6.39.7",
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
     "@types/codemirror": "^5.60.17",
     "@types/json-schema": "^7.0.15",
     "@types/simple-element-resize-detector": "^1.3.3",
-    "codemirror": "^5.65.20",
+    "@uiw/react-codemirror": "^4.25.4",
     "color": "^5.0.3",
     "react-base16-styling": "workspace:^",
     "react-icons": "^5.5.0",
@@ -75,6 +77,7 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.7",
     "babel-loader": "^10.0.0",
+    "codemirror": "^6.0.2",
     "csstype": "^3.2.3",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.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();
-  });
 });

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

@@ -2,137 +2,105 @@
 
 exports[`Editor renders correctly 1`] = `
 <div
-  class="css-1u3pnvo"
+  class="cm-theme-light"
 >
   <div
-    class="CodeMirror cm-s-default"
-    translate="no"
+    class="cm-editor ͼ1 ͼ2 ͼ4 ͼ17 ͼ15"
   >
     <div
-      style="overflow: hidden; position: relative; width: 3px; height: 0px;"
-    >
-      <textarea
-        autocapitalize="off"
-        autocorrect="off"
-        spellcheck="false"
-        style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
-        tabindex="0"
-      />
-    </div>
-    <div
-      class="CodeMirror-vscrollbar"
-      cm-not-content="true"
-      tabindex="-1"
-    >
-      <div
-        style="min-width: 1px;"
-      />
-    </div>
-    <div
-      class="CodeMirror-hscrollbar"
-      cm-not-content="true"
-      tabindex="-1"
-    >
-      <div
-        style="height: 100%; min-height: 1px;"
-      />
-    </div>
-    <div
-      class="CodeMirror-scrollbar-filler"
-      cm-not-content="true"
+      aria-live="polite"
+      class="cm-announced"
     />
     <div
-      class="CodeMirror-gutter-filler"
-      cm-not-content="true"
-    />
-    <div
-      class="CodeMirror-scroll"
+      class="cm-scroller"
       tabindex="-1"
     >
       <div
-        class="CodeMirror-sizer"
-        style="margin-left: 0px; min-width: 3px;"
+        aria-hidden="true"
+        class="cm-gutters cm-gutters-before"
+        style="min-height: 14px; position: sticky;"
       >
         <div
-          style="position: relative;"
+          class="cm-gutter cm-lineNumbers"
         >
           <div
-            class="CodeMirror-lines"
-            role="presentation"
+            class="cm-gutterElement"
+            style="height: 0px; visibility: hidden; pointer-events: none;"
           >
-            <div
-              role="presentation"
-              style="position: relative; outline: none;"
-            >
-              <div
-                class="CodeMirror-measure"
-              />
-              <div
-                class="CodeMirror-measure"
-              >
-                <pre
-                  class="CodeMirror-line"
-                  role="presentation"
-                >
-                  <span
-                    role="presentation"
-                    style="padding-right: 0.1px;"
-                  >
-                    <span
-                      class="cm-keyword"
-                    >
-                      var
-                    </span>
-                     
-                    <span
-                      class="cm-def"
-                    >
-                      a
-                    </span>
-                     
-                    <span
-                      class="cm-operator"
-                    >
-                      =
-                    </span>
-                     
-                    <span
-                      class="cm-number"
-                    >
-                      1
-                    </span>
-                    ;
-                  </span>
-                </pre>
-              </div>
-              <div
-                style="position: relative; z-index: 1;"
-              />
-              <div
-                class="CodeMirror-cursors"
-              />
-              <div
-                class="CodeMirror-code"
-                role="presentation"
-              />
-            </div>
+            9
           </div>
+          <div
+            class="cm-gutterElement cm-activeLineGutter"
+            style="height: 14px;"
+          >
+            1
+          </div>
+        </div>
+        <div
+          class="cm-gutter cm-foldGutter"
+        >
+          <div
+            class="cm-gutterElement"
+            style="height: 0px; visibility: hidden; pointer-events: none;"
+          >
+            <span
+              title="Unfold line"
+            >
+              ›
+            </span>
+          </div>
+          <div
+            class="cm-gutterElement cm-activeLineGutter"
+            style="height: 14px;"
+          />
         </div>
       </div>
       <div
-        style="position: absolute; height: 50px; width: 1px;"
-      />
-      <div
-        class="CodeMirror-gutters"
+        aria-multiline="true"
+        autocapitalize="off"
+        autocorrect="off"
+        class="cm-content"
+        contenteditable="true"
+        data-language="javascript"
+        role="textbox"
+        spellcheck="false"
+        style="tab-size: 4;"
+        translate="no"
+        writingsuggestions="false"
       >
         <div
-          class="CodeMirror-gutter CodeMirror-linenumbers"
-          style="width: 1px;"
-        />
-        <div
-          class="CodeMirror-gutter CodeMirror-foldgutter"
-        />
+          class="cm-line cm-activeLine"
+        >
+          <span
+            class="ͼb"
+          >
+            var
+          </span>
+           
+          <span
+            class="ͼg"
+          >
+            a
+          </span>
+           = 
+          <span
+            class="ͼd"
+          >
+            1
+          </span>
+          ;
+        </div>
       </div>
+      <div
+        aria-hidden="true"
+        class="cm-layer cm-layer-above cm-cursorLayer"
+        style="z-index: 150; animation-duration: 1200ms;"
+      />
+      <div
+        aria-hidden="true"
+        class="cm-layer cm-selectionLayer"
+        style="z-index: -2;"
+      />
     </div>
   </div>
 </div>

pnpm-lock.yaml

@@ -2357,6 +2357,12 @@ importers:
       '@babel/runtime':
         specifier: ^7.28.4
         version: 7.28.4
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.4
+        version: 6.2.4
+      '@codemirror/view':
+        specifier: ^6.39.7
+        version: 6.39.7
       '@rjsf/core':
         specifier: ^6.1.2
         version: 6.1.2(@rjsf/utils@6.1.2(react@19.2.3))(react@19.2.3)
@@ -2375,9 +2381,9 @@ importers:
       '@types/simple-element-resize-detector':
         specifier: ^1.3.3
         version: 1.3.3
-      codemirror:
-        specifier: ^5.65.20
-        version: 5.65.20
+      '@uiw/react-codemirror':
+        specifier: ^4.25.4
+        version: 4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.5.11)(@codemirror/state@6.5.3)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.7)(codemirror@6.0.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       color:
         specifier: ^5.0.3
         version: 5.0.3
@@ -2451,6 +2457,9 @@ importers:
       babel-loader:
         specifier: ^10.0.0
         version: 10.0.0(@babel/core@7.28.5)(webpack@5.104.1(esbuild@0.27.2))
+      codemirror:
+        specifier: ^6.0.2
+        version: 6.0.2
       csstype:
         specifier: ^3.2.3
         version: 3.2.3
@@ -3544,6 +3553,33 @@ packages:
   '@changesets/write@0.4.0':
     resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
 
+  '@codemirror/autocomplete@6.20.0':
+    resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
+
+  '@codemirror/commands@6.10.1':
+    resolution: {integrity: sha512-uWDWFypNdQmz2y1LaNJzK7fL7TYKLeUAU0npEC685OKTF3KcQ2Vu3klIM78D7I6wGhktme0lh3CuQLv0ZCrD9Q==}
+
+  '@codemirror/lang-javascript@6.2.4':
+    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
+
+  '@codemirror/language@6.12.1':
+    resolution: {integrity: sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==}
+
+  '@codemirror/lint@6.9.2':
+    resolution: {integrity: sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==}
+
+  '@codemirror/search@6.5.11':
+    resolution: {integrity: sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==}
+
+  '@codemirror/state@6.5.3':
+    resolution: {integrity: sha512-MerMzJzlXogk2fxWFU1nKp36bY5orBG59HnPiz0G9nLRebWa0zXuv2siH6PLIHBvv5TH8CkQRqjBs0MlxCZu+A==}
+
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
+  '@codemirror/view@6.39.7':
+    resolution: {integrity: sha512-3Vif9hnNHJnl2YgOtkR/wzGzhYcQ8gy3LGdUhkLUU8xSBbgsTxrE8he/CMTpeINm5TgxLe2FmzvF6IYQL/BSAg==}
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -4168,12 +4204,27 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
+  '@lezer/common@1.5.0':
+    resolution: {integrity: sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/lr@1.4.5':
+    resolution: {integrity: sha512-/YTRKP5yPPSo1xImYQk7AZZMAgap0kegzqCSYHjAL9x1AZ0ZQW+IpcEzMKagCsbTsLnVeWkxYrCNeXG8xEPrjg==}
+
   '@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==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
@@ -5106,6 +5157,28 @@ packages:
     resolution: {integrity: sha512-IrDKrw7pCRUR94zeuCSUWQ+w8JEf5ZX5jl/e6AHGSLi1/zIr0lgutfn/7JpfCey+urpgQEdrZVYzCaVVKiTwhQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@uiw/codemirror-extensions-basic-setup@4.25.4':
+    resolution: {integrity: sha512-YzNwkm0AbPv1EXhCHYR5v0nqfemG2jEB0Z3Att4rBYqKrlG7AA9Rhjc3IyBaOzsBu18wtrp9/+uhTyu7TXSRng==}
+    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.25.4':
+    resolution: {integrity: sha512-ipO067oyfUw+DVaXhQCxkB0ZD9b7RnY+ByrprSYSKCHaULvJ3sqWYC/Zen6zVQ8/XC4o5EPBfatGiX20kC7XGA==}
+    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: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -6057,8 +6130,8 @@ packages:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
-  codemirror@5.65.20:
-    resolution: {integrity: sha512-i5dLDDxwkFCbhjvL2pNjShsojoL3XHyDwsGv1jqETUoW+lzpBKKqNTUWgQwVAOa0tUm4BwekT455ujafi8payA==}
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
 
   collect-v8-coverage@1.0.3:
     resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
@@ -6227,6 +6300,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@10.1.0:
     resolution: {integrity: sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==}
     engines: {node: '>=20'}
@@ -9579,6 +9655,9 @@ packages:
     peerDependencies:
       webpack: ^5.27.0
 
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
   stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
@@ -10066,6 +10145,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@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -11503,6 +11585,69 @@ snapshots:
       human-id: 4.1.3
       prettier: 2.8.8
 
+  '@codemirror/autocomplete@6.20.0':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      '@lezer/common': 1.5.0
+
+  '@codemirror/commands@6.10.1':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      '@lezer/common': 1.5.0
+
+  '@codemirror/lang-javascript@6.2.4':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/lint': 6.9.2
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      '@lezer/common': 1.5.0
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/language@6.12.1':
+    dependencies:
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.5
+      style-mod: 4.1.3
+
+  '@codemirror/lint@6.9.2':
+    dependencies:
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.11':
+    dependencies:
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.3':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+      '@lezer/highlight': 1.2.3
+
+  '@codemirror/view@6.39.7':
+    dependencies:
+      '@codemirror/state': 6.5.3
+      crelt: 1.0.6
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
@@ -12200,6 +12345,22 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
+  '@lezer/common@1.5.0': {}
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.5
+
+  '@lezer/lr@1.4.5':
+    dependencies:
+      '@lezer/common': 1.5.0
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -12216,6 +12377,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@24.10.4)(typescript@5.9.3)':
     dependencies:
       '@types/lodash': 4.17.21
@@ -13279,6 +13442,33 @@ snapshots:
       '@typescript-eslint/types': 8.50.1
       eslint-visitor-keys: 4.2.1
 
+  '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.5.11)(@codemirror/state@6.5.3)(@codemirror/view@6.39.7)':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/commands': 6.10.1
+      '@codemirror/language': 6.12.1
+      '@codemirror/lint': 6.9.2
+      '@codemirror/search': 6.5.11
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
+
+  '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.5.11)(@codemirror/state@6.5.3)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.7)(codemirror@6.0.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@codemirror/commands': 6.10.1
+      '@codemirror/state': 6.5.3
+      '@codemirror/theme-one-dark': 6.1.3
+      '@codemirror/view': 6.39.7
+      '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.5.11)(@codemirror/state@6.5.3)(@codemirror/view@6.39.7)
+      codemirror: 6.0.2
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
@@ -14652,7 +14842,15 @@ snapshots:
 
   co@4.6.0: {}
 
-  codemirror@5.65.20: {}
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/commands': 6.10.1
+      '@codemirror/language': 6.12.1
+      '@codemirror/lint': 6.9.2
+      '@codemirror/search': 6.5.11
+      '@codemirror/state': 6.5.3
+      '@codemirror/view': 6.39.7
 
   collect-v8-coverage@1.0.3: {}
 
@@ -14799,6 +14997,8 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  crelt@1.0.6: {}
+
   cross-env@10.1.0:
     dependencies:
       '@epic-web/invariant': 1.0.0
@@ -18827,6 +19027,8 @@ snapshots:
     dependencies:
       webpack: 5.104.1(esbuild@0.27.2)(webpack-cli@6.0.1)
 
+  style-mod@4.1.3: {}
+
   stylis@4.2.0: {}
 
   sumchecker@3.0.1:
@@ -19320,6 +19522,8 @@ snapshots:
 
   void-elements@3.1.0: {}
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0