From c858dd1e11a578e8e742c6d890cceb7f69429251 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 24 Dec 2025 15:54:21 -0600 Subject: [PATCH 1/6] Package updates --- packages/redux-devtools-ui/package.json | 5 +- pnpm-lock.yaml | 216 +++++++++++++++++++++++- 2 files changed, 214 insertions(+), 7 deletions(-) diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json index 2084d5fc..f189711c 100644 --- a/packages/redux-devtools-ui/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 390c11b2..9d9878d0 100644 --- a/pnpm-lock.yaml +++ b/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'} @@ -11502,6 +11584,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 @@ -12199,6 +12344,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 @@ -12215,6 +12376,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 @@ -13278,6 +13441,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': @@ -14651,7 +14841,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: {} @@ -14798,6 +14996,8 @@ snapshots: create-require@1.1.1: {} + crelt@1.0.6: {} + cross-env@10.1.0: dependencies: '@epic-web/invariant': 1.0.0 @@ -18826,6 +19026,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: @@ -19319,6 +19521,8 @@ snapshots: void-elements@3.1.0: {} + w3c-keyname@2.2.8: {} + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 From 685f66c9f353596115a1e0ef4fcea1665c850667 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 24 Dec 2025 15:02:10 -0600 Subject: [PATCH 2/6] Updates --- .../src/Editor/Editor.stories.tsx | 4 - .../redux-devtools-ui/src/Editor/Editor.tsx | 119 +++++------------- 2 files changed, 30 insertions(+), 93 deletions(-) diff --git a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx b/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx index e453b302..3471464c 100644 --- 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 = { }, 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 } }, diff --git a/packages/redux-devtools-ui/src/Editor/Editor.tsx b/packages/redux-devtools-ui/src/Editor/Editor.tsx index 1e2b9b46..902212d6 100644 --- a/packages/redux-devtools-ui/src/Editor/Editor.tsx +++ b/packages/redux-devtools-ui/src/Editor/Editor.tsx @@ -1,18 +1,11 @@ -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 '../../fonts/index.css'; -import 'codemirror/lib/codemirror.css'; -import 'codemirror/addon/fold/foldgutter.css'; +import type { ViewUpdate } from '@codemirror/view'; const EditorContainer = styled.div( '' as unknown as TemplateStringsArray, @@ -24,85 +17,33 @@ const EditorContainer = styled.div( export interface EditorProps { value: string; - mode: string; - lineNumbers: boolean; - lineWrapping: boolean; - readOnly: boolean; + 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 { - 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 = (node) => { - this.node = node; - }; - - render() { - return ; - } - - 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 ( + + ); } From 9507accf3152a94f0ce15a13f1c64b3791171315 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 16 Jun 2025 22:33:22 -0400 Subject: [PATCH 3/6] Keep fonts import --- packages/redux-devtools-ui/src/Editor/Editor.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/redux-devtools-ui/src/Editor/Editor.tsx b/packages/redux-devtools-ui/src/Editor/Editor.tsx index 902212d6..aa172e69 100644 --- a/packages/redux-devtools-ui/src/Editor/Editor.tsx +++ b/packages/redux-devtools-ui/src/Editor/Editor.tsx @@ -7,6 +7,8 @@ import { defaultStyle, themedStyle } from './styles'; import { Theme } from '../themes/default'; import type { ViewUpdate } from '@codemirror/view'; +import '../../fonts/index.css'; + const EditorContainer = styled.div( '' as unknown as TemplateStringsArray, ({ theme }: { theme?: Base16Theme }) => From 785e757b3ddac549f06537b23f599cb69801e35e Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Tue, 17 Jun 2025 08:22:51 -0400 Subject: [PATCH 4/6] Update --- packages/redux-devtools-ui/src/Editor/Editor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/redux-devtools-ui/src/Editor/Editor.tsx b/packages/redux-devtools-ui/src/Editor/Editor.tsx index aa172e69..86e7a60f 100644 --- a/packages/redux-devtools-ui/src/Editor/Editor.tsx +++ b/packages/redux-devtools-ui/src/Editor/Editor.tsx @@ -18,7 +18,7 @@ const EditorContainer = styled.div( ); export interface EditorProps { - value: string; + value?: string; lineNumbers?: boolean; readOnly?: boolean; theme?: Base16Theme; @@ -28,7 +28,7 @@ export interface EditorProps { } export default function Editor({ - value, + value = '', lineNumbers = true, readOnly = false, foldGutter = true, From 054af676f683a9a747ac1940059e616e3274be29 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Tue, 17 Jun 2025 08:36:43 -0400 Subject: [PATCH 5/6] Update --- .../redux-devtools-ui/test/Editor.test.tsx | 29 ------------------- 1 file changed, 29 deletions(-) diff --git a/packages/redux-devtools-ui/test/Editor.test.tsx b/packages/redux-devtools-ui/test/Editor.test.tsx index 82269b85..5f717bae 100644 --- 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(); it('renders correctly', () => { expect(container.firstChild).toMatchSnapshot(); }); - - it('calls getBoundingClientRect', () => { - expect(getBoundingClientRect).toHaveBeenCalled(); - }); - - it('calls getClientRects', () => { - expect(getClientRects).toHaveBeenCalled(); - }); }); From 01fd009f583ff493123837bd6a1c2e0676c76a36 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 24 Dec 2025 15:14:22 -0600 Subject: [PATCH 6/6] Update snapshot --- .../test/__snapshots__/Editor.test.tsx.snap | 188 ++++++++---------- 1 file changed, 78 insertions(+), 110 deletions(-) diff --git a/packages/redux-devtools-ui/test/__snapshots__/Editor.test.tsx.snap b/packages/redux-devtools-ui/test/__snapshots__/Editor.test.tsx.snap index 30b18b8f..8b5855f4 100644 --- a/packages/redux-devtools-ui/test/__snapshots__/Editor.test.tsx.snap +++ b/packages/redux-devtools-ui/test/__snapshots__/Editor.test.tsx.snap @@ -2,137 +2,105 @@ exports[`Editor renders correctly 1`] = `
-