Skip to content

refactor(greenhouse): migrate YamlViewer from @uiw/react-codemirror to native CodeMirror packages#1510

Open
ArtieReus wants to merge 2 commits intomainfrom
artie-yaml-viewer-native-packages
Open

refactor(greenhouse): migrate YamlViewer from @uiw/react-codemirror to native CodeMirror packages#1510
ArtieReus wants to merge 2 commits intomainfrom
artie-yaml-viewer-native-packages

Conversation

@ArtieReus
Copy link
Collaborator

@ArtieReus ArtieReus commented Mar 6, 2026

Summary

Refactors the YamlViewer component to use native CodeMirror packages instead of the @uiw/react-codemirror wrapper

Changes Made

  • Migrated from @uiw/react-codemirror wrapper to native CodeMirror 6 API
  • Separated editor creation and content update logic into distinct effects
  • Extracted extensions configuration into createEditorExtensions() function for better organization
  • Used ref (initialContentRef) to store initial content and prevent unnecessary effect re-runs

Benefits

  • No React version constraint from CodeMirror packages - The native packages are framework-agnostic.
  • Smaller bundle size: Removed unnecessary wrapper dependency
  • Better performance: Editor instance is now created only once, preserving cursor position, undo history, and scroll position
  • More control: Direct access to CodeMirror API allows for more customization
  • Consistent theming: Using @codemirror/theme-one-dark for the same dark theme appearance

Related Issues

Screenshots (if applicable)

Screenshot 2026-03-06 at 11 21 42 Screenshot 2026-03-06 at 11 21 50

Testing Instructions

  1. pnpm i
  2. pnpm TASK

Checklist

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • I have made corresponding changes to the documentation (if applicable).
  • My changes generate no new warnings or errors.
  • I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

@ArtieReus ArtieReus requested a review from a team as a code owner March 6, 2026 10:23
@changeset-bot
Copy link

changeset-bot bot commented Mar 6, 2026

🦋 Changeset detected

Latest commit: 7ef50ab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudoperators/juno-app-greenhouse Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@ArtieReus ArtieReus self-assigned this Mar 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants