fixes 27953: migrate CodeMirror v5 to v6 (@codemirror/* packages)#28438
fixes 27953: migrate CodeMirror v5 to v6 (@codemirror/* packages)#28438satender-kumar-collate wants to merge 41 commits into
Conversation
Replaces react-codemirror2 / codemirror@5 with the modular @codemirror v6 packages. Introduces a useCodeMirror hook that mounts a single EditorView, syncs external value changes via an Annotation (suppressing spurious onChange calls), and reconfigures language/options via a Compartment. All CSS selectors, Playwright locators, and Jest mocks are updated to use CM6 class names (.cm-editor, .cm-scroller, .cm-gutters, etc.). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Code Review
|
| Compact |
|
Was this helpful? React with 👍 / 👎 | Gitar
…widget - Expand opts.mode into primitive constituents (opts.mode?.name, opts.mode?.json) in the dynamic compartment useEffect dep array to avoid unnecessary reconfigures on every render when an inline default object is passed - Change editorRef type from useRef<HTMLDivElement>(null!) to useRef<HTMLDivElement | null>(null) to remove the non-null assertion and correctly type the null case - Restore .manifest-json-widget-editor to the height:100% selector group so the height chain from the resize wrapper through to .cm-editor is maintained Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a comment on the mount useEffect documenting that the hook assumes
the host <div ref={editorRef} /> is rendered unconditionally by the
caller, and noting the edge cases (null at mount / ref replacement) that
are acceptable for current SchemaEditor / CodeEditor usage. Fixes #1 and
#2 (primitive mode deps + manifest-json-widget height chain) were already
applied in the previous commit.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Issue #1 (root cause): Replace inline mode default objects in SchemaEditor and CodeEditor with a module-level DEFAULT_MODE constant so the same reference is reused across renders, eliminating unnecessary reconfigures regardless of how the hook tracks deps. Issue #3 (edge case): Replace the empty-dep useEffect + editorRef useRef pattern with a callback ref (useCallback with no deps). React calls the callback whenever the DOM node mounts, unmounts, or is replaced, so the EditorView is always destroyed on detach — including when the host element is conditionally rendered or swapped without the parent unmounting. Update test mocks to return editorRef: jest.fn() to match the new (node: HTMLDivElement | null) => void type. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
🟡 Playwright Results — all passed (13 flaky)✅ 4303 passed · ❌ 0 failed · 🟡 13 flaky · ⏭️ 88 skipped
🟡 13 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
…CM6 .cm-content CM6 does not render `pre[role='presentation']` elements — those were CM5-specific line nodes. Tests were timing out because the locator never resolved. Replace all six occurrences with `.cm-content`, the CM6 contenteditable div that accepts input. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Drop redundant `?? false` from readOnly expression (no-constant-binary-expression): `readOnly ?? options?.readOnly === true` already yields a boolean - Remove unused `capturedOnFocus` variable from SchemaEditor.test.tsx Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
…m property test
- Replace CM6 default fold gutter markers (⌄/›) with consistent SVG chevrons
via markerDOM, fixing vertical misalignment between expanded/collapsed states
- Add CSS centering for .cm-foldGutter .cm-gutterElement to back the SVG markers
- Fix editColumnCustomProperty for date/time pickers: use picker.fill() +
picker.press('Enter') instead of page.keyboard.type(), which was failing
because global keyboard events after click() could miss the focused input;
also drop the erroneous OK-button click that raced against the panel close animation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
❌ UI Checkstyle Failed❌ ESLint + Prettier + Organise Imports (src)One or more source files have linting or formatting issues. Affected files
Fix locally (fast — only checks files changed in this branch): make ui-checkstyle-changed |
Code Review
|
| Compact |
|
Was this helpful? React with 👍 / 👎 | Gitar
|



Replaces react-codemirror2 / codemirror@5 with the modular @codemirror v6 packages. Introduces a useCodeMirror hook that mounts a single EditorView, syncs external value changes via an Annotation (suppressing spurious onChange calls), and reconfigures language/options via a Compartment. All CSS selectors, Playwright locators, and Jest mocks are updated to use CM6 class names (.cm-editor, .cm-scroller, .cm-gutters, etc.).
Fixes #27953, #3721
Type of change:
High-level design:
N/A — small change.
Tests:
Use cases covered
Unit tests
Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI screen recording / screenshots:
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Summary by Gitar
react-markdownversion10.1.0topackage.jsondependencies.readOnlyboolean logic inCodeEditorandSchemaEditorcomponents.pre[role='presentation']locators with.cm-contentclass to support CodeMirror v6 DOM structure.keyboard.typetokeyboard.insertTextfor more reliable CM6 editor input handling in Playwright tests.SchemaEditor.test.tsx.CodeMirroreditors in test suites.This will update automatically on new commits.